From c9b9de2885fd918bbcfae4ceda58c626b0adcf63 Mon Sep 17 00:00:00 2001
From: geni_jaho <jahogeni@gmail.com>
Date: Tue, 12 Mar 2024 20:59:51 +0100
Subject: [PATCH 1/4] Effort to improve tagging

---
 .../Controllers/PhotoItemTagsController.php   |   2 +-
 .../Requests/StorePhotoItemTagRequest.php     |   3 +-
 resources/js/Components/TagBox.vue            |  10 ++
 resources/js/Components/TextInput.vue         |   2 +-
 .../js/Pages/Photos/Partials/PhotoItem.vue    | 129 ++++++++----------
 resources/js/Pages/Photos/Show.vue            |   6 +-
 .../Feature/Tagging/AddTagToPhotoItemTest.php |   8 +-
 7 files changed, 78 insertions(+), 82 deletions(-)

diff --git a/app/Http/Controllers/PhotoItemTagsController.php b/app/Http/Controllers/PhotoItemTagsController.php
index d5bd6c6f..aabd2c07 100644
--- a/app/Http/Controllers/PhotoItemTagsController.php
+++ b/app/Http/Controllers/PhotoItemTagsController.php
@@ -15,7 +15,7 @@ public function store(PhotoItem $photoItem, StorePhotoItemTagRequest $request):
             abort(404);
         }
 
-        $photoItem->tags()->syncWithoutDetaching($request->input('tag_id'));
+        $photoItem->tags()->syncWithoutDetaching($request->input('tag_ids'));
 
         return response()->json();
     }
diff --git a/app/Http/Requests/StorePhotoItemTagRequest.php b/app/Http/Requests/StorePhotoItemTagRequest.php
index ecefe9e1..429ad97e 100644
--- a/app/Http/Requests/StorePhotoItemTagRequest.php
+++ b/app/Http/Requests/StorePhotoItemTagRequest.php
@@ -15,7 +15,8 @@ class StorePhotoItemTagRequest extends FormRequest
     public function rules(): array
     {
         return [
-            'tag_id' => 'required|exists:tags,id',
+            'tag_ids' => 'required|array',
+            'tag_ids.*' => 'required|integer|exists:tags,id',
         ];
     }
 }
