STNDP-163 Enable users to customize the structure of the standup form (#111)

* STNDP-163 Enable users to customize the structure of the standup form

* STNDP-163 Enable users to customize the structure of the standup form

* STNDP-163 Enable users to customize the structure of the standup form

* STNDP-163 Enable users to customize the structure of the standup form

* STNDP-163 Enable users to customize the structure of the standup form

* STNDP-163 Enable users to customize the structure of the standup form

* STNDP-163 Enable users to customize the structure of the standup form

Author: hyokualexkwon

apps/api/src/boards/boards.service.ts

@@ -4,18 +4,18 @@ import {
   InsertBoard,
   usersToBoards,
   Board,
-  standupForms,
-  StandupForm,
 } from '../libs/db/schema';
 import { and, count, eq, sql } from 'drizzle-orm';
 import { Database, DATABASE_TOKEN } from 'src/db/db.module';
 import { UpdateBoardDto } from 'src/boards/dto/update-board.dto';
+import { StandupFormsService } from './standup-forms/standup-forms.service';
 
 @Injectable()
 export class BoardsService {
   constructor(
     @Inject(DATABASE_TOKEN)
     private readonly db: Database,
+    private readonly standupFormsService: StandupFormsService,
   ) {}
 
   create({
@@ -53,9 +53,9 @@ export class BoardsService {
       timezone,
     });
 
+    // TODO: use transaction for setup method to ensure atomicity
     await this.associateUser(result.id, userId);
-
-    await this.createDefaultForm(result.id);
+    await this.standupFormsService.createDefault(result.id);
 
     return result;
   }
@@ -76,52 +76,6 @@ export class BoardsService {
     });
   }
 
-  private async createDefaultForm(boardId: number): Promise<void> {
-    const schema = {
-      // title: "Today's Standup",
-      fields: [
-        {
-          name: 'yesterday',
-          label: 'What did you do yesterday?',
-          placeholder: 'Write your reply here...',
-          type: 'textarea',
-          required: true,
-        },
-        {
-          name: 'today',
-          label: 'What will you do today?',
-          placeholder: 'Write your reply here...',
-          type: 'textarea',
-          required: true,
-        },
-        {
-          name: 'blockers',
-          label: 'Do you have any blockers?',
-          placeholder: 'Write your reply here...',
-          description:
-            'Share any challenges or obstacles that might slow down your progress',
-          type: 'textarea',
-          required: false,
-        },
-      ],
-    };
-
-    const result = await this.db
-      .insert(standupForms)
-      .values({
-        boardId,
-        schema,
-      })
-      .returning()
-      .then((standupForms): StandupForm => standupForms[0]);
-
-    await this.db
-      .update(boards)
-      .set({
-        activeStandupFormId: result.id,
-      })
-      .where(eq(boards.id, boardId));
-  }
 
   // list() {
   //   return `This action returns all boards`;

apps/api/src/boards/standup-forms/constants.ts

@@ -0,0 +1,27 @@
+export const DEFAULT_STANDUP_FORM_SCHEMA = {
+  fields: [
+    {
+      name: 'yesterday',
+      label: 'What did you do yesterday?',
+      placeholder: 'Write your reply here...',
+      type: 'textarea',
+      required: true,
+    },
+    {
+      name: 'today',
+      label: 'What will you do today?',
+      placeholder: 'Write your reply here...',
+      type: 'textarea',
+      required: true,
+    },
+    {
+      name: 'blockers',
+      label: 'Do you have any blockers?',
+      placeholder: 'Write your reply here...',
+      description:
+        'Share any challenges or obstacles that might slow down your progress',
+      type: 'textarea',
+      required: false,
+    },
+  ],
+};

apps/api/src/boards/standup-forms/dto/create-standup-form.dto.ts

@@ -1 +1,7 @@
-export class CreateStandupFormDto {}
+import { IsNotEmpty, IsObject } from 'class-validator';
+
+export class CreateStandupFormDto {
+  @IsNotEmpty()
+  @IsObject()
+  schema!: object;
+}

apps/api/src/boards/standup-forms/standup-forms.controller.ts

@@ -1,17 +1,41 @@
 import {
   Controller,
   Get,
+  Post,
+  Body,
   InternalServerErrorException,
   Param,
   ParseIntPipe,
   Query,
+  UseGuards,
 } from '@nestjs/common';
 import { StandupFormsService } from './standup-forms.service';
+import { CreateStandupFormDto } from './dto/create-standup-form.dto';
+import { AuthGuard } from 'src/auth/guards/auth.guard';
+import { BoardAccessGuard } from '../guards/board-access.guard';
 
 @Controller('boards/:boardId/standup-forms')
