Save the tag shortcut name automatically

GeniJaho · Mar 25, 2024 · bf36d35 · bf36d35
1 parent 629fffe
commit bf36d35
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 11 deletions.
diff --git a/resources/js/Pages/Photos/Partials/BulkTagModal.vue b/resources/js/Pages/Photos/Partials/BulkTagModal.vue
@@ -90,7 +90,7 @@ const maxWidthClass = computed(() => {
                                 <slot name="content" />
                             </div>
 
-                            <div class="flex flex-row justify-end rounded-b-lg px-6 py-4 bg-gray-100 dark:bg-gray-700 text-right">
+                            <div class="flex flex-row items-center justify-end rounded-b-lg px-6 py-4 bg-gray-100 dark:bg-gray-700 text-right">
                                 <slot name="footer" />
                             </div>
                         </div>

diff --git a/resources/js/Pages/TagShortcuts/Index.vue b/resources/js/Pages/TagShortcuts/Index.vue
@@ -31,6 +31,7 @@ const filteredTagShortcuts = computed(() => {
 
 const openModal = (tagShortcut = null) => {
     tagShortcutState.value.setTagShortcut(tagShortcut);
+    tagShortcutState.value.setTagShortcutName(tagShortcut);
     showModal.value = true;
 };
 
@@ -57,7 +58,10 @@ provide('tags', readonly(props.tags));
             <div class="sm:flex sm:items-center">
                 <div class="sm:flex-auto">
                     <h1 class="text-base font-semibold leading-6 text-gray-900 dark:text-gray-100">Tag Shortcuts</h1>
-                    <p class="mt-2 text-sm text-gray-700 dark:text-gray-200">A list of all the tag shortcuts in your account.</p>
+                    <p class="mt-2 text-sm text-gray-700 dark:text-gray-200">
+                        A list of all the tag shortcuts in your account.
+                        Shortcuts with no items will not appear in your photo tagging pages.
+                    </p>
                 </div>
             </div>
             <div class="mt-6 flex justify-between">

diff --git a/resources/js/Pages/TagShortcuts/Partials/TagShortcutModal.vue b/resources/js/Pages/TagShortcuts/Partials/TagShortcutModal.vue
@@ -10,6 +10,7 @@ import {tagShortcutState} from "@/Pages/TagShortcuts/stores/TagShortcutStore";
 import TagBox from "@/Components/TagBox.vue";
 import {inject, ref} from "vue";
 import PivotItem from "@/Pages/Photos/Partials/PivotItem.vue";
+import debounce from "lodash.debounce";
 
 const emit = defineEmits(['close']);
 
@@ -33,6 +34,14 @@ const addItem = () => {
     });
 };
 
+const updateName = debounce(() => {
+    if (! tagShortcutState.value.tagShortcut) {
+        return;
+    }
+
+    tagShortcutState.value.save();
+}, 300);
+
 const close = () => {
     emit('close');
 };
@@ -46,7 +55,8 @@ const close = () => {
             </div>
             <div class="px-6 text-sm text-gray-700 dark:text-gray-200">
                 Add items and tags to the shortcut. You can also set the quantity, and mark it as picked up, recycled,
-                or deposit.
+                or deposit.<br><br>
+                The shortcut name and items are saved automatically after you create the shortcut.
             </div>
         </template>
 
@@ -58,19 +68,17 @@ const close = () => {
                             <TextInput
                                 id="shortcut"
                                 v-model="tagShortcutState.shortcutName"
+                                @input="updateName"
                                 type="text"
                                 class="block w-full"
                                 autocomplete="shortcut"
                                 placeholder="Shortcut"
                             />
                             <InputError :message="tagShortcutState.error" class="mt-2" />
-                            <ActionMessage :on="tagShortcutState.message.length > 0" class="mt-2">
-                                {{ tagShortcutState.message }}
-                            </ActionMessage>
                         </div>
-                        <div class="ml-4">
+                        <div v-if="! tagShortcutState.tagShortcut" class="ml-4">
                             <PrimaryButton :class="{ 'opacity-25': tagShortcutState.processing }" :disabled="tagShortcutState.processing">
-                                Save
+                                Create Shortcut
                             </PrimaryButton>
                         </div>
                     </div>
@@ -125,6 +133,9 @@ const close = () => {
         </template>
 
         <template #footer>
+            <ActionMessage :on="tagShortcutState.message.length > 0" class="mr-4">
+                {{ tagShortcutState.message }}
+            </ActionMessage>
             <SecondaryButton @click="close">
                 Close
             </SecondaryButton>

diff --git a/resources/js/Pages/TagShortcuts/stores/TagShortcutStore.js b/resources/js/Pages/TagShortcuts/stores/TagShortcutStore.js
@@ -11,14 +11,20 @@ export let tagShortcutState = ref({
 
     setTagShortcut(tagShortcut) {
         this.tagShortcut = tagShortcut;
+    },
+
+    setTagShortcutName(tagShortcut) {
         this.shortcutName = tagShortcut?.shortcut || '';
     },
 
     reloadTagShortcut() {
         if (! this.tagShortcut) return;
 
         axios.get(route('tag-shortcuts.show', this.tagShortcut.id))
-             .then((r) => this.setTagShortcut(r.data.tagShortcut));
+             .then((r) => {
+                 this.setTagShortcut(r.data.tagShortcut);
+                 this.showSavedMessage();
+             });
     },
 
     reset() {
@@ -38,14 +44,18 @@ export let tagShortcutState = ref({
             this.setTagShortcut(r.data.tagShortcut);
             this.processing = false;
             this.error = '';
-            this.message = 'Saved.';
-            setTimeout(() => this.message = '', 3000);
+            this.showSavedMessage();
         }).catch((e) => {
             this.processing = false;
             this.error = e.response.data.message;
         });
     },
 
+    showSavedMessage() {
+        this.message = 'Saved.';
+        setTimeout(() => this.message = '', 2000);
+    },
+
     delete(tagShortcutId) {
        axios.delete(route('tag-shortcuts.destroy', tagShortcutId))
               .then(() => router.reload());