mirror of
https://github.com/hay-kot/homebox.git
synced 2025-06-27 06:08:36 +00:00
feat: WebSocket based implementation of server sent events for cache busting (#527)
* rough implementation of WS based event system for server side notifications of mutation * fix test construction * fix deadlock on event bus * disable linter error * add item mutation events * remove old event bus code * refactor event system to use composables * refresh items table when new item is added * fix create form errors * cleanup unnecessary calls * fix importer erorrs + limit fn calls on import
This commit is contained in:
Hayden
GitHub
parent
cceec06148
commit
2cbcc8bb1d
31 changed files with 458 additions and 208 deletions
|
|
@ -86,8 +86,6 @@
|
|||
importRef.value?.click();
|
||||
}
|
||||
|
||||
const eventBus = useEventBus();
|
||||
|
||||
async function submitCsvFile() {
|
||||
if (!importCsv.value) {
|
||||
toast.error("Please select a file to import.");
|
||||
|
|
@ -111,8 +109,6 @@
|
|||
importRef.value.value = "";
|
||||
}
|
||||
|
||||
eventBus.emit(EventTypes.InvalidStores);
|
||||
|
||||
toast.success("Import successful!");
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -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,24 +12,22 @@
|
|||
<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> + <kdb class="kbd kbd-xs"> Enter </kdb> to create and add another
|
||||
use <kbd class="kbd kbd-xs">Shift</kbd> + <kbd class="kbd kbd-xs"> Enter </kbd> to create and add another
|
||||
</p>
|
||||
</BaseModal>
|
||||
</template>
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue