ทะเบียนประวัติ: เพิ่มหน้าการ์ด,ตาราง

src/modules/04_registryNew/views/list.vue

@@ -1,10 +1,220 @@
 <script setup lang="ts">
+import { ref } from "vue";
+import Search from "@/modules/04_registryNew/components/registry/Search.vue";
+import TableView from "@/modules/04_registryNew/components/registry/TableView.vue";
+import CardView from "@/modules/04_registryNew/components/registry/CardView.vue";
+import { useQuasar } from "quasar";
+import type { QTableColumn, QTableProps } from "quasar";
+
+const $q = useQuasar();
+const mode = ref<"table" | "card">("table");
+const columns = [
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: true,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "fullName",
+    align: "center",
+    label: "ชื่อ - นามสกุล",
+    sortable: true,
+    field: "fullName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "posNo",
+    align: "center",
+    label: "ตำแหน่งเลขที่",
+    sortable: true,
+    field: "posNo",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "position",
+    align: "left",
+    label: "ตำแหน่ง",
+    sortable: true,
+    field: "position",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "posPath",
+    align: "left",
+    label: "สายงาน",
+    sortable: true,
+    field: "posPath",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "posType",
+    align: "left",
+    label: "สายงาน",
+    sortable: true,
+    field: "posPath",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "posLevel",
+    align: "left",
+    label: "ระดับชั้นงาน",
+    sortable: true,
+    field: "posLevel",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "posOc",
+    align: "left",
+    label: "สังกัด",
+    sortable: true,
+    field: "posOc",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "year",
+    align: "left",
+    label: "ปีงบประมาณ",
+    sortable: true,
+    field: "year",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "salary",
+    align: "left",
+    label: "ค่าจ้าง",
+    sortable: true,
+    field: "salary",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+] satisfies QTableColumn[];
+
+const visibleColumns = ref<string[]>([
+  "no",
+  "fullName",
+  "posNo",
+  "position",
+  "posPath",
+  "posType",
+  "posLevel",
+  "posOc",
+  "year",
+  "salary",
+]);
 </script>
 <template>
   <div class="toptitle text-dark col-12 row items-center">
     ข้อมูลทะเบียนประวัติ
   </div>
+  <Search />
+  <div
+    flat
+    class="q-py-lg"
+    :class="{
+      'bg-white': mode === 'table',
+    }"
+    style="width: 100%"
+  >
+    <div class="flex justify-between q-mb-md q-pr-lg q-pl-sm">
+      <div>
+        <q-btn round flat color="primary" icon="add" size="16px">
+          <q-tooltip>เพิ่ม</q-tooltip></q-btn
+        >
+        <q-btn round flat color="blue" icon="mdi-history" size="16px">
+          <q-tooltip>ประวัติ</q-tooltip></q-btn
+        >
+      </div>
+      <div class="flex items-center">
+        <q-select
+          v-if="mode === 'table'"
+          class="q-mr-md"
+          v-model="visibleColumns"
+          multiple
+          outlined
+          dense
+          options-dense
+          :display-value="$q.lang.table.columns"
+          emit-value
+          map-options
+          :options="columns"
+          option-value="name"
+          options-cover
+          style="min-width: 150px"
+        />
+        <div style="border: 1px solid #c8c4c4; border-radius: 5px">
+          <q-btn-toggle
+            v-model="mode"
+            dense
+            class="no-shadow"
+            toggle-color="grey-5"
+            :options="[
+              { value: 'table', slot: 'table' },
+              { value: 'card', slot: 'card' },
+            ]"
+          >
+            <template v-slot:table>
+              <q-icon
+                name="format_list_bulleted"
+                :color="mode === 'table' ? 'dark' : 'grey-5'"
+                size="24px"
+              />
+            </template>
 
+            <template v-slot:card>
+              <q-icon
+                name="mdi-view-grid-outline"
+                :color="mode === 'card' ? 'dark' : 'grey-5'"
+                size="24px"
+              />
+            </template>
+          </q-btn-toggle>
+        </div>
+      </div>
+    </div>
+
+    <TableView
+      v-if="mode === 'table'"
+      :columns="columns"
+      v-model:visibleColumns="visibleColumns"
+    />
+    <CardView v-if="mode === 'card'" />
+  </div>
 </template>
 
-<style scoped></style>
+<!-- <style scoped>
+.no-shadow :deep(.q-card) {
+  box-shadow: none;
+}
+</style> -->