+@UseGuards(AuthGuard, BoardAccessGuard)
 export class StandupFormsController {
   constructor(private readonly standupFormsService: StandupFormsService) {}
 
+  // POST /boards/:boardId/standup-forms
+  @Post()
+  async create(
+    @Param('boardId', ParseIntPipe) boardId: number,
+    @Body() createStandupFormDto: CreateStandupFormDto,
+  ) {
+    try {
+      return await this.standupFormsService.createActive(
+        boardId,
+        createStandupFormDto.schema,
+      );
+    } catch (error) {
+      console.error(error);
+      throw new InternalServerErrorException();
+    }
+  }
+
   // GET /boards/:boardId/standup-forms/:standupFormId
   @Get(':standupFormId')
   async get(

apps/api/src/boards/standup-forms/standup-forms.module.ts

@@ -1,10 +1,13 @@
-import { Module } from '@nestjs/common';
+import { Module, forwardRef } from '@nestjs/common';
 import { StandupFormsService } from './standup-forms.service';
 import { StandupFormsController } from './standup-forms.controller';
 import { DbModule } from 'src/db/db.module';
+import { AuthModule } from 'src/auth/auth.module';
+import { BoardsModule } from '../boards.module';
 @Module({
   controllers: [StandupFormsController],
   providers: [StandupFormsService],
-  imports: [DbModule],
+  imports: [DbModule, AuthModule, forwardRef(() => BoardsModule)],
+  exports: [StandupFormsService],
 })
 export class StandupFormsModule {}

apps/api/src/boards/standup-forms/standup-forms.service.ts

@@ -1,8 +1,9 @@
 import { Inject, Injectable } from '@nestjs/common';
-import { standupForms } from 'src/libs/db/schema';
+import { standupForms, boards } from 'src/libs/db/schema';
 import { and, eq, inArray } from 'drizzle-orm';
 import { DATABASE_TOKEN } from 'src/db/db.module';
 import { Database } from 'src/db/db.module';
+import { DEFAULT_STANDUP_FORM_SCHEMA } from './constants';
 
 @Injectable()
 export class StandupFormsService {
@@ -11,9 +12,25 @@ export class StandupFormsService {
     private readonly db: Database,
   ) {}
 
-  // create(createStandupFormDto: CreateStandupFormDto) {
-  //   return 'This action adds a new standupForm';
-  // }
+  createActive(boardId: number, schema: object) {
+    return this.db.transaction(async (tx) => {
+      const [standupForm] = await tx
+        .insert(standupForms)
+        .values({ boardId, schema })
+        .returning();
+
+      await tx
+        .update(boards)
+        .set({ activeStandupFormId: standupForm.id })
+        .where(eq(boards.id, boardId));
+
+      return standupForm;
+    });
+  }
+
+  createDefault(boardId: number) {
+    return this.createActive(boardId, DEFAULT_STANDUP_FORM_SCHEMA);
+  }
 
   // findAll() {
   //   return `This action returns all standupForms`;

apps/api/src/boards/standups/standups.module.ts

@@ -1,13 +1,13 @@
-import { Module } from '@nestjs/common';
+import { Module, forwardRef } from '@nestjs/common';
 import { StandupsService } from './standups.service';
 import { StandupsController } from './standups.controller';
-import { BoardsService } from '../boards.service';
 import { DbModule } from 'src/db/db.module';
 import { AuthModule } from 'src/auth/auth.module';
+import { BoardsModule } from '../boards.module';
 
 @Module({
-  imports: [DbModule, AuthModule],
+  imports: [DbModule, AuthModule, forwardRef(() => BoardsModule)],
   controllers: [StandupsController],
-  providers: [StandupsService, BoardsService],
+  providers: [StandupsService],
 })
 export class StandupsModule {}

apps/web/app/routes.ts

@@ -25,6 +25,10 @@ export default [
           "/boards/:boardId/settings/collaborators",
           "routes/board-settings-collaborators-route/board-settings-collaborators-route.tsx"
         ),
+        route(
+          "/boards/:boardId/settings/standups",
+          "routes/board-settings-standups-route/board-settings-standups-route.tsx"
+        ),
       ]
     ),
   ]),
@@ -76,6 +80,10 @@ export default [
     "/boards/:boardId/collaborators/delete",
     "routes/delete-board-collaborator-route/delete-board-collaborator-route.tsx"
   ),
+  route(
+    "/boards/:boardId/standup-forms/create",
+    "routes/create-board-standup-form-route/create-board-standup-form-route.tsx"
+  ),
   route(
     "/accept-invitation",
     "routes/accept-invitation-route/accept-invitation-route.tsx"

apps/web/app/routes/board-route/board-route.tsx

@@ -49,7 +49,7 @@ export function getBoard(
   }).then((response) => response.json() as Promise<ApiData<Board>>);
 }
 
-function getStandupForm(
+export function getStandupForm(
   { standupFormId, boardId }: { standupFormId: number; boardId: number },
   { accessToken }: { accessToken: string }
 ) {

apps/web/app/routes/board-route/dynamic-form.tsx

@@ -5,7 +5,17 @@ import { z } from "zod";
 import { useImperativeHandle, useEffect, useRef, type Ref } from "react";
 import type { ComponentProps } from "react";
 
-function AutoSizeTextArea({ ...props }: ComponentProps<typeof TextArea>) {
+// TODO: rename everything in this file - use word standup-form instead of dynamic-form
+
+export type StandupFormSchema = NonNullable<
+  ReturnType<typeof validateDynamicFormSchema>
+>;
+export type StandupFormFields = StandupFormSchema["fields"];
+export type StandupFormField = StandupFormFields[number];
+
+export function AutoSizeTextArea({
+  ...props
+}: ComponentProps<typeof TextArea>) {
   const textareaRef = useRef<HTMLTextAreaElement>(null);
 
   useEffect(() => {
@@ -155,7 +165,7 @@ function DynamicForm({
           {fields.map((field) => {
             return (
               <Flex key={field.name} direction="column" gap="2">
-                <label>
+                <label htmlFor={field.name}>
                   <Flex align="center" gap="2">
                     <Text size="2" className="font-semibold">
                       {field.label}
@@ -173,6 +183,7 @@ function DynamicForm({
                     control={control}
                     render={({ field: { onChange, value } }) => (
                       <AutoSizeTextArea
+                        id={field.name}
                         variant="soft"
                         className="w-full min-h-[72px]!"
                         resize="none"