feat(AccountRoles): refs #8016 implement RoleJoin utility for role display in Account components

src/pages/Account/AccountList.vue

@@ -9,6 +9,7 @@ import filter from './Card/AccountFilter.js';
 import VnSection from 'src/components/common/VnSection.vue';
 import FetchData from 'src/components/FetchData.vue';
 import VnInputPassword from 'src/components/common/VnInputPassword.vue';
+import RoleJoin from './Role/RoleJoin';
 
 const { t } = useI18n();
 const { viewSummary } = useSummaryDialog();
@@ -58,7 +59,7 @@ const columns = computed(() => [
         columnField: {
             component: null,
         },
-        format: ({ role }, dashIfEmpty) => dashIfEmpty(role?.name),
+        format: ({ role }, dashIfEmpty) => dashIfEmpty(RoleJoin(role)),
         create: true,
     },
     {
@@ -149,12 +150,12 @@ const columns = computed(() => [
                 :right-search="false"
             >
                 <template #more-create-dialog="{ data }">
-                        <VnInputPassword
-                            :label="t('Password')"
-                            v-model="data.password"
-                            :required="true"
-                            autocomplete="new-password"
-                        />
+                    <VnInputPassword
+                        :label="t('Password')"
+                        v-model="data.password"
+                        :required="true"
+                        autocomplete="new-password"
+                    />
                 </template>
             </VnTable>
         </template>

src/pages/Account/Card/AccountDescriptor.vue

@@ -7,6 +7,7 @@ import VnImg from 'src/components/ui/VnImg.vue';
 import useHasAccount from 'src/composables/useHasAccount.js';
 import CardDescriptor from 'src/components/ui/CardDescriptor.vue';
 import AccountCard from './AccountCard.vue';
+import RoleJoin from '../Role/RoleJoin';
 
 const $props = defineProps({ id: { type: Number, default: null } });
 
@@ -44,10 +45,7 @@ onMounted(async () => {
         </template>
         <template #body="{ entity }">
             <VnLv :label="$t('account.card.nickname')" :value="entity.name" />
-            <VnLv
-                :label="$t('account.card.role')"
-                :value="entity.role.map((r) => r.role.name).join(', ')"
-            />
+            <VnLv :label="$t('account.card.role')" :value="RoleJoin(entity.role)" />
         </template>
         <template #actions="{ entity }">
             <QCardActions class="q-gutter-x-md">

src/pages/Account/Card/AccountSummary.vue

@@ -6,6 +6,7 @@ import VnLv from 'src/components/ui/VnLv.vue';
 import filter from './AccountFilter.js';
 import AccountDescriptorMenu from './AccountDescriptorMenu.vue';
 import VnTitle from 'src/components/common/VnTitle.vue';
+import RoleJoin from '../Role/RoleJoin';
 
 const $props = defineProps({ id: { type: Number, default: 0 } });
 
@@ -33,7 +34,7 @@ const entityId = computed(() => $props.id || route.params.id);
                     />
                 </QCardSection>
                 <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="RoleJoin(entity.role)" />
             </QCard>
         </template>
     </CardSummary>

src/pages/Account/Role/RoleJoin.js

@@ -0,0 +1,3 @@
+export default function (roles) {
+    return roles.map((r) => r.role.name).join(', ');
+}