@tulip-systems/create-app 0.11.1

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

@@ -0,0 +1,111 @@
+"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",
+  "projectId",
+  "assigneeId",
+  "initiativeId",
+  "domainId",
+] 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.projectId && <TaskProjectFilter />}
+          {visibilityState.assigneeId && <TaskAssigneeFilter />}
+          {visibilityState.initiativeId && <TaskInitiativeFilter />}
+          {visibilityState.domainId && <TaskDomainFilter />}
+        </Suspense>
+      </TableToolbarList>
+
+      <TableToolbarList>{props.children}</TableToolbarList>
+    </TableToolbar>
+  );
+}
+
+/**
+ * Filters
+ */
+export function TaskProjectFilter() {
+  const table = useTableConfigContext();
+  const input = useDeferredValue({ filters: table.filtering?.input ?? {} });
+
+  const { data } = useSuspenseQuery(orpc.tasks.filterProjects.queryOptions({ input }));
+
+  return (
+    <FilterCombobox title="Projecten" filter={tasksFiltersDescriptors.projectId} options={data} />
+  );
+}
+
+export function TaskAssigneeFilter() {
+  const table = useTableConfigContext();
+  const input = useDeferredValue({ filters: table.filtering?.input ?? {} });
+
+  const { data } = useSuspenseQuery(orpc.tasks.filterAssignees.queryOptions({ input }));
+
+  return (
+    <FilterCombobox title="Assignee" filter={tasksFiltersDescriptors.assigneeId} options={data} />
+  );
+}
+
+export function TaskInitiativeFilter() {
+  const table = useTableConfigContext();
+  const input = useDeferredValue({ filters: table.filtering?.input ?? {} });
+
+  const { data } = useSuspenseQuery(orpc.tasks.filterInitiatives.queryOptions({ input }));
+
+  return (
+    <FilterCombobox
+      title="Initiatieven"
+      filter={tasksFiltersDescriptors.initiativeId}
+      options={data}
+    />
+  );
+}
+
+export function TaskDomainFilter() {
+  const table = useTableConfigContext();
+  const input = useDeferredValue({ filters: table.filtering?.input ?? {} });
+
+  const { data } = useSuspenseQuery(orpc.tasks.filterDomains.queryOptions({ input }));
+
+  return (
+    <FilterCombobox title="Domeinen" filter={tasksFiltersDescriptors.domainId} options={data} />
+  );
+}
+
+export function TaskStatusFilter() {
+  return (
+    <FilterCombobox
+      title="Status"
+      filter={tasksFiltersDescriptors.status}
+      options={taskStatusConfig}
+    />
+  );
+}

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

