API ประวัติการใช้งาน

src/modules/06_webservices/interface/response/Main.ts

@@ -18,4 +18,12 @@ interface ResApiName {
   pathApi: string;
 }
 
-export type { ResListWebServices, ResApiName };
+interface ResApHistory {
+  apiKey: string;
+  apiName: string;
+  createdAt: Date;
+  id: string;
+  ipApi: string;
+}
+
+export type { ResListWebServices, ResApiName, ResApHistory };

src/modules/06_webservices/view/logView.vue

@@ -10,13 +10,16 @@ import type {
   DataOption,
   ItemsDropdown,
 } from "@/modules/06_webservices/interface/index/Main";
-import type { ResApiName } from "@/modules/06_webservices/interface/response/Main";
+import type {
+  ResApiName,
+  ResApHistory,
+} from "@/modules/06_webservices/interface/response/Main";
 
 /** use*/
 const $q = useQuasar();
 const { showLoader, hideLoader, messageError, date2Thai } = useCounterMixin();
 
-const apiType = ref<string>("");
+const apiNameId = ref<string>("");
 const dataApiName = ref<DataOption[]>([
   {
     id: "",
@@ -31,7 +34,7 @@ const startTime = ref<Date | null>(null); // เวลาเริ่มต้
 const endTime = ref<Date | null>(null); //เวลาสินสุด
 
 //รายการค้นหา
-const valDropdown = ref<string>("");
+const valDropdown = ref<string>("today");
 const labelDropdown = ref<string>("วันนี้");
 const itemsDropdown = ref<ItemsDropdown[]>([
   {
@@ -60,24 +63,29 @@ const itemsDropdown = ref<ItemsDropdown[]>([
   },
 ]);
 
-const rows = ref<any[]>([]);
-const visibleColumns = ref<String[]>(["name", "date", "request", "IP"]);
+const rows = ref<ResApHistory[]>([]);
+const visibleColumns = ref<String[]>([
+  "apiName",
+  "createdAt",
+  "apiKey",
+  "ipApi",
+]);
 const columns = ref<QTableProps["columns"]>([
   {
-    name: "name",
+    name: "apiName",
     align: "left",
     label: "API Request",
     sortable: false,
-    field: "name",
+    field: "apiName",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
   {
-    name: "date",
+    name: "createdAt",
     align: "left",
     label: "วันที่ร้องขอ",
     sortable: true,
-    field: "date",
+    field: "createdAt",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     format(val, row) {
@@ -85,20 +93,20 @@ const columns = ref<QTableProps["columns"]>([
     },
   },
   {
-    name: "request",
+    name: "apiKey",
     align: "left",
     label: " คน request",
     sortable: false,
-    field: "request",
+    field: "apiKey",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
   {
-    name: "IP",
+    name: "ipApi",
     align: "left",
     label: " IP",
     sortable: false,
-    field: "IP",
+    field: "ipApi",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
@@ -107,7 +115,7 @@ const columns = ref<QTableProps["columns"]>([
 /** ฟังก์ชันเรียกรายการข้อมูล API ที่เข้าถึงได้*/
 async function fetchListApiKeyName() {
   showLoader();
-  await http
+  http
     .get(config.API.apiKeyMain + "/name")
     .then(async (res) => {
       const data = (await res.data?.result) || [];
@@ -117,6 +125,8 @@ async function fetchListApiKeyName() {
       }));
       dataApiName.value.push(...optionData);
       options.value = dataApiName.value;
+      await onItemClick(labelDropdown.value, valDropdown.value);
+      await fetchListLog();
     })
     .catch((err) => {
       messageError($q, err);
@@ -127,16 +137,22 @@ async function fetchListApiKeyName() {
 }
 
 async function fetchListLog() {
-  const data = [
-    {
-      name: "API ข้อมูลทะเบียนประวัติข้าราชการ",
-      date: new Date(),
-      request: "MISConnect",
-      IP: "192.168.1.xx",
-    },
-  ];
-
-  rows.value = data;
+  showLoader();
+  http
+    .post(config.API.apiKeyMain + `/history`, {
+      apiNameId: apiNameId.value,
+      endDate: endDate.value,
+      startDate: startDate.value,
+    })
+    .then((res) => {
+      rows.value = res.data.result;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
 }
 
 function onSelectType() {
@@ -168,7 +184,7 @@ function filterSelector(val: string, update: Function) {
  * @param type ประเภทการค้นหาข้อมูล
  * และค้นหาข้อมูลรายการ Logs ใหม่
  */
-function onItemClick(labal: string, type: string) {
+async function onItemClick(labal: string, type: string) {
   labelDropdown.value = labal;
   valDropdown.value = type;
   const setDateRange = (daysAgo: number = 0, endOfDay = false) => {
@@ -206,7 +222,12 @@ function onItemClick(labal: string, type: string) {
     endDate.value = new Date().toISOString();
   }
 
-  type !== "customized" && selectedDate();
+  if (type !== "customized") {
+    selectedDate();
+  } else {
+    startTime.value = null;
+    endTime.value = null;
+  }
 }
 
 /**
@@ -234,10 +255,11 @@ function selectedDate() {
     startDate.value = startDateToday.toISOString();
     endDate.value = endDateToday.toISOString();
   }
+
+  fetchListLog();
 }
 
 onMounted(async () => {
-  await fetchListLog();
   await fetchListApiKeyName();
 });
 </script>
@@ -277,14 +299,12 @@ onMounted(async () => {
         option-value="id"
         emit-value
         map-options
-        v-model="apiType"
+        v-model="apiNameId"
         :options="options"
         label="รายากร Web Services"
         use-input
         hide-selected
         fill-input
-        :clearable="apiType !== ''"
-        @clear="apiType = ''"
         @update:modelValue="onSelectType"
         @filter="(inputValue: string,doneFn: Function) => filterSelector(inputValue, doneFn )"
       >
@@ -417,7 +437,7 @@ onMounted(async () => {
           </q-tr>
         </template>
         <template v-slot:body="props">
-          <q-tr :props="props" class="cursor-pointer">
+          <q-tr :props="props">
             <q-td v-for="col in props.cols" :key="col.name" :props="props">
               <div>
                 {{ col.value ?? "-" }}
@@ -425,21 +445,6 @@ onMounted(async () => {
             </q-td>
           </q-tr>
         </template>
-
-        <!-- <template v-slot:pagination="scope">
-          ทั้งหมด {{ total }} รายการ
-          <q-pagination
-            v-model="pagination.page"
-            active-color="primary"
-            color="dark"
-            :max="Number(totalList)"
-            size="sm"
-            boundary-links
-            direction-links
-            :max-pages="5"
-            @update:model-value="fetchSalaryList"
-          ></q-pagination>
-        </template> -->
       </d-table>
     </div>
   </div>

src/modules/06_webservices/view/main.vue

@@ -1,25 +1,11 @@
 <script setup lang="ts">
 import { ref } from "vue";
-import { useQuasar } from "quasar";
-
-import { useCounterMixin } from "@/stores/mixin";
 
 /** importComponents*/
 import ListView from "@/modules/06_webservices/view/listView.vue";
 import LogView from "@/modules/06_webservices/view/logView.vue";
 
-/** use*/
-const $q = useQuasar();
-const {
-  dialogRemove,
-  showLoader,
-  hideLoader,
-  messageError,
-  success,
-  date2Thai,
-} = useCounterMixin();
-
-const tabs = ref<string>("log");
+const tabs = ref<string>("list");
 </script>
 
 <template>