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

Merge branch 'dev-defuj' of github.com:defuj/eis into dev-bagus

Browse Source
This commit is contained in:
kur0nek-o 2024-04-23 16:10:31 +07:00
commit 0e2e586cda
26 changed files with 1426 additions and 481 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -1 +1 @@
{"name":"eis","version":"0.0.138-vm","private":true,"scripts":{"dev":"vite","host":"vite --host","tailwind":"tailwindcss -i ./src/assets/css/tailwind.css -o ./src/assets/css/style.css --watch","build":"run-p type-check build-only","preview":"vite preview --host","test:unit":"vitest","build-only":"vite build","type-check":"vue-tsc --noEmit -p tsconfig.vitest.json --composite false","lint":"eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore","format":"prettier --write src/","deploy":"node deploy.js"},"dependencies":{"@apollo/client":"^3.8.10","@apollo/link-context":"^2.0.0-beta.3","@flavorly/vanilla-components":"^0.7.65","@headlessui/tailwindcss":"^0.2.0","@headlessui/vue":"^1.7.19","@heroicons/vue":"^2.0.18","@lottiefiles/lottie-player":"^2.0.4","@phosphor-icons/vue":"^2.1.6","@types/qs":"^6.9.12","@types/uuid":"^9.0.8","@types/vue-select":"^3.16.8","@vue/apollo-components":"^4.0.0","@vue/apollo-composable":"^4.0.1","@vue/apollo-option":"^4.0.0","axios":"^1.6.7","devextreme":"23.2.4","devextreme-vue":"23.2.4","docx":"^8.5.0","dotenv":"^16.3.1","encrypt-storage":"^2.12.22","exceljs":"^4.4.0","file-saver":"^2.0.5","graphql":"^16.8.1","graphql-tag":"^2.12.6","jspdf":"^2.5.1","jspdf-autotable":"^3.8.2","pinia":"^2.1.3","qs":"^6.11.2","uuid":"^9.0.1","vue":"^3.3.4","vue-html-to-paper":"^2.0.3","vue-router":"^4.2.2","vue-tailwind-datepicker":"^1.6.1","vue3-star-ratings":"^3.0.5"},"devDependencies":{"@rushstack/eslint-patch":"^1.5.1","@tailwindcss/aspect-ratio":"^0.4.2","@tailwindcss/container-queries":"^0.1.1","@tailwindcss/forms":"^0.5.7","@tailwindcss/typography":"^0.5.10","@tsconfig/node18":"^2.0.1","@types/file-saver":"^2.0.6","@types/jsdom":"^21.1.1","@types/node":"^18.16.17","@vitejs/plugin-vue":"^4.2.3","@vitejs/plugin-vue-jsx":"^3.0.1","@vue/eslint-config-prettier":"^8.0.0","@vue/eslint-config-typescript":"^12.0.0","@vue/test-utils":"^2.3.2","@vue/tsconfig":"^0.4.0","autoprefixer":"^10.4.14","eslint":"^8.39.0","eslint-plugin-vue":"^9.11.0","jsdom":"^22.1.0","npm-run-all":"^4.1.5","postcss":"^8.4.24","prettier":"^3.0.3","tailwindcss":"^3.3.2","typescript":"~5.2.2","vite":"^4.3.9","vitest":"^1.3.1","vue-tsc":"^2.0.5"}}
{"name":"eis","version":"0.0.144-vm","private":true,"scripts":{"dev":"vite","host":"vite --host","tailwind":"tailwindcss -i ./src/assets/css/tailwind.css -o ./src/assets/css/style.css --watch","build":"run-p type-check build-only","preview":"vite preview --host","test:unit":"vitest","build-only":"vite build","type-check":"vue-tsc --noEmit -p tsconfig.vitest.json --composite false","lint":"eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore","format":"prettier --write src/","deploy":"node deploy.js"},"dependencies":{"@apollo/client":"^3.8.10","@apollo/link-context":"^2.0.0-beta.3","@flavorly/vanilla-components":"^0.7.65","@headlessui/tailwindcss":"^0.2.0","@headlessui/vue":"^1.7.19","@heroicons/vue":"^2.0.18","@lottiefiles/lottie-player":"^2.0.4","@phosphor-icons/vue":"^2.1.6","@types/qs":"^6.9.12","@types/uuid":"^9.0.8","@types/vue-select":"^3.16.8","@vue/apollo-components":"^4.0.0","@vue/apollo-composable":"^4.0.1","@vue/apollo-option":"^4.0.0","axios":"^1.6.7","devextreme":"23.2.4","devextreme-vue":"23.2.4","docx":"^8.5.0","dotenv":"^16.3.1","encrypt-storage":"^2.12.22","exceljs":"^4.4.0","file-saver":"^2.0.5","graphql":"^16.8.1","graphql-tag":"^2.12.6","jspdf":"^2.5.1","jspdf-autotable":"^3.8.2","pinia":"^2.1.3","qs":"^6.11.2","uuid":"^9.0.1","vue":"^3.3.4","vue-html-to-paper":"^2.0.3","vue-router":"^4.2.2","vue-tailwind-datepicker":"^1.6.1","vue3-star-ratings":"^3.0.5"},"devDependencies":{"@rushstack/eslint-patch":"^1.5.1","@tailwindcss/aspect-ratio":"^0.4.2","@tailwindcss/container-queries":"^0.1.1","@tailwindcss/forms":"^0.5.7","@tailwindcss/typography":"^0.5.10","@tsconfig/node18":"^2.0.1","@types/file-saver":"^2.0.6","@types/jsdom":"^21.1.1","@types/node":"^18.16.17","@vitejs/plugin-vue":"^4.2.3","@vitejs/plugin-vue-jsx":"^3.0.1","@vue/eslint-config-prettier":"^8.0.0","@vue/eslint-config-typescript":"^12.0.0","@vue/test-utils":"^2.3.2","@vue/tsconfig":"^0.4.0","autoprefixer":"^10.4.14","eslint":"^8.39.0","eslint-plugin-vue":"^9.11.0","jsdom":"^22.1.0","npm-run-all":"^4.1.5","postcss":"^8.4.24","prettier":"^3.0.3","tailwindcss":"^3.3.2","typescript":"~5.2.2","vite":"^4.3.9","vitest":"^1.3.1","vue-tsc":"^2.0.5"}}

2
public/version.json
View File

@ -1 +1 @@
{"version":"0.0.138-vm"}
{"version":"0.0.144-vm"}

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