@@ -0,0 +1,105 @@
+"use client";
+
+import { formatDate } from "@tulip-systems/core";
+import { TableCell, type TableColumnDef, TableColumnHeader } from "@tulip-systems/data-tables";
+import { createTableSelectCell } from "@tulip-systems/data-tables/client";
+import { cn } from "@tulip-systems/ui/cn";
+import Link from "next/link";
+import type { TaskTableData } from "../_components/tables";
+import { TaskStatusField } from "./status";
+
+export const taskTableColumns: TableColumnDef<TaskTableData>[] = [
+  createTableSelectCell(),
+  {
+    accessorKey: "code",
+    header: ({ column }) => <TableColumnHeader column={column} title="Code" />,
+    cell: ({ row }) => (
+      <TableCell>
+        <Link href={`/admin/tasks/${row.original.id}`} className="truncate hover:underline">
+          {row.original.code}
+        </Link>
+      </TableCell>
+    ),
+  },
+  {
+    accessorKey: "title",
+    header: ({ column }) => <TableColumnHeader column={column} title="Titel" />,
+    cell: ({ row }) => <TableCell className="w-full min-w-64">{row.original.title}</TableCell>,
+  },
+  {
+    accessorKey: "status",
+    header: ({ column }) => <TableColumnHeader column={column} title="Status" />,
+    cell: (context) => (
+      <TableCell className="min-w-40">
+        <TaskStatusField status={context.row.original.status} />
+      </TableCell>
+    ),
+  },
+  {
+    accessorKey: "deadline",
+    header: ({ column }) => <TableColumnHeader column={column} title="Deadline" />,
+    cell: ({ row }) => {
+      const deadline = row.original.deadline;
+
+      return (
+        <TableCell
+          className={cn("min-w-40", deadline && deadline < new Date() && "text-destructive")}
+        >
+          {deadline ? formatDate(deadline) : null}
+        </TableCell>
+      );
+    },
+  },
+  {
+    id: "parentTitle",
+    header: ({ column }) => <TableColumnHeader column={column} title="Parent" />,
+    accessorFn: (row) => row.parent?.title ?? "",
+    cell: ({ row }) => (
+      <TableCell className="min-w-40">
+        <Link href={`/admin/tasks/${row.original.parent?.id}`} className="hover:underline">
+          {row.getValue("parentTitle")}
+        </Link>
+      </TableCell>
+    ),
+    enableSorting: false,
+  },
+  {
+    id: "projectTitle",
+    header: ({ column }) => <TableColumnHeader column={column} title="Project" />,
+    accessorFn: (row) => row.project.title,
+    cell: ({ row }) => (
+      <TableCell className="min-w-40">
+        <Link
+          href={`/admin/projects/${row.original.projectId}`}
+          className="truncate hover:underline"
+        >
+          {row.getValue("projectTitle")}
+        </Link>
+      </TableCell>
+    ),
+    enableSorting: false,
+  },
+  {
+    id: "initiativeTitle",
+    header: ({ column }) => <TableColumnHeader column={column} title="Initiative" />,
+    accessorFn: (row) => row.initiative.title,
+    cell: ({ row }) => (
+      <TableCell className="min-w-40">
+        <Link
+          href={`/admin/initiatives/${row.original.initiativeId}`}
+          className="truncate hover:underline"
+        >
+          {row.getValue("initiativeTitle")}
+        </Link>
+      </TableCell>
+    ),
+    enableSorting: false,
+  },
+  {
+    id: "domainTitle",
+    header: ({ column }) => <TableColumnHeader column={column} title="Domain" />,
+    accessorFn: (row) => row.domain?.title ?? "",
+    cell: ({ row }) => <TableCell className="min-w-40">{row.getValue("domainTitle")}</TableCell>,
+    enableSorting: false,
+  },
+];

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

