Pagination for cases when fetching all templates or instances (#404)

* first pass

* VIBE CODE

* MORE VIBE CODE

* add display names

* format

* fix some enable dstuff

* remove unnecessary context

* templates service should not return instances

* gen-client

* fix tests

* use pagination buttons

* move create button

* don't use pagination in template directory

* support listing total number of instances

* fix lint

* better pagination for templates on create-form-instance

---------

Co-authored-by: Kaiyang Zheng <kaiyang.zheng@gmail.com>

Author: elvincheng3

apps/server/src/form-instances/form-instances.controller.ts

@@ -42,6 +42,7 @@ import { FileInterceptor } from '@nestjs/platform-express';
 import { SignFormInstanceDto } from './dto/sign-form-instance.dto';
 import { ParseFormDataJsonPipe } from '../form-templates/form-templates.controller';
 import { EmployeesService } from '../employees/employees.service';
+import { FormInstanceFindAllResponse } from './response/form-instance-find-all.response';
 
 @ApiTags('form-instances')
 @Controller('form-instances')
@@ -71,19 +72,21 @@ export class FormInstancesController {
 
   @Get()
   @UseGuards(AdminAuthGuard)
-  @ApiOkResponse({ type: [FormInstanceEntity] })
+  @ApiOkResponse({ type: FormInstanceFindAllResponse })
   @ApiForbiddenResponse({ description: AppErrorMessage.FORBIDDEN })
   @ApiBadRequestResponse({ description: AppErrorMessage.UNPROCESSABLE_ENTITY })
   @ApiQuery({
-    name: 'limit',
+    name: 'cursor',
     type: Number,
-    description: 'Limit on number of form instances to return',
+    description: 'Pagination cursor for form instances to return (pages of 8)',
     required: false,
   })
-  async findAll(@Query('limit') limit?: number) {
-    const formInstances = await this.formInstancesService.findAll(limit);
-    return formInstances.map(
-      (formInstance) => new FormInstanceEntity(formInstance),
+  async findAll(@Query('cursor') cursor?: number) {
+    const formInstances = await this.formInstancesService.findAll(cursor);
+    const totalCount = await this.formInstancesService.findAllCount();
+    return new FormInstanceFindAllResponse(
+      totalCount,
+      formInstances.map((formInstance) => new FormInstanceEntity(formInstance)),
     );
   }
 

apps/server/src/form-instances/form-instances.integration.spec.ts

@@ -601,6 +601,7 @@ describe('FormInstancesIntegrationTest', () => {
 
   describe('findAll', () => {
     beforeEach(async () => {
+      // Create the first two form instances separately for direct reference
       formInstance1 = await service.create({
         name: 'Form Instance',
         assignedGroups: [
@@ -617,6 +618,7 @@ describe('FormInstancesIntegrationTest', () => {
         formDocLink: 'formDocLink',
         description: 'description',
       });
+
       formInstance2 = await service.create({
         name: 'Form Instance 2',
         assignedGroups: [
@@ -633,19 +635,87 @@ describe('FormInstancesIntegrationTest', () => {
         formDocLink: 'formDocLink',
         description: 'description',
       });
+
+      // Create the remaining 8 form instances in parallel
+      await Promise.all(
+        Array(8)
+          .fill(0)
+          .map((_, i) =>
+            service.create({
+              name: `Form Instance ${i + 3}`,
+              assignedGroups: [
+                {
+                  order: 0,
+                  signerType: $Enums.SignerType.USER,
+                  fieldGroupId: formTemplate1.fieldGroups[0].id,
+                  signerEmployeeList: [],
+                  signerEmployeeId: employeeId1,
+                },
+              ],
+              originatorId: employeeId1,
+              formTemplateId: formTemplate1.id,
+              formDocLink: 'formDocLink',
+              description: 'description',
+            }),
+          ),
+      );
     });
 
     it('should find all form instances', async () => {
       const formInstances = await service.findAll();
 
-      expect(formInstances).toHaveLength(2);
-      expect(formInstances[0].id).toBe(formInstance1.id);
-      expect(formInstances[1].id).toBe(formInstance2.id);
+      expect(formInstances).toHaveLength(10);
     });
-    it('should limit the number of form instances returned', async () => {
-      const formInstances = await service.findAll(1);
+    it('should paginate the form instances returned', async () => {
+      const formInstancesPage0 = await service.findAll(0);
+      const formInstancesPage1 = await service.findAll(1);
 
-      expect(formInstances).toHaveLength(1);
+      expect(formInstancesPage0).toHaveLength(8);
+      expect(formInstancesPage1).toHaveLength(2);
+    });
+  });
+  describe('findAllCount', () => {
+    beforeEach(async () => {
+      // Create the first two form instances separately for direct reference
+      formInstance1 = await service.create({
+        name: 'Form Instance',
+        assignedGroups: [
+          {
+            order: 0,
+            fieldGroupId: formTemplate1.fieldGroups[0].id,
+            signerType: $Enums.SignerType.USER,
+            signerEmployeeId: employeeId1,
+            signerEmployeeList: [],
+          },
+        ],
+        originatorId: employeeId1,
+        formTemplateId: formTemplate1.id,
+        formDocLink: 'formDocLink',
+        description: 'description',
+      });
+
+      formInstance2 = await service.create({
+        name: 'Form Instance 2',
+        assignedGroups: [
+          {
+            order: 0,
+            signerType: $Enums.SignerType.USER,
+            fieldGroupId: formTemplate1.fieldGroups[0].id,
+            signerEmployeeList: [],
+            signerEmployeeId: employeeId1,
+          },
+        ],
+        originatorId: employeeId1,
+        formTemplateId: formTemplate1.id,
+        formDocLink: 'formDocLink',
+        description: 'description',
+      });
+    });
+
+    it('should return the count of all form instances', async () => {
+      const count = await service.findAllCount();
+
+      expect(count).toBe(2);
     });
   });
   describe('findOne', () => {

apps/server/src/form-instances/form-instances.service.spec.ts

@@ -248,6 +248,7 @@ const db = {
     save: jest.fn(),
     update: jest.fn().mockResolvedValue(oneFormInstance),
     delete: jest.fn().mockResolvedValue(oneFormInstance),
+    count: jest.fn().mockResolvedValue(formInstancesArray.length),
   },
   formTemplate: {
     findFirstOrThrow: jest.fn().mockResolvedValue(formTemplate),
@@ -567,6 +568,14 @@ describe('FormInstancesService', () => {
     });
   });
 
+  describe('findAllCount', () => {
+    it('should return the count of all form instances', () => {
+      expect(service.findAllCount()).resolves.toEqual(
+        formInstancesArray.length,
+      );
+    });
+  });
+
   describe('findOne', () => {
     it('should find a form instance by id', () => {
       expect(service.findOne(formInstance1Id)).resolves.toEqual(

apps/server/src/form-instances/form-instances.service.ts

@@ -342,12 +342,12 @@ export class FormInstancesService {
 
   /**
    * Find all form instances.
-   * @param limit the number of form instances to retrieve
+   * @param cursor the form instances to retrieve, paginated
    * @returns all form instances, hydrated
    */
-  async findAll(limit?: number) {
+  async findAll(cursor?: number) {
     const formInstances = await this.prisma.formInstance.findMany({
-      take: limit,
+      ...(cursor !== undefined ? { take: 8, skip: cursor * 8 } : {}),
       include: {
         originator: {
           include: {
@@ -383,6 +383,13 @@ export class FormInstancesService {
     return formInstances;
   }
 
+  /**
+   * Find the count of all form instances.
+   */
+  async findAllCount() {
+    return await this.prisma.formInstance.count();
+  }
+
   /**
    * Find a form instance by id.
    * @param id the form instance id

apps/server/src/form-instances/response/form-instance-find-all.response.ts

@@ -0,0 +1,15 @@
+import { ApiProperty } from '@nestjs/swagger';
+import { FormInstanceEntity } from '../entities/form-instance.entity';
+
+export class FormInstanceFindAllResponse {
+  @ApiProperty()
+  count: number;
+
+  @ApiProperty({ type: [FormInstanceEntity] })
+  formInstances: FormInstanceEntity[];
+
+  constructor(count: number, formInstances: FormInstanceEntity[]) {
+    this.count = count;
+    this.formInstances = formInstances;
+  }
+}

apps/server/src/form-templates/entities/form-template.entity.ts

@@ -1,7 +1,6 @@
 import { ApiProperty } from '@nestjs/swagger';
 import { FormTemplate } from '@prisma/client';
 import { Exclude } from 'class-transformer';
-import { FormInstanceEntity } from './../../form-instances/entities/form-instance.entity';
 import { FieldGroupBaseEntity } from '../../field-group/entities/field-group.entity';
 import { IsOptional } from 'class-validator';
 
@@ -46,21 +45,13 @@ export class FormTemplateEntity extends FormTemplateBaseEntity {
   })
   fieldGroups: FieldGroupBaseEntity[];
 
-  @ApiProperty()
-  formInstances: FormInstanceEntity[];
-
   constructor(partial: Partial<FormTemplateEntity>) {
     super(partial);
     if (partial.fieldGroups) {
       partial.fieldGroups = partial.fieldGroups.map(
         (fieldGroup) => new FieldGroupBaseEntity(fieldGroup),
       );
     }
-    if (partial.formInstances) {
-      partial.formInstances = partial.formInstances.map(
-        (formInstance) => new FormInstanceEntity(formInstance),
-      );
-    }
     Object.assign(this, partial);
   }
 }

apps/server/src/form-templates/form-templates.controller.ts

@@ -39,6 +39,7 @@ import { Express } from 'express';
 import { FileInterceptor } from '@nestjs/platform-express';
 import { ContributorAuthGuard } from '../auth/guards/contributor-auth.guard';
 import { JwtAuthGuard } from '../auth/guards/jwt-auth.guard';
+import { FormTemplateFindAllResponse } from './responses/form-template-find-all.response';
 
 export class ParseFormDataJsonPipe implements PipeTransform {
   constructor() {}
@@ -115,19 +116,23 @@ export class FormTemplatesController {
 
   @Get()
   @UseGuards(JwtAuthGuard)
-  @ApiOkResponse({ type: [FormTemplateEntity] })
+  @ApiOkResponse({ type: FormTemplateFindAllResponse })
   @ApiForbiddenResponse({ description: AppErrorMessage.FORBIDDEN })
   @ApiBadRequestResponse({ description: AppErrorMessage.UNPROCESSABLE_ENTITY })
   @ApiQuery({
-    name: 'limit',
+    name: 'cursor',
     type: Number,
-    description: 'Limit on number of form templates to return',
+    description: 'Pagination cursor for form templates to return (pages of 8)',
     required: false,
   })
-  async findAll(@Query('limit') limit?: number) {
-    const formTemplates = await this.formTemplatesService.findAll(limit);
-    return formTemplates.map(
-      (formTemplate) => new FormTemplateEntity(formTemplate),
+  async findAll(@Query('cursor') cursor?: number) {
+    const formTemplates = await this.formTemplatesService.findAll(cursor);
+    const formTemplatesCount = await this.formTemplatesService.findAllCount();
+    return new FormTemplateFindAllResponse(
+      formTemplatesCount,
+      formTemplates?.map(
+        (formTemplate) => new FormTemplateEntity(formTemplate),
+      ),
     );
   }