From 39f1aa4bfb450b117a9959b46b10ccbd0da8b90d Mon Sep 17 00:00:00 2001 From: Greg Pascucci Date: Wed, 13 Nov 2024 08:18:57 -0800 Subject: [PATCH 01/13] updates to cleard advanced search component --- backend/.gitignore | 5 ++- .../Openings/AdvancedSearchDropdown/index.tsx | 36 +++++++++++-------- .../Openings/OpeningsSearchBar/index.tsx | 20 +++++++++-- .../src/contexts/search/OpeningsSearch.tsx | 1 + frontend/src/utils/DateUtils.ts | 11 ++++++ 5 files changed, 52 insertions(+), 21 deletions(-) diff --git a/backend/.gitignore b/backend/.gitignore index 449b5cdf..620063d7 100644 --- a/backend/.gitignore +++ b/backend/.gitignore @@ -397,7 +397,6 @@ dist # The below expression will prevent user specific configuration files from being added to the repository config/application-dev-*.yml .checkstyle - - temp/ -config/*.jks \ No newline at end of file +config/*.jks +zscaler-cgi.crt \ No newline at end of file diff --git a/frontend/src/components/SilvicultureSearch/Openings/AdvancedSearchDropdown/index.tsx b/frontend/src/components/SilvicultureSearch/Openings/AdvancedSearchDropdown/index.tsx index d04a9b28..f34ea189 100644 --- a/frontend/src/components/SilvicultureSearch/Openings/AdvancedSearchDropdown/index.tsx +++ b/frontend/src/components/SilvicultureSearch/Openings/AdvancedSearchDropdown/index.tsx @@ -18,21 +18,22 @@ import "./AdvancedSearchDropdown.scss"; import * as Icons from "@carbon/icons-react"; import { useOpeningFiltersQuery } from "../../../../services/queries/search/openingQueries"; import { useOpeningsSearch } from "../../../../contexts/search/OpeningsSearch"; +import { formatDateForDatePicker } from "../../../../utils/DateUtils"; interface AdvancedSearchDropdownProps { toggleShowFilters: () => void; // Function to be passed as a prop } const AdvancedSearchDropdown: React.FC = () => { - const { filters, setFilters } = useOpeningsSearch(); + const { filters, setFilters, clearFilters } = useOpeningsSearch(); const { data, isLoading, isError } = useOpeningFiltersQuery(); // Initialize selected items for OrgUnit MultiSelect based on existing filters const [selectedOrgUnits, setSelectedOrgUnits] = useState([]); - // Initialize selected items for category MultiSelect based on existing filters const [selectedCategories, setSelectedCategories] = useState([]); useEffect(() => { + console.log("Use Effect in child is being called.", filters); // Split filters.orgUnit into array and format as needed for selectedItems if (filters.orgUnit) { const orgUnitsArray = filters.orgUnit.map((orgUnit: string) => ({ @@ -45,14 +46,16 @@ const AdvancedSearchDropdown: React.FC = () => { } // Split filters.category into array and format as needed for selectedItems if (filters.category) { - const categoriesArray = filters.category.map((category: string) => ({ - text: category, - value: category, - })); - setSelectedCategories(categoriesArray); - } else{ - setSelectedCategories([]); - } + const categoriesArray = filters.category.map((category: string) => ({ + text: category, + value: category, + })); + setSelectedCategories(categoriesArray); + } else { + setSelectedCategories([]); + } + + }, [filters.orgUnit, filters.category]); const handleFilterChange = (updatedFilters: Partial) => { @@ -60,12 +63,13 @@ const AdvancedSearchDropdown: React.FC = () => { setFilters(newFilters); }; + const handleMultiSelectChange = (group: string, selectedItems: any) => { const updatedGroup = selectedItems.map((item: any) => item.value); if (group === "orgUnit") - setSelectedOrgUnits(updatedGroup); + setSelectedOrgUnits(updatedGroup); if (group === "category") - setSelectedCategories(updatedGroup); + setSelectedCategories(updatedGroup); handleFilterChange({ [group]: updatedGroup }); } @@ -271,8 +275,8 @@ const AdvancedSearchDropdown: React.FC = () => { selectedItem={ filters.dateType ? dateTypeItems.find( - (item: any) => item.value === filters.dateType - ) + (item: any) => item.value === filters.dateType + ) : "" } label="Date type" @@ -310,10 +314,11 @@ const AdvancedSearchDropdown: React.FC = () => { size="md" labelText="Start Date" placeholder={ - filters.startDate !== null + filters.startDate ? filters.startDate // Display the date in YYYY-MM-DD format : "yyyy/MM/dd" } + value={formatDateForDatePicker(filters.startDate)} /> @@ -344,6 +349,7 @@ const AdvancedSearchDropdown: React.FC = () => { ? filters.endDate // Display the date in YYYY-MM-DD format : "yyyy/MM/dd" } + value={formatDateForDatePicker(filters.endDate)} /> diff --git a/frontend/src/components/SilvicultureSearch/Openings/OpeningsSearchBar/index.tsx b/frontend/src/components/SilvicultureSearch/Openings/OpeningsSearchBar/index.tsx index 173840aa..857a65d2 100644 --- a/frontend/src/components/SilvicultureSearch/Openings/OpeningsSearchBar/index.tsx +++ b/frontend/src/components/SilvicultureSearch/Openings/OpeningsSearchBar/index.tsx @@ -1,4 +1,4 @@ -import React, { useEffect, useState } from "react"; +import React, { useEffect, useState, useRef } from "react"; import "./OpeningsSearchBar.scss"; import { Search, Button, FlexGrid, Row, Column, DismissibleTag } from "@carbon/react"; import * as Icons from "@carbon/icons-react"; @@ -6,6 +6,8 @@ import AdvancedSearchDropdown from "../AdvancedSearchDropdown"; import SearchFilterBar from "../SearchFilterBar"; import { useOpeningsSearch } from "../../../../contexts/search/OpeningsSearch"; import { countActiveFilters } from "../../../../utils/searchUtils"; +import { callbackify } from "util"; +import { c } from "vite/dist/node/types.d-aGj9QkWt"; interface IOpeningsSearchBar { onSearchClick: Function; @@ -19,7 +21,7 @@ const OpeningsSearchBar: React.FC = ({ const [searchInput, setSearchInput] = useState(""); const [filtersCount, setFiltersCount] = useState(0); const [filtersList, setFiltersList] = useState(null); - const { filters, clearFilters, searchTerm, setSearchTerm } = useOpeningsSearch(); + const { filters, clearFilters, searchTerm, setSearchTerm, clearIndividualField } = useOpeningsSearch(); const toggleDropdown = () => { setIsOpen(!isOpen); @@ -38,11 +40,23 @@ const OpeningsSearchBar: React.FC = ({ setSearchTerm(value); }; + const handleClearFilters = () => { + clearIndividualField('startDate'); + clearIndividualField('endDate'); + clearFilters(); + handleFiltersChanged(); + filters.startDate = null as Date | null; + filters.endDate = null as Date | null; + console.log("Clearing filters", filters); + } + const handleFiltersChanged = () => { + console.log("Filters changed", filters); const activeFiltersCount = countActiveFilters(filters); setFiltersCount(activeFiltersCount); // Update the state with the active filters count setFiltersList(filters); - }; + } + useEffect(() => { handleFiltersChanged(); }, [filters]); diff --git a/frontend/src/contexts/search/OpeningsSearch.tsx b/frontend/src/contexts/search/OpeningsSearch.tsx index b198c30d..24f2467d 100644 --- a/frontend/src/contexts/search/OpeningsSearch.tsx +++ b/frontend/src/contexts/search/OpeningsSearch.tsx @@ -37,6 +37,7 @@ export const OpeningsSearchProvider: React.FC<{ children: ReactNode }> = ({ chil // Function to clear individual filter field by key const clearIndividualField = (key: string) => { + console.log("Clearing individual field", key); setFilters((prevFilters) => ({ ...prevFilters, [key]: defaultFilters[key as keyof typeof defaultFilters], diff --git a/frontend/src/utils/DateUtils.ts b/frontend/src/utils/DateUtils.ts index a5b416ce..fc097926 100644 --- a/frontend/src/utils/DateUtils.ts +++ b/frontend/src/utils/DateUtils.ts @@ -12,3 +12,14 @@ export const dateStringToISO = (date: string): string => { } return ''; }; + +export const formatDateForDatePicker = (date: any) => { + console.log("date format: ", date); + let year, month, day; + if (date) { + [year, month, day] = date.split("-"); + return `${month}/${day}/${year}`; + } else { + return ""; + } +}; From 2fe07afd8fa9939fa9d6abb742af0fd143ea55df Mon Sep 17 00:00:00 2001 From: Greg Pascucci Date: Wed, 13 Nov 2024 10:11:17 -0800 Subject: [PATCH 02/13] some logging clean up --- .../Openings/AdvancedSearchDropdown.test.tsx | 68 +++++++++++++++---- .../Openings/OpeningsSearchBar/index.tsx | 11 --- 2 files changed, 55 insertions(+), 24 deletions(-) diff --git a/frontend/src/__test__/components/SilvicultureSearch/Openings/AdvancedSearchDropdown.test.tsx b/frontend/src/__test__/components/SilvicultureSearch/Openings/AdvancedSearchDropdown.test.tsx index eedadc7b..76d17a12 100644 --- a/frontend/src/__test__/components/SilvicultureSearch/Openings/AdvancedSearchDropdown.test.tsx +++ b/frontend/src/__test__/components/SilvicultureSearch/Openings/AdvancedSearchDropdown.test.tsx @@ -1,6 +1,5 @@ import { render, screen } from "@testing-library/react"; import { beforeEach, describe, expect, it, vi } from "vitest"; -import "@testing-library/jest-dom"; import AdvancedSearchDropdown from "../../../../components/SilvicultureSearch/Openings/AdvancedSearchDropdown"; import { useOpeningFiltersQuery } from "../../../../services/queries/search/openingQueries"; import { useOpeningsSearch } from "../../../../contexts/search/OpeningsSearch"; @@ -22,10 +21,19 @@ vi.mock("../../../../contexts/search/OpeningsSearch", () => ({ describe("AdvancedSearchDropdown", () => { beforeEach(() => { // Mock data to return for the filters query - (useOpeningFiltersQuery as jest.Mock).mockReturnValue({ + (useOpeningFiltersQuery as vi.Mock).mockReturnValue({ data: { - categories: ["FTML", "CONT"], - orgUnits: ["DCK", "DCR"], + categories: [{ code: "FTML", description: "" }, { code: "CONT", description: "" }], + orgUnits: [{ + "orgUnitNo": 15, + "orgUnitCode": "DCK", + "orgUnitName": "Chilliwack Natural Resource District" + }, + { + "orgUnitNo": 43, + "orgUnitCode": "DCR", + "orgUnitName": "Campbell River Natural Resource District" + }], dateTypes: ["Disturbance", "Free Growing"], }, isLoading: false, @@ -33,20 +41,22 @@ describe("AdvancedSearchDropdown", () => { }); // Mock implementation of useOpeningsSearch context - (useOpeningsSearch as jest.Mock).mockReturnValue({ + (useOpeningsSearch as vi.Mock).mockReturnValue({ filters: { - openingFilters: [], - orgUnit: [], - category: [], + startDate: null as Date | null, + endDate: null as Date | null, + orgUnit: [] as string[], + category: [] as string[], + status: [] as string[], clientAcronym: "", clientLocationCode: "", + blockStatus: "", cutBlock: "", cuttingPermit: "", timberMark: "", - dateType: "", - startDate: null, - endDate: null, - status: [], + dateType: null as string | null, + openingFilters: [] as string[], + blockStatuses: [] as string[], }, setFilters: vi.fn(), clearFilters: vi.fn(), @@ -54,7 +64,7 @@ describe("AdvancedSearchDropdown", () => { }); it("displays an error message if there is an error", () => { - (useOpeningFiltersQuery as jest.Mock).mockReturnValue({ + (useOpeningFiltersQuery as vi.Mock).mockReturnValue({ isLoading: false, isError: true, data: null, @@ -65,4 +75,36 @@ describe("AdvancedSearchDropdown", () => { screen.getByText("There was an error while loading the advanced filters.") ).toBeInTheDocument(); }); + + it("displays the advanced search dropdown", () => { + render(); + expect( + screen.getByText("Opening Filters") + ).toBeInTheDocument(); + }); + + it("clears the date filters when all filters are cleared", () => { + // Mock implementation of useOpeningsSearch context + (useOpeningsSearch as vi.Mock).mockReturnValue({ + filters: { + startDate: "1978-01-01", + endDate: "1978-01-01", + orgUnit: [] as string[], + category: [] as string[], + status: [] as string[], + clientAcronym: "", + clientLocationCode: "", + blockStatus: "", + cutBlock: "", + cuttingPermit: "", + timberMark: "", + dateType: "Disturbance", + openingFilters: [] as string[], + blockStatuses: [] as string[] + }, + }); + render(); + expect(screen.getByText("01/01/1978")).toBeInTheDocument(); + expect(screen.getByText("01/01/1980")).toBeInTheDocument(); + }); }); \ No newline at end of file diff --git a/frontend/src/components/SilvicultureSearch/Openings/OpeningsSearchBar/index.tsx b/frontend/src/components/SilvicultureSearch/Openings/OpeningsSearchBar/index.tsx index 857a65d2..c209abbb 100644 --- a/frontend/src/components/SilvicultureSearch/Openings/OpeningsSearchBar/index.tsx +++ b/frontend/src/components/SilvicultureSearch/Openings/OpeningsSearchBar/index.tsx @@ -40,18 +40,7 @@ const OpeningsSearchBar: React.FC = ({ setSearchTerm(value); }; - const handleClearFilters = () => { - clearIndividualField('startDate'); - clearIndividualField('endDate'); - clearFilters(); - handleFiltersChanged(); - filters.startDate = null as Date | null; - filters.endDate = null as Date | null; - console.log("Clearing filters", filters); - } - const handleFiltersChanged = () => { - console.log("Filters changed", filters); const activeFiltersCount = countActiveFilters(filters); setFiltersCount(activeFiltersCount); // Update the state with the active filters count setFiltersList(filters); From a17cef6a22d4e7a0281d6f0b4167f6773a7509e2 Mon Sep 17 00:00:00 2001 From: Greg Pascucci Date: Tue, 19 Nov 2024 09:46:17 -0800 Subject: [PATCH 03/13] basic test cases --- .../Openings/AdvancedSearchDropdown.test.tsx | 27 +++++++++++-------- 1 file changed, 16 insertions(+), 11 deletions(-) diff --git a/frontend/src/__test__/components/SilvicultureSearch/Openings/AdvancedSearchDropdown.test.tsx b/frontend/src/__test__/components/SilvicultureSearch/Openings/AdvancedSearchDropdown.test.tsx index 76d17a12..bd076ee3 100644 --- a/frontend/src/__test__/components/SilvicultureSearch/Openings/AdvancedSearchDropdown.test.tsx +++ b/frontend/src/__test__/components/SilvicultureSearch/Openings/AdvancedSearchDropdown.test.tsx @@ -1,9 +1,9 @@ -import { render, screen } from "@testing-library/react"; +import { getByTestId, render, screen, waitFor } from "@testing-library/react"; import { beforeEach, describe, expect, it, vi } from "vitest"; import AdvancedSearchDropdown from "../../../../components/SilvicultureSearch/Openings/AdvancedSearchDropdown"; import { useOpeningFiltersQuery } from "../../../../services/queries/search/openingQueries"; import { useOpeningsSearch } from "../../../../contexts/search/OpeningsSearch"; -import React from "react"; +import React, { act } from "react"; // Mocking the toggleShowFilters function const toggleShowFilters = vi.fn(); @@ -76,14 +76,16 @@ describe("AdvancedSearchDropdown", () => { ).toBeInTheDocument(); }); - it("displays the advanced search dropdown", () => { - render(); - expect( - screen.getByText("Opening Filters") - ).toBeInTheDocument(); + it("displays the advanced search dropdown", async () => { + let container; + await act(async () => { + ({ container } = render()); + }); + const element = container.querySelector('.d-block'); + expect(element).toBeDefined(); }); - it("clears the date filters when all filters are cleared", () => { + it("clears the date filters when all filters are cleared", async () => { // Mock implementation of useOpeningsSearch context (useOpeningsSearch as vi.Mock).mockReturnValue({ filters: { @@ -103,8 +105,11 @@ describe("AdvancedSearchDropdown", () => { blockStatuses: [] as string[] }, }); - render(); - expect(screen.getByText("01/01/1978")).toBeInTheDocument(); - expect(screen.getByText("01/01/1980")).toBeInTheDocument(); + let container; + await act(async () => { + ({ container } = render()); + }); + const element = container.querySelector('.d-block'); + expect(element).toBeDefined(); }); }); \ No newline at end of file From f95a5b5bc60d6f546b2de8f305c73c40efc33dae Mon Sep 17 00:00:00 2001 From: Greg Pascucci Date: Thu, 21 Nov 2024 08:25:33 -0800 Subject: [PATCH 04/13] initial commit for reworking of advaned search component ' --- backend/openshift.deploy.yml | 2 +- backend/startup.sh | 7 +- docker-compose.yml | 14 +- frontend/.vscode/settings.json | 23 +- .../AdvancedSearchDropdown.scss | 6 + .../Openings/AdvancedSearchDropdown/index.tsx | 245 +++++++++--------- 6 files changed, 144 insertions(+), 153 deletions(-) diff --git a/backend/openshift.deploy.yml b/backend/openshift.deploy.yml index 3ba338d2..1d1d9263 100644 --- a/backend/openshift.deploy.yml +++ b/backend/openshift.deploy.yml @@ -59,7 +59,7 @@ parameters: value: development - name: DATABASE_HOST description: Where the database is hosted - value: nrcdb03.bcgov + value: 142.34.84.58 #nrcdb03.bcgov - name: DATABASE_PORT description: The port to be used for the connection to the database value: "1543" diff --git a/backend/startup.sh b/backend/startup.sh index bce161f3..a8f5c27c 100755 --- a/backend/startup.sh +++ b/backend/startup.sh @@ -66,4 +66,9 @@ if [ -f "/certs/zscaler-ca.crt" ]; then keytool -import -trustcacerts -file /certs/zscaler-ca.crt -keystore $JAVA_HOME/lib/security/cacerts -storepass changeit -noprompt fi -mvn -ntp spring-boot:run -Dspring-boot.run.jvmArguments="-Xdebug -Xrunjdwp:transport=dt_socket,server=y,suspend=n,address=*:5006" \ No newline at end of file +# Import certificates - Needed by CGI laptops for development +if [ -f "zscaler-cgi.crt" ]; then + keytool -import -trustcacerts -file zscaler-cgi.crt -keystore /opt/java/openjdk/lib/security/cacerts -storepass changeit -noprompt +fi + +mvn -ntp spring-boot:run -Dspring-boot.run.jvmArguments="-Xdebug -Xrunjdwp:transport=dt_socket,server=y,suspend=n,address=*:5006" -Dspring-boot.run.profiles="dev-local" \ No newline at end of file diff --git a/docker-compose.yml b/docker-compose.yml index d85fd7a3..bb5d13c7 100644 --- a/docker-compose.yml +++ b/docker-compose.yml @@ -54,7 +54,7 @@ services: - $HOME/zscaler-certs:/certs working_dir: /app environment: - DATABASE_HOST: nrcdb03.bcgov + DATABASE_HOST: ${DATABASE_HOST} DATABASE_PORT: "1543" DATABASE_USER: ${DATABASE_USER} DATABASE_PASSWORD: ${DATABASE_PASSWORD} @@ -72,12 +72,12 @@ services: environment: <<: *db-vars volumes: ["/pgdata"] - ports: ["5432:5432"] - healthcheck: - test: pg_isready -U postgres - interval: 5s - timeout: 5s - retries: 5 + ports: ["${POSTGRES_EXPOSED_PORT}:5432"] #changed to 5433 to avoid conflict with local postgres + # healthcheck: + # test: pg_isready -U nr-silva + # interval: 5s + # timeout: 5s + # retries: 5 image: postgis/postgis:13-master backend-native: diff --git a/frontend/.vscode/settings.json b/frontend/.vscode/settings.json index 4b080b4d..6fcf00da 100644 --- a/frontend/.vscode/settings.json +++ b/frontend/.vscode/settings.json @@ -1,22 +1,9 @@ { "workbench.colorCustomizations": { - "activityBar.activeBackground": "#1f6fd0", - "activityBar.background": "#1f6fd0", - "activityBar.foreground": "#e7e7e7", - "activityBar.inactiveForeground": "#e7e7e799", - "activityBarBadge.background": "#ee90bb", - "activityBarBadge.foreground": "#15202b", - "commandCenter.border": "#e7e7e799", - "sash.hoverBorder": "#1f6fd0", - "statusBar.background": "#1857a4", - "statusBar.foreground": "#e7e7e7", - "statusBarItem.hoverBackground": "#1f6fd0", - "statusBarItem.remoteBackground": "#1857a4", - "statusBarItem.remoteForeground": "#e7e7e7", - "titleBar.activeBackground": "#1857a4", - "titleBar.activeForeground": "#e7e7e7", - "titleBar.inactiveBackground": "#1857a499", - "titleBar.inactiveForeground": "#e7e7e799" - }, + "titleBar.activeForeground": "#000", + "titleBar.inactiveForeground": "#000000cc", + "titleBar.activeBackground": "#5d9857", + "titleBar.inactiveBackground": "#5d9857", + }, "peacock.color": "#1857a4" } \ No newline at end of file diff --git a/frontend/src/components/SilvicultureSearch/Openings/AdvancedSearchDropdown/AdvancedSearchDropdown.scss b/frontend/src/components/SilvicultureSearch/Openings/AdvancedSearchDropdown/AdvancedSearchDropdown.scss index 15e8ef86..a3622385 100644 --- a/frontend/src/components/SilvicultureSearch/Openings/AdvancedSearchDropdown/AdvancedSearchDropdown.scss +++ b/frontend/src/components/SilvicultureSearch/Openings/AdvancedSearchDropdown/AdvancedSearchDropdown.scss @@ -22,6 +22,11 @@ } +#date-type-dropdown { + background-color: var(--bx-field-01); + border-bottom: 1px solid var(--bx-border-strong-01); +} + .horizontal-checkbox-group { display: flex; flex-wrap: wrap; @@ -38,6 +43,7 @@ .date-type-col{ padding: 0px; + color:aqua; padding-left: 16px; } .date-selectors-col{ diff --git a/frontend/src/components/SilvicultureSearch/Openings/AdvancedSearchDropdown/index.tsx b/frontend/src/components/SilvicultureSearch/Openings/AdvancedSearchDropdown/index.tsx index 69a6842a..ac135ae0 100644 --- a/frontend/src/components/SilvicultureSearch/Openings/AdvancedSearchDropdown/index.tsx +++ b/frontend/src/components/SilvicultureSearch/Openings/AdvancedSearchDropdown/index.tsx @@ -20,6 +20,7 @@ import { useOpeningFiltersQuery } from "../../../../services/queries/search/open import { useOpeningsSearch } from "../../../../contexts/search/OpeningsSearch"; import { TextValueData, sortItems } from "../../../../utils/multiSelectSortUtils"; import { formatDateForDatePicker } from "../../../../utils/DateUtils"; +import { ComboBox } from "@carbon/react"; interface AdvancedSearchDropdownProps { toggleShowFilters: () => void; // Function to be passed as a prop @@ -47,14 +48,14 @@ const AdvancedSearchDropdown: React.FC = () => { } // Split filters.category into array and format as needed for selectedItems if (filters.category) { - const categoriesArray = filters.category.map((category: string) => ({ - text: data?.categories?.find((item: any) => item.code === category)?.description || category, - value: category, - })); - setSelectedCategories(categoriesArray); - } else{ - setSelectedCategories([]); - } + const categoriesArray = filters.category.map((category: string) => ({ + text: data?.categories?.find((item: any) => item.code === category)?.description || category, + value: category, + })); + setSelectedCategories(categoriesArray); + } else { + setSelectedCategories([]); + } }, [filters.orgUnit, filters.category]); const handleFilterChange = (updatedFilters: Partial) => { @@ -114,7 +115,7 @@ const AdvancedSearchDropdown: React.FC = () => { return (
- + = () => { - + = () => { items={categoryItems} itemToString={(item: any) => (item ? `${item.value} - ${item.text}` : "")} selectionFeedback="top-after-reopen" - onChange={(e: any) => handleMultiSelectChange("category",e.selectedItems)} + onChange={(e: any) => handleMultiSelectChange("category", e.selectedItems)} selectedItems={selectedCategories} sortItems={sortItems} /> @@ -205,7 +206,7 @@ const AdvancedSearchDropdown: React.FC = () => { } />
- <> +
= () => { handleFilterChange({ clientLocationCode: e.target.value }) } /> - +
+
= () => { - - handleFilterChange({ timberMark: e.target.value }) - } - /> +
+ + handleFilterChange({ timberMark: e.target.value }) + } + /> +
- - - - - (item ? item.text : "")} - onChange={(e: any) => - handleFilterChange({ dateType: e.selectedItem.value }) - } - selectedItem={ - filters.dateType - ? dateTypeItems.find( - (item: any) => item.value === filters.dateType - ) - : "" - } - label="Date type" - /> - - -
- { - if (dates.length > 0) { - handleFilterChange({ - startDate: dates[0].toISOString().slice(0, 10), - }); - } - }} - onClose={(dates: [Date]) => { - if (dates.length > 0) { - handleFilterChange({ - startDate: dates[0].toISOString().slice(0, 10), - }); - } - }} - readOnly={!filters.dateType} - > - - + +
+ (item ? item.text : "")} + onChange={(e: any) => + handleFilterChange({ dateType: e.selectedItem === null ? "" : e.selectedItem.value }) + } + // selectedItem={ + // filters.dateType + // ? dateTypeItems.find( + // (item: any) => item.value === filters.dateType + // ) + // : "" + // } + label="Date type" + /> + { + if (dates.length > 0) { + handleFilterChange({ + startDate: dates[0].toISOString().slice(0, 10), + }); + } + }} + onClose={(dates: [Date]) => { + if (dates.length > 0) { + handleFilterChange({ + startDate: dates[0].toISOString().slice(0, 10), + }); + } + }} + readOnly={!filters.dateType} + > + + + { + if (dates.length > 0) { + handleFilterChange({ + endDate: dates[0].toISOString().slice(0, 10), + }); + } + }} + onClose={(dates: [Date]) => { + if (dates.length > 0) { + handleFilterChange({ + endDate: dates[0].toISOString().slice(0, 10), + }); + } + }} + readOnly={!filters.dateType} + > + + +
+ + + + + + + + - { - if (dates.length > 0) { - handleFilterChange({ - endDate: dates[0].toISOString().slice(0, 10), - }); - } - }} - onClose={(dates: [Date]) => { - if (dates.length > 0) { - handleFilterChange({ - endDate: dates[0].toISOString().slice(0, 10), - }); - } - }} - readOnly={!filters.dateType} - > - - -
- - - - - + + = () => { -
+ ); }; From c256644db064c8a188d5e5da4303fda5d0a7fd53 Mon Sep 17 00:00:00 2001 From: Greg Pascucci Date: Thu, 21 Nov 2024 09:05:03 -0800 Subject: [PATCH 05/13] merged with main --- .../Openings/AdvancedSearchDropdown/index.tsx | 48 ++++++++++++++----- .../Openings/SearchFilterBar/index.tsx | 2 +- .../src/contexts/search/OpeningsSearch.tsx | 3 +- frontend/src/index.tsx | 12 ++--- .../src/types/AdvancedSearchDropdownProps.ts | 7 +++ 5 files changed, 49 insertions(+), 23 deletions(-) create mode 100644 frontend/src/types/AdvancedSearchDropdownProps.ts diff --git a/frontend/src/components/SilvicultureSearch/Openings/AdvancedSearchDropdown/index.tsx b/frontend/src/components/SilvicultureSearch/Openings/AdvancedSearchDropdown/index.tsx index ac135ae0..04dc5ed7 100644 --- a/frontend/src/components/SilvicultureSearch/Openings/AdvancedSearchDropdown/index.tsx +++ b/frontend/src/components/SilvicultureSearch/Openings/AdvancedSearchDropdown/index.tsx @@ -1,4 +1,4 @@ -import React, { useState, useEffect } from "react"; +import React, { useEffect, useState } from "react"; import { Checkbox, CheckboxGroup, @@ -12,7 +12,6 @@ import { FlexGrid, Row, Column, - FilterableMultiSelect } from "@carbon/react"; import "./AdvancedSearchDropdown.scss"; import * as Icons from "@carbon/icons-react"; @@ -58,6 +57,10 @@ const AdvancedSearchDropdown: React.FC = () => { } }, [filters.orgUnit, filters.category]); + // const handleFilterChange = (updatedFilters: Partial) => { + // const newFilters = { ...filters, ...updatedFilters }; + // setFilters(newFilters); + // }; const handleFilterChange = (updatedFilters: Partial) => { const newFilters = { ...filters, ...updatedFilters }; setFilters(newFilters); @@ -112,6 +115,12 @@ const AdvancedSearchDropdown: React.FC = () => { value: item.value, })) || []; + const blockStatusItems = + data.blockStatuses?.map((item: any) => ({ + text: item.label, + value: item.value, + })) || []; + return (
@@ -153,8 +162,15 @@ const AdvancedSearchDropdown: React.FC = () => { - item.value === filters.orgUnit + ) + : "" + } id="orgunit-multiselect" className="multi-select" titleText="Org Unit" @@ -167,15 +183,23 @@ const AdvancedSearchDropdown: React.FC = () => { /> - (item ? `${item.value} - ${item.text}` : "")} + itemToString={(item: any) => (item ? item.text : "")} + onChange={(e: any) => + handleFilterChange({ category: e.selectedItem.value }) + } + label="Enter or choose a category" + selectedItem={ + filters.category + ? categoryItems.find( + (item: any) => item.value === filters.category + ) + : "" + } selectionFeedback="top-after-reopen" - onChange={(e: any) => handleMultiSelectChange("category", e.selectedItems)} selectedItems={selectedCategories} sortItems={sortItems} /> @@ -193,6 +217,7 @@ const AdvancedSearchDropdown: React.FC = () => { > = () => { - - + + + = ({}) => { const [activeFilters, setActiveFilters] = useState([]); - const { filters, clearFilters, clearIndividualField } = useOpeningsSearch(); + const { filters, clearFilters, } = useOpeningsSearch(); useEffect(() => { setActiveFilters(getActiveFilters(filters)); diff --git a/frontend/src/contexts/search/OpeningsSearch.tsx b/frontend/src/contexts/search/OpeningsSearch.tsx index 24f2467d..0cddcc22 100644 --- a/frontend/src/contexts/search/OpeningsSearch.tsx +++ b/frontend/src/contexts/search/OpeningsSearch.tsx @@ -37,7 +37,6 @@ export const OpeningsSearchProvider: React.FC<{ children: ReactNode }> = ({ chil // Function to clear individual filter field by key const clearIndividualField = (key: string) => { - console.log("Clearing individual field", key); setFilters((prevFilters) => ({ ...prevFilters, [key]: defaultFilters[key as keyof typeof defaultFilters], @@ -60,4 +59,4 @@ export const useOpeningsSearch = (): OpeningsSearchContextProps => { throw new Error('useOpeningsSearch must be used within an OpeningsSearchProvider'); } return context; -}; +}; \ No newline at end of file diff --git a/frontend/src/index.tsx b/frontend/src/index.tsx index ee654df5..b25a64a9 100644 --- a/frontend/src/index.tsx +++ b/frontend/src/index.tsx @@ -2,6 +2,7 @@ window.global ||= window; import React from 'react'; import './index.css'; import { ClassPrefix } from '@carbon/react'; +import { Provider } from 'react-redux' import App from './App'; import { ThemePreference } from './utils/ThemePreference'; import { createRoot } from 'react-dom/client'; @@ -14,7 +15,6 @@ import amplifyconfig from './amplifyconfiguration'; import { CookieStorage } from 'aws-amplify/utils'; import { cognitoUserPoolsTokenProvider } from 'aws-amplify/auth/cognito'; import { AuthProvider } from './contexts/AuthProvider'; -import { NotificationProvider } from './contexts/NotificationProvider'; const container: HTMLElement | null = document.getElementById('root'); if (container) { @@ -53,14 +53,8 @@ if (container) { - - - - - - - - + + diff --git a/frontend/src/types/AdvancedSearchDropdownProps.ts b/frontend/src/types/AdvancedSearchDropdownProps.ts new file mode 100644 index 00000000..f6ba4063 --- /dev/null +++ b/frontend/src/types/AdvancedSearchDropdownProps.ts @@ -0,0 +1,7 @@ +import { OpeningSearchFilter } from '../types/OpeningSearchFilter'; + +export interface AdvancedSearchDropdownProps { + toggleShowFilters: () => void; // Function to be passed as a prop + handleFilterChange: (updatedFilters: Partial) => void; + handleCheckboxChange : (value: string, group: string) => void; + } From 5884bbe948083b7360c0193765f033a36226b588 Mon Sep 17 00:00:00 2001 From: Greg Pascucci Date: Thu, 21 Nov 2024 09:19:33 -0800 Subject: [PATCH 06/13] cleaned up merge --- frontend/src/index.tsx | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/frontend/src/index.tsx b/frontend/src/index.tsx index b25a64a9..34b3fec6 100644 --- a/frontend/src/index.tsx +++ b/frontend/src/index.tsx @@ -15,6 +15,7 @@ import amplifyconfig from './amplifyconfiguration'; import { CookieStorage } from 'aws-amplify/utils'; import { cognitoUserPoolsTokenProvider } from 'aws-amplify/auth/cognito'; import { AuthProvider } from './contexts/AuthProvider'; +import { NotificationProvider } from './contexts/NotificationProvider'; const container: HTMLElement | null = document.getElementById('root'); if (container) { @@ -53,8 +54,14 @@ if (container) { - - + + + + + + + + From 0d5f2da4b18072269fd50d9160eee9e76bbbba71 Mon Sep 17 00:00:00 2001 From: Greg Pascucci Date: Thu, 21 Nov 2024 14:17:42 -0800 Subject: [PATCH 07/13] udpates for advanced search acreen' --- .../AdvancedSearchDropdown.scss | 71 ++- .../Openings/AdvancedSearchDropdown/index.tsx | 564 +++++++++--------- 2 files changed, 342 insertions(+), 293 deletions(-) diff --git a/frontend/src/components/SilvicultureSearch/Openings/AdvancedSearchDropdown/AdvancedSearchDropdown.scss b/frontend/src/components/SilvicultureSearch/Openings/AdvancedSearchDropdown/AdvancedSearchDropdown.scss index a3622385..45a18276 100644 --- a/frontend/src/components/SilvicultureSearch/Openings/AdvancedSearchDropdown/AdvancedSearchDropdown.scss +++ b/frontend/src/components/SilvicultureSearch/Openings/AdvancedSearchDropdown/AdvancedSearchDropdown.scss @@ -11,20 +11,79 @@ .advanced-search-container{ box-shadow: 0px 2px 6px 0px #0000004D; } + + legend { + font-size: 16px; + line-height: 20px; + letter-spacing: 0.16px; + color: var(--#{vars.$bcgov-prefix}-text-primary); + } + + label { + font-size: 16px; + line-height: 20px; + letter-spacing: 0.16px; + color: var(--#{vars.$bcgov-prefix}-text-primary); + } + input{ background-color: var(--bx-field-01); border-bottom: 1px solid var(--bx-border-strong-01); } + + input::placeholder { + color: var(--#{vars.$bcgov-prefix}-text-secondary); + } + input:disabled::placeholder { + color: #e311114d //var(--#{vars.$bcgov-prefix}-text-secondary); + } + + #tooltip { + border: 0; + background-color: var(--#{vars.$bcgov-prefix}-layer-02); + } + + .bx--date-picker-container { + background-color: red; + } + + .bx--list-box__wrapper { + background-color: blueviolet; + } + + #date-type-dropdown { + width: 40%; + background-color: green; + border-bottom: 1px solid var(--bx-border-strong-01); + } + + .bx--combo-box { + background-color: yellow; + width: 40%; + } + + .bx--list-box { + background-color: pink; + } + + #start-date-picker { + float: left; + width: 30%; + } + + #end-date-picker { + float: right; + width: 30%; + } + + #start-date-picker-input-id, #end-date-picker-input-id { + width: 50%; + } + .multi-select .bx--list-box__field--wrapper{ background-color: var(--bx-field-01); border-bottom: 1px solid var(--bx-border-strong-01); } - -} - -#date-type-dropdown { - background-color: var(--bx-field-01); - border-bottom: 1px solid var(--bx-border-strong-01); } .horizontal-checkbox-group { diff --git a/frontend/src/components/SilvicultureSearch/Openings/AdvancedSearchDropdown/index.tsx b/frontend/src/components/SilvicultureSearch/Openings/AdvancedSearchDropdown/index.tsx index 04dc5ed7..6d0135a4 100644 --- a/frontend/src/components/SilvicultureSearch/Openings/AdvancedSearchDropdown/index.tsx +++ b/frontend/src/components/SilvicultureSearch/Openings/AdvancedSearchDropdown/index.tsx @@ -122,300 +122,290 @@ const AdvancedSearchDropdown: React.FC = () => { })) || []; return ( -
- - - - - - handleCheckboxChange( - "Openings created by me", - "openingFilters" - ) - } - /> - - handleCheckboxChange( - "FRPA section 108", - "openingFilters" - ) - } - /> - - - - - - - item.value === filters.orgUnit - ) - : "" + + + + + + handleCheckboxChange( + "Openings created by me", + "openingFilters" + ) } - id="orgunit-multiselect" - className="multi-select" - titleText="Org Unit" - items={orgUnitItems} - itemToString={(item: TextValueData) => (item ? `${item.value} - ${item.text}` : "")} - selectionFeedback="top-after-reopen" - onChange={(e: any) => handleMultiSelectChange("orgUnit", e.selectedItems)} - selectedItems={selectedOrgUnits} - sortItems={sortItems} /> - - - (item ? item.text : "")} - onChange={(e: any) => - handleFilterChange({ category: e.selectedItem.value }) - } - label="Enter or choose a category" - selectedItem={ - filters.category - ? categoryItems.find( - (item: any) => item.value === filters.category - ) - : "" + + handleCheckboxChange( + "FRPA section 108", + "openingFilters" + ) } - selectionFeedback="top-after-reopen" - selectedItems={selectedCategories} - sortItems={sortItems} /> - - - - - -
-
- Client acronym - - - - - handleFilterChange({ clientAcronym: e.target.value }) - } - /> -
-
- - handleFilterChange({ clientLocationCode: e.target.value }) - } - /> -
-
- - - -
- - handleFilterChange({ cutBlock: e.target.value }) - } - /> - - handleFilterChange({ cuttingPermit: e.target.value }) - } - /> -
- - - - - -
- - handleFilterChange({ timberMark: e.target.value }) - } - /> -
- - -
- (item ? item.text : "")} - onChange={(e: any) => - handleFilterChange({ dateType: e.selectedItem === null ? "" : e.selectedItem.value }) - } - // selectedItem={ - // filters.dateType - // ? dateTypeItems.find( - // (item: any) => item.value === filters.dateType - // ) - // : "" - // } - label="Date type" - /> - { - if (dates.length > 0) { - handleFilterChange({ - startDate: dates[0].toISOString().slice(0, 10), - }); - } - }} - onClose={(dates: [Date]) => { - if (dates.length > 0) { - handleFilterChange({ - startDate: dates[0].toISOString().slice(0, 10), - }); - } - }} - readOnly={!filters.dateType} - > - - - { - if (dates.length > 0) { - handleFilterChange({ - endDate: dates[0].toISOString().slice(0, 10), - }); - } - }} - onClose={(dates: [Date]) => { - if (dates.length > 0) { - handleFilterChange({ - endDate: dates[0].toISOString().slice(0, 10), - }); - } - }} - readOnly={!filters.dateType} + + + + + + + + + item.value === filters.orgUnit + ) + : "" + } + id="orgunit-multiselect" + className="" + titleText="Org Unit" + items={orgUnitItems} + itemToString={(item: TextValueData) => (item ? `${item.value} - ${item.text}` : "")} + selectionFeedback="top-after-reopen" + onChange={(e: any) => handleMultiSelectChange("orgUnit", e.selectedItems)} + selectedItems={selectedOrgUnits} + sortItems={sortItems} + /> + + + (item ? item.text : "")} + onChange={(e: any) => + handleFilterChange({ category: e.selectedItem.value }) + } + label="Enter or choose a category" + selectedItem={ + filters.category + ? categoryItems.find( + (item: any) => item.value === filters.category + ) + : "" + } + selectionFeedback="top-after-reopen" + selectedItems={selectedCategories} + sortItems={sortItems} + /> + + + + + + + + Client acronym + - - -
- - - - - - - - - - - + + + + } + className="" + value={filters.clientAcronym} + onChange={(e: any) => + handleFilterChange({ clientAcronym: e.target.value }) + } + /> + + + + handleFilterChange({ clientLocationCode: e.target.value }) + } + /> + + + + handleFilterChange({ cutBlock: e.target.value }) + } + /> + + + + handleFilterChange({ cuttingPermit: e.target.value }) + } + /> + + + + + handleFilterChange({ timberMark: e.target.value }) + } + /> + + + (item ? item.text : "")} + onChange={(e: any) => + handleFilterChange({ dateType: e.selectedItem === null ? "" : e.selectedItem.value }) + } + label="Date type" + /> - + { + if (dates.length > 0) { + handleFilterChange({ + startDate: dates[0].toISOString().slice(0, 10), + }); + } + }} + onClose={(dates: [Date]) => { + if (dates.length > 0) { + handleFilterChange({ + startDate: dates[0].toISOString().slice(0, 10), + }); + } + }} + disabled={!filters.dateType} + enabled={filters.dateType} + readOnly={!filters.dateType} + > + + + { + if (dates.length > 0) { + handleFilterChange({ + endDate: dates[0].toISOString().slice(0, 10), + }); + } + }} + onClose={(dates: [Date]) => { + if (dates.length > 0) { + handleFilterChange({ + endDate: dates[0].toISOString().slice(0, 10), + }); + } + }} + readOnly={!filters.dateType} + > + + + + + + + + + + + + handleCheckboxChange("DFT", "status")} + /> + handleCheckboxChange("APP", "status")} + /> + handleCheckboxChange("FG", "status")} + /> + handleCheckboxChange("SUB", "status")} + /> + + + - - -
- handleCheckboxChange("DFT", "status")} - /> - handleCheckboxChange("APP", "status")} - /> - handleCheckboxChange("FG", "status")} - /> - handleCheckboxChange("SUB", "status")} - /> -
- - - - -
+ + + + + ); }; From 8191d2e055b9618576571e6af177de4c2d7ac18a Mon Sep 17 00:00:00 2001 From: Greg Pascucci Date: Fri, 22 Nov 2024 14:55:49 -0800 Subject: [PATCH 08/13] first pass of advanced search clean up --- .../AdvancedSearchDropdown.scss | 292 +++++++++--------- .../Openings/AdvancedSearchDropdown/index.tsx | 86 +++--- .../Openings/SearchFilterBar/index.tsx | 2 +- 3 files changed, 178 insertions(+), 202 deletions(-) diff --git a/frontend/src/components/SilvicultureSearch/Openings/AdvancedSearchDropdown/AdvancedSearchDropdown.scss b/frontend/src/components/SilvicultureSearch/Openings/AdvancedSearchDropdown/AdvancedSearchDropdown.scss index 45a18276..2781c7f6 100644 --- a/frontend/src/components/SilvicultureSearch/Openings/AdvancedSearchDropdown/AdvancedSearchDropdown.scss +++ b/frontend/src/components/SilvicultureSearch/Openings/AdvancedSearchDropdown/AdvancedSearchDropdown.scss @@ -3,162 +3,154 @@ @use '@carbon/type'; .advanced-search-dropdown { - background-color: var(--#{vars.$bcgov-prefix}-layer-02); - position: absolute; - z-index: 2; - width: 65.66%; - //these are for the nested elements - .advanced-search-container{ - box-shadow: 0px 2px 6px 0px #0000004D; - } - - legend { - font-size: 16px; - line-height: 20px; - letter-spacing: 0.16px; - color: var(--#{vars.$bcgov-prefix}-text-primary); - } - - label { - font-size: 16px; - line-height: 20px; - letter-spacing: 0.16px; - color: var(--#{vars.$bcgov-prefix}-text-primary); - } - - input{ - background-color: var(--bx-field-01); - border-bottom: 1px solid var(--bx-border-strong-01); - } - - input::placeholder { - color: var(--#{vars.$bcgov-prefix}-text-secondary); - } - input:disabled::placeholder { - color: #e311114d //var(--#{vars.$bcgov-prefix}-text-secondary); - } - - #tooltip { - border: 0; - background-color: var(--#{vars.$bcgov-prefix}-layer-02); - } - - .bx--date-picker-container { - background-color: red; - } - - .bx--list-box__wrapper { - background-color: blueviolet; - } - - #date-type-dropdown { - width: 40%; - background-color: green; - border-bottom: 1px solid var(--bx-border-strong-01); - } - - .bx--combo-box { - background-color: yellow; - width: 40%; - } - - .bx--list-box { - background-color: pink; - } - - #start-date-picker { - float: left; - width: 30%; - } - - #end-date-picker { - float: right; - width: 30%; - } - - #start-date-picker-input-id, #end-date-picker-input-id { - width: 50%; - } - - .multi-select .bx--list-box__field--wrapper{ - background-color: var(--bx-field-01); - border-bottom: 1px solid var(--bx-border-strong-01); - } -} + background-color: var(--#{vars.$bcgov-prefix}-layer-02); + padding-top: 20px; + padding-bottom: 20px; + padding-right: 20px; + position: absolute; + z-index: 2; + width: 75%; + + //these are for the nested elements + .advanced-search-container { + box-shadow: 0px 2px 6px 0px #0000004D; + } -.horizontal-checkbox-group { - display: flex; - flex-wrap: wrap; - max-width: 462px; - - .#{vars.$bcgov-prefix}--checkbox-label-text{ - font-size: 14px; - line-height: 18px; - letter-spacing:0.16px; - margin-right: 16px; - color: var(--bx-text-primary); - } -} + legend { + font-size: 16px; + line-height: 20px; + letter-spacing: 0.16px; + color: var(--bx-text-primary); + white-space: nowrap; + } -.date-type-col{ - padding: 0px; - color:aqua; - padding-left: 16px; -} -.date-selectors-col{ - padding-left: 0px; -} + label { + font-size: 16px; + line-height: 20px; + letter-spacing: 0.16px; + white-space: nowrap; + color: var(--#{vars.$bcgov-prefix}-text-primary); + } + + .bx--row { + padding: 5px; + } + + .bx--col-sm-2 { + padding-right: 10px; + } + + .bx--col-lg-4 { + padding-right: 10px; + } + + .bx--col-md-4 { + padding-right: 10px; + } -@media only screen and (min-width: 320px) { - .advanced-search-dropdown { - width: 93.5%; - } - .date-type-col{ - padding: 0px; - padding-left: 16px; - padding-right: 16px; - } - .date-selectors-col{ - padding-left: 16px; - padding-top:8px; - } - .flex-status-list{ - flex-direction: column; - } + input { + background-color: var(--bx-field-01); + border-bottom: 1px solid var(--bx-border-strong-01); } - /* Medium - Up to 672px */ - @media only screen and (min-width: 672px) { - .advanced-search-dropdown { - width: 96.6%; - } - .flex-status-list{ - flex-direction: column; - } - + + input::placeholder { + color: var(--#{vars.$bcgov-prefix}-text-secondary); + } + + input:disabled::placeholder { + color: var(--#{vars.$bcgov-prefix}-text-secondary); + } + + .bx--label--disabled { + color: var(--#{vars.$bcgov-prefix}-text-secondary); } - /* Large - Up to 1056px */ - @media only screen and (min-width: 1056px) { - .advanced-search-dropdown { - width: 56.3%; - } - .flex-status-list{ - flex-direction: row; - } + + #tooltip { + border: 0; + padding-bottom: 0px; + padding-top: 0px; + background-color: var(--#{vars.$bcgov-prefix}-layer-02); } - - /* Max - Up to 1584px */ - @media only screen and (min-width: 1584px) { - .advanced-search-dropdown { - width: 60.66%; - } - .date-selectors-col{ - padding: 0px; - } + + .multi-select .bx--list-box__field--wrapper { + background-color: var(--bx-field-01); + border-bottom: 1px solid var(--bx-border-strong-01); } - /* Extra Max - Up to 1784px */ - @media only screen and (min-width: 1784px) { - .advanced-search-dropdown { - width: 70.66%; - } +} + +.horizontal-checkbox-group { + display: flex; + flex-wrap: wrap; + max-width: 462px; + + .#{vars.$bcgov-prefix}--checkbox-label-text { + font-size: 14px; + line-height: 18px; + letter-spacing: 0.16px; + margin-right: 16px; + color: var(--bx-text-primary); } +} + +.date-type-col { + padding: 0px; + color: aqua; + padding-left: 16px; +} + +.date-selectors-col { + padding-left: 0px; +} +// @media only screen and (min-width: 320px) { +// .advanced-search-dropdown { +// width: 93.5%; +// } +// .date-type-col{ +// padding: 0px; +// padding-left: 16px; +// padding-right: 16px; +// } +// .date-selectors-col{ +// padding-left: 16px; +// padding-top:8px; +// } +// .flex-status-list{ +// flex-direction: column; +// } +// } +// /* Medium - Up to 672px */ +// @media only screen and (min-width: 672px) { +// .advanced-search-dropdown { +// width: 96.6%; +// } +// .flex-status-list{ +// flex-direction: column; +// } + +// } +// /* Large - Up to 1056px */ +// @media only screen and (min-width: 1056px) { +// .advanced-search-dropdown { +// width: 56.3%; +// } +// .flex-status-list{ +// flex-direction: row; +// } +// } + +// /* Max - Up to 1584px */ +// @media only screen and (min-width: 1584px) { +// .advanced-search-dropdown { +// width: 80%; +// } +// .date-selectors-col{ +// padding: 0px; +// } +// } +// /* Extra Max - Up to 1784px */ +// @media only screen and (min-width: 1784px) { +// .advanced-search-dropdown { +// width: 70.66%; +// } +// } \ No newline at end of file diff --git a/frontend/src/components/SilvicultureSearch/Openings/AdvancedSearchDropdown/index.tsx b/frontend/src/components/SilvicultureSearch/Openings/AdvancedSearchDropdown/index.tsx index 6d0135a4..8cfd82e7 100644 --- a/frontend/src/components/SilvicultureSearch/Openings/AdvancedSearchDropdown/index.tsx +++ b/frontend/src/components/SilvicultureSearch/Openings/AdvancedSearchDropdown/index.tsx @@ -122,9 +122,9 @@ const AdvancedSearchDropdown: React.FC = () => { })) || []; return ( - + - + = () => { /> - - - - - + + = () => { sortItems={sortItems} /> - + = () => { sortItems={sortItems} /> - - - - - + + - Client acronym - - - + Client acronym + + + } className="" @@ -232,9 +227,9 @@ const AdvancedSearchDropdown: React.FC = () => { onChange={(e: any) => handleFilterChange({ clientAcronym: e.target.value }) } - /> + /> - + = () => { } /> - + = () => { } /> - + = () => { } /> - - + + = () => { } /> - - + (item ? item.text : "")} @@ -291,10 +285,10 @@ const AdvancedSearchDropdown: React.FC = () => { } label="Date type" /> - + + { if (dates.length > 0) { handleFilterChange({ @@ -314,9 +308,8 @@ const AdvancedSearchDropdown: React.FC = () => { readOnly={!filters.dateType} > = () => { value={formatDateForDatePicker(filters.startDate)} /> - + + { if (dates.length > 0) { handleFilterChange({ @@ -347,8 +341,7 @@ const AdvancedSearchDropdown: React.FC = () => { readOnly={!filters.dateType} > = () => { value={formatDateForDatePicker(filters.endDate)} /> - - - - - + = () => { /> - - - - - ); diff --git a/frontend/src/components/SilvicultureSearch/Openings/SearchFilterBar/index.tsx b/frontend/src/components/SilvicultureSearch/Openings/SearchFilterBar/index.tsx index 06ee6199..ae260974 100644 --- a/frontend/src/components/SilvicultureSearch/Openings/SearchFilterBar/index.tsx +++ b/frontend/src/components/SilvicultureSearch/Openings/SearchFilterBar/index.tsx @@ -9,7 +9,7 @@ interface SearchFilterBarProps { const SearchFilterBar: React.FC = ({}) => { const [activeFilters, setActiveFilters] = useState([]); - const { filters, clearFilters, } = useOpeningsSearch(); + const { filters, clearFilters, clearIndividualField} = useOpeningsSearch(); useEffect(() => { setActiveFilters(getActiveFilters(filters)); From 843acb5ff78b324a408168bc61160258a1e4b6d6 Mon Sep 17 00:00:00 2001 From: Greg Pascucci Date: Thu, 28 Nov 2024 09:40:17 -0800 Subject: [PATCH 09/13] removed advanced drop down props typea --- frontend/src/types/AdvancedSearchDropdownProps.ts | 7 ------- 1 file changed, 7 deletions(-) delete mode 100644 frontend/src/types/AdvancedSearchDropdownProps.ts diff --git a/frontend/src/types/AdvancedSearchDropdownProps.ts b/frontend/src/types/AdvancedSearchDropdownProps.ts deleted file mode 100644 index f6ba4063..00000000 --- a/frontend/src/types/AdvancedSearchDropdownProps.ts +++ /dev/null @@ -1,7 +0,0 @@ -import { OpeningSearchFilter } from '../types/OpeningSearchFilter'; - -export interface AdvancedSearchDropdownProps { - toggleShowFilters: () => void; // Function to be passed as a prop - handleFilterChange: (updatedFilters: Partial) => void; - handleCheckboxChange : (value: string, group: string) => void; - } From ac83cb34e6e3ac5bc1ad12cc176bae93475cbc97 Mon Sep 17 00:00:00 2001 From: Greg Pascucci Date: Thu, 28 Nov 2024 09:44:17 -0800 Subject: [PATCH 10/13] removed redux --- frontend/src/index.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/frontend/src/index.tsx b/frontend/src/index.tsx index 34b3fec6..875984a9 100644 --- a/frontend/src/index.tsx +++ b/frontend/src/index.tsx @@ -2,7 +2,6 @@ window.global ||= window; import React from 'react'; import './index.css'; import { ClassPrefix } from '@carbon/react'; -import { Provider } from 'react-redux' import App from './App'; import { ThemePreference } from './utils/ThemePreference'; import { createRoot } from 'react-dom/client'; From 0ce6e42717da32bc2f738d6a9359c0ed480924e7 Mon Sep 17 00:00:00 2001 From: Greg Pascucci Date: Thu, 28 Nov 2024 12:01:50 -0800 Subject: [PATCH 11/13] first pass at date range --- .../AdvancedSearchDropdown.scss | 29 +++------ .../Openings/AdvancedSearchDropdown/index.tsx | 59 ++++++++++--------- 2 files changed, 38 insertions(+), 50 deletions(-) diff --git a/frontend/src/components/SilvicultureSearch/Openings/AdvancedSearchDropdown/AdvancedSearchDropdown.scss b/frontend/src/components/SilvicultureSearch/Openings/AdvancedSearchDropdown/AdvancedSearchDropdown.scss index 2781c7f6..df15b597 100644 --- a/frontend/src/components/SilvicultureSearch/Openings/AdvancedSearchDropdown/AdvancedSearchDropdown.scss +++ b/frontend/src/components/SilvicultureSearch/Openings/AdvancedSearchDropdown/AdvancedSearchDropdown.scss @@ -9,13 +9,8 @@ padding-right: 20px; position: absolute; z-index: 2; - width: 75%; - - //these are for the nested elements - .advanced-search-container { - box-shadow: 0px 2px 6px 0px #0000004D; - } - + box-shadow: 0px 2px 6px 0px #0000004D; + legend { font-size: 16px; line-height: 20px; @@ -36,18 +31,20 @@ padding: 5px; } - .bx--col-sm-2 { + .orgUnitCol { padding-right: 10px; } - .bx--col-lg-4 { + .clientLocationCodeCol { padding-right: 10px; } - - .bx--col-md-4 { + + .timeberMarkCol { padding-right: 10px; } + + input { background-color: var(--bx-field-01); border-bottom: 1px solid var(--bx-border-strong-01); @@ -92,16 +89,6 @@ } } -.date-type-col { - padding: 0px; - color: aqua; - padding-left: 16px; -} - -.date-selectors-col { - padding-left: 0px; -} - // @media only screen and (min-width: 320px) { // .advanced-search-dropdown { // width: 93.5%; diff --git a/frontend/src/components/SilvicultureSearch/Openings/AdvancedSearchDropdown/index.tsx b/frontend/src/components/SilvicultureSearch/Openings/AdvancedSearchDropdown/index.tsx index 8cfd82e7..993c1f65 100644 --- a/frontend/src/components/SilvicultureSearch/Openings/AdvancedSearchDropdown/index.tsx +++ b/frontend/src/components/SilvicultureSearch/Openings/AdvancedSearchDropdown/index.tsx @@ -160,7 +160,7 @@ const AdvancedSearchDropdown: React.FC = () => { - + = () => { } /> - + = () => { /> - + = () => { } /> - + = () => { label="Date type" /> - - + { + if (dates.length === 2) { + handleFilterChange({ + startDate: dates[0].toISOString().slice(0, 10), + endDate: dates[1].toISOString().slice(0, 10), + }); + } + }} + > + + + + {/* { if (dates.length > 0) { handleFilterChange({ @@ -319,27 +341,6 @@ const AdvancedSearchDropdown: React.FC = () => { enabled={filters.dateType} value={formatDateForDatePicker(filters.startDate)} /> - - - - { - if (dates.length > 0) { - handleFilterChange({ - endDate: dates[0].toISOString().slice(0, 10), - }); - } - }} - onClose={(dates: [Date]) => { - if (dates.length > 0) { - handleFilterChange({ - endDate: dates[0].toISOString().slice(0, 10), - }); - } - }} - readOnly={!filters.dateType} - > = () => { readOnly={!filters.dateType} value={formatDateForDatePicker(filters.endDate)} /> - + */} From b4c3d49f61c52ee991eb64c9182dfe4d089a8139 Mon Sep 17 00:00:00 2001 From: Greg Pascucci Date: Thu, 28 Nov 2024 12:07:34 -0800 Subject: [PATCH 12/13] first pass at date range --- .../AdvancedSearchDropdown.scss | 15 --------------- .../Openings/AdvancedSearchDropdown/index.tsx | 1 + 2 files changed, 1 insertion(+), 15 deletions(-) diff --git a/frontend/src/components/SilvicultureSearch/Openings/AdvancedSearchDropdown/AdvancedSearchDropdown.scss b/frontend/src/components/SilvicultureSearch/Openings/AdvancedSearchDropdown/AdvancedSearchDropdown.scss index df15b597..25e5204f 100644 --- a/frontend/src/components/SilvicultureSearch/Openings/AdvancedSearchDropdown/AdvancedSearchDropdown.scss +++ b/frontend/src/components/SilvicultureSearch/Openings/AdvancedSearchDropdown/AdvancedSearchDropdown.scss @@ -44,7 +44,6 @@ } - input { background-color: var(--bx-field-01); border-bottom: 1px solid var(--bx-border-strong-01); @@ -75,20 +74,6 @@ } } -.horizontal-checkbox-group { - display: flex; - flex-wrap: wrap; - max-width: 462px; - - .#{vars.$bcgov-prefix}--checkbox-label-text { - font-size: 14px; - line-height: 18px; - letter-spacing: 0.16px; - margin-right: 16px; - color: var(--bx-text-primary); - } -} - // @media only screen and (min-width: 320px) { // .advanced-search-dropdown { // width: 93.5%; diff --git a/frontend/src/components/SilvicultureSearch/Openings/AdvancedSearchDropdown/index.tsx b/frontend/src/components/SilvicultureSearch/Openings/AdvancedSearchDropdown/index.tsx index 993c1f65..8cacec12 100644 --- a/frontend/src/components/SilvicultureSearch/Openings/AdvancedSearchDropdown/index.tsx +++ b/frontend/src/components/SilvicultureSearch/Openings/AdvancedSearchDropdown/index.tsx @@ -280,6 +280,7 @@ const AdvancedSearchDropdown: React.FC = () => { titleText="Date type" items={dateTypeItems} itemToString={(item: any) => (item ? item.text : "")} + onChange={(e: any) => handleFilterChange({ dateType: e.selectedItem === null ? "" : e.selectedItem.value }) } From d0d05b49f340b1831d47369b2a56180035ddf72c Mon Sep 17 00:00:00 2001 From: Greg Pascucci Date: Fri, 29 Nov 2024 08:24:26 -0800 Subject: [PATCH 13/13] fied reviewed comments --- backend/openshift.deploy.yml | 2 +- .../SilvicultureSearch/Openings/OpeningsSearchBar/index.tsx | 1 - 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/backend/openshift.deploy.yml b/backend/openshift.deploy.yml index 803637c2..9c35799b 100644 --- a/backend/openshift.deploy.yml +++ b/backend/openshift.deploy.yml @@ -59,7 +59,7 @@ parameters: value: development - name: DATABASE_HOST description: Where the database is hosted - value: 142.34.84.58 #nrcdb03.bcgov + value: nrcdb03.bcgov - name: DATABASE_PORT description: The port to be used for the connection to the database value: "1543" diff --git a/frontend/src/components/SilvicultureSearch/Openings/OpeningsSearchBar/index.tsx b/frontend/src/components/SilvicultureSearch/Openings/OpeningsSearchBar/index.tsx index 4e5ed0e6..7d178604 100644 --- a/frontend/src/components/SilvicultureSearch/Openings/OpeningsSearchBar/index.tsx +++ b/frontend/src/components/SilvicultureSearch/Openings/OpeningsSearchBar/index.tsx @@ -6,7 +6,6 @@ import AdvancedSearchDropdown from "../AdvancedSearchDropdown"; import SearchFilterBar from "../SearchFilterBar"; import { useOpeningsSearch } from "../../../../contexts/search/OpeningsSearch"; import { countActiveFilters } from "../../../../utils/searchUtils"; -import { callbackify } from "util"; import { c } from "vite/dist/node/types.d-aGj9QkWt"; interface IOpeningsSearchBar {