From c7772ca91e00313d12df28c5fc9b17172f64faeb Mon Sep 17 00:00:00 2001 From: BennyKok Date: Fri, 19 Jan 2024 18:12:07 +0800 Subject: [PATCH] feat: update workflow page ux --- web/src/app/(app)/workflows/page.tsx | 43 +++---------- web/src/components/WorkflowList.tsx | 93 ++++++++++----------------- web/src/db/schema.ts | 6 +- web/src/server/getAllUserWorkflow.tsx | 53 +++++++++++++++ 4 files changed, 103 insertions(+), 92 deletions(-) create mode 100644 web/src/server/getAllUserWorkflow.tsx diff --git a/web/src/app/(app)/workflows/page.tsx b/web/src/app/(app)/workflows/page.tsx index 44794f5..d1499d2 100644 --- a/web/src/app/(app)/workflows/page.tsx +++ b/web/src/app/(app)/workflows/page.tsx @@ -1,16 +1,17 @@ import { setInitialUserData } from "../../../lib/setInitialUserData"; +import { getAllUserWorkflow } from "../../../server/getAllUserWorkflow"; import { WorkflowList } from "@/components/WorkflowList"; import { db } from "@/db/db"; -import { usersTable, workflowTable, workflowVersionTable } from "@/db/schema"; +import { usersTable } from "@/db/schema"; import { auth } from "@clerk/nextjs"; -import { and, desc, eq, isNull } from "drizzle-orm"; +import { eq } from "drizzle-orm"; export default function Home() { return ; } async function WorkflowServer() { - const { userId, orgId } = await auth(); + const { userId } = await auth(); if (!userId) { return
No auth
; @@ -24,35 +25,11 @@ async function WorkflowServer() { await setInitialUserData(userId); } - const workflow = await db.query.workflowTable.findMany({ - // extras: { - // count: sql`(select count(*) from ${workflowVersionTable})`.as( - // "count", - // ), - // }, - with: { - versions: { - limit: 1, - orderBy: desc(workflowVersionTable.version), - }, - }, - orderBy: desc(workflowTable.updated_at), - where: - orgId != undefined - ? eq(workflowTable.org_id, orgId) - : and(eq(workflowTable.user_id, userId), isNull(workflowTable.org_id)), - }); + const workflow = await getAllUserWorkflow(); - return ( - { - return { - id: x.id, - email: x.name, - amount: x.versions[0]?.version ?? 0, - date: x.updated_at, - }; - })} - /> - ); + if (!workflow) { + return
No workflow found
; + } + + return ; } diff --git a/web/src/components/WorkflowList.tsx b/web/src/components/WorkflowList.tsx index c9126e6..5be5c02 100644 --- a/web/src/components/WorkflowList.tsx +++ b/web/src/components/WorkflowList.tsx @@ -1,6 +1,7 @@ "use client"; import { getRelativeTime } from "../lib/getRelativeTime"; +import { Badge } from "@/components/ui/badge"; import { Button } from "@/components/ui/button"; import { Checkbox } from "@/components/ui/checkbox"; import { @@ -21,6 +22,7 @@ import { TableRow, } from "@/components/ui/table"; import { deleteWorkflow } from "@/server/deleteWorkflow"; +import type { getAllUserWorkflow } from "@/server/getAllUserWorkflow"; import type { ColumnDef, ColumnFiltersState, @@ -38,14 +40,11 @@ import { import { ArrowUpDown, MoreHorizontal } from "lucide-react"; import * as React from "react"; -export type Payment = { - id: string; - amount: number; - date: Date; - email: string; -}; +export type WorkflowItemList = NonNullable< + Awaited> +>[0]; -export const columns: ColumnDef[] = [ +export const columns: ColumnDef[] = [ { accessorKey: "id", id: "select", @@ -70,7 +69,7 @@ export const columns: ColumnDef[] = [ enableHiding: false, }, { - accessorKey: "email", + accessorKey: "name", header: ({ column }) => { return ( + ); + }, cell: ({ row }) => { - const amount = parseFloat(row.getValue("amount")); - - // Format the amount as a dollar amount - // const formatted = new Intl.NumberFormat("en-US", { - // style: "currency", - // currency: "USD", - // }).format(amount); - - return
{amount}
; + return {row.original.user.name}; }, }, { @@ -113,7 +120,7 @@ export const columns: ColumnDef[] = [ header: ({ column }) => { return ( - - - {table - .getAllColumns() - .filter((column) => column.getCanHide()) - .map((column) => { - return ( - - column.toggleVisibility(!!value) - } - > - {column.id} - - ); - })} - - */} diff --git a/web/src/db/schema.ts b/web/src/db/schema.ts index 97a62ae..0cc2678 100644 --- a/web/src/db/schema.ts +++ b/web/src/db/schema.ts @@ -35,7 +35,11 @@ export const workflowTable = dbSchema.table("workflows", { updated_at: timestamp("updated_at").defaultNow().notNull(), }); -export const workflowRelations = relations(workflowTable, ({ many }) => ({ +export const workflowRelations = relations(workflowTable, ({ many, one }) => ({ + user: one(usersTable, { + fields: [workflowTable.user_id], + references: [usersTable.id], + }), versions: many(workflowVersionTable), deployments: many(deploymentsTable), })); diff --git a/web/src/server/getAllUserWorkflow.tsx b/web/src/server/getAllUserWorkflow.tsx new file mode 100644 index 0000000..b6400f4 --- /dev/null +++ b/web/src/server/getAllUserWorkflow.tsx @@ -0,0 +1,53 @@ +import { db } from "@/db/db"; +import { + deploymentsTable, + workflowTable, + workflowVersionTable, +} from "@/db/schema"; +import { auth } from "@clerk/nextjs"; +import { and, desc, eq, isNull } from "drizzle-orm"; + +export async function getAllUserWorkflow() { + const { userId, orgId } = await auth(); + + if (!userId) { + return null; + } + + const workflow = await db.query.workflowTable.findMany({ + with: { + user: { + columns: { + name: true, + }, + }, + versions: { + limit: 1, + orderBy: desc(workflowVersionTable.version), + columns: { + id: true, + version: true, + }, + }, + deployments: { + limit: 1, + where: eq(deploymentsTable.environment, "public-share"), + columns: { + id: true, + }, + }, + }, + columns: { + id: true, + updated_at: true, + name: true, + }, + orderBy: desc(workflowTable.updated_at), + where: + orgId != undefined + ? eq(workflowTable.org_id, orgId) + : and(eq(workflowTable.user_id, userId), isNull(workflowTable.org_id)), + }); + + return workflow; +}