mirror of
https://github.com/hay-kot/homebox.git
synced 2025-08-02 07:40:28 +00:00
fix create form errors
This commit is contained in:
Hayden
parent
8d8f8e7014
commit
b53e4cf524
5 changed files with 49 additions and 71 deletions
|
|
@ -15,7 +15,7 @@
|
|||
<script setup lang="ts">
|
||||
type Props = {
|
||||
modelValue: string;
|
||||
placeholder: string;
|
||||
placeholder?: string;
|
||||
label: string;
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -1,14 +1,14 @@
|
|||
<template>
|
||||
<BaseModal v-model="modal">
|
||||
<template #title> Create Item </template>
|
||||
<div @keyup="keySubmit">
|
||||
<form @submit.prevent="create()">
|
||||
<LocationSelector v-model="form.location" />
|
||||
<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 class="rounded-r-none" :loading="loading" @click="create(true)">
|
||||
<BaseButton class="rounded-r-none" :loading="loading" type="submit">
|
||||
<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" />
|
||||
|
|
@ -21,13 +21,13 @@
|
|||
</label>
|
||||
<ul tabindex="0" class="dropdown-content menu p-2 shadow bg-base-100 rounded-box w-64">
|
||||
<li>
|
||||
<button type="button" @click.prevent="create(false)">Create and Add Another</button>
|
||||
<button type="button" @click="create(false)">Create and Add Another</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
<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>
|
||||
|
|
@ -84,6 +84,8 @@
|
|||
labels: [] as LabelOut[],
|
||||
});
|
||||
|
||||
const { shift } = useMagicKeys();
|
||||
|
||||
whenever(
|
||||
() => modal.value,
|
||||
() => {
|
||||
|
|
@ -102,11 +104,15 @@
|
|||
}
|
||||
);
|
||||
|
||||
async function create(close = false) {
|
||||
async function create(close = true) {
|
||||
if (!form.location) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (shift.value) {
|
||||
close = false;
|
||||
}
|
||||
|
||||
const out: ItemCreate = {
|
||||
parentId: null,
|
||||
name: form.name,
|
||||
|
|
@ -135,18 +141,4 @@
|
|||
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>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<BaseModal v-model="modal">
|
||||
<template #title> Create Label </template>
|
||||
<div @keyup="keySubmit">
|
||||
<form @submit.prevent="create()">
|
||||
<FormTextField
|
||||
ref="locationNameRef"
|
||||
v-model="form.name"
|
||||
|
|
@ -12,22 +12,20 @@
|
|||
<FormTextArea v-model="form.description" label="Label Description" />
|
||||
<div class="modal-action">
|
||||
<div class="flex justify-center">
|
||||
<BaseButton class="rounded-r-none" type="submit" :loading="loading" @click.prevent="create(true)">
|
||||
Create
|
||||
</BaseButton>
|
||||
<BaseButton class="rounded-r-none" :loading="loading" type="submit"> 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>
|
||||
<button type="button" @click="create(false)">Create and Add Another</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
<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>
|
||||
|
|
@ -69,7 +67,13 @@
|
|||
const api = useUserApi();
|
||||
const toast = useNotifier();
|
||||
|
||||
async function create(close: boolean) {
|
||||
const { shift } = useMagicKeys();
|
||||
|
||||
async function create(close = true) {
|
||||
if (shift.value) {
|
||||
close = false;
|
||||
}
|
||||
|
||||
const { error, data } = await api.labels.create(form);
|
||||
if (error) {
|
||||
toast.error("Couldn't create label");
|
||||
|
|
@ -84,16 +88,4 @@
|
|||
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>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<BaseModal v-model="modal">
|
||||
<template #title> Create Location </template>
|
||||
<div @keyup="keySubmit">
|
||||
<form @submit.prevent="create()">
|
||||
<FormTextField
|
||||
ref="locationNameRef"
|
||||
v-model="form.name"
|
||||
|
|
@ -13,22 +13,20 @@
|
|||
<LocationSelector v-model="form.parent" />
|
||||
<div class="modal-action">
|
||||
<div class="flex justify-center">
|
||||
<BaseButton class="rounded-r-none" type="submit" :loading="loading" @click="create(true)">
|
||||
Create
|
||||
</BaseButton>
|
||||
<BaseButton class="rounded-r-none" type="submit" :loading="loading"> 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>
|
||||
<button type="button" @click="create(false)">Create and Add Another</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
<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>
|
||||
|
|
@ -71,9 +69,15 @@
|
|||
const api = useUserApi();
|
||||
const toast = useNotifier();
|
||||
|
||||
async function create(close: boolean) {
|
||||
const { shift } = useMagicKeys();
|
||||
|
||||
async function create(close = true) {
|
||||
loading.value = true;
|
||||
|
||||
if (shift.value) {
|
||||
close = false;
|
||||
}
|
||||
|
||||
const { data, error } = await api.locations.create({
|
||||
name: form.name,
|
||||
description: form.description,
|
||||
|
|
@ -94,16 +98,4 @@
|
|||
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>
|
||||
|
|
|
|||
|
|
@ -288,20 +288,22 @@
|
|||
<BaseModal v-model="passwordChange.dialog">
|
||||
<template #title> Change Password </template>
|
||||
|
||||
<FormPassword v-model="passwordChange.current" label="Current Password" />
|
||||
<FormPassword v-model="passwordChange.new" label="New Password" />
|
||||
<PasswordScore v-model:valid="passwordChange.isValid" :password="passwordChange.new" />
|
||||
<form @submit.prevent="changePassword">
|
||||
<FormPassword v-model="passwordChange.current" label="Current Password" placeholder="" />
|
||||
<FormPassword v-model="passwordChange.new" label="New Password" placeholder="" />
|
||||
<PasswordScore v-model:valid="passwordChange.isValid" :password="passwordChange.new" />
|
||||
|
||||
<div class="flex">
|
||||
<BaseButton
|
||||
class="ml-auto"
|
||||
:loading="passwordChange.loading"
|
||||
:disabled="!passwordChange.isValid"
|
||||
@click="changePassword"
|
||||
>
|
||||
Submit
|
||||
</BaseButton>
|
||||
</div>
|
||||
<div class="flex">
|
||||
<BaseButton
|
||||
class="ml-auto"
|
||||
:loading="passwordChange.loading"
|
||||
:disabled="!passwordChange.isValid"
|
||||
type="submit"
|
||||
>
|
||||
Submit
|
||||
</BaseButton>
|
||||
</div>
|
||||
</form>
|
||||
</BaseModal>
|
||||
|
||||
<BaseModal v-model="notifierDialog">
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue