@tulip-systems/create-app 0.11.1

package/dist/templates/spark/src/app/admin/tasks/_components/command-copy.tsx

@@ -0,0 +1,135 @@
+"use client";
+
+import { type DefaultError, type MutationOptions, useSuspenseQuery } from "@tanstack/react-query";
+import {
+  CommandDialog,
+  CommandDialogContent,
+  CommandDialogFooter,
+  CommandDialogHeader,
+  CommandDialogTitle,
+  CommandDialogTrigger,
+  CommandIcon,
+  CommandLabel,
+} from "@tulip-systems/commands/client";
+import { useAction } from "@tulip-systems/core/client";
+import { Button } from "@tulip-systems/ui/button";
+import { useState } from "react";
+import { Icons } from "@/components/icons";
+import { orpc } from "@/server/router/client";
+import { SubprojectComboboxDropdown } from "../../subprojects/_components/multi-combobox-dropdown";
+
+type CopyTaskCommandProps<
+  TData = unknown,
+  TError = DefaultError,
+  // TVariables extends { ids: string[]; projectId: string; } = { ids: string[]; projectId: string; },
+  TOnMutateResult = unknown,
+> = {
+  meta: { projectId: string };
+  variables: { ids: string[] };
+  mutation: MutationOptions<
+    TData,
+    TError,
+    { ids: string[]; subprojectIds: string[] },
+    TOnMutateResult
+  >;
+};
+
+export function TaskCommandCopy<
+  TData = unknown,
+  TError = DefaultError,
+  // TVariables extends { ids: string[];  } = { ids: string[]; projectId: string; },
+  TOnMutateResult = unknown,
+>({ meta, variables, mutation }: CopyTaskCommandProps<TData, TError, TOnMutateResult>) {
+  const [open, setOpen] = useState(false);
+  const [subprojectIds, setSubprojectIds] = useState<string[]>([]);
+
+  const subprojectsQuery = useSuspenseQuery(
+    orpc.subprojects.getAll.queryOptions({ input: { filters: { projectId: [meta.projectId] } } }),
+  );
+
+  const { mutateAsync, isPending } = useAction(mutation);
+
+  function handleCancel() {
+    setOpen(false);
+  }
+
+  return (
+    <CommandDialog openState={{ open, setOpen }}>
+      <CommandDialogTrigger label="Copy">
+        <CommandIcon>
+          <Icons.copy className="w-4" />
+        </CommandIcon>
+
+        <CommandLabel />
+      </CommandDialogTrigger>
+
+      <CommandDialogContent className="space-y-3 px-6 sm:max-w-fit md:max-w-160">
+        <CommandDialogHeader>
+          <CommandDialogTitle>Subprojecten kopieren</CommandDialogTitle>
+        </CommandDialogHeader>
+
+        <SubprojectComboboxDropdown
+          values={subprojectIds}
+          onSelect={setSubprojectIds}
+          subprojects={subprojectsQuery.data}
+        />
+
+        <CommandDialogFooter>
+          <div className="flex w-full flex-row justify-between">
+            <Button variant="secondary" type="button" onClick={handleCancel}>
+              Annuleren
+            </Button>
+
+            <Button
+              type="button"
+              disabled={isPending || subprojectIds.length === 0}
+              onClick={async () => {
+                await mutateAsync({ ...variables, subprojectIds });
+                setOpen(false);
+                setSubprojectIds([]);
+              }}
+            >
+              {isPending && <Icons.spinner className="mr-2 h-4 w-4 animate-spin" />}
+              Toevoegen
+            </Button>
+          </div>
+        </CommandDialogFooter>
+      </CommandDialogContent>
+    </CommandDialog>
+  );
+}
+
+// <Combobox
+//     multiple
+//     autoHighlight
+//     defaultValue={subprojectIds}
+//     items={subprojectsQuery.data.map(({ id, title }) => ({ id, value: title }))}
+//   >
+//     <ComboboxChips>
+//       <ComboboxValue>
+//         {(values) => (
+//           <Fragment>
+//             {values.map((value: string) => {
+//               const item = subprojectsQuery.data.find((item) => item.id === value);
+//               if (!item) return null;
+
+//               return <ComboboxChip key={item.id}>{item.title}</ComboboxChip>;
+//             })}
+//             <ComboboxChipsInput />
+//           </Fragment>
+//         )}
+//       </ComboboxValue>
+//     </ComboboxChips>
+//     <ComboboxContent>
+//       <ComboboxEmpty>No items found.</ComboboxEmpty>
+//       <ComboboxList>
+//         {(item: { id: string; value: string }) => {
+//           return (
+//             <ComboboxItem key={item.id} value={item.id}>
+//               {item.value}
+//             </ComboboxItem>
+//           );
+//         }}
+//       </ComboboxList>
+//     </ComboboxContent>
+//   </Combobox>

