Real-time sync for views

frontend/src/lib/components/project/Sidebar.svelte

@@ -53,7 +53,7 @@
 			<h2>{project.title}</h2>
 			{#if views}
 				<ul>
-					{#each $views as view}
+					{#each $views as view (view.id)}
 						<!-- svelte-ignore a11y-no-noninteractive-element-to-interactive-role -->
 						<li
 							on:click={() => {

frontend/src/lib/types/View.ts

@@ -5,8 +5,21 @@ import viewsApi from '$lib/api/viewsApi';
 import { toastAlert } from '$lib/utils/toasts';
 import Filter from './Filter';
 import type TagOption from './TagOption';
+import currentView from '$lib/stores/currentView';
 
-export const views = writable([] as View[]);
+const { subscribe, set, update } = writable([] as View[]);
+
+export const views = {
+	subscribe,
+	set,
+	update,
+	reload: (view?: View | null) => {
+		update((views) => views);
+		if (view && view === get(currentView)) {
+			currentView.reload();
+		}
+	}
+};
 
 export default class View {
 	private _id: number;
@@ -177,6 +190,32 @@ export default class View {
 		return true;
 	}
 
+	parseUpdate(changes: any) {
+		if (changes.primary_tag_id) {
+			this._pimaryTag = ProjectTag.fromId(changes.primary_tag_id);
+		}
+
+		if (changes.secondary_tag_id) {
+			this._secondaryTag = ProjectTag.fromId(changes.secondary_tag_id);
+		}
+
+		if (changes.title) {
+			this._title = changes.title;
+		}
+
+		if (changes.sort_tag_id) {
+			this._sortTag = ProjectTag.fromId(changes.sort_tag_id);
+		}
+
+		if (changes.sort_direction) {
+			this._sortDirection = changes.sort_direction;
+		}
+	}
+
+	static parseDelete(id: any) {
+		views.update((views) => views.filter((view) => view.id !== id));
+	}
+
 	static parse(json: any): View | null;
 	static parse(json: any, project: Project | null | undefined): View | null;
 

frontend/src/lib/utils/webSocketManager.ts

@@ -109,14 +109,14 @@ function applyProject(data: any) {
 		return;
 	}
 
-	const project = Project.fromId(data.id);
+	if (data.action !== 'update') {
-	if (!project) {
+		toastWarning('Failed to parse project update: unknown action');
-		toastWarning('Failed to parse project update: project not found');
 		return;
 	}
 
-	if (data.action !== 'update') {
+	const project = Project.fromId(data.id);
-		toastWarning('Failed to parse project update: unknown action');
+	if (!project) {
+		toastWarning('Failed to parse project update: project not found');
 		return;
 	}
 
@@ -134,14 +134,14 @@ function applyCard(data: any) {
 		return;
 	}
 
-	const card = Card.fromId(data.id);
+	if (data.action !== 'update') {
-	if (!card) {
+		toastWarning('Failed to parse card update: unknown action');
-		toastWarning('Failed to parse card update: card not found');
 		return;
 	}
 
-	if (data.action !== 'update') {
+	const card = Card.fromId(data.id);
-		toastWarning('Failed to parse card update: unknown action');
+	if (!card) {
+		toastWarning('Failed to parse card update: card not found');
 		return;
 	}
 
@@ -170,7 +170,30 @@ function applyCardTag(data: any) {
 	cards.reload();
 }
 
-function applyView(data: any) {}
+function applyView(data: any) {
+	if (data.action === 'create') {
+		View.parse(data.data);
+		return;
+	}
+	if (data.action === 'delete') {
+		View.parseDelete(data.id);
+		return;
+	}
+
+	if (data.action !== 'update') {
+		toastWarning('Failed to parse view update: unknown action');
+		return;
+	}
+
+	const view = View.fromId(data.id);
+	if (!view) {
+		toastWarning('Failed to parse view update: view not found');
+		return;
+	}
+
+	view.parseUpdate(data.changes);
+	views.reload(view);
+}
 
 function applyProjectTag(data: any) {}