From a63fa96715053b524c5a5e61289d359d2c6464c4 Mon Sep 17 00:00:00 2001
From: Geni Jaho <jahogeni@gmail.com>
Date: Fri, 12 Jan 2024 14:20:45 +0100
Subject: [PATCH] Refactor inputs (#30)

* Refactor Add Item input

* Refactor tag inputs
---
 app/Http/Controllers/PhotoItemsController.php |   1 +
 package-lock.json                             |  39 +++++++
 package.json                                  |   1 +
 resources/js/Components/TagBox.vue            | 109 ++++++++++++++++++
 resources/js/Pages/Photo/PhotoItem.vue        |  55 +++------
 resources/js/Pages/Photo/Show.vue             |  22 ++--
 6 files changed, 177 insertions(+), 50 deletions(-)
 create mode 100644 resources/js/Components/TagBox.vue

diff --git a/app/Http/Controllers/PhotoItemsController.php b/app/Http/Controllers/PhotoItemsController.php
index edd6b77a..5df68327 100644
--- a/app/Http/Controllers/PhotoItemsController.php
+++ b/app/Http/Controllers/PhotoItemsController.php
@@ -11,6 +11,7 @@
 
 class PhotoItemsController extends Controller
 {
+    // todo validate the item_id exists
     public function store(Photo $photo, Request $request): JsonResponse
     {
         /** @var User $user */
diff --git a/package-lock.json b/package-lock.json
index a5a08daa..1c7d2a04 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -5,6 +5,7 @@
     "packages": {
         "": {
             "dependencies": {
+                "@headlessui/vue": "^1.7.17",
                 "filepond": "^4.30.4",
                 "filepond-plugin-file-validate-size": "^2.2.8",
                 "filepond-plugin-file-validate-type": "^1.2.8",
@@ -420,6 +421,20 @@
                 "node": ">=12"
             }
         },
+        "node_modules/@headlessui/vue": {
+            "version": "1.7.17",
+            "resolved": "https://registry.npmjs.org/@headlessui/vue/-/vue-1.7.17.tgz",
+            "integrity": "sha512-hmJChv8HzKorxd9F70RGnECAwZfkvmmwOqreuKLWY/19d5qbWnSdw+DNbuA/Uo6X5rb4U5B3NrT+qBKPmjhRqw==",
+            "dependencies": {
+                "@tanstack/vue-virtual": "^3.0.0-beta.60"
+            },
+            "engines": {
+                "node": ">=10"
+            },
+            "peerDependencies": {
+                "vue": "^3.2.0"
+            }
+        },
         "node_modules/@inertiajs/core": {
             "version": "1.0.14",
             "resolved": "https://registry.npmjs.org/@inertiajs/core/-/core-1.0.14.tgz",
@@ -751,6 +766,30 @@
                 "tailwindcss": ">=3.0.0 || insiders"
             }
         },
+        "node_modules/@tanstack/virtual-core": {
+            "version": "3.0.0",
+            "resolved": "https://registry.npmjs.org/@tanstack/virtual-core/-/virtual-core-3.0.0.tgz",
+            "integrity": "sha512-SYXOBTjJb05rXa2vl55TTwO40A6wKu0R5i1qQwhJYNDIqaIGF7D0HsLw+pJAyi2OvntlEIVusx3xtbbgSUi6zg==",
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/tannerlinsley"
+            }
+        },
+        "node_modules/@tanstack/vue-virtual": {
+            "version": "3.0.1",
+            "resolved": "https://registry.npmjs.org/@tanstack/vue-virtual/-/vue-virtual-3.0.1.tgz",
+            "integrity": "sha512-85Cyi8m7h1xzGB2FyXMurPVFOZvatycVU7OfhQ8QFk27E4tQ7ISNfYEMrakTTaE0ZyNsKRFlAzHuwL1Bv1vuMw==",
+            "dependencies": {
+                "@tanstack/virtual-core": "3.0.0"
+            },
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/tannerlinsley"
+            },
+            "peerDependencies": {
+                "vue": "^2.7.0 || ^3.0.0"
+            }
+        },
         "node_modules/@types/estree": {
             "version": "1.0.5",
             "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz",
diff --git a/package.json b/package.json
index 3893b8a4..1c959042 100644
--- a/package.json
+++ b/package.json
@@ -19,6 +19,7 @@
         "vue": "^3.3.4"
     },
     "dependencies": {
+        "@headlessui/vue": "^1.7.17",
         "filepond": "^4.30.4",
         "filepond-plugin-file-validate-size": "^2.2.8",
         "filepond-plugin-file-validate-type": "^1.2.8",
diff --git a/resources/js/Components/TagBox.vue b/resources/js/Components/TagBox.vue
new file mode 100644
index 00000000..31635d03
--- /dev/null
+++ b/resources/js/Components/TagBox.vue
@@ -0,0 +1,109 @@
+<script setup>
+import { ref, computed } from 'vue'
+import {
+    Combobox,
+    ComboboxInput,
+    ComboboxButton,
+    ComboboxOptions,
+    ComboboxOption,
+    TransitionRoot,
+} from '@headlessui/vue';
+
+const props = defineProps({
+    items: Array,
+    modelValue: Object,
+});
+
+defineEmits(['update:modelValue']);
+
+let query = ref('')
+
+let filteredItems = computed(() => {
+    const items = query.value === ''
+        ? props.items
+        : props.items.filter((item) =>
+            item.name
+                .toLowerCase()
+                .replace(/\s+/g, '')
+                .includes(query.value.toLowerCase().replace(/\s+/g, ''))
+        );
+
+    return items.slice(0, 100)
+})
+</script>
+
+<template>
+    <Combobox
+        :modelValue="modelValue"
+        @update:modelValue="value => $emit('update:modelValue', value)"
+        by="id"
+    >
+            <div class="relative">
+                <div
+                    class="relative w-full cursor-default overflow-hidden rounded-lg bg-white text-left shadow-md focus:outline-none focus-visible:ring-2 focus-visible:ring-white/75 focus-visible:ring-offset-2 focus-visible:ring-offset-teal-300 sm:text-sm"
+                >
+                    <ComboboxInput
+                        class="w-full border-none py-2 pl-3 pr-10 text-sm leading-5 text-gray-900 focus:ring-0"
+                        :displayValue="(item) => item.name"
+                        @change="query = $event.target.value"
+                    />
+                    <ComboboxButton
+                        class="absolute inset-y-0 right-0 flex items-center pr-2"
+                    >
+                        <svg class="h-5 w-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                            <path fill-rule="evenodd" d="M10 3a.75.75 0 01.55.24l3.25 3.5a.75.75 0 11-1.1 1.02L10 4.852 7.3 7.76a.75.75 0 01-1.1-1.02l3.25-3.5A.75.75 0 0110 3zm-3.76 9.2a.75.75 0 011.06.04l2.7 2.908 2.7-2.908a.75.75 0 111.1 1.02l-3.25 3.5a.75.75 0 01-1.1 0l-3.25-3.5a.75.75 0 01.04-1.06z" clip-rule="evenodd" />
+                        </svg>
+                    </ComboboxButton>
+                </div>
+                <TransitionRoot
+                    leave="transition ease-in duration-100"
+                    leaveFrom="opacity-100"
+                    leaveTo="opacity-0"
+                    @after-leave="query = ''"
+                >
+                    <ComboboxOptions
+                        class="absolute z-10 mt-1 max-h-96 w-full md:w-96 right-0 overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black/5 focus:outline-none sm:text-sm"
+                    >
+                        <div
+                            v-if="filteredItems.length === 0 && query !== ''"
+                            class="relative cursor-default select-none px-4 py-2 text-gray-700"
+                        >
+                            Nothing found.
+                        </div>
+
+                        <ComboboxOption
+                            v-for="item in filteredItems"
+                            as="template"
+                            :key="item.id"
+                            :value="item"
+                            v-slot="{ selected, active }"
+                        >
+                            <li
+                                class="relative cursor-default select-none py-2 pl-10 pr-4"
+                                :class="{
+                                  'bg-indigo-600 text-white': active,
+                                  'text-gray-900': !active,
+                                }"
+                            >
+                                <span
+                                    class="block truncate"
+                                    :class="{ 'font-medium': selected, 'font-normal': !selected }"
+                                >
+                                  {{ item.name }}
+                                </span>
+                                <span
+                                    v-if="selected"
+                                    class="absolute inset-y-0 left-0 flex items-center pl-3"
+                                    :class="{ 'text-white': active, 'text-indigo-600': !active }"
+                                >
+                                  <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                                    <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
+                                  </svg>
+                                </span>
+                            </li>
+                        </ComboboxOption>
+                    </ComboboxOptions>
+                </TransitionRoot>
+            </div>
+        </Combobox>
+</template>
diff --git a/resources/js/Pages/Photo/PhotoItem.vue b/resources/js/Pages/Photo/PhotoItem.vue
index 99db73af..054be573 100644
--- a/resources/js/Pages/Photo/PhotoItem.vue
+++ b/resources/js/Pages/Photo/PhotoItem.vue
@@ -5,15 +5,16 @@ import IconPrimaryButton from "@/Components/IconPrimaryButton.vue";
 import ToggleInput from "@/Components/ToggleInput.vue";
 import IconDangerButton from "@/Components/IconDangerButton.vue";
 import TextInput from "@/Components/TextInput.vue";
+import TagBox from "@/Components/TagBox.vue";
 
 const props = defineProps({
     item: Object,
     tags: Object,
 });
 
-const selectedMaterialTag = ref(props.tags.material[0].id);
-const selectedBrandTag = ref(props.tags.brand[0].id);
-const selectedEventTag = ref(props.tags.event[0].id);
+const selectedMaterialTag = ref(props.tags.material[0]);
+const selectedBrandTag = ref(props.tags.brand[0]);
+const selectedEventTag = ref(props.tags.event[0]);
 </script>
 
 <template>
@@ -32,21 +33,15 @@ const selectedEventTag = ref(props.tags.event[0].id);
             </div>
             <div class="mt-6">
                 <div class="flex flex-row justify-between space-x-2">
-                    <select
-                        id="add-material-tag"
+                    <TagBox
+                        class="w-full lg:w-48"
+                        :items="tags.material"
                         v-model="selectedMaterialTag"
-                        name="add-tag"
-                        class="block w-full lg:w-48 rounded-md border-0 py-1.5 pl-3 pr-10 text-gray-900 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-indigo-600 sm:text-sm sm:leading-6">
-                        <option
-                            v-for="material in tags.material"
-                            :value="material.id"
-                        >{{ material.name }}
-                        </option>
-                    </select>
+                    ></TagBox>
 
                     <PrimaryButton
                         class="whitespace-nowrap"
-                        @click="$emit('add-tag-to-item', item.pivot, selectedMaterialTag)"
+                        @click="$emit('add-tag-to-item', item.pivot, selectedMaterialTag.id)"
                         :disabled="!selectedMaterialTag"
                     >
                         Add Material
@@ -54,21 +49,15 @@ const selectedEventTag = ref(props.tags.event[0].id);
                 </div>
 
                 <div class="mt-2 flex flex-row justify-between space-x-2">
-                    <select
-                        id="add-brand-tag"
+                    <TagBox
+                        class="w-full lg:w-48"
+                        :items="tags.brand"
                         v-model="selectedBrandTag"
-                        name="add-tag"
-                        class="block w-full lg:w-48 rounded-md border-0 py-1.5 pl-3 pr-10 text-gray-900 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-indigo-600 sm:text-sm sm:leading-6">
-                        <option
-                            v-for="brand in tags.brand"
-                            :value="brand.id"
-                        >{{ brand.name }}
-                        </option>
-                    </select>
+                    ></TagBox>
 
                     <PrimaryButton
                         class="whitespace-nowrap"
-                        @click="$emit('add-tag-to-item', item.pivot, selectedBrandTag)"
+                        @click="$emit('add-tag-to-item', item.pivot, selectedBrandTag.id)"
                         :disabled="!selectedBrandTag"
                     >
                         Add Brand
@@ -76,21 +65,15 @@ const selectedEventTag = ref(props.tags.event[0].id);
                 </div>
 
                 <div class="mt-2 flex flex-row justify-between space-x-2">
-                    <select
-                        id="add-event-tag"
+                    <TagBox
+                        class="w-full lg:w-48"
+                        :items="tags.event"
                         v-model="selectedEventTag"
-                        name="add-tag"
-                        class="block w-full lg:w-48 rounded-md border-0 py-1.5 pl-3 pr-10 text-gray-900 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-indigo-600 sm:text-sm sm:leading-6">
-                        <option
-                            v-for="event in tags.event"
-                            :value="event.id"
-                        >{{ event.name }}
-                        </option>
-                    </select>
+                    ></TagBox>
 
                     <PrimaryButton
                         class="whitespace-nowrap"
-                        @click="$emit('add-tag-to-item', item.pivot, selectedEventTag)"
+                        @click="$emit('add-tag-to-item', item.pivot, selectedEventTag.id)"
                         :disabled="!selectedEventTag"
                     >
                         Add Event
diff --git a/resources/js/Pages/Photo/Show.vue b/resources/js/Pages/Photo/Show.vue
index 009115ca..bc26cc8c 100644
--- a/resources/js/Pages/Photo/Show.vue
+++ b/resources/js/Pages/Photo/Show.vue
@@ -7,6 +7,7 @@ import PrimaryButton from "@/Components/PrimaryButton.vue";
 import debounce from 'lodash.debounce'
 import { router } from '@inertiajs/vue3'
 import IconDangerButton from "@/Components/IconDangerButton.vue";
+import TagBox from "@/Components/TagBox.vue";
 
 const props = defineProps({
     photoId: Number,
@@ -18,7 +19,7 @@ const props = defineProps({
 
 const photo = ref(null);
 const photoItems = ref([]);
-const selectedItem = ref(props.items[0].id);
+const selectedItem = ref(props.items[0]);
 
 onMounted(() => {
     getPhoto();
@@ -41,7 +42,7 @@ const deletePhoto = () => {
 
 const addItem = () => {
     axios.post(`/photos/${photo.value.id}/items`, {
-        item_id: selectedItem.value,
+        item_id: selectedItem.value.id,
     }).then(() => {
         getPhoto();
     });
@@ -139,22 +140,15 @@ const updateItemQuantity = debounce((photoItemId, quantity) => {
 
                     <div class="w-full md:w-1/2 xl:w-2/3 px-4">
                         <div class="flex flex-row mt-6 md:mt-0">
-                            <select
-                                id="add-item"
+                            <TagBox
+                                class="w-full sm:w-96"
+                                :items="items"
                                 v-model="selectedItem"
-                                name="add-item"
-                                class="block w-full sm:w-48 rounded-md border-0 py-1.5 pl-3 pr-10 text-gray-900 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-indigo-600 sm:text-sm sm:leading-6">
-                                <option
-                                    v-for="item in items"
-                                    :value="item.id"
-                                >{{ item.name }}
-                                </option>
-                            </select>
-
+                            ></TagBox>
                             <PrimaryButton
                                 class="whitespace-nowrap ml-4"
                                 @click="addItem"
-                                :disabled="selectedItem === ''"
+                                :disabled="!selectedItem"
                             >
                                 Add Object
                             </PrimaryButton>