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 2023-08-02 13:00:57 -08:00 committed by GitHub
parent cceec06148
commit 2cbcc8bb1d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
31 changed files with 458 additions and 208 deletions

View file

@ -1,7 +1,7 @@
import { UserClient } from "~~/lib/api/user";
export function itemsTable(api: UserClient) {
const { data: items } = useAsyncData(async () => {
const { data: items, refresh } = useAsyncData(async () => {
const { data } = await api.items.getAll({
page: 1,
pageSize: 5,
@ -10,6 +10,11 @@ export function itemsTable(api: UserClient) {
return data.items;
});
onServerEvent(ServerEvent.ItemMutation, () => {
console.log("item mutation");
refresh();
});
return computed(() => {
return {
items: items.value || [],

View file

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