Merge pull request #27 from pitzzahh/feat/settings

Feat/settings
pitzzahh · Dec 4, 2024 · 5962ea4 · 5962ea4
2 parents f1ac378 + 110d69b
commit 5962ea4
Show file tree

Hide file tree

Showing 6 changed files with 85 additions and 30 deletions.
diff --git a/src/lib/components/custom/table/base-columns.ts b/src/lib/components/custom/table/base-columns.ts
@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
 // import { createRawSnippet } from 'svelte';
 import { renderComponent } from '@/components/ui/data-table/index.js';
 import type { ColumnDef } from '@tanstack/table-core';
@@ -16,37 +17,44 @@ export const createLeftMostBaseColumns = <T extends PhaseLoadSchedule>(
 				phase_main_load_form,
 				'aria-label': 'Select row',
 				class: 'translate-y-[2px]'
-			})
+			}),
+		footer: () => 'Total'
 	},
 	{
 		accessorKey: 'load_description',
-		header: 'Load Description'
+		header: 'Load Description',
+		footer: () => 'MAIN'
 	},
 	{
 		accessorKey: 'voltage',
-		header: 'Voltage'
+		header: 'Voltage',
+		footer: (props) => '440'
 	},
 	{
 		accessorKey: 'va',
-		header: 'VA'
+		header: 'VA',
+		footer: (props) => '6300'
 	},
 	{
 		header: 'CURRENT',
 		columns: [
 			{
 				accessorKey: 'ab',
 				cell: (info) => info.getValue(),
-				header: () => 'AB'
+				header: () => 'AB',
+				footer: (props) => '34'
 			},
 			{
 				accessorKey: 'bc',
 				cell: (info) => info.getValue(),
-				header: () => 'BC'
+				header: () => 'BC',
+				footer: (props) => '34'
 			},
 			{
 				accessorKey: 'ca',
 				cell: (info) => info.getValue(),
-				header: () => 'CA'
+				header: () => 'CA',
+				footer: (props) => '34'
 			}
 		]
 	},
@@ -56,17 +64,20 @@ export const createLeftMostBaseColumns = <T extends PhaseLoadSchedule>(
 			{
 				accessorKey: 'at',
 				cell: (info) => info.getValue(),
-				header: () => 'AF'
+				header: () => 'AF',
+				footer: (props) => '65'
 			},
 			{
 				accessorKey: 'pole',
 				cell: (info) => info.getValue(),
-				header: () => 'Pole'
+				header: () => 'Pole',
+				footer: (props) => ''
 			},
 			{
 				accessorKey: 'kaic',
 				cell: (info) => info.getValue(),
-				header: () => 'kAIC'
+				header: () => 'kAIC',
+				footer: (props) => '44'
 			}
 		]
 	}
@@ -79,12 +90,14 @@ export const createRightMostBaseColumns = <T extends PhaseLoadSchedule>(): Colum
 			{
 				accessorKey: 'egc_size',
 				cell: (info) => info.getValue(),
-				header: () => 'SIZE'
+				header: () => 'SIZE',
+				footer: (props) => '24 AWG'
 			},
 			{
 				accessorKey: 'egc_insulation',
 				cell: (info) => info.getValue(),
-				header: () => 'INSULATION'
+				header: () => 'INSULATION',
+				footer: (props) => ''
 			}
 		]
 	},
@@ -94,12 +107,14 @@ export const createRightMostBaseColumns = <T extends PhaseLoadSchedule>(): Colum
 			{
 				accessorKey: 'conduit_size',
 				cell: (info) => info.getValue(),
-				header: () => 'SIZE'
+				header: () => 'SIZE',
+				footer: (props) => ''
 			},
 			{
 				accessorKey: 'conduit_type',
 				cell: (info) => info.getValue(),
-				header: () => 'TYPE'
+				header: () => 'TYPE',
+				footer: (props) => ''
 			}
 		]
 	}

diff --git a/src/lib/components/custom/table/data-table.svelte b/src/lib/components/custom/table/data-table.svelte
@@ -59,5 +59,29 @@
 				</Table.Row>
 			{/each}
 		</Table.Body>
