,
+ default: [
+ {
+ id: 1,
+ name: '45 Menit',
+ time: 45
+ },
+ {
+ id: 2,
+ name: '3 Jam',
+ time: 180
+ },
+ {
+ id: 3,
+ name: '1 Hari',
+ time: 1440
+ },
+ {
+ id: 4,
+ name: '3 Hari',
+ time: 4320
+ }
+ ]
+ }
})
-watch(data.value, (value) => {
+const data = ref({
+ uid: { id: 0, name: uidPlaceholder },
+ up3: { id: 0, name: up3Placeholder },
+ ulp: { id: 0, name: ulpPlaceholder },
+ status: props.statusType[0],
+ keyword: keyword.value,
+ searchBy: props.reportType[0].title,
+ sla: props.slaType[0],
+ periode: ''
+})
+const renderUp3 = ref(false)
+const renderUlp = ref(false)
+
+watch(data, (value) => {
emit('update:filters', value)
})
const setUid = (value: any) => {
- uid.value = value
selectedUid(value)
- up3.value = { id: 0, name: up3Placeholder }
- data.value.uid = value
+ data.value = {
+ ...data.value,
+ uid: value,
+ up3: {
+ id: 0,
+ name: up3Placeholder
+ },
+ ulp: { id: 0, name: ulpPlaceholder }
+ }
+
+ renderUp3.value = true
+ renderUlp.value = true
+ setTimeout(() => {
+ renderUp3.value = false
+ renderUlp.value = false
+ }, 200)
}
const setUp3 = (value: any) => {
- up3.value = value
selectedUp3Ulp(value)
- ulp.value = { id: 0, name: ulpPlaceholder }
- data.value.up3 = value
- console.log(itemsUlp)
+ data.value = {
+ ...data.value,
+ up3: value,
+ ulp: { id: 0, name: ulpPlaceholder }
+ }
+
+ renderUlp.value = true
+ setTimeout(() => {
+ renderUlp.value = false
+ }, 200)
}
const setUlp = (value: any) => {
- ulp.value = value
selectedUlp(value)
- data.value.ulp = value
+ data.value = {
+ ...data.value,
+ ulp: value
+ }
}
const setStatus = (value: any) => {
- status.value = value
- data.value.status = value
+ data.value = {
+ ...data.value,
+ status: value
+ }
}
const changeKeyword = (value: string) => {
- keyword.value = value
- data.value.keyword = value
+ data.value = {
+ ...data.value,
+ keyword: value
+ }
}
const changeReportTypeSelected = (id: any) => {
- searchBy.value = reportType.find((item) => item.id == id)?.title
- data.value.searchBy = searchBy.value
+ data.value = {
+ ...data.value,
+ searchBy: props.reportType.find((item) => item.id == id)?.title
+ }
}
const setSla = (value: any) => {
- sla.value = value
- data.value.sla = value
+ data.value = {
+ ...data.value,
+ sla: value
+ }
}
onMounted(() => {
@@ -142,15 +177,27 @@ onMounted(() => {
+
+
@@ -163,7 +210,6 @@ onMounted(() => {
@@ -171,12 +217,7 @@ onMounted(() => {
-
+
diff --git a/src/components/Form/FiltersType/Type18.vue b/src/components/Form/FiltersType/Type18.vue
index a7ba6e3..bcfcf26 100755
--- a/src/components/Form/FiltersType/Type18.vue
+++ b/src/components/Form/FiltersType/Type18.vue
@@ -17,9 +17,6 @@ import { onMounted, ref, watch } from 'vue'
const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah'
const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan'
const poskoPlaceholder = 'Semua Posko'
-const up3 = ref({ id: 0, name: up3Placeholder })
-const uid = ref({ id: 0, name: uidPlaceholder })
-const posko = ref({ id: 0, name: poskoPlaceholder })
const emit = defineEmits(['update:filters'])
const jenisTransakasi = [
{ id: 1, value: 'Koreksi Transaksi Individual', label: 'Koreksi Transaksi Individual' },
@@ -28,40 +25,64 @@ const jenisTransakasi = [
{ id: 4, value: 'Koreksi Kode Gangguan dan Anev', label: 'Koreksi Kode Gangguan dan Anev' }
]
const data = ref({
- uid: uid.value,
- up3: up3.value,
- posko: posko.value,
+ uid: { id: 0, name: uidPlaceholder },
+ up3: { id: 0, name: up3Placeholder },
+ posko: { id: 0, name: poskoPlaceholder },
periode: '',
jenisTransaksi: [],
group: 1
})
+const renderUp3 = ref(false)
+const renderPosko = ref(false)
-watch(data.value, (value) => {
+watch(data, (value) => {
emit('update:filters', value)
})
const setUid = (value: any) => {
- uid.value = value
selectedUid(value)
- up3.value = { id: 0, name: up3Placeholder }
- data.value.uid = value
+ data.value = {
+ ...data.value,
+ uid: value,
+ up3: { id: 0, name: up3Placeholder },
+ posko: { id: 0, name: poskoPlaceholder }
+ }
+
+ renderUp3.value = true
+ renderPosko.value = true
+ setTimeout(() => {
+ renderUp3.value = false
+ renderPosko.value = false
+ }, 200)
}
const setUp3 = (value: any) => {
- up3.value = value
selectedUp3Posko(value)
- posko.value = { id: 0, name: poskoPlaceholder }
- data.value.up3 = value
+ data.value = {
+ ...data.value,
+ up3: value,
+ posko: { id: 0, name: poskoPlaceholder }
+ }
+
+ renderPosko.value = true
+ setTimeout(() => {
+ renderPosko.value = false
+ }, 200)
}
const setPosko = (value: any) => {
- posko.value = value
selectedPosko(value)
- data.value.posko = value
+ data.value = {
+ ...data.value,
+ posko: value
+ }
}
const setTags = (value: any) => {
- data.value.jenisTransaksi = value
+ data.value = {
+ ...data.value,
+ jenisTransaksi: value
+ }
}
onMounted(() => {
@@ -86,9 +107,16 @@ onMounted(() => {
+
+
@@ -97,9 +125,16 @@ onMounted(() => {
+
+
diff --git a/src/components/Form/FiltersType/Type2.vue b/src/components/Form/FiltersType/Type2.vue
index 4f74bdb..01a37cf 100755
--- a/src/components/Form/FiltersType/Type2.vue
+++ b/src/components/Form/FiltersType/Type2.vue
@@ -12,9 +12,13 @@ import {
months,
years
} from './reference'
-import { onMounted, ref } from 'vue'
+import { onMounted, ref, watch } from 'vue'
import { getMonthName } from '@/utils/texts'
+const renderUid = ref(false)
+const renderUp3 = ref(false)
+const renderUlp = ref(false)
+
const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah'
const up3Placholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan'
const ulpPlaceholder = 'Semua Unit Layanan Pelanggan'
@@ -23,12 +27,8 @@ const bulanPlaceholder = getMonthName(new Date().getMonth() + 1)
const tahunPlaceholder = new Date().getFullYear().toString()
const bulanSelected = new Date().getMonth() + 1
const tahunSelected = new Date().getFullYear()
-const uppp = ref({ id: 0, name: up3Placholder })
-const uid = ref({ id: 0, name: uidPlaceholder })
-const ulp = ref({ id: 0, name: ulpPlaceholder })
const bulan = ref({ id: bulanSelected, name: bulanPlaceholder })
const tahun = ref({ id: tahunSelected, name: tahunPlaceholder })
-const regional = ref({ id: 0, name: regionalPlaceholder })
const emit = defineEmits(['update:filters'])
// Find index of January
const bulanIndex = months.findIndex((month) => month.id === bulan.value.id)
@@ -43,42 +43,79 @@ if (tahunIndex !== -1) {
}
const data = ref({
- regional: regional.value,
- uid: uid.value,
- up3: uppp.value,
- ulp: ulp.value,
+ regional: { id: 0, name: regionalPlaceholder },
+ uid: { id: 0, name: uidPlaceholder },
+ up3: { id: 0, name: up3Placholder },
+ ulp: { id: 0, name: ulpPlaceholder },
periode: '',
bulan: bulan.value,
tahun: tahun.value
})
+watch(data, (value) => {
+ emit('update:filters', value)
+})
+
const setRegional = (value: any) => {
- regional.value = value
+ console.log(value)
+
fetchUid()
- // harusnya fetchUidWithRegional(value);
selectedUid(value)
- uid.value = { id: 0, name: uidPlaceholder }
- data.value.regional = value
+ data.value = {
+ ...data.value,
+ regional: value,
+ uid: { id: 0, name: uidPlaceholder },
+ up3: { id: 0, name: up3Placholder },
+ ulp: { id: 0, name: ulpPlaceholder }
+ }
+
+ renderUid.value = true
+ renderUp3.value = true
+ renderUlp.value = true
+ setTimeout(() => {
+ renderUid.value = false
+ renderUp3.value = false
+ renderUlp.value = false
+ }, 200)
}
const setUid = (value: any) => {
- uid.value = value
selectedUid(value)
- uppp.value = { id: 0, name: up3Placholder }
- data.value.uid = value
+ data.value = {
+ ...data.value,
+ uid: value,
+ up3: { id: 0, name: up3Placholder },
+ ulp: { id: 0, name: ulpPlaceholder }
+ }
+
+ renderUp3.value = true
+ renderUlp.value = true
+ setTimeout(() => {
+ renderUp3.value = false
+ renderUlp.value = false
+ }, 200)
}
const setUp3 = (value: any) => {
- uppp.value = value
selectedUp3Ulp(value)
- ulp.value = { id: 0, name: ulpPlaceholder }
- data.value.up3 = value
+ data.value = {
+ ...data.value,
+ up3: value,
+ ulp: { id: 0, name: ulpPlaceholder }
+ }
+
+ renderUlp.value = true
+ setTimeout(() => {
+ renderUlp.value = false
+ }, 200)
}
const setUlp = (value: any) => {
- ulp.value = value
selectedUp3Ulp(value)
- data.value.ulp = value
+ data.value = {
+ ...data.value,
+ ulp: value
+ }
}
const setMonth = (value: any) => {
@@ -114,9 +151,16 @@ onMounted(() => {
+
+
@@ -125,8 +169,15 @@ onMounted(() => {
+
+
@@ -136,9 +187,16 @@ onMounted(() => {
+
+
diff --git a/src/components/Form/FiltersType/Type3.vue b/src/components/Form/FiltersType/Type3.vue
index 21e9f7f..6921aba 100755
--- a/src/components/Form/FiltersType/Type3.vue
+++ b/src/components/Form/FiltersType/Type3.vue
@@ -1,6 +1,6 @@
diff --git a/src/stores/filters.ts b/src/stores/filters.ts
index b2cbf9a..6a0a4df 100755
--- a/src/stores/filters.ts
+++ b/src/stores/filters.ts
@@ -18,7 +18,7 @@ import {
Type14,
Type15,
Type16,
- Type17,
+ Type17Gangguan,
Type18
} from '@/components/Form/FiltersType'
@@ -39,7 +39,7 @@ const test1: { [key: string]: any } = {
'type-14': Type14,
'type-15': Type15,
'type-16': Type16,
- 'type-17': Type17,
+ 'type-17': Type17Gangguan,
'type-18': Type18
}
@@ -54,7 +54,7 @@ export const useFiltersStore = defineStore('filters', () => {
component: getFilters('')
})
- const setConfig = ({ reportButton = false, type }: { reportButton?: boolean, type: string }) => {
+ const setConfig = ({ reportButton = false, type }: { reportButton?: boolean; type: string }) => {
config.value = {
reportButton,
type,
@@ -66,4 +66,4 @@ export const useFiltersStore = defineStore('filters', () => {
config,
setConfig
}
-})
\ No newline at end of file
+})