filter & storage

package-lock.json

@@ -20,6 +20,7 @@
         "@vue/apollo-components": "^4.0.0",
         "@vue/apollo-composable": "^4.0.1",
         "@vue/apollo-option": "^4.0.0",
+        "axios": "^1.6.7",
         "devextreme": "23.1.5",
         "devextreme-vue": "23.1.5",
         "dotenv": "^16.3.1",
@@ -2689,8 +2690,7 @@
     "node_modules/asynckit": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
-      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
-      "dev": true
     },
     "node_modules/atob": {
       "version": "2.1.2",
@@ -2752,6 +2752,16 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/axios": {
+      "version": "1.6.7",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.6.7.tgz",
+      "integrity": "sha512-/hDJGff6/c7u0hDkvkGxR/oy6CbCs8ziCsC7SqmhjfozqiJGc8Z11wrv9z9lYfY4K8l+H9TpjcMDX0xOZmx+RA==",
+      "dependencies": {
+        "follow-redirects": "^1.15.4",
+        "form-data": "^4.0.0",
+        "proxy-from-env": "^1.1.0"
+      }
+    },
     "node_modules/balanced-match": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
@@ -3355,7 +3365,6 @@
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
       "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
-      "dev": true,
       "dependencies": {
         "delayed-stream": "~1.0.0"
       },
@@ -3754,7 +3763,6 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
       "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
-      "dev": true,
       "engines": {
         "node": ">=0.4.0"
       }
@@ -4849,6 +4857,25 @@
       "integrity": "sha512-36yxDn5H7OFZQla0/jFJmbIKTdZAQHngCedGxiMmpNfEZM0sdEeT+WczLQrjK6D7o2aiyLYDnkw0R3JK0Qv1RQ==",
       "dev": true
     },
