Merge branch 'fix/data-sync-issue' of /~https://github.com/pitzzahh/heda …

…into fix/data-sync-issue
pitzzahh · Dec 7, 2024 · 6c42d40 · 6c42d40
2 parents 8702804 + 91d2eb9
commit 6c42d40
Show file tree

Hide file tree

Showing 8 changed files with 325 additions and 30 deletions.
diff --git a/src/lib/components/custom/sidebar/sidebar-tree.svelte b/src/lib/components/custom/sidebar/sidebar-tree.svelte
@@ -1,13 +1,18 @@
 <script lang="ts">
 	import * as Collapsible from '$lib/components/ui/collapsible/index.js';
 	import * as Sidebar from '$lib/components/ui/sidebar/index.js';
-	import { File, Folder, ChevronRight } from '@/assets/icons/lucide';
+	import * as ContextMenu from '$lib/components/ui/context-menu/index.js';
+	import { File, Folder } from 'lucide-svelte';
+	import ChevronRight from 'lucide-svelte/icons/chevron-right';
 	import type { Node } from '@/types/project';
 	import type { SuperValidated } from 'sveltekit-superforms';
 	import type { GenericPhasePanelSchema } from '@/schema/panel';
 	import { SidebarTree, AddPanelAndViewTrigger } from '.';
 	import { getChildNodesByParentId } from '@/db/queries/index';
 	import type { ProjectDocType } from '@/db/schema';
+	import type { Phase } from '@/types/phase';
+	import { deleteProject, removeNode } from '@/db/mutations';
+	import { invalidateAll } from '$app/navigation';
 
 	let {
 		node,
@@ -39,9 +44,28 @@
 	<p></p>
 {:then children}
 	{#if !isRootNode && isNode(node) && node.node_type === 'load'}
-		<Sidebar.MenuButton class="data-[active=true]:bg-transparent">
-			<File />
-			<span>{typeof node === 'string' ? node : node.load_data?.load_description}</span>
+		<Sidebar.MenuButton
+			class=" flex w-full items-center justify-between data-[active=true]:bg-transparent"
+		>
+			<ContextMenu.Root>
+				<ContextMenu.Trigger class="w-full">
+					<div class="flex w-full items-center gap-2">
+						<File class="size-4" />
+						<span>{typeof node === 'string' ? node : node.load_data?.load_description}</span>
+					</div>
+				</ContextMenu.Trigger>
+				<ContextMenu.Content>
+					<ContextMenu.Item
+						class="text-red-600 hover:!bg-red-600/20 hover:!text-red-600"
+						onclick={async () => {
+							await removeNode(node.id);
+							await invalidateAll();
+						}}
+					>
+						Remove Load
+					</ContextMenu.Item>
+				</ContextMenu.Content>
+			</ContextMenu.Root>
 		</Sidebar.MenuButton>
 	{:else}
 		<Sidebar.MenuItem>
@@ -57,19 +81,42 @@
 							<ChevronRight class="transition-transform" {...props} />
 						{/snippet}
 					</Collapsible.Trigger>
+					<ContextMenu.Root>
+						<ContextMenu.Trigger class="w-full">
+							{@const node_name =
+								typeof node === 'string' ? node : (node.panel_data?.name as string)}
+							<AddPanelAndViewTrigger
+								id={isNode(node) ? node.id : ''}
+								panel_name={node_name}
+								{generic_phase_panel_form}
+								{highest_unit}
+								is_parent_root_node={typeof isRootNode === 'boolean' ? isRootNode : false}
+								parent_id={isRootNode && project_id ? project_id : isNode(node) ? node.id : ''}
+							>
+								<Folder class="size-4" />
+								{typeof node === 'string' ? node : node.panel_data?.name}
+							</AddPanelAndViewTrigger>
+						</ContextMenu.Trigger>
 
-					{@const node_name = typeof node === 'string' ? node : (node.panel_data?.name as string)}
-					<AddPanelAndViewTrigger
-						id={isNode(node) ? node.id : ''}
-						panel_name={node_name}
-						{generic_phase_panel_form}
-						{highest_unit}
-						is_parent_root_node={typeof isRootNode === 'boolean' ? isRootNode : false}
-						parent_id={isRootNode && project_id ? project_id : isNode(node) ? node.id : ''}
-					>
-						<Folder class="size-4" />
-						{typeof node === 'string' ? node : node.panel_data?.name}
-					</AddPanelAndViewTrigger>
+						<ContextMenu.Content>
+							<ContextMenu.Item
+								class="text-red-600 hover:!bg-red-600/20 hover:!text-red-600"
+								onclick={async () => {
+									if (isNode(node) && !isRootNode) {
+										await removeNode(node.id);
+									}
+
+									if (isRootNode && project_id) {
+										await deleteProject(project_id);
+									}
+
+									await invalidateAll();
+								}}
+							>
+								{isRootNode ? 'Remove Project' : 'Remove Panel'}
+							</ContextMenu.Item>
+						</ContextMenu.Content>
+					</ContextMenu.Root>
 				</Sidebar.MenuButton>
 
 				<Collapsible.Content class="w-full">

diff --git a/src/lib/components/custom/table/base-columns.ts b/src/lib/components/custom/table/base-columns.ts
@@ -6,6 +6,7 @@ import type { PhaseLoadSchedule } from '@/types/load/one_phase';
 import { DataTableAddLoad } from '@/components/custom/table/(components)';
 import type { PhaseMainLoadSchema } from '@/schema/load';
 import type { SuperValidated } from 'sveltekit-superforms';
+import ColumnDropdown from './column-dropdown.svelte';
 
 export const createLeftMostBaseColumns = <T extends PhaseLoadSchedule>(
 	phase_main_load_form: SuperValidated<PhaseMainLoadSchema>
@@ -117,5 +118,11 @@ export const createRightMostBaseColumns = <T extends PhaseLoadSchedule>(): Colum
 				footer: (props) => ''
 			}
 		]
+	},
+	{
+		header: 'Actions',
+		cell: ({ row }) => {
+			return renderComponent(ColumnDropdown, { node_id: (row.original as any).id as string });
+		}
 	}
 ];
