feat: enhance AvatarGroup to display responsible groups alongside users

src/components/shared/AvatarGroup.vue

@@ -25,7 +25,11 @@ withDefaults(
         alt="Image"
       />
     </div>
-    <div v-if="data.length > 3" class="avatar remaining-count">
+    <div
+      v-if="data.length > 3"
+      class="avatar remaining-count"
+      style="cursor: default"
+    >
       <q-tooltip>
         <div v-for="(person, i) in data.slice(3)" :key="i + 3">
           {{ person.name }}

src/pages/08_request-list/RequestListView.vue

@@ -518,8 +518,8 @@ function toEmployee(employee: RequestData['employee']) {
               v-if="responsibleList[pageState.currentStep]?.user.length"
             >
               <AvatarGroup
-                :data="
+                :data="[
-                  (responsibleList[pageState.currentStep].user || []).map(
+                  ...(responsibleList[pageState.currentStep].user || []).map(
                     (v) => ({
                       name:
                         $i18n.locale === 'eng'
@@ -531,8 +531,12 @@ function toEmployee(employee: RequestData['employee']) {
                           : `/no-img-female.png`
                         : `${baseUrl}/user/${v.id}/profile-image/${v.selectedImage}`,
                     }),
-                  )
+                  ),
-                "
+                  ...responsibleList[pageState.currentStep].group.map((g) => ({
+                    name: `${$t('general.group')} ${g}`,
+                    imgUrl: '/img-group.png',
+                  })),
+                ]"
               />
             </template>
             <template v-else>-</template>

src/pages/08_request-list/TableRequestList.vue

@@ -42,9 +42,14 @@ defineEmits<{
 
 const selected = defineModel<RequestData[]>('selected');
 
-function responsiblePerson(quotation: QuotationFull): CreatedBy[] | undefined {
+function responsiblePerson(quotation: QuotationFull) {
   const productServiceList = quotation.productServiceList;
   const tempPerson: CreatedBy[] = [];
+  const tempGroup: {
+    group: string;
+    id: string;
+    workflowTemplateStepId: string;
+  }[] = [];
 
   for (const v of productServiceList) {
     const tempStep = v.service?.workflow?.step;
@@ -55,7 +60,18 @@ function responsiblePerson(quotation: QuotationFull): CreatedBy[] | undefined {
           tempPerson.push(rhs.user);
         }
       });
-      return tempPerson;
+      tempStep.forEach((lhs) => {
+        const newGroup = lhs.responsibleGroup as unknown as {
+          group: string;
+          id: string;
+          workflowTemplateStepId: string;
+        }[];
+        for (const rhs of newGroup) {
+          tempGroup.push(rhs);
+        }
+      });
+      console.log({ user: tempPerson, group: tempGroup });
+      return { user: tempPerson, group: tempGroup };
     }
   }
 
@@ -261,7 +277,7 @@ function handleCheckAll() {
           {{ props.row.quotation.code || '-' }}
         </q-td>
         <q-td v-if="visibleColumns.includes('responsiblePerson')">
-          <AvatarGroup
+          <!-- <AvatarGroup
             :data="
               responsiblePerson(props.row.quotation)?.map((v) => {
                 return {
@@ -277,7 +293,26 @@ function handleCheckAll() {
                 };
               })
             "
-          />
+          /> -->
+          <AvatarGroup
+            :data="[
+              ...responsiblePerson(props.row.quotation).user.map((v) => ({
+                name:
+                  $i18n.locale === 'eng'
+                    ? `${v.firstNameEN} ${v.lastNameEN}`
+                    : `${v.firstName} ${v.lastName}`,
+                imgUrl: !v.selectedImage
+                  ? v.gender === 'male'
+                    ? `/no-img-man.png`
+                    : `/no-img-female.png`
+                  : `${baseUrl}/user/${v.id}/profile-image/${v.selectedImage}`,
+              })),
+              ...responsiblePerson(props.row.quotation).group.map((g) => ({
+                name: `${$t('general.group')} ${g.group}`,
+                imgUrl: '/img-group.png',
+              })),
+            ]"
+          ></AvatarGroup>
         </q-td>
         <q-td v-if="visibleColumns.includes('status')">
           <BadgeComponent
@@ -423,22 +458,29 @@ function handleCheckAll() {
             </div>
             <div class="col-8">
               <AvatarGroup
-                v-if="(responsiblePerson(props.row.quotation) ?? []).length > 0"
+                v-if="
-                :data="
+                  (responsiblePerson(props.row.quotation).user ?? []).length >
-                  responsiblePerson(props.row.quotation)?.map((v) => {
+                    0 ||
-                    return {
+                  (responsiblePerson(props.row.quotation).group ?? []).length >
-                      name:
+                    0
-                        $i18n.locale === 'eng'
-                          ? `${v.firstNameEN} ${v.lastNameEN}`
-                          : `${v.firstName} ${v.lastName}`,
-                      imgUrl: !v.selectedImage
-                        ? v.gender === 'male'
-                          ? `/no-img-man.png`
-                          : `/no-img-female.png`
-                        : `${baseUrl}/user/${v.id}/profile-image/${v.selectedImage}`,
-                    };
-                  })
                 "
+                :data="[
+                  ...responsiblePerson(props.row.quotation).user.map((v) => ({
+                    name:
+                      $i18n.locale === 'eng'
+                        ? `${v.firstNameEN} ${v.lastNameEN}`
+                        : `${v.firstName} ${v.lastName}`,
+                    imgUrl: !v.selectedImage
+                      ? v.gender === 'male'
+                        ? `/no-img-man.png`
+                        : `/no-img-female.png`
+                      : `${baseUrl}/user/${v.id}/profile-image/${v.selectedImage}`,
+                  })),
+                  ...responsiblePerson(props.row.quotation).group.map((g) => ({
+                    name: `${$t('general.group')} ${g.group}`,
+                    imgUrl: '/img-group.png',
+                  })),
+                ]"
               />
               <span v-else>-</span>
             </div>