fix: styling login page and fixing search reports api (#539)

admin-frontend/src/App.vue

@@ -81,7 +81,13 @@ a {
   color: $link-color;
 }
 
+.v-main {
+  padding: 0;
+  margin: 0 !important;
+}
+
 .v-container {
+  
   width: 85%;
   margin-left: auto;
   margin-right: auto;
@@ -224,8 +230,4 @@ h1 {
 .theme--light.v-btn.v-btn--disabled:not(.v-btn--text):not(.v-btn--outlined) {
   background-color: rgba(0, 0, 0, 0.12) !important;
 }
-
-.v-main {
-  margin: 24px;
-}
 </style>

admin-frontend/src/components/Login.vue

@@ -1,19 +1,26 @@
 <template>
-  <v-container class="justify-center fill-height">
-    <v-row align="center" justify="center">
-      <v-col xs="4" sm="4" md="4" lg="4" xl="4" class="d-flex justify-center">
+  <v-app-bar absolute style="z-index: 1002" class="d-flex justify-center">
+    <v-container>
+      <span class="text-primary page-title">Gender Equity Office</span>
+    </v-container>
+  </v-app-bar>
+  <v-row class="fill-height container">
+    <v-col xs="12" class="d-flex flex-column justify-center align-center action">
+      <div class="d-flex flex-column">
+        <p class="title text-h4">Log in</p>
         <v-btn
           id="login-button"
-          class="btn-primary"
+          class="btn-primary login-button"
           data-testid="login-button"
           @click="clearStorageAndRedirectToLogin"
           title="Login"
         >
           Log in with IDIR
         </v-btn>
-      </v-col>
-    </v-row>
-  </v-container>
+      </div>
+    </v-col>
+    <v-col xs="12" class="justify-center cover d-none d-xs-none d-sm-none d-md-flex"> </v-col>
+  </v-row>
 </template>
 
 <script>
@@ -41,4 +48,33 @@ export default {
 };
 </script>
 
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+.page-title {
+  font-size: larger;
+}
+
+.container {
+  margin: 0;
+  width: 100%;
+}
+
+.title {
+  font-weight: 700;
+  margin-bottom: 20px
+}
+
+.login-button {
+  font-weight: 600;
+}
+
+.action {
+  height: calc(100vh - 64px);
+}
+
+.cover {
+  height: calc(100vh - 64px);
+  background-image: url('/login-cover.jpeg');
+  background-size: cover;
+  background-position: center;
+}
+</style>

backend/src/v1/routes/admin-report-routes.spec.ts

@@ -37,4 +37,9 @@ describe('admin-report-routes', () => {
       'naics_code=11',
     );
   });
+  it('400 - if search reports fails', async () => {
+    mockSearchReport.mockRejectedValue({error: true})
+    await request(app).get('')
+    .query({offset: 1, limit: 50, filter: 'naics_code=11', sort: 'field=naics_code,direction=asc'}).expect(400);
+  });
 });

backend/src/v1/routes/admin-report-routes.ts

@@ -16,13 +16,18 @@ router.get(
     logger.silly(req.query); //log the query params at silly level
     const offset = req.query.offset ? parseInt(req.query.offset as string) : 0;
     const limit = req.query.limit ? parseInt(req.query.limit as string) : 20;
-    const paginatedReportsResponse = await reportSearchService.searchReport(
-      offset,
-      limit,
-      req.query.sort as string,
-      req.query.filter as string,
-    );
-    return res.status(200).json(paginatedReportsResponse);
+    try {
+      const paginatedReportsResponse = await reportSearchService.searchReport(
+        offset,
+        limit,
+        req.query.sort as string,
+        req.query.filter as string,
+      );
+      return res.status(200).json(paginatedReportsResponse);
+    } catch (error) {
+      logger.error(error);
+      return res.status(400).json(error);
+    }
   }),
 );
 

backend/src/v1/services/report-search-service.ts

@@ -6,15 +6,16 @@ import {
   FilterValidationSchema,
 } from '../types/report-search';
 import prismaReadOnlyReplica from '../prisma/prisma-client-readonly-replica';
+import { PayTransparencyUserError } from './file-upload-service';
 
 const reportSearchService = {
   /**
    * Search reports, with pagination, sorting and filtering by connecting to read replica of crunchy.
    * This gives flexibility to query with pagination and filter without any modification to this service.
    * @param page the page number to retrieve , UI page 1 is database page 0
    * @param limit the number of records to retrieve, default to 10
-   * @param sort string value of JSON Array to store sort key and sort value, ex: [{"revision":"desc"},{"create_date":"asc"}]
-   * @param filter string value of JSON Array for key, operation and value, ex: [{"key": "reporting_year", "operation": "eq", "value": "2024"}]
+   * @param sort string value of JSON Array to store sort key and sort value, ex: [{"create_date":"asc"}]
+   * @param filter string value of JSON Array for key, operation and value, ex: [{"key": "reporting_year", "operation": "eq", "value": 2024}]
    */
   async searchReport(
     offset: number,
@@ -32,7 +33,7 @@ const reportSearchService = {
       sortObj = JSON.parse(sort);
       filterObj = JSON.parse(filter);
     } catch (e) {
-      throw new Error('Invalid query parameters');
+      throw new PayTransparencyUserError('Invalid query parameters');
     }
 
     await FilterValidationSchema.parseAsync(filterObj);