filter & storage

2024-02-01 22:21:41 +07:00 · 2024-02-01 22:21:41 +07:00 · a278bb353c
commit a278bb353c
parent f5fe6ae0e6
13 changed files with 349 additions and 174 deletions
--- a/package-lock.json
+++ b/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==",
-      "dev": true
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
    },
    "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",
--- a/package.json
+++ b/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",
--- a/src/components/DatePicker.vue
+++ b/src/components/DatePicker.vue
@ -1,34 +1,27 @@
 <script setup lang="ts">
+import { useDateStore } from '@/stores/date';
 import { PhCalendarBlank } from '@phosphor-icons/vue';
-  import { ref } from 'vue'
+import { ref, watch } from 'vue'
 import VueTailwindDatepicker from 'vue-tailwind-datepicker'
-  
-
 const dateValue = ref('')
 const formatter = ref({
-  date: 'DD MMM YYYY',
-  month: 'MMM'
+  date: 'DD-MM-YYYY',
+  month: 'MMMM'
+})
+watch(dateValue, (newValue) => {
+  useDateStore().setDateValue(newValue);
+
 })
 </script>

 <template>
  <div class="flex">
-    <vue-tailwind-datepicker 
-      v-model="dateValue"
-      :formatter="formatter"
-      separator="   s/d   "
-      :shortcuts="false"
-      :auto-apply="false"
-      as-single 
-      use-range
-      v-slot="{ value, placeholder }"
-    >
+    <vue-tailwind-datepicker v-model="dateValue" :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
-            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"
-          >
+          <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">
            <span class="text-gray-900">
              {{ value || placeholder }}
            </span>
--- a/src/components/Form/Filters.vue
+++ b/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>
--- a/src/components/Form/FiltersType/Type1.vue
+++ b/src/components/Form/FiltersType/Type1.vue
@ -1,36 +1,101 @@
 <script setup lang="ts">
 import Select from '@/components/Select.vue'
 import DatePicker from '@/components/DatePicker.vue'
-  const people = [
-    { id: 1, value: 'ULP GARUT', unavailable: true },
-    { id: 2, value: 'ULP SUMEDANG', unavailable: false },
-  ]
+import { getUid, getUp3,getPosko } from '@/utils/network';
+import { ref } from 'vue'
+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"
-      >Unit Pelaksanaan Pelayanan Pelanggan:</label
-    >
+    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">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
--- a/src/components/Pages/Gangguan/Table_1.vue
+++ b/src/components/Pages/Gangguan/Table_1.vue
@ -1,15 +1,17 @@
 <template>
-    <div>
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" key-expr="no_laporan" :show-column-lines="true"
-            :show-row-lines="false" :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
-            @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
+    <div id="data">
+        <DxDataGrid class="max-h-[calc(100vh-140px)]" :remote-operations="true" :data-source="data" key-expr="no_laporan"
+            :show-column-lines="true" :show-row-lines="false" :show-borders="true" :row-alternation-enabled="true"
+            :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>
--- a/src/components/Select.vue
+++ b/src/components/Select.vue
@ -1,10 +1,10 @@
 <script setup lang="ts">
 interface DataItem {
  id: number;
-    value: string;
+  name: string;
 }

-  import { ref, computed } from 'vue'
+import { ref, computed, onMounted } from 'vue'
 import {
  Combobox,
  ComboboxInput,
@ -25,20 +25,17 @@
    default: []
  }
 })
+const emit = defineEmits(["update:selected"])

-  const data: DataItem[] = [
-    {id: 0, value: props.placeholder},
-    ...props.data
-  ]
+const data = computed(() => [{ id:0, name: props.placeholder }, ...props.data]);

-  let selected = ref(data[0])
+let selected = ref<DataItem>(data.value[0])
 let query = ref('')
-
 let filteredData = computed(() =>
  query.value === ''
-      ? data
-      : data.filter((item: DataItem) =>
-          item.value
+    ? data.value
+    : data.value.filter((item: DataItem) =>
+      item.name
        .toLowerCase()
        .replace(/\s+/g, '')
        .includes(query.value.toLowerCase().replace(/\s+/g, ''))
@ -46,69 +43,51 @@
 )

 const show = ref(false)
+
+onMounted(() => {
+})
+
+
 </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"
-      >
-        <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"
-          :displayValue="(item: any) => (show || open ? '' : item.value)"
-          @change="query = $event.target.value"
-          @click="show = true"
-          @blur="show = false"
-          defaultValue="sasa"
-        />
+        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"
+          :displayValue="(item: any) => (show || open ? '' : item.name)" @change="query = $event.target.value"
+          @click="show = true" @blur="show = false" defaultValue="" />

        <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
-        :show="show || open"
-        leave="transition ease-in duration-100"
-        leaveFrom="opacity-100"
-        leaveTo="opacity-0"
-        @after-leave="query = ''"
-      >
-        <ComboboxOptions
-          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"
-          >
+      <TransitionRoot :show="show || open" 
+      
+      leave="transition ease-in duration-100" leaveFrom="opacity-100"
+        leaveTo="opacity-0" @after-leave="query = ''">
+        <ComboboxOptions static
+          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
-            v-for="item in filteredData"
-            as="template"
-            :key="item.id"
-            :value="item"
-            v-slot="{ selected, active }"
-          >
-            <li
-              class="relative cursor-default select-none py-2 pl-10 pr-4"
-              :class="{
+          <ComboboxOption v-for="item in filteredData" 
+          as="template" :key="item.id" :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 }"
-              >
-                {{ item.value }}
+            }">
+              <span class="block truncate" :class="{ 'font-medium': selected, 'font-normal': !selected }">
+                {{ item.name }}
              </span>
-              <span
-                v-if="selected"
-                class="absolute inset-y-0 left-0 flex items-center pl-3"
-                :class="{ 'text-white': active, 'text-teal-600': !active }"
-              >
+              <span v-if="selected"  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>
--- a/src/stores/date.ts
+++ b/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,
+    }
+})
--- a/src/stores/filtersAction.ts
+++ b/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),
+    }
+})
--- a/src/stores/posts.ts
+++ b/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,
+    }
+})
--- a/src/stores/region.ts
+++ b/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,
+    }
+})
--- a/src/stores/up3.ts
+++ b/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,
+    }
+})
--- a/src/utils/network.ts
+++ b/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 };