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);