wip: use list params

ZEISS · Jan 21, 2024 · c87933f · c87933f
1 parent 466c3e5
commit c87933f
Show file tree

Hide file tree

Showing 18 changed files with 136 additions and 105 deletions.
diff --git a/packages/app/src/app/teams/[team]/lenses/page.tsx b/packages/app/src/app/teams/[team]/lenses/page.tsx
@@ -5,13 +5,13 @@ import {
   SubNavActions,
   SubNavSubtitle
 } from '@/components/sub-nav'
-import { z } from 'zod'
 import { Main } from '@/components/main'
 import { api } from '@/trpc/server-http'
 import type { PropsWithChildren } from 'react'
 import { DataTable } from '@/components/data-table'
 import { columns } from '@/components/lenses/data-columns'
 import type { DataTableOptions } from '@/components/data-table'
+import { ListLensByTeamSlug } from '@/server/routers/schemas/lens'
 
 const options = {
   toolbar: {}
@@ -24,19 +24,14 @@ export interface NextPageProps<TeamSlug = string> {
   searchParams?: { [key: string]: string | string[] | undefined }
 }
 
-const searchParamsSchema = z.object({
-  per_page: z.coerce.number().default(10),
-  page: z.coerce.number().default(0)
-})
-
 export default async function Page(props: PropsWithChildren<NextPageProps>) {
-  const searchParams = searchParamsSchema.parse(props.searchParams)
-  const { rows, count } = await api.lenses.listByTeam.query({
-    slug: props.params.team,
-    ...searchParams
+  const searchParams = ListLensByTeamSlug.parse({
+    ...props.searchParams,
+    slug: props.params.team
   })
+  const { rows, count } = await api.lenses.listByTeam.query(searchParams)
 
-  const pageCount = Math.ceil(count / searchParams.per_page)
+  const pageCount = Math.ceil(count / searchParams.limit)
 
   return (
     <>
@@ -56,8 +51,8 @@ export default async function Page(props: PropsWithChildren<NextPageProps>) {
           columns={columns}
           data={rows}
           pageCount={pageCount}
-          pageSize={searchParams.per_page}
-          pageIndex={searchParams.page}
+          pageSize={searchParams.limit}
+          pageIndex={searchParams.offset}
           options={options}
         />
       </Main>

diff --git a/packages/app/src/app/teams/[team]/profiles/new/page.tsx b/packages/app/src/app/teams/[team]/profiles/new/page.tsx
@@ -1,23 +1,24 @@
-import { Suspense } from 'react'
+import { PropsWithChildren, Suspense } from 'react'
 import { SubNav, SubNavTitle, SubNavSubtitle } from '@/components/sub-nav'
 import { Section } from '@/components/section'
 import { NewProfileForm } from '@/components/dashboard/profiles/new-form'
 import { LoadingSpinner } from '@/components/loading-spinner'
 import { api } from '@/trpc/server-http'
 
-async function ServerLoader() {
+export interface NextPageProps<TeamSlug = string> {
+  params: { team: TeamSlug }
+  searchParams?: { [key: string]: string | string[] | undefined }
+}
+
+export default async function Page({
+  params
+}: PropsWithChildren<NextPageProps>) {
   const questions = await api.listProfilesQuestions.query()
   const selectedChoices = questions?.reduce(
     (prev, curr) => ({ ...prev, [curr.ref]: [] }),
     {}
   )
 
-  return (
-    <NewProfileForm selectedChoices={selectedChoices} questions={questions} />
-  )
-}
-
-export default async function Page() {
   return (
     <>
       <SubNav>
@@ -30,7 +31,11 @@ export default async function Page() {
       </SubNav>
       <Section>
         <Suspense fallback={<LoadingSpinner />}>
-          <ServerLoader />
+          <NewProfileForm
+            teamId={params.team}
+            selectedChoices={selectedChoices}
+            questions={questions}
+          />
         </Suspense>
       </Section>
     </>

diff --git a/packages/app/src/app/teams/[team]/profiles/page.tsx b/packages/app/src/app/teams/[team]/profiles/page.tsx
@@ -1,4 +1,4 @@
-import { AddWorkloadButton } from '@/components/workloads/add-button'
+import { AddProfileButton } from '@/components/profiles/add-profile'
 import {
   SubNav,
   SubNavTitle,
@@ -7,11 +7,11 @@ import {
 } from '@/components/sub-nav'
 import { PropsWithChildren } from 'react'
 import { Main } from '@/components/main'
-import { z } from 'zod'
 import { api } from '@/trpc/server-http'
 import { DataTable } from '@/components/data-table'
 import { columns } from '@/components/dashboard/profiles/data-columns'
 import type { DataTableOptions } from '@/components/data-table'
+import { ListProfileByTeamSlug } from '@/server/routers/schemas/profile'
 
 const options = {
   toolbar: {}
@@ -24,19 +24,13 @@ export interface NextPageProps<TeamSlug = string> {
   searchParams?: { [key: string]: string | string[] | undefined }
 }
 
-const searchParamsSchema = z.object({
-  per_page: z.coerce.number().default(10),
-  page: z.coerce.number().default(0)
-})
-
 export default async function Page(props: PropsWithChildren<NextPageProps>) {
-  const searchParams = searchParamsSchema.parse(props.searchParams)
-  const { rows, count } = await api.profiles.listByTeam.query({
-    slug: props.params.team,
-    ...searchParams
+  const searchParams = ListProfileByTeamSlug.parse({
+    ...props.searchParams,
+    slug: props.params.team
   })
-
-  const pageCount = Math.ceil(count / searchParams.per_page)
+  const { rows, count } = await api.profiles.listByTeam.query(searchParams)
+  const pageCount = Math.ceil(count / searchParams.limit)
 
   return (
     <>
@@ -46,16 +40,16 @@ export default async function Page(props: PropsWithChildren<NextPageProps>) {
           <SubNavSubtitle>Add business context to workloads</SubNavSubtitle>
         </SubNavTitle>
         <SubNavActions>
-          <AddWorkloadButton teamSlug={props.params.team} />
+          <AddProfileButton teamSlug={props.params.team} />
         </SubNavActions>
       </SubNav>
       <Main className="space-y-8 p-8">
         <DataTable
           columns={columns}
           data={rows}
           pageCount={pageCount}
-          pageSize={searchParams.per_page}
-          pageIndex={searchParams.page}
+          pageSize={searchParams.limit}
+          pageIndex={searchParams.offset}
           options={options}
         />
       </Main>

diff --git a/packages/app/src/app/teams/[team]/solutions/page.tsx b/packages/app/src/app/teams/[team]/solutions/page.tsx
@@ -7,11 +7,11 @@ import {
 } from '@/components/sub-nav'
 import { PropsWithChildren } from 'react'
 import { Main } from '@/components/main'
-import { z } from 'zod'
 import { api } from '@/trpc/server-http'
 import { DataTable } from '@/components/data-table'
 import { columns } from '@/components/solutions/data-columns'
 import type { DataTableOptions } from '@/components/data-table'
+import { ListSolutionByTeamSlug } from '@/server/routers/schemas/solution'
 
 const options = {
   toolbar: {}
@@ -24,19 +24,13 @@ export interface NextPageProps<TeamSlug = string> {
   searchParams?: { [key: string]: string | string[] | undefined }
 }
 
-const searchParamsSchema = z.object({
-  per_page: z.coerce.number().default(10),
-  page: z.coerce.number().default(0)
-})
-
 export default async function Page(props: PropsWithChildren<NextPageProps>) {
-  const searchParams = searchParamsSchema.parse(props.searchParams)
-  const { rows, count } = await api.solutions.listByTeam.query({
-    slug: props.params.team,
-    ...searchParams
+  const searchParams = ListSolutionByTeamSlug.parse({
+    ...props.searchParams,
+    slug: props.params.team
   })
-
-  const pageCount = Math.ceil(count / searchParams.per_page)
+  const { rows, count } = await api.solutions.listByTeam.query(searchParams)
+  const pageCount = Math.ceil(count / searchParams.limit)
 
   return (
     <>
@@ -54,8 +48,8 @@ export default async function Page(props: PropsWithChildren<NextPageProps>) {
           columns={columns}
           data={rows}
           pageCount={pageCount}
-          pageSize={searchParams.per_page}
-          pageIndex={searchParams.page}
+          pageSize={searchParams.limit}
+          pageIndex={searchParams.offset}
           options={options}
         />
       </Main>

diff --git a/packages/app/src/app/teams/[team]/workloads/page.tsx b/packages/app/src/app/teams/[team]/workloads/page.tsx
@@ -7,11 +7,11 @@ import {
 } from '@/components/sub-nav'
 import { PropsWithChildren } from 'react'
 import { Main } from '@/components/main'
-import { z } from 'zod'
 import { api } from '@/trpc/server-http'
 import { DataTable } from '@/components/data-table'
 import { columns } from '@/components/workloads/columns'
 import type { DataTableOptions } from '@/components/data-table'
+import { ListWorkloadByTeamSlug } from '@/server/routers/schemas/workload'
 
 const options = {
   toolbar: {
@@ -35,19 +35,14 @@ export interface NextPageProps<TeamSlug = string> {
   searchParams?: { [key: string]: string | string[] | undefined }
 }
 
-const searchParamsSchema = z.object({
-  per_page: z.coerce.number().default(10),
-  page: z.coerce.number().default(0)
-})
-
 export default async function Page(props: PropsWithChildren<NextPageProps>) {
-  const searchParams = searchParamsSchema.parse(props.searchParams)
-  const { rows, count } = await api.workloads.listByTeam.query({
-    slug: props.params.team,
-    ...searchParams
+  const searchParams = ListWorkloadByTeamSlug.parse({
+    ...props.searchParams,
+    slug: props.params.team
   })
+  const { rows, count } = await api.workloads.listByTeam.query(searchParams)
 
-  const pageCount = Math.ceil(count / searchParams.per_page)
+  const pageCount = Math.ceil(count / searchParams.limit)
 
   return (
     <>
@@ -65,8 +60,8 @@ export default async function Page(props: PropsWithChildren<NextPageProps>) {
           columns={columns}
           data={rows}
           pageCount={pageCount}
-          pageSize={searchParams.per_page}
-          pageIndex={searchParams.page}
+          pageSize={searchParams.limit}
+          pageIndex={searchParams.offset}
           options={options}
         />
       </Main>

diff --git a/packages/app/src/components/dashboard/profiles/new-form.action.tsx b/packages/app/src/components/dashboard/profiles/new-form.action.tsx
@@ -4,9 +4,17 @@ import 'server-only'
 import { createAction, protectedProcedure } from '@/server/trpc'
 import { rhfActionSchema } from './new-form.schema'
 import { createProfile } from '@/db/services/profiles'
+import { isAllowed } from '@/server/trpc'
 
 export const rhfAction = createAction(
   protectedProcedure
+    .use(isAllowed('write'))
     .input(rhfActionSchema)
-    .mutation(async opts => await createProfile({ ...opts.input }))
+    .mutation(
+      async opts =>
+        await createProfile({
+          ...opts.input,
+          scope: { resourceType: 'profile', ownerId: opts.ctx.meta.ownerId }
+        })
+    )
 )
diff --git a/packages/app/src/components/dashboard/profiles/new-form.schema.tsx b/packages/app/src/components/dashboard/profiles/new-form.schema.tsx
@@ -2,7 +2,7 @@ import { z } from 'zod'
 
 export const rhfActionSchema = z.object({
   name: z.string().min(1).max(256).default(''),
-  description: z.string().min(20).max(2048).default('').optional(),
+  description: z.string().min(20).max(2048).default(''),
   selectedChoices: z.record(z.string(), z.array(z.string()).min(1))
 })
 

diff --git a/packages/app/src/components/dashboard/profiles/new-form.tsx b/packages/app/src/components/dashboard/profiles/new-form.tsx
@@ -32,13 +32,16 @@ import { useRouter } from 'next/navigation'
 import { ProfileQuestion } from '@/db/models/profile-question'
 import { Checkbox } from '@/components/ui/checkbox'
 import { defaultValues } from './new-form.schema'
+import { usePathname } from 'next/navigation'
 
 export type NewProfileFormProps = {
+  teamId: string
   questions?: ProfileQuestion[]
   selectedChoices?: Record<string, string[]>
 }
 
 export function NewProfileForm({
+  teamId,
   questions,
   selectedChoices
 }: PropsWithChildren<NewProfileFormProps>) {
@@ -59,7 +62,7 @@ export function NewProfileForm({
 
   useEffect(() => {
     if (mutation.status === 'success') {
-      router.push(`/dashboard/profiles/${mutation.data?.id}`)
+      router.push(`/teams/${teamId}/profiles/${mutation.data?.id}`)
     }
   })
 
@@ -142,14 +145,14 @@ export function NewProfileForm({
                                   onCheckedChange={checked => {
                                     return checked
                                       ? field.onChange([
-                                          ...field.value,
-                                          choice.id
-                                        ])
+                                        ...field.value,
+                                        choice.id
+                                      ])
                                       : field.onChange(
-                                          field.value?.filter(
-                                            value => value !== choice.id
-                                          )
+                                        field.value?.filter(
+                                          value => value !== choice.id
                                         )
+                                      )
                                   }}
                                 />
                               </FormControl>

diff --git a/packages/app/src/components/data-table.tsx b/packages/app/src/components/data-table.tsx
@@ -93,8 +93,8 @@ export function DataTable<TData, TValue = unknown>({
   useEffect(() => {
     router.push(
       `${pathname}?${createQueryString({
-        page: pagination.pageIndex,
-        per_page: pagination.pageSize
+        offset: pagination.pageIndex,
+        limit: pagination.pageSize
       })}`
     )
   }, [

diff --git a/packages/app/src/components/profiles/add-profile.tsx b/packages/app/src/components/profiles/add-profile.tsx
@@ -0,0 +1,17 @@
+import { Button } from '@/components/ui/button'
+import Link from 'next/link'
+import { PropsWithChildren } from 'react'
+
+export interface AddProfileButton {
+  teamSlug: string
+}
+
+export function AddProfileButton({
+  teamSlug
+}: PropsWithChildren<AddProfileButton>) {
+  return (
+    <Link href={`/teams/${teamSlug}/profiles/new`} passHref>
+      <Button variant={'outline'}>Add Profile</Button>
+    </Link>
+  )
+}
diff --git a/packages/app/src/db/models/profile.ts b/packages/app/src/db/models/profile.ts
@@ -25,11 +25,12 @@ export interface ProfileAttributes {
   id: string
   name: string
   description?: string
-  tags: Tag[]
-  teams: Team[]
-  createdAt: Date
-  updatedAt: Date
-  deletedAt: Date
+  tags?: Tag[]
+  teams?: Team[]
+  answers?: ProfileQuestionChoice[]
+  createdAt?: Date
+  updatedAt?: Date
+  deletedAt?: Date
 }
 
 export type ProfileCreationAttributes = Omit<
@@ -69,7 +70,7 @@ export class Profile extends Model<
     'profileId',
     'choiceId'
   )
-  answers?: ProfileQuestionChoice[]
+  declare answers: ProfileQuestionChoice[]
 
   @BelongsToMany(() => Tag, {
     through: {