@@ -0,0 +1,253 @@
+"use client";
+import { type TableColumnDef, TableColumnHeader } from "@tulip-systems/data-tables";
+import {
+  createTableIndexCell,
+  createTableSelectCell,
+  TableReadOnlyCell,
+} from "@tulip-systems/data-tables/client";
+import {
+  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, TaskTableMeta } from "../_components/tables";
+import { storyPointsConfig } from "../_lib/constants";
+import type { TaskStatus } from "../_lib/validators";
+import { TaskStatusField, taskStatusConfig } from "./status";
+
+export const taskInlineTableColumns: TableColumnDef<TaskTableData>[] = [
+  createTableSelectCell(),
+  {
+    accessorKey: "code",
+    header: ({ column }) => <TableColumnHeader column={column} title="Code" />,
+    cell: ({ row }) => (
+      <InlineTableCell className="min-w-16">
+        <TableReadOnlyCell>
+          <Link href={`/admin/tasks/${row.original.id}`} className="truncate hover:underline">
+            {row.original.code}
+          </Link>
+        </TableReadOnlyCell>
+      </InlineTableCell>
+    ),
+  },
+  {
+    accessorKey: "title",
+    header: ({ column }) => <TableColumnHeader column={column} title="Titel" />,
+    cell: ({ row }) => (
+      <InlineTableCell className="w-full min-w-160">
+        <InlineStringInput
+          initialValue={row.original.title}
+          variables={(value) => ({ id: row.original.id, data: { title: value ?? undefined } })}
+          mutation={orpc.tasks.update.mutationOptions()}
+          strategy={{ mutate: { on: "blur" }, validate: { blur: z.string() } }}
+          variant="table"
+        />
+        <InlineTableCellError />
+      </InlineTableCell>
+    ),
+  },
+  {
+    accessorKey: "status",
+    header: ({ column }) => <TableColumnHeader column={column} title="Status" />,
+    cell: (context) => (
+      <InlineTableCell className="min-w-42">
+        <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() } }}
+          permission={{ task: ["update"] }}
+        >
+          <InlineSelectTrigger variant="table">
+            <InlineSelectValue placeholder="Kies een status" />
+          </InlineSelectTrigger>
+
+          <InlineSelectContent>
+            {taskStatusConfig.map(({ value }) => (
+              <InlineSelectItem key={value} value={value}>
+                <TaskStatusField status={value as TaskStatus} />
+              </InlineSelectItem>
+            ))}
+          </InlineSelectContent>
+        </InlineSelect>
+        <InlineTableCellError />
+      </InlineTableCell>
+    ),
+  },
+  {
+    accessorKey: "storyPoints",
+    header: ({ column }) => <TableColumnHeader column={column} title="Storypoints" />,
+    cell: (context) => (
+      <InlineTableCell className="max-w-24">
+        <InlineSelect
+          initialValue={context.row.original.storyPoints?.toString()}
+          variables={(value) => ({
+            id: context.row.original.id,
+            data: { storyPoints: Number(value) },
+          })}
+          mutation={orpc.tasks.update.mutationOptions()}
+          strategy={{ mutate: { on: "commit" }, validate: { commit: z.string().nullable() } }}
+          permission={{ task: ["update"] }}
+        >
+          <InlineSelectTrigger variant="table">
+            <InlineSelectValue />
+          </InlineSelectTrigger>
+
+          <InlineSelectContent>
+            {storyPointsConfig.map((value) => (
+              <InlineSelectItem key={value} value={value.toString()}>
+                {value}
+              </InlineSelectItem>
+            ))}
+          </InlineSelectContent>
+        </InlineSelect>
+        <InlineTableCellError />
+      </InlineTableCell>
+    ),
+    enableSorting: false,
+  },
+  {
+    accessorKey: "assigneeId",
+    header: ({ column }) => <TableColumnHeader column={column} title="Assignee" />,
+    cell: (context) => {
+      const meta = context.table.options.meta as TaskTableMeta;
+
+      return (
+        <InlineTableCell className="min-w-42">
+          <InlineSelect
+            initialValue={context.row.original.assigneeId}
+            variables={(value) => ({ id: context.row.original.id, data: { assigneeId: value } })}
+            mutation={orpc.tasks.update.mutationOptions()}
+            strategy={{ mutate: { on: "commit" }, validate: { commit: z.string().nullable() } }}
+            permission={{ task: ["update"] }}
+          >
+            <InlineSelectTrigger variant="table">
+              <InlineSelectValue />
+            </InlineSelectTrigger>
+
+            <InlineSelectContent>
+              {meta.employees?.map(({ id, user }) => (
+                <InlineSelectItem key={id} value={id}>
+                  {user.name}
+                </InlineSelectItem>
+              ))}
+            </InlineSelectContent>
+          </InlineSelect>
+          <InlineTableCellError />
+        </InlineTableCell>
+      );
+    },
+    enableSorting: false,
+  },
+  {
+    id: "projectTitle",
+    header: ({ column }) => <TableColumnHeader column={column} title="Project" />,
+    accessorFn: (row) => row.project.title,
+    cell: ({ row }) => (
+      <InlineTableCell className="w-full min-w-40">
+        <TableReadOnlyCell>
+          <Link href={`/admin/projects/${row.original.project.id}`} className="hover:underline">
+            {row.getValue("projectTitle")}
+          </Link>
+        </TableReadOnlyCell>
+      </InlineTableCell>
+    ),
+    enableSorting: false,
+  },
+  {
+    id: "initiativeId",
+    header: ({ column }) => <TableColumnHeader column={column} title="Initiative" />,
+    cell: (context) => {
+      const meta = context.table.options.meta as TaskTableMeta;
+
+      return (
+        <InlineTableCell className="min-w-42">
+          <InlineSelect
+            initialValue={context.row.original.initiativeId}
+            variables={(value) => ({
+              id: context.row.original.id,
+              data: { initiativeId: value ?? undefined },
+            })}
+            mutation={orpc.tasks.update.mutationOptions()}
+            strategy={{ mutate: { on: "commit" }, validate: { commit: z.string().nullable() } }}
+            permission={{ task: ["update"] }}
+          >
+            <InlineSelectTrigger variant="table">
+              <InlineSelectValue />
+            </InlineSelectTrigger>
+
+            <InlineSelectContent>
+              {meta.initiatives?.map(({ id, title }) => (
+                <InlineSelectItem key={id} value={id}>
+                  {title}
+                </InlineSelectItem>
+              ))}
+            </InlineSelectContent>
+          </InlineSelect>
+          <InlineTableCellError />
+        </InlineTableCell>
+      );
+    },
+    enableSorting: false,
+  },
+  {
+    id: "domainId",
+    header: ({ column }) => <TableColumnHeader column={column} title="Domain" />,
+    cell: (context) => {
+      const meta = context.table.options.meta as TaskTableMeta;
+
+      return (
+        <InlineTableCell className="min-w-42">
+          <InlineSelect
+            initialValue={context.row.original.domainId}
+            variables={(value) => ({ id: context.row.original.id, data: { domainId: value } })}
+            mutation={orpc.tasks.update.mutationOptions()}
+            strategy={{ mutate: { on: "commit" }, validate: { commit: z.string().nullable() } }}
+            permission={{ task: ["update"] }}
+          >
+            <InlineSelectTrigger variant="table">
+              <InlineSelectValue />
+            </InlineSelectTrigger>
+
+            <InlineSelectContent>
+              {meta.domains?.map(({ id, title }) => (
+                <InlineSelectItem key={id} value={id}>
+                  {title}
+                </InlineSelectItem>
+              ))}
+            </InlineSelectContent>
+          </InlineSelect>
+          <InlineTableCellError />
+        </InlineTableCell>
+      );
+    },
+    enableSorting: false,
+  },
+  {
+    id: "parentTitle",
+    header: ({ column }) => <TableColumnHeader column={column} title="Parent" />,
+    accessorFn: (row) => row.parent?.title ?? "",
+    cell: ({ row }) => (
+      <InlineTableCell className="w-full min-w-40">
+        <TableReadOnlyCell>
+          <Link href={`/admin/tasks/${row.original.parent?.id}`} className="hover:underline">
+            {row.getValue("parentTitle")}
+          </Link>
+        </TableReadOnlyCell>
+      </InlineTableCell>
+    ),
+    enableSorting: false,
+  },
+  createTableIndexCell(),
+];