package/dist/templates/spark/src/app/admin/tasks/_components/subproject-selector.tsx

@@ -0,0 +1,68 @@
+"use client";
+
+import { useSuspenseQuery } from "@tanstack/react-query";
+import type { Tab } from "@tulip-systems/app/components";
+import { buttonVariants } from "@tulip-systems/ui/button";
+import { cn } from "@tulip-systems/ui/cn";
+import { Skeleton } from "@tulip-systems/ui/skeleton";
+import type { Route } from "next";
+import Link from "next/link";
+import { useSelectedLayoutSegment } from "next/navigation";
+import { orpc } from "@/server/router/client";
+
+type TaskSubprojectTabGridProps = {
+  projectId: string;
+};
+
+export function TaskSubprojectTabGrid({ projectId }: TaskSubprojectTabGridProps) {
+  const currentSegment = useSelectedLayoutSegment();
+
+  const subprojectsQuery = useSuspenseQuery(
+    orpc.subprojects.getAll.queryOptions({ input: { filters: { projectId: [projectId] } } }),
+  );
+
+  const tabs: Tab[] = [
+    {
+      name: "Algemeen",
+      href: `/admin/projects/${projectId}/tasks` as Route,
+      segment: "(default)",
+    },
+    ...subprojectsQuery.data.flatMap((subproject) => ({
+      name: subproject.title,
+      href: `/admin/projects/${subproject.projectId}/tasks/${subproject.id}` as Route,
+      segment: subproject.id,
+    })),
+  ];
+
+  const selectedTab = tabs.find((tab) => tab.segment === currentSegment) ?? tabs[0];
+
+  return (
+    <div className="grid grid-flow-row-dense grid-cols-[repeat(auto-fill,_minmax(12rem,_1fr))] gap-2">
+      {tabs.flatMap((tab) => (
+        <Link
+          key={tab.segment}
+          href={tab.href}
+          className={cn(
+            "border border-transparent",
+            buttonVariants({
+              variant: tab.segment === selectedTab?.segment ? "default" : "outline",
+              className: "h-14 items-center justify-center",
+            }),
+          )}
+        >
+          <span className="line-clamp-2 overflow-hidden whitespace-normal">{tab.name}</span>
+        </Link>
+      ))}
+    </div>
+  );
+}
+
+export function TaskSubprojectTabGridLoading() {
+  return (
+    <div className="grid grid-flow-row-dense grid-cols-[repeat(auto-fill,_minmax(12rem,_1fr))] gap-2">
+      {Array.from({ length: 21 }).flatMap((_, index) => (
+        <Skeleton key={index} className="h-14" />
+      ))}
+    </div>
+  );
+}

package/dist/templates/spark/src/app/admin/tasks/_components/tables.tsx

