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

<script setup lang="ts">
interface SlaOption {
  id: number
  name: string
  min: string
  max: string
}

import InputReadonly from '@/components/Form/InputReadonly.vue'
import { onMounted, ref, watch } from 'vue'
import {
  selectedUid,
  selectedUp3Ulp,
  selectedUlp,
  fetchUid,
  itemsUid,
  itemsUp3,
  itemsUlp
} from './reference'
import Select from '@/components/Select.vue'
import DatePicker from '@/components/DatePicker.vue'
import InputWithSuffix from '@/components/Form/InputWithSuffix.vue'
import { readDataJson } from '@/utils/storage'

const props = defineProps({
  slaOptions: {
    type: Array as () => SlaOption[],
    default: [
      {
        id: 1,
        name: 'Dibawah  / Sesuai SLA (<= 45 menit)',
        min: '1',
        max: '45'
      },
      {
        id: 2,
        name: 'Melebihi SLA (> 45 menit)',
        min: '46',
        max: `${99999 * 60 * 24}`
      }
    ]
  }
})

const sla = props.slaOptions.map((item: any) => {
  return {
    id: item.id,
    name: item.name
  }
})

const totalMin = ref('1 Menit')
const totalMax = ref('5 Menit')
const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah'
const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan'
const ulpPlaceholder = 'Semua Unit Layanan Pelanggan'
const emit = defineEmits(['update:filters'])
const isHidden = ref(false)

const setDataMin = (value: any) => (totalMin.value = value)
const getDataMin = () => totalMin.value
const setDataMax = (value: any) => (totalMax.value = value)
const getDataMax = () => totalMax.value

const data = ref({
  uid: { id: 0, name: uidPlaceholder },
  up3: { id: 0, name: up3Placeholder },
  ulp: { id: 0, name: ulpPlaceholder },
  periode: '',
  minTime: getDataMin().split(' ')[0],
  maxTime: getDataMax().split(' ')[0]
})
watch(data, (value) => {
  emit('update:filters', value)
})

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

const setUid = (value: any) => {
  selectedUid(value)
  data.value = {
    ...data.value,
    uid: value,
    up3: { id: 0, name: up3Placeholder },
    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) => {
  selectedUlp(value)
  data.value = {
    ...data.value,
    ulp: value
  }
}

const setMin = (value: any) => {
  console.log(value)
  data.value.minTime = value
  setDataMin(value)
}
const setMax = (value: any) => {
  data.value.maxTime = value
  setDataMax(value)
}

const triggerInput = ref(false)
const changeDuration = (value: any) => {
  if (value.id === 0) {
    setMin('1')
    setMax('5')

    triggerInput.value = false
    isHidden.value = false
  } else if (value.id === 1) {
    setMin(props.slaOptions[0].min)
    setMax(props.slaOptions[0].max)

    triggerInput.value = true
    isHidden.value = true
  } else {
    setMin(props.slaOptions[1].min)
    setMax(props.slaOptions[1].max)

    triggerInput.value = true
    isHidden.value = true
  }
}

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

const keys: any = ['uid', 'up3', 'ulp']
const presetValues: any = [presetUID, presetUP3, presetULP]
const setFunctions: any = [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 !== 'uid') {
          setFunctions[index](filterPresets.value[key])
        }
      }
    })
  }

  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"
          :placeholder="up3Placeholder"
        />

        <Select
          v-else
          @update:selected="setUp3($event)"
          :data="itemsUp3"
          :placeholder="up3Placeholder"
        />
      </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 Tanggal:</label>

      <DatePicker @update:date-value="(value) => (data.periode = value)" />
    </div>

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

      <div class="flex flex-col gap-y-2">
        <Select @update:selected="changeDuration($event)" :data="sla" placeholder="Durasi Jam" />

        <div class="flex flex-1 justify-between gap-x-1.5" :class="[isHidden ? 'hidden' : '']">
          <InputWithSuffix
            :value="`${data.minTime} Jam`"
            @update:text="setMin($event)"
            class="flex flex-1"
          />
          <small class="flex items-center">s/d</small>
          <InputWithSuffix
            :value="`${data.maxTime} Jam`"
            @update:text="setMax($event)"
            class="flex flex-1"
          />
        </div>
      </div>
    </div>
  </div>
</template>