Merge pull request #220 from CodeForCharlotte/fix_affiliation_list

Fix affiliation list

backend/nominations-api/src/modules/affiliations/affiliation.controller.ts

@@ -1,9 +1,10 @@
 import { handleErrors } from 'cmpd-common-api';
 
-import { Controller, Get, Param, Query, NotFoundException, InternalServerErrorException } from '@nestjs/common';
+import { Controller, Get, Param, Query, NotFoundException, InternalServerErrorException, Req } from '@nestjs/common';
 import { ApiUseTags } from '@nestjs/swagger';
 
 import { AffiliationService } from './affiliation.service';
+import { baseUrl } from '../lib/misc';
 
 const errorMap = {
   default: InternalServerErrorException
@@ -17,10 +18,17 @@ export class AffiliationController {
   constructor(private readonly affiliationService: AffiliationService) {}
   //TODO: GraphQL probably better here.
   @Get()
-  async getAll(@Query('search') search = '', @Query('page') page = 1, @Query('type') type = '') {
+  async getAll(
+    @Query('search') search = '',
+    @Query('page') page = 1,
+    @Query('type') type = '',
+    @Query('sizePerPage') sizePerPage = '',
+    @Req() req
+  ) {
     const results = await this.affiliationService.query({
       search,
       type,
+      baseUrl: baseUrl(req),
       page
     });
 

backend/nominations-api/src/modules/affiliations/affiliation.service.ts

@@ -1,23 +1,35 @@
 import { Injectable } from '@nestjs/common';
 import { Affiliation, ApplicationError, createPagedResults, logger } from 'cmpd-common-api';
-import { getRepository } from 'typeorm';
+import { getRepository, Brackets } from 'typeorm';
 
 export enum ErrorCodes {
   NoAffiliationExists = 'NoAffiliationExists'
 }
 
 @Injectable()
 export class AffiliationService {
-  async query({ type = '', search = '', page = 1, whitelist = [] } = {}) {
+  async query({ type = '', search = '', page = 1, sizePerPage = 50, whitelist = [], baseUrl = '' } = {}) {
     try {
-      const query = search && {
-        keys: ['name'],
-        search
-      };
+      let sqlQuery = Affiliation.createQueryBuilder('affiliation');
+
+      if (search) {
+        sqlQuery = sqlQuery.andWhere(searchExpression(search));
+      }
+
+      if (page) {
+        sqlQuery = await sqlQuery.skip((page - 1) * sizePerPage).take(sizePerPage);
+      }
 
-      let results = await getRepository(Affiliation).find({ where: type && { type } });
+      const totalSize = await sqlQuery.getCount();
+      const results = await sqlQuery.printSql().getMany();
 
-      return results;
+      return {
+        items: results,
+        page,
+        baseUrl,
+        totalSize,
+        per_page: results.length
+      };
     } catch (error) {
       logger.error(error);
       throw new ApplicationError(error.message);
@@ -35,3 +47,8 @@ export class AffiliationService {
     }
   }
 }
+
+const searchExpression = (search: string) =>
+  new Brackets(qb => {
+    qb.where('affiliation.name like :name', { name: '%' + search + '%' });
+  });

frontend/applications/nominations/src/api/affiliation.js

@@ -8,10 +8,11 @@ export function getAffiliationsByType(type) {
   return get('nominations', 'affiliations', { type });
 }
 
-export function getAffiliationList(pageNumber = 1, search) {
+export function getAffiliationList(pageNumber = 1, search, sizePerPage = 50) {
   return get('nominations', 'affiliations', {
     page: pageNumber,
-    search: search
+    search: search,
+    sizePerPage
   });
 }
 

frontend/applications/nominations/src/app/dashboard/affiliations/AffiliationList.jsx

@@ -22,10 +22,11 @@ export default class AffiliationList extends React.Component {
     );
   }
 
-  async fetch(page, search) {
-    const response = await getAffiliationList(page, search);
+  async fetch(page, search, sizePerPage) {
+    const response = await getAffiliationList(page, search, sizePerPage);
     return {
       items: response.items,
+      page: response.page,
       totalSize: response.totalSize,
       sizePerPage: response.sizePerPage
     };
@@ -40,7 +41,8 @@ export default class AffiliationList extends React.Component {
               search={true}
               fetch={this.fetch.bind(this)}
               searchPlaceholder="Filter by name"
-              pagination={false}>
+              pagination={true}
+              sizePerPage="50">
               <TableHeaderColumn dataField="type" hidden isKey>
                 Type
               </TableHeaderColumn>

frontend/applications/nominations/src/app/dashboard/components/dataTable.jsx

@@ -40,7 +40,6 @@ export default class DataTable extends React.Component {
     this.state = {
       items: [],
       totalSize: 1,
-      sizePerPage: 10,
       page
     };
   }
@@ -55,13 +54,12 @@ export default class DataTable extends React.Component {
 
     try {
       onFetch && onFetch(page, searchText);
-      const { items, totalSize, per_page: sizePerPage } = await fetch(page, searchText);
+      const { items, totalSize } = await fetch(page, searchText, this.props.sizePerPage);
 
       this.setState(() => ({
         items: items,
         totalSize,
         page,
-        sizePerPage,
         searchText
       }));
     } catch (error) {
@@ -79,8 +77,8 @@ export default class DataTable extends React.Component {
   handleSearchChange = async searchText => await this.fetchData(1, searchText);
 
   render() {
-    const { items, totalSize, page, sizePerPage } = this.state;
-    const { pagination, search, searchPlaceholder } = this.props;
+    const { items, totalSize, page } = this.state;
+    const { sizePerPage = 10, pagination, search, searchPlaceholder } = this.props;
 
     const options = {
       sizePerPage, // which size per page you want to locate as default