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

Add splitRoutePath and getMonthName functions to utils/numbers.ts and texts.ts

Browse Source
This commit is contained in:
probdg
2024-02-12 11:01:41 +07:00
parent a1212ffa01
commit 1750dd33df
12 changed files with 259 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2,13 +2,55 @@
import Select from '@/components/Select.vue'
import DatePicker from '@/components/DatePicker.vue'
import InputWithSuffix from '../InputWithSuffix.vue';
import { selectedUid, selectedUp3Ulp,selectedUlp, fetchUid, itemsUid, itemsUp3, itemsUlp } from './reference';
import { onMounted, ref } from 'vue';
const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah';
const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan';
const ulpPlaceholder = 'Semua Unit Layanan Pelanggan';
const uppp = ref({ id: 0, name: up3Placeholder });
const uid = ref({ id: 0, name: uidPlaceholder });
const ulp = ref({ id: 0, name: ulpPlaceholder });
const emit = defineEmits(['update:filters'])
const data = ref({
uid: uid.value,
up3: uppp.value,
posko: ulp.value,
periode: ''
})
const setUid = (value: any) => {
uid.value = value;
selectedUid(value);
uppp.value = { id: 0, name: up3Placeholder };
data.value.uid = value;
};
const setUp3 = (value: any) => {
uppp.value = value;
selectedUp3Ulp(value);
ulp.value = { id: 0, name: ulpPlaceholder };
data.value.up3 = value;
};
const setUlp = (value: any) => {
ulp.value = value;
selectedUlp(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">Unit Induk Distribusi/Wilayah:</label>
<Select placeholder="Semua Unit Induk Distribusi/Wilayah"/>
<Select
@update:selected="setUid($event)"
:data="itemsUid"
:placeholder="uidPlaceholder"
/>
</div>
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
@ -16,7 +58,11 @@
>Unit Pelaksanaan Pelayanan Pelanggan:</label
>
<Select placeholder="Semua Unit Pelaksanaan Pelayanan Pelanggan" />
<Select
@update:selected="setUp3($event)"
:data="itemsUp3"
:placeholder="up3Placeholder"
/>
</div>
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
@ -24,7 +70,11 @@
>Unit Layanan Pelanggan:</label
>
<Select placeholder="Semua Unit Layanan Pelanggan" />
<Select
@update:selected="setUlp($event)"
:data="itemsUlp"
:placeholder="ulpPlaceholder"
/>
</div>
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">

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

@ -1,44 +1,82 @@
<script setup lang="ts">
import Select from '@/components/Select.vue'
import DatePicker from '@/components/DatePicker.vue'
import InlineRadioGroup from '@/components/Form/InlineRadioGroup.vue'
import Select from '@/components/Select.vue'
import DatePicker from '@/components/DatePicker.vue'
import InlineRadioGroup from '@/components/Form/InlineRadioGroup.vue'
import { selectedUid, selectedUp3Ulp, selectedUlp, fetchUid, itemsUid, itemsUp3, itemsUlp } from './reference';
import { onMounted, ref } from 'vue';
const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah';
const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan';
const ulpPlaceholder = 'Semua Unit Layanan Pelanggan';
const uppp = ref({ id: 0, name: up3Placeholder });
const uid = ref({ id: 0, name: uidPlaceholder });
const ulp = ref({ id: 0, name: ulpPlaceholder });
const emit = defineEmits(['update:filters'])
const data = ref({
uid: uid.value,
up3: uppp.value,
posko: ulp.value,
periode: '',
group: 1
})
const setUid = (value: any) => {
uid.value = value;
selectedUid(value);
uppp.value = { id: 0, name: up3Placeholder };
data.value.uid = value;
};
const setUp3 = (value: any) => {
uppp.value = value;
selectedUp3Ulp(value);
ulp.value = { id: 0, name: ulpPlaceholder };
data.value.up3 = value;
};
const setUlp = (value: any) => {
ulp.value = value;
selectedUlp(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">Unit Induk Distribusi/Wilayah:</label>
<Select placeholder="Semua Unit Induk Distribusi/Wilayah"/>
<Select @update:selected="setUid($event)" :data="itemsUid" :placeholder="uidPlaceholder" />
</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 placeholder="Semua Unit Pelaksanaan Pelayanan Pelanggan" />
<Select @update:selected="setUp3($event)" :data="itemsUp3" :placeholder="up3Placeholder" />
</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 Layanan Pelanggan:</label
>
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Layanan Pelanggan:</label>
<Select placeholder="Semua Unit Layanan Pelanggan" />
<Select @update:selected="setUlp($event)" :data="itemsUlp" :placeholder="ulpPlaceholder" />
</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 @update:date-value="(value) => {
data.periode = value
}
<DatePicker @update:date-value="(value) => {
data.periode = value
}
" />
</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">Group By Kode Unit Distribusi:</label>
<InlineRadioGroup :radio-items="[{id: 1, title: 'Tidak', checked: true}, {id: 2, title: 'Ya, Grupkan'}]" />
<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' }]" />
</div>
</template>

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

@ -1,24 +1,43 @@
<script setup lang="ts">
import Select from '@/components/Select.vue'
import { selectedUid, selectedUp3Ulp,fetchRegional, fetchUid, itemsUid, itemsUp3, itemsUlp,itemsRegional ,months, years} from './reference';
import { selectedUid, selectedUp3Ulp,fetchRegional, itemsUid, itemsUp3, itemsUlp,itemsRegional ,months, years} from './reference';
import { onMounted, ref } from 'vue';
import { getMonthName } from '@/utils/texts';
const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah';
const up3Placholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan';
const ulpPlaceholder = 'Semua Unit Layanan Pelanggan';
const regionalPlaceholder = 'Semua Regional';
const bulanPlaceholder = 'Pilih Bulan';
const tahunPlaceholder = 'Pilih Tahun';
const bulanPlaceholder = getMonthName(new Date().getMonth());
const tahunPlaceholder = new Date().getFullYear().toString();
const bulanSelected = new Date().getMonth();
const tahunSelected = new Date().getFullYear();
const uppp = ref({ id: 0, name: up3Placholder });
const uid = ref({ id: 0, name: uidPlaceholder });
const ulp = ref({ id: 0, name: ulpPlaceholder });
const bulan = ref({ id: bulanSelected, name: bulanPlaceholder });
const tahun = ref({ id: tahunSelected, name: tahunPlaceholder });
const regional = ref({ id: 0, name: regionalPlaceholder });
const emit = defineEmits(['update:filters'])
// Find index of January
const bulanIndex = months.findIndex(month => month.id === bulan.value.id);
// Remove January if found
if (bulanIndex !== -1) {
months.splice(bulanIndex, 1);
}
// Find index of current year
const tahunIndex = years.value.findIndex(year => year.id === tahun.value.id);
if (tahunIndex !== -1) {
years.value.splice(tahunIndex, 1);
}
const data = ref({
regional: regional.value,
uid: uid.value,
up3: uppp.value,
posko: ulp.value,
periode: ''
periode: '',
bulan : bulan.value,
tahun : tahun.value
})
const setRegional = (value: any) => {
@ -47,6 +66,16 @@ const setUlp = (value: any) => {
selectedUp3Ulp(value);
data.value.posko = value;
};
const setMonth = (value: any) => {
bulan.value = value;
data.value.bulan = value;
console.log(data.value)
};
const setYear = (value: any) => {
tahun.value = value;
data.value.tahun = value;
};
onMounted(() => {
emit('update:filters', data.value)
fetchRegional()
@ -82,8 +111,8 @@ onMounted(() => {
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Periode</label>
<div class="grid grid-cols-2 gap-x-2">
<Select :data="months" :placeholder="bulanPlaceholder" />
<Select :data="years" :placeholder="tahunPlaceholder" />
<Select @update:selected="setMonth($event)" :data="months" :placeholder="bulanPlaceholder" />
<Select @update:selected="setYear($event)" :data="years" :placeholder="tahunPlaceholder" />
</div>
</div>
</template>

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

@ -18,8 +18,8 @@ const data = ref({
up3: up3.value,
posko: posko.value,
periode: '',
minDurasiRecoveryTime: 1,
maxDurasiRecoveryTime: 1
minTime: 1,
maxTime: 1
})
const setUid = (value: any) => {
uid.value = value
@ -57,25 +57,30 @@ const triggerInput = ref(false)
const changeDuration = (value: any) => {
if (value.id === 0) {
console.log('Durasi Menit')
data.value.minDurasiRecoveryTime = 0
data.value.maxDurasiRecoveryTime = 5
data.value.minTime = 0
data.value.maxTime = 5
triggerInput.value = false
} else if (value.id === 1) {
data.value.minDurasiRecoveryTime = 0
data.value.maxDurasiRecoveryTime = 45
data.value.minTime = 0
data.value.maxTime = 45
console.log(data.value)
console.log('Dibawah / Sesuai SLA (<= 45 menit)')
triggerInput.value = true
} else {
data.value.minDurasiRecoveryTime = 46
data.value.maxDurasiRecoveryTime = 99999 * 60 * 24
data.value.minTime = 46
data.value.maxTime = 99999 * 60 * 24
triggerInput.value = true
console.log('Melebihi SLA (> 45 menit)')
}
console.log('value', data.value);
}
watch(() => data.value, () => {
emit('update:filters', data.value)
}, { deep: true })
watch(data, (newValue) => {
console.log('newValue', newValue.maxTime)
emit('update:filters', newValue)
})
onMounted(() => {
emit('update:filters', data.value)
fetchUid()
@ -127,26 +132,32 @@ onMounted(() => {
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Durasi:</label>
<div class="flex flex-col gap-y-1">
<Select @update:selected="changeDuration($event)" :data="sla" placeholder="Durasi Menit" />
<Select
@update:selected="changeDuration($event)"
:data="sla" placeholder="Durasi Menit" />
<div class="grid grid-flow-col auto-cols-auto gap-x-1.5">
<div class="grid grid-flow-col auto-cols-auto gap-x-1.5" >
<InputWithSuffix
@update:minute-value="
:default-value="`${data.minTime} Menit`"
:disabled="triggerInput"
@update:minuteValue="
(value :any)=> {
data.minDurasiRecoveryTime =value
data.minTime =value
}
"
@value="data.minDurasiRecoveryTime"
:disabled=triggerInput />
/>
<small class="flex items-center">s/d</small>
<InputWithSuffix
@update:minute-value="
:default-value="`${data.maxTime} Menit`"
@update:minuteValue="
(value :any)=> {
data.maxDurasiRecoveryTime = value
data.maxTime = value
}
"
@value="data.maxDurasiRecoveryTime"
:disabled="triggerInput" />
:disabled="triggerInput"
/>
</div>
</div>
</div>

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

@ -6,11 +6,9 @@ import { onMounted, ref, watch } from 'vue'
import {
selectedUid,
selectedUp3Posko,
selectedPosko,
fetchUid,
itemsUid,
itemsUp3,
itemsPosko
} from './reference'
const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah'
@ -45,12 +43,6 @@ const setUp3 = (value: any) => {
data.value.up3 = value
}
const setPosko = (value: any) => {
posko.value = value
selectedPosko(value)
data.value.posko = value
}
onMounted(() => {
emit('update:filters', data.value)
fetchUid()

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

@ -23,12 +23,14 @@ const months = [
{ id: 11, name: 'November' },
{ id: 12, name: 'Desember' },
]
// create 4 year back array
const year = new Date().getFullYear();
const years = ref<Item[]>([]);
let years = ref<Item[]>([]);
for (let i = 0; i < 5; i++) {
years.value.push({ id: year - i, name: year - i })
}
const timeout = ref()
const itemsUid = ref<Item[]>([]);
const itemsUp3 = ref<Item[]>([]);

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

@ -3,8 +3,9 @@
<fieldset>
<div class="space-y-3 sm:flex sm:items-center sm:space-y-0 sm:space-x-5">
<div v-for="item in radioItems" :key="item.id" class="flex items-center">
<input :id="`${item.id}`" type="radio" name="radio"
:checked="item.hasOwnProperty('checked') && item.checked === true"
<input v-model="groupValue"
type="radio" name="radio"
:checked="item.checked" @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>
@ -15,7 +16,7 @@
</template>
<script setup lang="ts">
import { type PropType } from 'vue'
import { ref, watch, type PropType, onMounted } from 'vue'
interface Item {
id: number;
@ -23,10 +24,24 @@ interface Item {
checked?: boolean;
}
defineProps({
const onChange= (e:Item) => {
itemSelected.value = e
emit('update:groupValue', e)
}
const props = defineProps({
radioItems: {
type: Array as PropType<Item[]>,
required: true
}
})
const itemSelected = ref(props.radioItems[0])
const emit = defineEmits(['update:groupValue'])
const groupValue = ref(1)
onMounted(() => {
itemSelected.value = props.radioItems[0]
})
</script>

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

@ -1,5 +1,5 @@
<script setup lang="ts">
import { ref, watch } from 'vue'
import { computed, ref, watch } from 'vue'
const props = defineProps({
placeholder: {
@ -14,35 +14,42 @@ const props = defineProps({
type: Boolean,
default: false
},
value: {
type: Number,
default: ''
defaultValue: {
type: String,
default: '1 Menit'
}
})
const emit = defineEmits(['update:menitValue'])
const menitValue = ref(1)
const menitValue = ref<any>(props.defaultValue)
watch(menitValue, (newValue) => {
console.log('newValue', newValue)
emit('update:menitValue', newValue)
})
watch(() => props.defaultValue, (newValue) => {
menitValue.value = newValue
})
</script>
<template>
<div class="relative w-full overflow-hidden rounded-lg bg-gray-200">
<div
class="relative w-full overflow-hidden rounded-lg bg-gray-200">
<input
v-model="menitValue"
autocomplete="off"
type="text"
:placeholder="placeholder"
:disabled="disabled"
:readonly="readonly"
inputmode="numeric"
pattern="[0-9.]*"
defaultValue="1"
:disabled="disabled"
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"
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>

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

@ -67,13 +67,13 @@ const shading = ref(true);
const showPane = ref(true);
const data = ref<any[]>([])
const filterData = (params: any) => {
const { minDurasiResponseTime, maxDurasiResponseTime, posko, uid, up3 } = params;
const { minTime, maxTime, 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),
minDurasiResponseTime : minDurasiResponseTime ? minDurasiResponseTime : 1,
maxDurasiResponseTime : maxDurasiResponseTime ? maxDurasiResponseTime : 1,
minDurasiResponseTime : minTime ? minTime : 0,
maxDurasiResponseTime : maxTime ? maxTime : 1,
posko: posko ? posko.id : "",
idUid: uid ? uid.id : 0,
idUp3: up3 ? up3.id : 0

31
src/components/Pages/Monalisa/Table_36.vue
View File

@ -24,17 +24,17 @@
<DxColumn alignment="center" caption="Jumlah Kali Gangguan" css-class="custom-table-column">
<DxColumn alignment="center" caption="MoM" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="jumlah_bulan" data-type="number"
caption="Des 2018" css-class="custom-table-column" />
:caption="`${getMonthName(bulanSekarang)} ${tahunLalu}`" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="jumlah_bulan_n_1" data-type="number"
caption="Des 2019" css-class="custom-table-column" />
:caption="`${getMonthName(bulanSekarang)} ${tahunSekarang}`" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="persen_bulan" data-type="number" caption="%"
css-class="custom-table-column" />
</DxColumn>
<DxColumn alignment="center" caption="YoY" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="jumlah_tahun" data-type="number"
caption="s.d Jan 2018" css-class="custom-table-column" />
:caption="`s.d ${ getMonthName(bulanSekarang)} ${tahunLalu}`" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="jumlah_tahun_n_1" data-type="number"
caption="Jan 2019" css-class="custom-table-column" />
:caption="`s.d ${getMonthName(bulanSekarang)} ${tahunSekarang}`" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="persen_tahun" data-type="number" caption="%"
css-class="custom-table-column" />
</DxColumn>
@ -46,9 +46,9 @@
<script setup lang="ts">
import Filters from '@/components/Form/Filters.vue'
import Type2 from '@/components/Form/FiltersType/Type2.vue'
import { ref, } from 'vue'
import { onMounted, ref, } from 'vue'
import { DxDataGrid } from 'devextreme-vue'
import { getMonthName } from '@/utils/texts'
import {
DxColumn,
DxColumnFixing,
@ -104,6 +104,9 @@ const onExporting = (e: any) => {
e.cancel = true
}
}
const tahunSekarang = ref(new Date().getFullYear())
const bulanSekarang = ref(new Date().getMonth())
const tahunLalu = ref(tahunSekarang.value - 1)
const MONALISAJUMLAHKALIGANGGUAN = gql`
query DaftarMonalisaJumlahKaliGangguan(
$regional: String
@ -136,20 +139,22 @@ const { onResult, onError, loading, refetch } = useQuery(MONALISAJUMLAHKALIGANGG
posko: '',
idUid: 0,
idUp3: 0,
bulan: 10,
tahun: 2023
bulan: bulanSekarang.value,
tahun: tahunSekarang.value
})
const filterData = (params: any) => {
const {regional, posko, idUid, idUp3, bulan, tahun} = params;
bulanSekarang.value = bulan.id;
tahunSekarang.value = tahun.id;
tahunLalu.value = tahun.id - 1;
refetch({
regional: regional,
posko: posko,
idUid: idUid ? idUid : 0,
idUp3: idUp3 ? idUp3 : 0,
bulan: bulan ? bulan : 10,
tahun: bulan ? tahun : 2023
bulan: bulan ? bulan : bulanSekarang.value,
tahun: bulan ? tahun : tahunSekarang.value
})
onResult((queryResult) => {
if (queryResult.data != undefined) {
@ -167,6 +172,8 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
const data = selectedRowsData[0]
console.log(data)
}
onMounted(() => {
console.log(bulanSekarang.value)
});
const filters= ref();
</script>

17
src/utils/numbers.ts
View File

@ -0,0 +1,17 @@
const splitRoutePath = (routePath: string): string[] => {
const routeParts = routePath.split('/').filter((part) => part !== '')
const routeArray: string[] = []
let currentRoute = ''
for (const part of routeParts) {
currentRoute += `/${part}`
routeArray.push(currentRoute)
}
return routeArray
}
export {
splitRoutePath
}

10
src/utils/texts.ts
View File

@ -11,7 +11,13 @@ const splitRoutePath = (routePath: string): string[] => {
return routeArray
}
const getMonthName = (monthNumber :number)=> {
const months = [
'Januari', 'Februari', 'Maret', 'April', 'Mei', 'Juni',
'Juli', 'Agustus', 'September', 'Oktober', 'November', 'Desember'
];
return months[monthNumber - 1] || '';
}
export {
splitRoutePath
splitRoutePath,getMonthName
}