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

Update Select.vue, filters.ts, Transaksi.vue, and Type17.vue files

Browse Source
This commit is contained in:
Dede Fuji Abdul 2024-04-23 15:03:25 +07:00
parent 355ff6aee8
commit 412412121e
6 changed files with 314 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -0,0 +1,228 @@
<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: 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>

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

@ -11,7 +11,7 @@ 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'
@ -19,46 +19,57 @@ const statusPlaceholder = 'Pilih Status'
const slaPlaceholder = 'Pilih Durasi SLA'
const keyword = ref('')
const reportType = [
{ id: 1, title: 'No Lapor' },
{ id: 2, title: 'Nama Pelapor' },
{ id: 3, title: 'Permasalahan' }
]
const searchBy = ref<any>(reportType[0].title)
const statusType = [
{ 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 = [
{
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
}
]
const sla = ref(slaType[0])
const emit = defineEmits(['update:filters'])
const props = defineProps({
reportType: {
type: Array as PropType<any[]>,
default: [
{ id: 1, name: 'No Lapor' },
{ id: 2, name: 'Nama Pelapor' },
{ id: 3, name: 'Permasalahan' }
]
},
statusType: {
type: Array as PropType<any[]>,
default: [
{ 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' }
]
},
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
},
{
id: 4,
name: '3 Hari',
time: 4320
}
]
}
})
const searchBy = ref<any>(props.reportType[0].title)
const status = ref(props.statusType[0])
const sla = ref(props.slaType[0])
const data = ref({
uid: { id: 0, name: uidPlaceholder },
@ -130,7 +141,7 @@ const changeKeyword = (value: string) => {
}
const changeReportTypeSelected = (id: any) => {
searchBy.value = reportType.find((item) => item.id == id)?.title
searchBy.value = props.reportType.find((item) => item.id == id)?.title
data.value.searchBy = searchBy.value
}

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

@ -1,18 +1,19 @@
export { default as Type1 } from '@/components/Form/FiltersType/Type1.vue'
export { default as Type2 } from '@/components/Form/FiltersType/Type2.vue'
export { default as Type3 } from '@/components/Form/FiltersType/Type3.vue'
export { default as Type4 } from '@/components/Form/FiltersType/Type4.vue'
export { default as Type5 } from '@/components/Form/FiltersType/Type5.vue'
export { default as Type6 } from '@/components/Form/FiltersType/Type6.vue'
export { default as Type7 } from '@/components/Form/FiltersType/Type7.vue'
export { default as Type8 } from '@/components/Form/FiltersType/Type8.vue'
export { default as Type9 } from '@/components/Form/FiltersType/Type9.vue'
export { default as Type10 } from '@/components/Form/FiltersType/Type10.vue'
export { default as Type11 } from '@/components/Form/FiltersType/Type11.vue'
export { default as Type12 } from '@/components/Form/FiltersType/Type12.vue'
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 Type18 } from '@/components/Form/FiltersType/Type18.vue'
export { default as Type1 } from '@/components/Form/FiltersType/Type1.vue'
export { default as Type2 } from '@/components/Form/FiltersType/Type2.vue'
export { default as Type3 } from '@/components/Form/FiltersType/Type3.vue'
export { default as Type4 } from '@/components/Form/FiltersType/Type4.vue'
export { default as Type5 } from '@/components/Form/FiltersType/Type5.vue'
export { default as Type6 } from '@/components/Form/FiltersType/Type6.vue'
export { default as Type7 } from '@/components/Form/FiltersType/Type7.vue'
export { default as Type8 } from '@/components/Form/FiltersType/Type8.vue'
export { default as Type9 } from '@/components/Form/FiltersType/Type9.vue'
export { default as Type10 } from '@/components/Form/FiltersType/Type10.vue'
export { default as Type11 } from '@/components/Form/FiltersType/Type11.vue'
export { default as Type12 } from '@/components/Form/FiltersType/Type12.vue'
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 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'

11
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">
@ -229,13 +230,12 @@ import {
DxColumn,
DxColumnFixing,
DxExport,
DxLoadPanel,
DxPaging,
DxScrolling,
DxSearchPanel,
DxSelection
} from 'devextreme-vue/data-grid'
import { Type17 } from '@/components/Form/FiltersType'
import { Type17Gangguan } 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 +401,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, uid, up3, status, keyword, searchBy, sla } = params
const query = {
dateFrom: dateValue[0]
? dateValue[0].split('-').reverse().join('-')
@ -409,10 +409,9 @@ 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,
tipe_sla: sla ? sla.id : 0,
operator_sla: '',
status_akhir: status ? status.name : '',

10
src/components/Select.vue
View File

@ -1,6 +1,6 @@
<script setup lang="ts">
import { ref, computed, watch } from 'vue';
import { RichSelect } from '@flavorly/vanilla-components';
import { ref, computed, watch } from 'vue'
import { RichSelect } from '@flavorly/vanilla-components'
const props = defineProps({
placeholder: {
@ -23,7 +23,11 @@ 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)

8
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,
@ -66,4 +66,4 @@ export const useFiltersStore = defineStore('filters', () => {
config,
setConfig
}
})
})