add api get post

.gitignore

@@ -0,0 +1,130 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+.pnpm-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Snowpack dependency directory (https://snowpack.dev/)
+web_modules/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional stylelint cache
+.stylelintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variable files
+.env
+.env.development.local
+.env.test.local
+.env.production.local
+.env.local
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+.parcel-cache
+
+# Next.js build output
+.next
+out
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and not Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# vuepress v2.x temp and cache directory
+.temp
+.cache
+
+# Docusaurus cache and generated files
+.docusaurus
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port
+
+# Stores VSCode versions used for testing VSCode extensions
+.vscode-test
+
+# yarn v2
+.yarn/cache
+.yarn/unplugged
+.yarn/build-state.yml
+.yarn/install-state.gz
+.pnp.*

app.vue

@@ -3,34 +3,28 @@
     <v-app>
       <v-app-bar>
         <v-app-bar-title>Hello</v-app-bar-title>
-        <v-spacer/>
+        <v-spacer />
         <v-btn @click="toggleTheme">
-          <!-- <v-icon>ph:sun</v-icon> -->
+          <v-icon>ph:sun</v-icon>
           toggle thema</v-btn>
       </v-app-bar>
       <v-main>
         <v-container>
-          <v-text-field class="mb-5" label="Name" type="name"/>
+          <v-card title="List Surat Kontrol" flat>
-          <v-card
-    title="Nutrition"
-    flat
-  >
             <template v-slot:text>
-      <v-text-field
+              <v-text-field v-model="search" label="Search" prepend-inner-icon="mdi-magnify" variant="outlined" hide-details single-line></v-text-field>
-        v-model="search"
-        label="Search"
-        
-        variant="outlined"
-        hide-details
-        single-line
-      ></v-text-field>
             </template>
 
-    <v-data-table
+            <v-data-table :headers="headers" :items="subspesialis" F :search="search"></v-data-table>
-      :headers="headers"
+          </v-card>
-      :items="desserts"
+        </v-container>
-      :search="search"
+        <v-container>
-    ></v-data-table>
+          <v-card title="List Surat Kontrol" flat>
+            <template v-slot:text>
+              <v-text-field v-model="search" label="Search" prepend-inner-icon="mdi-magnify" variant="outlined" hide-details single-line></v-text-field>
+            </template>
+
+            <v-data-table :headers="headers" :items="surkon.list_data" F :search="search"></v-data-table>
           </v-card>
         </v-container>
       </v-main>
@@ -38,108 +32,49 @@
   </div>
 </template>
 <script setup>
+
+import { ref } from "vue";
 import { useTheme } from "vuetify";
+import { storeToRefs } from "pinia";
+
 const theme = useTheme();
 
-const toggleTheme = () => {
+function toggleTheme () {
   theme.global.name.value = theme.global.current.value.dark ? 'light' : 'myTheme';
-};
+}
 
 // const itemsPerPage= 5;
-const search= '';
+const search = ref("");
-const headers= [
+const headers = [
   {
     align: 'start',
     key: 'name',
     sortable: false,
-            title: 'Dessert (100g serving)',
   },
-          { key: 'calories', title: 'Calories' },
+  { key: 'Nomor_surat_kontrol', title: 'Nomor surat kontrol' },
-          { key: 'fat', title: 'Fat (g)' },
+  { key: 'Nomor_sep', title: 'Nomor sep' },
-          { key: 'carbs', title: 'Carbs (g)' },
+  { key: 'Tanggal_cetak_surat_kontrol', title: 'Tanggal Entry' },
-          { key: 'protein', title: 'Protein (g)' },
+  { key: 'Tanggal_rencana_kontrol', title: 'Tanggal Rencana Kontrol' },
-          { key: 'iron', title: 'Iron (%)' },
+  { key: 'No_rm', title: 'Nomor Rekam Medik' },
-        ];
+  { key: 'NamaDokter', title: 'Nama Dokter' },
-const desserts= [
+];
-          {
+const payload = ref({
-            name: 'Frozen Yogurt',
+    no_rm: "",
-            calories: 159,
+    no_sep: "",
-            fat: 6.0,
+    poliklinik: "",
-            carbs: 24,
+    tanggal_awal: "2024-10-16",
-            protein: 4.0,
+    tanggal_akhir: "2024-10-30",
-            iron: 1,
+    offset: "0",
-          },
+    limit: "10",
-          {
+  });
-            name: 'Ice cream sandwich',
+  const { subspesialis } = storeToRefs(useSubspesialisStore());
-            calories: 237,
+  const { loadSubspesialis } = useSubspesialisStore();
-            fat: 9.0,
+
-            carbs: 37,
+  const { surkon } = storeToRefs(useSubspesialisStorePost());
-            protein: 4.3,
+  const { loadSurKon } = useSubspesialisStorePost();
-            iron: 1,
+  // Call loadSurKon when the page loads
-          },
+  onMounted(() => {
-          {
+    loadSubspesialis();
-            name: 'Eclair',
+    loadSurKon(payload);
-            calories: 262,
+  });
-            fat: 16.0,
-            carbs: 23,
-            protein: 6.0,
-            iron: 7,
-          },
-          {
-            name: 'Cupcake',
-            calories: 305,
-            fat: 3.7,
-            carbs: 67,
-            protein: 4.3,
-            iron: 8,
-          },
-          {
-            name: 'Gingerbread',
-            calories: 356,
-            fat: 16.0,
-            carbs: 49,
-            protein: 3.9,
-            iron: 16,
-          },
-          {
-            name: 'Jelly bean',
-            calories: 375,
-            fat: 0.0,
-            carbs: 94,
-            protein: 0.0,
-            iron: 0,
-          },
-          {
-            name: 'Lollipop',
-            calories: 392,
-            fat: 0.2,
-            carbs: 98,
-            protein: 0,
-            iron: 2,
-          },
-          {
-            name: 'Honeycomb',
-            calories: 408,
-            fat: 3.2,
-            carbs: 87,
-            protein: 6.5,
-            iron: 45,
-          },
-          {
-            name: 'Donut',
-            calories: 452,
-            fat: 25.0,
-            carbs: 51,
-            protein: 4.9,
-            iron: 22,
-          },
-          {
-            name: 'KitKat',
-            calories: 518,
-            fat: 26.0,
-            carbs: 65,
-            protein: 7,
-            iron: 6,
-          },
-        ];
 </script>

app_error.vue

@@ -1,131 +0,0 @@
-<template>
-    <div>
-      <v-app>
-        <v-app-bar>
-          <v-app-bar-title>Hello</v-app-bar-title>
-          <v-spacer/>
-          <v-btn @click="toggleTheme">
-            <!-- <v-icon>ph:sun</v-icon> -->
-            toggle thema</v-btn>
-        </v-app-bar>
-        <v-main>
-          <v-container>
-            <v-text-field class="mb-5" label="Name" type="name"/>
-            <v-data-table-server
-      v-model:items-per-page="itemsPerPage"
-      :headers="headers"
-      :items="desserts"
-      item-value="name"
-      class="elevation-1"
-    ></v-data-table-server>
-          </v-container>
-        </v-main>
-      </v-app>
-    </div>
-  </template>
-  <script setup>
-  import { useTheme } from "vuetify";
-  const theme = useTheme();
-  
-  const toggleTheme = () => {
-    theme.global.name.value = theme.global.current.value.dark ? 'light' : 'myTheme';
-  };
-  
-  const itemsPerPage= 5;
-  const headers= [
-          {
-            title: 'Dessert (100g serving)',
-            align: 'start',
-            sortable: false,
-            key: 'name',
-          },
-          { title: 'Calories', key: 'calories', align: 'end' },
-          { title: 'Fat (g)', key: 'fat', align: 'end' },
-          { title: 'Carbs (g)', key: 'carbs', align: 'end' },
-          { title: 'Protein (g)', key: 'protein', align: 'end' },
-          { title: 'Iron (%)', key: 'iron', align: 'end' },
-        ];
-  const desserts = [
-      {
-        name: 'Frozen Yogurt',
-        calories: 159,
-        fat: 6.0,
-        carbs: 24,
-        protein: 4.0,
-        iron: '1',
-      },
-      {
-        name: 'Jelly bean',
-        calories: 375,
-        fat: 0.0,
-        carbs: 94,
-        protein: 0.0,
-        iron: '0',
-      },
-      {
-        name: 'KitKat',
-        calories: 518,
-        fat: 26.0,
-        carbs: 65,
-        protein: 7,
-        iron: '6',
-      },
-      {
-        name: 'Eclair',
-        calories: 262,
-        fat: 16.0,
-        carbs: 23,
-        protein: 6.0,
-        iron: '7',
-      },
-      {
-        name: 'Gingerbread',
-        calories: 356,
-        fat: 16.0,
-        carbs: 49,
-        protein: 3.9,
-        iron: '16',
-      },
-      {
-        name: 'Ice cream sandwich',
-        calories: 237,
-        fat: 9.0,
-        carbs: 37,
-        protein: 4.3,
-        iron: '1',
-      },
-      {
-        name: 'Lollipop',
-        calories: 392,
-        fat: 0.2,
-        carbs: 98,
-        protein: 0,
-        iron: '2',
-      },
-      {
-        name: 'Cupcake',
-        calories: 305,
-        fat: 3.7,
-        carbs: 67,
-        protein: 4.3,
-        iron: '8',
-      },
-      {
-        name: 'Honeycomb',
-        calories: 408,
-        fat: 3.2,
-        carbs: 87,
-        protein: 6.5,
-        iron: '45',
-      },
-      {
-        name: 'Donut',
-        calories: 452,
-        fat: 25.0,
-        carbs: 51,
-        protein: 4.9,
-        iron: '22',
-      },
-    ];
-  </script>
-  

nuxt.config.ts

@@ -4,6 +4,7 @@ export default defineNuxtConfig({
   modules:[
     "nuxt-icon",
     "@nuxtjs/google-fonts",
+    "@pinia/nuxt",
     async (options, nuxt) => {
       nuxt.hooks.hook('vite:extendConfig', config => config.plugins.push(
         vuetify({

package.json

@@ -10,9 +10,12 @@
     "postinstall": "nuxt prepare"
   },
   "dependencies": {
+    "@pinia/nuxt": "^0.5.5",
+    "axios": "^1.7.7",
     "nuxt": "^3.13.0",
+    "pinia": "^2.2.4",
     "vite-plugin-vuetify": "^2.0.4",
-    "vue": "latest",
+    "vue": "^3.0.0",
     "vuetify": "^3.7.0-beta.1",
     "vuetify-nuxt-module": "^0.18.2"
   },
@@ -20,6 +23,6 @@
     "@nuxt/icon": "^1.5.1",
     "@nuxtjs/google-fonts": "^3.0.0-1",
     "nuxt-icon": "^1.0.0-beta.7",
-    "sass-embedded": "^1.78.0"
+    "sass-embedded": "^1.80.5"
   }
 }

plugins/vuetify.ts

@@ -1,5 +1,4 @@
-import { createApp } from 'vue';
+import { createVuetify, type ThemeDefinition } from "vuetify";
-import { createVuetify, ThemeDefinition } from "vuetify";
 import { md2 } from 'vuetify/blueprints';
 // import { VDataTable } from 'vuetify/labs/VDataTable'
 
@@ -10,7 +9,7 @@ const myTheme: ThemeDefinition = {//untuk mengatur tema terang atau gelap
     }
 }
 
-export default defineNuxtPlugin((app) => {
+export default defineNuxtPlugin(app => {
 
     const vuetify = createVuetify({
         ssr: true,
@@ -19,7 +18,6 @@ export default defineNuxtPlugin((app) => {
         defaults:{
             VTextField:{
                 variant:"outlined",
-                color:"primary",
             },
         },
         theme:{

server/api/surkon/get/index.get.ts

@@ -0,0 +1,16 @@
+import axios from "axios";
+
+export default defineEventHandler(async (event) => {
+  try {
+    const response = await axios.get("http://localhost:8082/api/suratkontrol");
+    // console.log(response.data)
+    return response.data
+  } catch (error) {
+    console.error("Error posting to surat kontrol API:", error);
+    
+    throw createError({
+      statusCode: 500,
+      statusMessage: "Failed to fetch data from surat kontrol API",
+    });
+  }
+});

server/api/surkon/post/index.post.ts

@@ -0,0 +1,23 @@
+import axios from "axios";
+
+export default defineEventHandler(async (event) => {
+  // Read the body of the incoming request
+  const body = await readBody(event);
+
+  try {
+    const response = await axios.post("http://localhost:8082/api/suratkontrol/cari", body, {
+      headers: {
+        "Content-Type": "application/json",
+      },
+    });
+    console.log(response.data)
+    return response.data
+  } catch (error) {
+    console.error("Error posting to surat kontrol API:", error);
+    
+    throw createError({
+      statusCode: 500,
+      statusMessage: "Failed to fetch data from surat kontrol API",
+    });
+  }
+});

server/tsconfig.json

@@ -1,3 +0,0 @@
-{
-  "extends": "../.nuxt/tsconfig.server.json"
-}

stores/users.ts

@@ -0,0 +1,55 @@
+interface Subspesialis {
+  id: number;
+  Kode: string;
+  Subspesialis: string;
+  FK_daftar_spesialis_ID: number;
+  Spesialis: string;
+}
+
+export const useSubspesialisStore = defineStore("Subspesialises", () => {
+  const subspesialis = ref<any[]>([]);
+  const loadSubspesialis = async () => {
+    try {
+      subspesialis.value = await $fetch("/api/surkon/get");
+    } catch (error) {
+      console.error("Failed to load subspesialis:", error);
+    }
+  };
+
+  return {
+    subspesialis,
+    loadSubspesialis,
+  };
+});
+
+export const useSubspesialisStorePost = defineStore("SuratKontrol", () => {
+  // Create state for holding users
+  const surkon = ref<any[]>([]);
+
+  // Function to load user data
+  const loadSurKon = async (payload: Record<string, any>) => {
+    try {
+      surkon.value = await $fetch("/api/surkon/post", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify(payload)
+      });
+    } catch (error) {
+      console.error("Failed to load surkon:", error);
+    }
+  };
+
+  return {
+    surkon,
+    loadSurKon,
+  };
+});
+
+//Path:stores/users.ts
+if (import.meta.hot) {
+  // import.meta.hot.accept(acceptHMRUpdate(useUsersStore, import.meta.hot))
+  import.meta.hot.accept(acceptHMRUpdate(useSubspesialisStore, import.meta.hot));
+  import.meta.hot.accept(acceptHMRUpdate(useSubspesialisStorePost, import.meta.hot));
+}

utils/icons.ts

@@ -1,8 +1,6 @@
-import { h } from 'vue'
+import { Icon } from '@iconify/vue'
 import type { IconSet, IconAliases, IconProps } from 'vuetify'
 
-import {Icon} from "#components";
-
 const aliases: IconAliases = {
     collapse: "ph:caret-up",
     complete: "ph:check",
@@ -43,12 +41,9 @@ const aliases: IconAliases = {
     calendar: "ph:calendar",
   };
 
-const custom: IconSet = {
+  const custom: IconSet = {
-  component: (props: IconProps) => h(Icon,{
+    // @ts-ignore
-    name: props.icon,
+    component: (props: IconProps) => h(Icon, { ...props }),
-    tag: props.tag,
+  };
-    disabled: props.disabled
-  }),
-}
 
 export { aliases, custom };