defuj/apkt-eis
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update date picker in Form FiltersType components

Browse Source
This commit is contained in:
probdg 2024-02-09 19:26:49 +07:00
parent 01e66847bf
commit 945914a48b
24 changed files with 379 additions and 266 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
src/components/DatePicker.vue
View File

@ -1,27 +1,40 @@
<script setup lang="ts">
import { useDateStore } from '@/stores/date';
import { PhCalendarBlank } from '@phosphor-icons/vue';
import { PhCalendarBlank } from '@phosphor-icons/vue'
import { ref, watch } from 'vue'
import VueTailwindDatepicker from 'vue-tailwind-datepicker'
const dateValue = ref('')
const formatter = ref({
date: 'DD-MM-YYYY',
month: 'MMMM'
})
watch(dateValue, (newValue) => {
useDateStore().setDateValue(newValue);
const emit = defineEmits(['update:dateValue'])
watch(dateValue, (newValue) => {
emit('update:dateValue', 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>
@ -31,4 +44,4 @@ watch(dateValue, (newValue) => {
</div>
</vue-tailwind-datepicker>
</div>
</template>
</template>

56
src/components/Form/Filters.vue
View File

@ -1,44 +1,52 @@
<!-- ss -->
<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,
default: false
}
})
// 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,
default: false
}
})
const emit = defineEmits(['runSearch'])
</script>
<template>
<div class="filters rounded-2xl">
<form class="filter-body bg-gray-50 mx-auto space-y-3 p-4 rounded-t-2xl">
<slot></slot>
</form>
<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 @click="()=>cariButton.isTriggerChange = !cariButton.isTriggerChange" 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>
<Button v-if="reportButton" label="Lihat Laporan" style-type="outline" class-name="bg-white">
<Button
v-if="reportButton"
label="Lihat Laporan"
style-type="outline"
class-name="bg-white"
>
<PhFileText size="18" class="ml-1" weight="regular" />
</Button>
<Button @click="()=>cariButton.isTriggerChange = !cariButton.isTriggerChange" label="Cari Data">
<PhMagnifyingGlass size="18" class="ml-1" weight="regular" />
<Button @on:click="() => emit('runSearch')" label="Cari Data">
<PhMagnifyingGlass size="18" class="ml-1" weight="regular" />
</Button>
</div>
</div>
</div>
</template>
</template>

100
src/components/Form/FiltersType/Type1.vue
View File

@ -1,58 +1,98 @@
<script setup lang="ts">
import Select from '@/components/Select.vue'
import DatePicker from '@/components/DatePicker.vue'
import { selectedUid, selectedUp3Posko, selectedPosko ,fetchData, items,itemsUp3, itemsPosko} from './reference';
import { ref } from 'vue';
fetchData();
const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah';
const uppPlaceholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan';
const poskoPlaceholder = 'Semua Posko';
const uppp = ref({ id: 0, name: uppPlaceholder });
const uid = ref({ id: 0, name:uidPlaceholder });
const posko = ref({ id: 0, name: poskoPlaceholder });
import {
selectedUid,
selectedUp3Posko,
selectedPosko,
itemsUid,
itemsUp3,
itemsPosko,
fetchUid
} from './reference'
import { onMounted, ref, watch } from 'vue'
const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah'
const uppPlaceholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan'
const poskoPlaceholder = 'Semua Posko'
const uppp = ref({ id: 0, name: uppPlaceholder })
const uid = ref({ id: 0, name: uidPlaceholder })
const posko = ref({ id: 0, name: poskoPlaceholder })
const emit = defineEmits(['update:filters'])
const data = ref({
uid: uid.value,
up3: uppp.value,
posko: posko.value,
periode: ''
})
watch(data.value, (value) => {
emit('update:filters', value)
})
const setUid = (value: any) => {
uid.value = value;
selectedUid(value);
uppp.value = { id: 0, name: uppPlaceholder };
};
uid.value = value
selectedUid(value)
uppp.value = { id: 0, name: uppPlaceholder }
data.value.uid = value
}
const setUp3 = (value: any) => {
uppp.value = value;
selectedUp3Posko(value);
posko.value = { id: 0, name: poskoPlaceholder };
};
uppp.value = value
selectedUp3Posko(value)
posko.value = { id: 0, name: poskoPlaceholder }
data.value.up3 = value
}
const setPosko = (value: any) => {
posko.value = value;
selectedPosko(value);
};
posko.value = value
selectedPosko(value)
data.value.posko = value
}
onMounted(() => {
fetchUid()
emit('update:filters', data.value)
})
</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>
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block"
>Unit Induk Distribusi/Wilayah:</label
>
<Select @update:selected="setUid($event)" :data="items"
:placeholder="uidPlaceholder" />
<Select @update:selected="setUid($event)" :data="itemsUid" :placeholder="uidPlaceholder" />
</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 @update:selected="setUp3($event)" :data="itemsUp3" :selected="uppp"
:placeholder="uppPlaceholder" />
<Select
@update:selected="setUp3($event)"
:data="itemsUp3"
:selected="uppp"
:placeholder="uppPlaceholder"
/>
</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 @update:selected="setPosko($event)"
:data="itemsPosko" :selected="posko" :placeholder="poskoPlaceholder" />
<Select
@update:selected="setPosko($event)"
:data="itemsPosko"
:selected="posko"
:placeholder="poskoPlaceholder"
/>
</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 />
<DatePicker @update:date-value="(value) => {
data.periode = value
}
" />
</div>
</template>
</template>