+		<Table.Footer class="bg-muted/10">
+			{#each table.getFooterGroups() as footerGroup, i (i)}
+				{#if i === 0}
+					<Table.Row>
+						{#each footerGroup.headers as header, i (i)}
+							<Table.Head
+								colspan={header.colSpan}
+								class={cn('bg-muted/50', {
+									'border-r': i + 1 < footerGroup.headers.length,
+									'text-center font-semibold': i === 0
+								})}
+							>
+								{#if !header.isPlaceholder}
+									<FlexRender
+										content={header.column.columnDef.footer}
+										context={header.getContext()}
+									/>
+								{/if}
+							</Table.Head>
+						{/each}
+					</Table.Row>
+				{/if}
+			{/each}
+		</Table.Footer>
 	</Table.Root>
 </div>
diff --git a/src/lib/components/custom/table/one-phase-load-cols/one-phase-delta-cols.ts b/src/lib/components/custom/table/one-phase-load-cols/one-phase-delta-cols.ts
@@ -15,20 +15,23 @@ export function onePhaseDeltaCols(
 				{
 					accessorKey: 'sets',
 					cell: (info) => info.getValue(),
-					header: () => 'Sets'
+					header: () => 'Sets',
+					footer: () => ''
 				},
 				{
 					header: 'P + P',
 					columns: [
 						{
 							accessorKey: 'p_plus_p_size',
 							header: () => 'SIZE',
-							cell: (info) => info.getValue()
+							cell: (info) => info.getValue(),
+							footer: () => ''
 						},
 						{
 							accessorKey: 'p_plus_p_insulation',
 							header: 'INSULATION',
-							cell: (info) => info.getValue()
+							cell: (info) => info.getValue(),
+							footer: () => ''
 						}
 					]
 				}

diff --git a/src/lib/components/custom/table/one-phase-load-cols/one-phase-main-or-wye-cols.ts b/src/lib/components/custom/table/one-phase-load-cols/one-phase-main-or-wye-cols.ts
@@ -15,20 +15,23 @@ export function onePhaseMainOrWyeCols(
 				{
 					accessorKey: 'sets',
 					cell: (info) => info.getValue(),
-					header: () => 'Sets'
+					header: () => 'Sets',
+					footer: () => ''
 				},
 				{
 					header: 'L + N',
 					columns: [
 						{
 							accessorKey: 'p_plus_p_size',
 							header: () => 'SIZE',
-							cell: (info) => info.getValue()
+							cell: (info) => info.getValue(),
+							footer: () => ''
 						},
 						{
 							accessorKey: 'p_plus_p_insulation',
 							header: 'INSULATION',
-							cell: (info) => info.getValue()
+							cell: (info) => info.getValue(),
+							footer: () => ''
 						}
 					]
 				}

diff --git a/src/lib/components/custom/table/three-phase-load-cols/three-phase-delta-cols.ts b/src/lib/components/custom/table/three-phase-load-cols/three-phase-delta-cols.ts
@@ -15,20 +15,23 @@ export function threePhaseDeltaCols(
 				{
 					accessorKey: 'sets',
 					cell: (info) => info.getValue(),
-					header: () => 'Sets'
+					header: () => 'Sets',
+					footer: () => ''
 				},
 				{
 					header: 'P+P',
 					columns: [
 						{
 							accessorKey: 'p_plus_p_size',
 							header: () => 'Size',
-							cell: (info) => info.getValue()
+							cell: (info) => info.getValue(),
+							footer: () => ''
 						},
 						{
 							accessorKey: 'p_plus_p_insulation',
 							header: 'INSULATION',
-							cell: (info) => info.getValue()
+							cell: (info) => info.getValue(),
+							footer: () => ''
 						}
 					]
 				},
@@ -38,12 +41,14 @@ export function threePhaseDeltaCols(
 						{
 							accessorKey: 'three_phase_size',
 							header: () => 'Size',
-							cell: (info) => info.getValue()
+							cell: (info) => info.getValue(),
+							footer: () => ''
 						},
 						{
 							accessorKey: 'three_phase_insulation',
 							header: 'INSULATION',
-							cell: (info) => info.getValue()
+							cell: (info) => info.getValue(),
+							footer: () => ''
 						}
 					]
 				}

diff --git a/src/lib/components/custom/table/three-phase-load-cols/three-phase-wye-cols.ts b/src/lib/components/custom/table/three-phase-load-cols/three-phase-wye-cols.ts
@@ -15,20 +15,23 @@ export function threePhaseWyeCols(
 				{
 					accessorKey: 'sets',
 					cell: (info) => info.getValue(),
-					header: () => 'Sets'
+					header: () => 'Sets',
+					footer: () => ''
 				},
 				{
 					header: 'P+P',
 					columns: [
 						{
 							accessorKey: 'p_plus_p_size',
 							header: () => 'Size',
-							cell: (info) => info.getValue()
+							cell: (info) => info.getValue(),
+							footer: () => ''
 						},
 						{
 							accessorKey: 'p_plus_p_insulation',
 							header: 'INSULATION',
-							cell: (info) => info.getValue()
+							cell: (info) => info.getValue(),
+							footer: () => ''
 						}
 					]
 				},
@@ -38,12 +41,14 @@ export function threePhaseWyeCols(
 						{
 							accessorKey: 'three_phase_size',
 							header: () => 'Size',
-							cell: (info) => info.getValue()
+							cell: (info) => info.getValue(),
+							footer: () => ''
 						},
 						{
 							accessorKey: 'three_phase_insulation',
 							header: 'INSULATION',
-							cell: (info) => info.getValue()
+							cell: (info) => info.getValue(),
+							footer: () => ''
 						}
 					]
 				}