From 016ba890ca8a73213bc6e70ad721e3667fd90bdc Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Wed, 8 Nov 2023 17:21:36 +0530
Subject: [PATCH] fix: changed autocomplete component to handle footer (for not
 made a copy)

---
 .../src/components/frappe-ui/Autocomplete.vue | 204 ++++++++++++++++++
 1 file changed, 204 insertions(+)
 create mode 100644 frontend/src/components/frappe-ui/Autocomplete.vue

diff --git a/frontend/src/components/frappe-ui/Autocomplete.vue b/frontend/src/components/frappe-ui/Autocomplete.vue
new file mode 100644
index 00000000..b07bd19d
--- /dev/null
+++ b/frontend/src/components/frappe-ui/Autocomplete.vue
@@ -0,0 +1,204 @@
+<template>
+  <Combobox v-model="selectedValue" nullable v-slot="{ open: isComboboxOpen }">
+    <Popover class="w-full" v-model:show="showOptions">
+      <template #target="{ open: openPopover, togglePopover }">
+        <slot name="target" v-bind="{ open: openPopover, togglePopover }">
+          <div class="w-full">
+            <button
+              class="flex h-7 w-full items-center justify-between gap-2 rounded bg-gray-100 px-2 py-1 transition-colors hover:bg-gray-200 focus:ring-2 focus:ring-gray-400"
+              :class="{ 'bg-gray-200': isComboboxOpen }"
+              @click="() => togglePopover()"
+            >
+              <div class="flex items-center">
+                <slot name="prefix" />
+                <span
+                  class="overflow-hidden text-ellipsis whitespace-nowrap text-base leading-5"
+                  v-if="selectedValue"
+                >
+                  {{ displayValue(selectedValue) }}
+                </span>
+                <span class="text-base leading-5 text-gray-500" v-else>
+                  {{ placeholder || '' }}
+                </span>
+              </div>
+              <FeatherIcon
+                name="chevron-down"
+                class="h-4 w-4 text-gray-600"
+                aria-hidden="true"
+              />
+            </button>
+          </div>
+        </slot>
+      </template>
+      <template #body="{ isOpen }">
+        <div v-show="isOpen">
+          <div class="mt-1 rounded-lg bg-white text-base shadow-2xl">
+            <div class="relative p-1.5 pb-0">
+              <ComboboxInput
+                ref="search"
+                class="form-input w-full"
+                type="text"
+                @change="
+                  (e) => {
+                    query = e.target.value
+                  }
+                "
+                :value="query"
+                autocomplete="off"
+                placeholder="Search"
+              />
+              <button
+                class="absolute right-1.5 inline-flex h-7 w-7 items-center justify-center"
+                @click="selectedValue = null"
+              >
+                <FeatherIcon name="x" class="w-4" />
+              </button>
+            </div>
+            <ComboboxOptions
+              class="my-1 max-h-[12rem] overflow-y-auto px-1.5"
+              static
+            >
+              <div
+                class="mt-1.5"
+                v-for="group in groups"
+                :key="group.key"
+                v-show="group.items.length > 0"
+              >
+                <div
+                  v-if="group.group && !group.hideLabel"
+                  class="px-2.5 py-1.5 text-sm font-medium text-gray-500"
+                >
+                  {{ group.group }}
+                </div>
+                <ComboboxOption
+                  as="template"
+                  v-for="option in group.items"
+                  :key="option.value"
+                  :value="option"
+                  v-slot="{ active, selected }"
+                >
+                  <li
+                    :class="[
+                      'flex items-center rounded px-2.5 py-1.5 text-base',
+                      { 'bg-gray-100': active },
+                    ]"
+                  >
+                    <slot
+                      name="item-prefix"
+                      v-bind="{ active, selected, option }"
+                    />
+                    {{ option.label }}
+                  </li>
+                </ComboboxOption>
+              </div>
+              <li
+                v-if="groups.length == 0"
+                class="mt-1.5 rounded-md px-2.5 py-1.5 text-base text-gray-600"
+              >
+                No results found
+              </li>
+            </ComboboxOptions>
+            <div v-if="slots.footer" class="border-t p-1.5">
+              <slot
+                name="footer"
+                v-bind="{ value: search?.el._value, close }"
+              ></slot>
+            </div>
+          </div>
+        </div>
+      </template>
+    </Popover>
+  </Combobox>
+</template>
+
+<script setup>
+import {
+  Combobox,
+  ComboboxInput,
+  ComboboxOptions,
+  ComboboxOption,
+} from '@headlessui/vue'
+import { Popover, Button, FeatherIcon } from 'frappe-ui'
+import { ref, computed, useAttrs, useSlots, watch, nextTick } from 'vue'
+
+const props = defineProps(['modelValue', 'options', 'placeholder'])
+const emit = defineEmits(['update:modelValue', 'update:query', 'change'])
+
+const query = ref('')
+const showOptions = ref(false)
+const search = ref(null)
+
+const attrs = useAttrs()
+const slots = useSlots()
+
+const valuePropPassed = computed(() => 'value' in attrs)
+
+const selectedValue = computed({
+  get() {
+    return valuePropPassed.value ? attrs.value : props.modelValue
+  },
+  set(val) {
+    query.value = ''
+    if (val) {
+      showOptions.value = false
+    }
+    emit(valuePropPassed.value ? 'change' : 'update:modelValue', val)
+  },
+})
+
+function close() {
+  showOptions.value = false
+}
+
+const groups = computed(() => {
+  if (!props.options || props.options.length == 0) return []
+
+  let groups = props.options[0]?.group
+    ? props.options
+    : [{ group: '', items: props.options }]
+
+  return groups
+    .map((group, i) => {
+      return {
+        key: i,
+        group: group.group,
+        hideLabel: group.hideLabel || false,
+        items: filterOptions(group.items),
+      }
+    })
+    .filter((group) => group.items.length > 0)
+})
+
+function filterOptions(options) {
+  if (!query.value) {
+    return options
+  }
+  return options.filter((option) => {
+    let searchTexts = [option.label, option.value]
+    return searchTexts.some((text) =>
+      (text || '').toString().toLowerCase().includes(query.value.toLowerCase())
+    )
+  })
+}
+
+function displayValue(option) {
+  if (typeof option === 'string') {
+    let allOptions = groups.value.flatMap((group) => group.items)
+    let selectedOption = allOptions.find((o) => o.value === option)
+    return selectedOption?.label || option
+  }
+  return option?.label
+}
+
+watch(query, (q) => {
+  emit('update:query', q)
+})
+
+watch(showOptions, (val) => {
+  if (val) {
+    nextTick(() => {
+      search.value.el.focus()
+    })
+  }
+})
+</script>