refactor: implement request list action dialog and enhance messenger functionality

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

@@ -21,6 +21,8 @@ const props = withDefaults(
     grid?: boolean;
     visibleColumns?: string[];
     hideAction?: boolean;
+    hideView?: boolean;
+    checkable?: boolean;
   }>(),
   {
     row: () => [],
@@ -36,6 +38,8 @@ defineEmits<{
   (e: 'rejectCancel', data: RequestData): void;
 }>();
 
+const selected = defineModel<unknown[]>('selected');
+
 function responsiblePerson(quotation: QuotationFull): CreatedBy[] | undefined {
   const productServiceList = quotation.productServiceList;
   const tempPerson: CreatedBy[] = [];
@@ -106,12 +110,25 @@ function getEmployeeName(
     card-container-class="q-col-gutter-sm"
     :rows-per-page-options="[0]"
     class="full-width"
+    selection="multiple"
+    v-model:selected="selected"
+    :selected-rows-label="
+      (n) =>
+        $t('general.selected', {
+          number: n,
+          msg: $t('general.list'),
+        })
+    "
+    :no-data-label="$t('general.noDataTable')"
   >
     <template v-slot:header="props">
       <q-tr
         style="background-color: hsla(var(--info-bg) / 0.07)"
         :props="props"
       >
+        <q-th v-if="checkable">
+          <q-checkbox v-model="props.selected" size="sm" />
+        </q-th>
         <q-th v-for="col in props.cols" :key="col.name" :props="props">
           {{ col.label && $t(col.label) }}
         </q-th>
@@ -128,6 +145,9 @@ function getEmployeeName(
         :class="{ urgent: props.row.quotation.urgent, dark: $q.dark.isActive }"
         class="text-center"
       >
+        <q-td v-if="checkable">
+          <q-checkbox v-model="props.selected" size="sm" />
+        </q-td>
         <q-td v-if="visibleColumns.includes('order')">
           {{ props.rowIndex + 1 }}
         </q-td>
@@ -215,6 +235,7 @@ function getEmployeeName(
         </q-td>
         <q-td class="text-right">
           <q-btn
+            v-if="!hideView"
             :id="`btn-eye-${props.row.code}`"
             icon="mdi-eye-outline"
             size="sm"