@@ -0,0 +1,164 @@
+"use client";
+import { useSuspenseInfiniteQuery, useSuspenseQuery } from "@tanstack/react-query";
+import type { VisibilityState } from "@tanstack/react-table";
+import type { CommandFor } from "@tulip-systems/commands";
+import type { TableColumnDef } from "@tulip-systems/data-tables";
+import {
+  createTableConfig,
+  TableConfigProvider,
+  useInfiniteStrategy,
+  usePaginationStrategy,
+} from "@tulip-systems/data-tables/client";
+import { offsetPagination } from "@tulip-systems/query";
+import {
+  type UseFiltersOptions,
+  useFilters,
+  usePagination,
+  useSorting,
+} from "@tulip-systems/query/client";
+import { type PropsWithChildren, useDeferredValue, useMemo } from "react";
+import { orpc } from "@/server/router/client";
+import type { Project } from "../../projects/_lib/validators";
+import type { Subproject } from "../../subprojects/_lib/validators";
+import type { TaskCommandsMeta } from "../_config/commands";
+import { tasksFilters } from "../_config/filters";
+import { taskTableSorts } from "../_config/sorting";
+import type { Task } from "../_lib/validators";
+
+export type TaskTableData = Task & { project: Project; subproject: Subproject };
+
+/**
+ * Client data table
+ */
+type TaskTableProviderProps = PropsWithChildren<{
+  columns: TableColumnDef<TaskTableData>[];
+  commands?: CommandFor<TaskTableData[], TaskCommandsMeta>[];
+  filterOptions?: UseFiltersOptions<typeof tasksFilters>;
+  columnVisibility?: VisibilityState;
+  meta?: TaskCommandsMeta;
+}>;
+
+/**
+ * Infinite table
+ */
+export function TaskInfiniteTableProvider({
+  columns,
+  commands,
+  filterOptions,
+  columnVisibility,
+  meta,
+  children,
+}: TaskTableProviderProps) {
+  const pagination = usePagination(offsetPagination);
+  const filtering = useFilters(tasksFilters, filterOptions);
+  const sorting = useSorting(taskTableSorts);
+
+  const input = useDeferredValue({
+    pagination: pagination.input,
+    filters: filtering.input,
+    sorts: sorting.input,
+  });
+
+  /**
+   * Data
+   */
+  const response = useSuspenseInfiniteQuery(
+    orpc.tasks.list.infiniteOptions({
+      initialPageParam: 0,
+      input: (page: number | undefined) => ({
+        ...input,
+        pagination: { ...input.pagination, page: page ?? input.pagination.page },
+      }),
+      getNextPageParam: ({ pagination }) => pagination.nextPage,
+      getPreviousPageParam: ({ pagination }) => pagination.previousPage,
+    }),
+  );
+
+  const { total } = response.data.pages.at(-1)?.pagination ?? {};
+
+  /**
+   * Strategy
+   */
+  const strategy = useInfiniteStrategy({
+    pagination,
+    total,
+    fetchNextPage: response.fetchNextPage,
+    isFetching: response.isFetching,
+    isFetchingNextPage: response.isFetchingNextPage,
+  });
+
+  const queryData = useMemo(
+    () => response.data.pages.flatMap(({ data }) => data) ?? [],
+    [response.data],
+  );
+
+  /**
+   * Table
+   */
+  const config = createTableConfig<TaskTableData, TaskCommandsMeta>({
+    queryData,
+    getRowId: (row) => row.id,
+    columns,
+    strategy,
+    filtering,
+    sorting,
+    commands,
+    columnVisibility,
+
+    meta,
+  });
+
+  return <TableConfigProvider config={config}>{children}</TableConfigProvider>;
+}
+
+/**
+ * Pagination table
+ */
+export function TaskPaginationTableProvider({
+  columns,
+  commands,
+  filterOptions,
+  columnVisibility,
+  meta,
+  children,
+}: TaskTableProviderProps) {
+  const pagination = usePagination(offsetPagination);
+  const filtering = useFilters(tasksFilters, filterOptions);
+  const sorting = useSorting(taskTableSorts);
+
+  const input = useDeferredValue({
+    pagination: pagination.input,
+    filters: filtering.input,
+    sorts: sorting.input,
+  });
+
+  /**
+   * Data
+   */
+  const response = useSuspenseQuery(orpc.tasks.list.queryOptions({ input }));
+
+  const queryData = useMemo(() => response.data.data ?? [], [response.data.data]);
+  const { total } = response.data.pagination;
+
+  /**
+   * Strategy
+   */
+  const strategy = usePaginationStrategy({ pagination, total });
+
+  /**
+   * Table
+   */
+  const config = createTableConfig<TaskTableData, TaskCommandsMeta>({
+    queryData,
+    getRowId: (row) => row.id,
+    columns,
+    strategy,
+    sorting,
+    commands,
+    columnVisibility,
+
+    meta,
+  });
+
+  return <TableConfigProvider config={config}>{children}</TableConfigProvider>;
+}

