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

<script setup lang="ts">
import Select from '@/components/Select.vue'
import DatePicker from '@/components/DatePicker.vue'
import InputReadonly from '@/components/Form/InputReadonly.vue'
import {
  selectedUid,
  selectedUp3Posko,
  selectedPosko,
  itemsUid,
  itemsUp3,
  itemsPosko,
  fetchUid
} from './reference'
import { onMounted, ref, watch } from 'vue'
import { readDataJson } from '@/utils/storage'

const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah'
const up3placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan'
const poskoPlaceholder = 'Semua Posko'
const props = defineProps({
  uid: {
    type: Object,
    default: { id: 0, name: uidPlaceholder }
  },
  up3: {
    type: Object,
    default: { id: 0, name: up3placeholder }
  },
  posko: {
    type: Object,
    default: { id: 0, name: poskoPlaceholder }
  },
  periode: {
    type: String,
    default: `${new Date().getDate().toString().length == 1 ? `0${new Date().getDate()}` : new Date().getDate()}-${(new Date().getMonth() + 1).toString().length == 1 ? `0${new Date().getMonth() + 1}` : new Date().getMonth() + 1}-${new Date().getFullYear()} s/d ${new Date().getDate().toString().length == 1 ? `0${new Date().getDate()}` : new Date().getDate()}-${(new Date().getMonth() + 1).toString().length == 1 ? `0${new Date().getMonth() + 1}` : new Date().getMonth() + 1}-${new Date().getFullYear()}`
  },
  showPosko: {
    type: Boolean,
    default: true
  }
})

const renderUp3 = ref(false)
const renderPosko = ref(false)

const emit = defineEmits(['update:filters'])
const data = ref({
  uid: props.uid,
  up3: props.up3,
  posko: props.posko,
  periode: props.periode
})

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

const setUid = (value: any) => {
  selectedUid(value)
  data.value = {
    ...data.value,
    uid: value,
    up3: { id: 0, name: up3placeholder },
    posko: { id: 0, name: poskoPlaceholder }
  }
  data.value.uid = value

  renderUp3.value = true
  renderPosko.value = true
  setTimeout(() => {
    renderUp3.value = false
    renderPosko.value = false
  }, 100)
}

const setUp3 = (value: any) => {
  selectedUp3Posko(value)
  data.value = {
    ...data.value,
    up3: value,
    posko: { id: 0, name: poskoPlaceholder }
  }

  renderPosko.value = true
  setTimeout(() => {
    renderPosko.value = false
  }, 100)
}

const setPosko = (value: any) => {
  selectedPosko(value)
  data.value = {
    ...data.value,
    posko: value
  }
}

const presetUID: any = ref(null)
const presetUP3: any = ref(null)
const presetPosko: any = ref(null)
const filterPresets: any = ref()

const keys: any = ['uid', 'up3', 'posko']
const presetValues: any = [presetUID, presetUP3, presetPosko]
const setFunctions: any = [setUid, setUp3, setPosko]

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]
        setFunctions[index](filterPresets.value[key])
      }
    })
  } else {
    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">Unit Induk Distribusi/Wilayah:</label>

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

      <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"
          :selected="up3"
          :placeholder="up3placeholder"
        />

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

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

    <div class="flex flex-col flex-1 space-y-2" v-if="showPosko">
      <label class="filter-input-label">Posko:</label>

      <div v-if="!presetPosko">
        <Select
          v-if="renderPosko"
          @update:selected="setPosko($event)"
          :data="itemsPosko"
          :selected="posko"
          :placeholder="poskoPlaceholder"
        />

        <Select
          v-else
          @update:selected="setPosko($event)"
          :data="itemsPosko"
          :selected="posko"
          :placeholder="poskoPlaceholder"
        />
      </div>

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

    <div class="flex flex-col flex-1 space-y-2">
      <label class="filter-input-label">Periode Tanggal:</label>
      <DatePicker @update:date-value="(value) => (data.periode = value)" />
    </div>
  </div>
</template>