configure: Way more data from Intune!

apps/configure/package.json

@@ -20,6 +20,7 @@
 		"clsx": "^2.1.1",
 		"idb": "^8.0.0",
 		"solid-js": "^1.8.18",
+		"solid-sonner": "^0.2.8",
 		"zod": "^3.23.8"
 	},
 	"devDependencies": {

apps/configure/src/components/StandardTable.tsx

@@ -14,7 +14,6 @@ import {
 	getPaginationRowModel,
 	getSortedRowModel,
 } from "@tanstack/solid-table";
-import clsx from "clsx";
 import {
 	For,
 	type JSX,

apps/configure/src/components/search/filters.tsx

@@ -2,7 +2,7 @@ import {
 	type AccessorKeyColumnDef,
 	createColumnHelper,
 } from "@tanstack/solid-table";
-import type { Database } from "~/lib/db";
+import { type Database, db } from "~/lib/db";
 
 // TODO: Rest of the possibilities + clean this up
 export type Filter =
@@ -19,9 +19,11 @@ export type Filter =
 			value: string; // TODO: Allow multiple values
 	  };
 
+// TODO: Rename this object probs???
 export const filters = {
 	users: {
-		table: () => {
+		load: async () => await (await db).getAll("users"),
+		columns: () => {
 			const column = createColumnHelper<Database["users"]["value"]>();
 
 			return [
@@ -78,6 +80,9 @@ export const filters = {
 				// TODO: Actions
 			];
 		},
+		// filters: {
+		// 	"name"
+		// }
 		// TODO: Define bulk actions like delete
 		// columns: {
 		// 	name: {
@@ -86,7 +91,8 @@ export const filters = {
 		// },
 	},
 	devices: {
-		table: () => {
+		load: async () => await (await db).getAll("devices"),
+		columns: () => {
 			const column = createColumnHelper<Database["devices"]["value"]>();
 
 			return [
@@ -105,7 +111,8 @@ export const filters = {
 		},
 	},
 	groups: {
-		table: () => {
+		load: async () => await (await db).getAll("groups"),
+		columns: () => {
 			const column = createColumnHelper<Database["groups"]["value"]>();
 
 			return [
@@ -124,7 +131,8 @@ export const filters = {
 		},
 	},
 	policies: {
-		table: () => {
+		load: async () => await (await db).getAll("policies"),
+		columns: () => {
 			const column = createColumnHelper<Database["policies"]["value"]>();
 
 			return [
@@ -143,7 +151,8 @@ export const filters = {
 		},
 	},
 	apps: {
-		table: () => {
+		load: async () => await (await db).getAll("apps"),
+		columns: () => {
 			const column = createColumnHelper<Database["apps"]["value"]>();
 
 			return [
@@ -161,4 +170,11 @@ export const filters = {
 			];
 		},
 	},
-} satisfies Record<string, { table: () => AccessorKeyColumnDef<any, any>[] }>;
+} satisfies Record<
+	string,
+	{
+		// TODO: Tie column and data types together
+		load: () => Promise<any>;
+		columns: () => AccessorKeyColumnDef<any, any>[];
+	}
+>;

apps/configure/src/components/search/index.tsx

@@ -1,7 +1,8 @@
 import { Input } from "@mattrax/ui";
+import { createAsync } from "@solidjs/router";
 import { createQuery } from "@tanstack/solid-query";
 import { createColumnHelper } from "@tanstack/solid-table";
-import { Show, Suspense, createSignal } from "solid-js";
+import { For, ParentProps, Show, Suspense, createSignal } from "solid-js";
 import {
 	FloatingSelectionBar,
 	StandardTable,
@@ -20,25 +21,6 @@ export function createSearchPageContext(defaultFilters: Filter[] = []) {
 	return { filters, setFilters, defaultFilters };
 }
 
-// TODO: Break the following into `filters.ts` once refactored
-
-const column = createColumnHelper<any>(); // TODO: Not using any
-const columns = [
-	selectCheckboxColumn,
-	column.accessor("name", {
-		header: "Name",
-		cell: (props) => (
-			<a
-				class="font-medium hover:underline focus:underline p-1 -m-1 w-full block"
-				href="todo" // TODO: {`/users/${props.row.original.id}`}
-			>
-				{props.row.original.name}
-			</a>
-		),
-	}),
-	// TODO: This needs to dispatch to the correct entity type to render it
-];
-
 export function SearchPage(
 	props: ReturnType<typeof createSearchPageContext> & {
 		showFilterBar?: boolean;
@@ -168,80 +150,115 @@ export function SearchPage(
 				<FilterBar {...props} />
 			</Show>
 
-			{/* // TODO: Optionally render results as chart or state item */}
+			<Content {...props} />
+		</div>
+	);
+}
+
+function Content(props: ReturnType<typeof createSearchPageContext>) {
+	// TODO: Optionally render results as chart or state item
 
-			<Show
-				when={props
+	// TODO: Remove this
+	const hasAnyItemFilter = () =>
+		props.filters().some((f) => f.type === "enum" && f.target === "type");
+
+	const data = createAsync(async () => {
+		let result: any[] = [];
+		for (const [key, def] of Object.entries(filters)) {
+			if (
+				!hasAnyItemFilter() ||
+				props
 					.filters()
-					.find((f) => f.type === "enum" && f.target === "type")}
-			>
-				{(filter) => {
-					// @ts-expect-error // TODO: Fix this
-					const columns = filters?.[filter().value]?.table();
-					if (!columns) return <p>TODO</p>; // TODO: Make this not possible?
-
-					const table = createStandardTable({
-						get data() {
-							return query.data || [];
-						},
-						columns: [selectCheckboxColumn, ...columns],
-					});
-					// createSearchParamFilter(table, "name", "search");
-
-					// const dialog = createBulkDeleteDialog({
-					// 	table,
-					// 	onDelete: (data) => {
-					// 		console.log(data);
-					// 		alert("Do delete"); // TODO
-					// 	},
-					// });
-
-					return (
-						<>
-							<Suspense>
-								<StandardTable table={table} />
-							</Suspense>
-							<FloatingSelectionBar table={table}>
-								{(rows) => (
-									<>
-										{/* <Button
+					.some(
+						(f) => f.type === "enum" && f.target === "type" && f.value === key,
+					)
+			) {
+				result = result.concat(await def.load());
+			}
+		}
+
+		// console.log("RESULT", result); // TODO
+		return result;
+	});
+
+	const table = createStandardTable({
+		get data() {
+			return data() || [];
+		},
+		get columns() {
+			// Get all of the possible columns given the active filters
+			const columns = Object.entries(filters).flatMap(([key, info]) => {
+				const isThisItemActive = props
+					.filters()
+					.some(
+						(f) => f.type === "enum" && f.target === "type" && f.value === key,
+					);
+				if (hasAnyItemFilter() && !isThisItemActive) return [];
+
+				return info.tableColumns();
+			});
+
+			// Filter out duplicate columns by accessorKey
+			// TODO: Which definition should we use if they render differently (Eg. different link)
+			const filteredColumns = columns.filter(
+				(a, index) =>
+					index === columns.findIndex((b) => a.accessorKey === b.accessorKey),
+			);
+
+			return [selectCheckboxColumn, ...filteredColumns];
+		},
+	});
+	// createSearchParamFilter(table, "name", "search");
+
+	// const dialog = createBulkDeleteDialog({
+	// 	table,
+	// 	onDelete: (data) => {
+	// 		console.log(data);
+	// 		alert("Do delete"); // TODO
+	// 	},
+	// });
+
+	return (
+		<Suspense>
+			<StandardTable table={table} />
+
+			<FloatingSelectionBar table={table}>
+				{(rows) => (
+					<>
+						{/* <Button
 									variant="destructive"
 									size="sm"
 									onClick={() => dialog.show(rows())}
 								>
 									Delete
 								</Button> */}
-									</>
-								)}
-							</FloatingSelectionBar>
-							{/* <BulkDeleteDialog
-								dialog={dialog}
-								title={({ count }) => <>Delete {pluralize("User", count())}</>}
-								description={({ count, rows }) => (
-									<>
-										Are you sure you want to delete{" "}
-										<Switch>
-											<Match when={count() > 1}>
-												{count()} {pluralize("user", count())}
-											</Match>
-											<Match when={rows()[0]}>
-												{(data) => (
-													<div class="inline text-nowrap">
-														<span class="text-black font-medium">
-															{data().original.name}
-														</span>
-													</div>
-												)}
-											</Match>
-										</Switch>
-										?
-									</>
+					</>
+				)}
+			</FloatingSelectionBar>
+			{/* <BulkDeleteDialog
+				dialog={dialog}
+				title={({ count }) => <>Delete {pluralize("User", count())}</>}
+				description={({ count, rows }) => (
+					<>
+						Are you sure you want to delete{" "}
+						<Switch>
+							<Match when={count() > 1}>
+								{count()} {pluralize("user", count())}
+							</Match>
+							<Match when={rows()[0]}>
+								{(data) => (
+									<div class="inline text-nowrap">
+										<span class="text-black font-medium">
+											{data().original.name}
+										</span>
+									</div>
 								)}
-							/> */}
-						</>
-					);
-				}}
-			</Show>
-		</div>
+							</Match>
+						</Switch>
+						?
+					</>
+				)}
+			/> */}
+		</Suspense>
 	);
 }

apps/configure/src/index.tsx

@@ -6,6 +6,7 @@ import { render } from "solid-js/web";
 import { routes } from "./routes";
 import "./index.css";
 import "@mattrax/ui/css";
+import { Toaster } from "solid-sonner";
 
 const TanstackQueryDevtools = lazy(() =>
 	import("@tanstack/solid-query-devtools").then((m) => ({
@@ -31,6 +32,7 @@ function Root(props: ParentProps) {
 	return (
 		<>
 			{isDevMode && <TanstackQueryDevtools />}
+			<Toaster />
 			{props.children}
 		</>
 	);