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

Update dependencies and fix code issues

Browse Source
This commit is contained in:
Eko Haryadi
2024-02-20 18:44:11 +07:00
parent 2758481259
commit a0ccf13466
65 changed files with 3454 additions and 2271 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/components/Button.vue
View File

@ -45,6 +45,7 @@ const buttonStyle = computed(() => {
})
const emit = defineEmits(['on:click'])
</script>
<template>

28
src/components/DatePicker.vue
View File

@ -12,7 +12,31 @@ const formatter = ref({
})
const emit = defineEmits(['update:dateValue'])
const customShortcuts = () => {
return [
{
label: "Last 15 Days",
atClick: () => {
const date = new Date();
return [new Date(date.setDate(date.getDate() + 1)), date];
},
},
{
label: "Last Years",
atClick: () => {
const date = new Date();
return [new Date(date.setFullYear(date.getFullYear() - 1)), new Date()];
},
},
{
label: "Last 3 Years",
atClick: () => {
const date = new Date();
return [new Date(date.setFullYear(date.getFullYear() - 3)), new Date()];
},
},
];
};
watch(dateValue, (newValue) => {
emit('update:dateValue', newValue)
})
@ -24,7 +48,7 @@ watch(dateValue, (newValue) => {
v-model="dateValue"
:formatter="formatter"
separator=" s/d "
:shortcuts="false"
:shortcuts="customShortcuts"
:auto-apply="false"
as-single
use-range

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

@ -2,19 +2,10 @@
<script setup lang="ts">
// components
import Button from '@/components/Button.vue'
import { useSearchStore } from '@/stores/filtersAction'
// icons
import { PhArrowsCounterClockwise, PhFileText, PhMagnifyingGlass } from '@phosphor-icons/vue'
const cariButton = useSearchStore()
defineProps({
reportButton: {
type: Boolean,
default: false
}
})
const emit = defineEmits(['runSearch'])
const emit = defineEmits(['runSearch','resetForm'])
</script>
<template>
@ -26,7 +17,7 @@ const emit = defineEmits(['runSearch'])
<div class="filter-footer rounded-b-2xl px-4 py-3 bg-primary-50 flex justify-end">
<div class="filter-buttons flex gap-3 flex-wrap">
<Button
@click="() => (cariButton.isTriggerChange = !cariButton.isTriggerChange)"
@on:click="() => emit('resetForm')"
label="Ulangi"
style-type="outline"
class-name="bg-white"
@ -35,11 +26,10 @@ const emit = defineEmits(['runSearch'])
</Button>
<Button
v-if="reportButton"
label="Lihat Laporan"
style-type="outline"
class-name="bg-white"
>
>
<PhFileText size="18" class="ml-1" weight="regular" />
</Button>

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

@ -10,6 +10,12 @@ import {
itemsPosko
} from './reference'
const props = defineProps({
runReset: {
type: Boolean,
required: true
}
});
import Select from '@/components/Select.vue'
import DatePicker from '@/components/DatePicker.vue'
const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah'
@ -17,7 +23,7 @@ const up3laceholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan'
const poskoPlaceholder = 'Semua Posko'
const up3 = ref({ id: 0, name: up3laceholder })
const uid = ref({ id: 0, name: uidPlaceholder })
const posko = ref({ id: "", name: poskoPlaceholder })
const posko = ref({ id: 0, name: poskoPlaceholder })
const emit = defineEmits(['update:filters'])
const data = ref({
uid: uid.value,
@ -40,7 +46,7 @@ const setUid = (value: any) => {
const setUp3 = (value: any) => {
up3.value = value
selectedUp3Posko(value)
posko.value = { id: "", name: poskoPlaceholder }
posko.value = { id: 0, name: poskoPlaceholder }
data.value.up3 = value
}
@ -49,7 +55,20 @@ const setPosko = (value: any) => {
selectedPosko(value)
data.value.posko = value
}
watch(() => props.runReset, (value) => {
if (value) {
uid.value = { id: 0, name: uidPlaceholder }
up3.value = { id: 0, name: up3laceholder }
posko.value = { id: 0, name: poskoPlaceholder }
data.value.periode = ''
data.value = {
uid: uid.value,
up3: up3.value,
posko: posko.value,
periode: ''
}
}
})
onMounted(() => {
emit('update:filters', data.value)
fetchUid()
@ -58,17 +77,13 @@ onMounted(() => {
<template>
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block"
>Unit Induk Distribusi/Wilayah:</label
>
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Induk Distribusi/Wilayah:</label>
<Select :data="itemsUid" @update:selected="setUid($event)" :placeholder="uidPlaceholder" :selected="uid" />
</div>
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block"
>Unit Pelaksanaan Pelayanan Pelanggan:</label
>
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Pelaksanaan Pelayanan Pelanggan:</label>
<Select @update:selected="setUp3($event)" :data="itemsUp3" :selected="up3" :placeholder="up3laceholder" />
</div>
@ -82,8 +97,8 @@ onMounted(() => {
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Periode Tanggal:</label>
<DatePicker @update:date-value="(value) => {
data.periode = value
}
data.periode = value
}
" />
</div>
</template>

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

@ -77,6 +77,6 @@ onMounted(() => {
<InlineRadioGroup @update:group-value="(value) => {
data.group = value
console.log('data.group', value)
}" :radio-items="[{ id: 1, title: 'Tidak', checked: true }, { id: 2, title: 'Ya, Grupkan' }]" />
}" :radio-items="[{ id: 1, title: 'Tidak' }, { id: 2, title: 'Ya, Grupkan' }]" />
</div>
</template>

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

@ -1,41 +1,63 @@
<script setup lang="ts">
import Select from '@/components/Select.vue'
import DatePicker from '@/components/DatePicker.vue'
import { 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 });
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 ulp = ref({ id: "", name: ulpPlaceholder });
const posko = ref({ id: 0, name: poskoPlaceholder });
const emit = defineEmits(['update:filters'])
const data = ref({
uid: uid.value,
up3: uppp.value,
posko: ulp.value,
up3: up3.value,
posko: posko.value,
periode: '',
group: 1
})
const setUid = (value: any) => {
uid.value = value;
selectedUid(value);
up3.value = { id: 0, name: up3Placeholder };
data.value.uid = value;
};
const setUp3 = (value: any) => {
up3.value = value;
selectedUp3Posko(value);
posko.value = { id: 0, name: poskoPlaceholder };
data.value.up3 = value;
};
const setPosko = (value: any) => {
posko.value = value;
selectedPosko(value);
data.value.posko = value;
};
onMounted(() => {
emit('update:filters', data.value)
fetchUid()
})
</script>
<template>
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Distribusi/Wilayah:</label>
<Select placeholder="Semua Distribusi/Wilayah" />
<Select :data="itemsUid" @update:selected="setUid($event)" :placeholder="uidPlaceholder" :selected="uid" />
</div>
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Area:</label>
<Select @update:selected="setUp3($event)" :data="itemsUp3" :selected="up3" :placeholder="up3Placeholder" />
<Select placeholder="Semua Area" />
</div>
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Posko:</label>
<Select @update:selected="setPosko($event)" :data="itemsPosko" :selected="posko" :placeholder="poskoPlaceholder" />
<Select placeholder="Semua Posko" />
</div>
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">

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

@ -19,7 +19,7 @@ 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: "", name: poskoPlaceholder })
const posko = ref({ id: 0, name: poskoPlaceholder })
const media = ref({ id: 0, name: mediaPlaceholder })
const emit = defineEmits(['update:filters'])
const data = ref({
@ -44,7 +44,7 @@ const setUid = (value: any) => {
const setUp3 = (value: any) => {
up3.value = value
selectedUp3Posko(value)
posko.value = { id: "", name: poskoPlaceholder }
posko.value = { id: 0, name: poskoPlaceholder }
data.value.up3 = value
}

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

@ -1,17 +1,16 @@
<!-- <script setup lang="ts">
<script setup lang="ts">
import Select from '@/components/Select.vue'
import SelectMulti from '@/components/SelectMulti.vue'
import DatePicker from '@/components/DatePicker.vue'
import { selectedUid, selectedUp3Posko, selectedPosko ,fetchUid, itemsUid,itemsUp3, itemsPosko} from './reference';
fetchData();
fetchUid();
const departments = [
{ id: 1, name: 'Marketing', contact: 'Durward Reynolds' },
{ id: 2, name: 'HR', contact: 'Kenton Towne' },
{ id: 3, name: 'Sales', contact: 'Therese Wunsch' },
{ id: 4, name: 'Finance', contact: 'Benedict Kessler' },
{ id: 5, name: 'Customer service', contact: 'Katelyn Rohan' },
const jenisTransakasi = [
{ id: 1, value: 'Koreksi Transaksi Individual',label: 'Koreksi Transaksi Individual' },
{ id: 2, value: 'Cleansing Traksaksi TM',label: 'Cleansing Traksaksi TM', },
{ id: 3, value: 'Koreksi Transaksi TM',label: 'Koreksi Transaksi TM', },
{ id: 4, value: 'Koreksi Kode Gangguan dan Anev',label: 'Koreksi Kode Gangguan dan Anev' },
]
</script>
@ -38,12 +37,15 @@ const departments = [
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Jenis Transaksi:</label>
<SelectMulti :data="departments" placeholder="Semua Jenis Transaksi" />
<SelectMulti
:tags="jenisTransakasi"
placeholder="Semua Jenis Transaksi"
useLabel
label="Jenis Transaksi"
/>
</div>
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Periode Tanggal:</label>
<DatePicker />
</div>
</template> -->
<template></template>
</template>

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

@ -38,7 +38,7 @@ const setUlp = (value: any) => {
};
onMounted(() => {
emit('update:filters', data.value)
fetchUid()
// fetchUid()
})
</script>

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

@ -17,7 +17,7 @@ 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: "", name: poskoPlaceholder })
const posko = ref({ id: 0, name: poskoPlaceholder })
const emit = defineEmits(['update:filters'])
const data = ref({
uid: uid.value,
@ -40,7 +40,7 @@ const setUid = (value: any) => {
const setUp3 = (value: any) => {
uppp.value = value
selectedUp3Posko(value)
posko.value = { id: "", name: poskoPlaceholder }
posko.value = { id: 0, name: poskoPlaceholder }
data.value.up3 = value
}

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

@ -10,7 +10,7 @@ const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan';
const poskoPlaceholder = 'Semua Unit Layanan Pelanggan';
const up3 = ref({ id: 0, name: up3Placeholder });
const uid = ref({ id: 0, name: uidPlaceholder });
const posko = ref({ id: "", name: poskoPlaceholder });
const posko = ref({ id: 0, name: poskoPlaceholder });
const data = ref({
uid: uid.value,
up3: up3.value,
@ -30,7 +30,7 @@ const setUid = (value: any) => {
const setUp3 = (value: any) => {
up3.value = value
selectedUp3Posko(value)
posko.value = { id: "", name: poskoPlaceholder }
posko.value = { id: 0, name: poskoPlaceholder }
data.value.up3 = value
}

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

@ -12,14 +12,14 @@ const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan';
const poskoPlaceholder = 'Semua Unit Layanan Pelanggan';
const up3 = ref({ id: 0, name: up3Placeholder });
const uid = ref({ id: 0, name: uidPlaceholder });
const posko = ref({ id: "", name: poskoPlaceholder });
const posko = ref({ id: 0, name: poskoPlaceholder });
const data = ref({
uid: uid.value,
up3: up3.value,
posko: posko.value,
periode: '',
minTime: 1,
maxTime: 1
minTime: useTotalDuration().getDataMin().split(' ')[0],
maxTime: useTotalDuration().getDataMax().split(' ')[0]
})
const setUid = (value: any) => {
uid.value = value
@ -31,7 +31,7 @@ const setUid = (value: any) => {
const setUp3 = (value: any) => {
up3.value = value
selectedUp3Posko(value)
posko.value = { id: "", name: poskoPlaceholder }
posko.value = { id: 0, name: poskoPlaceholder }
data.value.up3 = value
}
@ -40,8 +40,6 @@ const setPosko = (value: any) => {
selectedPosko(value)
data.value.posko = value
}
const sla = [
{
id: 1,
@ -53,28 +51,32 @@ const sla = [
}
]
const setMin = (value: any) => {
console.log(value)
data.value.minTime = value
useTotalDuration().setDataMin(value)
}
const setMax = (value: any) => {
data.value.maxTime = value
useTotalDuration().setDataMax(value)
}
const triggerInput = ref(false)
const changeDuration = (value: any) => {
if (value.id === 0) {
setMin("1 Menit")
setMax("5 Menit")
console.log('Durasi Menit')
data.value.minTime = 0
data.value.maxTime = 5
triggerInput.value = false
} else if (value.id === 1) {
data.value.minTime = 0
data.value.maxTime = 45
setMin("1 Menit")
setMax("45 Menit")
console.log('Dibawah / Sesuai SLA (<= 45 menit)')
triggerInput.value = true
} else {
data.value.minTime = 46
data.value.maxTime = 99999 * 60 * 24
setMin("45 Menit")
setMax(99999 * 60 * 24+ ' Menit')
triggerInput.value = true
console.log('Melebihi SLA (> 45 menit)')
}
@ -123,9 +125,12 @@ onMounted(() => {
<Select @update:selected="changeDuration($event)" :data="sla" placeholder="Durasi Menit" />
<div class="grid grid-flow-col auto-cols-auto gap-x-1.5">
<InputWithSuffix @default-value="data.minTime" @update:menit-value="setMin($event)" />
<InputWithSuffix
:value="`${data.minTime} Menit`"
/>
<small class="flex items-center">s/d</small>
<InputWithSuffix @default-value="data.maxTime" @update:menit-value="setMax($event)" />
<InputWithSuffix
:value="`${data.maxTime} Menit`"/>
</div>
</div>
</div>

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

@ -16,7 +16,7 @@ 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: "", name: poskoPlaceholder })
const posko = ref({ id: 0, name: poskoPlaceholder })
const emit = defineEmits(['update:filters'])
const data = ref({
uid: uid.value,
@ -39,7 +39,7 @@ const setUid = (value: any) => {
const setUp3 = (value: any) => {
uppp.value = value
selectedUp3Posko(value)
posko.value = { id: "", name: poskoPlaceholder }
posko.value = { id: 0, name: poskoPlaceholder }
data.value.up3 = value
}

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

@ -42,7 +42,7 @@ const setUid = (value: any) => {
const setUp3 = (value: any) => {
uppp.value = value
selectedUp3Posko(value)
posko.value = { id: "", name: poskoPlaceholder }
posko.value = { id: 0, name: poskoPlaceholder }
data.value.up3 = value
}

3
src/components/Form/InlineRadioGroup.vue
View File

@ -5,7 +5,8 @@
<div v-for="item in radioItems" :key="item.id" class="flex items-center">
<input v-model="groupValue"
type="radio" name="radio"
:checked="item.checked" @change="onChange(item)"
:checked="itemSelected.id === item.id ? true : false"
@change="onChange(item)"
class="w-4 h-4 border-gray-300 text-primary-500 peer focus:ring-primary-500" />
<label :for="`${item.id}`" class="block ml-3 text-sm font-medium text-gray-700 peer-checked:text-primary-500">{{
item.title }}</label>

28
src/components/Form/InputWithSuffix.vue
View File

@ -14,17 +14,21 @@ const props = defineProps({
type: Boolean,
default: false
},
defaultValue: {
value: {
type: String,
default: '1 Menit'
}
})
const emit = defineEmits(['update:menitValue'])
const menitValue = ref(props.defaultValue)
watch(menitValue, (newValue) => {
emit('update:menitValue', newValue)
})
const handleInput = (e :any) => {
e.value = e.value.replace(/[^0-9.]/g, '')
}
const handleBlur = (e :any) => {
e.value = e.value ? e.value + ' Menit' : ''
}
const handleFocus = (e:any) => {
e.value = e.value.replace(/[^0-9.]/g, '')
}
</script>
<template>
@ -32,7 +36,7 @@ watch(menitValue, (newValue) => {
class="relative w-full overflow-hidden rounded-lg bg-gray-200">
<input
v-model="menitValue"
:value="props.value"
autocomplete="off"
type="text"
:placeholder="placeholder"
@ -40,12 +44,10 @@ watch(menitValue, (newValue) => {
inputmode="numeric"
pattern="[0-9.]*"
:disabled="disabled"
:defaultValue="props.defaultValue"
oninput="this.value = this.value.replace(/[^0-9.]/g, '')"
onblur="this.value = this.value ? this.value + ' Menit' : ''"
onfocus="this.value = this.value.replace(/[^0-9.]/g, '')"
class="w-full px-4 py-2 text-sm leading-6 placeholder:text-gray-400 text-gray-900 border-0 border-transparent rounded-lg outline-0 bg-gray-200 focus:outline-0 focus:border-0 focus:ring-0
"
@oninput="handleInput($event)"
@onblur="handleBlur($event)"
@onfocus="handleFocus($event)"
class="w-full px-4 py-2 text-sm leading-6 placeholder:text-gray-400 text-gray-900 border-0 border-transparent rounded-lg outline-0 bg-gray-200 focus:outline-0 focus:border-0 focus:ring-0"
/>
</div>
</template>

96
src/components/Pages/Anomali/Table_61.vue
View File

@ -1,18 +1,24 @@
<template>
<Filters @run-search="() => filterData(filters)" class="mb-4">
<Type4 @update:filters="(value) => {
filters = value
}
" />
</Filters>
<div class="mt-4 lg:mt-6 max-w-7xl">
<h1 class="text-xl font-medium md:text-2xl text-dark">
Laporan Pengaduan Total
</h1>
</div>
<DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
:row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
:column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
:word-wrap-enabled="true">
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
:show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
@selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting" :allow-column-resizing="true"
column-resizing-mode="widget" :word-wrap-enabled="true">
<DxSelection mode="single" />
<DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
v-if="loading" v-model:visible="loading" :enabled="true" />
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
v-if="loading" v-model:visible="loading" :enabled="true" />
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
<DxColumnFixing :enabled="true" />
@ -111,11 +117,16 @@ import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
import { saveAs } from 'file-saver'
import { Workbook } from 'exceljs'
import { AnomaliTable2 } from '.'
import { Type4 } from '@/components/Form/FiltersType'
import Filters from '@/components/Form/Filters.vue'
import { useQuery } from '@vue/apollo-composable'
import gql from 'graphql-tag'
const position = { of: '#data' };
const showIndicator = ref(true);
const shading = ref(true);
const showPane = ref(true);
const loading = ref(false)
const data = ref<any[]>([])
const onExporting = (e: any) => {
if (e.format === 'pdf') {
const doc = new jsPDF()
@ -150,11 +161,70 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
console.log(data)
}
onMounted(() => {
const filters = useFiltersStore()
filters.setConfig({
type: 'type-4'
const GET_laporanAnomaliPenangananPengaduanGangguanPetugas = gql`
query laporanAnomaliPenangananPengaduanGangguanPetugas($dateFrom: Date!, $dateTo: Date!, $posko: String, $idUid: Int, $idUp3: Int) {
laporanAnomaliPenangananPengaduanGangguanPetugas(
dateFrom: $dateFrom
dateTo: $dateTo
posko: $posko
idUid: $idUid
idUp3: $idUp3
) {
nama_posko
persen_penyelesaian_petugas_anomali_cc_123_marking
persen_penyelesaian_petugas_anomali_cc_123_non_marking
persen_penyelesaian_petugas_anomali_marking
persen_penyelesaian_petugas_anomali_non_marking
persen_penyelesaian_petugas_anomali_pln_mobile_marking
persen_penyelesaian_petugas_anomali_pln_mobile_non_marking
total_penyelesaian_petugas_anomali_cc_123_marking
total_penyelesaian_petugas_anomali_cc_123_non_marking
total_penyelesaian_petugas_anomali_marking
total_penyelesaian_petugas_anomali_non_marking
total_penyelesaian_petugas_anomali_pln_mobile_marking
total_penyelesaian_petugas_anomali_pln_mobile_non_marking
total_petugas
}
}
`
const filterData = (params: any) => {
const { posko, uid, up3 } = params
const dateValue = params.periode.split(' s/d ')
refetch({
dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
posko: posko ? posko.id : "",
idUid: uid ? uid.id : 0,
idUp3: up3 ? up3.id : 0
})
})
onResult((queryResult) => {
if (queryResult.data != undefined) {
queryResult.data.daftarGangguanDialihkanKePoskoLain.forEach((item: any) => {
data.value = [
...data.value,
{
...item,
}
]
})
}
console.log(queryResult.data)
console.log(queryResult.loading)
console.log(queryResult.networkStatus)
})
onError((error) => {
console.log(error)
})
}
const { onResult, onError, loading, refetch } = useQuery(
GET_laporanAnomaliPenangananPengaduanGangguanPetugas,
{
dateFrom: new Date().toISOString().slice(0, 10),
dateTo: new Date().toISOString().slice(0, 10),
posko: '',
idUid: 0,
idUp3: 0
}
)
const filters = ref()
</script>

3
src/components/Pages/Anomali/Table_62.vue
View File

@ -4,7 +4,7 @@
Laporan Pengaduan PLN Mobile
</h1>
</div>
<DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
:row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
@exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
<DxSelection mode="single" />
@ -48,6 +48,7 @@ const showIndicator = ref(true);
const shading = ref(true);
const showPane = ref(true);
const loading = ref(true)
const data = ref<any[]>([])
const onExporting = (e: any) => {
if (e.format === 'pdf') {

141
src/components/Pages/Anomali/Table_63.vue
View File

@ -1,4 +1,10 @@
<template>
<Filters @run-search="() => filterData(filters)" class="mb-4">
<Type4 @update:filters="(value) => {
filters = value
}
" />
</Filters>
<div class="mt-4 lg:mt-6 max-w-7xl">
<h1 class="text-xl font-medium md:text-2xl text-dark">
Laporan Pengaduan Total
@ -11,66 +17,70 @@
<DxSelection mode="single" />
<DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
v-if="loading" v-model:visible="loading" :enabled="true" />
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
v-if="loading" v-model:visible="loading" :enabled="true" />
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
<DxColumnFixing :enabled="true" />
<DxColumn :width="170" alignment="center" data-field="" caption="Nama Unit" css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="nama_posko" caption="Nama Unit"
css-class="custom-table-column" />
<DxColumn alignment="center" caption="Total Petugas" css-class="custom-table-column">
<DxColumn :width="170" alignment="center" data-field="" caption="a" css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="total_petugas" caption="a"
css-class="custom-table-column" />
</DxColumn>
<DxColumn alignment="center" caption="Total Petugas Yang Pengaduan Diselesaikan Secara Anomali"
css-class="custom-table-column">
<DxColumn alignment="center" caption="PLN Mobile" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="b"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="total_penyelesaian_petugas_anomali_pln_mobile"
data-type="number" caption="b" css-class="custom-table-column" />
</DxColumn>
<DxColumn alignment="center" caption="CC 123" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="c"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="total_penyelesaian_petugas_anomali_cc_123"
data-type="number" caption="c" css-class="custom-table-column" />
</DxColumn>
<DxColumn alignment="center" caption="Total" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="d=b+c"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="total_penyelesaian_petugas_anomali" data-type="number"
caption="d=b+c" css-class="custom-table-column" />
</DxColumn>
</DxColumn>
<DxColumn alignment="center" caption="% Petugas Yang Pengaduan Diselesaikan Secara Anomali"
css-class="custom-table-column">
<DxColumn alignment="center" caption="PLN Mobile" css-class="custom-table-column">
<DxColumn alignment="center" caption="e=b/a" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Marking"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Non Marking"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center"
data-field="total_penyelesaian_petugas_anomali_pln_mobile_marking" data-type="number"
caption="Marking" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center"
data-field="total_penyelesaian_petugas_anomali_pln_mobile_non_marking" data-type="number"
caption="Non Marking" css-class="custom-table-column" />
</DxColumn>
</DxColumn>
<DxColumn alignment="center" caption="CC 123" css-class="custom-table-column">
<DxColumn alignment="center" caption="f=c/a" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Marking"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Non Marking"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="total_penyelesaian_petugas_anomali_cc_123_marking"
data-type="number" caption="Marking" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center"
data-field="total_penyelesaian_petugas_anomali_cc_123_non_marking" data-type="number"
caption="Non Marking" css-class="custom-table-column" />
</DxColumn>
</DxColumn>
<DxColumn alignment="center" caption="Total" css-class="custom-table-column">
<DxColumn alignment="center" caption="g=e+f" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Marking"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Non Marking"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="total_penyelesaian_petugas_anomali_marking"
data-type="number" caption="Marking" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="total_penyelesaian_petugas_anomali_non_marking"
data-type="number" caption="Non Marking" css-class="custom-table-column" />
</DxColumn>
</DxColumn>
</DxColumn>
</DxDataGrid>
<AnomaliTable4 />
<AnomaliTable4 :filters-detail="filters" />
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { useFiltersStore } from '@/stores/filters'
import { DxDataGrid } from 'devextreme-vue'
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
import { jsPDF } from 'jspdf'
@ -79,11 +89,16 @@ import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
import { saveAs } from 'file-saver'
import { Workbook } from 'exceljs'
import { AnomaliTable4 } from '.'
import { useQuery } from '@vue/apollo-composable'
import gql from 'graphql-tag'
import { Type4 } from '@/components/Form/FiltersType'
import Filters from '@/components/Form/Filters.vue'
const position = { of: '#data' };
const showIndicator = ref(true);
const shading = ref(true);
const showPane = ref(true);
const loading = ref(true)
const data = ref<any[]>([])
const onExporting = (e: any) => {
if (e.format === 'pdf') {
@ -118,12 +133,76 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
const data = selectedRowsData[0]
console.log(data)
}
const GET_laporanAnomaliPenangananPengaduanGangguanPetugas = gql`
query laporanAnomaliPenangananPengaduanGangguanPetugas($dateFrom: Date!,
$dateTo: Date!, $jenisLaporan: Int, $idUid: Int, $idUp3: Int,$posko: String) {
laporanAnomaliPenangananPengaduanGangguanPetugas(
dateFrom: $dateFrom
dateTo: $dateTo
jenisLaporan :$jenisLaporan
idUid: $idUid
idUp3: $idUp3
posko: $posko
onMounted(() => {
const filters = useFiltersStore()
filters.setConfig({
type: 'type-4'
) {
nama_posko
persen_penyelesaian_petugas_anomali_cc_123_marking
persen_penyelesaian_petugas_anomali_cc_123_non_marking
persen_penyelesaian_petugas_anomali_marking
persen_penyelesaian_petugas_anomali_non_marking
persen_penyelesaian_petugas_anomali_pln_mobile_marking
persen_penyelesaian_petugas_anomali_pln_mobile_non_marking
total_penyelesaian_petugas_anomali_cc_123_marking
total_penyelesaian_petugas_anomali_cc_123_non_marking
total_penyelesaian_petugas_anomali_marking
total_penyelesaian_petugas_anomali_non_marking
total_penyelesaian_petugas_anomali_pln_mobile_marking
total_penyelesaian_petugas_anomali_pln_mobile_non_marking
total_petugas
}
}
`
const filterData = (params: any) => {
const { posko, uid, up3 } = params
const dateValue = params.periode.split(' s/d ')
refetch({
dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
posko: posko ? posko.id : "",
idUid: uid ? uid.id : 0,
idUp3: up3 ? up3.id : 0
})
})
onResult((queryResult) => {
if (queryResult.data != undefined) {
queryResult.data.daftarGangguanDialihkanKePoskoLain.forEach((item: any) => {
data.value = [
...data.value,
{
...item,
total_penyelesaian_petugas_anomali_cc_123: item.total_penyelesaian_petugas_anomali_cc_123_marking + item.total_penyelesaian_petugas_anomali_cc_123_non_marking,
total_penyelesaian_petugas_anomali_pln_mobile: item.total_penyelesaian_petugas_anomali_pln_mobile_marking + item.total_penyelesaian_petugas_anomali_pln_mobile_non_marking,
total_penyelesaian_petugas_anomali: item.total_penyelesaian_petugas_anomali_marking + item.total_penyelesaian_petugas_anomali_non_marking,
}
]
})
}
console.log(queryResult.data)
console.log(queryResult.loading)
console.log(queryResult.networkStatus)
})
onError((error) => {
console.log(error)
})
}
const { onResult, onError, loading, refetch } = useQuery(
GET_laporanAnomaliPenangananPengaduanGangguanPetugas,
{
dateFrom: new Date().toISOString().slice(0, 10),
dateTo: new Date().toISOString().slice(0, 10),
posko: '',
idUid: 0,
idUp3: 0
}
)
const filters = ref()
</script>

123
src/components/Pages/Anomali/Table_64.vue
View File

@ -4,54 +4,56 @@
Laporan Pengaduan PLN Mobile
</h1>
</div>
<DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
:row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
:column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
:word-wrap-enabled="true">
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
:show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
@selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting" :allow-column-resizing="true"
column-resizing-mode="widget" :word-wrap-enabled="true">
<DxSelection mode="single" />
<DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
v-if="loading" v-model:visible="loading" :enabled="true" />
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
v-if="loading" v-model:visible="loading" :enabled="true" />
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
<DxColumnFixing :enabled="true" />
<DxColumn :width="170" alignment="center" data-field="" caption="Nama Unit" css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="" caption="Nama Petugas" css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="nama_posko" caption="Nama Unit"
css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="nama_petugas" caption="Nama Petugas"
css-class="custom-table-column" />
<DxColumn alignment="center" caption="Total WO" css-class="custom-table-column">
<DxColumn alignment="center" caption="(PLN Mobile, CC123, DLL)" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="a"
<DxColumn :width="150" alignment="center" data-field="total_wo" data-type="number" caption="a"
css-class="custom-table-column" />
</DxColumn>
</DxColumn>
<DxColumn alignment="center" caption="Total Pengaduan Yang Diselesaikan Secara Anomali"
css-class="custom-table-column">
<DxColumn alignment="center" caption="PLN Mobile" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="b"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="total_penyelesaian_petugas_anomali_pln_mobile"
data-type="number" caption="b" css-class="custom-table-column" />
</DxColumn>
<DxColumn alignment="center" caption="CC 123" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="c"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="total_penyelesaian_petugas_anomali_cc_123"
data-type="number" caption="c" css-class="custom-table-column" />
</DxColumn>
<DxColumn alignment="center" caption="Total" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="d=b+c"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="total_penyelesaian_petugas_anomali" data-type="number"
caption="d=b+c" css-class="custom-table-column" />
</DxColumn>
</DxColumn>
<DxColumn alignment="center" caption="% Pengaduan Yang Diselesaikan Secara Anomali" css-class="custom-table-column">
<DxColumn alignment="center" caption="PLN Mobile" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="e=b/a"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="persen_penyelesaian_petugas_anomali_pln_mobile"
data-type="number" caption="e=b/a" css-class="custom-table-column" />
</DxColumn>
<DxColumn alignment="center" caption="CC 123" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="f=c/a"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="persen_penyelesaian_petugas_anomali_cc_123"
data-type="number" caption="f=c/a" css-class="custom-table-column" />
</DxColumn>
<DxColumn alignment="center" caption="Total" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="g=e+f"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="persen_penyelesaian_petugas_anomali"
data-type="number" caption="g=e+f" css-class="custom-table-column" />
</DxColumn>
</DxColumn>
@ -59,6 +61,12 @@
</template>
<script setup lang="ts">
defineProps({
filtersDetail: {
type: Object as PropType<any>,
required: true
}
})
import { DxDataGrid } from 'devextreme-vue'
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
import { jsPDF } from 'jspdf'
@ -66,12 +74,18 @@ import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
import { saveAs } from 'file-saver'
import { Workbook } from 'exceljs'
import { ref } from 'vue'
import { ref, watch, type PropType } from 'vue'
import { useQuery } from '@vue/apollo-composable'
import gql from 'graphql-tag'
const position = { of: '#data' };
const showIndicator = ref(true);
const shading = ref(true);
const showPane = ref(true);
const loading = ref(true)
const data = ref<any[]>([])
const filtersDetail = ref({}); // Declare the 'filters' variable
watch(() => filtersDetail.value, (newValue) => { // Access the 'value' property of the 'filters' ref
filterData(newValue)
}, { immediate: true })
const onExporting = (e: any) => {
if (e.format === 'pdf') {
const doc = new jsPDF()
@ -105,5 +119,68 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
const data = selectedRowsData[0]
console.log(data)
}
const laporanAnomaliDetailPetugasPenangananPengaduanGangguan = gql`
query laporanAnomaliDetailPetugasPenangananPengaduanGangguan($dateFrom: Date!,
$dateTo: Date!, $jenisLaporan: Int, $idUid: Int, $idUp3: Int,$posko: String) {
laporanAnomaliDetailPetugasPenangananPengaduanGangguan(
dateFrom: $dateFrom
dateTo: $dateTo
jenisLaporan :$jenisLaporan
idUid: $idUid
idUp3: $idUp3
posko: $posko
) {
nama_petugas
nama_posko
persen_penyelesaian_petugas_anomali
persen_penyelesaian_petugas_anomali_cc_123
persen_penyelesaian_petugas_anomali_pln_mobile
total_penyelesaian_petugas_anomali
total_penyelesaian_petugas_anomali_cc_123
total_penyelesaian_petugas_anomali_pln_mobile
total_wo
}
}
`
const filterData = (params: any) => {
const { posko, uid, up3 } = params
const dateValue = params.periode.split(' s/d ')
refetch({
dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
posko: posko ? posko.id : "",
idUid: uid ? uid.id : 0,
idUp3: up3 ? up3.id : 0
})
onResult((queryResult) => {
if (queryResult.data != undefined) {
queryResult.data.daftarGangguanDialihkanKePoskoLain.forEach((item: any) => {
data.value = [
...data.value,
{
...item,
}
]
})
}
console.log(queryResult.data)
console.log(queryResult.loading)
console.log(queryResult.networkStatus)
})
onError((error) => {
console.log(error)
})
}
const { onResult, onError, loading, refetch } = useQuery(
laporanAnomaliDetailPetugasPenangananPengaduanGangguan,
{
dateFrom: new Date().toISOString().slice(0, 10),
dateTo: new Date().toISOString().slice(0, 10),
posko: '',
idUid: 0,
idUp3: 0
}
)
</script>

78
src/components/Pages/Anomali/Table_65.vue
View File

@ -1,4 +1,10 @@
<template>
<Filters @run-search="() => filterData(filters)" class="mb-4">
<Type4 @update:filters="(value) => {
filters = value
}
" />
</Filters>
<div class="mt-4 lg:mt-6 max-w-7xl">
<h1 class="text-xl font-medium md:text-2xl text-dark">
Laporan Pengaduan Total
@ -77,6 +83,8 @@
</template>
<script setup lang="ts">
import Filters from '@/components/Form/Filters.vue'
import { onMounted, ref } from 'vue'
import { useFiltersStore } from '@/stores/filters'
import { DxDataGrid } from 'devextreme-vue'
@ -87,11 +95,14 @@ import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
import { saveAs } from 'file-saver'
import { Workbook } from 'exceljs'
import { AnomaliTable6 } from '.'
import { Type4 } from '@/components/Form/FiltersType'
import { useQuery } from '@vue/apollo-composable'
import gql from 'graphql-tag'
const position = { of: '#data' };
const showIndicator = ref(true);
const shading = ref(true);
const showPane = ref(true);
const loading = ref(true)
const data = ref<any[]>([])
const onExporting = (e: any) => {
if (e.format === 'pdf') {
@ -127,11 +138,64 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
console.log(data)
}
onMounted(() => {
const filters = useFiltersStore()
filters.setConfig({
type: 'type-4'
const GET_laporanCheckInCheckOut = gql`
query laporanCheckInCheckOut($dateFrom: Date!, $dateTo: Date!, $posko: String, $idUid: Int, $idUp3: Int) {
laporanCheckInCheckOut(
dateFrom: $dateFrom
dateTo: $dateTo
posko: $posko
idUid: $idUid
idUp3: $idUp3
) {
avg_durasi_wo_gangguan_individual
avg_durasi_wo_penugasan_khusus
avg_rct_wo_gangguan_individual
avg_rpt_wo_gangguan_individual
jumlah_wo_gangguan_individual
jumlah_wo_penugasan_khusus
personil_yantek
user_regu
}
}
`
const filterData = (params: any) => {
const { posko, uid, up3 } = params
const dateValue = params.periode.split(' s/d ')
refetch({
dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
posko: posko ? posko.id : "",
idUid: uid ? uid.id : 0,
idUp3: up3 ? up3.id : 0
})
})
onResult((queryResult) => {
if (queryResult.data != undefined) {
queryResult.data.daftarGangguanDialihkanKePoskoLain.forEach((item: any) => {
data.value = [
...data.value,
{
...item,
}
]
})
}
console.log(queryResult.data)
console.log(queryResult.loading)
console.log(queryResult.networkStatus)
})
onError((error) => {
console.log(error)
})
}
const { onResult, onError, loading, refetch } = useQuery(
GET_laporanCheckInCheckOut,
{
dateFrom: new Date().toISOString().slice(0, 10),
dateTo: new Date().toISOString().slice(0, 10),
posko: '',
idUid: 0,
idUp3: 0
}
)
const filters = ref()
</script>

3
src/components/Pages/Anomali/Table_66.vue
View File

@ -35,6 +35,8 @@
</template>
<script setup lang="ts">
import Filters from '@/components/Form/Filters.vue'
import { DxDataGrid } from 'devextreme-vue'
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
import { jsPDF } from 'jspdf'
@ -47,6 +49,7 @@ const position = { of: '#data' };
const showIndicator = ref(true);
const shading = ref(true);
const showPane = ref(true);
const data = ref<any[]>([])
const loading = ref(false)
const onExporting = (e: any) => {

107
src/components/Pages/Cico/Table_60.vue
View File

@ -1,45 +1,47 @@
<template>
<Filters @run-search="() => filterData(filters)" class="mb-4">
<Filters @run-search="() => filterData(filters)" class="mb-4">
<Type1 @update:filters="(value) => {
filters = value
}
" />
</Filters>
<div id="data">
<DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
:row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
:column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
:word-wrap-enabled="true">
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
:show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
@selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
:allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
<DxSelection mode="single" />
<DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
v-if="loading" v-model:visible="loading" :enabled="true" />
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
v-if="loading" v-model:visible="loading" :enabled="true" />
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
<DxColumnFixing :enabled="true" />
<DxColumn :width="200" alignment="center" data-field="" caption="User Regu" css-class="custom-table-column" />
<DxColumn :width="200" alignment="center" data-field="" caption="Personil Yantek"
<DxColumn :width="200" alignment="center" data-field="user_regu" caption="User Regu" css-class="custom-table-column" />
<DxColumn :width="200" alignment="center" data-field="personil_yantek" caption="Personil Yantek"
css-class="custom-table-column" />
<DxColumn :width="200" alignment="center" data-field="" data-type="number"
<DxColumn :width="200" alignment="center" data-field="jumlah_wo_gangguan_individual" data-type="number"
caption="Jumlah WO Gangguan Individual" css-class="custom-table-column" />
<DxColumn :width="200" alignment="center" data-field="" data-type="number"
<DxColumn :width="200" alignment="center" data-field="avg_durasi_wo_gangguan_individual" data-type="number"
caption="Rata-rata Durasi WO Gangguan" css-class="custom-table-column" />
<DxColumn :width="200" alignment="center" data-field="" data-type="number" caption="Rata-rata RPT WO Gangguan"
<DxColumn :width="200" alignment="center" data-field="avg_rpt_wo_gangguan_individual" data-type="number"
caption="Rata-rata RPT WO Gangguan"
css-class="custom-table-column" />
<DxColumn :width="200" alignment="center" data-field="" data-type="number" caption="Rata-rata RCT WO Gangguan"
<DxColumn :width="200" alignment="center" data-field="avg_rct_wo_gangguan_individual" data-type="number" caption="Rata-rata RCT WO Gangguan"
css-class="custom-table-column" />
<DxColumn :width="200" alignment="center" data-field="" data-type="number" caption="Jumlah Wo Penugasan Khusus"
<DxColumn :width="200" alignment="center" data-field="jumlah_wo_penugasan_khusus" data-type="number" caption="Jumlah Wo Penugasan Khusus"
css-class="custom-table-column" />
<DxColumn :width="200" alignment="center" data-field="" data-type="number"
caption="Rata-rata Duarasi WO Penugasan" css-class="custom-table-column" />
<DxColumn :width="200" alignment="center" data-field="avg_durasi_wo_penugasan_khusus" data-type="number"
caption="Rata-rata Durasi WO Penugasan" css-class="custom-table-column" />
</DxDataGrid>
</div>
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { useFiltersStore } from '@/stores/filters'
import { DxDataGrid } from 'devextreme-vue'
@ -51,13 +53,18 @@ import { saveAs } from 'file-saver'
import { Workbook } from 'exceljs'
import { Type1 } from '@/components/Form/FiltersType'
import Filters from '@/components/Form/Filters.vue'
import { useQuery } from '@vue/apollo-composable'
import gql from 'graphql-tag'
const position = { of: '#data' }
const showIndicator = ref(true)
const shading = ref(true)
const showPane = ref(true)
const dataDetail = ref<any>()
const data = ref<any[]>([])
const showDetail = ref(false)
const loading = ref(false)
const showData = () => {
showDetail.value = true
}
const onExporting = (e: any) => {
if (e.format === 'pdf') {
const doc = new jsPDF()
@ -86,14 +93,72 @@ const onExporting = (e: any) => {
e.cancel = true
}
}
const onSelectionChanged = ({ selectedRowsData }: any) => {
const data = selectedRowsData[0]
dataDetail.value = data
console.log(data)
}
const filters = ref();
const filterData = (filters: any) => {
console.log(filters)
const GET_laporanCheckInCheckOut = gql`
query laporanCheckInCheckOut($dateFrom: Date!, $dateTo: Date!, $posko: String, $idUid: Int, $idUp3: Int) {
laporanCheckInCheckOut(
dateFrom: $dateFrom
dateTo: $dateTo
posko: $posko
idUid: $idUid
idUp3: $idUp3
) {
avg_durasi_wo_gangguan_individual
avg_durasi_wo_penugasan_khusus
avg_rct_wo_gangguan_individual
avg_rpt_wo_gangguan_individual
jumlah_wo_gangguan_individual
jumlah_wo_penugasan_khusus
personil_yantek
user_regu
}
}
`
const filterData = (params: any) => {
const { posko, uid, up3 } = params
const dateValue = params.periode.split(' s/d ')
refetch({
dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
posko: posko ? posko.id : "",
idUid: uid ? uid.id : 0,
idUp3: up3 ? up3.id : 0
})
onResult((queryResult) => {
if (queryResult.data != undefined) {
queryResult.data.daftarGangguanDialihkanKePoskoLain.forEach((item: any) => {
data.value = [
...data.value,
{
...item,
}
]
})
}
console.log(queryResult.data)
console.log(queryResult.loading)
console.log(queryResult.networkStatus)
})
onError((error) => {
console.log(error)
})
}
const { onResult, onError, loading, refetch } = useQuery(
GET_laporanCheckInCheckOut,
{
dateFrom: new Date().toISOString().slice(0, 10),
dateTo: new Date().toISOString().slice(0, 10),
posko: '',
idUid: 0,
idUp3: 0
}
)
const filters = ref()
</script>

98
src/components/Pages/Ctt/Table_67.vue
View File

@ -1,5 +1,5 @@
<template>
<Filters @run-search="() => filterData(filters)" class="mb-4">
<Filters @run-search="() => filterData(filters)" class="mb-4">
<Type3 @update:filters="(value) => {
filters = value
}
@ -13,47 +13,47 @@
<DxSelection mode="single" />
<DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
v-if="loading" v-model:visible="loading" :enabled="true" />
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
v-if="loading" v-model:visible="loading" :enabled="true" />
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
<DxColumnFixing :enabled="true" />
<DxColumn :width="170" alignment="center" data-field="" caption="Nama Unit" css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="nama_posko" caption="Nama Unit" css-class="custom-table-column" />
<DxColumn alignment="center" caption="Total WO" css-class="custom-table-column">
<DxColumn alignment="center" caption="CC 123" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="a"
<DxColumn alignment="center" caption="CC 123" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="total_wo_cc123" data-type="number" caption="a"
css-class="custom-table-column" />
</DxColumn>
<DxColumn alignment="center" caption="PLN Mobile" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="b"
<DxColumn :width="150" alignment="center" data-field="total_wo_pln_mobile" data-type="number" caption="b"
css-class="custom-table-column" />
</DxColumn>
<DxColumn alignment="center" caption="COMCEN" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="c"
<DxColumn :width="150" alignment="center" data-field="total_wo_comcen" data-type="number" caption="c"
css-class="custom-table-column" />
</DxColumn>
<DxColumn alignment="center" caption="Total" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="d=b+c"
<DxColumn :width="150" alignment="center" data-field="total_wo" data-type="number" caption="d=b+c"
css-class="custom-table-column" />
</DxColumn>
</DxColumn>
<DxColumn alignment="center" caption="Rekomendasi sistem" css-class="custom-table-column">
<DxColumn alignment="center" caption="Mendatangkan Petugas" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="e"
<DxColumn :width="150" alignment="center" data-field="rekomendasi_sistem_mendatangkan_petugas" data-type="number" caption="e"
css-class="custom-table-column" />
</DxColumn>
<DxColumn alignment="center" caption="Diberikan ke Pelanggan" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="f"
<DxColumn :width="150" alignment="center" data-field="total_wo_loket" data-type="number" caption="f"
css-class="custom-table-column" />
</DxColumn>
</DxColumn>
<DxColumn alignment="center" caption="DLPD" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="g"
<DxColumn :width="150" alignment="center" data-field="dlpd" data-type="number" caption="g"
css-class="custom-table-column" />
</DxColumn>
<DxColumn alignment="center" caption="Histori P2TL" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="h"
<DxColumn :width="150" alignment="center" data-field="history_p2ti" data-type="number" caption="h"
css-class="custom-table-column" />
</DxColumn>
@ -73,13 +73,14 @@ import { saveAs } from 'file-saver'
import { Workbook } from 'exceljs'
import Filters from '@/components/Form/Filters.vue'
import { Type3 } from '@/components/Form/FiltersType'
import { useQuery } from '@vue/apollo-composable'
import gql from 'graphql-tag'
const position = { of: '#data' }
const showIndicator = ref(true)
const shading = ref(true)
const showPane = ref(true)
const dataDetail = ref<any>()
const showDetail = ref(false)
const loading = ref(false)
const onExporting = (e: any) => {
if (e.format === 'pdf') {
const doc = new jsPDF()
@ -109,13 +110,74 @@ const onExporting = (e: any) => {
}
}
const GET_laporanCttKwhPeriksa = gql`
query laporanCttKwhPeriksa($dateFrom: Date!, $dateTo: Date!, $posko: String, $idUid: Int, $idUp3: Int) {
laporanCttKwhPeriksa(
dateFrom: $dateFrom
dateTo: $dateTo
posko: $posko
idUid: $idUid
idUp3: $idUp3
) {
dlpd
history_p2ti
nama_posko
rekomendasi_sistem_mendatangkan_petugas
total_wo
total_wo_cc123
total_wo_comcen
total_wo_loket
total_wo_pln_mobile
}
}
`
const filterData = (params: any) => {
const { posko, uid, up3 } = params
const dateValue = params.periode.split(' s/d ')
refetch({
dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
posko: posko ? posko.id : "",
idUid: uid ? uid.id : 0,
idUp3: up3 ? up3.id : 0
})
onResult((queryResult) => {
if (queryResult.data != undefined) {
queryResult.data.daftarGangguanDialihkanKePoskoLain.forEach((item: any) => {
data.value = [
...data.value,
{
...item,
}
]
})
}
console.log(queryResult.data)
console.log(queryResult.loading)
console.log(queryResult.networkStatus)
})
onError((error) => {
console.log(error)
})
}
const { onResult, onError, loading, refetch } = useQuery(
GET_laporanCttKwhPeriksa,
{
dateFrom: new Date().toISOString().slice(0, 10),
dateTo: new Date().toISOString().slice(0, 10),
posko: '',
idUid: 0,
idUp3: 0
}
)
const onSelectionChanged = ({ selectedRowsData }: any) => {
const data = selectedRowsData[0]
dataDetail.value = data
console.log(data)
}
const filters = ref()
const filterData = (filters: any) => {
console.log(filters)
const showData = () => {
showDetail.value = true
}
const filters = ref()
</script>

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

@ -1,6 +1,6 @@
<template>
<Filters @run-search="() => filterData(filters)" class="mb-4">
<Type1 @update:filters="(value) => {
<Filters @reset-form="runReset = !runReset" @run-search="() => filterData(filters)" class="mb-4">
<Type1 :run-reset="runReset" @update:filters="(value) => {
filters = value
}
" />
@ -12,15 +12,18 @@
:hover-state-enabled="true" @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
:allow-column-resizing="true" column-resizing-mode="widget">
<DxPaging :page-size="5" :enabled="true" />
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20, 'all']" display-mode="full"
:show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full" :show-page-size-selector="true"
:show-info="true" :show-navigation-buttons="true" />
<DxSelection mode="single" />
<!-- <DxScrolling column-rendering-mode="virtual" mode="virtual" row-rendering-mode="virtual" /> -->
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
v-if="loading" v-model:visible="loading" :enabled="true" />
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
<DxColumn css-class="custom-table-column" :width="50" alignment="center"
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="no_laporan"
caption="No Laporan" cell-template="data" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="pembuat_laporan"
caption="Pembuat Laporan" cell-template="data" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_lapor"
@ -31,13 +34,13 @@
caption="Tgl Response" cell-template="data" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_recovery"
caption="Tgl Recovery" cell-template="data" />
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_respon_time"
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_response_time"
caption="Durasi Response Time" cell-template="data" />
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_recovery_time"
caption="Durasi Recovery Time" cell-template="data" />
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="posko_asal"
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="nama_posko_lama"
caption="Posko Awal" cell-template="data" />
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="posko_tujuan"
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="nama_posko_baru"
caption="Posko Tujuan" cell-template="data" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="status_akhir" caption="Status"
cell-template="data" />
@ -125,14 +128,14 @@
<h3 class="text-sm font-medium w-[170px] text-gray-800">
Posko Awal:
</h3>
<InputText :readonly="true" :value="dataDetail?.posko_asal" class-name="flex-1" />
<InputText :readonly="true" :value="dataDetail?.nama_posko_lama" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">
Posko Tujuan:
</h3>
<InputText :readonly="true" :value="dataDetail?.posko_tujuan" class-name="flex-1" />
<InputText :readonly="true" :value="dataDetail?.nama_posko_baru" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
@ -188,7 +191,7 @@
<h3 class="text-sm font-medium w-[170px] text-gray-800">
Posko:
</h3>
<InputText :readonly="true" :value="dataDetail?.posko_asal" class-name="flex-1" />
<InputText :readonly="true" :value="dataDetail?.nama_posko_lama" class-name="flex-1" />
</div>
</div>
@ -215,7 +218,6 @@ import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
import { saveAs } from 'file-saver'
import { Workbook } from 'exceljs'
import { useDialogStore } from '@/stores/dialog'
import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
import InputText from '@/components/InputText.vue'
@ -230,24 +232,23 @@ const dialog = useDialogStore()
const data = ref<any[]>([])
const dataDetail = ref<any>()
const showDetail = ref(false)
const runReset = ref(false)
const closeDetail = () => {
showDetail.value = false
}
const onExporting = (e: any) => {
if (e.format === 'pdf') {
const doc = new jsPDF()
exportToPdf({
jsPDFDocument: doc,
component: e.component,
indent: 5
indent: 100
}).then(() => {
doc.save(`.pdf`)
})
} else {
const workbook = new Workbook()
const worksheet = workbook.addWorksheet('Employees')
const worksheet = workbook.addWorksheet('Daftar Gangguan Dialihkan Ke Posko Lain')
exportToExcel({
component: e.component,
@ -255,7 +256,7 @@ const onExporting = (e: any) => {
autoFilterEnabled: true
}).then(() => {
workbook.xlsx.writeBuffer().then((buffer: any) => {
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DaftarGangguanDialihkanKePoskoLain.xlsx')
})
})
@ -264,7 +265,7 @@ const onExporting = (e: any) => {
}
const GET_GANGGUAN_DATA_DI_ALIHAN_KE_POSKO_LAIN = gql`
query DaftarGangguan($dateFrom: Date!, $dateTo: Date!, $posko: String, $idUid: Int, $idUp3: Int) {
query DaftarGangguan($dateFrom: Date!, $dateTo: Date!, $posko: Int, $idUid: Int, $idUp3: Int) {
daftarGangguanDialihkanKePoskoLain(
dateFrom: $dateFrom
dateTo: $dateTo
@ -275,18 +276,18 @@ const GET_GANGGUAN_DATA_DI_ALIHAN_KE_POSKO_LAIN = gql`
alamat_pelapor
durasi_recovery_time
durasi_response_time
waktu_lapor
waktu_dialihkan
waktu_recovery
waktu_response
id_gangguan
idpel_nometer
keterangan_pelapor
media
nama_pelapor
no_laporan
no_telp_pelapor
posko_asal
posko_tujuan
nama_posko_lama
nama_posko_baru
status_akhir
waktu_recovery
waktu_response
@ -299,7 +300,7 @@ const filterData = (params: any) => {
refetch({
dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
posko: posko ? posko.id : "",
posko: posko ? posko.id : 0,
idUid: uid ? uid.id : 0,
idUp3: up3 ? up3.id : 0
})
@ -311,9 +312,7 @@ const filterData = (params: any) => {
{
...item,
pembuat_laporan: '-',
waktu_lapor: '-',
status_akhir: fetchStatus(item.status_akhir),
posko: item.posko_asal
posko: item.nama_posko_baru
}
]
})

2
src/components/Pages/Gangguan/Table_10.vue
View File

@ -6,7 +6,7 @@
}
" />
</Filters>
<div>
<div id="data">
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
:show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
@selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"

5
src/components/Pages/Gangguan/Table_11.vue
View File

@ -19,7 +19,8 @@
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
<DxColumnFixing :enabled="true" />
<DxColumn css-class="custom-table-column" :width="50" alignment="center"
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
<DxColumn :width="60" alignment="center" data-field="no" caption="NO" css-class="custom-table-column" />
<DxColumn :width="150" name="poskoGroup" alignment="center" data-field="posko" caption="Posko"
css-class="custom-table-column" :group-index="0" />
@ -260,7 +261,7 @@ const filterData = (params: any) => {
refetch({
dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
posko: posko ? posko.id : "",
posko: posko ? posko.id : 0,
idUid: uid ? uid.id : 0,
idUp3: up3 ? up3.id : 0,
})

2
src/components/Pages/Gangguan/Table_12.vue
View File

@ -188,7 +188,7 @@ const filterData = (params: any) => {
refetch({
dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
posko: posko ? posko.id : "",
posko: posko ? posko.id : 0,
idUid: uid ? uid.id : 0,
idUp3: up3 ? up3.id : 0,
})

2
src/components/Pages/Gangguan/Table_13.vue
View File

@ -191,7 +191,7 @@ const filterData = (params: any) => {
refetch({
dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
dateTo: dateValue[1]? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
posko: posko ? posko.id : "",
posko: posko ? posko.id : 0,
idUid: uid ? uid.id :0,
idUp3: up3? up3.id:0,
})

2
src/components/Pages/Gangguan/Table_14.vue
View File

@ -158,7 +158,7 @@ const filterData = (params: any) => {
refetch({
dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
posko: posko ? posko.id : "",
posko: posko ? posko.id : 0,
idUid: uid ? uid.id : 0,
idUp3: up3 ? up3.id : 0,
})

2
src/components/Pages/Gangguan/Table_15.vue
View File

@ -124,7 +124,7 @@ const filterData = (params: any) => {
refetch({
dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
dateTo: dateValue[1]? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
posko: posko ? posko.id : "",
posko: posko ? posko.id : 0,
idUid: uid ? uid.id :0,
idUp3: up3? up3.id:0,
})

2
src/components/Pages/Gangguan/Table_16.vue
View File

@ -275,7 +275,7 @@ const filterData = (params: any) => {
refetch({
dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
posko: posko ? posko.id : "",
posko: posko ? posko.id : 0,
idUid: uid ? uid.id :0,
idUp3: up3? up3.id:0,
})

2
src/components/Pages/Gangguan/Table_17.vue
View File

@ -205,7 +205,7 @@ const filterData = (params: any) => {
refetch({
dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
posko: posko ? posko.id : "",
posko: posko ? posko.id : 0,
idUid: uid ? uid.id :0,
idUp3: up3? up3.id:0,
})

2
src/components/Pages/Gangguan/Table_18.vue
View File

@ -181,7 +181,7 @@ const filterData = (params: any) => {
refetch({
dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
posko: posko ? posko.id : "",
posko: posko ? posko.id : 0,
idUid: uid ? uid.id :0,
idUp3: up3? up3.id:0,
})

2
src/components/Pages/Gangguan/Table_19.vue
View File

@ -154,7 +154,7 @@ const filterData = (params: any) => {
refetch({
dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
posko: posko ? posko.id : "",
posko: posko ? posko.id : 0,
idUid: uid ? uid.id :0,
idUp3: up3? up3.id:0,
})

6
src/components/Pages/Gangguan/Table_2.vue
View File

@ -12,10 +12,10 @@
column-resizing-mode="widget">
<DxSelection mode="single" />
<DxPaging :page-size="5" :enabled="true" />
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20, 'all']" display-mode="full"
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full"
:show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
v-if="loading" v-model:visible="loading" :enabled="true" />
v-if="loading" v-model:visible.sync="loading" :enabled="true" />
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
<DxColumn css-class="custom-table-column" :width="50" alignment="center"
@ -240,7 +240,7 @@ const filterData = (params: any) => {
maxJmlLapor: maxJmlLapor ? maxJmlLapor : 1,
dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
posko: posko ? posko.id : "",
posko: posko ? posko.id : 0,
idUid: uid ? uid.id : 0,
idUp3: up3 ? up3.id : 0
})

2
src/components/Pages/Gangguan/Table_20.vue
View File

@ -159,7 +159,7 @@ const filterData = (params: any) => {
refetch({
dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
posko: posko ? posko.id : "",
posko: posko ? posko.id : 0,
idUid: uid ? uid.id :0,
idUp3: up3? up3.id:0,
})

4
src/components/Pages/Gangguan/Table_3.vue
View File

@ -11,7 +11,7 @@
:column-width="100" @exporting="" :allow-column-resizing="true" column-resizing-mode="widget">
<DxSelection mode="single" />
<DxPaging :page-size="5" :enabled="true" />
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20, 'all']" display-mode="full"
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full"
:show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
v-if="loading" v-model:visible="loading" :enabled="true" />
@ -75,7 +75,7 @@ const filterData = (params: any) => {
dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
minDurasiResponseTime : minTime ? minTime : 0,
maxDurasiResponseTime : maxTime ? maxTime : 1,
posko: posko ? posko.id : "",
posko: posko ? posko.id : 0,
idUid: uid ? uid.id : 0,
idUp3: up3 ? up3.id : 0
})

4
src/components/Pages/Gangguan/Table_4.vue
View File

@ -11,7 +11,7 @@
@exporting="" :allow-column-resizing="true" column-resizing-mode="widget">
<DxSelection mode="single" />
<DxPaging :page-size="5" :enabled="true" />
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20, 'all']" display-mode="full"
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full"
:show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
v-if="loading" v-model:visible="loading" :enabled="true" />
@ -75,7 +75,7 @@ const filterData = (params: any) => {
dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
minDurasiRecoveryTime: minDurasiRecoveryTime ? minDurasiRecoveryTime : 1,
maxDurasiRecoveryTime: maxDurasiRecoveryTime ? maxDurasiRecoveryTime : 1,
posko: posko ? posko.id : "",
posko: posko ? posko.id : 0,
idUid: uid ? uid.id : 0,
idUp3: up3 ? up3.id : 0
})

4
src/components/Pages/Gangguan/Table_5.vue
View File

@ -11,7 +11,7 @@
:column-width="100" @exporting="" :allow-column-resizing="true" column-resizing-mode="widget">
<DxSelection mode="single" />
<DxPaging :page-size="5" :enabled="true" />
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20, 'all']" display-mode="full"
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full"
:show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
v-if="loading" v-model:visible="loading" :enabled="true" />
@ -108,7 +108,7 @@ const filterData = (params: any) => {
refetch({
dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
posko: posko ? posko.id : "",
posko: posko ? posko.id : 0,
idUid: uid ? uid.id : 0,
idUp3: up3 ? up3.id : 0
})

4
src/components/Pages/Gangguan/Table_6.vue
View File

@ -11,7 +11,7 @@
:column-width="100" @exporting="" :allow-column-resizing="true" column-resizing-mode="widget">
<DxSelection mode="single" />
<DxPaging :page-size="5" :enabled="true" />
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20, 'all']" display-mode="full"
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full"
:show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
v-if="loading" v-model:visible="loading" :enabled="true"/>
@ -103,7 +103,7 @@ const filterData = (params: any) => {
refetch({
dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
posko: posko ? posko.id : "",
posko: posko ? posko.id : 0,
idUid: uid ? uid.id : 0,
idUp3: up3 ? up3.id : 0,
media : media ? media.id : "Twitter"

4
src/components/Pages/Gangguan/Table_7.vue
View File

@ -11,7 +11,7 @@
:column-width="100" @exporting="" :allow-column-resizing="true" column-resizing-mode="widget">
<DxSelection mode="single" />
<DxPaging :page-size="5" :enabled="true" />
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20, 'all']" display-mode="full"
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full"
:show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
v-if="loading" v-model:visible="loading" :enabled="true" />
@ -110,7 +110,7 @@ const filterData = (params: any) => {
refetch({
dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
posko: posko ? posko.id : "",
posko: posko ? posko.id : 0,
idUid: uid ? uid.id : 0,
idUp3: up3?.id ? up3.id : 0,
})

2
src/components/Pages/Gangguan/Table_8.vue
View File

@ -12,7 +12,7 @@
:allow-column-resizing="true" column-resizing-mode="widget">
<DxSelection mode="single" />
<DxPaging :page-size="5" :enabled="true" />
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20, 'all']" display-mode="full"
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full"
:show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
v-if="loading" v-model:visible="loading" :enabled="true" />

2
src/components/Pages/Gangguan/Table_9.vue
View File

@ -245,7 +245,7 @@ const filterData = (params: any) => {
refetch({
dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
posko: posko ? posko.id : "",
posko: posko ? posko.id : 0,
idUid: uid ? uid.id : 0,
idUp3: up3 ? up3.id : 0
})

5
src/components/Pages/Keluhan/Table_21.vue
View File

@ -5,15 +5,14 @@
}
" />
</Filters>
<div>
<div id="data">
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
:show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
@selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
:allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
<DxSelection mode="single" />
<DxPaging :page-size="5" :enabled="true" />
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20, 'all']" display-mode="full"
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full"
:show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
v-if="loading" v-model:visible="loading" :enabled="true" />

4
src/components/Pages/Keluhan/Table_22.vue
View File

@ -5,14 +5,14 @@
}
" />
</Filters>
<div>
<div id="data">
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
:show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
@selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
:allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
<DxSelection mode="single" />
<DxPaging :page-size="5" :enabled="true" />
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20, 'all']" display-mode="full"
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full"
:show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
v-if="loading" v-model:visible="loading" :enabled="true" />

4
src/components/Pages/Keluhan/Table_23.vue
View File

@ -5,14 +5,14 @@
}
" />
</Filters>
<div>
<div id="data">
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
:show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
@selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
:allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
<DxSelection mode="single" />
<DxPaging :page-size="5" :enabled="true" />
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20, 'all']" display-mode="full"
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full"
:show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
v-if="loading" v-model:visible="loading" :enabled="true" />

4
src/components/Pages/Keluhan/Table_24.vue
View File

@ -5,14 +5,14 @@
}
" />
</Filters>
<div>
<div id="data">
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
:show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
@selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
:allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
<DxSelection mode="single" />
<DxPaging :page-size="5" :enabled="true" />
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20, 'all']" display-mode="full"
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full"
:show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
v-if="loading" v-model:visible="loading" :enabled="true" />

4
src/components/Pages/Keluhan/Table_25.vue
View File

@ -5,14 +5,14 @@
}
" />
</Filters>
<div>
<div id="data">
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
:show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
@selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
:allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
<DxSelection mode="single" />
<DxPaging :page-size="5" :enabled="true" />
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20, 'all']" display-mode="full"
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full"
:show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
v-if="loading" v-model:visible="loading" :enabled="true" />

4
src/components/Pages/Keluhan/Table_26.vue
View File

@ -5,14 +5,14 @@
}
" />
</Filters>
<div>
<div id="data">
<DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
:row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
:column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
:word-wrap-enabled="true">
<DxSelection mode="single" />
<DxPaging :page-size="5" :enabled="true" />
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20, 'all']" display-mode="full"
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full"
:show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
v-if="loading" v-model:visible="loading" :enabled="true" />

4
src/components/Pages/Keluhan/Table_27.vue
View File

@ -5,14 +5,14 @@
}
" />
</Filters>
<div>
<div id="data">
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
:show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
@selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
:allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
<DxSelection mode="single" />
<DxPaging :page-size="5" :enabled="true" />
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20, 'all']" display-mode="full"
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full"
:show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
v-if="loading" v-model:visible="loading" :enabled="true" />

2
src/components/Pages/Keluhan/Table_30.vue
View File

@ -5,7 +5,7 @@
}
" />
</Filters>
<div>
<div id="data">
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
:show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
@selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"

2
src/components/Pages/Keluhan/Table_31.vue
View File

@ -5,7 +5,7 @@
}
" />
</Filters>
<div>
<div id="data">
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
:show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
@selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"

2
src/components/Pages/Keluhan/Table_35.vue
View File

@ -5,7 +5,7 @@
}
" />
</Filters>
<div>
<div id="data">
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
:show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
@selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"

105
src/components/Pages/Material/Table_68.vue
View File

@ -11,30 +11,35 @@
@exporting="" :allow-column-resizing="true" column-resizing-mode="widget">
<DxSelection mode="single" />
<DxPaging :page-size="5" :enabled="true" />
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20, 'all']" display-mode="full"
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full"
:show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
v-if="loading" v-model:visible="loading" :enabled="true" />
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
v-if="loading" v-model:visible="loading" :enabled="true" />
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
<DxColumn css-class="custom-table-column" :width="50" alignment="center"
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
<DxColumn css-class="custom-table-column" :width="50" alignment="center" data-field="" data-type="number"
caption="No" />
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field=""
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="nomo_gangguan"
caption="Nomor Gangguan" />
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field=""
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="nama_pelanggan"
caption="Nama Pelanggan" />
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="" caption="Isi Laporan" />
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field=""
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="isi_laporan"
caption="Isi Laporan" />
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="penyebab_gangguan"
caption="Penyebab Gangguan" />
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="" caption="Tgl Padam" />
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="waktu_padam"
caption="Tgl Padam" />
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="" caption="Tgl Nyala" />
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="" caption="Regu" />
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="regu" caption="Regu" />
<DxColumn css-class="custom-table-column" alignment="center" caption="Material Yang Dipakai">
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="" caption="Sumber" />
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="sumber"
caption="Sumber" />
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="" caption="Nama" />
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="" caption="Satuan" />
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="" caption="Vol" />
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="satuan"
caption="Satuan" />
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="volume"
caption="Vol" />
</DxColumn>
</DxDataGrid>
@ -42,19 +47,81 @@
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { useFiltersStore } from '@/stores/filters'
import { DxDataGrid } from 'devextreme-vue'
import { DxColumn, DxExport, DxLoadPanel, DxPager, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
import Filters from '@/components/Form/Filters.vue';
import { Type14 } from '@/components/Form/FiltersType';
import { useQuery } from '@vue/apollo-composable';
import gql from 'graphql-tag';
const position = { of: '#data' }
const showIndicator = ref(true)
const shading = ref(true)
const showPane = ref(true)
const loading = ref(false)
const filters = ref()
const filterData = (filters: any) => {
console.log(filters)
const data = ref<any[]>([])
const daftarGangguanDanMaterialDipakai = gql`
query DaftardaftarGangguanDanMaterialDipakai(
$dateFrom: Date!, $dateTo: Date!, $posko: String, $idUid: Int, $idUp3: Int
) {
daftarGangguanDanMaterialDipakai(
dateFrom: $dateFrom
dateTo: $dateTo
distribusi: $idUid
area: $idUp3
posko: $posko
) {
isi_laporan
nama_material
nama_pelanggan
nomor_gangguan
penyebab_gangguan
regu
satuan
sumber
volume
waktu_padam
}
}
`
const { onResult, onError, loading, refetch } = useQuery(daftarGangguanDanMaterialDipakai, {
dateFrom: new Date("2023-10-01").toISOString().slice(0, 10),
dateTo: new Date("2023-10-01").toISOString().slice(0, 10),
idUid: 0,
idUp3: 0,
posko: ''
})
const filterData = (params: any) => {
const dateValue = params.periode.split(' s/d ')
const { posko, idUid, idUp3 } = params
refetch({
dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
dateTo: dateValue[1]? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
idUid: idUid ? idUid.id : 0,
idUp3: idUp3 ? idUp3.id : 0,
posko: posko ? posko.id : "",
})
onResult((queryResult) => {
if (queryResult.data != undefined) {
queryResult.data.daftarGangguanDanMaterialDipakai.forEach((item: any) => {
data.value = [
...data.value,
{
...item
}
]
})
}
console.log(queryResult.data)
console.log(queryResult.loading)
console.log(queryResult.networkStatus)
})
onError((error) => {
console.log(error)
})
}
const filters = ref()
</script>

131
src/components/Pages/Material/Table_69.vue
View File

@ -1,29 +1,35 @@
<template>
<div>
<Filters @run-search="() => filterData(filters)" class="mb-4">
<Type14 @update:filters="(value) => {
filters = value
}
" />
</Filters>
<div id="data">
<DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
:row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="" :column-width="100"
@exporting="" :allow-column-resizing="true" column-resizing-mode="widget">
<DxSelection mode="single" />
<DxPaging :page-size="5" :enabled="true" />
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20, 'all']" display-mode="full"
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full"
:show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
v-if="loading" v-model:visible="loading" :enabled="true" />
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
v-if="loading" v-model:visible="loading" :enabled="true" />
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
<DxColumn css-class="custom-table-column" :width="50" alignment="center"
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
<DxColumn css-class="custom-table-column" :width="50" alignment="center" data-field="" data-type="number"
caption="No" />
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field=""
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="kode_material"
caption="Kode Material" />
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field=""
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="nama_material"
caption="Nama Material" />
<DxColumn css-class="custom-table-column" :width="120" alignment="center" data-field="" caption="Satuan" />
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field=""
<DxColumn css-class="custom-table-column" :width="120" alignment="center" data-field="satuan" caption="Satuan" />
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="sumber_material"
caption="Sumber Material" />
<DxColumn css-class="custom-table-column" alignment="center" caption="Tanggal">
<DxColumn v-for="i in 31" css-class="custom-table-column" :width="150" alignment="center" data-field=""
:caption="i" />
<DxColumn v-for="i in 31" :width="150" alignment="center" :data-field="`tgl${i}`" data-type="number"
:caption="i" css-class="custom-table-column" />
</DxColumn>
</DxDataGrid>
@ -31,21 +37,106 @@
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { useFiltersStore } from '@/stores/filters'
import { ref } from 'vue'
import { DxDataGrid } from 'devextreme-vue'
import { DxColumn, DxExport, DxLoadPanel, DxPager, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
import { Type14 } from '@/components/Form/FiltersType';
import Filters from '@/components/Form/Filters.vue';
import { useQuery } from '@vue/apollo-composable';
import gql from 'graphql-tag';
const position = { of: '#data' }
const showIndicator = ref(true)
const shading = ref(true)
const showPane = ref(true)
const loading = ref(false)
const data = ref<any[]>([])
onMounted(() => {
const filters = useFiltersStore()
const rekapitulasiPemakaianMaterial = gql`
query DaftarrekapitulasiPemakaianMaterial(
$dateFrom: Date!, $dateTo: Date!, $posko: String, $idUid: Int, $idUp3: Int
) {
rekapitulasiPemakaianMaterial(
dateFrom: $dateFrom
dateTo: $dateTo
distribusi: $idUid
area: $idUp3
posko: $posko
) {
kode_material
nama_material
satuan
sumber_material
tgl1
tgl10
tgl11
tgl12
tgl13
tgl14
tgl15
tgl16
tgl17
tgl18
tgl19
tgl2
tgl20
tgl21
tgl22
tgl23
tgl24
tgl25
tgl26
tgl27
tgl28
tgl29
tgl3
tgl30
tgl31
tgl4
tgl5
tgl6
tgl7
tgl8
tgl9
filters.setConfig({
type: 'type-14'
})
}
}
`
const { onResult, onError, loading, refetch } = useQuery(rekapitulasiPemakaianMaterial, {
dateFrom: new Date("2023-10-01").toISOString().slice(0, 10),
dateTo: new Date("2023-10-01").toISOString().slice(0, 10),
idUid: 0,
idUp3: 0,
posko: ''
})
const filterData = (params: any) => {
const dateValue = params.periode.split(' s/d ')
const { posko, idUid, idUp3 } = params
refetch({
dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
dateTo: dateValue[1]? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
idUid: idUid ? idUid.id : 0,
idUp3: idUp3 ? idUp3.id : 0,
posko: posko ? posko.id : "",
})
onResult((queryResult) => {
if (queryResult.data != undefined) {
queryResult.data.rekapitulasiPemakaianMaterial.forEach((item: any) => {
data.value = [
...data.value,
{
...item
}
]
})
}
console.log(queryResult.data)
console.log(queryResult.loading)
console.log(queryResult.networkStatus)
})
onError((error) => {
console.log(error)
})
}
const filters = ref()
</script>

174
src/components/Pages/Monalisa/Table_52.vue
View File

@ -6,32 +6,34 @@
" />
</Filters>
<div id="data">
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
:row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
:column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
:word-wrap-enabled="true">
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
:show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
@selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
:allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
<DxSelection mode="single" />
<DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
v-if="loading" v-model:visible="loading" :enabled="true" />
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
v-if="loading" v-model:visible="loading" :enabled="true" />
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
<DxColumnFixing :enabled="true" />
<DxColumn :width="170" alignment="center" data-field="nama_posko" caption="Nama Unit" css-class="custom-table-column" />
<DxColumn alignment="center" caption="Januari 2019" css-class="custom-table-column">
<DxColumn :width="120" alignment="center" data-field="keluhan_bulan_lalu" data-type="number" caption="Keluhan"
css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="gangguan_bulan_lalu" data-type="number" caption="Gangguan"
css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="nama_posko" caption="Nama Unit"
css-class="custom-table-column" />
<DxColumn alignment="center" :caption="`${getMonthName(bulanSekarang - 1)} ${tahunSekarang}`"
css-class="custom-table-column">
<DxColumn :width="120" alignment="center" data-field="keluhan_bulan_lalu" data-type="number"
caption="Keluhan" css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="gangguan_bulan_lalu" data-type="number"
caption="Gangguan" css-class="custom-table-column" />
<DxColumn alignment="center" caption="Informasi" css-class="custom-table-column">
<DxColumn :width="120" alignment="center" data-field="informasi_keluhan_bulan_lalu" data-type="number" caption="Keluhan"
css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="informasi_gangguan_bulan_lalu" data-type="number" caption="Gangguan"
css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="total_bulan_lalu" data-type="number" caption="Total"
css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="informasi_keluhan_bulan_lalu" data-type="number"
caption="Keluhan" css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="informasi_gangguan_bulan_lalu" data-type="number"
caption="Gangguan" css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="total_bulan_lalu" data-type="number"
caption="Total" css-class="custom-table-column" />
</DxColumn>
<DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jml"
@ -39,22 +41,22 @@
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
css-class="custom-table-column" />
</DxColumn>
<DxColumn alignment="center" caption="Total Komplain" css-class="custom-table-column" data-field="total_komplain_bulan_lalu"
data-type="number" />
<DxColumn alignment="center" caption="Total Komplain" css-class="custom-table-column"
data-field="total_komplain_bulan_lalu" data-type="number" />
</DxColumn>
<DxColumn alignment="center" caption="Januari 2020" css-class="custom-table-column">
<DxColumn :width="120" alignment="center" data-field="keluhan_bulan_ini" data-type="number" caption="Keluhan"
css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="keluhan_bulan_lalu" data-type="number" caption="Gangguan"
css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="keluhan_bulan_ini" data-type="number"
caption="Keluhan" css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="keluhan_bulan_lalu" data-type="number"
caption="Gangguan" css-class="custom-table-column" />
<DxColumn alignment="center" caption="Informasi" css-class="custom-table-column">
<DxColumn :width="120" alignment="center" data-field="informasi_keluhan_bulan_ini" data-type="number" caption="Keluhan"
css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="informasi_gangguan_bulan_ini" data-type="number" caption="Gangguan"
css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="total_bulan_ini" data-type="number" caption="Total"
css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="informasi_keluhan_bulan_ini" data-type="number"
caption="Keluhan" css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="informasi_gangguan_bulan_ini" data-type="number"
caption="Gangguan" css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="total_bulan_ini" data-type="number"
caption="Total" css-class="custom-table-column" />
</DxColumn>
<DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jml"
@ -62,26 +64,26 @@
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
css-class="custom-table-column" />
</DxColumn>
<DxColumn alignment="center" caption="Total Komplain" css-class="custom-table-column" data-field="total_komplain_bulan_ini"
data-type="number" />
<DxColumn alignment="center" caption="Total Komplain" css-class="custom-table-column"
data-field="total_komplain_bulan_ini" data-type="number" />
</DxColumn>
<DxColumn alignment="center" caption="Delta Penurunan" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="delta_penurunan_keluhan" data-type="number" caption="Keluhan"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="delta_penurunan_gangguan" data-type="number" caption="Gangguan"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="delta_penurunan_informasi" data-type="number" caption="Informasi"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="delta_penurunan_keluhan" data-type="number"
caption="Keluhan" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="delta_penurunan_gangguan" data-type="number"
caption="Gangguan" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="delta_penurunan_informasi" data-type="number"
caption="Informasi" css-class="custom-table-column" />
</DxColumn>
<DxColumn alignment="center" caption="% Penurunan YoY" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="persen_penurunan_keluhan" data-type="number" caption="Keluhan"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="persen_penurunan_gangguan" data-type="number" caption="Gangguan"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="persen_penurunan_informasi" data-type="number" caption="Informasi"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="persen_penurunan_total" data-type="number" caption="% Total"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="persen_penurunan_keluhan" data-type="number"
caption="Keluhan" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="persen_penurunan_gangguan" data-type="number"
caption="Gangguan" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="persen_penurunan_informasi" data-type="number"
caption="Informasi" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="persen_penurunan_total" data-type="number"
caption="% Total" css-class="custom-table-column" />
</DxColumn>
</DxDataGrid>
@ -101,6 +103,7 @@ import { saveAs } from 'file-saver'
import { Workbook } from 'exceljs'
import { useQuery } from '@vue/apollo-composable'
import gql from 'graphql-tag'
import { getMonthName } from '@/utils/texts'
const position = { of: '#data' }
const showIndicator = ref(true)
const shading = ref(true)
@ -108,6 +111,15 @@ const showPane = ref(true)
const data = ref<any[]>([])
const dataDetail = ref<any>()
const showDetail = ref(false)
const tahunSekarang = ref(new Date().getFullYear())
const bulanSekarang = ref(new Date().getMonth())
if (bulanSekarang.value - 1 == 0) {
let bulanLalu = 12
let tahunLalu = tahunSekarang.value - 1
} else {
let bulanLalu = bulanSekarang.value - 1
let tahunLalu = tahunSekarang.value
}
const onExporting = (e: any) => {
if (e.format === 'pdf') {
const doc = new jsPDF()
@ -137,8 +149,8 @@ const onExporting = (e: any) => {
}
}
const onSelectionChanged = ({ selectedRowsData }: any) => {
const data = selectedRowsData[0]
console.log(data)
const data = selectedRowsData[0]
console.log(data)
}
const penurunanJumlahKomplainBulanan = gql`
query DaftarpenurunanJumlahKomplainBulanan(
@ -181,42 +193,42 @@ const penurunanJumlahKomplainBulanan = gql`
}
`
const { onResult, onError, loading, refetch } = useQuery(penurunanJumlahKomplainBulanan, {
regional: '',
posko: '',
idUid: 0,
idUp3: 0,
bulan: 10,
tahun: 2023
regional: '',
posko: '',
idUid: 0,
idUp3: 0,
bulan: 10,
tahun: 2023
})
const filterData = (params: any) => {
const { regional, posko, idUid, idUp3, bulan, tahun } = params
const { regional, posko, idUid, idUp3, bulan, tahun } = params
refetch({
regional: regional,
posko: posko ? posko.id : "",
idUid: idUid ? idUid.id : 0,
idUp3: idUp3 ? idUp3.id : 0,
bulan: bulan ? bulan.id : 10,
tahun: bulan ? tahun.id : 2023
})
onResult((queryResult) => {
if (queryResult.data != undefined) {
queryResult.data.penurunanJumlahKomplainBulanan.forEach((item: any) => {
data.value = [
...data.value,
{
...item
}
]
})
}
console.log(queryResult.data)
console.log(queryResult.loading)
console.log(queryResult.networkStatus)
})
onError((error) => {
console.log(error)
})
refetch({
regional: regional,
posko: posko ? posko.id : "",
idUid: idUid ? idUid.id : 0,
idUp3: idUp3 ? idUp3.id : 0,
bulan: bulan ? bulan.id : 10,
tahun: bulan ? tahun.id : 2023
})
onResult((queryResult) => {
if (queryResult.data != undefined) {
queryResult.data.penurunanJumlahKomplainBulanan.forEach((item: any) => {
data.value = [
...data.value,
{
...item
}
]
})
}
console.log(queryResult.data)
console.log(queryResult.loading)
console.log(queryResult.networkStatus)
})
onError((error) => {
console.log(error)
})
}
const filters = ref()
</script>

3
src/components/Pages/Monalisa/Table_53.vue
View File

@ -71,6 +71,9 @@ const showPane = ref(true)
const data = ref<any[]>([])
const dataDetail = ref<any>()
const showDetail = ref(false)
const tahunSekarang = ref(new Date().getFullYear())
const bulanSekarang = ref(new Date().getMonth())
const tahunLalu = ref(tahunSekarang.value - 1)
const onExporting = (e: any) => {
if (e.format === 'pdf') {
const doc = new jsPDF()

2
src/components/Pages/PencarianData/Table_71.vue
View File

@ -11,7 +11,7 @@
@exporting="" :allow-column-resizing="true" column-resizing-mode="widget">
<DxSelection mode="single" />
<DxPaging :page-size="5" :enabled="true" />
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20, 'all']" display-mode="full"
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full"
:show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
v-if="loading" v-model:visible="loading" :enabled="true" />

198
src/components/SelectMulti.vue
View File

@ -1,107 +1,115 @@
<script setup lang="ts">
interface DataItem {
id: number;
name: string;
import { type PropType } from 'vue'
import Multiselect from '@vueform/multiselect'
interface Tags {
id: number
value: string,
label: string
}
import { ref, computed, onMounted } from 'vue'
import {
Combobox,
ComboboxInput,
ComboboxButton,
ComboboxOptions,
ComboboxOption,
TransitionRoot
} from '@headlessui/vue'
import { CheckIcon, ChevronUpDownIcon } from '@heroicons/vue/20/solid'
const props = defineProps({
defineProps({
placeholder: {
type: String,
default: ''
},
data: {
type: Array as () => DataItem[],
default: []
tags: {
type: Array as PropType<Tags[]>,
required: true
},
useLabel: {
type: Boolean,
default: false
},
label: {
type: String,
default: ''
}
})
const emit = defineEmits(["update:selected"])
const data = computed(() => [{ id: 0, name: props.placeholder }, ...props.data]);
let selected = ref<DataItem[]>([data.value[0]])
let query = ref('')
let filteredData = computed(() =>
query.value === ''
? data.value
: data.value.filter((item: DataItem) =>
item.name
.toLowerCase()
.replace(/\s+/g, '')
.includes(query.value.toLowerCase().replace(/\s+/g, ''))
)
)
const show = ref(false)
const removeJenis = (item: DataItem) => {
selected.value = selected.value.filter((i) => i.id !== item.id)
}
onMounted(() => {
})
</script>
<template>
<Combobox @update:modelValue="value => emit('update:selected', value)" v-model="selected" v-slot="{ open }" multiple>
<div class="relative mt-1">
<div
class="relative w-full cursor-default overflow-hidden rounded-lg bg-gray-200 text-left focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75 focus-visible:ring-offset-2 focus-visible:ring-offset-teal-300 sm:text-sm">
<ComboboxInput class="w-full border-none py-2 pl-3 pr-10 bg-gray-200 text-sm leading-5 text-gray-900 focus:ring-0"
:displayValue="(item: any) => (show || open ? '' : item.name)" @change="query = $event.target.value"
@click="show = true" @blur="show = false" defaultValue="" />
<ComboboxButton id="Test" class="absolute inset-y-0 right-0 flex items-center pr-2">
<ChevronUpDownIcon class="h-5 w-5 text-gray-400" aria-hidden="true" />
</ComboboxButton>
</div>
<span class="flex flex-wrap gap-2">
<span v-if="selected.length == 0" class="p-0.5">Empty</span>
<span v-for="item in selected" :key="item.id" class="inline-flex items-center rounded-md bg-blue-50 px-2 py-1 text-xs font-medium text-blue-700 ring-1 ring-inset ring-blue-700/10">
<span>{{ item.name }}</span>
<svg class="h-4 w-4 cursor-pointer" fill="none" stroke="currentColor" viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg" @click.stop.prevent="removeJenis(item)">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</span>
</span>
<TransitionRoot :show="show || open" leave="transition ease-in duration-100" leaveFrom="opacity-100"
leaveTo="opacity-0" @after-leave="query = ''">
<ComboboxOptions static
class="absolute mt-1 z-10 max-h-60 w-full overflow-auto rounded-md bg-gray-200 py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
<div v-if="filteredData.length === 0 && query !== ''"
class="relative cursor-default select-none py-2 px-4 text-gray-700">
Nothing found.
</div>
<ComboboxOption v-for="item in filteredData" as="template" :key="item.id" :value="item"
v-slot="{ selected, active }">
<li class="relative cursor-default select-none py-2 pl-10 pr-4" :class="{
'bg-teal-600 text-white': active,
'text-gray-900': !active
}">
<span class="block truncate" :class="{ 'font-medium': selected, 'font-normal': !selected }">
{{ item.name }}
</span>
<span v-if="selected" class="absolute inset-y-0 left-0 flex items-center pl-3"
:class="{ 'text-white': active, 'text-teal-600': !active }">
<CheckIcon class="h-5 w-5" aria-hidden="true" />
</span>
</li>
</ComboboxOption>
</ComboboxOptions>
</TransitionRoot>
</div>
</Combobox>
</template>
<div class="flex flex-col">
<Multiselect
mode="tags"
:placeholder="placeholder"
:close-on-select="false"
:searchable="true"
:create-option="true"
:options="tags"
:classes="{
container:
'relative py-[5px] mx-auto w-full flex items-center justify-end cursor-pointer rounded-lg bg-gray-200 text-left text-base leading-snug outline-none',
containerDisabled: 'cursor-default bg-gray-50',
containerOpen: 'rounded-b-none',
containerOpenTop: 'rounded-t-none',
containerActive: '',
wrapper:
'relative mx-auto w-full flex items-center justify-end box-border cursor-pointer outline-none',
singleLabel:
'flex items-center h-full max-w-full absolute left-0 top-0 pointer-events-none bg-transparent leading-snug pl-3.5 pr-16 box-border rtl:left-auto rtl:right-0 rtl:pl-0 rtl:pr-3.5',
singleLabelText: 'overflow-ellipsis overflow-hidden block whitespace-nowrap max-w-full',
multipleLabel:
'flex items-center h-full absolute left-0 top-0 pointer-events-none bg-transparent leading-snug pl-3.5 rtl:left-auto rtl:right-0 rtl:pl-0 rtl:pr-3.5',
search:
'w-full absolute inset-0 outline-none focus:ring-0 appearance-none box-border border-0 text-base font-sans bg-white rounded pl-3.5 rtl:pl-0 rtl:pr-3.5',
tags: 'flex-grow flex-shrink flex flex-wrap items-center mt-1 pl-2 min-w-0 rtl:pl-0 rtl:pr-2',
tag: 'bg-primary-500 text-white text-sm font-semibold py-0.5 pl-2 rounded mr-1 mb-1 flex items-center whitespace-nowrap min-w-0 rtl:pl-0 rtl:pr-2 rtl:mr-0 rtl:ml-1',
tagDisabled: 'pr-2 opacity-50 rtl:pl-2',
tagWrapper: 'whitespace-nowrap overflow-hidden overflow-ellipsis',
tagWrapperBreak: 'whitespace-normal break-all',
tagRemove:
'flex items-center justify-center p-1 mx-0.5 rounded-sm hover:bg-black hover:bg-opacity-10 group',
tagRemoveIcon:
'bg-multiselect-remove bg-center bg-no-repeat opacity-30 inline-block w-3 h-3 group-hover:opacity-60',
tagsSearchWrapper: 'inline-block relative mx-1 mb-1 flex-grow flex-shrink h-full',
tagsSearch:
' bg-gray-200 absolute inset-0 border-0 outline-none focus:ring-0 appearance-none p-0 text-base font-sans box-border w-full',
tagsSearchCopy: 'invisible whitespace-pre-wrap inline-block h-px',
placeholder:
'flex items-center text-sm h-full absolute left-0 top-0 pointer-events-none bg-transparent leading-snug pl-3.5 text-gray-400 rtl:left-auto rtl:right-0 rtl:pl-0 rtl:pr-3.5',
caret:
'bg-multiselect-caret bg-center bg-no-repeat w-2.5 h-4 py-px box-content mr-3.5 relative z-10 opacity-40 flex-shrink-0 flex-grow-0 transition-transform transform pointer-events-none rtl:mr-0 rtl:ml-3.5',
caretOpen: 'rotate-180 pointer-events-auto',
clear:
'pr-3.5 relative z-10 opacity-40 transition duration-300 flex-shrink-0 flex-grow-0 flex hover:opacity-80 rtl:pr-0 rtl:pl-3.5',
clearIcon:
'bg-multiselect-remove bg-center bg-no-repeat w-2.5 h-4 py-px box-content inline-block',
spinner:
'bg-multiselect-spinner bg-center bg-no-repeat w-4 h-4 z-10 mr-3.5 animate-spin flex-shrink-0 flex-grow-0 rtl:mr-0 rtl:ml-3.5',
infinite: 'flex items-center justify-center w-full',
infiniteSpinner:
'bg-multiselect-spinner bg-center bg-no-repeat w-4 h-4 z-10 animate-spin flex-shrink-0 flex-grow-0 m-3.5',
dropdown:
'max-h-60 absolute -left-px -right-px bottom-0 transform translate-y-full border border-gray-300 -mt-px overflow-y-scroll z-50 bg-white flex flex-col rounded-b',
dropdownTop: '-translate-y-full top-px bottom-auto rounded-b-none rounded-t',
dropdownHidden: 'hidden',
options: 'flex flex-col p-0 m-0 list-none',
optionsTop: '',
group: 'p-0 m-0',
groupLabel:
'flex text-sm box-border items-center justify-start text-left py-1 px-3 font-semibold bg-gray-200 cursor-default leading-normal',
groupLabelPointable: 'cursor-pointer',
groupLabelPointed: 'bg-gray-300 text-gray-700',
groupLabelSelected: 'bg-green-600 text-white',
groupLabelDisabled: 'bg-gray-100 text-gray-300 cursor-not-allowed',
groupLabelSelectedPointed: 'bg-green-600 text-white opacity-90',
groupLabelSelectedDisabled: 'text-green-100 bg-green-600 bg-opacity-50 cursor-not-allowed',
groupOptions: 'p-0 m-0',
option:
'flex items-center justify-start box-border text-left cursor-pointer text-base leading-snug py-2 px-3',
optionPointed: 'text-gray-800 bg-gray-100',
optionSelected: 'text-white bg-green-500',
optionDisabled: 'text-gray-300 cursor-not-allowed',
optionSelectedPointed: 'text-white bg-green-500 opacity-90',
optionSelectedDisabled: 'text-green-100 bg-green-500 bg-opacity-50 cursor-not-allowed',
noOptions: 'py-2 px-3 text-gray-600 bg-white text-left rtl:text-right',
noResults: 'py-2 px-3 text-gray-600 bg-white text-left rtl:text-right',
fakeInput:
'bg-transparent absolute left-0 right-0 -bottom-px w-full h-px border-0 p-0 appearance-none outline-none text-transparent',
assist: 'absolute -m-px w-px h-px overflow-hidden',
spacer: 'box-content'
}"
/>
</div>
</template>