vbatts/homebox
1
0
Fork 0
forked from mirrors/homebox
Code Pull requests Activity

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

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

* listen for esc to close modals
This commit is contained in:
Hayden 2023-07-31 09:53:26 -08:00 • committed by GitHub
parent 8c7d91ea52
commit 22bbaae08f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 124 additions and 33 deletions
Download patch file Download diff file Expand all files Collapse all files

44
frontend/components/Label/CreateModal.vue
View file

@ -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>
</div>
</div>
</form>
</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();
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);
}
}
</script>