feat: simplified user attributes ui

agate-ui/src/components/UserAttributesList.vue

@@ -0,0 +1,65 @@
+<template>
+  <div>
+    <div class="text-bold">
+      {{ t('user.attributes.title') }}
+    </div>
+    <div class="text-hint q-mb-sm">
+      {{ t('user.attributes.hint') }}
+    </div>
+    <q-list>
+      <q-item v-for="(entry, idx) in attributes" :key="idx" class="q-pa-none">
+        <q-item-section>
+          <div class="row q-col-gutter-md">
+            <div class="col">
+              <q-input
+                v-model="entry.name"
+                :label="t('name')"
+                dense
+                lazy-rules
+                :rules="[(val) => !!val || t('required')]"
+                @update:model-value="onUpdate"
+              />
+            </div>
+            <div class="col">
+              <q-input
+                v-model="entry.value"
+                :label="t('value')"
+                dense
+                lazy-rules
+                :rules="[(val) => !!val || t('required')]"
+                @update:model-value="onUpdate"
+              />
+            </div>
+          </div>
+        </q-item-section>
+        <q-item-section side>
+          <q-btn flat icon="delete" color="accent" size="sm" @click="onDelete(idx)" />
+        </q-item-section>
+      </q-item>
+    </q-list>
+    <q-btn color="primary" icon="add" size="sm" @click="attributes.push({ name: '', value: '' })" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { AttributeDto } from 'src/models/Agate';
+
+interface Props {
+  modelValue: AttributeDto[] | undefined;
+}
+
+const props = defineProps<Props>();
+const emit = defineEmits(['update:modelValue']);
+const { t } = useI18n();
+
+const attributes = ref<AttributeDto[]>(props.modelValue ? [...props.modelValue] : []);
+
+function onDelete(index: number) {
+    attributes.value.splice(index, 1);
+    emit('update:modelValue', attributes.value.filter((attr) => attr.name && attr.value));
+}
+
+function onUpdate() {
+  emit('update:modelValue', attributes.value.filter((attr) => attr.name && attr.value));
+}
+</script>

agate-ui/src/components/UserDialog.vue

@@ -186,7 +186,7 @@
 import { copyToClipboard } from 'quasar';
 import type { UserDto } from 'src/models/Agate';
 import { notifyError, notifyInfo, notifySuccess } from 'src/utils/notify';
-import UserAttributesList from 'src/components/attributes/UserAttributesList.vue';
+import UserAttributesList from 'src/components/UserAttributesList.vue';
 
 const { t } = useI18n();
 const userStore = useUserStore();

agate-ui/src/i18n/en/index.js

@@ -98,6 +98,7 @@ export default {
     update_password: 'Update password',
     attributes: {
       title: 'User Attributes',
+      hint: 'Additional user information.',
       add: 'Add User Attribute',
       update: 'Update User Attribute',
       updated: 'User attribute updated successfully',

agate-ui/src/i18n/fr/index.js

@@ -98,6 +98,7 @@ export default {
     update_password: 'Mettre à jour le mot de passe',
     attributes: {
       title: 'Attributs utilisateur',
+      hint: 'Informations additionnelles sur l\'usager.',
       add: 'Ajouter un attribut d\'utilisateur',
       update: "Mettre à Jour l'attribut d'utilisateur",
       updated: 'Attribut utilisateur mis à jour avec succès',