5
src/components/Form/FiltersType/Type10.vue
View File

@ -29,7 +29,10 @@
<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 />
<DatePicker @update:date-value="(value) => {
data.periode = value
}
" />
</div>
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">

5
src/components/Form/FiltersType/Type11.vue
View File

@ -29,7 +29,10 @@
<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 />
<DatePicker @update:date-value="(value) => {
data.periode = value
}
" />
</div>
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">

5
src/components/Form/FiltersType/Type12.vue
View File

@ -30,7 +30,10 @@
<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 />
<DatePicker @update:date-value="(value) => {
data.periode = value
}
" />
</div>
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">

5
src/components/Form/FiltersType/Type13.vue
View File

@ -30,7 +30,10 @@
<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 />
<DatePicker @update:date-value="(value) => {
data.periode = value
}
" />
</div>
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">

5
src/components/Form/FiltersType/Type14.vue
View File

@ -29,6 +29,9 @@
<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 />
<DatePicker @update:date-value="(value) => {
data.periode = value
}
" />
</div>
</template>

5
src/components/Form/FiltersType/Type15.vue
View File

@ -20,6 +20,9 @@
<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 />
<DatePicker @update:date-value="(value) => {
data.periode = value
}
" />
</div>
</template>

5
src/components/Form/FiltersType/Type16.vue
View File

@ -35,6 +35,9 @@ fetchMedia();
<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 />
<DatePicker @update:date-value="(value) => {
data.periode = value
}
" />
</div>
</template>

5
src/components/Form/FiltersType/Type17.vue
View File

@ -8,7 +8,10 @@
<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 />
<DatePicker @update:date-value="(value) => {
data.periode = value
}
" />
</div>
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">

4
src/components/Form/FiltersType/Type18.vue
View File