package/dist/templates/code/src/app/admin/tasks/_config/commands.tsx

@@ -0,0 +1,143 @@
+"use client";
+
+import { useSuspenseQuery } from "@tanstack/react-query";
+import { commandBuilder, ensureArray } from "@tulip-systems/commands";
+import {
+  CommandDropdown,
+  CommandDropdownContent,
+  CommandDropdownItem,
+  CommandDropdownTrigger,
+  CommandLabel,
+  DeleteCommand,
+} from "@tulip-systems/commands/client";
+import { toast } from "@tulip-systems/ui/sonner";
+import { SheetIcon, UserRoundPenIcon } from "lucide-react";
+import { Icons } from "@/components/icons";
+import { orpc } from "@/server/router/client";
+import {
+  ImportExcelTasksCommand,
+  ImportExcelTasksCommandTrigger,
+} from "../_components/command-import-excel";
+import {
+  CreateTaskCommand,
+  type CreateTaskCommandDefaultValues,
+  CreateTaskCommandTrigger,
+} from "../_components/create-command";
+import { TaskStatusField, taskStatusConfig } from "./status";
+
+/**
+ * Task commands
+ */
+export const taskCreateCommand = commandBuilder
+  .$type<CreateTaskCommandDefaultValues>()
+  .permission({ task: ["create"] })
+  .render(({ data }) => (
+    <CreateTaskCommand
+      defaultValues={data as CreateTaskCommandDefaultValues}
+      variables={(values) => values}
+      mutation={orpc.tasks.create.mutationOptions({
+        onSuccess: () => toast.success("Task succesvol toegevoegd"),
+      })}
+    >
+      <CreateTaskCommandTrigger label="Toevoegen" hotkey="mod+i">
+        <Icons.add className="size-4" />
+        <CommandLabel />
+      </CreateTaskCommandTrigger>
+    </CreateTaskCommand>
+  ));
+
+export const taskImportExcelCommand = commandBuilder
+  .$type<{
+    projectId: string;
+    initiativeId?: string | null;
+    domainId?: string | null;
+    parentId?: string | null;
+  }>()
+  .permission({ task: ["create"] })
+  .render(({ data }) => (
+    <ImportExcelTasksCommand
+      defaultValues={{
+        projectId: data.projectId,
+        initiativeId: data.initiativeId ?? undefined,
+        domainId: data.domainId ?? undefined,
+      }}
+    >
+      <ImportExcelTasksCommandTrigger label="Excel importeren">
+        <SheetIcon />
+        <CommandLabel />
+      </ImportExcelTasksCommandTrigger>
+    </ImportExcelTasksCommand>
+  ));
+
+export const taskUpdateStatusCommand = commandBuilder
+  .$type<{ id: string } | { id: string }[]>()
+  .transform(ensureArray)
+  .permission({ task: ["update"] })
+  .render(({ data }) => (
+    <CommandDropdown>
+      <CommandDropdownTrigger label="Status">
+        <Icons.edit className="w-4" />
+        <CommandLabel />
+      </CommandDropdownTrigger>
+
+      <CommandDropdownContent>
+        {taskStatusConfig.flatMap((status) => (
+          <CommandDropdownItem
+            key={status.value}
+            variables={{ ids: data.map((item) => item.id), status: status.value }}
+            mutation={orpc.tasks.setStatus.mutationOptions({
+              onSuccess: () =>
+                toast.success(`Status is gewijzigd naar ${status.label.toLowerCase()}`),
+            })}
+          >
+            <TaskStatusField status={status.value} />
+          </CommandDropdownItem>
+        ))}
+      </CommandDropdownContent>
+    </CommandDropdown>
+  ));
+
+export const taskUpdateAssigneeCommand = commandBuilder
+  .$type<{ id: string } | { id: string }[]>()
+  .transform(ensureArray)
+  .permission({ task: ["update"] })
+  .render(({ data }) => {
+    const ids = data.map((item) => item.id);
+    const employeesQuery = useSuspenseQuery(orpc.employees.getAll.queryOptions());
+
+    return (
+      <CommandDropdown>
+        <CommandDropdownTrigger label="Assignee">
+          <UserRoundPenIcon className="w-4" />
+          <CommandLabel />
+        </CommandDropdownTrigger>
+
+        <CommandDropdownContent>
+          {employeesQuery.data.flatMap((employee) => (
+            <CommandDropdownItem
+              key={employee.id}
+              variables={{ ids, assigneeId: employee.id }}
+              mutation={orpc.tasks.setAssignee.mutationOptions({
+                onSuccess: () => toast.success("Assignee is successvol gewijzigd"),
+              })}
+            >
+              {employee.user.name}
+            </CommandDropdownItem>
+          ))}
+        </CommandDropdownContent>
+      </CommandDropdown>
+    );
+  });
+
+export const taskDeleteCommand = commandBuilder
+  .$type<{ id: string } | { id: string }[]>()
+  .transform(ensureArray)
+  .permission({ task: ["delete"] })
+  .render(({ data }) => (
+    <DeleteCommand
+      variables={{ ids: data.map((item) => item.id) }}
+      mutation={orpc.tasks.delete.mutationOptions({
+        onSuccess: () => toast.success("Succesvol verwijderd"),
+      })}
+    />
+  ));

