Merge pull request #693 from bcgov/feat/srs-288

remove unused code.
bcgov · May 8, 2024 · e1a4f75 · e1a4f75
2 parents 6ea16e4 + 0543e79
commit e1a4f75
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 20 deletions.
diff --git a/frontend/Site/src/app/features/site/dto/SiteFilterConfig.ts b/frontend/Site/src/app/features/site/dto/SiteFilterConfig.ts
@@ -1,17 +1,12 @@
-interface DropdownKeyValuePair {
-    key :string,
-    value: string
-}
-
-export interface FormField {
+export interface IFormField {
     type: 'text' | 'dropdown' | 'date' | 'group';
     label: string;
     placeholder?: string;
     graphQLPropertyName?: string,
     allowNumbersOnly?: boolean; 
     options?: {key :string, value: string}[];
     value: any;
-    children?: FormField[];
+    children?: IFormField[];
     validation?: {
         required?: boolean;
         minLength?: number;
@@ -22,7 +17,7 @@ export interface FormField {
 }
 
 
-export const formRows: FormField[][] = [
+export const formRows: IFormField[][] = [
     [
         {
             type: 'text',

diff --git a/frontend/Site/src/app/features/site/filters/SiteFilterForm.test.jsx b/frontend/Site/src/app/features/site/filters/SiteFilterForm.test.jsx
@@ -1,5 +1,4 @@
-import React from 'react';
-import { render, fireEvent, waitFor, getByTestId } from '@testing-library/react';
+import { render, fireEvent } from '@testing-library/react';
 import SiteFilterForm from './SiteFilterForm';
 import { Provider } from 'react-redux';
 import configureStore from 'redux-mock-store';

diff --git a/frontend/Site/src/app/features/site/filters/SiteFilterForm.tsx b/frontend/Site/src/app/features/site/filters/SiteFilterForm.tsx
@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from "react"
 import { DateRangePicker } from 'rsuite';
 import { format } from 'date-fns';
-import { formRows, FormField } from '../dto/SiteFilterConfig';
+import { formRows, IFormField } from '../dto/SiteFilterConfig';
 import './SiteFilterForm.css';
 import { CalendarIcon, DropdownIcon, XmarkIcon } from "../../../components/common/icon";
 import 'rsuite/DateRangePicker/styles/index.css';
@@ -10,7 +10,7 @@ import { AppDispatch } from "../../../Store";
 import { fetchSites } from "../dto/SiteSlice";
 
 
-interface InputProps extends FormField {
+interface InputProps extends IFormField {
     children?: InputProps[];
     onChange: (value: any) => void;
 }
@@ -204,7 +204,7 @@ const SiteFilterForm : React.FC<childProps> = ({cancelSearchFilter}) => {
     const dispatch = useDispatch<AppDispatch>();
     const sites = useSelector((state:any) => state.sites);
     const [formData, setFormData] =  useState<{ [key: string]: any | [Date, Date] }>({});
-    const [selectedFilters, setSelectedFilters] = useState<{ key: any; value: any }[]>([]);
+    const [selectedFilters, setSelectedFilters] = useState<{ key: any; value: any, label: string  }[]>([]);
 
     const formatDateRange = (range: [Date, Date]) => {
         const [startDate, endDate] = range;
@@ -223,26 +223,27 @@ const SiteFilterForm : React.FC<childProps> = ({cancelSearchFilter}) => {
     const handleFormSubmit = (event: React.FormEvent) => {
         event.preventDefault();
         const filteredFormData: { [key: string]: string } = {};
-        const filters: { key: string, value: string }[] = [];
-
+        const filters: { key: string, value: string, label: string }[] = [];
+        
         // Filter out form data with non-empty values and construct filteredFormData and filters
         for (const [key, value] of Object.entries(formData)) {
+            let currLabel = formRows && formRows.flatMap(row => row).find(row => row.graphQLPropertyName === key);
             if(key === 'whenCreated' || key === 'whenUpdated' )
             {
                 let dateRangeValue = formatDateRange(value);
                 filteredFormData[key] = dateRangeValue
-                filters.push({ key, value: dateRangeValue });
+                filters.push({ key, value: dateRangeValue, label: currLabel?.label ?? '' });
             }
             else if (value.trim() !== '') {
                 filteredFormData[key] = value;
-                filters.push({ key, value });
+                filters.push({ key, value, label: currLabel?.label ?? '' });
             }
         }
 
-
         // show and format pill.
         if(filters.length !== 0)
         {
+            console.log(filters);
             dispatch(fetchSites({searchParam: sites.searchQuery, filter: filteredFormData}));
             setSelectedFilters(filters);
 
@@ -337,7 +338,7 @@ const SiteFilterForm : React.FC<childProps> = ({cancelSearchFilter}) => {
             ))}
 
 
-            <div className="d-flex flex-sm-wrap justify-content-between w-100">
+            <div className="d-flex flex-wrap justify-content-between w-100">
                 <div>
                     <button type="reset" className="reset-button" onClick={handleReset}>Reset Filters</button>
                 </div>
@@ -356,7 +357,7 @@ const SiteFilterForm : React.FC<childProps> = ({cancelSearchFilter}) => {
          <div id="filter-pill" className="d-flex justify-content-end flex-wrap selected-filter">
          {selectedFilters.map((filter, index) => (
              <div key={index} className="d-flex custom-pill align-items-center">
-                {filter.value}
+                {filter && `${filter.label} : ${filter.value}`}
                  <div className="d-flex align-items-center x-mark" onClick={() => handleRemoveFilter(filter)}><XmarkIcon/></div>
              </div>
          ))}