Merge pull request #123 from bcgov/BCAT-540-531-533

BCAT-540 531 | View all page | enable summary page in all status  |  Also Update the docker-compose to use DB:15

api/src/common/dto/pagination.dto.ts

@@ -1,4 +1,4 @@
-import { IsOptional, Max, Min, IsInt } from 'class-validator';
+import { IsOptional, Min, IsInt } from 'class-validator';
 import { SelectQueryBuilder } from 'typeorm';
 import { Type } from 'class-transformer';
 
@@ -9,8 +9,7 @@ export class PaginationDto {
   @IsInt()
   page = 1;
 
-  @Max(50)
-  @Min(1)
+  @Min(0) // NOTICE: we will use '0' as Infinity here as Infinity is js Number but will become string in queryParam
   @IsOptional()
   @Type(() => Number)
   @IsInt()
@@ -19,11 +18,16 @@ export class PaginationDto {
   filter(query: SelectQueryBuilder<any>, forceNotSubquery = false): SelectQueryBuilder<any> {
     if (forceNotSubquery) {
       query.offset((this.page - 1) * this.limit);
-      query.limit(this.limit);
+      if (this.limit !== 0) {
+        query.limit(this.limit);
+      }
       return query;
     }
 
     query.skip((this.page - 1) * this.limit);
+    if (this.limit !== 0) {
+      query.take(this.limit);
+    }
     query.take(this.limit);
     return query;
   }

client/components/bcat-form-sections/application-dashboard.tsx

@@ -159,7 +159,7 @@ export const ApplicationDashboard: React.FC<any> = () => {
       assignedTo: '',
       confirmationId: '',
       totalCost: '',
-      limit: Number(limit),
+      limit: 20,
       page: DEFAULT_QUERY.page,
     };
     SetQueryParams(push, query, params);

client/components/form/PageSizeSelect.tsx

@@ -0,0 +1,39 @@
+import { useRouter } from 'next/router';
+import { ChangeEvent } from 'react';
+import { SetQueryParams } from 'services/useQueryParams';
+
+const PageSizeSelect = () => {
+  const router = useRouter();
+  const { query, push } = router;
+  const { limit } = query;
+
+  const handlePageSizeChange = (event: ChangeEvent<HTMLSelectElement>) => {
+    SetQueryParams(push, query, { ...query, limit: event.target.value });
+  };
+
+  const limits = [
+    { name: 'All', value: '0' },
+    { name: '20', value: '20' },
+    { name: '30', value: '30' },
+    { name: '40', value: '40' },
+    { name: '50', value: '50' },
+  ];
+  return (
+    <div>
+      <select
+        value={limit}
+        title='page size select'
+        onChange={handlePageSizeChange}
+        className='bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5'
+      >
+        {limits.map(({ name, value }) => (
+          <option value={value} key={value} selected={limit === value}>
+            {name}
+          </option>
+        ))}
+      </select>
+    </div>
+  );
+};
+
+export default PageSizeSelect;

client/components/form/Pagination.tsx

@@ -2,6 +2,8 @@ import React from 'react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faChevronLeft, faChevronRight } from '@fortawesome/free-solid-svg-icons';
 import { Button } from '@components';
+import PageSizeSelect from './PageSizeSelect';
+import { useRouter } from 'next/router';
 
 export type PaginationProps = {
   currentPage: number;
@@ -14,6 +16,8 @@ export type PaginationProps = {
 };
 
 export const Pagination: React.FC<PaginationProps> = props => {
+  const { query } = useRouter();
+  const { limit } = query;
   const {
     currentPage,
     applicationsPerPage,
@@ -27,26 +31,30 @@ export const Pagination: React.FC<PaginationProps> = props => {
     <div className='w-full bg-white flex my-2 justify-between'>
       <div></div>
       <div className='grid grid-cols-2 gap-2'>
-        <div>
-          <p className='text-sm text-right py-2 text-gray-700'>
-            <span className='font-medium'>
-              {totalApplications != 0
-                ? currentPage * applicationsPerPage - applicationsPerPage + 1
-                : totalApplications}
-            </span>{' '}
-            -
-            <span className='font-medium'>
-              {' '}
-              {currentPage * applicationsPerPage > totalApplications
-                ? totalApplications
-                : currentPage * applicationsPerPage}{' '}
-            </span>
-            of
-            <span className='font-medium'> {totalApplications} </span>
-          </p>
+        <div className='flex items-center gap-4 py-2'>
+          <PageSizeSelect />
+
+          {limit !== '0' && (
+            <p className='text-sm text-right py-2 text-gray-700'>
+              <span className='font-medium'>
+                {totalApplications != 0
+                  ? currentPage * applicationsPerPage - applicationsPerPage + 1
+                  : totalApplications}
+              </span>{' '}
+              -
+              <span className='font-medium'>
+                {' '}
+                {currentPage * applicationsPerPage > totalApplications
+                  ? totalApplications
+                  : currentPage * applicationsPerPage}{' '}
+              </span>
+              of
+              <span className='font-medium'> {totalApplications} </span>
+            </p>
+          )}
         </div>
 
-        {totalApplications != 0 && totalApplications > applicationsPerPage && (
+        {totalApplications != 0 && totalApplications > applicationsPerPage && limit !== '0' && (
           <div
             className='relative z-0 inline-flex rounded-md shadow-sm -space-x-px gap-1'
             aria-label='Pagination'

client/pages/applications/[id].tsx

@@ -115,25 +115,24 @@ const ApplicationDetails: NextPage = () => {
               </div>
             </div>
             <div className='w-2/5 justify-end flex'>
-              {applicationStatus === ApplicationStatus.WORKSHOP && (
-                <div className='gap-2 flex'>
-                  <Link href={`/applications/${id}/score-table`}>
-                    <a
-                      target='_blank'
-                      rel='noopener noreferrer'
-                      className={`w-auto inline-flex justify-center items-center rounded 
+              <div className='gap-2 flex'>
+                <Link href={`/applications/${id}/score-table`}>
+                  <a
+                    target='_blank'
+                    rel='noopener noreferrer'
+                    className={`w-auto inline-flex justify-center items-center rounded 
   shadow-sm px-4 py-2 text-base font-bold focus:outline-none
   disabled:opacity-50
   focus:ring-2 focus:ring-offset-2 sm:mt-0 sm:text-sm border-transparent bg-bcBluePrimary text-white hover:bg-blue-800 focus:ring-blue-500`}
-                    >
-                      View Summary Table
-                    </a>
-                  </Link>
-                  <Button variant='primary' onClick={downloadPDF}>
-                    Download As PDF
-                  </Button>
-                </div>
-              )}
+                  >
+                    View Summary Table
+                  </a>
+                </Link>
+                <Button variant='primary' onClick={downloadPDF}>
+                  Download As PDF
+                </Button>
+              </div>
+
               {(applicationStatus !== ApplicationStatus.WORKSHOP || user?.isAdmin) && (
                 <MenuButton title='Open' items={getNextStatusUpdates(id, applicationStatus)} />
               )}

docker-compose.dev.yml

@@ -59,8 +59,9 @@ services:
       - default
 
   ### Database #############################
+  ## openshift one is v12, but in order to pqsl recover db locally, we have to use v15
   database:
-    image: postgres:12-alpine
+    image: postgres:15-alpine
     container_name: ${PROJECT}_db
     volumes:
       - ./database:/database