package/dist/templates/spark/src/app/admin/tasks/_components/toolbars.tsx

@@ -0,0 +1,79 @@
+"use client";
+
+import { useSuspenseQuery } from "@tanstack/react-query";
+import { TableToolbar, TableToolbarList } from "@tulip-systems/data-tables";
+import { useTableConfigContext } from "@tulip-systems/data-tables/client";
+import { parseFiltersVisibility, resolveFilterDescriptors } from "@tulip-systems/query";
+import { FilterCombobox, FilterSearch } from "@tulip-systems/query/client";
+import { type PropsWithChildren, Suspense, useDeferredValue } from "react";
+import { orpc } from "@/server/router/client";
+import { tasksFilters } from "../_config/filters";
+import { taskStatusConfig } from "../_config/status";
+
+const tasksFiltersDescriptors = resolveFilterDescriptors(tasksFilters);
+
+const filtersVisibilityConfig = [
+  "search",
+  "status",
+  "subprojectId",
+] satisfies (keyof typeof tasksFiltersDescriptors)[];
+
+export function TaskTableToolbar(
+  props: PropsWithChildren<{
+    filtersVisibility?: Partial<Record<(typeof filtersVisibilityConfig)[number], boolean>>;
+  }>,
+) {
+  const visibilityState = parseFiltersVisibility(filtersVisibilityConfig, props.filtersVisibility);
+
+  return (
+    <TableToolbar>
+      <TableToolbarList>
+        {visibilityState.search && (
+          <FilterSearch placeholder="Zoeken..." filter={tasksFiltersDescriptors.search} />
+        )}
+
+        <Suspense>
+          {visibilityState.status && <TaskStatusFilter />}
+          {visibilityState.subprojectId && <TaskSubprojectFilter />}
+        </Suspense>
+      </TableToolbarList>
+
+      <TableToolbarList>{props.children}</TableToolbarList>
+    </TableToolbar>
+  );
+}
+
+/**
+ * Task subproject filter
+ */
+export function TaskSubprojectFilter() {
+  const table = useTableConfigContext();
+  const input = useDeferredValue({ filters: table.filtering?.input ?? {} });
+
+  const { data } = useSuspenseQuery(
+    orpc.tasks.filterSubprojects.queryOptions({
+      input,
+    }),
+  );
+
+  return (
+    <FilterCombobox
+      title="Subprojecten"
+      filter={tasksFiltersDescriptors.subprojectId}
+      options={data}
+    />
+  );
+}
+
+/**
+ * Task status filter
+ */
+export function TaskStatusFilter() {
+  return (
+    <FilterCombobox
+      title="Status"
+      filter={tasksFiltersDescriptors.status}
+      options={taskStatusConfig}
+    />
+  );
+}

package/dist/templates/spark/src/app/admin/tasks/_config/columns-data.tsx