@ -38,40 +38,59 @@ const props = defineProps({
}
})
const up3 = ref(props.up3)
const uid = ref(props.uid)
const posko = ref(props.posko)
const renderUp3 = ref(false)
const renderPosko = ref(false)
const emit = defineEmits(['update:filters'])
const data = ref({
uid: uid.value,
up3: up3.value,
posko: posko.value,
uid: props.uid,
up3: props.up3,
posko: props.posko,
periode: props.periode
})
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 = {
...data.value,
uid: value,
up3: { id: 0, name: up3placeholder },
posko: { id: 0, name: poskoPlaceholder }
}
data.value.uid = value
renderUp3.value = true
renderPosko.value = true
setTimeout(() => {
renderUp3.value = false
renderPosko.value = false
}, 100)
}
const setUp3 = (value: any) => {
up3.value = value
selectedUp3Posko(value)
console.log(itemsPosko)
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
}, 100)
}
const setPosko = (value: any) => {
posko.value = value
selectedPosko(value)
data.value.posko = value
data.value = {
...data.value,
posko: value
}
}
onMounted(() => {
@ -92,6 +111,15 @@ onMounted(() => {
<label class="filter-input-label">Unit Pelaksanaan Pelayanan Pelanggan:</label>
<Select
v-if="renderUp3"
@update:selected="setUp3($event)"
:data="itemsUp3"
:selected="up3"
:placeholder="up3placeholder"
/>
<Select
v-else
@update:selected="setUp3($event)"
:data="itemsUp3"
:selected="up3"
@ -103,6 +131,15 @@ onMounted(() => {
<label class="filter-input-label">Posko:</label>
<Select
v-if="renderPosko"
@update:selected="setPosko($event)"
:data="itemsPosko"
:selected="posko"
:placeholder="poskoPlaceholder"
/>
<Select
v-else
@update:selected="setPosko($event)"
:data="itemsPosko"
:selected="posko"

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

@ -1,5 +1,5 @@
<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { onMounted, ref, watch } from 'vue'
import {
selectedUid,
selectedUp3Ulp,
@ -16,37 +16,59 @@ import InputNumber from '@/components/Form/InputNumber.vue'
const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah'
const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan'
const ulpPlaceholder = 'Semua Unit Layanan Pelanggan'
const up3 = ref({ id: 0, name: up3Placeholder })
const uid = ref({ id: 0, name: uidPlaceholder })
const ulp = ref({ id: 0, name: ulpPlaceholder })
const emit = defineEmits(['update:filters'])
const data = ref({
uid: uid.value,
up3: up3.value,
ulp: ulp.value,
uid: { id: 0, name: uidPlaceholder },
up3: { id: 0, name: up3Placeholder },
ulp: { id: 0, name: ulpPlaceholder },
periode: '',
minJmlLapor: 1,
maxJmlLapor: 1
})
watch(data, (value) => {
emit('update:filters', value)
})
const renderUp3 = ref(false)
const renderUlp = ref(false)
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
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
}
}
onMounted(() => {
emit('update:filters', data.value)
@ -65,13 +87,37 @@ onMounted(() => {
<div class="flex flex-col flex-1 space-y-2">
<label class="filter-input-label">Unit Pelaksanaan Pelayanan Pelanggan:</label>
<Select @update:selected="setUp3($event)" :data="itemsUp3" :selected="up3" :placeholder="up3Placeholder" />
<Select
v-if="renderUp3"
@update:selected="setUp3($event)"
:data="itemsUp3"
:placeholder="up3Placeholder"
/>
<Select
v-else
@update:selected="setUp3($event)"
:data="itemsUp3"
:placeholder="up3Placeholder"
/>
</div>
<div class="flex flex-col flex-1 space-y-2">
<label class="filter-input-label">Unit Layanan Pelanggan:</label>
<Select @update:selected="setUlp($event)" :data="itemsUlp" :selected="ulp" :placeholder="ulpPlaceholder" />
<Select
v-if="renderUlp"
@update:selected="setUlp($event)"
:data="itemsUlp"
:placeholder="ulpPlaceholder"
/>
<Select
v-else
@update:selected="setUlp($event)"
:data="itemsUlp"
:placeholder="ulpPlaceholder"
/>
</div>
<div class="flex flex-col flex-1 space-y-2">
@ -84,11 +130,16 @@ onMounted(() => {
<label class="filter-input-label">Lapor Ulang:</label>
<div class="flex flex-1 justify-between gap-x-1.5">
<InputNumber @update:time-value="(value) => (data.minJmlLapor = value)" class="flex flex-1" />
<InputNumber
@update:time-value="(value) => (data.minJmlLapor = value)"
class="flex flex-1"
/>
<small class="flex items-center">s/d</small>
<InputNumber @update:time-value="(value) => (data.maxJmlLapor = value)" class="flex flex-1" />
<InputNumber
@update:time-value="(value) => (data.maxJmlLapor = value)"
class="flex flex-1"
/>
</div>
</div>
</div>
</template>

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

@ -6,7 +6,7 @@ interface SlaOption {
max: string
}
import { onMounted, ref } from 'vue'
import { onMounted, ref, watch } from 'vue'
import {
selectedUid,
selectedUp3Ulp,
@ -52,9 +52,6 @@ const totalMax = ref('5 Menit')
const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah'
const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan'
const ulpPlaceholder = 'Semua Unit Layanan Pelanggan'
const up3 = ref({ id: 0, name: up3Placeholder })
const uid = ref({ id: 0, name: uidPlaceholder })
const ulp = ref({ id: 0, name: ulpPlaceholder })
const emit = defineEmits(['update:filters'])
const isHidden = ref(false)
@ -64,32 +61,57 @@ const setDataMax = (value: any) => (totalMax.value = value)
const getDataMax = () => totalMax.value
const data = ref({
uid: uid.value,
up3: up3.value,
ulp: ulp.value,
uid: { id: 0, name: uidPlaceholder },
up3: { id: 0, name: up3Placeholder },
ulp: { id: 0, name: ulpPlaceholder },
periode: '',
minTime: getDataMin().split(' ')[0],
maxTime: getDataMax().split(' ')[0]
})
watch(data, (value) => {
emit('update:filters', value)
})
const renderUp3 = ref(false)
const renderUlp = ref(false)
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
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 setMin = (value: any) => {
@ -143,9 +165,16 @@ onMounted(() => {
<label class="filter-input-label">Unit Pelaksanaan Pelayanan Pelanggan:</label>
<Select
v-if="renderUp3"
@update:selected="setUp3($event)"
:data="itemsUp3"
:placeholder="up3Placeholder"
/>
<Select
v-else
@update:selected="setUp3($event)"
:data="itemsUp3"
:selected="up3"
:placeholder="up3Placeholder"
/>
</div>
@ -154,10 +183,17 @@ onMounted(() => {
<label class="filter-input-label">Unit Layanan Pelanggan:</label>
<Select
v-if="renderUlp"
@update:selected="setUlp($event)"
:data="itemsUlp"
:placeholder="ulpPlaceholder"
/>
<Select
v-else
@update:selected="setUlp($event)"
:data="itemsUlp"
:placeholder="ulpPlaceholder"
:selected="ulp"
/>
</div>

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

@ -1,43 +1,74 @@
<script setup lang="ts">
import Select from '@/components/Select.vue';
import DatePicker from '@/components/DatePicker.vue';
import InputWithSuffix from '../InputWithSuffix.vue';
import { selectedUid, selectedUp3Ulp, selectedUlp, fetchUid, itemsUid, itemsUp3, itemsUlp } from './reference';
import { onMounted, ref } from 'vue';
const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah';
const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan';
const ulpPlaceholder = 'Semua Unit Layanan Pelanggan';
const uppp = ref({ id: 0, name: up3Placeholder });
const uid = ref({ id: 0, name: uidPlaceholder });
const ulp = ref({ id: 0, name: ulpPlaceholder });
import Select from '@/components/Select.vue'
import DatePicker from '@/components/DatePicker.vue'
import InputWithSuffix from '../InputWithSuffix.vue'
import {
selectedUid,
selectedUp3Ulp,
selectedUlp,
fetchUid,
itemsUid,
itemsUp3,
itemsUlp
} from './reference'
import { onMounted, ref, watch } from 'vue'
const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah'
const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan'
const ulpPlaceholder = 'Semua Unit Layanan Pelanggan'
const emit = defineEmits(['update:filters'])
const data = ref({
uid: uid.value,
up3: uppp.value,
ulp: ulp.value,
uid: { id: 0, name: uidPlaceholder },
up3: { id: 0, name: up3Placeholder },
ulp: { id: 0, name: ulpPlaceholder },
periode: '',
minDurasiResponseTime: 1,
maxDurasiResponseTime: 1
})
watch(data, (value) => {
emit('update:filters', value)
})
const renderUp3 = ref(false)
const renderUlp = ref(false)
const setUid = (value: any) => {
uid.value = value;
selectedUid(value);
uppp.value = { id: 0, name: up3Placeholder };
data.value.uid = value;
};
selectedUid(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) => {
uppp.value = value;
selectedUp3Ulp(value);
ulp.value = { id: 0, name: ulpPlaceholder };
data.value.up3 = value;
};
selectedUp3Ulp(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;
selectedUlp(value);
data.value.ulp = value;
};
selectedUlp(value)
data.value = {
...data.value,
ulp: value
}
}
const triggerInput = ref(false)
const sla = [
{
@ -52,7 +83,7 @@ const sla = [
id: 2,
name: 'Melebihi SLA (> 45 menit)'
}
];
]
const changeDuration = (value: any) => {
if (value.id === 0) {
console.log('Durasi Menit')
@ -70,7 +101,6 @@ const changeDuration = (value: any) => {
triggerInput.value = true
console.log('Melebihi SLA (> 45 menit)')
}
}
onMounted(() => {
emit('update:filters', data.value)
@ -89,19 +119,41 @@ onMounted(() => {
<div class="flex flex-col flex-1 space-y-2">
<label class="filter-input-label">Unit Pelaksanaan Pelayanan Pelanggan:</label>
<Select @update:selected="setUp3($event)" :data="itemsUp3" :placeholder="up3Placeholder" />
<Select
v-if="renderUp3"
@update:selected="setUp3($event)"
:data="itemsUp3"
:placeholder="up3Placeholder"
/>
<Select
v-else
@update:selected="setUp3($event)"
:data="itemsUp3"
:placeholder="up3Placeholder"
/>
</div>
<div class="flex flex-col flex-1 space-y-2">
<label class="filter-input-label">Unit Layanan Pelanggan:</label>
<Select @update:selected="setUlp($event)" :data="itemsUlp" :placeholder="ulpPlaceholder" />
<Select
v-if="renderUlp"
@update:selected="setUlp($event)"
:data="itemsUlp"
:placeholder="ulpPlaceholder"
/>
<Select
v-else
@update:selected="setUlp($event)"
:data="itemsUlp"
:placeholder="ulpPlaceholder"
/>
</div>
<div class="flex flex-col flex-1 space-y-2">
<label class="filter-input-label">Periode Tanggal:</label>
<DatePicker @update:date-value="(value) => data.periode = value" />
<DatePicker @update:date-value="(value) => (data.periode = value)" />
</div>
<div class="flex flex-col flex-1 space-y-2">
@ -111,14 +163,21 @@ onMounted(() => {
<Select @update:selected="changeDuration($event)" :data="sla" placeholder="Durasi Menit" />
<div class="flex flex-1 justify-between gap-x-1.5">
<InputWithSuffix @update:minute-value="(value: any) => data.minDurasiResponseTime = value" @value="data.minDurasiResponseTime" :disabled=triggerInput
class="flex flex-1" />
<InputWithSuffix
@update:minute-value="(value: any) => (data.minDurasiResponseTime = value)"
@value="data.minDurasiResponseTime"
:disabled="triggerInput"
class="flex flex-1"
/>
<small class="flex items-center">s/d</small>
<InputWithSuffix @update:minute-value="(value: any) => data.maxDurasiResponseTime = value" @value="data.maxDurasiResponseTime"
:disabled="triggerInput" class="flex flex-1" />
<InputWithSuffix
@update:minute-value="(value: any) => (data.maxDurasiResponseTime = value)"
@value="data.maxDurasiResponseTime"
:disabled="triggerInput"
class="flex flex-1"
/>
</div>
</div>
</div>
</div>
</template>

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

@ -11,41 +11,63 @@ import {
itemsUp3,
itemsUlp
} from './reference'
import { onMounted, ref } from 'vue'
import { onMounted, ref, watch } from 'vue'
const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah'
const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan'
const ulpPlaceholder = 'Semua Unit Layanan Pelanggan'
const up3 = ref({ id: 0, name: up3Placeholder })
const uid = ref({ id: 0, name: uidPlaceholder })
const ulp = ref({ id: 0, name: ulpPlaceholder })
const emit = defineEmits(['update:filters'])
const data = ref({
uid: uid.value,
up3: up3.value,
ulp: ulp.value,
uid: { id: 0, name: uidPlaceholder },
up3: { id: 0, name: up3Placeholder },
ulp: { id: 0, name: ulpPlaceholder },
periode: '',
groupBy: false
})
watch(data, (value) => {
emit('update:filters', value)
})
const renderUp3 = ref(false)
const renderUlp = ref(false)
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
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
}
console.log('data.value', data.value)
}
@ -68,9 +90,16 @@ onMounted(() => {
<label class="filter-input-label">Unit Pelaksanaan Pelayanan Pelanggan:</label>
<Select
v-if="renderUp3"
@update:selected="setUp3($event)"
:data="itemsUp3"
:placeholder="up3Placeholder"
/>
<Select
v-else
@update:selected="setUp3($event)"
:data="itemsUp3"
:selected="up3"
:placeholder="up3Placeholder"
/>
</div>
@ -78,9 +107,16 @@ onMounted(() => {
<div class="flex flex-col flex-1 space-y-2">
<label class="filter-input-label">Unit Layanan Pelanggan:</label>
<Select
v-if="renderUlp"
@update:selected="setUlp($event)"
:data="itemsUlp"
:placeholder="ulpPlaceholder"
/>
<Select
v-else
@update:selected="setUlp($event)"
:data="itemsUlp"
:selected="ulp"
:placeholder="ulpPlaceholder"
/>
</div>
@ -90,12 +126,12 @@ onMounted(() => {
<DatePicker @update:date-value="(value) => (data.periode = value)" />
</div>
<div class="flex flex-col flex-1 space-y-2" v-if="ulp.id == 0">
<div class="flex flex-col flex-1 space-y-2" v-if="data.ulp.id == 0">
<label class="filter-input-label"
>Group By
{{
uid.id != 0
? up3.id != 0
data.uid.id != 0
? data.up3.id != 0
? 'Unit Layanan Pelanggan/Posko'
: 'Unit Pelaksanaan Pelayanan Pelanggan'
: 'Kode Unit Distribusi'

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

@ -1,72 +1,119 @@
<script setup lang="ts">
import Select from '@/components/Select.vue';
import DatePicker from '@/components/DatePicker.vue';
import { selectedUid, selectedUp3Posko, selectedPosko, fetchUid, itemsUid, itemsUp3, itemsPosko } from './reference';
import { onMounted, ref } from 'vue';
const uidPlaceholder = 'Semua Distribusi/Wilayah';
const up3Placeholder = 'Semua Area';
const poskoPlaceholder = 'Semua Unit Layanan Pelanggan';
const up3 = ref({ id: 0, name: up3Placeholder });
const uid = ref({ id: 0, name: uidPlaceholder });
const posko = ref({ id: 0, name: poskoPlaceholder });
import Select from '@/components/Select.vue'
import DatePicker from '@/components/DatePicker.vue'
import {
selectedUid,
selectedUp3Posko,
selectedPosko,
fetchUid,
itemsUid,
itemsUp3,
itemsPosko
} from './reference'
import { onMounted, ref, watch } from 'vue'
const uidPlaceholder = 'Semua Distribusi/Wilayah'
const up3Placeholder = 'Semua Area'
const poskoPlaceholder = 'Semua Unit Layanan Pelanggan'
const emit = defineEmits(['update:filters'])
const data = ref({
uid: uid.value,
up3: up3.value,
posko: posko.value,
periode: '',
uid: { id: 0, name: up3Placeholder },
up3: { id: 0, name: up3Placeholder },
posko: { id: 0, name: poskoPlaceholder },
periode: ''
})
watch(data, (value) => {
emit('update:filters', value)
})
const renderUp3 = ref(false)
const renderPosko = ref(false)
const setUid = (value: any) => {
uid.value = value;
selectedUid(value);
up3.value = { id: 0, name: up3Placeholder };
data.value.uid = value;
};
selectedUid(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;
};
selectedUp3Posko(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;
};
selectedPosko(value)
data.value = {
...data.value,
posko: value
}
}
onMounted(() => {
emit('update:filters', data.value)
fetchUid()
})
</script>
<template>
<div class="grid grid-cols-1 gap-4 md:grid-cols-2">
<div class="flex flex-col flex-1 space-y-2">
<label class="filter-input-label">Distribusi/Wilayah:</label>
<Select :data="itemsUid" @update:selected="setUid($event)" :placeholder="uidPlaceholder" :selected="uid" />
<Select :data="itemsUid" @update:selected="setUid($event)" :placeholder="uidPlaceholder" />
</div>
<div class="flex flex-col flex-1 space-y-2">
<label class="filter-input-label">Area:</label>
<Select @update:selected="setUp3($event)" :data="itemsUp3" :selected="up3" :placeholder="up3Placeholder" />
<Select
v-if="renderUp3"
@update:selected="setUp3($event)"
:data="itemsUp3"
:placeholder="up3Placeholder"
/>
<Select
v-else
@update:selected="setUp3($event)"
:data="itemsUp3"
:placeholder="up3Placeholder"
/>
</div>
<div class="flex flex-col flex-1 space-y-2">
<label class="filter-input-label">Posko:</label>
<Select @update:selected="setPosko($event)" :data="itemsPosko" :selected="posko"
:placeholder="poskoPlaceholder" />
<Select
v-if="renderPosko"
@update:selected="setPosko($event)"
:data="itemsPosko"
:placeholder="poskoPlaceholder"
/>
<Select
v-else
@update:selected="setPosko($event)"
:data="itemsPosko"
:placeholder="poskoPlaceholder"
/>
</div>
<div class="flex flex-col flex-1 space-y-2">
<label class="filter-input-label">Periode Tanggal:</label>
<DatePicker @update:date-value="(value) => data.periode = value" />
<DatePicker @update:date-value="(value) => (data.periode = value)" />
</div>
</div>
</template>

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

@ -1,6 +1,6 @@
<script setup lang="ts">
import Select from '@/components/Select.vue';
import DatePicker from '@/components/DatePicker.vue';
import Select from '@/components/Select.vue'
import DatePicker from '@/components/DatePicker.vue'
import {
selectedUid,
selectedUp3Posko,
@ -11,53 +11,75 @@ import {
itemsUp3,
itemsPosko,
itemsMedia
} from './reference';
import { onMounted, ref, watch } from 'vue';
} from './reference'
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 mediaPlaceholder = 'Semua Media'
const up3 = ref({ id: 0, name: up3Placeholder })
const uid = ref({ id: 0, name: uidPlaceholder })
const posko = ref({ id: 0, name: poskoPlaceholder })
const media = ref({ id: '', name: mediaPlaceholder })
const emit = defineEmits(['update:filters'])
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 },
media: media.value,
periode: ''
})
watch(data.value, (value) => {
watch(data, (value) => {
emit('update:filters', value)
})
const renderUp3 = ref(false)
const renderPosko = ref(false)
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 setMedia = (value: any) => {
media.value = value
data.value.media = value
data.value = {
...data.value,
media: value
}
}
onMounted(() => {
@ -72,27 +94,54 @@ onMounted(() => {
<div class="flex flex-col flex-1 space-y-2">
<label class="filter-input-label">Unit Induk Distribusi/Wilayah:</label>
<Select :data="itemsUid" @update:selected="setUid($event)" :placeholder="uidPlaceholder" :selected="uid" />
<Select :data="itemsUid" @update:selected="setUid($event)" :placeholder="uidPlaceholder" />
</div>
<div class="flex flex-col flex-1 space-y-2">
<label class="filter-input-label">Unit Pelaksanaan Pelayanan Pelanggan:</label>
<Select :data="itemsUp3" @update:selected="setUp3($event)" :placeholder="up3Placeholder" :selected="up3" />
<Select
v-if="renderUp3"
:data="itemsUp3"
@update:selected="setUp3($event)"
:placeholder="up3Placeholder"
/>
<Select
v-else
:data="itemsUp3"
@update:selected="setUp3($event)"
:placeholder="up3Placeholder"
/>
</div>
<div class="flex flex-col flex-1 space-y-2">
<label class="filter-input-label">Posko:</label>
<Select :data="itemsPosko" @update:selected="setPosko($event)" :placeholder="poskoPlaceholder"
:selected="posko" />
<Select
v-if="renderPosko"
:data="itemsPosko"
@update:selected="setPosko($event)"
:placeholder="poskoPlaceholder"
/>
<Select
v-else
:data="itemsPosko"
@update:selected="setPosko($event)"
:placeholder="poskoPlaceholder"
/>
</div>
<div class="flex flex-col flex-1 space-y-2">
<label class="filter-input-label">Media:</label>
<Select :selected="media" @update:selected="setMedia($event)" :placeholder="mediaPlaceholder"
:data="itemsMedia" />
<Select
:selected="media"
@update:selected="setMedia($event)"
:placeholder="mediaPlaceholder"
:data="itemsMedia"
/>
</div>
<div class="flex flex-col flex-1 space-y-2">
@ -101,5 +150,4 @@ onMounted(() => {
<DatePicker @update:date-value="(value) => (data.periode = value)" />
</div>
</div>
</template>

229
src/components/Form/FiltersType/Type17Gangguan.vue Executable file
View File

@ -0,0 +1,229 @@
<script setup lang="ts">
import Select from '@/components/Select.vue'
import DatePicker from '@/components/DatePicker.vue'
import InputWithFilter from '../InputWithFilter.vue'
import {
selectedUid,
fetchUid,
itemsUid,
itemsUp3,
itemsPosko,
selectedPosko,
selectedUp3Posko
} from './reference'
import { onMounted, ref, watch, type PropType } from 'vue'
const uidPlaceholder = 'Pilih Unit'
const up3Placeholder = 'Pilih Area'
const poskoPlaceholder = 'Pilih Posko'
const statusPlaceholder = 'Pilih Status'
const slaPlaceholder = 'Pilih Durasi SLA'
const keyword = ref('')
const emit = defineEmits(['update:filters'])
const props = defineProps({
reportType: {
type: Array as PropType<any[]>,
default: [
{ id: 1, title: 'No Lapor' },
{ id: 2, title: 'Nama Pelapor' },
{ id: 3, title: 'Deskripsi' }
]
},
statusType: {
type: Array as PropType<any[]>,
default: [
{ id: 0, name: '' },
{ id: 1, name: 'Lapor' },
{ id: 2, name: 'Penugasan Regu' },
{ id: 3, name: 'Dalam Perjalanan' },
{ id: 4, name: 'Dalam Pengerjaan' },
{ id: 5, name: 'Konfirmasi' }
]
},
slaType: {
type: Array as PropType<any[]>,
default: [
{
id: 1,
name: '45 Menit',
time: 45
},
{
id: 2,
name: '3 Jam',
time: 180
},
{
id: 3,
name: '1 Hari',
time: 1440
}
]
}
})
const data = ref({
uid: { id: 0, name: uidPlaceholder },
up3: { id: 0, name: up3Placeholder },
posko: { id: 0, name: poskoPlaceholder },
status: props.statusType[0],
keyword: keyword.value,
searchBy: props.reportType[0]?.title,
sla: props.slaType[0],
periode: ''
})
const renderUp3 = ref(false)
const renderPosko = ref(false)
watch(data, (value) => {
emit('update:filters', value)
})
const setUid = (value: any) => {
selectedUid(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) => {
selectedUp3Posko(value)
data.value = {
...data.value,
up3: value,
posko: { id: 0, name: poskoPlaceholder }
}
renderPosko.value = true
setTimeout(() => {
renderPosko.value = false
}, 200)
}
const setPosko = (value: any) => {
selectedPosko(value)
data.value = {
...data.value,
posko: value
}
}
const setStatus = (value: any) => {
data.value = {
...data.value,
status: value
}
}
const changeKeyword = (value: string) => {
data.value = {
...data.value,
keyword: value
}
}
const changeReportTypeSelected = (id: any) => {
data.value = {
...data.value,
searchBy: props.reportType.find((item) => item.id === id)?.name
}
}
const setSla = (value: any) => {
data.value = {
...data.value,
sla: value
}
}
onMounted(() => {
fetchUid()
emit('update:filters', data.value)
})
</script>
<template>
<div class="grid grid-cols-1 gap-4 md:grid-cols-2">
<div class="flex flex-col flex-1 space-y-2">
<label class="filter-input-label">Periode Tanggal:</label>
<DatePicker @update:date-value="(value) => (data.periode = value)" />
</div>
<div class="flex flex-col flex-1 space-y-2">
<label class="filter-input-label">Unit PLN:</label>
<div class="flex flex-col gap-y-1">
<Select @update:selected="setUid($event)" :data="itemsUid" :placeholder="uidPlaceholder" />
<div class="grid grid-flow-col auto-cols-auto gap-x-1.5">
<Select
v-if="renderUp3"
@update:selected="setUp3($event)"
:data="itemsUp3"
:placeholder="up3Placeholder"
/>
<Select
v-else
@update:selected="setUp3($event)"
:data="itemsUp3"
:placeholder="up3Placeholder"
/>
<Select
v-if="renderPosko"
@update:selected="setPosko($event)"
:data="itemsPosko"
:placeholder="poskoPlaceholder"
/>
<Select
v-else
@update:selected="setPosko($event)"
:data="itemsPosko"
:placeholder="poskoPlaceholder"
/>
</div>
</div>
</div>
<div class="flex flex-col flex-1 space-y-2">
<label class="filter-input-label">Status:</label>
<Select
@update:selected="setStatus($event)"
:data="statusType"
:placeholder="statusPlaceholder"
/>
</div>
<div class="flex flex-col flex-1 space-y-2">
<label class="filter-input-label">SLA:</label>
<Select @update:selected="setSla($event)" :data="slaType" :placeholder="slaPlaceholder" />
</div>
<div class="flex flex-col flex-1 space-y-2">
<label class="filter-input-label">Pencarian:</label>
<InputWithFilter
placeholder="Cari"
:filters="reportType"
@update:keyword="changeKeyword"
@update:filters="changeReportTypeSelected"
/>
</div>
</div>
</template>

143
src/components/Form/FiltersType/Type17.vue → src/components/Form/FiltersType/Type17Keluhan.vue
View File

@ -11,35 +11,39 @@ import {
itemsUp3,
itemsUlp
} from './reference'
import { onMounted, ref, watch } from 'vue'
import { onMounted, ref, watch, type PropType } from 'vue'
const uidPlaceholder = 'Pilih Unit'
const up3Placeholder = 'Pilih Area'
const ulpPlaceholder = 'Pilih Rayon'
const statusPlaceholder = 'Pilih Status'
const slaPlaceholder = 'Pilih Durasi SLA'
const up3 = ref({ id: 0, name: up3Placeholder })
const uid = ref({ id: 0, name: uidPlaceholder })
const ulp = ref({ id: 0, name: ulpPlaceholder })
const keyword = ref('')
const reportType = [
const emit = defineEmits(['update:filters'])
const props = defineProps({
reportType: {
type: Array as PropType<any[]>,
default: [
{ id: 1, title: 'No Lapor' },
{ id: 2, title: 'Nama Pelapor' },
{ id: 3, title: 'Permasalahan' }
]
const searchBy = ref<any>(reportType[0].title)
const statusType = [
},
statusType: {
type: Array as PropType<any[]>,
default: [
{ id: 0, name: '' },
{ id: 1, name: 'Menunggu Tanggapan Supervisor CC' },
{ id: 2, name: 'Dalam Proses Manager Unit' },
{ id: 3, name: 'Dalam Proses Bidang Unit' },
{ id: 4, name: 'Selesai Dijawab Bidang Unit' },
{ id: 5, name: 'Konfirmasi' }
]
const status = ref(statusType[0])
const slaType = [
},
slaType: {
type: Array as PropType<any[]>,
default: [
{
id: 1,
name: '45 Menit',
@ -61,63 +65,94 @@ const slaType = [
time: 4320
}
]
const sla = ref(slaType[0])
const emit = defineEmits(['update:filters'])
const data = ref({
uid: uid.value,
up3: up3.value,
ulp: ulp.value,
status: status.value,
keyword: keyword.value,
searchBy: searchBy.value,
sla: sla.value,
periode: ''
}
})
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(() => {
<div class="grid grid-flow-col auto-cols-auto gap-x-1.5">
<Select
v-if="renderUp3"
@update:selected="setUp3($event)"
:data="itemsUp3"
:selected="up3"
:placeholder="up3Placeholder"
/>
<Select
v-else
@update:selected="setUp3($event)"
:data="itemsUp3"
:placeholder="up3Placeholder"
/>
<Select
v-if="renderUlp"
@update:selected="setUlp($event)"
:data="itemsUlp"
:placeholder="ulpPlaceholder"
/>
<Select
v-else
@update:selected="setUlp($event)"
:data="itemsUlp"
:selected="ulp"
:placeholder="ulpPlaceholder"
/>
</div>
@ -163,7 +210,6 @@ onMounted(() => {
<Select
@update:selected="setStatus($event)"
:data="statusType"
:selected="status"
:placeholder="statusPlaceholder"
/>
</div>
@ -171,12 +217,7 @@ onMounted(() => {
<div class="flex flex-col flex-1 space-y-2">
<label class="filter-input-label">SLA:</label>
<Select
@update:selected="setSla($event)"
:data="slaType"
:selected="sla"
:placeholder="slaPlaceholder"
/>
<Select @update:selected="setSla($event)" :data="slaType" :placeholder="slaPlaceholder" />
</div>
<div class="flex flex-col flex-1 space-y-2">

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

@ -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(() => {
<label class="filter-input-label">Unit Pelaksanaan Pelayanan Pelanggan:</label>
<Select
v-if="renderUp3"
@update:selected="setUp3($event)"
:data="itemsUp3"
placeholder="Semua Unit Pelaksanaan Pelayanan Pelanggan"
/>
<Select
v-else
@update:selected="setUp3($event)"
:data="itemsUp3"
:selected="up3"
placeholder="Semua Unit Pelaksanaan Pelayanan Pelanggan"
/>
</div>
@ -97,9 +125,16 @@ onMounted(() => {
<label class="filter-input-label">Posko:</label>
<Select
v-if="renderPosko"
@update:selected="setPosko($event)"
:data="itemsPosko"
placeholder="Semua Posko"
/>
<Select
v-else
@update:selected="setPosko($event)"
:data="itemsPosko"
:selected="posko"
placeholder="Semua Posko"
/>
</div>

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

@ -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(() => {
<label class="filter-input-label">Unit Induk Distribusi/Wilayah:</label>
<Select
v-if="renderUid"
@update:selected="setUid($event)"
:data="itemsUid"
:placeholder="uidPlaceholder"
/>
<Select
v-else
@update:selected="setUid($event)"
:data="itemsUid"
:selected="uid"
:placeholder="uidPlaceholder"
/>
</div>
@ -125,8 +169,15 @@ onMounted(() => {
<label class="filter-input-label">Unit Pelaksanaan Pelayanan Pelanggan:</label>
<Select
v-if="renderUp3"
@update:selected="setUp3($event)"
:data="itemsUp3"
:placeholder="up3Placholder"
/>
<Select
v-else
@update:selected="setUp3($event)"
:selected="uppp"
:data="itemsUp3"
:placeholder="up3Placholder"
/>
@ -136,9 +187,16 @@ onMounted(() => {
<label class="filter-input-label">Unit Layanan Pelanggan:</label>
<Select
v-if="renderUlp"
@update:selected="setUlp($event)"
:data="itemsUlp"
:placeholder="ulpPlaceholder"
/>
<Select
v-else
@update:selected="setUlp($event)"
:data="itemsUlp"
:selected="ulp"
:placeholder="ulpPlaceholder"
/>
</div>

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

@ -1,6 +1,6 @@
<script setup lang="ts">
import Select from '@/components/Select.vue';
import DatePicker from '@/components/DatePicker.vue';
import Select from '@/components/Select.vue'
import DatePicker from '@/components/DatePicker.vue'
import {
selectedUid,
selectedUp3Ulp,
@ -9,47 +9,65 @@ import {
itemsUid,
itemsUp3,
itemsUlp
} from './reference';
import { onMounted, ref, watch } from 'vue';
} from './reference'
import { onMounted, ref, watch } from 'vue'
const renderUp3 = ref(false)
const renderUlp = ref(false)
const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah'
const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan'
const ulpPlaceholder = 'Semua Unit Layanan Pelanggan'
const up3 = ref({ id: 0, name: up3Placeholder })
const uid = ref({ id: 0, name: uidPlaceholder })
const ulp = ref({ id: 0, name: ulpPlaceholder })
const emit = defineEmits(['update:filters'])
const data = ref({
uid: uid.value,
up3: up3.value,
ulp: ulp.value,
uid: { id: 0, name: uidPlaceholder },
up3: { id: 0, name: up3Placeholder },
ulp: { id: 0, name: ulpPlaceholder },
periode: ''
})
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 },
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
}
}
onMounted(() => {
@ -69,13 +87,35 @@ onMounted(() => {
<div class="flex flex-col flex-1 space-y-2">
<label class="filter-input-label">Unit Pelaksanaan Pelayanan Pelanggan:</label>
<Select @update:selected="setUp3($event)" :data="itemsUp3" :selected="up3" :placeholder="up3Placeholder" />
<Select
v-if="renderUp3"
@update:selected="setUp3($event)"
:data="itemsUp3"
:placeholder="up3Placeholder"
/>
<Select
v-else
@update:selected="setUp3($event)"
:data="itemsUp3"
:placeholder="up3Placeholder"
/>
</div>
<div class="flex flex-col flex-1 space-y-2">
<label class="filter-input-label">Unit Layanan Pelanggan:</label>
<Select @update:selected="setUlp($event)" :data="itemsUlp" :selected="ulp" :placeholder="ulpPlaceholder" />
<Select
v-if="renderUlp"
@update:selected="setUlp($event)"
:data="itemsUlp"
:placeholder="ulpPlaceholder"
/>
<Select
v-else
@update:selected="setUlp($event)"
:data="itemsUlp"
:placeholder="ulpPlaceholder"
/>
</div>
<div class="flex flex-col flex-1 space-y-2">
@ -84,5 +124,4 @@ onMounted(() => {
<DatePicker @update:date-value="(value) => (data.periode = value)" />
</div>
</div>
</template>

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

@ -10,13 +10,10 @@ import {
itemsUlp,
fetchUid
} from './reference'
import { computed, onMounted, ref } from 'vue'
import { computed, onMounted, ref, watch } from 'vue'
const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah'
const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan'
const ulpPlaceholder = 'Semua Unit Layanan Pelanggan'
const uppp = ref({ id: 0, name: up3Placeholder })
const uid = ref({ id: 0, name: uidPlaceholder })
const ulp = ref({ id: 0, name: ulpPlaceholder })
const emit = defineEmits(['update:filters'])
const props = defineProps({
jenisLaporan: {
@ -28,33 +25,59 @@ const props = defineProps({
]
}
})
const renderUp3 = ref(false)
const renderUlp = ref(false)
const jenisLaporan = ref(computed(() => props.jenisLaporan))
const data = ref({
uid: uid.value,
up3: uppp.value,
ulp: ulp.value,
uid: { id: 0, name: uidPlaceholder },
up3: { id: 0, name: up3Placeholder },
ulp: { id: 0, name: ulpPlaceholder },
periode: '',
jenisLaporan: jenisLaporan.value[0]
})
watch(data, (value) => {
emit('update:filters', value)
})
const setUid = (value: any) => {
uid.value = value
selectedUid(value)
uppp.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) => {
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
selectedUlp(value)
data.value.ulp = value
data.value = {
...data.value,
ulp: value
}
}
onMounted(() => {
@ -74,13 +97,35 @@ onMounted(() => {
<div class="flex flex-col flex-1 space-y-2">
<label class="filter-input-label">Unit Pelaksanaan Pelayanan Pelanggan:</label>
<Select @update:selected="setUp3($event)" :data="itemsUp3" :placeholder="up3Placeholder" />
<Select
v-if="renderUp3"
@update:selected="setUp3($event)"
:data="itemsUp3"
:placeholder="up3Placeholder"
/>
<Select
v-else
@update:selected="setUp3($event)"
:data="itemsUp3"
:placeholder="up3Placeholder"
/>
</div>
<div class="flex flex-col flex-1 space-y-2">
<label class="filter-input-label">Unit Layanan Pelanggan:</label>
<Select @update:selected="setUlp($event)" :data="itemsUlp" :placeholder="ulpPlaceholder" />
<Select
v-if="renderUlp"
@update:selected="setUlp($event)"
:data="itemsUlp"
:placeholder="ulpPlaceholder"
/>
<Select
v-else
@update:selected="setUlp($event)"
:data="itemsUlp"
:placeholder="ulpPlaceholder"
/>
</div>
<div class="flex flex-col flex-1 space-y-2">

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

@ -1,5 +1,5 @@
<script setup lang="ts">
import { onMounted, ref, watch } from 'vue';
import { onMounted, ref, watch } from 'vue'
import {
selectedUid,
selectedUp3Posko,
@ -8,46 +8,63 @@ import {
itemsUid,
itemsUp3,
itemsPosko
} from './reference';
} from './reference'
import Select from '@/components/Select.vue';
import DatePicker from '@/components/DatePicker.vue';
import Select from '@/components/Select.vue'
import DatePicker from '@/components/DatePicker.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,
uid: { id: 0, name: uidPlaceholder },
up3: { id: 0, name: uppPlaceholder },
posko: { id: 0, name: poskoPlaceholder },
periode: ''
})
watch(data.value, (value) => {
watch(data, (value) => {
emit('update:filters', value)
})
const renderUp3 = ref(false)
const renderPosko = ref(false)
const setUid = (value: any) => {
uid.value = value
selectedUid(value)
uppp.value = { id: 0, name: uppPlaceholder }
data.value.uid = value
data.value = {
...data.value,
uid: value,
up3: { id: 0, name: uppPlaceholder },
posko: { id: 0, name: poskoPlaceholder }
}
renderUp3.value = true
renderPosko.value = true
setTimeout(() => {
renderUp3.value = false
renderPosko.value = false
}, 200)
}
const setUp3 = (value: any) => {
uppp.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
}
}
onMounted(() => {
@ -61,26 +78,46 @@ onMounted(() => {
<div class="flex flex-col flex-1 space-y-2">
<label class="filter-input-label">Unit Induk Distribusi/Wilayah:</label>
<Select :data="itemsUid" @update:selected="setUid($event)" :placeholder="uidPlaceholder" :selected="uid" />
<Select :data="itemsUid" @update:selected="setUid($event)" :placeholder="uidPlaceholder" />
</div>
<div class="flex flex-col flex-1 space-y-2">
<label class="filter-input-label">Unit Pelaksanaan Pelayanan Pelanggan:</label>
<Select @update:selected="setUp3($event)" :data="itemsUp3" :selected="uppp" :placeholder="uppPlaceholder" />
<Select
v-if="renderUp3"
@update:selected="setUp3($event)"
:data="itemsUp3"
:placeholder="uppPlaceholder"
/>
<Select
v-else
@update:selected="setUp3($event)"
:data="itemsUp3"
:placeholder="uppPlaceholder"
/>
</div>
<div class="flex flex-col flex-1 space-y-2">
<label class="filter-input-label">Posko:</label>
<Select @update:selected="setPosko($event)" :data="itemsPosko" :selected="posko"
:placeholder="poskoPlaceholder" />
<Select
v-if="renderPosko"
@update:selected="setPosko($event)"
:data="itemsPosko"
:placeholder="poskoPlaceholder"
/>
<Select
v-else
@update:selected="setPosko($event)"
:data="itemsPosko"
:placeholder="poskoPlaceholder"
/>
</div>
<div class="flex flex-col flex-1 space-y-2">
<label class="filter-input-label">Periode Tanggal:</label>
<DatePicker @update:date-value="(value) => data.periode = value" />
<DatePicker @update:date-value="(value) => (data.periode = value)" />
</div>
</div>
</template>

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

@ -11,42 +11,64 @@ import {
itemsUp3,
itemsPosko
} from './reference'
import { onMounted, ref } from 'vue'
import { onMounted, ref, watch } from 'vue'
const emit = defineEmits(['update:filters'])
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 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: '',
minJmlLapor: 1,
maxJmlLapor: 1
})
watch(data, (value) => {
emit('update:filters', value)
})
const renderUp3 = ref(false)
const renderPosko = ref(false)
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
}
}
onMounted(() => {
@ -66,14 +88,36 @@ onMounted(() => {
<div class="flex flex-col flex-1 space-y-2">
<label class="filter-input-label">Unit Pelaksanaan Pelayanan Pelanggan:</label>
<Select @update:selected="setUp3($event)" :data="itemsUp3" :selected="up3" :placeholder="up3Placeholder" />
<Select
v-if="renderUp3"
@update:selected="setUp3($event)"
:data="itemsUp3"
:placeholder="up3Placeholder"
/>
<Select
v-else
@update:selected="setUp3($event)"
:data="itemsUp3"
:placeholder="up3Placeholder"
/>
</div>
<div class="flex flex-col flex-1 space-y-2">
<label class="filter-input-label">Posko:</label>
<Select @update:selected="setPosko($event)" :data="itemsPosko" :selected="posko"
:placeholder="poskoPlaceholder" />
<Select
v-if="renderPosko"
@update:selected="setPosko($event)"
:data="itemsPosko"
:placeholder="poskoPlaceholder"
/>
<Select
v-else
@update:selected="setPosko($event)"
:data="itemsPosko"
:placeholder="poskoPlaceholder"
/>
</div>
<div class="flex flex-col flex-1 space-y-2">
@ -86,13 +130,18 @@ onMounted(() => {
<label class="filter-input-label">Lapor Ulang:</label>
<div class="flex flex-1 justify-between gap-x-1.5">
<InputNumber :value="data.minJmlLapor" @update:time-value="(value) => (data.minJmlLapor = value)"
class="flex flex-1" />
<InputNumber
:value="data.minJmlLapor"
@update:time-value="(value) => (data.minJmlLapor = value)"
class="flex flex-1"
/>
<small class="flex items-center">s/d</small>
<InputNumber :value="data.maxJmlLapor" @update:time-value="(value) => (data.maxJmlLapor = value)"
class="flex flex-1" />
<InputNumber
:value="data.maxJmlLapor"
@update:time-value="(value) => (data.maxJmlLapor = value)"
class="flex flex-1"
/>
</div>
</div>
</div>
</template>

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

@ -50,9 +50,6 @@ const emit = defineEmits(['update:filters'])
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 isHidden = ref(false)
const totalMin = ref('1 Menit')
const totalMax = ref('5 Menit')
@ -61,34 +58,57 @@ const setDataMin = (value: any) => (totalMin.value = value)
const getDataMin = () => totalMin.value
const setDataMax = (value: any) => (totalMax.value = value)
const getDataMax = () => totalMax.value
const renderUp3 = ref(false)
const renderPosko = ref(false)
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: '',
minTime: getDataMin().split(' ')[0],
maxTime: getDataMax().split(' ')[0]
})
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 setMin = (value: any) => {
@ -122,9 +142,6 @@ const changeDuration = (value: any) => {
isHidden.value = true
}
}
watch(data, (newValue) => {
emit('update:filters', newValue)
})
onMounted(() => {
fetchUid()
@ -144,9 +161,16 @@ onMounted(() => {
<label class="filter-input-label">Unit Pelaksanaan Pelayanan Pelanggan:</label>
<Select
v-if="renderUp3"
@update:selected="setUp3($event)"
:data="itemsUp3"
:placeholder="up3Placeholder"
/>
<Select
v-else
@update:selected="setUp3($event)"
:data="itemsUp3"
:selected="up3"
:placeholder="up3Placeholder"
/>
</div>
@ -155,9 +179,16 @@ onMounted(() => {
<label class="filter-input-label">Posko:</label>
<Select
v-if="renderPosko"
@update:selected="setPosko($event)"
:data="itemsPosko"
:placeholder="poskoPlaceholder"
/>
<Select
v-else
@update:selected="setPosko($event)"
:data="itemsPosko"
:selected="posko"
:placeholder="poskoPlaceholder"
/>
</div>

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

@ -1,38 +1,46 @@
<script setup lang="ts">
import Select from '@/components/Select.vue';
import DatePicker from '@/components/DatePicker.vue';
import Select from '@/components/Select.vue'
import DatePicker from '@/components/DatePicker.vue'
import { onMounted, ref, watch } from 'vue';
import { selectedUid, fetchUid, itemsUid, itemsUp3 } from './reference';
import { onMounted, ref, watch } from 'vue'
import { selectedUid, fetchUid, itemsUid, itemsUp3 } from './reference'
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,
uid: { id: 0, name: uidPlaceholder },
up3: { id: 0, name: uppPlaceholder },
posko: { id: 0, name: poskoPlaceholder },
periode: ''
})
watch(data.value, (value) => {
watch(data, (value) => {
emit('update:filters', value)
})
const renderUp3 = ref(false)
const setUid = (value: any) => {
uid.value = value
selectedUid(value)
uppp.value = { id: 0, name: uppPlaceholder }
data.value.uid = value
data.value = {
...data.value,
uid: value,
up3: { id: 0, name: uppPlaceholder }
}
renderUp3.value = true
setTimeout(() => {
renderUp3.value = false
}, 200)
}
const setUp3 = (value: any) => {
uppp.value = value
data.value.up3 = value
data.value = {
...data.value,
up3: value
}
}
onMounted(() => {
@ -52,7 +60,19 @@ onMounted(() => {
<div class="flex flex-col flex-1 space-y-2">
<label class="filter-input-label">Unit Pelaksanaan Pelayanan Pelanggan:</label>
<Select @update:selected="setUp3($event)" :data="itemsUp3" :selected="uppp" :placeholder="uppPlaceholder" />
<Select
v-if="renderUp3"
@update:selected="setUp3($event)"
:data="itemsUp3"
:placeholder="uppPlaceholder"
/>
<Select
v-else
@update:selected="setUp3($event)"
:data="itemsUp3"
:placeholder="uppPlaceholder"
/>
</div>
<div class="flex flex-col flex-1 space-y-2">
@ -61,5 +81,4 @@ onMounted(() => {
<DatePicker @update:date-value="(value) => (data.periode = value)" />
</div>
</div>
</template>

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

@ -17,40 +17,58 @@ import {
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,
uid: { id: 0, name: uidPlaceholder },
up3: { id: 0, name: uppPlaceholder },
posko: { id: 0, name: poskoPlaceholder },
periode: '',
groupBy: false
})
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)
uppp.value = { id: 0, name: uppPlaceholder }
data.value.uid = value
data.value = {
...data.value,
uid: value,
up3: { id: 0, name: uppPlaceholder },
posko: { id: 0, name: poskoPlaceholder }
}
renderUp3.value = true
renderPosko.value = true
setTimeout(() => {
renderUp3.value = false
renderPosko.value = false
}, 200)
}
const setUp3 = (value: any) => {
uppp.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
}
}
onMounted(() => {
@ -71,10 +89,17 @@ onMounted(() => {
<label class="filter-input-label">Unit Pelaksanaan Pelayanan Pelanggan:</label>
<Select
v-if="renderUp3"
@update:selected="setUp3($event)"
:data="itemsUp3"
:placeholder="uppPlaceholder"
/>
<Select
v-else
@update:selected="setUp3($event)"
:data="itemsUp3"
:placeholder="uppPlaceholder"
:selected="uppp"
/>
</div>
@ -82,10 +107,17 @@ onMounted(() => {
<label class="filter-input-label">Posko:</label>
<Select
v-if="renderPosko"
@update:selected="setPosko($event)"
:data="itemsPosko"
:placeholder="poskoPlaceholder"
/>
<Select
v-else
@update:selected="setPosko($event)"
:data="itemsPosko"
:placeholder="poskoPlaceholder"
:selected="posko"
/>
</div>
@ -95,12 +127,12 @@ onMounted(() => {
<DatePicker @update:date-value="(value) => (data.periode = value)" />
</div>
<div class="flex flex-col flex-1 space-y-2" v-if="posko.id == 0">
<div class="flex flex-col flex-1 space-y-2" v-if="data.posko.id == 0">
<label class="filter-input-label"
>Group By
{{
uid.id != 0
? uppp.id != 0
data.uid.id != 0
? data.up3.id != 0
? 'Unit Layanan Pelanggan/Posko'
: 'Unit Pelaksanaan Pelayanan Pelanggan'
: 'Kode Unit Distribusi'

3
src/components/Form/FiltersType/index.ts
View File

@ -14,5 +14,6 @@ export { default as Type13 } from '@/components/Form/FiltersType/Type13.vue'
export { default as Type14 } from '@/components/Form/FiltersType/Type14.vue'
export { default as Type15 } from '@/components/Form/FiltersType/Type15.vue'
export { default as Type16 } from '@/components/Form/FiltersType/Type16.vue'
export { default as Type17 } from '@/components/Form/FiltersType/Type17.vue'
export { default as Type17Gangguan } from '@/components/Form/FiltersType/Type17Gangguan.vue'
export { default as Type17Keluhan } from '@/components/Form/FiltersType/Type17Keluhan.vue'
export { default as Type18 } from '@/components/Form/FiltersType/Type18.vue'

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

@ -53,6 +53,9 @@ const fetchMedia = () => {
const fetchUidByRegional = async (regional: number) => {
if (regional == 0) {
itemsUid.value = []
itemsUp3.value = []
itemsPosko.value = []
itemsUlp.value = []
} else {
try {
const res = await getUidRegional(regional)
@ -154,15 +157,22 @@ const formatWaktu = (durasiDetik: any): string => {
const selectedUid = (value: any) => {
fetchDataUp3(value.id)
itemsUp3.value = []
itemsPosko.value = []
itemsUlp.value = []
}
const selectedUp3Posko = (value: any) => {
if (value.id != 0) {
fetchDataPosko(value.id)
} else {
itemsPosko.value = []
}
}
const selectedUp3Ulp = (value: any) => {
if (value.id != 0) {
fetchDataUlp(value.id)
} else {
itemsUlp.value = []
}
}
const selectedPosko = (value: any) => {

3
src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_DispatchingTimeGangguan.vue
View File

@ -1319,6 +1319,7 @@ const resetData = () => {
const filterData = async (params: any) => {
resetData()
const { regional, ulp, uid, up3, bulan, tahun } = params
console.log(params)
var groupList: any[] = [
{
@ -1361,7 +1362,7 @@ const filterData = async (params: any) => {
grouping.value = groupList
const query = {
namaRegional: regional.name == 'Semua Regional' ? '' : regional.name,
namaRegional: regional.id == 0 ? '' : regional.name,
idUid: uid ? uid.id : 0,
idUp3: up3 ? up3.id : 0,
idUlp: ulp ? ulp.id : 0,

12
src/components/Pages/Transaksi/Transaksi.vue
View File

@ -27,7 +27,8 @@
</div>
<Filters @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
<Type17 @update:filters="(value) => (filters = value)" />
<Type17Gangguan v-if="tab == 'gangguan'" @update:filters="(value) => (filters = value)" />
<Type17Keluhan v-else @update:filters="(value) => (filters = value)" />
</Filters>
<div id="data">
@ -178,6 +179,7 @@
cell-template="formatText"
/>
<DxColumn
v-if="tab == 'keluhan'"
:width="170"
alignment="center"
data-field="status_akhir"
@ -186,6 +188,7 @@
cell-template="formatText"
/>
<DxColumn
v-if="tab == 'keluhan'"
:width="170"
alignment="center"
data-field="durasi"
@ -229,13 +232,12 @@ import {
DxColumn,
DxColumnFixing,
DxExport,
DxLoadPanel,
DxPaging,
DxScrolling,
DxSearchPanel,
DxSelection
} from 'devextreme-vue/data-grid'
import { Type17 } from '@/components/Form/FiltersType'
import { Type17Gangguan, Type17Keluhan } from '@/components/Form/FiltersType'
import Filters from '@/components/Form/Filters.vue'
import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
import { queries, requestGraphQl } from '@/utils/api/api.graphql'
@ -401,7 +403,7 @@ const resetData = () => {
const filterData = async (params: any) => {
resetData()
const dateValue = params.periode.split(' s/d ')
const { ulp, uid, up3, status, keyword, searchBy, sla } = params
const { posko, ulp, uid, up3, status, keyword, searchBy, sla } = params
const query = {
dateFrom: dateValue[0]
? dateValue[0].split('-').reverse().join('-')
@ -409,7 +411,7 @@ const filterData = async (params: any) => {
dateTo: dateValue[1]
? dateValue[1].split('-').reverse().join('-')
: new Date().toISOString().slice(0, 10),
idPosko: 0,
idPosko: posko ? posko.id : 0,
idUid: uid ? uid.id : 0,
idUp3: up3 ? up3.id : 0,
idUlp: ulp ? ulp.id : 0,

18
src/components/Select.vue
View File

@ -1,5 +1,5 @@
<script setup lang="ts">
import { ref, computed } from 'vue'
import { ref, computed, watch } from 'vue'
import { RichSelect } from '@flavorly/vanilla-components'
const props = defineProps({
@ -23,16 +23,18 @@ const props = defineProps({
const emit = defineEmits(['update:selected'])
const data = computed(() =>
props.placeholder == '0' ? props.data : [{ id: 0, name: props.placeholder }, ...props.data]
props.placeholder == '0'
? props.data
: props.data.length > 0
? [{ id: 0, name: props.placeholder }, ...props.data]
: [{ id: 0, name: props.placeholder }]
)
const selected = ref(data.value[props.indexSelected].id)
// watch(
// () => props.selected,
// (value: any) => {
// selected.value = value.id
// }
// )
watch(props.selected.id, (value: any) => {
console.log('id has changed', value)
selected.value = value
})
</script>
<template>

6
src/stores/filters.ts
View File

@ -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,