Fix/opening design review (#325)

Co-authored-by: Ricardo Campos <ricardo.campos@encora.com>
bcgov · Jul 4, 2024 · e9752bd · e9752bd
1 parent f446de2
commit e9752bd
Show file tree

Hide file tree

Showing 27 changed files with 309 additions and 198 deletions.
diff --git a/frontend/src/__test__/components/OpeningScreenDataTable.test.tsx b/frontend/src/__test__/components/OpeningScreenDataTable.test.tsx
@@ -13,7 +13,7 @@ const rows: RecentOpening[] = [{
   cutBlock: '1',
   grossAreaHa: 1,
   statusDesc: 'Approved',
-  categoryDesc: 'Another',
+  categoryDesc: 'Another:Another',
   disturbanceStart: '1',
   entryTimestamp: '1',
   updateTimestamp: '1',

diff --git a/frontend/src/components/ActionsTable/index.tsx b/frontend/src/components/ActionsTable/index.tsx
@@ -13,63 +13,67 @@ interface IActionsTable {
 
 const ActionsTable: React.FC<IActionsTable> = ({ rows, headers }) => {
   const getTypeEnum = (typeStr: string): ActivityTagTypeEnum => {
-    if (typeStr === ActivityTagTypeEnum.OPENING_DETAILS) {
-      return ActivityTagTypeEnum.OPENING_DETAILS;
-    } else if (typeStr === ActivityTagTypeEnum.OPENING_REPORT) {
-      return ActivityTagTypeEnum.OPENING_REPORT;
-    } else if (typeStr === ActivityTagTypeEnum.OPENING_SPATIAL) {
-      return ActivityTagTypeEnum.OPENING_SPATIAL;
-    } else if (typeStr === ActivityTagTypeEnum.UPDATE) {
-      return ActivityTagTypeEnum.UPDATE;
-    } else {
-      return ActivityTagTypeEnum.UNKNOWN;
+    switch (typeStr) {
+      case ActivityTagTypeEnum.OPENING_DETAILS:
+        return ActivityTagTypeEnum.OPENING_DETAILS;
+      case ActivityTagTypeEnum.OPENING_REPORT:
+        return ActivityTagTypeEnum.OPENING_REPORT;
+      case ActivityTagTypeEnum.OPENING_SPATIAL:
+        return ActivityTagTypeEnum.OPENING_SPATIAL;
+      case ActivityTagTypeEnum.UPDATE:
+        return ActivityTagTypeEnum.UPDATE;
+      default:
+        return ActivityTagTypeEnum.UNKNOWN;
     }
   };
 
   const getFileFormatEnum = (formatStr: string): ActivityTagFileFormatEnum => {
-    if (formatStr === ActivityTagFileFormatEnum.PDF_FILE) {
-      return ActivityTagFileFormatEnum.PDF_FILE;
-    } else if (formatStr === ActivityTagFileFormatEnum.CSV_FILE) {
-      return ActivityTagFileFormatEnum.CSV_FILE;
-    } else if (formatStr === ActivityTagFileFormatEnum.EXCEL_FILE) {
-      return ActivityTagFileFormatEnum.EXCEL_FILE;
-    } else {
-      return ActivityTagFileFormatEnum.UNKNOWN;
+    switch (formatStr) {
+      case ActivityTagFileFormatEnum.PDF_FILE:
+        return ActivityTagFileFormatEnum.PDF_FILE;
+      case ActivityTagFileFormatEnum.CSV_FILE:
+        return ActivityTagFileFormatEnum.CSV_FILE;
+      case ActivityTagFileFormatEnum.EXCEL_FILE:
+        return ActivityTagFileFormatEnum.EXCEL_FILE;
+      default:
+        return ActivityTagFileFormatEnum.UNKNOWN;
     }
   };
 
+  const headerKeys = headers.map(header => header.key);
+
   return (
     <Table size="lg" useZebraStyles={false} aria-label="actions table">
       <TableHead>
         <TableRow>
-          {headers.map(header => <TableHeader id={header.key} key={header.key}>
+          {headers.map(header => (
+            <TableHeader id={header.key} key={header.key}>
               {header.header}
-            </TableHeader>)}
+            </TableHeader>
+          ))}
         </TableRow>
       </TableHead>
       <TableBody>
-        {rows.map((row: RecentAction, idx: number) =>
+        {rows.map((row: RecentAction, idx: number) => (
           <TableRow key={idx}>
-          { Object.keys(row).filter((rowKey: string) => rowKey !== 'id').map((key: string) => {
-            return (
+            {headerKeys.map((key: string) => (
               <TableCell key={key}>
                 {key === "statusCode" ? (
                   <StatusTag code={row[key]} />
-                ):
-                key === "activityType" && !row["fileFormat"] ? (
+                ) : key === "activityType" && !row["fileFormat"] ? (
                   <ActivityTag type={getTypeEnum(row[key])} />
-                ):
-                key === "activityType" && row["fileFormat"] ? (
+                ) : key === "activityType" && row["fileFormat"] ? (
                   <ActivityTag
                     type={getTypeEnum(row[key])}
                     fileFormat={getFileFormatEnum(row["fileFormat"])}
                   />
-                ):
-                row[key]}
+                ) : (
+                  row[key]
+                )}
               </TableCell>
-            );
-          })}
-          </TableRow>)}
+            ))}
+          </TableRow>
+        ))}
       </TableBody>
     </Table>
   );

diff --git a/frontend/src/components/ActionsTable/styles.scss b/frontend/src/components/ActionsTable/styles.scss
@@ -25,28 +25,6 @@
   }
 }
 
-.#{vars.$bcgov-prefix}--data-table thead tr th#blank {
-  min-width:50px;
-}
-
-.#{vars.$bcgov-prefix}--data-table thead tr th  {
-  background-color: #F3F3F5;
-  border-top: 1px solid #DFDFE1;
-}
-
-.#{vars.$bcgov-prefix}--data-table thead tr th {
-  min-width:158px;
-}
-
-.#{vars.$bcgov-prefix}--data-table tr td {
-  background-color: white;
-  color:black;
-  height: 64px;
-}
-.#{vars.$bcgov-prefix}--data-table tr:hover td {
-  background-color: #F3F3F5;
-}
-
 @media only screen and (max-width: 672px) {
   .#{vars.$bcgov-prefix}--data-table-content {
     width: 100%;

diff --git a/frontend/src/components/BCHeaderwSide/index.tsx b/frontend/src/components/BCHeaderwSide/index.tsx
@@ -52,10 +52,15 @@ const listItems: ListItems[] = [
         disabled: false,
         subItems: [
           {
-            name: 'Silviculture search',
+            name: 'Home page',
             link: '/opening',
             disabled: false
           },
+          {
+            name: 'Silviculture search',
+            link: '/opening/silviculture',
+            disabled: false
+          },
           {
             name: 'Create an opening',
             link: '/opening/create',

diff --git a/frontend/src/components/BarChartGrouped/BarChartGrouped.scss b/frontend/src/components/BarChartGrouped/BarChartGrouped.scss
@@ -6,4 +6,10 @@
 }
 .cds--cc--grid rect.chart-grid-backdrop {
     fill: var(--#{vars.$bcgov-prefix}-layer-02);
+}
+.#{vars.$bcgov-prefix}--date-picker-container {
+ min-height: 66px;
+}
+.bar-chart-container {
+    padding-bottom: 16px;
 }
diff --git a/frontend/src/components/BarChartGrouped/index.tsx b/frontend/src/components/BarChartGrouped/index.tsx
@@ -7,8 +7,8 @@ import { fetchOpeningsPerYear } from "../../services/OpeningService";
 import { OpeningPerYearChart } from "../../types/OpeningPerYearChart";
 
 interface IDropdownItem {
-  value: string,
-  text: string
+  value: string;
+  text: string;
 }
 
 const BarChartGrouped = () => {
@@ -30,7 +30,7 @@ const BarChartGrouped = () => {
         setIsLoading(true);
         let formattedStartDate: string | null = null;
         let formattedEndDate: string | null = null;
-    
+
         if (startDate) {
           formattedStartDate = formatDateToString(startDate);
         }
@@ -42,7 +42,7 @@ const BarChartGrouped = () => {
           orgUnitCode,
           statusCode,
           entryDateStart: formattedStartDate,
-          entryDateEnd: formattedEndDate
+          entryDateEnd: formattedEndDate,
         });
         setChartData(data);
         setIsLoading(false);
@@ -56,8 +56,8 @@ const BarChartGrouped = () => {
     window.addEventListener("resize", handleResize);
     return () => window.removeEventListener("resize", handleResize);
   }, [orgUnitCode, statusCode, startDate, endDate]);
-  
-  const formatDateToString = (dateToFormat: Date | null) => {
+
+  const formatDateToString = (dateToFormat: Date) => {
     if (!dateToFormat) return null;
     const year = dateToFormat.getFullYear();
     const month = String(dateToFormat.getMonth() + 1).padStart(2, "0");
@@ -66,7 +66,7 @@ const BarChartGrouped = () => {
   };
 
   const colors = {
-    "Openings": "#1192E8",
+    Openings: "#1192E8",
   };
 
   const options = {
@@ -86,93 +86,101 @@ const BarChartGrouped = () => {
     grid: {
       x: {
         enabled: false,
-        color: '#d3d3d3',
-        strokeDashArray: '2,2'
+        color: "#d3d3d3",
+        strokeDashArray: "2,2",
       },
       y: {
         enabled: true,
-        color: '#d3d3d3',
-        strokeDashArray: '2,2'
-      }
+        color: "#d3d3d3",
+        strokeDashArray: "2,2",
+      },
     },
     toolbar: {
       enabled: false,
       numberOfIcons: 2,
       controls: [
         {
-          type: "Make fullscreen"
+          type: "Make fullscreen",
         },
         {
-          type: "Make fullscreen"
+          type: "Make fullscreen",
         },
-      ]
-    }
+      ],
+    },
   };
 
   const orgUnitItems = [
-    { value: 'DCR', text: 'DCR' },
-    { value: 'XYZ', text: 'District 2' },
+    { value: "DCR", text: "DCR" },
+    { value: "XYZ", text: "District 2" },
     // Add more options as needed
   ];
 
   const statusItems = [
-    { value: 'APP', text: 'Approved' },
-    { value: 'NAN', text: 'Not Approved' },
+    { value: "APP", text: "Approved" },
+    { value: "NAN", text: "Not Approved" },
     // Add more options as needed
   ];
 
-  const setOrgUnitCodeSelected = ({selectedItem}:{selectedItem: IDropdownItem}) => {
+  const setOrgUnitCodeSelected = ({
+    selectedItem,
+  }: {
+    selectedItem: IDropdownItem;
+  }) => {
     setOrgUnitCode(selectedItem.value);
   };
 
-  const setStatusCodeSelected = ({selectedItem}:{selectedItem: IDropdownItem}) => {
+  const setStatusCodeSelected = ({
+    selectedItem,
+  }: {
+    selectedItem: IDropdownItem;
+  }) => {
     setStatusCode(selectedItem.value);
   };
 
   return (
     <div className="px-3">
-      <div className="row gy-2 pb-3">
-        <div className="col-md-4 p-0">
+      <div className="row gy-2 gx-1 pb-3">
+        <div className="col-md-3">
           <Dropdown
             id="district-dropdown"
-            label={windowWidth <= 1584 ? "District" : "Filter by district"}
-            titleText={windowWidth <= 1584 ? "District" : "Filter by district"}
+            titleText="District"
             items={orgUnitItems}
-            itemToString={(item: IDropdownItem) => item ? item.text : ''}
+            itemToString={(item: IDropdownItem) => (item ? item.text : "")}
             onChange={setOrgUnitCodeSelected}
+            label="District"
           />
         </div>
-        <div className="col-md-4 p-0 px-md-1">
+        <div className="col-md-3">
           <Dropdown
             id="status-dropdown"
-            label={windowWidth <= 1584 ? "Status" : "Filter by status"}
-            titleText={windowWidth <= 1584 ? "Status" : "Filter by status"}
+            titleText="Status"
             items={statusItems}
-            itemToString={(item: IDropdownItem) => item ? item.text : ''}
+            itemToString={(item: IDropdownItem) => (item ? item.text : "")}
             onChange={setStatusCodeSelected}
+            label="Status"
           />
         </div>
-        <div className="col-2 px-md-1 d-none d-md-block">
+        <div className="col-md-2 col-xxl-3 d-none d-md-block">
           <DatePicker
             datePickerType="single"
-            onChange={(date: Date) => setStartDate(date)}
+            onChange={(dates: [Date]) => setStartDate(dates[0])}
           >
             <DatePickerInput
               id="start-date-picker-input-id"
-              placeholder="yyyy-MM-dd"
+              placeholder="yyyy/MM/dd"
               size="md"
               labelText="Start Date"
             />
           </DatePicker>
         </div>
-        <div className="col-2 px-md-1 d-none d-md-block">
+        <div className="col-md-2 col-xxl-3 d-none d-md-block">
           <DatePicker
             datePickerType="single"
-            onChange={(date: Date) => setEndDate(date)}
+            onChange={(dates: [Date]) => setEndDate(dates[0])}
           >
             <DatePickerInput
               id="end-date-picker-input-id"
-              placeholder="yyyy-MM-dd"
+              placeholder="yyyy/MM/dd"
               size="md"
               labelText="End Date"
             />
@@ -182,10 +190,9 @@ const BarChartGrouped = () => {
       {isLoading ? (
         <p>Loading...</p>
       ) : (
-        <GroupedBarChart
-          data={chartData}
-          options={options}
-        />
+        <div className="bar-chart-container">
+          <GroupedBarChart data={chartData} options={options} />
+        </div>
       )}
     </div>
   );

diff --git a/frontend/src/components/ChartContainer/index.tsx b/frontend/src/components/ChartContainer/index.tsx
@@ -28,7 +28,7 @@ export default function ChartContainer({ children, title, description }: Props)
             />
             <Button
               hasIconOnly
-              iconDescription="Overflow menu vertical"
+              iconDescription="Download options"
               tooltipposition="bottom"
               kind="ghost"
               onClick={() => console.log('Download Click')}

diff --git a/frontend/src/components/DoughnutChartView/DoughnutChartView.scss b/frontend/src/components/DoughnutChartView/DoughnutChartView.scss
@@ -13,4 +13,11 @@
 
 text.pie-label {
     font-weight: 700;
+}
+.mt10 {
+    margin-top: 10px !important;
+}
+.donut-chart-container {
+    padding-top: 32px;
+    padding-bottom: 16px;
 }