feat: tableCard

src/components/01_branch-management/TableCardComponent.vue

@@ -0,0 +1,127 @@
+<script setup lang="ts">
+import { QTableProps } from 'quasar';
+import { ref } from 'vue';
+
+const color: string[] = ['pink', 'violet'];
+
+const props = defineProps<{
+  subBranch?: boolean;
+  rows: {
+    name: string;
+    branchName: string;
+    address: string;
+    phonNumber: string;
+    Headquarters: string;
+    type: string;
+    status: string;
+  }[];
+}>();
+
+const columns = [
+  {
+    name: 'name',
+    required: true,
+    label: props.subBranch ? 'รหัสสาขา' : 'รหัสสำนักงานใหญ่',
+    align: 'left',
+    field: (row) => row.name,
+    format: (val) => `${val}`,
+    sortable: true,
+  },
+  {
+    name: 'branchName',
+    align: 'center',
+    label: 'ชื่อสาขา',
+    field: 'branchName',
+    sortable: true,
+  },
+  { name: 'address', label: 'ที่อยู่', field: 'address', sortable: true },
+  { name: 'phonNumber', label: 'เบอร์โทร', field: 'phonNumber' },
+  { name: 'Headquarters', label: 'สำนักงานใหญ่', field: 'Headquarters' },
+  { name: 'type', label: 'ประเภท', field: 'type' },
+  { name: 'status', label: 'สถานะ', field: 'status' },
+] satisfies QTableProps['columns'];
+
+const filter = ref('');
+</script>
+
+<template>
+  <div style="width: 100%">
+    <q-table
+      :rows-per-page-options="[4]"
+      flat
+      bordered
+      grid
+      :rows="rows"
+      :columns="columns"
+      row-key="name"
+      :filter="filter"
+      hide-header
+    >
+      <template v-slot:item="prop">
+        <div class="q-pr-sm">
+          <q-card class="bordered" style="width: 340px">
+            <q-item
+              class="bordered"
+              :class="`table-card-color-${subBranch ? color[1] : color[0]} ${$q.dark.isActive ? 'dark-table-card' : ''}    ${i === 0 ? 'color-table-header' : ''} ${i % 2 === 0 && i !== 0 ? 'color-table-row' : ''}`"
+              :key="i"
+              v-for="([k, v], i) in Object.entries(prop.row)"
+              :style="` `"
+            >
+              <q-item-section
+                avatar
+                style="width: 120px"
+                :style="`${!$q.dark.isActive && i !== 0 ? 'color:gray' : ''}`"
+              >
+                {{ prop.colsMap[k]?.label }}
+              </q-item-section>
+
+              <q-item-section>
+                <div class="row">
+                  {{ v }}
+                  <q-space />
+
+                  <iconify-icon
+                    class="cursor-pointer"
+                    v-if="i === 0"
+                    width="20px"
+                    icon="mdi:navigate-next"
+                  />
+                </div>
+              </q-item-section>
+            </q-item>
+          </q-card>
+        </div>
+      </template>
+    </q-table>
+  </div>
+</template>
+
+<style scoped>
+.table-card-color-pink {
+  --bg-table-card-header: var(--pink-6-hsl);
+  --color-table-card-header: var(--pink-0-hsl);
+  --bg-table-card-row: hsla(var(--pink-6-hsl) / 0.08);
+
+  &.dark-table-card {
+    --bg-table-card-row: hsla(var(--gray-9-hsl) / 1);
+  }
+}
+
+.table-card-color-violet {
+  --bg-table-card-header: var(--violet-4-hsl);
+  --color-table-card-header: var(--violet-0-hsl);
+  --bg-table-card-row: hsla(var(--violet-4-hsl) / 0.08);
+  &.dark-table-card {
+    --bg-table-card-row: hsla(var(--gray-9-hsl) / 1);
+  }
+}
+
+.color-table-header {
+  background: hsl(var(--bg-table-card-header));
+  color: hsl(var(--color-table-card-header));
+}
+
+.color-table-row {
+  background: var(--bg-table-card-row);
+}
+</style>