UI รายการสอบแข่งขัน / คัดเลือก => Done

src/modules/05_placement/views/Main.vue

@@ -1,28 +1,201 @@
 <script setup lang="ts">
-import { ref, useAttrs } from 'vue';
+import { ref, useAttrs, watch } from 'vue';
-const attrs = ref<any>(useAttrs());
+import type { QTableProps } from 'quasar';
+import { useCounterMixin } from "@/stores/mixin";
+import router from '@/router';
+const mixin = useCounterMixin();
+const { dateText } = mixin;
 
-const fiscalyear = ref<string>("");
+// แปลงเวลา ค.ศ ให้เป็น พ.ศ
-
+const textDate = (value: Date) => {
-const filter = ref<string>("");
+  return dateText(value);
-
+};
-const filterRef = ref<any>(null);
+
-const resetFilter = () => {
+const columns = ref<QTableProps["columns"]>([
-  filterRef.value.focus();
+  {
+    name: "id",
+    align: "left",
+    label: "ลำดับ",
+    sortable: true,
+    field: "id",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "ExamRound",
+    align: "left",
+    label: "รอบการสอบ",
+    sortable: true,
+    field: "ExamRound",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "ExamOrder",
+    align: "left",
+    label: "ครั้งที่",
+    sortable: true,
+    field: "ExamOrder",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "FiscalYear",
+    align: "left",
+    label: "ปีงบประมาณ",
+    sortable: true,
+    field: "FiscalYear",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "NumberofCandidates",
+    align: "left",
+    label: "จำนวนผู้สอบได้",
+    sortable: false,
+    field: "NumberofCandidates",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "ExamType",
+    align: "left",
+    label: "ประเภทการสอบ",
+    sortable: false,
+    field: "ExamType",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "AccountExpirationDate",
+    align: "left",
+    label: "วันที่บัญชีหมดอายุ",
+    sortable: true,
+    field: "AccountExpirationDate",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+
+]);
+const rows = [{
+  id: 1,
+  ExamRound: "การสอบแข่งขันเพื่อรับบุคคลทั่วไปเข้ารับราชการ ส่วนการจัดการทั่วไป",
+  ExamOrder: 3,
+  FiscalYear: 2566,
+  NumberofCandidates: 8,
+  ExamType: 0,
+  AccountExpirationDate: "2023-02-28T14:47:04.1785384Z"
+},
+{
+  id: 2,
+  ExamRound: "การสอบแข่งขันเพื่อรับบุคคลทั่วไปเข้ารับราชการ ส่วนการจัดการทั่วไป",
+  ExamOrder: 2,
+  FiscalYear: 2566,
+  NumberofCandidates: 12,
+  ExamType: 0,
+  AccountExpirationDate: "2023-02-28T14:47:04.1785384Z"
+},
+{
+  id: 3,
+  ExamRound: "การสอบแข่งขันเพื่อรับบุคคลทั่วไปเข้ารับราชการ ส่วนการจัดการทั่วไป",
+  ExamOrder: 2,
+  FiscalYear: 2566,
+  NumberofCandidates: 20,
+  ExamType: 0,
+  AccountExpirationDate: "2023-01-31T14:47:04.1785384Z"
+},
+{
+  id: 4,
+  ExamRound: "การสอบแข่งขันเพื่อรับบุคคลทั่วไปเข้ารับราชการ ส่วนการจัดการทั่วไป",
+  ExamOrder: 2,
+  FiscalYear: 2566,
+  NumberofCandidates: 16,
+  ExamType: 1,
+  AccountExpirationDate: "2023-11-30T14:47:04.1785384Z"
+},
+{
+  id: 5,
+  ExamRound: "การสอบแข่งขันเพื่อรับบุคคลทั่วไปเข้ารับราชการ ส่วนการจัดการทั่วไป",
+  ExamOrder: 1,
+  FiscalYear: 2566,
+  NumberofCandidates: 20,
+  ExamType: 1,
+  AccountExpirationDate: "2023-05-21T14:47:04.1785384Z",
+},
+];
+
+const redirectToPage = (id:number) => {
+  router.push({
+      name: 'placementDetail',
+      params: {
+        id: id 
+      }
+    });
 };
 
-const inputvisible = ref<string[]>([]);
 
 interface DataOption {
   id: number;
   name: string;
 }
 
+const fiscalyear = ref<string>(""); // เลือกปีงบประมาณ
 const fiscalyearOP = ref<DataOption[]>([
   {id: 1, name: "2566"},
   {id: 2, name: "2565"},
   {id: 3, name: "2564"},
 ]);
+const searchFiscalyear = () => {
+  console.log('Input value changed:', fiscalyear.value);
+};
+
+
+const filterInput = ref<string>(""); // ค้นหา
+const filterRef = ref<any>(null);
+const resetFilter = () => {
+  filterInput.value = "";
+  filterRef.value.focus();
+};
+
+const attrs = ref<any>(useAttrs());
+const visibleColumns = ref<string[]>([ 'id', 'ExamRound', 'ExamOrder', 'FiscalYear', 'NumberofCandidates', 'ExamType', 'AccountExpirationDate']) //ค้นหา คอลัมน์ คอลัมน์ที่แสดง
+
+
+const examTime = ref<string>(""); // ครั้งที่สอบ
+const examTimeOP = ref<DataOption[]>([]);
+examTimeOP.value = rows.map((item) => ({
+    id: item.id,
+    name: item.ExamOrder.toString(),
+}));
+examTimeOP.value.sort((a, b) => {
+  return parseInt(a.name) - parseInt(b.name);
+});
+// console.log(examTimeOP.value);
+
+
+const examType = ref<string>(""); // ประเภทการสอบ
+const examTypeOP = ref<DataOption[]>([
+  {id: 0, name: "แข่งขัน"},
+  {id: 1, name: "คัดเลือก"},
+]);
+
+
+const expiredAccount = ref<boolean>(false); // บัญชีหมดอายุ
+
+const paging = ref<boolean>(true);
+const paginationLabel = (start: string, end: string, total: string) => {
+    if (paging.value == true)
+      return " " + start + "-" + end + " ใน " + total;
+    else return start + "-" + end + " ใน " + total;
+  };
 
 </script>
 
@@ -50,6 +223,7 @@ const fiscalyearOP = ref<DataOption[]>([
                 :borderless="false"
                 :outlined="true"
                 :hide-dropdown-icon="false"
+                @change="searchFiscalyear"
               />
         </div>
         <div class="col-xs-12 col-sm-3 col-md-6"></div>
@@ -57,7 +231,7 @@ const fiscalyearOP = ref<DataOption[]>([
           <q-input
             standout
             dense
-            v-model="filter"
+            v-model="filterInput"
             ref="filterRef"
             outlined
             debounce="300"
@@ -65,9 +239,9 @@ const fiscalyearOP = ref<DataOption[]>([
             class="q-ml-sm"
           >
             <template v-slot:append>
-              <q-icon v-if="filter == ''" name="search" />
+              <q-icon v-if="filterInput == ''" name="search" />
               <q-icon
-                v-if="filter !== ''"
+                v-if="filterInput !== ''"
                 name="clear"
                 class="cursor-pointer"
                 @click="resetFilter"
@@ -77,16 +251,17 @@ const fiscalyearOP = ref<DataOption[]>([
         </div>
         <div class="col-xs-12 col-sm-3 col-md-2">
           <q-select
-            v-model="inputvisible"
+            v-model="visibleColumns"
-            :display-value="$q.lang.table.columns"
             multiple
             outlined
             dense
-            :options="attrs.columns"
             options-dense
-            option-value="name"
+            :display-value="$q.lang.table.columns"
-            map-options
             emit-value
+            map-options
+            :options="columns"
+            option-value="name"
+            options-cover
             style="min-width: 150px"
             class="gt-xs q-ml-sm"
           />
@@ -97,14 +272,14 @@ const fiscalyearOP = ref<DataOption[]>([
           <div class="row q-pa-sm">
             <div class="col-xs-12 col-sm-3 col-md-2 q-pl-sm">
               <q-select
-                  v-model="fiscalyear"
+                  v-model="examTime"
                   label="ครั้งที่"
                   dense
                   clearable 
                   emit-value
                   map-options
                   option-label="name"
-                  :options="fiscalyearOP"
+                  :options="examTimeOP"
                   option-value="id"
                   lazy-rules
                   hide-bottom-space
@@ -116,14 +291,14 @@ const fiscalyearOP = ref<DataOption[]>([
             </div>
             <div class="col-xs-12 col-sm-3 col-md-2 q-pl-sm">
               <q-select
-                  v-model="fiscalyear"
+                  v-model="examType"
                   label="ประเภทการสอบ"
                   dense
                   clearable 
                   emit-value
                   map-options
                   option-label="name"
-                  :options="fiscalyearOP"
+                  :options="examTypeOP"
                   option-value="id"
                   lazy-rules
                   hide-bottom-space
@@ -134,14 +309,58 @@ const fiscalyearOP = ref<DataOption[]>([
                 />
             </div>
             <div class="col-xs-12 col-sm-3 col-md-3">
-
+              <q-toggle
-            </div>
+                v-model="expiredAccount"
-            <div class="col-xs-12 col-sm-3 col-md-3">
+                class="toggle-expired-account"
-
+                color="blue" 
+                label="แสดงบัญชีหมดอายุ"
+              />
             </div>
           </div>
         </q-card>
       </div>
+      <div class="q-pt-sm q-pl-md q-pr-md q-pb-md">
+        <q-table
+          ref="table"
+          :columns="columns" 
+          :rows="rows" 
+          row-key="id"
+          flat
+          bordered
+          dense
+          class="custom-header-table"
+          v-bind="attrs"
+          :filter="filterInput"
+          :visible-columns="visibleColumns"
+          :pagination-label="paginationLabel"
+        >
+        <template v-slot:body="props" >
+          <q-tr :props="props" class="cursor-pointer" @click="redirectToPage(props.row.id)">
+            <q-td key="id" :props="props">
+                {{ props.row.id }}
+            </q-td>
+            <q-td key="ExamRound" :props="props">
+                {{ props.row.ExamRound }}
+            </q-td>
+            <q-td key="ExamOrder" :props="props">
+                {{ props.row.ExamOrder }}
+            </q-td>
+            <q-td key="FiscalYear" :props="props">
+                {{ props.row.FiscalYear }}
+            </q-td>
+            <q-td key="NumberofCandidates" :props="props">
+                {{ props.row.NumberofCandidates }}
+            </q-td>
+            <q-td key="ExamType" :props="props">
+                {{ props.row.ExamType == 1 ? 'สอบแข่งขัน' : 'คัดเลือก' }}
+            </q-td>
+            <q-td key="AccountExpirationDate" :props="props">
+                {{ textDate(props.row.AccountExpirationDate) }}
+            </q-td>
+          </q-tr>
+        </template>
+      </q-table>
+      </div>
     </q-card>
   </div>
 </template>
@@ -150,4 +369,42 @@ const fiscalyearOP = ref<DataOption[]>([
 .filter-card {
   background-color: #EDEDED;
 }
+
+.toggle-expired-account{
+  font-size: 12px;
+  font-weight: 400;
+  font-size: 15px;
+  line-height: 150%;
+  color: #35373C;
+}
+
+.icon-color {
+    color: #4154b3;
+  }
+  .custom-header-table {
+    max-height: 64vh;
+    .q-table tr:nth-child(odd) td {
+      background: white;
+    }
+    .q-table tr:nth-child(even) td {
+      background: #f8f8f8;
+    }
+  
+    .q-table thead tr {
+      background: #ecebeb;
+    }
+  
+    .q-table thead tr th {
+      position: sticky;
+      z-index: 1;
+    }
+    /* this will be the loading indicator */
+    .q-table thead tr:last-child th {
+      /* height of all previous header rows */
+      top: 48px;
+    }
+    .q-table thead tr:first-child th {
+      top: 0;
+    }
+  }
 </style>