@ -3,7 +3,7 @@ import Select from '@/components/Select.vue'
import SelectMulti from '@/components/SelectMulti.vue'
import DatePicker from '@/components/DatePicker.vue'
import { selectedUid, selectedUp3Posko, selectedPosko ,fetchData, items,itemsUp3, itemsPosko} from './reference';
import { selectedUid, selectedUp3Posko, selectedPosko ,fetchUid, itemsUid,itemsUp3, itemsPosko} from './reference';
fetchData();
const departments = [
@ -20,7 +20,7 @@ const departments = [
<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 @update:selected="selectedUid($event)" :data="items" placeholder="Semua Unit Induk Distribusi/Wilayah" />
<Select @update:selected="selectedUid($event)" :data="itemsUid" placeholder="Semua Unit Induk Distribusi/Wilayah" />
</div>
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">

8
src/components/Form/FiltersType/Type2.vue
View File

@ -1,8 +1,7 @@
<script setup lang="ts">
import Select from '@/components/Select.vue'
import { selectedUid, selectedUp3Ulp, fetchData, items, itemsUp3, itemsUlp,itemsRegional ,months, years} from './reference';
import { selectedUid, selectedUp3Ulp, fetchUid, itemsUid, itemsUp3, itemsUlp,itemsRegional ,months, years} from './reference';
import { ref } from 'vue';
fetchData();
const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah';
const up3Placholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan';
const ulpPlaceholder = 'Semua Unit Layanan Pelanggan';
@ -19,7 +18,7 @@ const setRegional = (value: any) => {
};
const setUid = (value: any) => {
uid.value = value;
selectedUid(value);
selectedUid(value);
uppp.value = { id: 0, name: up3Placholder };
};
@ -33,6 +32,7 @@ const setUlp = (value: any) => {
ulp.value = value;
selectedUp3Ulp(value);
};
</script>
<template>
@ -45,7 +45,7 @@ const setUlp = (value: any) => {
<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 @update:selected="setUid($event)" :data="items" :placeholder="uidPlaceholder" />
<Select @update:selected="setUid($event)" :data="itemsUid" :placeholder="uidPlaceholder" />
</div>
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">

9
src/components/Form/FiltersType/Type3.vue
View File

@ -1,7 +1,7 @@
<script setup lang="ts">
import Select from '@/components/Select.vue'
import DatePicker from '@/components/DatePicker.vue'
import { selectedUid, selectedUp3Ulp,selectedUlp, fetchData, items, itemsUp3, itemsUlp } from './reference';
import { selectedUid, selectedUp3Ulp,selectedUlp, fetchUid, itemsUid, itemsUp3, itemsUlp } from './reference';
import { ref } from 'vue';
fetchData();
const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah';
@ -33,7 +33,7 @@ const setUlp = (value: any) => {
<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 @update:selected="setUid($event)" :data="items" :placeholder="uidPlaceholder" />
<Select @update:selected="setUid($event)" :data="itemsUid" :placeholder="uidPlaceholder" />
</div>
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
@ -51,6 +51,9 @@ const setUlp = (value: any) => {
<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 />
<DatePicker @update:date-value="(value) => {
data.periode = value
}
" />
</div>
</template>

5
src/components/Form/FiltersType/Type4.vue
View File

@ -37,6 +37,9 @@
<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 />
<DatePicker @update:date-value="(value) => {
data.periode = value
}
" />
</div>
</template>

5
src/components/Form/FiltersType/Type5.vue
View File

@ -27,6 +27,9 @@
<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 />
<DatePicker @update:date-value="(value) => {
data.periode = value
}
" />
</div>
</template>

9
src/components/Form/FiltersType/Type6.vue
View File

@ -2,7 +2,7 @@
import InputNumber from '@/components/Form/InputNumber.vue'
import Select from '@/components/Select.vue'
import DatePicker from '@/components/DatePicker.vue'
import { selectedUid, selectedUp3Posko, selectedPosko ,fetchData, items,itemsUp3, itemsPosko} from './reference';
import { selectedUid, selectedUp3Posko, selectedPosko ,fetchUid, itemsUid,itemsUp3, itemsPosko} from './reference';
import { useTotalReport } from '@/stores/totalReport';
fetchData();
const changeMinReport = (value: any) => {
@ -17,7 +17,7 @@ import { useTotalReport } from '@/stores/totalReport';
<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 @update:selected="selectedUid($event)" :data="items" placeholder="Semua Unit Induk Distribusi/Wilayah"/>
<Select @update:selected="selectedUid($event)" :data="itemsUid" placeholder="Semua Unit Induk Distribusi/Wilayah"/>
</div>
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
@ -37,7 +37,10 @@ import { useTotalReport } from '@/stores/totalReport';
<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 />
<DatePicker @update:date-value="(value) => {
data.periode = value
}
" />
</div>
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">

5
src/components/Form/FiltersType/Type7.vue
View File

@ -61,7 +61,10 @@ import { ref } from 'vue';
<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 />
<DatePicker @update:date-value="(value) => {
data.periode = value
}
" />
</div>
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">

5
src/components/Form/FiltersType/Type8.vue
View File

@ -21,6 +21,9 @@
<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 />
<DatePicker @update:date-value="(value) => {
data.periode = value
}
" />
</div>
</template>

