refactor: show table request

src/pages/05_quotation/QuotationForm.vue

@@ -43,6 +43,7 @@ import {
 } from 'src/stores/product-service/types';
 
 // NOTE: Import Components
+import TableRequest from './TableRequest.vue';
 import SelectInput from 'components/shared/SelectInput.vue';
 import SwitchItem from 'components/shared/SwitchItem.vue';
 import FormEmployeePassport from 'components/03_customer-management/FormEmployeePassport.vue';
@@ -1845,7 +1846,11 @@ watch(
 
           <template v-else>
             <PaymentForm
-              v-if="view !== View.InvoicePre && view !== View.Receipt"
+              v-if="
+                view !== View.InvoicePre &&
+                view !== View.Receipt &&
+                view !== View.Complete
+              "
               :data="quotationFormState.source"
               @fetch-status="
                 () => {

src/pages/05_quotation/TableRequest.vue

@@ -0,0 +1,169 @@
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n';
+import { QTableColumn, QTableSlots } from 'quasar';
+import { computed, reactive, ref, watch } from 'vue';
+import { RequestData, RequestDataStatus } from 'src/stores/request-list/types';
+import BadgeComponent from 'components/BadgeComponent.vue';
+
+withDefaults(
+  defineProps<{
+    rows: RequestData[];
+  }>(),
+  { rows: () => [] },
+);
+
+const columns = [
+  {
+    name: 'order',
+    align: 'center',
+    label: 'general.order',
+    field: (e: RequestData & { _index: number }) => e._index + 1,
+  },
+  {
+    name: 'code',
+    align: 'center',
+    label: 'quotation.tableColumnsRequest.code',
+    field: (v: RequestData) => v.code,
+  },
+
+  {
+    name: 'employeeName',
+    align: 'left',
+    label: 'customer.employee',
+    field: (v: RequestData) => {
+      return `${v.employee.firstName} ${v.employee.lastName}`;
+    },
+  },
+  {
+    name: 'requestDataStatus',
+    align: 'left',
+    label: 'general.status',
+    field: (v: RequestData) => v.requestDataStatus,
+  },
+] satisfies QTableColumn[];
+
+const emits = defineEmits<{
+  (e: 'success'): void;
+}>();
+
+const open = defineModel<boolean>('open', { default: false });
+</script>
+
+<template>
+  <q-table
+    :rows-per-page-options="[0]"
+    :rows="
+      rows.map((data, i) => ({
+        ...data,
+        _index: i,
+      }))
+    "
+    :columns
+    hide-bottom
+    bordered
+    flat
+    hide-pagination
+    selection="multiple"
+    card-container-class="q-col-gutter-sm"
+    class="full-width"
+  >
+    <template v-slot:header="props">
+      <q-tr
+        style="background-color: hsla(var(--info-bg) / 0.07)"
+        :props="props"
+      >
+        <q-th v-for="col in columns" :key="col.name" :props="props">
+          <template v-if="!col.name.startsWith('#')">
+            {{ $t(col.label) }}
+          </template>
+        </q-th>
+      </q-tr>
+    </template>
+
+    <template
+      v-slot:body="props: {
+        row: RequestData & { _index: number };
+      } & Omit<Parameters<QTableSlots['body']>[0], 'row'>"
+    >
+      <q-tr :class="{ dark: $q.dark.isActive }" class="text-center">
+        <q-td v-for="col in columns" :align="col.align">
+          <!-- NOTE: custom column will starts with # -->
+          <template v-if="col.name !== 'requestDataStatus'">
+            <span>
+              {{
+                typeof col.field === 'string'
+                  ? props.row[col.field as keyof RequestData]
+                  : col.field(props.row)
+              }}
+            </span>
+          </template>
+
+          <template v-else>
+            <span>
+              <BadgeComponent
+                :hsla-color="
+                  props.row.requestDataStatus === RequestDataStatus.Pending
+                    ? '--orange-5-hsl'
+                    : props.row.requestDataStatus ===
+                        RequestDataStatus.InProgress
+                      ? '--blue-6-hsl'
+                      : props.row.requestDataStatus ===
+                          RequestDataStatus.Completed
+                        ? '--green-8-hsl'
+                        : '--orange-5-hsl'
+                "
+                :title="
+                  $t(`requestList.status.${props.row.requestDataStatus}`) || '-'
+                "
+              />
+            </span>
+          </template>
+        </q-td>
+      </q-tr>
+    </template>
+  </q-table>
+</template>
+
+<style scoped>
+.selectable-item {
+  padding: 0;
+  appearance: none;
+  border: none;
+  background: transparent;
+  position: relative;
+  color: inherit;
+
+  & > .selectable-item__pos {
+    display: none;
+  }
+}
+
+.selectable-item__selected {
+  & > :deep(*) {
+    border: 1px solid var(--_color, var(--brand-1)) !important;
+  }
+
+  & > .selectable-item__pos {
+    display: block;
+    position: absolute;
+    margin: var(--size-2);
+    right: 0;
+    top: 0;
+    border-radius: 50%;
+    width: 20px;
+    height: 20px;
+    color: var(--surface-1);
+    background: var(--brand-1);
+    color: currentColor;
+  }
+}
+
+.selectable-item__disabled {
+  filter: grayscale(1);
+  opacity: 0.5;
+
+  & :deep(*) {
+    cursor: not-allowed;
+  }
+}
+</style>