diff --git a/frontend/components/Base/Modal.vue b/frontend/components/Base/Modal.vue index 0aee636..c1e7591 100644 --- a/frontend/components/Base/Modal.vue +++ b/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); + } + }); diff --git a/frontend/components/Item/CreateModal.vue b/frontend/components/Item/CreateModal.vue index 1b9bec5..5c1bdee 100644 --- a/frontend/components/Item/CreateModal.vue +++ b/frontend/components/Item/CreateModal.vue @@ -1,20 +1,14 @@ Create Item - + - + - + @@ -26,12 +20,17 @@ - Create and Add Another + + Create and Add Another + - + + + use Shift + Enter to create and add another + @@ -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(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); + } + } diff --git a/frontend/components/Label/CreateModal.vue b/frontend/components/Label/CreateModal.vue index 829ce8c..4b0ee48 100644 --- a/frontend/components/Label/CreateModal.vue +++ b/frontend/components/Label/CreateModal.vue @@ -1,7 +1,7 @@ Create Label - + - Create + + + Create + + + + + + + + Create and Add Another + + + + - + + + use Shift + Enter to create and add another + @@ -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(); - navigateTo(`/label/${data.id}`); + + 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); + } } diff --git a/frontend/components/Location/CreateModal.vue b/frontend/components/Location/CreateModal.vue index 579b962..f87715a 100644 --- a/frontend/components/Location/CreateModal.vue +++ b/frontend/components/Location/CreateModal.vue @@ -1,7 +1,7 @@ Create Location - + - Create + + + Create + + + + + + + + Create and Add Another + + + + - + + + use Shift + Enter to create and add another + @@ -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); + } }
+ use Shift + Enter to create and add another +