src/components/VnTable/VnTable.vue

@@ -654,7 +654,7 @@ const rowCtrlClickFunction = computed(() => {
         :search-url="searchUrl"
         :disable-infinite-scroll="isTableMode"
         :before-save-fn="removeTextValue"
-        @save-changes="reload"
+        @save-changes="reload && emit('saveChanges')"
         :has-sub-toolbar="$props.hasSubToolbar ?? isEditable"
         :auto-load="hasParams || $attrs['auto-load']"
     >

src/components/common/VnCard.vue

@@ -1,12 +1,12 @@
 <script setup>
-import { onBeforeMount, computed } from 'vue';
+import { onBeforeMount, computed, watch } from 'vue';
 import { useRoute, useRouter, onBeforeRouteUpdate, onBeforeRouteLeave } from 'vue-router';
 import { useArrayData } from 'src/composables/useArrayData';
 import { useStateStore } from 'stores/useStateStore';
 import useCardSize from 'src/composables/useCardSize';
 import VnSubToolbar from '../ui/VnSubToolbar.vue';
 
-const emit = defineEmits(['onFetch']);
+const emit = defineEmits(['onFetch', 'onChange']);
 
 const props = defineProps({
     id: { type: Number, required: false, default: null },
@@ -71,6 +71,13 @@ async function fetch(id, append = false) {
 function hasRouteParam(params, valueToCheck = ':addressId') {
     return Object.values(params).includes(valueToCheck);
 }
+
+watch(
+    () => arrayData?.store?.data,
+    (data) => {
+        emit('onChange', data);
+    },
+);
 </script>
 <template>
     <template v-if="visual">

src/components/ui/CardDescriptor.vue

@@ -29,6 +29,12 @@ const entity = ref();
                 emit('onFetch', data);
             }
         "
+        @on-change="
+            (data) => {
+                entity = data;
+                emit('onFetch', data);
+            }
+        "
     />
     <VnDescriptor v-model="entity" v-bind="$attrs">
         <template v-for="(_, slotName) in $slots" #[slotName]="slotData" :key="slotName">

src/pages/Account/Card/AccountDescriptor.vue

@@ -1,12 +1,12 @@
 <script setup>
 import { ref, computed, onMounted } from 'vue';
 import { useRoute } from 'vue-router';
-import EntityDescriptor from 'components/ui/EntityDescriptor.vue';
 import VnLv from 'src/components/ui/VnLv.vue';
 import AccountDescriptorMenu from './AccountDescriptorMenu.vue';
 import VnImg from 'src/components/ui/VnImg.vue';
-import filter from './AccountFilter.js';
 import useHasAccount from 'src/composables/useHasAccount.js';
+import CardDescriptor from 'src/components/ui/CardDescriptor.vue';
+import AccountCard from './AccountCard.vue';
 
 const $props = defineProps({ id: { type: Number, default: null } });
 
@@ -20,13 +20,7 @@ onMounted(async () => {
 </script>
 
 <template>
-    <EntityDescriptor
-        ref="descriptor"
-        :url="`VnUsers/preview`"
-        :filter="{ ...filter, where: { id: entityId } }"
-        data-key="Account"
-        title="nickname"
-    >
+    <CardDescriptor v-bind="$attrs" :id="entityId" :card="AccountCard" module="Account">
         <template #menu>
             <AccountDescriptorMenu :entity-id="entityId" />
         </template>
@@ -50,7 +44,10 @@ onMounted(async () => {
         </template>
         <template #body="{ entity }">
             <VnLv :label="$t('account.card.nickname')" :value="entity.name" />
-            <VnLv :label="$t('account.card.role')" :value="entity.role?.name" />
+            <VnLv
+                :label="$t('account.card.role')"
+                :value="entity.role.map((r) => r.role.name).join(', ')"
+            />
         </template>
         <template #actions="{ entity }">
             <QCardActions class="q-gutter-x-md">
@@ -78,7 +75,7 @@ onMounted(async () => {
                 </QIcon>
             </QCardActions>
         </template>
-    </EntityDescriptor>
+    </CardDescriptor>
 </template>
 <style scoped>
 .q-item__label {

src/pages/Account/Card/AccountFilter.js

@@ -1,3 +1,8 @@
 export default {
-    include: { relation: 'role', scope: { fields: ['id', 'name'] } },
+    include: {
+        relation: 'role',
+        scope: {
+            include: [{ relation: 'role', scope: { fields: ['id', 'name'] } }],
+        },
+    },
 };

src/pages/Account/Card/AccountPrivileges.vue

@@ -5,17 +5,21 @@ import { useRoute } from 'vue-router';
 
 import FetchData from 'components/FetchData.vue';
 import VnTable from 'src/components/VnTable/VnTable.vue';
+import { useArrayData } from 'src/composables/useArrayData';
 
 const { t } = useI18n();
 const route = useRoute();
+const arrayData = useArrayData('Account');
 
+const vnTableRef = ref({});
 const rolesOptions = ref([]);
 const roleRoleRef = ref();
 const suggestions = ref([]);
 const myRoleRoles = ref([]);
+const selectedRows = ref([]);
 const columns = computed(() => [
     {
-        name: 'role',
+        name: 'roleFk',
         label: t('Role'),
         component: 'select',
         attrs: {
@@ -23,7 +27,6 @@ const columns = computed(() => [
             inputDebounce: 0,
         },
         format: (row) => rolesOptions.value?.find((role) => role.id === row.roleFk)?.name,
-        isEditable: false,
         create: true,
         columnCreate: {
             event: {
@@ -35,7 +38,6 @@ const columns = computed(() => [
         name: 'hasGrant',
         label: t('hasGrant'),
         component: 'checkbox',
-        isEditable: true,
         create: true,
     },
 ]);
@@ -73,20 +75,29 @@ async function getMyRoleRole(roles) {
         ref="vnTableRef"
         data-key="AccountPrivileges"
         :url="`VnUsers/${route.params.id}/role`"
-        :save-url="`VnUsers/${route.params.id}/privileges`"
+        save-url="userRoles/crud"
+        v-model:selected="selectedRows"
+        :table="{
+            'row-key': 'id',
+            selection: 'multiple',
+        }"
         :create="{
-            urlCreate: `VnUsers/${route.params.id}/privileges`,
+            urlCreate: 'userRoles/crud',
             title: t('Add Privileges'),
             onDataSaved: () => {
                 $refs.vnTableRef.reload();
             },
             showSaveAndContinueBtn: true,
             formInitialData: { hasGrant: false },
+            mapper: (data) => {
+                return { creates: [{ ...data, userFk: route.params.id }] };
+            },
         }"
         :columns
         :right-search="false"
         :is-editable="true"
         @on-fetch="(data) => getMyRoleRole(data)"
+        @save-changes="() => arrayData.fetch({})"
         auto-load
     >
         <template #more-create-dialog="{ data }">