5
src/components/Form/FiltersType/Type9.vue
View File

@ -28,7 +28,10 @@
<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 />
<DatePicker @update:date-value="(value) => {
data.periode = value
}
" />
</div>
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">

146
src/components/Form/FiltersType/reference.ts
View File

@ -1,11 +1,10 @@
import { getUid, getUp3, getPosko, getUlp } from '@/utils/network';
import { ref } from 'vue'
import { usePostsStore } from '@/stores/posts';
import { useUp3Store } from '@/stores/up3';
import { useRegionStore } from '@/stores/region';
import { useUlpStore } from '@/stores/ulp';
import { useUp3Store } from '@/stores/up3';
import { getUid, getUp3, getPosko, getUlp } from '@/utils/network';
import { ref } from 'vue'
interface Item {
id: any;
name: any;
@ -30,73 +29,13 @@ const years = ref<Item[]>([]);
for (let i = 0; i < 5; i++) {
years.value.push({ id: year - i, name: year - i })
}
const timeout = ref()
const items = ref<Item[]>([]);
const itemsUid = ref<Item[]>([]);
const itemsUp3 = ref<Item[]>([]);
const itemsPosko = ref<Item[]>([]);
const itemsUlp = ref<Item[]>([]);
const itemsRegional = ref<Item[]>([]);
const itemsMedia = ref<Item[]>([]);
// Fetch data from the API using Axios
const fetchData = async () => {
try {
const res = await getUid()
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 fetchDataUlp = async (up3: number) => {
try {
const res = await getUlp(up3)
itemsUlp.value = res.data.map((item: any) => (
{
id: item.name,
name: item.name,
}
));
} catch (error) {
console.error('Error fetching data:', error);
}
}
const fetchDataPosko = async (up3: number) => {
clearTimeout(timeout.value)
timeout.value = setTimeout(async () => {
try {
const res = await getPosko(up3)
itemsPosko.value = res.data.map((item: any) => (
{
id: item.nama,
name: item.nama,
}
));
} catch (error) {
console.error('Error fetching data:', error);
}
}, 300);
};
const fetchMedia = () => {
itemsMedia.value = [
{ id: "Ulasan Aplikasi PLN Mobile", name: "Ulasan Aplikasi PLN Mobile"},
@ -115,6 +54,62 @@ const fetchMedia = () => {
]
}
// Fetch data from the API using Axios
const fetchUid = async () => {
try {
const res = await getUid()
itemsUid.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 fetchDataUlp = async (up3: number) => {
try {
const res = await getUlp(up3)
itemsUlp.value = res.data.map((item: any) => ({
id: item.id,
name: item.nama
}))
} catch (error) {
console.error('Error fetching data:', error)
}
}
const fetchDataPosko = async (up3: number) => {
try {
const res = await getPosko(up3)
itemsPosko.value = res.data.map((item: any) => ({
id: item.id,
name: item.nama
}))
} catch (error) {
console.error('Error fetching data:', error)
}
}
const fetchRegional = () => {
itemsRegional.value = [
{ id: "1", name: "Wilayah Sumatera" },
{ id: "2", name: "Wilayah Jawa Bali" },
{ id: "3", name: "Wilayah Kalimantan" },
{ id: "4", name: "Wilayah Sulawesi" },
{ id: "5", name: "Wilayah Nusa Tenggara" },
{ id: "6", name: "Wilayah Maluku Papua" },
]
}
const fetchStatus = (data : any) => {
const status = [
@ -132,24 +127,25 @@ const fetchStatus = (data : any) => {
return name;
}
const selectedUid = (value: any) => {
useRegionStore().setData(value.id);
fetchDataUp3(value.id);
useRegionStore().setData(value.id)
fetchDataUp3(value.id)
}
const selectedUp3Posko = (value: any) => {
useUp3Store().setData(value.id);
fetchDataPosko(value.id);
if (value.id != 0) {
useUp3Store().setData(value.id)
fetchDataPosko(value.id)
}
}
const selectedUp3Ulp = (value: any) => {
useUp3Store().setData(value.id);
fetchDataUlp(value.id);
useUp3Store().setData(value.id)
fetchDataUlp(value.id)
}
const selectedPosko = (value: any) => {
usePostsStore().setData(value.id);
usePostsStore().setData(value.id)
}
const selectedUlp = (value: any) => {
useUlpStore().setData(value.id);
useUlpStore().setData(value.id)
}
export { selectedUid, selectedUp3Posko, selectedUp3Ulp, selectedPosko, selectedUlp, fetchData,fetchMedia,fetchStatus, items, itemsUp3, itemsPosko, itemsRegional, itemsMedia, itemsUlp, months, years };
export { selectedUid, selectedUp3Posko, selectedUp3Ulp, selectedPosko, selectedUlp,fetchRegional, fetchUid,fetchMedia,fetchStatus, itemsUid, itemsUp3, itemsPosko, itemsRegional, itemsMedia, itemsUlp, months, years };

50
src/components/Pages/Gangguan/Table_1.vue
View File

@ -1,4 +1,10 @@
<template>
<Filters @run-search="() => {
console.log(filters)
filterData(filters)
}" class="mb-4">
<Type1 @update:filters="(value) => { filters = value }" />
</Filters>
<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"
@ -9,10 +15,8 @@
: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 :position="position"
:show-indicator="showIndicator"
:show-pane="showPane" :shading="shading"
v-if="loading" v-model:visible="loading" :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,7 +201,8 @@
</template>
<script setup lang="ts">
import Filters from '@/components/Form/Filters.vue'
import Type1 from '@/components/Form/FiltersType/Type1.vue'
import { DxDataGrid } from 'devextreme-vue'
import { DxColumn, DxExport, DxLoadPanel, DxPager, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
import { computed, onMounted, ref, watch } from 'vue'
@ -207,17 +212,10 @@ import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
import { saveAs } from 'file-saver'
import { Workbook } from 'exceljs'
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';
import { fetchStatus } from '@/components/Form/FiltersType/reference'
const position = { of: '#data' };
const showIndicator = ref(true);
@ -296,14 +294,13 @@ const { onResult, onError, loading, refetch } = useQuery(GET_GANGGUAN_DATA_DI_AL
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
// const detected = computed(() => reportButton.isTriggerChange)
const filterData =(filters: any) => {
console.log(filters)
const dateValue = filters().periode.split(' s/d ');
const posko = filters().posko ? filters().posko : ""
const up3 = filters().up3 ? filters().up3 : 0
const uid = filters().uid ? filters().uid : 0
refetch({
dateFrom: dateValue[0].split('-').reverse().join('-'),
dateTo: dateValue[1].split('-').reverse().join('-'),
@ -316,7 +313,7 @@ watch(detected, () => {
queryResult.data.daftarGangguanDialihkanKePoskoLain.forEach((item: any) => {
data.value = [...data.value, {
...item,
status_akhir : fetchStatus(item.status_akhir)
status_akhir: fetchStatus(item.status_akhir)
}];
});
}
@ -327,20 +324,15 @@ watch(detected, () => {
onError((error) => {
console.log(error)
})
})
}
const onSelectionChanged = ({ selectedRowsData }: any) => {
const data = selectedRowsData[0]
dataDetail.value = data
console.log(data)
}
const showData = () => {
showDetail.value = true
}
onMounted(() => {
const filters = useFiltersStore()
filters.setConfig({
type: 'type-1',
});
})
const filters = ref()
</script>

48
src/components/Pages/MenuProvider.vue
View File

@ -1,30 +1,24 @@
<template>
<main
class="flex flex-col justify-between flex-1 px-4 overflow-y-auto bg-white md:mr-3 sm:px-3 md:px-6 rounded-t-2xl md:rounded-t-3xl no-scroll-bar">
<div v-if="route.path !== '/home'" class="mt-4 lg:mt-6 max-w-7xl">
<h1 class="text-xl font-semibold md:text-3xl text-dark">{{ pageTitle }}</h1>
</div>
<div class="flex-1 mt-2 sm:mt-4 dx-viewport">
<Filters :report-button="filters.config.reportButton" class="mb-4" v-if="filters.config.component">
<component :is="filters.config.component" />
</Filters>
<slot></slot>
</div>
class="flex flex-col justify-between flex-1 px-4 overflow-y-auto bg-white md:mr-3 sm:px-3 md:px-6 rounded-t-2xl md:rounded-t-3xl no-scroll-bar"
>
<div v-if="route.path !== '/home'" class="mt-4 lg:mt-6 max-w-7xl">
<h1 class="text-xl font-semibold md:text-3xl text-dark">{{ pageTitle }}</h1>
</div>
<div class="flex-1 mt-2 sm:mt-4 dx-viewport">
<slot></slot>
</div>
</main>
</template>
<script setup lang="ts">
import { computed } from 'vue'
import { useRoute } from 'vue-router'
import { useFiltersStore } from '@/stores/filters';
import Filters from '../Form/Filters.vue'
// Dapatkan objek route dari vue-router
const route = useRoute()
// Dapatkan nama rute menggunakan computed property
const pageTitle = computed(() => route.name)
const filters = useFiltersStore()
</script>
</template>
<script setup lang="ts">
import { computed } from 'vue'
import { useRoute } from 'vue-router'
// Dapatkan objek route dari vue-router
const route = useRoute()
// Dapatkan nama rute menggunakan computed property
const pageTitle = computed(() => route.name)
</script>

119
src/components/Select.vue
View File

@ -1,7 +1,7 @@
<script setup lang="ts">
interface DataItem {
id: any;
name: string;
id: any
name: any
}
import { ref, computed, watch } from 'vue'
@ -29,25 +29,24 @@ const props = defineProps({
default: () => ({ id: 0, name: '' })
}
})
const emit = defineEmits(["update:selected"])
const emit = defineEmits(['update:selected'])
const data = computed(() => [{ id:0, name: props.placeholder }, ...props.data]);
const data = computed(() => [{ id: 0, name: props.placeholder }, ...props.data])
computed(() => {
if (props.selected.id === 0) {
selected.value = { id:0, name: props.placeholder }
}
console.log('selected', selected.value.name);
})
watch(() => props.selected, (value) => {
if (value.id === 0) {
selected.value = { id:0, name: props.placeholder }
selected.value = { id: 0, name: props.placeholder }
}
})
watch(
() => props.selected,
(value) => {
if (value.id === 0) {
selected.value = { id: 0, name: props.placeholder }
}
}
)
let selected = ref<DataItem>(data.value[0])
let query = ref('')
@ -55,56 +54,82 @@ let filteredData = computed(() =>
query.value === ''
? data.value
: data.value.filter((item: DataItem) =>
item.name
.toLowerCase()
.replace(/\s+/g, '')
.includes(query.value.toLowerCase().replace(/\s+/g, ''))
)
item.name
.toLowerCase()
.replace(/\s+/g, '')
.includes(query.value.toLowerCase().replace(/\s+/g, ''))
)
)
const show = ref(false)
</script>
<template>
<Combobox
@update:modelValue="value => emit('update:selected', value)"
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.name)" @change="query = $event.target.value"
@click="show = true" @blur="show = false" defaultValue="" />
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 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 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">
<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="{
'bg-teal-600 text-white': active,
'text-gray-900': !active
}">
<span class="block truncate" :class="{ 'font-medium': selected, 'font-normal': !selected }">
<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.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>