+    "node_modules/follow-redirects": {
+      "version": "1.15.5",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.5.tgz",
+      "integrity": "sha512-vSFWUON1B+yAw1VN4xMfxgn5fTUiaOzAJCKBwIIgT/+7CuGy9+r+5gITvP62j3RmaD5Ph65UaERdOSRGUzZtgw==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/RubenVerborgh"
+        }
+      ],
+      "engines": {
+        "node": ">=4.0"
+      },
+      "peerDependenciesMeta": {
+        "debug": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/for-each": {
       "version": "0.3.3",
       "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz",
@@ -4862,7 +4889,6 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
       "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
-      "dev": true,
       "dependencies": {
         "asynckit": "^0.4.0",
         "combined-stream": "^1.0.8",
@@ -6495,7 +6521,6 @@
       "version": "1.52.0",
       "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
       "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
-      "dev": true,
       "engines": {
         "node": ">= 0.6"
       }
@@ -6504,7 +6529,6 @@
       "version": "2.1.35",
       "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
       "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
-      "dev": true,
       "dependencies": {
         "mime-db": "1.52.0"
       },
@@ -7539,6 +7563,11 @@
       "integrity": "sha512-vtK/94akxsTMhe0/cbfpR+syPuszcuwhqVjJq26CuNDgFGj682oRBXOP5MJpv2r7JtE8MsiepGIqvvOTBwn2vA==",
       "dev": true
     },
+    "node_modules/proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
+    },
     "node_modules/psl": {
       "version": "1.9.0",
       "resolved": "https://registry.npmjs.org/psl/-/psl-1.9.0.tgz",

package.json

@@ -27,6 +27,7 @@
     "@vue/apollo-components": "^4.0.0",
     "@vue/apollo-composable": "^4.0.1",
     "@vue/apollo-option": "^4.0.0",
+    "axios": "^1.6.7",
     "devextreme": "23.1.5",
     "devextreme-vue": "23.1.5",
     "dotenv": "^16.3.1",

src/components/DatePicker.vue

@@ -1,38 +1,31 @@
 <script setup lang="ts">
-  import { PhCalendarBlank } from '@phosphor-icons/vue';
+import { useDateStore } from '@/stores/date';
-  import { ref } from 'vue'
+import { PhCalendarBlank } from '@phosphor-icons/vue';
-  import VueTailwindDatepicker from 'vue-tailwind-datepicker'
+import { ref, watch } from 'vue'
-  
+import VueTailwindDatepicker from 'vue-tailwind-datepicker'
-
 const dateValue = ref('')
 const formatter = ref({
-  date: 'DD MMM YYYY',
+  date: 'DD-MM-YYYY',
-  month: 'MMM'
+  month: 'MMMM'
+})
+watch(dateValue, (newValue) => {
+  useDateStore().setDateValue(newValue);
+
 })
 </script>
 
 <template>
   <div class="flex">
-    <vue-tailwind-datepicker 
+    <vue-tailwind-datepicker v-model="dateValue" :formatter="formatter" separator=" s/d " :shortcuts="false"
-      v-model="dateValue"
+      :auto-apply="false" as-single use-range v-slot="{ value, placeholder }">
-      :formatter="formatter"
-      separator="   s/d   "
-      :shortcuts="false"
-      :auto-apply="false"
-      as-single 
-      use-range
-      v-slot="{ value, placeholder }"
-    >
       <div class="flex">
         <div class="flex-1">
-          <button
+          <button type="button"
-            type="button"
+            class="w-full flex items-center justify-between px-4 py-2 text-sm leading-6 placeholder:text-gray-400 text-gray-900 border-0 border-transparent rounded-lg outline-0 bg-gray-200 focus:outline-0 focus:border-0 focus:ring-0">
-            class="w-full flex items-center justify-between px-4 py-2 text-sm leading-6 placeholder:text-gray-400 text-gray-900 border-0 border-transparent rounded-lg outline-0 bg-gray-200 focus:outline-0 focus:border-0 focus:ring-0"
-          >
             <span class="text-gray-900">
               {{ value || placeholder }}
             </span>
-            <PhCalendarBlank size="18" weight="regular"/>
+            <PhCalendarBlank size="18" weight="regular" />
           </button>
         </div>
       </div>

src/components/Form/Filters.vue

@@ -1,14 +1,14 @@
 <script setup lang="ts">
   // components
   import Button from '@/components/Button.vue';
-
+  import { useSearchStore } from '@/stores/filtersAction';
    // icons
   import {
     PhArrowsCounterClockwise, 
     PhFileText,
     PhMagnifyingGlass 
   } from '@phosphor-icons/vue';
-
+  const cariButton = useSearchStore()
   defineProps({
     reportButton: {
       type: Boolean,
@@ -26,7 +26,7 @@
     
     <div class="filter-footer rounded-b-2xl px-4 py-3 bg-primary-50 flex justify-end">
       <div class="filter-buttons flex gap-3 flex-wrap">
-        <Button label="Ulangi" style-type="outline" class-name="bg-white">
+        <Button @click="()=>cariButton.isTriggerChange = !cariButton.isTriggerChange" label="Ulangi" style-type="outline" class-name="bg-white">
           <PhArrowsCounterClockwise size="18" class="ml-1" weight="regular" />
         </Button>
 
@@ -34,7 +34,7 @@
           <PhFileText size="18" class="ml-1" weight="regular" />
         </Button>
 
-        <Button label="Cari Data">
+        <Button @click="()=>cariButton.isTriggerChange = !cariButton.isTriggerChange" label="Cari Data">
           <PhMagnifyingGlass  size="18" class="ml-1" weight="regular" />
         </Button>
       </div>

src/components/Form/FiltersType/Type1.vue

@@ -1,36 +1,101 @@
 <script setup lang="ts">
-  import Select from '@/components/Select.vue'
+import Select from '@/components/Select.vue'
-  import DatePicker from '@/components/DatePicker.vue'
+import DatePicker from '@/components/DatePicker.vue'
-  const people = [
+import { getUid, getUp3,getPosko } from '@/utils/network';
-    { id: 1, value: 'ULP GARUT', unavailable: true },
+import { ref } from 'vue'
-    { id: 2, value: 'ULP SUMEDANG', unavailable: false },
+import { usePostsStore } from '@/stores/posts';
-  ]
+import { useUp3Store } from '@/stores/up3';
+import { useRegionStore } from '@/stores/region';
+interface Item {
+  id: number;
+  name: any;
+}
+
+const items = ref<Item[]>([]);
+const itemsUp3 = ref<Item[]>([]);
+const itemsPosko = ref<Item[]>([]);
+// Fetch data from the API using Axios
+const fetchData = async () => {
+  try {
+    const res = await getUid()
+    // console.log(res.data);
+
+    items.value = res.data.map((item: any) => (
+      {
+        id: item.id,
+        name: item.nama,
+      }
+    ));
+  } catch (error) {
+    console.error('Error fetching data:', error);
+  }
+};
+
+const fetchDataUp3 = async (uid: number) => {
+  try {
+    const res = await getUp3(uid)
+    itemsUp3.value = res.data.map((item: any) => (
+      {
+        id: item.id,
+        name: item.nama,
+      }
+    ));
+  } catch (error) {
+    console.error('Error fetching data:', error);
+  }
+};
+const fetchDataPosko = async (uppp: number) => {
+  try {
+    const res = await getPosko(uppp)
+    itemsPosko.value = res.data.map((item: any) => (
+      {
+        id: item.id,
+        name: item.nama,
+      }
+    ));
+  } catch (error) {
+    console.error('Error fetching data:', error);
+  }
+};
+const selectedUid = (value: any) => {
+  useRegionStore().setData(value.id);
+  fetchDataUp3(value.id);
+}
+const selectedUppp = (value: any) => {
+  useUp3Store().setData(value.id);
+  fetchDataPosko(value.id);
+}
+const selectedPosko = (value: any) => {
+  usePostsStore().setData(value.id);
+}
+
+fetchData();
+
 </script>
 
 <template>
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
     <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Induk Distribusi/Wilayah:</label>
 
-    <Select :data=people placeholder="Semua Unit Induk Distribusi/Wilayah" />
+    <Select @update:selected="selectedUid($event)" :data="items" placeholder="Semua Unit Induk Distribusi/Wilayah" />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
-    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block"
+    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Pelaksanaan Pelayanan Pelanggan:</label>
-      >Unit Pelaksanaan Pelayanan Pelanggan:</label
-    >
 
-    <Select placeholder="Semua Unit Pelaksanaan Pelayanan Pelanggan" />
+    <Select @update:selected="selectedUppp($event)" :data="itemsUp3"
+      placeholder="Semua Unit Pelaksanaan Pelayanan Pelanggan" />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
     <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Posko:</label>
 
-    <Select placeholder="Semua Posko" />
+    <Select @update:selected="selectedPosko($event)" :data="itemsPosko" placeholder="Semua Posko" />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
     <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Periode Tanggal:</label>
-
     <DatePicker  />
   </div>
 </template>
+@/stores/up3

src/components/Pages/Gangguan/Table_1.vue

@@ -1,15 +1,17 @@
 <template>
-    <div>
+    <div id="data">
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" key-expr="no_laporan" :show-column-lines="true"
+        <DxDataGrid class="max-h-[calc(100vh-140px)]" :remote-operations="true" :data-source="data" key-expr="no_laporan"
-            :show-row-lines="false" :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
+            :show-column-lines="true" :show-row-lines="false" :show-borders="true" :row-alternation-enabled="true"
-            @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
+            :hover-state-enabled="true" @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
             :allow-column-resizing="true" column-resizing-mode="widget">
             <DxPaging :page-size="5" :enabled="true" />
             <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20, 'all']" display-mode="full"
                 :show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
             <DxSelection mode="single" />
             <!-- <DxScrolling column-rendering-mode="virtual" mode="virtual" row-rendering-mode="virtual" /> -->
-            <DxLoadPanel v-model:visible="loadingVisible" :enabled="true" />
+            <DxLoadPanel :position="position"  :show-indicator="showIndicator"
+                :show-pane="showPane" :shading="shading" 
+                v-if="loading" v-model:visible="loading" :enabled="true" />
             <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
 
@@ -197,24 +199,34 @@
 
 import { DxDataGrid } from 'devextreme-vue'
 import { DxColumn, DxExport, DxLoadPanel, DxPager, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
-import { onMounted, ref } from 'vue'
+import { computed, onMounted, ref, watch } from 'vue'
 import { jsPDF } from 'jspdf'
 import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
-import type { Data1 } from '@/types/gangguan'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
-import { writeDataJson, readDataJson } from '@/utils/storage'
+
+
 import { useDialogStore } from '@/stores/dialog'
 import { useFiltersStore } from '@/stores/filters'
+import { useDateStore } from '@/stores/date'
 import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
 import InputText from '@/components/InputText.vue'
 import { useQuery } from '@vue/apollo-composable'
 import gql from 'graphql-tag'
+import { useSearchStore } from '@/stores/filtersAction';
+import { usePostsStore } from '@/stores/posts';
+import { useUp3Store } from '@/stores/up3';
+import { useRegionStore } from '@/stores/region';
+const position = { of: '#data' };
+const showIndicator = ref(true);
+const shading = ref(true);
+const showPane = ref(true);
 const dialog = useDialogStore()
 const data = ref<any[]>([])
 const dataDetail = ref<any>()
 const showDetail = ref(false)
+
 const closeDetail = () => {
     showDetail.value = false
 }
@@ -274,9 +286,42 @@ const GET_GANGGUAN_DATA_DI_ALIHAN_KE_POSKO_LAIN = gql`
     }
   }
 `;
+const { onResult, loading, refetch } = useQuery(GET_GANGGUAN_DATA_DI_ALIHAN_KE_POSKO_LAIN, {
+    dateFrom: new Date().toISOString().slice(0, 10),
+    dateTo: new Date().toISOString().slice(0, 10),
+    posko: "",
+    idUid: 0,
+    idUp3: 0,
+})
+const reportButton = useSearchStore()
+const detected = computed(() => reportButton.isTriggerChange)
+watch(detected, () => {
     
-
+    const dateValue = useDateStore().getDateValue().split(' s/d ');
-
+    const posko = usePostsStore().getData() ? usePostsStore().getData() : ""
+    const up3 = useUp3Store().getData() ? useUp3Store().getData() : 0
+    const uid = useRegionStore().getData() ? useRegionStore().getData() : 0
+    refetch({
+        dateFrom: dateValue[0].split('-').reverse().join('-'),
+        dateTo: dateValue[1].split('-').reverse().join('-'),
+        posko: posko,
+        idUid: uid,
+        idUp3: up3,
+    })
+    onResult(queryResult => {
+        if (queryResult.data != undefined) {
+            queryResult.data.daftarGangguanDialihkanKePoskoLain.forEach((item: any) => {
+                data.value = [...data.value, {
+                    ...item,
+                    pembuat_laporan: 'BELUM ADA'
+                }];
+            });
+        }
+        console.log(queryResult.data)
+        console.log(queryResult.loading)
+        console.log(queryResult.networkStatus)
+    })
+})
 const onSelectionChanged = ({ selectedRowsData }: any) => {
     const data = selectedRowsData[0]
     dataDetail.value = data
@@ -287,36 +332,13 @@ const showData = () => {
     showDetail.value = true
 }
 
-const loadingVisible = ref<boolean>(true)
 
 onMounted(() => {
     const filters = useFiltersStore()
-    loadingVisible.value = true
-    const { onResult, variables } = useQuery(GET_GANGGUAN_DATA_DI_ALIHAN_KE_POSKO_LAIN, {
-        dateFrom: new Date("2023-10-01").toISOString().slice(0, 10),
-        dateTo: new Date("2023-10-01").toISOString().slice(0, 10),
-        posko: "",
-        idUid: 0,
-        idUp3: 0,
-    })
-    onResult(queryResult => {
-        if (queryResult.data != undefined) {
-            queryResult.data.daftarGangguanDialihkanKePoskoLain.forEach((item: any) => {
-                data.value = [...data.value,{
-                    ...item,
-                    pembuat_laporan: 'BELUM ADA'
-                }];
-            });
-            loadingVisible.value = false
-        }
-        console.log(queryResult.data)
-        console.log(queryResult.loading)
-        console.log(queryResult.networkStatus)
-    })
 
     filters.setConfig({
         type: 'type-1',
-    })
+    });
 })
 
 </script>

src/components/Select.vue

@@ -1,21 +1,21 @@
 <script setup lang="ts">
-  interface DataItem {
+interface DataItem {
   id: number;
-    value: string;
+  name: string;
-  }
+}
 
-  import { ref, computed } from 'vue'
+import { ref, computed, onMounted } from 'vue'
-  import {
+import {
   Combobox,
   ComboboxInput,
   ComboboxButton,
   ComboboxOptions,
   ComboboxOption,
   TransitionRoot
-  } from '@headlessui/vue'
+} from '@headlessui/vue'
-  import { CheckIcon, ChevronUpDownIcon } from '@heroicons/vue/20/solid'
+import { CheckIcon, ChevronUpDownIcon } from '@heroicons/vue/20/solid'
 
-  const props = defineProps({
+const props = defineProps({
   placeholder: {
     type: String,
     default: ''
@@ -24,91 +24,70 @@
     type: Array as () => DataItem[],
     default: []
   }
-  })
+})
+const emit = defineEmits(["update:selected"])
 
-  const data: DataItem[] = [
+const data = computed(() => [{ id:0, name: props.placeholder }, ...props.data]);
-    {id: 0, value: props.placeholder},
-    ...props.data
-  ]
 
-  let selected = ref(data[0])
+let selected = ref<DataItem>(data.value[0])
-  let query = ref('')
+let query = ref('')
-
+let filteredData = computed(() =>
-  let filteredData = computed(() =>
   query.value === ''
-      ? data
+    ? data.value
-      : data.filter((item: DataItem) =>
+    : data.value.filter((item: DataItem) =>
-          item.value
+      item.name
         .toLowerCase()
         .replace(/\s+/g, '')
         .includes(query.value.toLowerCase().replace(/\s+/g, ''))
     )
-  )
+)
+
+const show = ref(false)
+
+onMounted(() => {
+})
+
 
-  const show = ref(false)
 </script>
 
 <template>
-  <Combobox v-model="selected" v-slot="{ open }">
+  <Combobox  
+  @update:modelValue="value => emit('update:selected', value)"
+  v-model="selected" v-slot="{ open }">
     <div class="relative mt-1">
       <div
-        class="relative w-full cursor-default overflow-hidden rounded-lg bg-gray-200 text-left focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75 focus-visible:ring-offset-2 focus-visible:ring-offset-teal-300 sm:text-sm"
+        class="relative w-full cursor-default overflow-hidden rounded-lg bg-gray-200 text-left focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75 focus-visible:ring-offset-2 focus-visible:ring-offset-teal-300 sm:text-sm">
-      >
+        <ComboboxInput class="w-full border-none py-2 pl-3 pr-10 bg-gray-200 text-sm leading-5 text-gray-900 focus:ring-0"
-        <ComboboxInput
+          :displayValue="(item: any) => (show || open ? '' : item.name)" @change="query = $event.target.value"
-          class="w-full border-none py-2 pl-3 pr-10 bg-gray-200 text-sm leading-5 text-gray-900 focus:ring-0"
+          @click="show = true" @blur="show = false" defaultValue="" />
-          :displayValue="(item: any) => (show || open ? '' : item.value)"
-          @change="query = $event.target.value"
-          @click="show = true"
-          @blur="show = false"
-          defaultValue="sasa"
-        />
 
         <ComboboxButton id="Test" class="absolute inset-y-0 right-0 flex items-center pr-2">
           <ChevronUpDownIcon class="h-5 w-5 text-gray-400" aria-hidden="true" />
         </ComboboxButton>
       </div>
-      <TransitionRoot
+      <TransitionRoot :show="show || open" 
-        :show="show || open"
+      
-        leave="transition ease-in duration-100"
+      leave="transition ease-in duration-100" leaveFrom="opacity-100"
-        leaveFrom="opacity-100"
+        leaveTo="opacity-0" @after-leave="query = ''">
-        leaveTo="opacity-0"
+        <ComboboxOptions static
-        @after-leave="query = ''"
+          class="absolute mt-1 z-10 max-h-60 w-full overflow-auto rounded-md bg-gray-200 py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
-      >
+          <div v-if="filteredData.length === 0 && query !== ''"
-        <ComboboxOptions
+            class="relative cursor-default select-none py-2 px-4 text-gray-700">
-          class="absolute mt-1 z-10 max-h-60 w-full overflow-auto rounded-md bg-gray-200 py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm"
-        >
-          <div
-            v-if="filteredData.length === 0 && query !== ''"
-            class="relative cursor-default select-none py-2 px-4 text-gray-700"
-          >
             Nothing found.
           </div>
         
-          <ComboboxOption
+          <ComboboxOption v-for="item in filteredData" 
-            v-for="item in filteredData"
+          as="template" :key="item.id" :value="item"
-            as="template"
+            v-slot="{ selected, active }">
-            :key="item.id"
+            <li class="relative cursor-default select-none py-2 pl-10 pr-4" :class="{
-            :value="item"
-            v-slot="{ selected, active }"
-          >
-            <li
-              class="relative cursor-default select-none py-2 pl-10 pr-4"
-              :class="{
               'bg-teal-600 text-white': active,
               'text-gray-900': !active
-              }"
+            }">
-            >
+              <span class="block truncate" :class="{ 'font-medium': selected, 'font-normal': !selected }">
-              <span
+                {{ item.name }}
-                class="block truncate"
-                :class="{ 'font-medium': selected, 'font-normal': !selected }"
-              >
-                {{ item.value }}
               </span>
-              <span
+              <span v-if="selected"  class="absolute inset-y-0 left-0 flex items-center pl-3"
-                v-if="selected"
+                :class="{ 'text-white': active, 'text-teal-600': !active }">
-                class="absolute inset-y-0 left-0 flex items-center pl-3"
-                :class="{ 'text-white': active, 'text-teal-600': !active }"
-              >
                 <CheckIcon class="h-5 w-5" aria-hidden="true" />
               </span>
             </li>

src/stores/date.ts

@@ -0,0 +1,16 @@
+import { ref } from 'vue'
+import { defineStore } from 'pinia'
+
+export const useDateStore = defineStore('date', () => {
+    const dateValue = ref('')
+    const setDateValue = (value: string) => {
+        dateValue.value = value
+    }
+    const getDateValue = () => {
+        return dateValue.value
+    }
+    return {
+        setDateValue,
+        getDateValue,
+    }
+})

src/stores/filtersAction.ts

@@ -0,0 +1,9 @@
+import { ref } from 'vue'
+import { defineStore } from 'pinia'
+
+
+export const useSearchStore = defineStore('dateTest', () => {
+    return {
+       isTriggerChange: ref(false),
+    }
+})

src/stores/posts.ts

@@ -0,0 +1,16 @@
+import { ref } from 'vue'
+import { defineStore } from 'pinia'
+
+export const usePostsStore = defineStore('posts', () => {
+    const posts = ref('')
+    const setData = (value: string) => {
+        posts.value = value
+    }
+    const getData = () => {
+        return posts.value
+    }
+    return {
+        setData,
+        getData,
+    }
+})

src/stores/region.ts

@@ -0,0 +1,16 @@
+import { ref } from 'vue'
+import { defineStore } from 'pinia'
+
+export const useRegionStore = defineStore('region', () => {
+    const region = ref()
+    const setData = (value: Number) => {
+        region.value = value
+    }
+    const getData = () => {
+        return region.value
+    }
+    return {
+        setData,
+        getData,
+    }
+})

src/stores/up3.ts

@@ -0,0 +1,16 @@
+import { ref } from 'vue'
+import { defineStore } from 'pinia'
+
+export const useUp3Store = defineStore('up3', () => {
+    const up3 = ref()
+    const setData = (value: number) => {
+        up3.value = value
+    }
+    const getData = () => {
+        return up3.value
+    }
+    return {
+        setData,
+        getData,
+    }
+})

src/utils/network.ts

@@ -0,0 +1,13 @@
+import axios from "axios";
+
+const instance = axios.create({
+    baseURL: 'http://localhost:8443'
+});
+
+
+const getUid = async () => await instance.get('/uid');
+const getUp3 = async (
+    uid: number,
+) => await instance.get('/up3?uid=' + uid);
+const getPosko = async (uppp: number) => await instance.get('/posko?up3=' + uppp);
+export { getUid, getUp3, getPosko };