diff --git a/resources/js/Components/TagBox.vue b/resources/js/Components/TagBox.vue
index 825b5c08..b71d7954 100644
--- a/resources/js/Components/TagBox.vue
+++ b/resources/js/Components/TagBox.vue
@@ -17,6 +17,14 @@ const props = defineProps({
         type: Boolean,
         default: false,
     },
+    nullable: {
+        type: Boolean,
+        default: false,
+    },
+    placeholder: {
+        type: String,
+        default: '',
+    },
     dropdownWidth: {
         type: String,
         default: 'w-full md:w-96 right-0',
@@ -59,6 +67,7 @@ onMounted(() => {
         :modelValue="modelValue"
         @update:modelValue="value => $emit('update:modelValue', value)"
         :multiple="multiple"
+        :nullable="nullable"
         by="id"
     >
             <div class="relative">
@@ -67,6 +76,7 @@ onMounted(() => {
                         ref="input"
                         class="w-full rounded-md border-0 bg-white dark:bg-gray-900 py-1.5 pl-3 pr-12 text-gray-900 dark:text-gray-300 shadow-sm ring-1 ring-inset ring-gray-300 dark:ring-gray-700 focus:ring-2 focus:ring-inset focus:ring-indigo-500 dark:focus:ring-indigo-600 sm:text-sm sm:leading-6"
                         :displayValue="(item) => item?.name"
+                        :placeholder="placeholder"
                         @change="query = $event.target.value"
                         @focus="$event.target.select()"
                         autocomplete="off"
diff --git a/resources/js/Components/TextInput.vue b/resources/js/Components/TextInput.vue
index ff626aa9..bc6b8d79 100644
--- a/resources/js/Components/TextInput.vue
+++ b/resources/js/Components/TextInput.vue
@@ -21,7 +21,7 @@ defineExpose({ focus: () => input.value.focus() });
 <template>
     <input
         ref="input"
-        class="block w-full rounded-md border-0 py-1.5 text-gray-900 dark:text-gray-300 dark:bg-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 dark:ring-gray-700 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-500 dark:focus:ring-indigo-600 sm:text-sm sm:leading-6"
+        class="block rounded-md border-0 py-1.5 text-gray-900 dark:text-gray-300 dark:bg-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 dark:ring-gray-700 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-500 dark:focus:ring-indigo-600 sm:text-sm sm:leading-6"
         :value="modelValue"
         @input="$emit('update:modelValue', $event.target.value)"
     >
diff --git a/resources/js/Pages/Photos/Partials/PhotoItem.vue b/resources/js/Pages/Photos/Partials/PhotoItem.vue
index c7859395..fe40ae56 100644
--- a/resources/js/Pages/Photos/Partials/PhotoItem.vue
+++ b/resources/js/Pages/Photos/Partials/PhotoItem.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { ref } from "vue";
+import {computed, ref} from "vue";
 import PrimaryButton from "@/Components/PrimaryButton.vue";
 import IconPrimaryButton from "@/Components/IconPrimaryButton.vue";
 import ToggleInput from "@/Components/ToggleInput.vue";
@@ -12,12 +12,39 @@ const props = defineProps({
     tags: Object,
 });
 
-const selectedMaterialTag = ref(props.tags.material[0]);
-const selectedBrandTag = ref(props.tags.brand[0]);
-const selectedEventTag = ref(props.tags.event[0]);
-const selectedStateTag = ref(props.tags.state[0]);
-const selectedContentTag = ref(props.tags.content[0]);
-const selectedSizeTag = ref(props.tags.size[0]);
+const emit = defineEmits([
+    'add-tags-to-item',
+    'remove-item',
+    'remove-tag-from-item',
+    'update-quantity',
+    'toggle-picked-up',
+    'toggle-recycled',
+    'toggle-deposit',
+    'copy-item',
+]);
+
+const selectedMaterialTag = ref(props.tags.material.find(tag => props.item.pivot.tags?.find(t => t.id === tag.id)));
+const selectedBrandTag = ref(props.tags.brand.find(tag => props.item.pivot.tags?.find(t => t.id === tag.id)));
+const selectedEventTag = ref(props.tags.event.find(tag => props.item.pivot.tags?.find(t => t.id === tag.id)));
+const selectedStateTag = ref(props.tags.state.find(tag => props.item.pivot.tags?.find(t => t.id === tag.id)));
+const selectedContentTag = ref(props.tags.content.find(tag => props.item.pivot.tags?.find(t => t.id === tag.id)));
+const selectedSizeTag = ref(props.tags.size.find(tag => props.item.pivot.tags?.find(t => t.id === tag.id)));
+
+const selectedTagIds = computed(() => {
+    return [
+        selectedMaterialTag.value?.id,
+        selectedBrandTag.value?.id,
+        selectedEventTag.value?.id,
+        selectedStateTag.value?.id,
+        selectedContentTag.value?.id,
+        selectedSizeTag.value?.id,
+    ].filter(tag => tag);
+});
+
+const addTagsToItem = () => {
+    emit("add-tags-to-item", props.item.pivot, selectedTagIds.value);
+};
+
 </script>
 
 <template>
@@ -35,103 +62,61 @@ const selectedSizeTag = ref(props.tags.size[0]);
                 </IconDangerButton>
             </div>
             <div class="mt-6">
-                <div class="flex flex-row justify-between space-x-2">
+                <div class="space-y-2">
                     <TagBox
-                        class="w-full lg:w-48"
                         :items="tags.material"
+                        :nullable="true"
+                        placeholder="Material"
                         v-model="selectedMaterialTag"
                     ></TagBox>
 
-                    <PrimaryButton
-                        class="whitespace-nowrap"
-                        @click="$emit('add-tag-to-item', item.pivot, selectedMaterialTag.id)"
-                        :disabled="!selectedMaterialTag"
-                    >
-                        Add Material
-                    </PrimaryButton>
-                </div>
-
-                <div class="mt-2 flex flex-row justify-between space-x-2">
                     <TagBox
-                        class="w-full lg:w-48"
                         :items="tags.brand"
+                        :nullable="true"
+                        placeholder="Brand"
                         v-model="selectedBrandTag"
                     ></TagBox>
 
-                    <PrimaryButton
-                        class="whitespace-nowrap"
-                        @click="$emit('add-tag-to-item', item.pivot, selectedBrandTag.id)"
-                        :disabled="!selectedBrandTag"
-                    >
-                        Add Brand
-                    </PrimaryButton>
-                </div>
-
-                <div class="mt-2 flex flex-row justify-between space-x-2">
                     <TagBox
-                        class="w-full lg:w-48"
                         :items="tags.content"
+                        :nullable="true"
+                        placeholder="Content"
                         v-model="selectedContentTag"
                     ></TagBox>
 
-                    <PrimaryButton
-                        class="whitespace-nowrap"
-                        @click="$emit('add-tag-to-item', item.pivot, selectedContentTag.id)"
-                        :disabled="!selectedContentTag"
-                    >
-                        Add Content
-                    </PrimaryButton>
-                </div>
-
-                <div class="mt-2 flex flex-row justify-between space-x-2">
                     <TagBox
-                        class="w-full lg:w-48"
                         :items="tags.size"
+                        :nullable="true"
+                        placeholder="Size"
                         v-model="selectedSizeTag"
                     ></TagBox>
 
-                    <PrimaryButton
-                        class="whitespace-nowrap"
-                        @click="$emit('add-tag-to-item', item.pivot, selectedSizeTag.id)"
-                        :disabled="!selectedSizeTag"
-                    >
-                        Add Size
-                    </PrimaryButton>
-                </div>
-
-                <div class="mt-2 flex flex-row justify-between space-x-2">
                     <TagBox
-                        class="w-full lg:w-48"
                         :items="tags.state"
+                        :nullable="true"
+                        placeholder="State"
                         v-model="selectedStateTag"
                     ></TagBox>
 
-                    <PrimaryButton
-                        class="whitespace-nowrap"
-                        @click="$emit('add-tag-to-item', item.pivot, selectedStateTag.id)"
-                        :disabled="!selectedStateTag"
-                    >
-                        Add State
-                    </PrimaryButton>
-                </div>
-
-                <div class="mt-2 flex flex-row justify-between space-x-2">
                     <TagBox
-                        class="w-full lg:w-48"
                         :items="tags.event"
+                        :nullable="true"
+                        placeholder="Event"
                         v-model="selectedEventTag"
                     ></TagBox>
 
-                    <PrimaryButton
-                        class="whitespace-nowrap"
-                        @click="$emit('add-tag-to-item', item.pivot, selectedEventTag.id)"
-                        :disabled="!selectedEventTag"
-                    >
-                        Add Event
-                    </PrimaryButton>
+                    <div class="flex justify-center">
+                        <PrimaryButton
+                            class="whitespace-nowrap"
+                            @click="addTagsToItem"
+                            :disabled="selectedTagIds.length === 0"
+                        >
+                            Add Selected Tags
+                        </PrimaryButton>
+                    </div>
                 </div>
 
-                <div class="mt-4 text-sm text-gray-500 flex flex-wrap gap-1">
+                <div v-if="item.pivot.tags?.length" class="mt-4 text-sm text-gray-500 flex flex-wrap gap-1">
                     <span
                         v-for="tag in item.pivot.tags"
                         :key="tag.id"
diff --git a/resources/js/Pages/Photos/Show.vue b/resources/js/Pages/Photos/Show.vue
index 343b6687..f41092b7 100644
--- a/resources/js/Pages/Photos/Show.vue
+++ b/resources/js/Pages/Photos/Show.vue
@@ -70,9 +70,9 @@ const copyItem = (photoItemId) => {
         });
 };
 
-const addTagToItem = (photoItem, tagId) => {
+const addTagsToItem = (photoItem, tagIds) => {
     axios.post(`/photo-items/${photoItem.id}/tags`, {
-        tag_id: tagId,
+        tag_ids: tagIds,
     }).then(() => {
         getPhoto();
     });
@@ -206,7 +206,7 @@ const onKeyDown = (event) => {
                                         :item="item"
                                         :tags="tags"
                                         @remove-item="removeItem"
-                                        @add-tag-to-item="addTagToItem"
+                                        @add-tags-to-item="addTagsToItem"
                                         @remove-tag-from-item="removeTagFromItem"
                                         @copy-item="copyItem"
                                         @toggle-picked-up="toggleItemPickedUp"
diff --git a/tests/Feature/Tagging/AddTagToPhotoItemTest.php b/tests/Feature/Tagging/AddTagToPhotoItemTest.php
index 8dec8508..33fa9fa0 100644
--- a/tests/Feature/Tagging/AddTagToPhotoItemTest.php
+++ b/tests/Feature/Tagging/AddTagToPhotoItemTest.php
@@ -14,7 +14,7 @@
     $tag = Tag::factory()->create();
 
     $response = $this->actingAs($user)->postJson("/photo-items/{$photoItem->id}/tags", [
-        'tag_id' => $tag->id,
+        'tag_ids' => [$tag->id],
     ]);
 
     $response->assertOk();
@@ -32,11 +32,11 @@
     $photoItem = PhotoItem::factory()->for($item)->for($photo)->create();
 
     $response = $this->actingAs($user)->postJson("/photo-items/{$photoItem->id}/tags", [
-        'tag_id' => '12345',
+        'tag_ids' => ['12345'],
     ]);
 
     $response->assertStatus(422);
-    $response->assertJsonValidationErrors('tag_id');
+    $response->assertJsonValidationErrors('tag_ids.0');
     $this->assertDatabaseCount('photo_item_tag', 0);
 });
 
@@ -48,7 +48,7 @@
     $tag = Tag::factory()->create();
 
     $response = $this->actingAs($user)->postJson("/photo-items/{$photoItem->id}/tags", [
-        'tag_id' => $tag->id,
+        'tag_ids' => [$tag->id],
     ]);
 
     $response->assertNotFound();

From e0ef5367b755ba3a0dacf611c173334b40d29be0 Mon Sep 17 00:00:00 2001
From: geni_jaho <jahogeni@gmail.com>
Date: Wed, 13 Mar 2024 13:30:55 +0100
Subject: [PATCH 2/4] Automatically add tags when selecting in the tag box

---
 .../js/Pages/Photos/Partials/PhotoItem.vue    | 44 ++++++++++++-------
 1 file changed, 28 insertions(+), 16 deletions(-)

diff --git a/resources/js/Pages/Photos/Partials/PhotoItem.vue b/resources/js/Pages/Photos/Partials/PhotoItem.vue
index fe40ae56..dfae199a 100644
--- a/resources/js/Pages/Photos/Partials/PhotoItem.vue
+++ b/resources/js/Pages/Photos/Partials/PhotoItem.vue
@@ -23,12 +23,12 @@ const emit = defineEmits([
     'copy-item',
 ]);
 
-const selectedMaterialTag = ref(props.tags.material.find(tag => props.item.pivot.tags?.find(t => t.id === tag.id)));
-const selectedBrandTag = ref(props.tags.brand.find(tag => props.item.pivot.tags?.find(t => t.id === tag.id)));
-const selectedEventTag = ref(props.tags.event.find(tag => props.item.pivot.tags?.find(t => t.id === tag.id)));
-const selectedStateTag = ref(props.tags.state.find(tag => props.item.pivot.tags?.find(t => t.id === tag.id)));
-const selectedContentTag = ref(props.tags.content.find(tag => props.item.pivot.tags?.find(t => t.id === tag.id)));
-const selectedSizeTag = ref(props.tags.size.find(tag => props.item.pivot.tags?.find(t => t.id === tag.id)));
+const selectedMaterialTag = ref(null);
+const selectedBrandTag = ref(null);
+const selectedEventTag = ref(null);
+const selectedStateTag = ref(null);
+const selectedContentTag = ref(null);
+const selectedSizeTag = ref(null);
 
 const selectedTagIds = computed(() => {
     return [
@@ -43,6 +43,13 @@ const selectedTagIds = computed(() => {
 
 const addTagsToItem = () => {
     emit("add-tags-to-item", props.item.pivot, selectedTagIds.value);
+
+    selectedMaterialTag.value = null;
+    selectedBrandTag.value = null;
+    selectedEventTag.value = null;
+    selectedStateTag.value = null;
+    selectedContentTag.value = null;
+    selectedSizeTag.value = null;
 };
 
 </script>
@@ -68,6 +75,7 @@ const addTagsToItem = () => {
                         :nullable="true"
                         placeholder="Material"
                         v-model="selectedMaterialTag"
+                        @change="addTagsToItem"
                     ></TagBox>
 
                     <TagBox
@@ -75,6 +83,7 @@ const addTagsToItem = () => {
                         :nullable="true"
                         placeholder="Brand"
                         v-model="selectedBrandTag"
+                        @change="addTagsToItem"
                     ></TagBox>
 
                     <TagBox
@@ -82,6 +91,7 @@ const addTagsToItem = () => {
                         :nullable="true"
                         placeholder="Content"
                         v-model="selectedContentTag"
+                        @change="addTagsToItem"
                     ></TagBox>
 
                     <TagBox
@@ -89,6 +99,7 @@ const addTagsToItem = () => {
                         :nullable="true"
                         placeholder="Size"
                         v-model="selectedSizeTag"
+                        @change="addTagsToItem"
                     ></TagBox>
 
                     <TagBox
@@ -96,6 +107,7 @@ const addTagsToItem = () => {
                         :nullable="true"
                         placeholder="State"
                         v-model="selectedStateTag"
+                        @change="addTagsToItem"
                     ></TagBox>
 
                     <TagBox
@@ -103,17 +115,8 @@ const addTagsToItem = () => {
                         :nullable="true"
                         placeholder="Event"
                         v-model="selectedEventTag"
+                        @change="addTagsToItem"
                     ></TagBox>
-
-                    <div class="flex justify-center">
-                        <PrimaryButton
-                            class="whitespace-nowrap"
-                            @click="addTagsToItem"
-                            :disabled="selectedTagIds.length === 0"
-                        >
-                            Add Selected Tags
-                        </PrimaryButton>
-                    </div>
                 </div>
 
                 <div v-if="item.pivot.tags?.length" class="mt-4 text-sm text-gray-500 flex flex-wrap gap-1">
@@ -128,6 +131,15 @@ const addTagsToItem = () => {
                         {{ tag.name }}
                     </span>
                 </div>
+
+                <div v-if="selectedTagIds.length" class="mt-4 flex justify-center">
+                    <PrimaryButton
+                        class="whitespace-nowrap"
+                        @click="addTagsToItem"
+                    >
+                        Add Selected Tags
+                    </PrimaryButton>
+                </div>
             </div>
         </div>
         <div class="px-4 py-5 sm:p-6 flex flex-row justify-between">

From de24ae91f364e0bcae38296450917d2d6cecd913 Mon Sep 17 00:00:00 2001
From: geni_jaho <jahogeni@gmail.com>
Date: Wed, 13 Mar 2024 14:11:57 +0100
Subject: [PATCH 3/4] Unify tagging in bulk tagging modal

---
 resources/js/Components/TagBox.vue            |   7 +-
 .../js/Pages/Photos/Partials/NewPhotoItem.vue | 206 ++++++++----------
 2 files changed, 92 insertions(+), 121 deletions(-)

diff --git a/resources/js/Components/TagBox.vue b/resources/js/Components/TagBox.vue
index b71d7954..e0a5e701 100644
--- a/resources/js/Components/TagBox.vue
+++ b/resources/js/Components/TagBox.vue
@@ -25,10 +25,6 @@ const props = defineProps({
         type: String,
         default: '',
     },
-    dropdownWidth: {
-        type: String,
-        default: 'w-full md:w-96 right-0',
-    },
 });
 
 defineEmits(['update:modelValue']);
@@ -106,8 +102,7 @@ onMounted(() => {
                     @after-leave="query = ''"
                 >
                     <ComboboxOptions
-                        class="absolute z-10 mt-1 max-h-96 overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black/5 focus:outline-none sm:text-sm"
-                        :class="dropdownWidth"
+                        class="absolute z-10 mt-1 max-h-96 w-full 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 !== ''"
diff --git a/resources/js/Pages/Photos/Partials/NewPhotoItem.vue b/resources/js/Pages/Photos/Partials/NewPhotoItem.vue
index 72d6f5c4..a02b5150 100644
--- a/resources/js/Pages/Photos/Partials/NewPhotoItem.vue
+++ b/resources/js/Pages/Photos/Partials/NewPhotoItem.vue
@@ -14,12 +14,23 @@ const props = defineProps({
 
 const item = ref(props.propItem);
 
-const selectedMaterialTag = ref(props.tags.material[0]);
-const selectedBrandTag = ref(props.tags.brand[0]);
-const selectedEventTag = ref(props.tags.event[0]);
-const selectedStateTag = ref(props.tags.state[0]);
-const selectedContentTag = ref(props.tags.content[0]);
-const selectedSizeTag = ref(props.tags.size[0]);
+const selectedMaterialTag = ref(null);
+const selectedBrandTag = ref(null);
+const selectedEventTag = ref(null);
+const selectedStateTag = ref(null);
+const selectedContentTag = ref(null);
+const selectedSizeTag = ref(null);
+
+const selectedTagIds = computed(() => {
+    return [
+        selectedMaterialTag.value?.id,
+        selectedBrandTag.value?.id,
+        selectedEventTag.value?.id,
+        selectedStateTag.value?.id,
+        selectedContentTag.value?.id,
+        selectedSizeTag.value?.id,
+    ].filter(tag => tag);
+});
 
 const tagNames = computed(() => {
     return item.value.tag_ids.map(function (tagId) {
@@ -32,13 +43,17 @@ const tagNames = computed(() => {
     });
 });
 
-const addTagToItem = (tag) => {
-    if (item.value.tag_ids.find(itemTag => itemTag === tag.id)) {
-        return;
-    }
+const addTagsToItem = () => {
+    item.value.tag_ids = [...new Set([...item.value.tag_ids, ...selectedTagIds.value])];
 
-    item.value.tag_ids.push(tag.id);
     emit('change', item.value);
+
+    selectedMaterialTag.value = null;
+    selectedBrandTag.value = null;
+    selectedEventTag.value = null;
+    selectedStateTag.value = null;
+    selectedContentTag.value = null;
+    selectedSizeTag.value = null;
 };
 
 const removeTagFromItem = (tagId) => {
@@ -75,110 +90,63 @@ const copyItem = () => {
                     <i class="fas fa-fw fa-trash-alt text-xs"></i>
                 </IconDangerButton>
             </div>
-            <div class="mt-6">
-                <div class="flex flex-row justify-between space-x-2">
-                    <TagBox
-                        class="w-full"
-                        dropdownWidth="w-full"
-                        :items="tags.material"
-                        v-model="selectedMaterialTag"
-                    ></TagBox>
-
-                    <PrimaryButton
-                        class="whitespace-nowrap"
-                        @click="addTagToItem(selectedMaterialTag)"
-                        :disabled="!selectedMaterialTag"
-                    >
-                        Add Material
-                    </PrimaryButton>
-                </div>
-
-                <div class="mt-2 flex flex-row justify-between space-x-2">
-                    <TagBox
-                        class="w-full"
-                        dropdownWidth="w-full"
-                        :items="tags.brand"
-                        v-model="selectedBrandTag"
-                    ></TagBox>
-
-                    <PrimaryButton
-                        class="whitespace-nowrap"
-                        @click="addTagToItem(selectedBrandTag)"
-                        :disabled="!selectedBrandTag"
-                    >
-                        Add Brand
-                    </PrimaryButton>
-                </div>
-
-                <div class="mt-2 flex flex-row justify-between space-x-2">
-                    <TagBox
-                        class="w-full"
-                        dropdownWidth="w-full"
-                        :items="tags.content"
-                        v-model="selectedContentTag"
-                    ></TagBox>
-
-                    <PrimaryButton
-                        class="whitespace-nowrap"
-                        @click="addTagToItem(selectedContentTag)"
-                        :disabled="!selectedContentTag"
-                    >
-                        Add Content
-                    </PrimaryButton>
-                </div>
-
-                <div class="mt-2 flex flex-row justify-between space-x-2">
-                    <TagBox
-                        class="w-full"
-                        dropdownWidth="w-full"
-                        :items="tags.size"
-                        v-model="selectedSizeTag"
-                    ></TagBox>
-
-                    <PrimaryButton
-                        class="whitespace-nowrap"
-                        @click="addTagToItem(selectedSizeTag)"
-                        :disabled="!selectedSizeTag"
-                    >
-                        Add Size
-                    </PrimaryButton>
-                </div>
-
-                <div class="mt-2 flex flex-row justify-between space-x-2">
-                    <TagBox
-                        class="w-full"
-                        dropdownWidth="w-full"
-                        :items="tags.state"
-                        v-model="selectedStateTag"
-                    ></TagBox>
-
-                    <PrimaryButton
-                        class="whitespace-nowrap"
-                        @click="addTagToItem(selectedStateTag)"
-                        :disabled="!selectedStateTag"
-                    >
-                        Add State
-                    </PrimaryButton>
-                </div>
-
-                <div class="mt-2 flex flex-row justify-between space-x-2">
-                    <TagBox
-                        class="w-full"
-                        dropdownWidth="w-full"
-                        :items="tags.event"
-                        v-model="selectedEventTag"
-                    ></TagBox>
-
-                    <PrimaryButton
-                        class="whitespace-nowrap"
-                        @click="addTagToItem(selectedEventTag)"
-                        :disabled="!selectedEventTag"
-                    >
-                        Add Event
-                    </PrimaryButton>
-                </div>
+            <div class="mt-6 space-y-2">
+                <TagBox
+                    class="w-full"
+                    :items="tags.material"
+                    v-model="selectedMaterialTag"
+                    :nullable="true"
+                    placeholder="Material"
+                    @change="addTagsToItem"
+                ></TagBox>
+
+                <TagBox
+                    class="w-full"
+                    :items="tags.brand"
+                    v-model="selectedBrandTag"
+                    :nullable="true"
+                    placeholder="Brand"
+                    @change="addTagsToItem"
+                ></TagBox>
+
+                <TagBox
+                    class="w-full"
+                    :items="tags.content"
+                    v-model="selectedContentTag"
+                    :nullable="true"
+                    placeholder="Content"
+                    @change="addTagsToItem"
+                ></TagBox>
+
+                <TagBox
+                    class="w-full"
+                    :items="tags.size"
+                    v-model="selectedSizeTag"
+                    :nullable="true"
+                    placeholder="Size"
+                    @change="addTagsToItem"
+                ></TagBox>
+
+                <TagBox
+                    class="w-full"
+                    :items="tags.state"
+                    v-model="selectedStateTag"
+                    :nullable="true"
+                    placeholder="State"
+                    @change="addTagsToItem"
+                ></TagBox>
+
+                <TagBox
+                    class="w-full"
+                    :items="tags.event"
+                    v-model="selectedEventTag"
+                    :nullable="true"
+                    placeholder="Event"
+                    @change="addTagsToItem"
+                ></TagBox>
+            </div>
 
-                <div class="mt-4 text-sm text-gray-500 flex flex-wrap gap-1">
+            <div class="mt-4 text-sm text-gray-500 flex flex-wrap gap-1">
                     <span
                         v-for="tag in tagNames"
                         :key="tag.id"
@@ -189,7 +157,15 @@ const copyItem = () => {
                              aria-hidden="true"><circle cx="3" cy="3" r="3"/></svg>
                         {{ tag.name }}
                     </span>
-                </div>
+            </div>
+
+            <div v-if="selectedTagIds.length" class="mt-4 flex justify-center">
+                <PrimaryButton
+                    class="whitespace-nowrap"
+                    @click="addTagsToItem"
+                >
+                    Add Selected Tags
+                </PrimaryButton>
             </div>
         </div>
         <div class="px-4 py-5 sm:p-6 flex flex-row justify-between">

From cdc6ec4eaa6c210bc894b382160dd391ae9e26b4 Mon Sep 17 00:00:00 2001
From: geni_jaho <jahogeni@gmail.com>
Date: Wed, 13 Mar 2024 14:17:44 +0100
Subject: [PATCH 4/4] Small test improvement

---
 tests/Feature/Tagging/AddTagToPhotoItemTest.php | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/tests/Feature/Tagging/AddTagToPhotoItemTest.php b/tests/Feature/Tagging/AddTagToPhotoItemTest.php
index 33fa9fa0..d8afc5e3 100644
--- a/tests/Feature/Tagging/AddTagToPhotoItemTest.php
+++ b/tests/Feature/Tagging/AddTagToPhotoItemTest.php
@@ -6,22 +6,27 @@
 use App\Models\Tag;
 use App\Models\User;
 
-test('a user can add a tag to an item of a photo', function () {
+test('a user can add tags to an item of a photo', function () {
     $user = User::factory()->create();
     $photo = Photo::factory()->for($user)->create();
     $item = Item::factory()->create();
     $photoItem = PhotoItem::factory()->for($item)->for($photo)->create();
-    $tag = Tag::factory()->create();
+    $tagA = Tag::factory()->create();
+    $tagB = Tag::factory()->create();
 
     $response = $this->actingAs($user)->postJson("/photo-items/{$photoItem->id}/tags", [
-        'tag_ids' => [$tag->id],
+        'tag_ids' => [$tagA->id, $tagB->id],
     ]);
 
     $response->assertOk();
-    $this->assertDatabaseCount('photo_item_tag', 1);
+    $this->assertDatabaseCount('photo_item_tag', 2);
+    $this->assertDatabaseHas('photo_item_tag', [
+        'photo_item_id' => $photoItem->id,
+        'tag_id' => $tagA->id,
+    ]);
     $this->assertDatabaseHas('photo_item_tag', [
         'photo_item_id' => $photoItem->id,
-        'tag_id' => $tag->id,
+        'tag_id' => $tagB->id,
     ]);
 });