feat: serverside pagination for the questions table done

apps/backend/src/datasources/TemplateDataSource.ts

@@ -17,7 +17,10 @@ import { DeleteQuestionTemplateRelationArgs } from '../resolvers/mutations/templ
 import { SetActiveTemplateArgs } from '../resolvers/mutations/template/SetActiveTemplateMutation';
 import { UpdateQuestionTemplateRelationSettingsArgs } from '../resolvers/mutations/template/UpdateQuestionTemplateRelationSettingsMutation';
 import { UpdateTemplateArgs } from '../resolvers/mutations/template/UpdateTemplateMutation';
-import { QuestionsFilter } from '../resolvers/queries/QuestionsQuery';
+import {
+  AllQuestionsFilterArgs,
+  QuestionsFilter,
+} from '../resolvers/queries/QuestionsQuery';
 import { TemplatesArgs } from '../resolvers/queries/TemplatesQuery';
 import { ConflictResolution } from '../resolvers/types/ConflictResolution';
 import { TemplateGroup } from '../resolvers/types/TemplateGroup';
@@ -64,6 +67,9 @@ export interface TemplateDataSource {
   deleteQuestion(questionId: string): Promise<Question>;
   getComplementaryQuestions(templateId: number): Promise<Question[] | null>;
   getQuestions(filter?: QuestionsFilter): Promise<Question[]>;
+  getAllQuestions(
+    args: AllQuestionsFilterArgs
+  ): Promise<{ totalCount: number; questions: Question[] }>;
   getQuestionsInTemplate(templateId: number): Promise<Question[]>;
 
   // TemplateField rel

apps/backend/src/datasources/mockups/TemplateDataSource.ts

@@ -443,6 +443,13 @@ export class TemplateDataSourceMock implements TemplateDataSource {
     return [dummyQuestionFactory()];
   }
 
+  async getAllQuestions(): Promise<{
+    totalCount: number;
+    questions: Question[];
+  }> {
+    return { totalCount: 1, questions: [dummyQuestionFactory()] };
+  }
+
   async getQuestionsInTemplate(templateId: number): Promise<Question[]> {
     return dummyTemplateSteps.flatMap((step) =>
       step.fields.map((field) => field.question)

apps/backend/src/datasources/postgres/TemplateDataSource.ts

@@ -29,7 +29,10 @@ import { DeleteQuestionTemplateRelationArgs } from '../../resolvers/mutations/te
 import { SetActiveTemplateArgs } from '../../resolvers/mutations/template/SetActiveTemplateMutation';
 import { UpdateQuestionTemplateRelationSettingsArgs } from '../../resolvers/mutations/template/UpdateQuestionTemplateRelationSettingsMutation';
 import { UpdateTemplateArgs } from '../../resolvers/mutations/template/UpdateTemplateMutation';
-import { QuestionsFilter } from '../../resolvers/queries/QuestionsQuery';
+import {
+  AllQuestionsFilterArgs,
+  QuestionsFilter,
+} from '../../resolvers/queries/QuestionsQuery';
 import { TemplatesArgs } from '../../resolvers/queries/TemplatesQuery';
 import { ConflictResolution } from '../../resolvers/types/ConflictResolution';
 import {
@@ -125,6 +128,89 @@ export default class PostgresTemplateDataSource implements TemplateDataSource {
       });
   }
 
+  fieldMap: { [key: string]: string } = {
+    question: 'questions.question',
+    naturalKey: 'questions.natural_key',
+    dataType: 'questions.data_type',
+    answers: 'answers_count',
+    templates: 'templates_count',
+    categoryId: 'template_categories.name',
+  };
+
+  async getAllQuestions(args: AllQuestionsFilterArgs): Promise<{
+    totalCount: number;
+    questions: Question[];
+  }> {
+    const { filter, first, offset, sortField, sortDirection, searchText } =
+      args;
+
+    return database('questions')
+      .select([
+        'questions.*',
+        'template_categories.*',
+        database.raw('count(distinct answers.question_id) as answers_count'),
+        database.raw('count(distinct tq.question_id) as templates_count'),
+        database.raw('count(*) OVER() AS full_count'),
+      ])
+      .from('questions')
+      .leftJoin('answers', 'questions.question_id', 'answers.question_id')
+      .leftJoin(
+        'templates_has_questions as tq',
+        'questions.question_id',
+        'tq.question_id'
+      )
+      .leftJoin(
+        'template_categories',
+        'questions.category_id',
+        'template_categories.template_category_id'
+      )
+      .modify((query) => {
+        if (filter?.category !== undefined) {
+          query.where('questions.category_id', filter.category);
+        }
+        if (filter?.dataType !== undefined) {
+          query.whereIn('questions.data_type', filter.dataType);
+        }
+
+        if (searchText) {
+          query.andWhere((qb) =>
+            qb
+              .orWhere('questions.question', 'ilike', `%${searchText.trim()}%`)
+              .orWhere(
+                'questions.question_id',
+                'ilike',
+                `%${searchText.trim()}%`
+              )
+          );
+        }
+
+        if (sortField && sortDirection) {
+          if (!this.fieldMap.hasOwnProperty(sortField)) {
+            throw new GraphQLError(`Bad sort field given: ${sortField}`);
+          }
+
+          query.orderByRaw(`${this.fieldMap[sortField]} ${sortDirection}`);
+        }
+
+        if (first) {
+          query.limit(first);
+        }
+        if (offset) {
+          query.offset(offset);
+        }
+      })
+      .groupBy([
+        'questions.question_id',
+        'template_categories.template_category_id',
+      ])
+      .then((rows: QuestionRecord[]) => {
+        return {
+          totalCount: rows[0] ? rows[0].full_count : 0,
+          questions: rows.map((row) => createQuestionObject(row)),
+        };
+      });
+  }
+
   async createTemplate(args: CreateTemplateArgs): Promise<Template> {
     return database('templates')
       .insert({

apps/backend/src/datasources/postgres/records.ts

@@ -187,6 +187,7 @@ export interface QuestionRecord {
   readonly created_at: Date;
   readonly updated_at: Date;
   readonly natural_key: string;
+  readonly full_count: number;
 }
 
 export interface AnswerRecord {

apps/backend/src/queries/TemplateQueries.ts

@@ -8,7 +8,10 @@ import { Authorized } from '../decorators';
 import { Roles } from '../models/Role';
 import { Question, TemplateGroupId, TemplateStep } from '../models/Template';
 import { UserWithRole } from '../models/User';
-import { QuestionsFilter } from '../resolvers/queries/QuestionsQuery';
+import {
+  AllQuestionsFilterArgs,
+  QuestionsFilter,
+} from '../resolvers/queries/QuestionsQuery';
 import { TemplatesArgs } from '../resolvers/queries/TemplatesQuery';
 import { DynamicMultipleChoiceConfig } from '../resolvers/types/FieldConfig';
 
@@ -49,6 +52,14 @@ export default class TemplateQueries {
     return this.dataSource.getQuestions(filter);
   }
 
+  @Authorized([Roles.USER_OFFICER, Roles.INSTRUMENT_SCIENTIST])
+  async getAllQuestions(
+    agent: UserWithRole | null,
+    args: AllQuestionsFilterArgs
+  ): Promise<{ totalCount: number; questions: Question[] }> {
+    return this.dataSource.getAllQuestions(args);
+  }
+
   @Authorized([Roles.USER_OFFICER, Roles.INSTRUMENT_SCIENTIST])
   async getTemplateSteps(
     agent: UserWithRole | null,

apps/backend/src/resolvers/queries/QuestionsQuery.ts

@@ -1,4 +1,15 @@
-import { Arg, Ctx, Field, InputType, Query, Resolver } from 'type-graphql';
+import {
+  Arg,
+  Args,
+  ArgsType,
+  Ctx,
+  Field,
+  InputType,
+  Int,
+  ObjectType,
+  Query,
+  Resolver,
+} from 'type-graphql';
 
 import { ResolverContext } from '../../context';
 import { DataType, TemplateCategoryId } from '../../models/Template';
@@ -22,6 +33,48 @@ export class QuestionsFilter {
   public questionIds?: string[];
 }
 
+@InputType()
+export class AllQuestionsFilter {
+  @Field(() => TemplateCategoryId, { nullable: true })
+  public category?: TemplateCategoryId;
+
+  @Field(() => [DataType], { nullable: true })
+  public dataType?: DataType[];
+
+  @Field(() => [DataType], { nullable: true })
+  public excludeDataType?: DataType[];
+}
+
+@ObjectType()
+class AllQuestionsQueryResult {
+  @Field(() => Int)
+  public totalCount: number;
+
+  @Field(() => [QuestionWithUsage])
+  public questions: QuestionWithUsage[];
+}
+
+@ArgsType()
+export class AllQuestionsFilterArgs {
+  @Field(() => AllQuestionsFilter, { nullable: true })
+  public filter?: AllQuestionsFilter;
+
+  @Field(() => Int, { nullable: true })
+  public first?: number;
+
+  @Field(() => Int, { nullable: true })
+  public offset?: number;
+
+  @Field({ nullable: true })
+  public sortField?: string;
+
+  @Field({ nullable: true })
+  public sortDirection?: string;
+
+  @Field({ nullable: true })
+  public searchText?: string;
+}
+
 @Resolver()
 export class QuestionsQuery {
   @Query(() => [QuestionWithUsage])
@@ -32,4 +85,12 @@ export class QuestionsQuery {
   ) {
     return context.queries.template.getQuestions(context.user, filter);
   }
+
+  @Query(() => AllQuestionsQueryResult)
+  allQuestions(
+    @Args() args: AllQuestionsFilterArgs,
+    @Ctx() context: ResolverContext
+  ) {
+    return context.queries.template.getAllQuestions(context.user, args);
+  }
 }

apps/e2e/cypress/e2e/questions.cy.ts

@@ -54,13 +54,15 @@ context('Questions tests', () => {
     cy.contains(textQuestion);
 
     const modifiedQuestion = textQuestion.split('').reverse().join();
-    cy.get('[data-cy=search-input] input')
+    cy.get('[placeholder="Search"]')
+      .click()
       .clear()
       .type(`${modifiedQuestion}{enter}`);
 
     cy.contains(textQuestion).should('not.exist');
 
-    cy.get('[data-cy=search-input] input')
+    cy.get('[placeholder="Search"]')
+      .click()
       .clear()
       .type(`${textQuestion}{enter}`);
 
@@ -75,7 +77,8 @@ context('Questions tests', () => {
 
     const samplesQuestionWithSpaces = '   ' + samplesQuestion + '   ';
 
-    cy.get('[data-cy=search-input] input')
+    cy.get('[placeholder="Search"]')
+      .click()
       .clear()
       .type(`${samplesQuestionWithSpaces}{enter}`);
 
@@ -90,7 +93,8 @@ context('Questions tests', () => {
 
     cy.get('[data-cy=officer-menu-items]').contains('Questions').click();
 
-    cy.get('[data-cy=search-input] input')
+    cy.get('[placeholder="Search"]')
+      .click()
       .clear()
       .type(`${textQuestion}{enter}`);
 
@@ -111,15 +115,16 @@ context('Questions tests', () => {
 
     cy.get('[data-cy=officer-menu-items]').contains('Questions').click();
 
-    cy.get('[data-cy=search-input] input')
+    cy.get('[placeholder="Search"]')
+      .click()
       .clear()
       .type(`${textQuestion}{enter}`);
 
     cy.get('[data-cy=questions-table]').contains(textQuestion).should('exist');
     cy.get('[data-cy=questions-table]')
       .contains(textQuestion)
       .closest('tr')
-      .find('[aria-label=Edit]')
+      .find('[data-testid=EditIcon]')
       .click();
 
     cy.finishedLoading();
@@ -156,7 +161,8 @@ context('Questions tests', () => {
 
     cy.get('[data-cy=officer-menu-items]').contains('Questions').click();
 
-    cy.get('[data-cy=search-input] input')
+    cy.get('[placeholder="Search"]')
+      .click()
       .clear()
       .type(`${initialDBData.questions.boolean.text}{enter}`);