Skip to content

Commit

Permalink
configure: abstract table definitions + last sync time
Browse files Browse the repository at this point in the history
  • Loading branch information
oscartbeaumont committed Jul 23, 2024
1 parent 28b5517 commit 3c86fb8
Show file tree
Hide file tree
Showing 10 changed files with 335 additions and 245 deletions.
39 changes: 21 additions & 18 deletions apps/configure/src/components/search/FilterBar.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -25,12 +25,10 @@ import {
Switch,
} from "solid-js";
import { db } from "~/lib/db";
import type { createSearchPageContext } from ".";
import type { Filter } from "./filters";

export function FilterBar(props: {
filters: Accessor<Filter[]>;
setFilters: Setter<Filter[]>;
}) {
export function FilterBar(props: ReturnType<typeof createSearchPageContext>) {
const navigate = useNavigate();
const createView = createMutation(() => ({
mutationKey: ["createView"],
Expand Down Expand Up @@ -58,20 +56,25 @@ export function FilterBar(props: {

<Show when={props.filters().length > 0}>
<>
<Tooltip>
{/* // TODO: Ask the user for the view name */}
<TooltipTrigger
as="button"
type="button"
class="text-center"
onClick={() => createView.mutate(props.filters())}
>
<div class="flex items-center justify-center h-full">
<IconPhFloppyDisk />
</div>
</TooltipTrigger>
<TooltipContent>Create new view from active filters</TooltipContent>
</Tooltip>
<Show when={props.filters() !== props.defaultFilters}>
<Tooltip>
{/* // TODO: Ask the user for the view name */}
<TooltipTrigger
as="button"
type="button"
class="text-center"
onClick={() => createView.mutate(props.filters())}
>
<div class="flex items-center justify-center h-full">
<IconPhFloppyDisk />
</div>
</TooltipTrigger>
<TooltipContent>
Create new view from active filters
</TooltipContent>
</Tooltip>
</Show>

<Tooltip>
<TooltipTrigger
as="button"
Expand Down
14 changes: 0 additions & 14 deletions apps/configure/src/components/search/filters.ts

This file was deleted.

164 changes: 164 additions & 0 deletions apps/configure/src/components/search/filters.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,164 @@
import {
type AccessorKeyColumnDef,
createColumnHelper,
} from "@tanstack/solid-table";
import type { Database } from "~/lib/db";

// TODO: Rest of the possibilities + clean this up
export type Filter =
| {
type: "string";
op: "eq";
// field: string[]; // TODO: Can we typesafe this?
value: string;
}
| {
type: "enum";
target: "type"; // TODO: This should be more dynamic cause it's not a filter thing???
// TODO: `op: "contains"`???
value: string; // TODO: Allow multiple values
};

export const filters = {
users: {
table: () => {
const column = createColumnHelper<Database["users"]["value"]>();

return [
column.accessor("name", {
header: "Name",
cell: (props) => (
<a
class="font-medium hover:underline focus:underline p-1 -m-1 w-full block"
href={`/users/${props.row.original.id}`}
>
{props.row.original.name}
</a>
),
}),
// column.accessor("email", {
// header: ({ column }) => {
// return (
// <Button variant="ghost" onClick={() => column.toggleSorting()}>
// Email
// <Switch fallback={<IconCarbonCaretSort class="ml-2 h-4 w-4" />}>
// <Match when={column.getIsSorted() === "asc"}>
// <IconCarbonCaretSortUp class="ml-2 h-4 w-4" />
// </Match>
// <Match when={column.getIsSorted() === "desc"}>
// <IconCarbonCaretSortDown class="ml-2 h-4 w-4" />
// </Match>
// </Switch>
// </Button>
// );
// },
// }),
// column.accessor("provider.variant", {
// header: "Provider",
// cell: (props) => {
// const providerDisplayName = () => AUTH_PROVIDER_DISPLAY[props.getValue()];
// return (
// <span class="flex flex-row gap-1 items-center">
// <Badge variant="outline">{providerDisplayName()}</Badge>
// <Show when={props.row.original.resourceId === null}>
// <Tooltip>
// <TooltipTrigger>
// <IconMaterialSymbolsWarningRounded class="w-4 h-4 text-yellow-600" />
// </TooltipTrigger>
// <TooltipContent>
// User not found in {providerDisplayName()}
// </TooltipContent>
// </Tooltip>
// </Show>
// </span>
// );
// },
// }),
// TODO: Link to OAuth provider
// TODO: Actions
];
},
// TODO: Define bulk actions like delete
// columns: {
// name: {
// // TODO: Document which filters are supported
// },
// },
},
devices: {
table: () => {
const column = createColumnHelper<Database["devices"]["value"]>();

return [
column.accessor("name", {
header: "Name",
cell: (props) => (
<a
class="font-medium hover:underline focus:underline p-1 -m-1 w-full block"
href={`/devices/${props.row.original.id}`}
>
{props.row.original.name}
</a>
),
}),
];
},
},
groups: {
table: () => {
const column = createColumnHelper<Database["groups"]["value"]>();

return [
column.accessor("name", {
header: "Name",
cell: (props) => (
<a
class="font-medium hover:underline focus:underline p-1 -m-1 w-full block"
href={`/groups/${props.row.original.id}`}
>
{props.row.original.name}
</a>
),
}),
];
},
},
policies: {
table: () => {
const column = createColumnHelper<Database["policies"]["value"]>();

return [
column.accessor("name", {
header: "Name",
cell: (props) => (
<a
class="font-medium hover:underline focus:underline p-1 -m-1 w-full block"
href={`/policies/${props.row.original.id}`}
>
{props.row.original.name}
</a>
),
}),
];
},
},
apps: {
table: () => {
const column = createColumnHelper<Database["apps"]["value"]>();

return [
column.accessor("name", {
header: "Name",
cell: (props) => (
<a
class="font-medium hover:underline focus:underline p-1 -m-1 w-full block"
href={`/applications/${props.row.original.id}`}
>
{props.row.original.name}
</a>
),
}),
];
},
},
} satisfies Record<string, { table: () => AccessorKeyColumnDef<any, any>[] }>;
Loading

0 comments on commit 3c86fb8

Please sign in to comment.