feat: add support for create + add more for all create modals and support k… (#526)

* add support for create + add more for all create modals and support keyboard bindings

* listen for esc to close modals

Former-commit-id: 22bbaae08f

frontend/components/Base/Modal.vue

@@ -32,6 +32,12 @@
     },
   });
 
+  function escClose(e: KeyboardEvent) {
+    if (e.key === "Escape") {
+      close();
+    }
+  }
+
   function close() {
     if (props.readonly) {
       emit("cancel");
@@ -42,4 +48,12 @@
 
   const modalId = useId();
   const modal = useVModel(props, "modelValue", emit);
+
+  watchEffect(() => {
+    if (modal.value) {
+      document.addEventListener("keydown", escClose);
+    } else {
+      document.removeEventListener("keydown", escClose);
+    }
+  });
 </script>

frontend/components/Item/CreateModal.vue

@@ -1,20 +1,14 @@
 <template>
   <BaseModal v-model="modal">
     <template #title> Create Item </template>
-    <form @submit.prevent="create(true)">
+    <div @keyup="keySubmit">
       <LocationSelector v-model="form.location" />
-      <FormTextField
-        ref="locationNameRef"
-        v-model="form.name"
-        :trigger-focus="focused"
-        :autofocus="true"
-        label="Item Name"
-      />
+      <FormTextField ref="nameInput" v-model="form.name" :trigger-focus="focused" :autofocus="true" label="Item Name" />
       <FormTextArea v-model="form.description" label="Item Description" />
       <FormMultiselect v-model="form.labels" label="Labels" :items="labels ?? []" />
       <div class="modal-action">
         <div class="flex justify-center">
-          <BaseButton ref="submitBtn" type="submit" class="rounded-r-none" :loading="loading">
+          <BaseButton class="rounded-r-none" :loading="loading" @click="create(true)">
             <template #icon>
               <Icon name="mdi-package-variant" class="swap-off h-5 w-5" />
               <Icon name="mdi-package-variant-closed" class="swap-on h-5 w-5" />
@@ -26,12 +20,17 @@
               <Icon class="h-5 w-5" name="mdi-chevron-down" />
             </label>
             <ul tabindex="0" class="dropdown-content menu p-2 shadow bg-base-100 rounded-box w-64">
-              <li><button @click.prevent="create(false)">Create and Add Another</button></li>
+              <li>
+                <button type="button" @click.prevent="create(false)">Create and Add Another</button>
+              </li>
             </ul>
           </div>
         </div>
       </div>
-    </form>
+    </div>
+    <p class="text-sm text-center mt-4">
+      use <kbd class="kbd kbd-xs">Shift</kbd> + <kbd class="kbd kbd-xs"> Enter </kbd> to create and add another
+    </p>
   </BaseModal>
 </template>
 
@@ -47,6 +46,15 @@
     },
   });
 
+  const api = useUserApi();
+  const toast = useNotifier();
+
+  const locationsStore = useLocationStore();
+  const locations = computed(() => locationsStore.allLocations);
+
+  const labelStore = useLabelStore();
+  const labels = computed(() => labelStore.labels);
+
   const route = useRoute();
 
   const labelId = computed(() => {
@@ -63,16 +71,7 @@
     return null;
   });
 
-  const api = useUserApi();
-  const toast = useNotifier();
-
-  const locationsStore = useLocationStore();
-  const locations = computed(() => locationsStore.allLocations);
-
-  const labelStore = useLabelStore();
-  const labels = computed(() => labelStore.labels);
-
-  const submitBtn = ref(null);
+  const nameInput = ref<HTMLInputElement | null>(null);
 
   const modal = useVModel(props, "modelValue");
   const loading = ref(false);
@@ -136,4 +135,18 @@
       navigateTo(`/item/${data.id}`);
     }
   }
+
+  async function keySubmit(e: KeyboardEvent) {
+    // Shift + Enter
+    if (e.shiftKey && e.key === "Enter") {
+      console.log("Shift + Enter");
+      e.preventDefault();
+      await create(false);
+      focused.value = true;
+    } else if (e.key === "Enter") {
+      e.preventDefault();
+      console.log("Enter");
+      await create(true);
+    }
+  }
 </script>

frontend/components/Label/CreateModal.vue

@@ -1,7 +1,7 @@
 <template>
   <BaseModal v-model="modal">
     <template #title> Create Label </template>
-    <form @submit.prevent="create">
+    <div @keyup="keySubmit">
       <FormTextField
         ref="locationNameRef"
         v-model="form.name"