@@ -0,0 +1,67 @@
+"use client";
+
+import { TableCell, type TableColumnDef, TableColumnHeader } from "@tulip-systems/data-tables";
+import { createTableIndexCell, createTableSelectCell } from "@tulip-systems/data-tables/client";
+import { Editor, EditorContent } from "@tulip-systems/editor/client";
+import Link from "next/link";
+import type { TaskTableData } from "../_components/tables";
+import { TaskStatusField } from "./status";
+
+export const taskTableColumns: TableColumnDef<TaskTableData>[] = [
+  createTableSelectCell(),
+  {
+    accessorKey: "articleNumber",
+    header: ({ column }) => <TableColumnHeader column={column} title="Artikel" />,
+    cell: ({ row }) => <TableCell className="min-w-40">{row.getValue("articleNumber")}</TableCell>,
+  },
+  {
+    accessorKey: "description",
+    header: ({ column }) => <TableColumnHeader column={column} title="Omschrijving" />,
+    cell: ({ row }) => (
+      <TableCell className="w-full min-w-80">
+        <Editor value={row.getValue("description")} variant="preview" disabled>
+          <EditorContent />
+        </Editor>
+      </TableCell>
+    ),
+  },
+  {
+    accessorKey: "status",
+    header: ({ column }) => <TableColumnHeader column={column} title="Status" />,
+    cell: (context) => (
+      <TableCell className="min-w-64">
+        <TaskStatusField status={context.row.original.status} />
+      </TableCell>
+    ),
+  },
+  {
+    id: "subprojectTitle",
+    header: ({ column }) => <TableColumnHeader column={column} title="Subproject" />,
+    accessorFn: (row) => row.subproject?.title ?? "",
+    cell: ({ row }) => (
+      <TableCell className="min-w-40" readonly>
+        <Link
+          href={`/admin/subproject/${row.original.subproject?.id}`}
+          className="whitespace-normal hover:underline"
+        >
+          {row.getValue("subprojectTitle")}
+        </Link>
+      </TableCell>
+    ),
+    enableSorting: false,
+  },
+  {
+    id: "projectTitle",
+    header: ({ column }) => <TableColumnHeader column={column} title="Project" />,
+    accessorFn: (row) => row.project.title,
+    cell: ({ row }) => (
+      <TableCell className="w-40" readonly>
+        <Link href={`/admin/projects/${row.original.project.id}`} className="hover:underline">
+          {row.getValue("projectTitle")}
+        </Link>
+      </TableCell>
+    ),
+    enableSorting: false,
+  },
+  createTableIndexCell(),
+];

package/dist/templates/spark/src/app/admin/tasks/_config/columns-inline.tsx

