Clear selection after tagging in bulk

GeniJaho · Mar 12, 2024 · d3a42f1 · d3a42f1
1 parent be0acc8
commit d3a42f1
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 2 deletions.
diff --git 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/Index.vue b/resources/js/Pages/Photos/Index.vue
@@ -134,6 +134,7 @@ const filter = (filters) => {
                         :photoIds="selectedPhotos"
                         :tags="tags"
                         :items="items"
+                        @closeModalWithSuccess="clearSelection"
                     ></BulkTag>
                 </div>
 

diff --git a/resources/js/Pages/Photos/Partials/BulkTag.vue b/resources/js/Pages/Photos/Partials/BulkTag.vue
@@ -14,6 +14,8 @@ const props = defineProps({
     tags: Object,
 });
 
+const emit = defineEmits(['closeModalWithSuccess'])
+
 const page = usePage();
 const selectedItem = ref(null);
 const showModal = ref(false);
@@ -69,7 +71,11 @@ const closeModalWithSuccess = () => {
     form.reset();
     message.value = 'Tagged successfully!';
 
-    setTimeout(() => showModal.value = false, 3000);
+    setTimeout(() => {
+        showModal.value = false;
+
+        emit('closeModalWithSuccess');
+    }, 3000);
 };
 
 const closeModal = () => {