diff --git a/src/lib/components/custom/table/column-dropdown.svelte b/src/lib/components/custom/table/column-dropdown.svelte
@@ -0,0 +1,35 @@
+<script lang="ts">
+	import * as DropdownMenu from '$lib/components/ui/dropdown-menu/index.js';
+	import Button from '@/components/ui/button/button.svelte';
+	import { EllipsisIcon } from 'lucide-svelte';
+	import { removeNode } from '@/db/mutations';
+	import { invalidateAll } from '$app/navigation';
+
+	let { node_id }: { node_id: string } = $props();
+
+	async function handleRemoveLoad() {
+		await removeNode(node_id);
+		await invalidateAll();
+	}
+</script>
+
+<div class="grid w-full place-content-center">
+	<DropdownMenu.Root>
+		<DropdownMenu.Trigger>
+			<Button size="icon" variant="outline">
+				<EllipsisIcon class="size-4" />
+			</Button>
+		</DropdownMenu.Trigger>
+		<DropdownMenu.Content align="end">
+			<DropdownMenu.Group>
+				<DropdownMenu.GroupHeading>Actions</DropdownMenu.GroupHeading>
+				<DropdownMenu.Separator />
+				<DropdownMenu.Item>Update</DropdownMenu.Item>
+				<DropdownMenu.Item
+					onclick={handleRemoveLoad}
+					class="text-red-600 hover:!bg-red-600/20 hover:!text-red-600">Remove</DropdownMenu.Item
+				>
+			</DropdownMenu.Group>
+		</DropdownMenu.Content>
+	</DropdownMenu.Root>
+</div>
diff --git a/src/lib/db/mutations/index.ts b/src/lib/db/mutations/index.ts
@@ -151,3 +151,20 @@ export async function removeNode(id: string) {
 		return error;
 	}
 }
+
+export async function deleteProject(project_id: string) {
+	const database = await databaseInstance();
+
+	try {
+		// remove all the nodes of the root node
+		await removeNode(project_id);
+
+		const query = database.projects.findOne({ selector: { id: project_id } });
+		const removedProjectId = await query.remove();
+
+		return removedProjectId;
+	} catch (error) {
+		console.error(error);
+		return error;
+	}
+}
diff --git a/src/lib/db/queries/index.ts b/src/lib/db/queries/index.ts
@@ -2,14 +2,43 @@ import { databaseInstance } from '..';
 
 export async function getCurrentProject(project_id?: string) {
 	const db = await databaseInstance();
-	const query = db.projects.find({
-		selector: {
-			id: project_id
+
+	try {
+		const query = db.projects.find();
+		const project = (await query.exec()).at(0)?._data;
+
+		if (project) {
+			return project;
+		}
+
+		return null;
+	} catch (error) {
+		console.log(error);
+		return error;
+	}
+}
+
+export async function getNodeById(id: string) {
+	const db = await databaseInstance();
+
+	try {
+		const node = await db.nodes
+			.findOne({
+				selector: {
+					id
+				}
+			})
+			.exec();
+
+		if (node) {
+			return node;
 		}
-	});
-	const project = (await query.exec()).at(0)?._data;
 
-	return project ?? null;
+		return null;
+	} catch (error) {
+		console.log(error);
+		return error;
+	}
 }
 
 export async function getChildNodesByParentId(parent_id: string) {
@@ -23,10 +52,20 @@ export async function getChildNodesByParentId(parent_id: string) {
 
 	// sorts the circuit number of every load node
 	const sortedChildren = children.sort((a, b) => {
-		if (!a?.load_data?.circuit_number) return 1;
-		if (!b?.load_data?.circuit_number) return -1;
+		// Extract circuit numbers for easier reference
+		const aLoadCircuit = a?.load_data?.circuit_number ?? Infinity; // Default to Infinity if not available
+		const bLoadCircuit = b?.load_data?.circuit_number ?? Infinity;
+
+		const aPanelCircuit = a?.panel_data?.circuit_number ?? Infinity; // Default to Infinity if not available
+		const bPanelCircuit = b?.panel_data?.circuit_number ?? Infinity;
+
+		// Sort primarily by load_data, then by panel_data
+		if (aLoadCircuit !== bLoadCircuit) {
+			return aLoadCircuit - bLoadCircuit;
+		}
 
-		return a?.load_data?.circuit_number - b?.load_data?.circuit_number;
+		// If load_data circuit numbers are equal or unavailable, sort by panel_data
+		return aPanelCircuit - bPanelCircuit;
 	});
 
 	if (sortedChildren) {