Selection of multiple officials and role sub-categories

apps/web/src/views/ActivityDetailView.vue

@@ -30,7 +30,18 @@ const commentOpen = ref(false);
 const postponeOpen = ref(false);
 const noteOpen = ref(true);
 const users = ref<OrgUserDto[]>([]);
-const assignUserId = ref('');
+const assignUserIds = ref<string[]>([]);
+
+const assigneeNames = computed(() => {
+  const a = activity.value;
+  if (!a) return '—';
+  const list = a.assignees?.length
+    ? a.assignees.map((u) => u.fullName)
+    : a.assignee
+      ? [a.assignee.fullName]
+      : [];
+  return list.length ? list.join('، ') : '—';
+});
 
 const typeLabel: Record<ActivityType, string> = {
   call: 'تماس',
@@ -95,7 +106,11 @@ async function load() {
   try {
     const { data } = await api.get<ActivityDto>(`/activities/${id.value}`);
     activity.value = data;
-    assignUserId.value = data.assignee?.id ?? '';
+    assignUserIds.value = data.assignees?.length
+      ? data.assignees.map((u) => u.id)
+      : data.assignee?.id
+        ? [data.assignee.id]
+        : [];
   } catch {
     error.value = 'بارگذاری جزئیات فعالیت ناموفق بود.';
     activity.value = null;
@@ -144,11 +159,16 @@ async function reopen() {
 
 async function reassign() {
   if (!id.value || !canReassign.value) return;
+  if (!assignUserIds.value.length) {
+    error.value = 'حداقل یک مسئول لازم است.';
+    return;
+  }
   saving.value = true;
   error.value = '';
   try {
     await api.patch(`/activities/${id.value}`, {
-      assigneeId: assignUserId.value || null,
+      assigneeIds: [...assignUserIds.value],
+      assigneeId: assignUserIds.value[0] || null,
     });
     await load();
   } catch {
@@ -271,25 +291,25 @@ onMounted(() => {
           <div>
             <dt>
               <UiIcon name="user" :size="15" />
-              مسئول
+              مسئولان
             </dt>
             <dd class="person">
               <template v-if="canReassign">
                 <select
-                  v-model="assignUserId"
-                  class="assign-select"
+                  v-model="assignUserIds"
+                  class="assign-select multi"
+                  multiple
                   :disabled="saving"
                   @change="reassign"
                 >
-                  <option value="">بدون مسئول</option>
                   <option v-for="u in users" :key="u.id" :value="u.id">
                     {{ u.fullName }}
                   </option>
                 </select>
+                <small class="assign-hint">با Ctrl چند نفر را انتخاب کنید</small>
               </template>
               <template v-else>
-                <UserAvatar v-if="activity.assignee" :name="activity.assignee.fullName" :size="28" />
-                {{ activity.assignee?.fullName || '—' }}
+                {{ assigneeNames }}
               </template>
             </dd>
           </div>
@@ -586,6 +606,7 @@ dd {
 .person {
   display: flex;
   align-items: center;
+  flex-wrap: wrap;
   gap: 0.45rem;
 }
 
@@ -600,6 +621,18 @@ dd {
   background: #fff;
 }
 
+.assign-select.multi {
+  min-height: 5.5rem;
+  padding: 0.35rem;
+}
+
+.assign-hint {
+  display: block;
+  margin-top: 0.3rem;
+  color: #94a3b8;
+  font-size: 0.75rem;
+}
+
 .flag.low,
 .priority.low {
   color: #64748b;