apkt-eis/src/components/Form/FiltersType/Type2.vue

<script setup lang="ts">
import Select from '@/components/Select.vue'
import InputReadonly from '@/components/Form/InputReadonly.vue'
import {
  selectedUid,
  selectedUp3Ulp,
  fetchRegional,
  fetchUid,
  itemsUid,
  itemsUp3,
  itemsUlp,
  itemsRegional,
  months
} from './reference'
import { onMounted, ref, watch } from 'vue'
import { getMonthName } from '@/utils/texts'
import { readDataJson } from '@/utils/storage'

const renderUid = ref(false)
const renderUp3 = ref(false)
const renderUlp = ref(false)

const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah'
const up3Placholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan'
const ulpPlaceholder = 'Semua Unit Layanan Pelanggan'
const regionalPlaceholder = 'Semua Regional'
const bulanPlaceholder = getMonthName(new Date().getMonth() + 1)
const tahunPlaceholder = new Date().getFullYear().toString()
const bulanSelected = new Date().getMonth() + 1
const tahunSelected = new Date().getFullYear()
const bulan = ref({ id: bulanSelected, name: bulanPlaceholder })
const tahun = ref({ id: tahunSelected, name: tahunPlaceholder })
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 year = new Date().getFullYear()
const years = ref<any>([])
for (let i = 0; i < 5; i++) {
  if (i == 0) {
    years.value.push({ id: year, name: year })
  }
  years.value.push({ id: year - i, name: year - i })
}

const tahunIndex = years.value.findIndex((year: any) => year.id === tahun.value.id)
if (tahunIndex !== -1) {
  years.value.splice(tahunIndex, 1)
}

const data = ref({
  regional: { id: 0, name: regionalPlaceholder },
  uid: { id: 0, name: uidPlaceholder },
  up3: { id: 0, name: up3Placholder },
  ulp: { id: 0, name: ulpPlaceholder },
  periode: '',
  bulan: bulan.value,
  tahun: tahun.value
})

watch(data, (value) => {
  emit('update:filters', value)
})

const setRegional = (value: any) => {
  if (!presetUID.value) {
    fetchUid()
    selectedUid(value)
  }

  data.value = {
    ...data.value,
    regional: value
  }

  renderUid.value = true
  renderUp3.value = true
  renderUlp.value = true
  setTimeout(() => {
    renderUid.value = false
    renderUp3.value = false
    renderUlp.value = false
  }, 200)
}

const setUid = (value: any) => {
  selectedUid(value)
  data.value = {
    ...data.value,
    uid: value,
    up3: { id: 0, name: up3Placholder },
    ulp: { id: 0, name: ulpPlaceholder }
  }

  renderUp3.value = true
  renderUlp.value = true
  setTimeout(() => {
    renderUp3.value = false
    renderUlp.value = false
  }, 200)
}

const setUp3 = (value: any) => {
  selectedUp3Ulp(value)
  data.value = {
    ...data.value,
    up3: value,
    ulp: { id: 0, name: ulpPlaceholder }
  }

  renderUlp.value = true
  setTimeout(() => {
    renderUlp.value = false
  }, 200)
}

const setUlp = (value: any) => {
  selectedUp3Ulp(value)
  data.value = {
    ...data.value,
    ulp: 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
}

const presetRegional: any = ref(null)
const presetUID: any = ref(null)
const presetUP3: any = ref(null)
const presetULP: any = ref(null)
const filterPresets: any = ref()

const keys: any = ['regional', 'uid', 'up3', 'ulp']
const presetValues: any = [presetRegional, presetUID, presetUP3, presetULP]
const setFunctions: any = [setRegional, setUid, setUp3, setUlp]

onMounted(() => {
  filterPresets.value = readDataJson('filterPresets') || null

  if (filterPresets.value) {
    keys.forEach((key: any, index: any) => {
      if (filterPresets.value[key]) {
        presetValues[index].value = filterPresets.value[key]

        if (key !== 'regional' || key !== 'uid') {
          setFunctions[index](filterPresets.value[key])
        }
      }
    })
  }

  fetchRegional()
  fetchUid()

  emit('update:filters', data.value)
})
</script>

<template>
  <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
    <div class="flex flex-col flex-1 space-y-2">
      <label class="filter-input-label">Regional:</label>

      <Select
        v-if="!presetRegional"
        @update:selected="setRegional($event)"
        :data="itemsRegional"
        :placeholder="regionalPlaceholder"
      />

      <InputReadonly v-if="presetRegional" :value="presetRegional.name" />
    </div>

    <div class="flex flex-col flex-1 space-y-2">
      <label class="filter-input-label">Unit Induk Distribusi/Wilayah:</label>

      <div v-if="!presetUID">
        <Select
          v-if="renderUid"
          @update:selected="setUid($event)"
          :data="itemsUid"
          :placeholder="uidPlaceholder"
        />

        <Select
          v-else
          @update:selected="setUid($event)"
          :data="itemsUid"
          :placeholder="uidPlaceholder"
        />
      </div>

      <InputReadonly v-if="presetUID" :value="presetUID.name" />
    </div>

    <div class="flex flex-col flex-1 space-y-2">
      <label class="filter-input-label">Unit Pelaksanaan Pelayanan Pelanggan:</label>

      <div v-if="!presetUP3">
        <Select
          v-if="renderUp3"
          @update:selected="setUp3($event)"
          :data="itemsUp3"
          :placeholder="up3Placholder"
        />

        <Select
          v-else
          @update:selected="setUp3($event)"
          :data="itemsUp3"
          :placeholder="up3Placholder"
        />
      </div>

      <InputReadonly v-if="presetUP3" :value="presetUP3.name" />
    </div>

    <div class="flex flex-col flex-1 space-y-2">
      <label class="filter-input-label">Unit Layanan Pelanggan:</label>

      <div v-if="!presetULP">
        <Select
          v-if="renderUlp"
          @update:selected="setUlp($event)"
          :data="itemsUlp"
          :placeholder="ulpPlaceholder"
        />

        <Select
          v-else
          @update:selected="setUlp($event)"
          :data="itemsUlp"
          :placeholder="ulpPlaceholder"
        />
      </div>

      <InputReadonly v-if="presetULP" :value="presetULP.name" />
    </div>

    <div class="flex flex-col flex-1 space-y-2">
      <label class="filter-input-label">Periode</label>

      <div class="grid grid-cols-2 gap-x-2">
        <Select
          @update:selected="setMonth($event)"
          :data="months"
          :placeholder="bulanPlaceholder"
        />
        <Select @update:selected="setYear($event)" :data="years" />
      </div>
    </div>
  </div>
</template>