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/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>
+        </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>
 
@@ -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();
-    navigateTo(`/location/${data.id}`);
+
+    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>