src/pages/Account/Role/Card/RoleDescriptor.vue

@@ -15,6 +15,10 @@ const $props = defineProps({
         required: false,
         default: null,
     },
+    summary: {
+        type: Object,
+        default: null,
+    },
 });
 
 const route = useRoute();
@@ -60,14 +64,14 @@ const removeRole = () => {
 
 <template>
     <CardDescriptor
-        ref="descriptor"
+        :url="`VnRoles/${entityId}`"
-        :url="`VnRoles`"
         :filter="filter"
         module="Role"
         @on-fetch="setData"
         data-key="accountData"
         :title="data.title"
         :subtitle="data.subtitle"
+        :summary="$props.summary"
     >
         <template #menu>
             <QItem v-ripple clickable @click="removeRole()">

src/pages/Account/Role/Card/RoleDescriptorProxy.vue

@@ -0,0 +1,17 @@
+<script setup>
+import RoleDescriptor from './RoleDescriptor.vue';
+import RoleSummary from './RoleSummary.vue';
+
+const $props = defineProps({
+    id: {
+        type: Number,
+        required: true,
+    },
+});
+</script>
+
+<template>
+    <QPopupProxy>
+        <RoleDescriptor v-if="$props.id" :id="$props.id" :summary="RoleSummary" />
+    </QPopupProxy>
+</template>

src/pages/Account/Role/Card/RoleSummary.vue

@@ -30,6 +30,7 @@ const filter = {
         :url="`VnRoles`"
         :filter="filter"
         @on-fetch="(data) => (role = data)"
+        data-key="RoleSummary"
     >
         <template #header> {{ role.id }} - {{ role.name }} </template>
         <template #body>

src/pages/Worker/Card/WorkerSummary.vue

@@ -9,6 +9,7 @@ import VnLinkPhone from 'src/components/ui/VnLinkPhone.vue';
 import CardSummary from 'components/ui/CardSummary.vue';
 import VnUserLink from 'src/components/ui/VnUserLink.vue';
 import VnTitle from 'src/components/common/VnTitle.vue';
+import RoleDescriptorProxy from 'src/pages/Account/Role/Card/RoleDescriptorProxy.vue';
 
 const route = useRoute();
 const { t } = useI18n();
@@ -161,7 +162,14 @@ const filter = {
                 <VnTitle :text="t('worker.summary.userData')" />
                 <VnLv :label="t('worker.summary.userId')" :value="worker.user.id" />
                 <VnLv :label="t('worker.card.name')" :value="worker.user.nickname" />
-                <VnLv :label="t('worker.summary.role')" :value="worker.user.role.name" />
+                <VnLv :label="t('worker.summary.role')">
+                    <template #value>
+                        <span class="link">
+                            {{ worker.user.role.name }}
+                            <RoleDescriptorProxy :id="worker.user.role.id" />
+                        </span>
+                    </template>
+                </VnLv>
                 <VnLv :value="worker?.sip?.extension">
                     <template #label>
                         {{ t('worker.summary.sipExtension') }}