logapiByMethod

components/Navbar.vue

@@ -54,6 +54,12 @@
               to="/satu_rssa/logapi"
               ></v-list-item>
 
+              <v-list-item
+              v-bind="props"
+              title="logapi By Method"
+              to="/satu_rssa/logapiByMethod"
+              ></v-list-item>
+
               <v-list-item
               v-bind="props"
               title="Jadwal Dokter"

pages/satu_rssa/logapiByMethod/index.vue

@@ -0,0 +1,108 @@
+<template>
+    <div>
+      <v-app>
+         <v-main>
+          <v-container>
+            <v-card title="List Surat Kontrol by Method" flat>
+              <template v-slot:text>
+                <v-row>
+                  <v-col>
+                    <div class="border-thin">
+                      <VForm 
+                      @submit.prevent="get_data">
+                      <v-container >
+                        <v-row>
+                          <v-col cols="12" md="6">
+                            <v-text-field
+                            v-model="reqDataLogAPI.Tanggal_awal"
+                            label="Tanggal Awal"
+                            type="date"
+                            ></v-text-field>
+                          </v-col>
+                          <v-col cols="12" md="6">
+                            <v-text-field
+                            v-model="reqDataLogAPI.Tanggal_akhir"
+                            label="Tanggal Akhir"
+                            type="date"
+                            ></v-text-field>
+                          </v-col>
+                        </v-row>
+                        <v-row>
+                          <v-col cols="12" md="6">
+                            <v-autocomplete
+                            v-model="reqDataLogAPI.method"
+                            label="Method"
+                            :items="['POST', 'PUT', 'DELETE']"
+                            dense
+                            />
+                          </v-col>
+                        </v-row>
+                        <VBtn class="mb-5"
+                        variant="tonal"
+                        type="submit">
+                        C A R I
+                      </VBtn>
+        
+                    </v-container>
+                  </VForm>
+                </div>
+              </v-col>
+            </v-row>
+            <v-row>
+              <v-text-field v-model="search" label="Search" prepend-inner-icon="mdi-magnify" variant="outlined" hide-details single-line class="rounded elevation-1"></v-text-field>
+            </v-row>
+              <!-- </template>
+              <template> -->
+              </template>
+              <v-data-table 
+              :headers="headers" 
+              :items="dataLogAPIByMethod" 
+              :search="search">
+              </v-data-table>
+            </v-card>
+          </v-container>
+        </v-main>
+      </v-app>
+    </div>
+  </template>
+  <script setup>
+  import { ref, reactive } from "vue";
+  import { useTheme } from "vuetify";
+  import { storeToRefs } from "pinia";
+  import Swal from 'sweetalert2'
+  const search = ref("");
+  const today = new Date();
+  const date = today.getFullYear()+'-'+(today.getMonth()+1)+'-'+today.getDate();
+  console.log("DATE : ", date)
+  const headers = [
+    {
+      align: 'start',
+      key: 'name',
+      sortable: false,
+    },
+    { key: 'date_created', title: 'Tanggal terbuat' },
+    { key: 'User_agent', title: 'Dokter' },
+    { key: 'URL', title: 'URL' },
+    { key: 'Method', title: 'Method' },
+    { key: 'Request_string', title: 'Request' },
+    { key: 'Respon_string', title: 'Respon' },
+    { key: 'Comment', title: 'Comment' },
+  ];
+    const reqDataLogAPI = reactive({
+      method : "POST",
+      Tanggal_awal : date,
+      Tanggal_akhir : date, 
+    })
+    const { dataLogAPIByMethod } = storeToRefs(useDataLogAPIByMethod());
+    const { loadDataLogAPI } = useDataLogAPIByMethod();
+    
+    const get_data = async() => {
+      console.log(reqDataLogAPI.Tanggal_awal)
+      console.log(reqDataLogAPI.Tanggal_akhir)
+      console.log("REQ",reqDataLogAPI)
+      loadDataLogAPI(reqDataLogAPI);
+      JSON.stringify(dataLogAPIByMethod.Request)
+      JSON.stringify(dataLogAPIByMethod.Respon)
+      console.log("DATA", dataLogAPIByMethod)
+    }
+  </script>

server/api/satu_rssa/logapiByMethod/index.post.ts

@@ -0,0 +1,15 @@
+import axios from "axios"
+
+export default defineEventHandler(async (event) => {
+    const body = await readBody(event)
+    try {
+        const response = await axios.post("http://10.10.123.140:8082/api/suratkontrol/datalogmethod",body)
+        return response.data
+        // console.log("ini data response",response.data)
+    } catch (error) {
+        throw createError({
+            statusCode: 500,
+            statusMessage: "Failed to fetch data log api by method",
+        })
+    }
+})

stores/users.ts

@@ -151,6 +151,29 @@ export const useDataLogAPIGet = defineStore("DataLogAPI", () => {
   }
 });
 
+export const useDataLogAPIByMethod = defineStore("DataLogAPIByMethod", () => {
+  const dataLogAPIByMethod = ref<any[]>([]);
+  const loadDataLogAPI = async (reqDataLogAPI: Record<string, any>) => {
+    try {
+      console.log("REQ", reqDataLogAPI)
+      dataLogAPIByMethod.value = await $fetch("/api/satu_rssa/logapiByMethod", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify(reqDataLogAPI)
+      });
+      console.log(dataLogAPIByMethod.value)
+    } catch (error) {
+      console.error("Failed to load data log api:", error);
+    }
+  };
+  return{
+    dataLogAPIByMethod,
+    loadDataLogAPI,
+  }
+});
+
 export const useDataKunjunganPasien = defineStore("DataKunjunganPasien", () => {
   const dataKunjunganPasien = ref<any[]>([]);