@@ -0,0 +1,159 @@
+"use client";
+
+import { useSuspenseQuery } from "@tanstack/react-query";
+import type { CellContext } from "@tanstack/react-table";
+import { type TableColumnDef, TableColumnHeader } from "@tulip-systems/data-tables";
+import {
+  createTableDragHandleCell,
+  createTableIndexCell,
+  createTableSelectCell,
+  TableTextCell,
+} from "@tulip-systems/data-tables/client";
+import { EditorContent, EditorMenuBubble } from "@tulip-systems/editor/client";
+import {
+  InlineEditor,
+  InlineSelect,
+  InlineSelectContent,
+  InlineSelectItem,
+  InlineSelectTrigger,
+  InlineSelectValue,
+  InlineStringInput,
+  InlineTableCell,
+  InlineTableCellError,
+} from "@tulip-systems/inline/client";
+import Link from "next/link";
+import { z } from "zod";
+import { orpc } from "@/server/router/client";
+import type { TaskTableData } from "../_components/tables";
+import type { TaskStatus } from "../_lib/validators";
+import { TaskStatusField, taskStatusConfig } from "./status";
+
+export const taskInlineTableColumns: TableColumnDef<TaskTableData>[] = [
+  createTableSelectCell(),
+  createTableDragHandleCell({ permissions: { task: ["update"] } }),
+  {
+    accessorKey: "articleNumber",
+    header: ({ column }) => <TableColumnHeader column={column} title="Artikel" />,
+    cell: ({ row }) => (
+      <InlineTableCell className="min-w-40">
+        <InlineStringInput
+          initialValue={row.original.articleNumber ?? undefined}
+          variables={(value) => ({
+            id: row.original.id,
+            data: { articleNumber: value as string },
+          })}
+          mutation={orpc.tasks.update.mutationOptions()}
+          strategy={{ mutate: { on: "blur" }, validate: { blur: z.string().nullable() } }}
+          permission={{ task: ["update"] }}
+          variant="table"
+        />
+        <InlineTableCellError />
+      </InlineTableCell>
+    ),
+  },
+  {
+    accessorKey: "description",
+    header: ({ column }) => <TableColumnHeader column={column} title="Omschrijving" />,
+    cell: ({ row }) => (
+      <InlineTableCell className="w-full min-w-80">
+        <InlineEditor
+          initialValue={row.original.description ?? undefined}
+          variables={(value) => ({ id: row.original.id, data: { description: value } })}
+          mutation={orpc.tasks.update.mutationOptions()}
+          strategy={{ mutate: { on: "change", debounceMs: 700 }, validate: { change: z.any() } }}
+          variant="table"
+        >
+          <EditorMenuBubble />
+          <EditorContent />
+        </InlineEditor>
+        <InlineTableCellError />
+      </InlineTableCell>
+    ),
+  },
+  {
+    accessorKey: "status",
+    header: ({ column }) => <TableColumnHeader column={column} title="Status" />,
+    cell: (context) => (
+      <InlineTableCell className="min-w-64">
+        <InlineSelect
+          initialValue={context.row.original.status}
+          variables={(value) => ({
+            id: context.row.original.id,
+            data: { status: value as TaskStatus },
+          })}
+          mutation={orpc.tasks.update.mutationOptions()}
+          strategy={{ mutate: { on: "commit" }, validate: { commit: z.string().nullable() } }}
+        >
+          <InlineSelectTrigger variant="table">
+            <InlineSelectValue placeholder="Select a status" />
+          </InlineSelectTrigger>
+
+          <InlineSelectContent>
+            {taskStatusConfig.map(({ value }) => (
+              <InlineSelectItem key={value} value={value}>
+                <TaskStatusField status={value as TaskStatus} />
+              </InlineSelectItem>
+            ))}
+          </InlineSelectContent>
+        </InlineSelect>
+        <InlineTableCellError />
+      </InlineTableCell>
+    ),
+  },
+  {
+    accessorKey: "subprojectId",
+    header: ({ column }) => <TableColumnHeader column={column} title="Subproject" />,
+    cell: (context) => <TaskInlineTableSubprojectIdCell context={context} />,
+  },
+  {
+    id: "projectTitle",
+    header: ({ column }) => <TableColumnHeader column={column} title="Project" />,
+    accessorFn: (row) => row.project.title,
+    cell: ({ row }) => (
+      <TableTextCell className="w-40" readonly>
+        <Link href={`/admin/projects/${row.original.project.id}`} className="hover:underline">
+          {row.original.project.title}
+        </Link>
+      </TableTextCell>
+    ),
+    enableSorting: false,
+  },
+  createTableIndexCell(),
+];
+
+/**
+ * Cells
+ */
+function TaskInlineTableSubprojectIdCell(props: { context: CellContext<TaskTableData, unknown> }) {
+  const { subprojectId, projectId } = props.context.row.original;
+  const { data } = useSuspenseQuery(
+    orpc.subprojects.getAll.queryOptions({ input: { filters: { projectId: [projectId] } } }),
+  );
+
+  return (
+    <InlineTableCell className="min-w-64">
+      <InlineSelect
+        initialValue={subprojectId ?? undefined}
+        variables={(value) => ({
+          id: props.context.row.original.id,
+          data: { subprojectId: value as string },
+        })}
+        mutation={orpc.tasks.update.mutationOptions()}
+        strategy={{ mutate: { on: "commit" }, validate: { commit: z.string().nullable() } }}
+      >
+        <InlineSelectTrigger variant="table">
+          <InlineSelectValue placeholder="Select a subproject" />
+        </InlineSelectTrigger>
+
+        <InlineSelectContent>
+          {data.map(({ id, title }) => (
+            <InlineSelectItem key={id} value={id}>
+              {title}
+            </InlineSelectItem>
+          ))}
+        </InlineSelectContent>
+      </InlineSelect>
+      <InlineTableCellError />
+    </InlineTableCell>
+  );
+}