From bbbce1ae7c2461c1b832f801be93c8eccf17a12a Mon Sep 17 00:00:00 2001 From: geni_jaho Date: Fri, 12 Jan 2024 13:55:54 +0100 Subject: [PATCH 1/2] Refactor Add Item input --- app/Http/Controllers/PhotoItemsController.php | 1 + package-lock.json | 39 +++++++ package.json | 1 + resources/js/Components/TagBox.vue | 107 ++++++++++++++++++ resources/js/Pages/Photo/Show.vue | 22 ++-- 5 files changed, 156 insertions(+), 14 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..e461ed25 --- /dev/null +++ b/resources/js/Components/TagBox.vue @@ -0,0 +1,107 @@ + + + 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) => {
- - + > Add Object From c688d1e552a9540bf7b978ca491b05d3dcd9baf4 Mon Sep 17 00:00:00 2001 From: geni_jaho Date: Fri, 12 Jan 2024 14:12:15 +0100 Subject: [PATCH 2/2] Refactor tag inputs --- resources/js/Components/TagBox.vue | 12 +++--- resources/js/Pages/Photo/PhotoItem.vue | 55 +++++++++----------------- 2 files changed, 26 insertions(+), 41 deletions(-) diff --git a/resources/js/Components/TagBox.vue b/resources/js/Components/TagBox.vue index e461ed25..31635d03 100644 --- a/resources/js/Components/TagBox.vue +++ b/resources/js/Components/TagBox.vue @@ -18,16 +18,18 @@ defineEmits(['update:modelValue']); let query = ref('') -let filteredItems = computed(() => - query.value === '' +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) +})