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

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

const uidPlaceholder = 'Pilih Unit'
const up3Placeholder = 'Pilih Area'
const poskoPlaceholder = 'Pilih Posko'
const statusPlaceholder = 'Pilih Status'
const slaPlaceholder = 'Pilih Durasi SLA'

const keyword = ref('')

const emit = defineEmits(['update:filters'])
const props = defineProps({
  reportType: {
    type: Array as PropType<any[]>,
    default: [
      { id: 1, title: 'No Lapor' },
      { id: 2, title: 'Nama Pelapor' },
      { id: 3, title: 'Deskripsi' }
    ]
  },
  statusType: {
    type: Array as PropType<any[]>,
    default: [
      { id: 1, name: 'Lapor' },
      { id: 2, name: 'Penugasan Regu' },
      { id: 3, name: 'Dalam Perjalanan' },
      { id: 4, name: 'Dalam Pengerjaan' },
      { id: 5, name: 'Konfirmasi' }
    ]
  },
  slaType: {
    type: Array as PropType<any[]>,
    default: [
      {
        id: 1,
        name: '45 Menit',
        time: 45
      },
      {
        id: 2,
        name: '3 Jam',
        time: 180
      },
      {
        id: 3,
        name: '1 Hari',
        time: 1440
      }
    ]
  }
})

const data = ref({
  uid: { id: 0, name: uidPlaceholder },
  up3: { id: 0, name: up3Placeholder },
  posko: { id: 0, name: poskoPlaceholder },
  status: props.statusType[0],
  keyword: keyword.value,
  searchBy: props.reportType[0]?.title,
  sla: props.slaType[0],
  periode: ''
})
const renderUp3 = ref(false)
const renderPosko = ref(false)

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 }
  }

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

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

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

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

const setStatus = (value: any) => {
  data.value = {
    ...data.value,
    status: value
  }
}

const changeKeyword = (value: string) => {
  data.value = {
    ...data.value,
    keyword: value
  }
}

const changeReportTypeSelected = (id: any) => {
  data.value = {
    ...data.value,
    searchBy: props.reportType.find((item) => item.id === id)?.name
  }
}

const setSla = (value: any) => {
  data.value = {
    ...data.value,
    sla: 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">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">Unit PLN:</label>

      <div class="flex flex-col gap-y-1">
        <Select
          v-if="!presetUID"
          @update:selected="setUid($event)"
          :data="itemsUid"
          :placeholder="uidPlaceholder"
        />

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

        <div class="grid grid-flow-col auto-cols-auto gap-x-1.5">
          <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 v-if="!presetPosko">
            <Select
              v-if="renderPosko"
              @update:selected="setPosko($event)"
              :data="itemsPosko"
              :placeholder="poskoPlaceholder"
            />

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

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

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

      <Select
        @update:selected="setStatus($event)"
        :data="statusType"
        :placeholder="statusPlaceholder"
      />
    </div>

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

      <Select @update:selected="setSla($event)" :data="slaType" :placeholder="slaPlaceholder" />
    </div>

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

      <InputWithFilter
        placeholder="Cari"
        :filters="reportType"
        @update:keyword="changeKeyword"
        @update:filters="changeReportTypeSelected"
      />
    </div>
  </div>
</template>