@@ -11,9 +11,26 @@
       />
       <FormTextArea v-model="form.description" label="Label Description" />
       <div class="modal-action">
-        <BaseButton type="submit" :loading="loading"> Create </BaseButton>
+        <div class="flex justify-center">
+          <BaseButton class="rounded-r-none" type="submit" :loading="loading" @click.prevent="create(true)">
+            Create
+          </BaseButton>
+          <div class="dropdown dropdown-top">
+            <label tabindex="0" class="btn rounded-l-none rounded-r-xl">
+              <Icon class="h-5 w-5" name="mdi-chevron-down" />
+            </label>
+            <ul tabindex="0" class="dropdown-content menu p-2 shadow bg-base-100 rounded-box w-64">
+              <li>
+                <button @click.prevent="create(false)">Create and Add Another</button>
+              </li>
+            </ul>
           </div>
-    </form>
+        </div>
+      </div>
+    </div>
+    <p class="text-sm text-center mt-4">
+      use <kbd class="kbd kbd-xs">Shift</kbd> + <kdb class="kbd kbd-xs"> Enter </kdb> to create and add another
+    </p>
   </BaseModal>
 </template>
 
@@ -39,7 +56,6 @@
     form.description = "";
     form.color = "";
     focused.value = false;
-    modal.value = false;
     loading.value = false;
   }
 
@@ -53,7 +69,7 @@
   const api = useUserApi();
   const toast = useNotifier();
 
-  async function create() {
+  async function create(close: boolean) {
     const { error, data } = await api.labels.create(form);
     if (error) {
       toast.error("Couldn't create label");
@@ -62,6 +78,22 @@
 
     toast.success("Label created");
     reset();
+
+    if (close) {
+      modal.value = false;
       navigateTo(`/label/${data.id}`);
     }
+  }
+
+  async function keySubmit(e: KeyboardEvent) {
+    // Shift + Enter
+    if (e.shiftKey && e.key === "Enter") {
+      e.preventDefault();
+      await create(false);
+      focused.value = true;
+    } else if (e.key === "Enter") {
+      e.preventDefault();
+      await create(true);
+    }
+  }
 </script>

frontend/components/Location/CreateModal.vue

@@ -1,7 +1,7 @@
 <template>
   <BaseModal v-model="modal">
     <template #title> Create Location </template>
-    <form @submit.prevent="create">
+    <div @keyup="keySubmit">
       <FormTextField
         ref="locationNameRef"
         v-model="form.name"
@@ -12,9 +12,26 @@
       <FormTextArea v-model="form.description" label="Location Description" />
       <LocationSelector v-model="form.parent" />
       <div class="modal-action">
-        <BaseButton type="submit" :loading="loading"> Create </BaseButton>
+        <div class="flex justify-center">
+          <BaseButton class="rounded-r-none" type="submit" :loading="loading" @click="create(true)">
+            Create
+          </BaseButton>
+          <div class="dropdown dropdown-top">
+            <label tabindex="0" class="btn rounded-l-none rounded-r-xl">
+              <Icon class="h-5 w-5" name="mdi-chevron-down" />
+            </label>
+            <ul tabindex="0" class="dropdown-content menu p-2 shadow bg-base-100 rounded-box w-64">
+              <li>
+                <button @click.prevent="create(false)">Create and Add Another</button>
+              </li>
+            </ul>
           </div>
-    </form>
+        </div>
+      </div>
+    </div>
+    <p class="text-sm text-center mt-4">
+      use <kbd class="kbd kbd-xs">Shift</kbd> + <kbd class="kbd kbd-xs"> Enter </kbd> to create and add another
+    </p>
   </BaseModal>
 </template>
 
@@ -48,14 +65,13 @@
     form.description = "";
     form.parent = null;
     focused.value = false;
-    modal.value = false;
     loading.value = false;
   }
 
   const api = useUserApi();
   const toast = useNotifier();
 
-  async function create() {
+  async function create(close: boolean) {
     loading.value = true;
 
     const { data, error } = await api.locations.create({
@@ -72,6 +88,22 @@
       toast.success("Location created");
     }
     reset();
+
+    if (close) {
+      modal.value = false;
       navigateTo(`/location/${data.id}`);
     }
+  }
+
+  async function keySubmit(e: KeyboardEvent) {
+    // Shift + Enter
+    if (e.shiftKey && e.key === "Enter") {
+      e.preventDefault();
+      await create(false);
+      focused.value = true;
+    } else if (e.key === "Enter") {
+      e.preventDefault();
+      await create(true);
+    }
+  }
 </script>