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

Former-commit-id: 22bbaae08f
This commit is contained in:
Hayden 2023-07-31 09:53:26 -08:00 • committed by GitHub
parent 0de6c2338d
commit 97e137c411
4 changed files with 124 additions and 33 deletions
Download patch file Download diff file Expand all files Collapse all files

55
frontend/components/Item/CreateModal.vue
View file

@ -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>