feat: refs #8016 enhance role management in AccountPrivileges.vue with new suggestions and table integration

src/pages/Account/Card/AccountPrivileges.vue

@@ -1,49 +1,104 @@
 <script setup>
-import { ref, watch } from 'vue';
+import { ref, computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute } from 'vue-router';
 
 import FetchData from 'components/FetchData.vue';
-import FormModel from 'components/FormModel.vue';
-import VnSelect from 'src/components/common/VnSelect.vue';
+import VnTable from 'src/components/VnTable/VnTable.vue';
 
 const { t } = useI18n();
 const route = useRoute();
 
 const rolesOptions = ref([]);
-const formModelRef = ref();
-watch(
-    () => route.params.id,
-    () => formModelRef.value.reset()
-);
+const roleRoleRef = ref();
+const suggestions = ref([]);
+const myRoleRoles = ref([]);
+const columns = computed(() => [
+    {
+        name: 'role',
+        label: t('Role'),
+        component: 'select',
+        attrs: {
+            options: rolesOptions,
+            inputDebounce: 0,
+        },
+        format: (row) => rolesOptions.value?.find((role) => role.id === row.roleFk)?.name,
+        isEditable: false,
+        create: true,
+        columnCreate: {
+            event: {
+                'update:modelValue': (role) => suggestionNewRole(role),
+            },
+        },
+    },
+    {
+        name: 'hasGrant',
+        label: t('hasGrant'),
+        component: 'checkbox',
+        isEditable: true,
+        create: true,
+    },
+]);
+
+const suggestionColumns = computed(() => [
+    {
+        align: 'center',
+        name: 'role',
+        field: 'role',
+        label: t('Include your roles'),
+        format: (row) => rolesOptions.value?.find((role) => role.id === row)?.name,
+    },
+]);
+
+async function suggestionNewRole(role) {
+    const newRoleRole = await roleRoleRef.value.fetch({ where: { inheritsFrom: role } });
+
+    suggestions.value = newRoleRole.filter((value) =>
+        myRoleRoles.value.includes(value.role),
+    );
+}
+
+async function getMyRoleRole(roles) {
+    const myRoleRole = await roleRoleRef.value.fetch({
+        where: { inheritsFrom: { inq: roles.map((role) => role.roleFk) } },
+    });
+
+    myRoleRoles.value = myRoleRole.map((role) => role.role);
+}
 </script>
 <template>
-    <FetchData url="VnRoles" auto-load @on-fetch="(data) => (rolesOptions = data)" />
-    <FormModel
-        ref="formModelRef"
-        model="AccountPrivileges"
-        url="VnUsers/preview"
-        :filter="{ where: { id: route.params.id } }"
-        :url-create="`VnUsers/${route.params.id}/privileges`"
-        :id="route.params.id"
+    <FetchData url="VnRoles" @on-fetch="(data) => (rolesOptions = data)" auto-load />
+    <FetchData ref="roleRoleRef" url="RoleRoles" />
+    <VnTable
+        ref="vnTableRef"
+        data-key="AccountPrivileges"
+        :url="`VnUsers/${route.params.id}/role`"
+        :save-url="`VnUsers/${route.params.id}/privileges`"
+        :create="{
+            urlCreate: `VnUsers/${route.params.id}/privileges`,
+            title: t('Add Privileges'),
+            onDataSaved: () => {
+                $refs.vnTableRef.reload();
+            },
+            showSaveAndContinueBtn: true,
+            formInitialData: { hasGrant: false },
+        }"
+        :columns
+        :right-search="false"
+        :is-editable="true"
+        @on-fetch="(data) => getMyRoleRole(data)"
         auto-load
     >
-        <template #form="{ data }">
-            <div class="q-gutter-y-sm">
-                <QCheckbox
-                    v-model="data.hasGrant"
-                    :label="t('account.card.privileges.delegate')"
-                />
-                <VnSelect
-                    :label="t('account.card.role')"
-                    v-model="data.roleFk"
-                    :options="rolesOptions"
-                    option-value="id"
-                    option-label="name"
-                    hide-selected
-                    :required="true"
-                />
-            </div>
+        <template #more-create-dialog="{ data }">
+            <QTable
+                v-if="data.role && suggestions.length > 0"
+                :rows="suggestions"
+                :columns="suggestionColumns"
+            />
         </template>
-    </FormModel>
+    </VnTable>
 </template>
+<i18n>
+es:
+    Include your roles: Inluyen tus roles
+</i18n>