package/dist/templates/code/src/app/admin/tasks/_config/filters.ts

@@ -0,0 +1,51 @@
+import {
+  arrayFilter,
+  createFilteringParser,
+  defineFilters,
+  enumFilter,
+  resolveFiltersSchema,
+  resolveParsedFilteringSchema,
+  stringFilter,
+} from "@tulip-systems/query";
+import { createDatabaseFiltersCompiler } from "@tulip-systems/query/drizzle";
+import { createLocalFiltersCompiler } from "@tulip-systems/query/tanstack-db";
+import type z from "zod";
+import { taskStatusEnum } from "../_lib/schema";
+
+export const tasksFilters = defineFilters({
+  search: stringFilter.build((value) =>
+    value ? { field: "title", operator: "ilike", value: `%${value}%` } : null,
+  ),
+  projectId: arrayFilter(stringFilter).build((value) =>
+    value?.length ? { field: "projectId", operator: "in", value } : null,
+  ),
+  parentId: stringFilter.build((value) =>
+    value ? { field: "parentId", operator: "eq", value } : null,
+  ),
+  assigneeId: arrayFilter(stringFilter).build((value) =>
+    value?.length ? { field: "assigneeId", operator: "in", value } : null,
+  ),
+  initiativeId: arrayFilter(stringFilter).build((value) =>
+    value?.length ? { field: "initiativeId", operator: "in", value } : null,
+  ),
+  domainId: arrayFilter(stringFilter).build((value) =>
+    value?.length ? { field: "domainId", operator: "in", value } : null,
+  ),
+  status: arrayFilter(enumFilter(taskStatusEnum.enumValues)).build((value) =>
+    value?.length ? { field: "status", operator: "in", value } : null,
+  ),
+});
+
+/**
+ * Validators
+ */
+export const taskFiltersSchema = resolveFiltersSchema(tasksFilters);
+export const taskParsedFiltersSchema = resolveParsedFilteringSchema(tasksFilters);
+export type TaskFiltersSchema = z.input<typeof taskFiltersSchema>;
+
+/**
+ * Local filters parser
+ */
+export const taskFiltersParser = createFilteringParser(tasksFilters);
+export const taskDatabaseFiltersCompiler = createDatabaseFiltersCompiler(tasksFilters);
+export const taskLocalFiltersCompiler = createLocalFiltersCompiler(tasksFilters);