refactor: add table

src/components/05_quotation/TableQuotation.vue

@@ -1,32 +1,149 @@
 <script lang="ts" setup>
-import { QuotationPayload } from 'src/stores/quotations/types';
 import { QTableProps } from 'quasar';
+import { QuotationPayload } from 'src/stores/quotations/types';
+import BadgeComponent from 'components/BadgeComponent.vue';
+import KebabAction from 'components/shared/KebabAction.vue';
+import { setLocale, calculateAge, dateFormat } from 'src/utils/datetime';
+import useOptionStore from 'src/stores/options';
+
+const optionStore = useOptionStore();
 
 const props = withDefaults(
   defineProps<{
     rows: QTableProps['rows'];
     columns: QTableProps['columns'];
     grid?: boolean;
-    fieldSelected?: string[];
+    visibleColumns?: string[];
   }>(),
   {
     row: () => [],
     column: () => [],
     grid: false,
-    fieldSelected: () => [],
+    visibleColumns: () => [],
   },
 );
+
+function payCondition(value: string) {
+  if (value === 'Full') return 'quotation.type.fullAmountCash';
+  if (value === 'Split') return 'quotation.type.installmentsCash';
+  if (value === 'SplitCustom') return 'quotation.type.installmentsCustomCash';
+
+  return '';
+}
+
+function quotationStatus(value: string) {
+  if (value === 'Issued') return 'quotation.status.Issued';
+  if (value === 'Accepted') return 'quotation.status.Accepted';
+  if (value === 'Expired') return 'quotation.status.Expired';
+  if (value === 'PaymentInProcess') return 'quotation.status.PaymentInProcess';
+  if (value === 'PaymentSuccess') return 'quotation.status.PaymentSuccess';
+  if (value === 'ProcessComplete') return 'quotation.status.ProcessComplete';
+  return '';
+}
+
+defineEmits<{
+  (e: 'preview', data: any): void;
+  (e: 'view', data: any): void;
+  (e: 'edit', data: any): void;
+  (e: 'delete', data: any): void;
+}>();
 </script>
 
 <template>
-  <q-table v-bind="props">
+  <q-table
+    v-bind="props"
+    flat
+    hide-pagination
+    card-container-class="q-col-gutter-sm"
+  >
     <template v-slot:header="props">
-      <q-tr style="background-color: #f0fff1" :props="props">
+      <q-tr
+        style="background-color: hsla(var(--info-bg) / 0.07)"
+        :props="props"
+      >
         <q-th v-for="col in props.cols" :key="col.name" :props="props">
-          {{ col.label }}
+          {{ $t(col.label) }}
         </q-th>
       </q-tr>
     </template>
+
+    <template v-slot:body="props">
+      <q-tr>
+        <q-td v-if="visibleColumns.includes('order')">
+          {{ props.rowIndex + 1 }}
+        </q-td>
+
+        <q-td v-if="visibleColumns.includes('workName')">
+          <div class="column">
+            <div class="col-6">{{ props.row.workName }}</div>
+            <div class="col-6 app-text-muted">{{ props.row.code }}</div>
+          </div>
+        </q-td>
+
+        <q-td v-if="visibleColumns.includes('createdAt')">
+          {{ dateFormat(props.row.createdAt) }}
+        </q-td>
+
+        <q-td v-if="visibleColumns.includes('dueDate')">
+          {{ dateFormat(props.row.dueDate) }}
+        </q-td>
+
+        <q-td v-if="visibleColumns.includes('contactName')">
+          {{ props.row.contactName }}
+        </q-td>
+
+        <q-td v-if="visibleColumns.includes('actor')">
+          {{ props.row.createdBy.firstName }}
+        </q-td>
+
+        <q-td v-if="visibleColumns.includes('summaryPrice')">
+          {{ props.row.finalPrice }}
+        </q-td>
+
+        <q-td v-if="visibleColumns.includes('payCondition')">
+          {{ $t(payCondition(props.row.payCondition)) }}
+        </q-td>
+
+        <q-td v-if="visibleColumns.includes('status')">
+          <BadgeComponent
+            :title-i18n="$t(quotationStatus(props.row.quotationStatus))"
+          />
+        </q-td>
+
+        <q-td v-if="visibleColumns.includes('example')">
+          <span
+            class="text-primary cursor-pointer"
+            style="text-decoration: underline"
+            @click="$emit('preview', props.row.id)"
+          >
+            Preview
+          </span>
+        </q-td>
+
+        <q-td>
+          <q-btn
+            :id="`btn-eye-${props.row.firstName}`"
+            icon="mdi-eye-outline"
+            size="sm"
+            dense
+            round
+            flat
+            @click.stop="$emit('view', props.row)"
+          />
+
+          <KebabAction
+            hide-toggle
+            @view="$emit('view', props.row)"
+            @edit="$emit('edit', props.row)"
+            @delete="$emit('delete', props.row.id)"
+          />
+        </q-td>
+      </q-tr>
+    </template>
+
+    <template v-slot:item="props">
+      <slot name="grid" :item="props" />
+    </template>
   </q-table>
 </template>