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

Update Select component and import statements

Browse Source
This commit is contained in:
probdg 2024-02-09 11:48:28 +07:00
parent ab0b910f7c
commit ca933980cd
6 changed files with 96 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,6 +1,8 @@
<script setup lang="ts">
import Select from '@/components/Select.vue'
import DatePicker from '@/components/DatePicker.vue'
import { selectedUid, selectedUp3Posko, selectedPosko ,fetchData,fetchMedia, items,itemsUp3, itemsPosko,itemsMedia} from './reference';
fetchMedia();
</script>
<template>
@ -27,7 +29,7 @@
<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">Media:</label>
<Select placeholder="Semua Media" />
<Select placeholder="Semua Media" :data="itemsMedia" />
</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, selectedUppp, selectedPosko ,fetchData, items,itemsUp3, itemsPosko} from './reference';
import { selectedUid, selectedUp3Posko, selectedPosko ,fetchData, items,itemsUp3, itemsPosko} from './reference';
fetchData();
const departments = [
@ -26,7 +26,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 Pelaksanaan Pelayanan Pelanggan:</label>
<Select @update:selected="selectedUppp($event)" :data="itemsUp3"
<Select @update:selected="selectedUp3Posko($event)" :data="itemsUp3"
placeholder="Semua Unit Pelaksanaan Pelayanan Pelanggan" />
</div>

4
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, selectedUppp, selectedPosko ,fetchData, items,itemsUp3, itemsPosko} from './reference';
import { selectedUid, selectedUp3Posko, selectedPosko ,fetchData, items,itemsUp3, itemsPosko} from './reference';
import { useTotalReport } from '@/stores/totalReport';
fetchData();
const changeMinReport = (value: any) => {
@ -25,7 +25,7 @@ import { useTotalReport } from '@/stores/totalReport';
>Unit Pelaksanaan Pelayanan Pelanggan:</label
>
<Select @update:selected="selectedUppp($event)" :data="itemsUp3" placeholder="Semua Unit Pelaksanaan Pelayanan Pelanggan" />
<Select @update:selected="selectedUp3Posko($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">

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

@ -1,5 +1,5 @@
import { getUid, getUp3, getPosko ,getUlp} from '@/utils/network';
import { getUid, getUp3, getPosko, getUlp } from '@/utils/network';
import { ref } from 'vue'
import { usePostsStore } from '@/stores/posts';
import { useUp3Store } from '@/stores/up3';
@ -7,49 +7,49 @@ import { useRegionStore } from '@/stores/region';
import { useUlpStore } from '@/stores/ulp';
interface Item {
id: number;
id: any;
name: any;
}
const months =[
{id:1, name: 'Januari'},
{id:2, name: 'Februari'},
{id:3, name: 'Maret'},
{id:4, name: 'April'},
{id:5, name: 'Mei'},
{id:6, name: 'Juni'},
{id:7, name: 'Juli'},
{id:8, name: 'Agustus'},
{id:9, name: 'September'},
{id:10, name: 'Oktober'},
{id:11, name: 'November'},
{id:12, name: 'Desember'},
const months = [
{ id: 1, name: 'Januari' },
{ id: 2, name: 'Februari' },
{ id: 3, name: 'Maret' },
{ id: 4, name: 'April' },
{ id: 5, name: 'Mei' },
{ id: 6, name: 'Juni' },
{ id: 7, name: 'Juli' },
{ id: 8, name: 'Agustus' },
{ id: 9, name: 'September' },
{ id: 10, name: 'Oktober' },
{ id: 11, name: 'November' },
{ id: 12, name: 'Desember' },
]
// create 4 year back array
const year = new Date().getFullYear();
const years =ref<Item[]>([]);
const years = ref<Item[]>([]);
for (let i = 0; i < 5; i++) {
years.value.push({id:year-i, name: year-i})
years.value.push({ id: year - i, name: year - i })
}
const timeout = ref()
const items = ref<Item[]>([]);
const itemsUp3 = ref<Item[]>([]);
const itemsPosko = ref<Item[]>([]);
const itemsUlp = 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);
}
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) => {
@ -73,8 +73,8 @@ const fetchDataUlp = async (up3: number) => {
const res = await getUlp(up3)
itemsUlp.value = res.data.map((item: any) => (
{
id: item.id,
name: item.nama,
id: item.name,
name: item.name,
}
));
} catch (error) {
@ -84,19 +84,55 @@ const fetchDataUlp = async (up3: number) => {
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.id,
name: item.nama,
}
));
} catch (error) {
console.error('Error fetching data:', error);
}
},300);
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"},
{ id: "Twitter", name: "Twitter" },
{ id: "PLN Mobile", name: "PLN Mobile" },
{ id: "Media Massa", name: "Media Massa" },
{ id: "Live Chat Website", name: "Live Chat Website" },
{ id: "Live Chat PLN Mobile", name: "Live Chat PLN Mobile" },
{ id: "Instagram", name: "Instagram" },
{ id: "Facebook", name: "Facebook" },
{ id: "Email", name: "Email" },
{ id: "EMS", name: "EMS" },
{ id: "Datang ke Kantor", name: "Datang ke Kantor" },
{ id: "Call ke Kantor Unit", name: "Call ke Kantor Unit" },
{ id: "Call PLN 123", name: "Call PLN 123" },
]
}
const fetchStatus = (data : any) => {
const status = [
{"id": "8", "name": "Selesai"},
{"id": "7", "name": "Nyala"},
{"id": "6", "name": "Pengalihan"},
{"id": "5", "name": "Dialihkan"},
{"id": "4", "name": "Dalam Pengerjaan"},
{"id": "3", "name": "Dalam Perjalanan"},
{"id": "2", "name": "Penugasan Regu"},
{"id": "1", "name": "lapor"}
]
return status.filter((item: any) => {
if (item.id == data) {
return item.name
}
});
}
const selectedUid = (value: any) => {
useRegionStore().setData(value.id);
fetchDataUp3(value.id);
@ -118,4 +154,4 @@ const selectedUlp = (value: any) => {
export { selectedUid, selectedUp3Posko ,selectedUp3Ulp, selectedPosko,selectedUlp, fetchData, items, itemsUp3, itemsPosko,itemsRegional,itemsMedia,itemsUlp ,months ,years};
export { selectedUid, selectedUp3Posko, selectedUp3Ulp, selectedPosko, selectedUlp, fetchData,fetchMedia,fetchStatus, items, itemsUp3, itemsPosko, itemsRegional, itemsMedia, itemsUlp, months, years };

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

@ -25,11 +25,11 @@
caption="Pembuat Laporan" cell-template="data" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="tanggal_laporan"
caption="Tgl Lapor" cell-template="data" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="tanggal_dialihkan"
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_dialihkan"
caption="Tgl Dialihkan" cell-template="data" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="tanggal_respon"
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_response"
caption="Tgl Response" cell-template="data" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="tanggal_recovery"
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_recovery"
caption="Tgl Recovery" cell-template="data" />
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_respon_time"
caption="Durasi Response Time" cell-template="data" />
@ -218,11 +218,11 @@ 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);
const shading = ref(true);
const showPane = ref(true);
const dialog = useDialogStore()
const data = ref<any[]>([])
const dataDetail = ref<any>()
const showDetail = ref(false)
@ -271,6 +271,9 @@ const GET_GANGGUAN_DATA_DI_ALIHAN_KE_POSKO_LAIN = gql`
alamat_pelapor
durasi_recovery_time
durasi_response_time
waktu_dialihkan
waktu_recovery
waktu_response
id_gangguan
idpel_nometer
keterangan_pelapor
@ -313,7 +316,7 @@ watch(detected, () => {
queryResult.data.daftarGangguanDialihkanKePoskoLain.forEach((item: any) => {
data.value = [...data.value, {
...item,
pembuat_laporan: '-'
status_akhir : fetchStatus(item.status_akhir)
}];
});
}

2
src/components/Select.vue
View File

@ -1,6 +1,6 @@
<script setup lang="ts">
interface DataItem {
id: number;
id: any;
name: string;
}