ff-admin/src/components/search/EquipmentSearchSelect.vue

<template>
  <div class="w-full">
    <Combobox v-model="selected" :disabled="disabled">
      <ComboboxLabel>{{ title }}</ComboboxLabel>
      <div class="relative mt-1">
        <ComboboxInput
          class="rounded-md shadow-xs relative block w-full px-3 py-2 border border-gray-300 focus:border-primary placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-hidden focus:ring-0 focus:z-10 sm:text-sm resize-none"
          :class="useScanner ? 'pl-9!' : ''"
          :displayValue="() => chosen?.name ?? ''"
          @input="query = $event.target.value"
        />
        <QrCodeIcon
          v-if="useScanner"
          class="absolute h-6 stroke-1 left-2 top-1/2 -translate-y-1/2 cursor-pointer z-10"
          @click="scanCode"
        />
        <ComboboxButton class="absolute inset-y-0 right-0 flex items-center pr-2">
          <ChevronUpDownIcon class="h-5 w-5 text-gray-400" aria-hidden="true" />
        </ComboboxButton>
        <TransitionRoot
          leave="transition ease-in duration-100"
          leaveFrom="opacity-100"
          leaveTo="opacity-0"
          @after-leave="query = ''"
        >
          <ComboboxOptions
            class="absolute mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-md ring-1 ring-black/5 focus:outline-hidden sm:text-sm z-10"
          >
            <ComboboxOption v-if="loading || deferingSearch" as="template" disabled>
              <li class="flex flex-row gap-2 text-text relative cursor-default select-none py-2 pl-3 pr-4">
                <Spinner />
                <span class="font-normal block truncate">suche</span>
              </li>
            </ComboboxOption>
            <ComboboxOption v-else-if="filtered.length === 0 && query == ''" as="template" disabled>
              <li class="text-text relative cursor-default select-none py-2 pl-3 pr-4">
                <span class="font-normal block truncate">tippe, um zu suchen...</span>
              </li>
            </ComboboxOption>
            <ComboboxOption v-else-if="filtered.length === 0" as="template" disabled>
              <li class="text-text relative cursor-default select-none py-2 pl-3 pr-4">
                <span class="font-normal block truncate">Keine Auswahl gefunden.</span>
              </li>
            </ComboboxOption>

            <ComboboxOption
              v-if="!(loading || deferingSearch)"
              v-for="equipment in filtered"
              as="template"
              :key="equipment.id"
              :value="equipment.id"
              v-slot="{ selected, active }"
            >
              <li
                class="relative cursor-default select-none py-2 pl-10 pr-4"
                :class="{
                  'bg-primary text-white': active,
                  'text-gray-900': !active,
                }"
              >
                <span class="block truncate" :class="{ 'font-medium': selected, 'font-normal': !selected }">
                  {{ equipment.name }}
                </span>
                <span
                  v-if="selected"
                  class="absolute inset-y-0 left-0 flex items-center pl-3"
                  :class="{ 'text-white': active, 'text-primary': !active }"
                >
                  <CheckIcon class="h-5 w-5" aria-hidden="true" />
                </span>
              </li>
            </ComboboxOption>
          </ComboboxOptions>
        </TransitionRoot>
      </div>
    </Combobox>
  </div>
</template>

<script setup lang="ts">
import { defineAsyncComponent, defineComponent, markRaw, type Prop } from "vue";
import { mapState, mapActions } from "pinia";
import {
  Combobox,
  ComboboxLabel,
  ComboboxInput,
  ComboboxButton,
  ComboboxOptions,
  ComboboxOption,
  TransitionRoot,
} from "@headlessui/vue";
import { CheckIcon, ChevronUpDownIcon } from "@heroicons/vue/20/solid";
import Spinner from "../Spinner.vue";
import { useEquipmentStore } from "@/stores/admin/unit/equipment/equipment";
import type { EquipmentViewModel } from "@/viewmodels/admin/unit/equipment/equipment.models";
import { QrCodeIcon } from "@heroicons/vue/24/outline";
import { useModalStore } from "@/stores/modal";
</script>

<script lang="ts">
export default defineComponent({
  props: {
    modelValue: {
      type: String,
      default: "",
    },
    title: String,
    disabled: {
      type: Boolean,
      default: false,
    },
    useScanner: {
      type: Boolean,
      default: false,
    },
  },
  emits: ["update:model-value"],
  watch: {
    modelValue() {
      if (this.initialLoaded) return;
      this.initialLoaded = true;
      this.loadEquipmentInitial();
    },
    query() {
      this.deferingSearch = true;
      clearTimeout(this.timer);
      this.timer = setTimeout(() => {
        this.deferingSearch = false;
        this.search();
      }, 600);
    },
  },
  data() {
    return {
      initialLoaded: false as boolean,
      loading: false as boolean,
      deferingSearch: false as boolean,
      timer: undefined as any,
      query: "" as string,
      filtered: [] as Array<EquipmentViewModel>,
      chosen: undefined as undefined | EquipmentViewModel,
    };
  },
  computed: {
    selected: {
      get() {
        return this.modelValue;
      },
      set(val: string) {
        this.chosen = this.getEquipmentFromSearch(val);
        this.$emit("update:model-value", val);
      },
    },
  },
  mounted() {
    this.loadEquipmentInitial();
  },
  methods: {
    ...mapActions(useEquipmentStore, ["searchEquipments", "fetchEquipmentById"]),
    ...mapActions(useModalStore, ["openModal"]),
    search() {
      this.filtered = [];
      if (this.query == "") return;
      this.loading = true;
      this.searchEquipments(this.query)
        .then((res) => {
          this.filtered = res.data;
        })
        .catch((err) => {})
        .finally(() => {
          this.loading = false;
        });
    },
    getEquipmentFromSearch(id: string) {
      return this.filtered.find((f) => f.id == id);
    },
    loadEquipmentInitial() {
      if (this.modelValue == "") return;
      this.fetchEquipmentById(this.modelValue)
        .then((res) => {
          this.chosen = res.data;
        })
        .catch(() => {});
    },
    scanCode() {
      this.openModal(
        markRaw(defineAsyncComponent(() => import("@/components/CodeDetector.vue"))),
        "codeScanInput",
        (result: string) => {
          this.getEquipmentFromSearch(result);
        }
      );
    },
  },
});
</script>