From f6f1a194c8bdef63df70ac2ee41d77aaff501dd1 Mon Sep 17 00:00:00 2001 From: Jason Morais Date: Mon, 6 May 2024 11:57:10 -0400 Subject: [PATCH 01/12] created new popover for filter --- .../service-tickets-list.container.tsx | 24 ++-- .../shared/components/filter-popover.tsx | 133 ++++++++++++++++++ 2 files changed, 148 insertions(+), 9 deletions(-) create mode 100644 ui-community/src/components/layouts/shared/components/filter-popover.tsx diff --git a/ui-community/src/components/layouts/members/components/service-tickets-list.container.tsx b/ui-community/src/components/layouts/members/components/service-tickets-list.container.tsx index f80c8d29..cd02caad 100644 --- a/ui-community/src/components/layouts/members/components/service-tickets-list.container.tsx +++ b/ui-community/src/components/layouts/members/components/service-tickets-list.container.tsx @@ -1,21 +1,22 @@ import { FilterOutlined } from '@ant-design/icons'; import { useLazyQuery, useQuery } from '@apollo/client'; -import { Button, Drawer, Input, Skeleton, theme } from 'antd'; +import { Button, Drawer, Input, Skeleton, theme, Popover, Tag } from 'antd'; import { useEffect, useState } from 'react'; import { useParams, useSearchParams } from 'react-router-dom'; import { - GetFilterFromServiceTicketQueryString, - SearchType, - ServiceTicketFilterNames, - ServiceTicketSearchParamKeys + GetFilterFromServiceTicketQueryString, + SearchType, + ServiceTicketFilterNames, + ServiceTicketSearchParamKeys } from '../../../../constants'; import { - MemberNameServiceTicketContainerDocument, - MemberServiceTicketsListContainerSearchServiceTicketsDocument, - ServiceTicketsSearchFilterDetail + MemberNameServiceTicketContainerDocument, + MemberServiceTicketsListContainerSearchServiceTicketsDocument, + ServiceTicketsSearchFilterDetail } from '../../../../generated'; import { SearchDrawerContainer } from '../../shared/components/search-drawer.container'; import { ServiceTicketsList } from './service-tickets-list'; +import { FilterPopover } from '../../shared/components/filter-popover'; const { Search } = Input; @@ -144,7 +145,7 @@ export const ServiceTicketsListContainer: React.FC = () => { ); return ( <> -
+
= () => { onChange={(e) => onChange(e)} enterButton /> + setVisible(false)} open={visible} width={445}> void; +} + +export const FilterPopover: React.FC = (props) => { + const [open, setOpen] = useState(false); + const [filters, setFilters] = useState([]); + + const hide = () => { + setOpen(false); + }; + const handleOpenChange = (newOpen: any) => { + setOpen(newOpen); + }; + const generateFilters = (config: SearchFilterConfigDefinition) => { + const filters: SearchFilterProps[] = []; + config.filters.forEach((filter: any) => { + let newFilter: SearchFilterProps = { + title: filter.title, + options: [], + searchId: filter.searchId, + searchbar: filter.searchbar ?? false + }; + + filter.values.forEach((value: any) => { + const count = + props.searchData.facets[filter.facet[0]].find((facet: FacetDetail) => + filter.handleCount ? filter.handleCount(facet, value) : facet.value === value + )?.count ?? 0; + if (filter.handleBuild) { + filter.handleBuild(newFilter, value, count); + } else { + newFilter.options.push({ + name: value, + count: count, + id: value + }); + } + }); + + filters.push(newFilter); + }); + setFilters(filters); + console.log('yoyo', filters); + }; + + const popoverContent = filters.map((filter) => { + const tagContent = filter.options.map((option) => { + return ( + + {option.name} + + ); + }); + return ( +
+ {filter.title} + {tagContent} +
+ ); + }); + useEffect(() => { + const filterConfig: SearchFilterConfigDefinition = { + filters: [ + // ASSIGNED TO + { + title: 'Assigned To', + searchId: [ServiceTicketSearchParamKeys.AssignedTo], + searchbar: true, + values: props.memberData.membersByCommunityId, + facet: ['assignedToId'], + handleCount: (facet: FacetDetail, value: any) => { + return facet.value === value.id; + }, + handleBuild: (filter: SearchFilterProps, value: any, count: number) => { + filter.options.push({ + name: value.memberName, + count: count, + id: value.id + }); + } + }, + // PRIORITY + { + title: 'Priority', + searchId: [ServiceTicketSearchParamKeys.Priority], + values: ['1', '2', '3', '4', '5'], + facet: ['priority'] + }, + // STATUS + { + title: 'Status', + searchId: [ServiceTicketSearchParamKeys.Status], + values: ['Created', 'Draft', 'Submitted', 'Assigned', 'In Progress', 'Completed', 'Closed'], + facet: ['status'], + handleCount: (facet: FacetDetail, value: any) => { + return facet.value === value.toUpperCase(); + } + } + ] + }; + + generateFilters(filterConfig); + }, []); + + return ( +
+ + + +
+ ); +}; From abbac529f77db24e1275d5c844f88e0b21300c99 Mon Sep 17 00:00:00 2001 From: Jason Morais Date: Tue, 7 May 2024 10:23:05 -0400 Subject: [PATCH 02/12] Add filter information to search params --- .../service-tickets-list.container.tsx | 114 +++++++++++++++--- .../shared/components/filter-popover.tsx | 89 ++++++++++---- 2 files changed, 163 insertions(+), 40 deletions(-) diff --git a/ui-community/src/components/layouts/members/components/service-tickets-list.container.tsx b/ui-community/src/components/layouts/members/components/service-tickets-list.container.tsx index cd02caad..419fa64e 100644 --- a/ui-community/src/components/layouts/members/components/service-tickets-list.container.tsx +++ b/ui-community/src/components/layouts/members/components/service-tickets-list.container.tsx @@ -1,13 +1,15 @@ import { FilterOutlined } from '@ant-design/icons'; import { useLazyQuery, useQuery } from '@apollo/client'; -import { Button, Drawer, Input, Skeleton, theme, Popover, Tag } from 'antd'; +import { Button, Drawer, Input, Skeleton, theme, Popover, Tag, Select } from 'antd'; import { useEffect, useState } from 'react'; import { useParams, useSearchParams } from 'react-router-dom'; import { GetFilterFromServiceTicketQueryString, + SearchParamKeys, SearchType, ServiceTicketFilterNames, - ServiceTicketSearchParamKeys + ServiceTicketSearchParamKeys, + ServiceTicketSortOptions } from '../../../../constants'; import { MemberNameServiceTicketContainerDocument, @@ -19,6 +21,13 @@ import { ServiceTicketsList } from './service-tickets-list'; import { FilterPopover } from '../../shared/components/filter-popover'; const { Search } = Input; +const { Option } = Select; +const columnOptions = ['Title', 'Requestor', 'Assigned To', 'Priority', 'Updated', 'Created']; + +function useForceUpdate() { + const [, setValue] = useState(0); + return () => setValue((value) => value + 1); +} export const ServiceTicketsListContainer: React.FC = () => { const { @@ -28,6 +37,11 @@ export const ServiceTicketsListContainer: React.FC = () => { const [searchParams, setSearchParams] = useSearchParams(); const [searchString, setSearchString] = useState(searchParams.get(ServiceTicketSearchParamKeys.SearchString) ?? ''); const [visible, setVisible] = useState(false); + const [selectedColumns, setSelectedColumns] = useState([]); + const [columnsToDisplay, setColumnsToDisplay] = useState( + searchParams.get(ServiceTicketSearchParamKeys.Column)?.split(',') ?? [] + ); + const forceUpdate = useForceUpdate(); const { data: membersData, @@ -121,6 +135,46 @@ export const ServiceTicketsListContainer: React.FC = () => { setSearchString(e.target.value); }; + const onSelectColumnChanged = (columnName: string) => { + const originalSearchParams = searchParams.get(ServiceTicketSearchParamKeys.Column) ?? ''; + searchParams.set( + ServiceTicketSearchParamKeys.Column, + originalSearchParams.length > 0 + ? searchParams.get(ServiceTicketSearchParamKeys.Column) + ',' + columnName + : columnName + ); + setSearchParams(searchParams); + setColumnsToDisplay([...(columnsToDisplay ?? []), columnName]); + }; + + const onColumnDelete = (columnName: string) => { + const searchParamsString = searchParams.get(ServiceTicketSearchParamKeys.Column)?.split(','); + const newSearchParamsArray: any = []; + searchParamsString?.forEach((searchParam) => { + if (searchParam !== columnName) { + newSearchParamsArray.push(searchParam); + } + }); + + if (newSearchParamsArray.length > 0) { + searchParams.set(ServiceTicketSearchParamKeys.Column, newSearchParamsArray.join(',')); + } else { + searchParams.delete(ServiceTicketSearchParamKeys.Column); + } + setSearchParams(searchParams); + setColumnsToDisplay(columnsToDisplay?.filter((column) => column !== columnName)); + }; + + const onSortChanged = (value: string) => { + if (value) { + searchParams.set(SearchParamKeys.Sort, value); + } else { + searchParams.delete(SearchParamKeys.Sort); + } + + setSearchParams(searchParams); + }; + if (searchServiceTicketsError) { return
{JSON.stringify(searchServiceTicketsError)}
; } @@ -145,11 +199,11 @@ export const ServiceTicketsListContainer: React.FC = () => { ); return ( <> -
+
handleSearch()} value={searchString} onChange={(e) => onChange(e)} @@ -160,16 +214,44 @@ export const ServiceTicketsListContainer: React.FC = () => { memberData={membersData} clearFilter={clearFilter} /> - setVisible(false)} open={visible} width={445}> - - -
+
+ + +
= () => { <> handleSearch()} value={searchString} onChange={(e) => setSearchString(e.target.value)} diff --git a/ui-community/src/components/layouts/shared/components/filter-popover.tsx b/ui-community/src/components/layouts/shared/components/filter-popover.tsx index 27f96110..1c551b3b 100644 --- a/ui-community/src/components/layouts/shared/components/filter-popover.tsx +++ b/ui-community/src/components/layouts/shared/components/filter-popover.tsx @@ -3,6 +3,8 @@ import { useEffect, useState } from 'react'; import { FacetDetail } from '../../../../generated'; import { SearchFilterConfigDefinition, SearchFilterProps } from './search-filter'; import { ServiceTicketSearchParamKeys } from '../../../../constants'; +import { FilterOutlined } from '@ant-design/icons'; +import { useSearchParams } from 'react-router-dom'; interface FilterPopoverProps { searchData: any; @@ -13,10 +15,9 @@ interface FilterPopoverProps { export const FilterPopover: React.FC = (props) => { const [open, setOpen] = useState(false); const [filters, setFilters] = useState([]); + const [checkList, setCheckList] = useState([]); + const [searchParams, setSearchParams] = useSearchParams(); - const hide = () => { - setOpen(false); - }; const handleOpenChange = (newOpen: any) => { setOpen(newOpen); }; @@ -52,26 +53,6 @@ export const FilterPopover: React.FC = (props) => { console.log('yoyo', filters); }; - const popoverContent = filters.map((filter) => { - const tagContent = filter.options.map((option) => { - return ( - - {option.name} - - ); - }); - return ( -
- {filter.title} - {tagContent} -
- ); - }); useEffect(() => { const filterConfig: SearchFilterConfigDefinition = { filters: [ @@ -116,6 +97,63 @@ export const FilterPopover: React.FC = (props) => { generateFilters(filterConfig); }, []); + const getSearchId = (key: string) => { + return filters.filter((filter: any) => filter.options.some((option: any) => option.id === key))[0].searchId[0] + } + + const onSelectCheckbox = (checked: any, key: string) => { + const searchId = getSearchId(key) + if (checked) { + const originalSearchParams = searchParams.get(searchId) ?? ''; + searchParams.set(searchId, originalSearchParams.length > 0 ? searchParams.get(searchId) + ',' + key : key); + setSearchParams(searchParams); + } else { + const searchParamsString = searchParams.get(searchId)?.split(','); + const newSearchParamsArray: any = []; + searchParamsString?.forEach((searchParam) => { + if (searchParam !== key) { + newSearchParamsArray.push(searchParam); + } + }); + searchParams.set(searchId, newSearchParamsArray.join(',')); + if (searchParams.get(searchId) === '') { + searchParams.delete(searchId); + } + setSearchParams(searchParams); + } + const nextSelectedTags = checked ? [...checkList, key] : checkList.filter((t: any) => t !== key); + setCheckList(nextSelectedTags); + }; + + const isChecked = (id: string) => { + return searchParams.get(getSearchId(id))?.split(',').includes(id) ? true : false + }; + + const popoverContent = filters.map((filter) => { + const tagContent = filter.options.map((option) => { + return ( + onSelectCheckbox(e, option.id)} + style={{ borderRadius: '10px', border: '1px solid #4096ff', marginBottom: '5px'}} + > + {option.name} + + ); + }); + return ( +
+ {filter.title} + {tagContent} +
+ ); + }); + return (
= (props) => { open={open} onOpenChange={handleOpenChange} > - +
); From a56c810b138b046c9b80af79003e20ef60331db9 Mon Sep 17 00:00:00 2001 From: Jason Morais Date: Tue, 7 May 2024 10:25:13 -0400 Subject: [PATCH 03/12] removed uneeded information --- .../components/service-tickets-list.container.tsx | 9 +-------- 1 file changed, 1 insertion(+), 8 deletions(-) diff --git a/ui-community/src/components/layouts/members/components/service-tickets-list.container.tsx b/ui-community/src/components/layouts/members/components/service-tickets-list.container.tsx index 419fa64e..042b0e12 100644 --- a/ui-community/src/components/layouts/members/components/service-tickets-list.container.tsx +++ b/ui-community/src/components/layouts/members/components/service-tickets-list.container.tsx @@ -1,12 +1,10 @@ -import { FilterOutlined } from '@ant-design/icons'; import { useLazyQuery, useQuery } from '@apollo/client'; -import { Button, Drawer, Input, Skeleton, theme, Popover, Tag, Select } from 'antd'; +import { Button, Input, Skeleton, theme, Select } from 'antd'; import { useEffect, useState } from 'react'; import { useParams, useSearchParams } from 'react-router-dom'; import { GetFilterFromServiceTicketQueryString, SearchParamKeys, - SearchType, ServiceTicketFilterNames, ServiceTicketSearchParamKeys, ServiceTicketSortOptions @@ -16,7 +14,6 @@ import { MemberServiceTicketsListContainerSearchServiceTicketsDocument, ServiceTicketsSearchFilterDetail } from '../../../../generated'; -import { SearchDrawerContainer } from '../../shared/components/search-drawer.container'; import { ServiceTicketsList } from './service-tickets-list'; import { FilterPopover } from '../../shared/components/filter-popover'; @@ -36,8 +33,6 @@ export const ServiceTicketsListContainer: React.FC = () => { const params = useParams(); const [searchParams, setSearchParams] = useSearchParams(); const [searchString, setSearchString] = useState(searchParams.get(ServiceTicketSearchParamKeys.SearchString) ?? ''); - const [visible, setVisible] = useState(false); - const [selectedColumns, setSelectedColumns] = useState([]); const [columnsToDisplay, setColumnsToDisplay] = useState( searchParams.get(ServiceTicketSearchParamKeys.Column)?.split(',') ?? [] ); @@ -45,8 +40,6 @@ export const ServiceTicketsListContainer: React.FC = () => { const { data: membersData, - loading: memberLoading, - error: memberError } = useQuery(MemberNameServiceTicketContainerDocument, { variables: { communityId: params.communityId ?? '' } // fetchPolicy: 'cache-and-network' From 03ac22a64044b5f1d595b37ed0dbd53983315577 Mon Sep 17 00:00:00 2001 From: Jason Morais Date: Tue, 7 May 2024 10:27:09 -0400 Subject: [PATCH 04/12] fixed empty state for sort --- .../members/components/service-tickets-list.container.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ui-community/src/components/layouts/members/components/service-tickets-list.container.tsx b/ui-community/src/components/layouts/members/components/service-tickets-list.container.tsx index 042b0e12..61f49f04 100644 --- a/ui-community/src/components/layouts/members/components/service-tickets-list.container.tsx +++ b/ui-community/src/components/layouts/members/components/service-tickets-list.container.tsx @@ -214,7 +214,7 @@ export const ServiceTicketsListContainer: React.FC = () => { placeholder="Sort By" allowClear onChange={(value) => onSortChanged(value)} - defaultValue={searchParams.get('sort') ? searchParams.get('sort') : ''} + defaultValue={searchParams.get('sort') ? searchParams.get('sort') : null} > {ServiceTicketSortOptions.map((option) => { return ( From 4bed7c2946e2949ae157e5a72bb7a9514ecdb3f1 Mon Sep 17 00:00:00 2001 From: Jason Morais Date: Tue, 7 May 2024 10:28:56 -0400 Subject: [PATCH 05/12] remove search result --- .../members/components/service-tickets-list.container.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/ui-community/src/components/layouts/members/components/service-tickets-list.container.tsx b/ui-community/src/components/layouts/members/components/service-tickets-list.container.tsx index 61f49f04..002d7053 100644 --- a/ui-community/src/components/layouts/members/components/service-tickets-list.container.tsx +++ b/ui-community/src/components/layouts/members/components/service-tickets-list.container.tsx @@ -253,7 +253,6 @@ export const ServiceTicketsListContainer: React.FC = () => { searchParams={searchParams} setSearchParams={setSearchParams} /> - {SearchResult} ); } From ef4697b08e898ea4bbe4abc3582f87adf3e06a50 Mon Sep 17 00:00:00 2001 From: Jason Morais Date: Tue, 7 May 2024 11:04:39 -0400 Subject: [PATCH 06/12] Small fixes --- .../components/service-tickets-list.container.tsx | 9 ++------- .../layouts/shared/components/filter-popover.tsx | 3 --- 2 files changed, 2 insertions(+), 10 deletions(-) diff --git a/ui-community/src/components/layouts/members/components/service-tickets-list.container.tsx b/ui-community/src/components/layouts/members/components/service-tickets-list.container.tsx index 002d7053..079211f4 100644 --- a/ui-community/src/components/layouts/members/components/service-tickets-list.container.tsx +++ b/ui-community/src/components/layouts/members/components/service-tickets-list.container.tsx @@ -21,10 +21,7 @@ const { Search } = Input; const { Option } = Select; const columnOptions = ['Title', 'Requestor', 'Assigned To', 'Priority', 'Updated', 'Created']; -function useForceUpdate() { - const [, setValue] = useState(0); - return () => setValue((value) => value + 1); -} + export const ServiceTicketsListContainer: React.FC = () => { const { @@ -36,7 +33,6 @@ export const ServiceTicketsListContainer: React.FC = () => { const [columnsToDisplay, setColumnsToDisplay] = useState( searchParams.get(ServiceTicketSearchParamKeys.Column)?.split(',') ?? [] ); - const forceUpdate = useForceUpdate(); const { data: membersData, @@ -142,7 +138,7 @@ export const ServiceTicketsListContainer: React.FC = () => { const onColumnDelete = (columnName: string) => { const searchParamsString = searchParams.get(ServiceTicketSearchParamKeys.Column)?.split(','); - const newSearchParamsArray: any = []; + const newSearchParamsArray: string[] = []; searchParamsString?.forEach((searchParam) => { if (searchParam !== columnName) { newSearchParamsArray.push(searchParam); @@ -235,7 +231,6 @@ export const ServiceTicketsListContainer: React.FC = () => { searchParams.delete(ServiceTicketSearchParamKeys.Column); setSearchParams(searchParams); setColumnsToDisplay(undefined); - forceUpdate(); }} onDeselect={(value: any) => onColumnDelete(value)} > diff --git a/ui-community/src/components/layouts/shared/components/filter-popover.tsx b/ui-community/src/components/layouts/shared/components/filter-popover.tsx index 1c551b3b..1584344f 100644 --- a/ui-community/src/components/layouts/shared/components/filter-popover.tsx +++ b/ui-community/src/components/layouts/shared/components/filter-popover.tsx @@ -15,7 +15,6 @@ interface FilterPopoverProps { export const FilterPopover: React.FC = (props) => { const [open, setOpen] = useState(false); const [filters, setFilters] = useState([]); - const [checkList, setCheckList] = useState([]); const [searchParams, setSearchParams] = useSearchParams(); const handleOpenChange = (newOpen: any) => { @@ -121,8 +120,6 @@ export const FilterPopover: React.FC = (props) => { } setSearchParams(searchParams); } - const nextSelectedTags = checked ? [...checkList, key] : checkList.filter((t: any) => t !== key); - setCheckList(nextSelectedTags); }; const isChecked = (id: string) => { From 7d9697f295110a5417e2a8b01b2d621ca270771e Mon Sep 17 00:00:00 2001 From: Jason Morais Date: Tue, 7 May 2024 13:13:11 -0400 Subject: [PATCH 07/12] abstracted selectors into helpers component --- .../service-tickets-list.container.tsx | 90 +---------------- .../service-ticket-search-helpers.tsx | 97 +++++++++++++++++++ 2 files changed, 101 insertions(+), 86 deletions(-) create mode 100644 ui-community/src/components/layouts/shared/components/service-ticket-search-helpers.tsx diff --git a/ui-community/src/components/layouts/members/components/service-tickets-list.container.tsx b/ui-community/src/components/layouts/members/components/service-tickets-list.container.tsx index 079211f4..54c5e7d6 100644 --- a/ui-community/src/components/layouts/members/components/service-tickets-list.container.tsx +++ b/ui-community/src/components/layouts/members/components/service-tickets-list.container.tsx @@ -1,13 +1,11 @@ import { useLazyQuery, useQuery } from '@apollo/client'; -import { Button, Input, Skeleton, theme, Select } from 'antd'; +import { Input, Skeleton, theme } from 'antd'; import { useEffect, useState } from 'react'; import { useParams, useSearchParams } from 'react-router-dom'; import { GetFilterFromServiceTicketQueryString, - SearchParamKeys, ServiceTicketFilterNames, ServiceTicketSearchParamKeys, - ServiceTicketSortOptions } from '../../../../constants'; import { MemberNameServiceTicketContainerDocument, @@ -16,10 +14,9 @@ import { } from '../../../../generated'; import { ServiceTicketsList } from './service-tickets-list'; import { FilterPopover } from '../../shared/components/filter-popover'; +import { ServiceTicketSearchHelpers } from '../../shared/components/service-ticket-search-helpers'; const { Search } = Input; -const { Option } = Select; -const columnOptions = ['Title', 'Requestor', 'Assigned To', 'Priority', 'Updated', 'Created']; @@ -30,9 +27,7 @@ export const ServiceTicketsListContainer: React.FC = () => { const params = useParams(); const [searchParams, setSearchParams] = useSearchParams(); const [searchString, setSearchString] = useState(searchParams.get(ServiceTicketSearchParamKeys.SearchString) ?? ''); - const [columnsToDisplay, setColumnsToDisplay] = useState( - searchParams.get(ServiceTicketSearchParamKeys.Column)?.split(',') ?? [] - ); + const { data: membersData, @@ -124,46 +119,6 @@ export const ServiceTicketsListContainer: React.FC = () => { setSearchString(e.target.value); }; - const onSelectColumnChanged = (columnName: string) => { - const originalSearchParams = searchParams.get(ServiceTicketSearchParamKeys.Column) ?? ''; - searchParams.set( - ServiceTicketSearchParamKeys.Column, - originalSearchParams.length > 0 - ? searchParams.get(ServiceTicketSearchParamKeys.Column) + ',' + columnName - : columnName - ); - setSearchParams(searchParams); - setColumnsToDisplay([...(columnsToDisplay ?? []), columnName]); - }; - - const onColumnDelete = (columnName: string) => { - const searchParamsString = searchParams.get(ServiceTicketSearchParamKeys.Column)?.split(','); - const newSearchParamsArray: string[] = []; - searchParamsString?.forEach((searchParam) => { - if (searchParam !== columnName) { - newSearchParamsArray.push(searchParam); - } - }); - - if (newSearchParamsArray.length > 0) { - searchParams.set(ServiceTicketSearchParamKeys.Column, newSearchParamsArray.join(',')); - } else { - searchParams.delete(ServiceTicketSearchParamKeys.Column); - } - setSearchParams(searchParams); - setColumnsToDisplay(columnsToDisplay?.filter((column) => column !== columnName)); - }; - - const onSortChanged = (value: string) => { - if (value) { - searchParams.set(SearchParamKeys.Sort, value); - } else { - searchParams.delete(SearchParamKeys.Sort); - } - - setSearchParams(searchParams); - }; - if (searchServiceTicketsError) { return
{JSON.stringify(searchServiceTicketsError)}
; } @@ -204,44 +159,7 @@ export const ServiceTicketsListContainer: React.FC = () => { clearFilter={clearFilter} />
-
- - - -
+ = () => { + const [searchParams, setSearchParams] = useSearchParams(); + const [columnsToDisplay, setColumnsToDisplay] = useState( + searchParams.get(ServiceTicketSearchParamKeys.Column)?.split(',') ?? [] + ); + const columnOptions = ['Title', 'Requestor', 'Assigned To', 'Priority', 'Updated', 'Created']; + const { Option } = Select; + + const onSelectColumnChanged = (columnName: string) => { + const originalSearchParams = searchParams.get(ServiceTicketSearchParamKeys.Column) ?? ''; + searchParams.set( + ServiceTicketSearchParamKeys.Column, + originalSearchParams.length > 0 + ? searchParams.get(ServiceTicketSearchParamKeys.Column) + ',' + columnName + : columnName + ); + setSearchParams(searchParams); + setColumnsToDisplay([...(columnsToDisplay ?? []), columnName]); + }; + + const onColumnDelete = (columnName: string) => { + const searchParamsString = searchParams.get(ServiceTicketSearchParamKeys.Column)?.split(','); + const newSearchParamsArray: string[] = []; + searchParamsString?.forEach((searchParam) => { + if (searchParam !== columnName) { + newSearchParamsArray.push(searchParam); + } + }); + + if (newSearchParamsArray.length > 0) { + searchParams.set(ServiceTicketSearchParamKeys.Column, newSearchParamsArray.join(',')); + } else { + searchParams.delete(ServiceTicketSearchParamKeys.Column); + } + setSearchParams(searchParams); + setColumnsToDisplay(columnsToDisplay?.filter((column) => column !== columnName)); + }; + + const onSortChanged = (value: string) => { + if (value) { + searchParams.set(SearchParamKeys.Sort, value); + } else { + searchParams.delete(SearchParamKeys.Sort); + } + + setSearchParams(searchParams); + }; + function clearFilter(): void { + throw new Error('Function not implemented.'); + } + + return ( +
+ + + +
+ ); +}; From b57d8a5863e0f4cc874c45f397ea85102710c233 Mon Sep 17 00:00:00 2001 From: Jason Morais Date: Tue, 7 May 2024 13:32:57 -0400 Subject: [PATCH 08/12] progress commit admin adding search --- .../service-tickets-list.container.tsx | 82 +++++++++++++++---- 1 file changed, 64 insertions(+), 18 deletions(-) diff --git a/ui-community/src/components/layouts/admin/components/service-tickets-list.container.tsx b/ui-community/src/components/layouts/admin/components/service-tickets-list.container.tsx index c0435ce1..910b3bea 100644 --- a/ui-community/src/components/layouts/admin/components/service-tickets-list.container.tsx +++ b/ui-community/src/components/layouts/admin/components/service-tickets-list.container.tsx @@ -1,32 +1,59 @@ -import { useLazyQuery } from '@apollo/client'; -import { AdminServiceTicketsListContainerSearchServiceTicketsDocument } from '../../../../generated'; +import { useLazyQuery, useQuery } from '@apollo/client'; +import { + AdminServiceTicketsListContainerSearchServiceTicketsDocument, + MemberNameServiceTicketContainerDocument +} from '../../../../generated'; import { ComponentQueryLoader } from '../../../ui/molecules/component-query-loader'; import { ServiceTicketsList } from './service-tickets-list'; -import { useEffect } from 'react'; +import { useEffect, useState } from 'react'; +import { ServiceTicketSearchHelpers } from '../../shared/components/service-ticket-search-helpers'; +import { FilterPopover } from '../../shared/components/filter-popover'; +import { ServiceTicketSearchParamKeys } from '../../../../constants'; +import { useParams, useSearchParams } from 'react-router-dom'; +import { Input } from 'antd'; export const ServiceTicketsListContainer: React.FC = (props) => { + const params = useParams(); + const [searchParams, setSearchParams] = useSearchParams(); + const [searchString, setSearchString] = useState(searchParams.get(ServiceTicketSearchParamKeys.SearchString) ?? ''); + const { Search } = Input; + + const { data: membersData } = useQuery(MemberNameServiceTicketContainerDocument, { + variables: { communityId: params.communityId ?? '' } + }); + const [ getServiceTickets, - { - loading: searchServiceTicketsLoading, - data: searchServiceTicketsData, - error: searchServiceTicketsError - } + { loading: searchServiceTicketsLoading, data: searchServiceTicketsData, error: searchServiceTicketsError } ] = useLazyQuery(AdminServiceTicketsListContainerSearchServiceTicketsDocument, { fetchPolicy: 'network-only' }); + const onChange = (e: any) => { + setSearchString(e.target.value); + }; + useEffect(() => { handleSearch(); - }, [props.communityId]) - + }, [props.communityId]); + + const clearFilter = () => { + searchParams.delete(ServiceTicketSearchParamKeys.SearchString); + searchParams.delete(ServiceTicketSearchParamKeys.AssignedTo); + searchParams.delete(ServiceTicketSearchParamKeys.Status); + searchParams.delete(ServiceTicketSearchParamKeys.Priority); + searchParams.delete(ServiceTicketSearchParamKeys.Column); + searchParams.delete(ServiceTicketSearchParamKeys.Sort); + searchParams.delete(ServiceTicketSearchParamKeys.SavedFilter); + setSearchParams(searchParams); + }; const handleSearch = async () => { await getServiceTickets({ variables: { input: { - searchString: "", + searchString: '', options: { filter: { communityId: props.communityId @@ -35,14 +62,33 @@ export const ServiceTicketsListContainer: React.FC = (props) => { } } }); - } + }; return ( - } - error={searchServiceTicketsError} - /> +
+
+ handleSearch()} + value={searchString} + onChange={(e) => onChange(e)} + enterButton + /> + {/* */} +
+ + } + error={searchServiceTicketsError} + /> +
); }; From bf3fea1650c24130ae090a0f5be604eb689434df Mon Sep 17 00:00:00 2001 From: Jason Morais Date: Tue, 7 May 2024 15:33:14 -0400 Subject: [PATCH 09/12] progress checkin admin - added search features and temporarily turned off count summation --- .../schema/types/service-ticket.resolvers.ts | 2 - .../service-tickets-list.container.graphql | 11 ++ .../service-tickets-list.container.tsx | 121 ++++++++++++++---- .../shared/components/filter-popover.tsx | 12 +- ui-community/src/generated.tsx | 89 +++++++++++++ 5 files changed, 204 insertions(+), 31 deletions(-) diff --git a/data-access/src/graphql/schema/types/service-ticket.resolvers.ts b/data-access/src/graphql/schema/types/service-ticket.resolvers.ts index 59bc52bd..6204edcd 100644 --- a/data-access/src/graphql/schema/types/service-ticket.resolvers.ts +++ b/data-access/src/graphql/schema/types/service-ticket.resolvers.ts @@ -78,8 +78,6 @@ const serviceTicket: Resolvers = { const member = await getMemberForCurrentUser(context, context.communityId); return (await context.applicationServices.serviceTicketDataApi.getServiceTicketsByAssignedTo(context.communityId, member.id)) as ServiceTicket[]; }, - // const searchResults = await context.applicationServices.serviceTicketSearchApi.serviceTicketsSearchByCommunityId(null, communityId) - // return await context.applicationServices.serviceTicketSearchApi.getServiceTicketsSearchResults(searchResults) as ServiceTicket[] serviceTicketsByCommunityId: async (_parent, { communityId }, context, _info) => { return (await context.applicationServices.serviceTicketDataApi.getServiceTicketsByCommunityId(communityId)) as ServiceTicket[]; }, diff --git a/ui-community/src/components/layouts/admin/components/service-tickets-list.container.graphql b/ui-community/src/components/layouts/admin/components/service-tickets-list.container.graphql index d95020bf..245c25cf 100644 --- a/ui-community/src/components/layouts/admin/components/service-tickets-list.container.graphql +++ b/ui-community/src/components/layouts/admin/components/service-tickets-list.container.graphql @@ -47,3 +47,14 @@ fragment AdminServiceTicketsListContainerSearchServiceTicketsResultFields on Ser createdAt updatedAt } + +query AdminMemberNameServiceTicketContainer($communityId: ID!) { + membersByCommunityId(communityId: $communityId) { + ...AdminMembersNameServiceTicketContainerFields + } +} + +fragment AdminMembersNameServiceTicketContainerFields on Member { + id + memberName +} diff --git a/ui-community/src/components/layouts/admin/components/service-tickets-list.container.tsx b/ui-community/src/components/layouts/admin/components/service-tickets-list.container.tsx index 910b3bea..14eded8c 100644 --- a/ui-community/src/components/layouts/admin/components/service-tickets-list.container.tsx +++ b/ui-community/src/components/layouts/admin/components/service-tickets-list.container.tsx @@ -1,30 +1,43 @@ import { useLazyQuery, useQuery } from '@apollo/client'; import { AdminServiceTicketsListContainerSearchServiceTicketsDocument, - MemberNameServiceTicketContainerDocument + AdminMemberNameServiceTicketContainerDocument, + ServiceTicketsSearchFilterDetail } from '../../../../generated'; import { ComponentQueryLoader } from '../../../ui/molecules/component-query-loader'; import { ServiceTicketsList } from './service-tickets-list'; import { useEffect, useState } from 'react'; import { ServiceTicketSearchHelpers } from '../../shared/components/service-ticket-search-helpers'; import { FilterPopover } from '../../shared/components/filter-popover'; -import { ServiceTicketSearchParamKeys } from '../../../../constants'; +import { + GetFilterFromServiceTicketQueryString, + ServiceTicketFilterNames, + ServiceTicketSearchParamKeys +} from '../../../../constants'; import { useParams, useSearchParams } from 'react-router-dom'; -import { Input } from 'antd'; +import { Input, Skeleton, theme } from 'antd'; -export const ServiceTicketsListContainer: React.FC = (props) => { +export const ServiceTicketsListContainer: React.FC = () => { const params = useParams(); const [searchParams, setSearchParams] = useSearchParams(); const [searchString, setSearchString] = useState(searchParams.get(ServiceTicketSearchParamKeys.SearchString) ?? ''); const { Search } = Input; + const { + token: { colorText } + } = theme.useToken(); - const { data: membersData } = useQuery(MemberNameServiceTicketContainerDocument, { + const { data: membersData, loading: memberDataLoading, error: memberDataError } = useQuery(AdminMemberNameServiceTicketContainerDocument, { variables: { communityId: params.communityId ?? '' } }); const [ getServiceTickets, - { loading: searchServiceTicketsLoading, data: searchServiceTicketsData, error: searchServiceTicketsError } + { + called: searchServiceTicketsCalled, + loading: searchServiceTicketsLoading, + data: searchServiceTicketsData, + error: searchServiceTicketsError + } ] = useLazyQuery(AdminServiceTicketsListContainerSearchServiceTicketsDocument, { fetchPolicy: 'network-only' }); @@ -34,36 +47,96 @@ export const ServiceTicketsListContainer: React.FC = (props) => { }; useEffect(() => { - handleSearch(); - }, [props.communityId]); + searchParams.set(ServiceTicketSearchParamKeys.Page, searchParams.get(ServiceTicketSearchParamKeys.Page) ?? '1'); + searchParams.set(ServiceTicketSearchParamKeys.Top, searchParams.get(ServiceTicketSearchParamKeys.Top) ?? '10'); + setSearchParams(searchParams); + (async () => { + await handleSearch(); + })(); + }, []); - const clearFilter = () => { - searchParams.delete(ServiceTicketSearchParamKeys.SearchString); - searchParams.delete(ServiceTicketSearchParamKeys.AssignedTo); - searchParams.delete(ServiceTicketSearchParamKeys.Status); - searchParams.delete(ServiceTicketSearchParamKeys.Priority); - searchParams.delete(ServiceTicketSearchParamKeys.Column); - searchParams.delete(ServiceTicketSearchParamKeys.Sort); - searchParams.delete(ServiceTicketSearchParamKeys.SavedFilter); + useEffect(() => { + (async () => { + await handleSearch(); + })(); + }, [searchParams]); + const handleSearch = async () => { + if (searchString.length > 0) { + searchParams.set(ServiceTicketSearchParamKeys.SearchString, searchString); + } else { + searchParams.delete(ServiceTicketSearchParamKeys.SearchString); + } setSearchParams(searchParams); - }; - const handleSearch = async () => { + const page = parseInt(searchParams.get(ServiceTicketSearchParamKeys.Page) ?? '1') - 1; + const top = parseInt(searchParams.get(ServiceTicketSearchParamKeys.Top) ?? '10'); + const skip = page * top; + + const qsSearchString = searchString; + + let filters: ServiceTicketsSearchFilterDetail = GetFilterFromServiceTicketQueryString(searchParams); + const orderBy = searchParams.get(ServiceTicketSearchParamKeys.Sort) ?? ''; + await getServiceTickets({ variables: { input: { - searchString: '', + searchString: qsSearchString, options: { - filter: { - communityId: props.communityId - } + facets: [ + ServiceTicketFilterNames.Requestor + ',count:1000', + ServiceTicketFilterNames.AssignedTo + ',count:1000', + ServiceTicketFilterNames.Status + ',count:1000', + ServiceTicketFilterNames.Priority + ',count:1000', + ServiceTicketFilterNames.RequestorId + ',count:1000', + ServiceTicketFilterNames.AssignedToId + ',count:1000' + ], + filter: filters, + top: top, + skip: skip, + orderBy: [orderBy] } } } }); }; + const clearFilter = () => { + searchParams.delete(ServiceTicketSearchParamKeys.SearchString); + searchParams.delete(ServiceTicketSearchParamKeys.AssignedTo); + searchParams.delete(ServiceTicketSearchParamKeys.Status); + searchParams.delete(ServiceTicketSearchParamKeys.Priority); + searchParams.delete(ServiceTicketSearchParamKeys.Column); + searchParams.delete(ServiceTicketSearchParamKeys.Sort); + searchParams.delete(ServiceTicketSearchParamKeys.SavedFilter); + + setSearchParams(searchParams); + }; + + if (searchServiceTicketsError || memberDataError) { + return
{JSON.stringify(searchServiceTicketsError ? searchServiceTicketsError: memberDataError)}
; + } + if (searchServiceTicketsLoading || memberDataLoading) { + return ( +
+ +
+ ); + } + if (searchServiceTicketsCalled && searchServiceTicketsData) { + let SearchResult = null; + SearchResult = ( + 
+        {JSON.stringify(searchServiceTicketsData, null, 2)}
+
+ ); + } + return (
@@ -76,11 +149,11 @@ export const ServiceTicketsListContainer: React.FC = (props) => { onChange={(e) => onChange(e)} enterButton /> - {/* */} + />
= (props) => { const [open, setOpen] = useState(false); const [filters, setFilters] = useState([]); const [searchParams, setSearchParams] = useSearchParams(); - + console.log("man", props.memberData) const handleOpenChange = (newOpen: any) => { setOpen(newOpen); }; @@ -31,10 +31,11 @@ export const FilterPopover: React.FC = (props) => { }; filter.values.forEach((value: any) => { - const count = - props.searchData.facets[filter.facet[0]].find((facet: FacetDetail) => - filter.handleCount ? filter.handleCount(facet, value) : facet.value === value - )?.count ?? 0; + // const count = + // props.searchData.facets[filter.facet[0]].find((facet: FacetDetail) => + // filter.handleCount ? filter.handleCount(facet, value) : facet.value === value + // )?.count ?? 0; + const count = 0; if (filter.handleBuild) { filter.handleBuild(newFilter, value, count); } else { @@ -143,6 +144,7 @@ export const FilterPopover: React.FC = (props) => { style={{ display: 'grid', maxWidth: 'max-content', + marginBottom: '10px' }} > {filter.title} diff --git a/ui-community/src/generated.tsx b/ui-community/src/generated.tsx index ae2b907b..16550f18 100644 --- a/ui-community/src/generated.tsx +++ b/ui-community/src/generated.tsx @@ -2744,6 +2744,21 @@ export type AdminServiceTicketsListContainerSearchServiceTicketsResultFieldsFrag updatedAt?: any | null; }; +export type AdminMemberNameServiceTicketContainerQueryVariables = Exact<{ + communityId: Scalars['ID']; +}>; + +export type AdminMemberNameServiceTicketContainerQuery = { + __typename?: 'Query'; + membersByCommunityId?: Array<{ __typename?: 'Member'; id: any; memberName?: string | null } | null> | null; +}; + +export type AdminMembersNameServiceTicketContainerFieldsFragment = { + __typename?: 'Member'; + id: any; + memberName?: string | null; +}; + export type AdminSettingsGeneralContainerCommunityQueryVariables = Exact<{ id: Scalars['ID']; }>; @@ -6427,6 +6442,23 @@ export const AdminServiceTicketSearchFieldsFragmentDoc = { } ] } as unknown as DocumentNode; +export const AdminMembersNameServiceTicketContainerFieldsFragmentDoc = { + kind: 'Document', + definitions: [ + { + kind: 'FragmentDefinition', + name: { kind: 'Name', value: 'AdminMembersNameServiceTicketContainerFields' }, + typeCondition: { kind: 'NamedType', name: { kind: 'Name', value: 'Member' } }, + selectionSet: { + kind: 'SelectionSet', + selections: [ + { kind: 'Field', name: { kind: 'Name', value: 'id' } }, + { kind: 'Field', name: { kind: 'Name', value: 'memberName' } } + ] + } + } + ] +} as unknown as DocumentNode; export const AdminSettingsGeneralContainerCommunityFieldsFragmentDoc = { kind: 'Document', definitions: [ @@ -12161,6 +12193,63 @@ export const AdminServiceTicketsListContainerSearchServiceTicketsDocument = { AdminServiceTicketsListContainerSearchServiceTicketsQuery, AdminServiceTicketsListContainerSearchServiceTicketsQueryVariables >; +export const AdminMemberNameServiceTicketContainerDocument = { + kind: 'Document', + definitions: [ + { + kind: 'OperationDefinition', + operation: 'query', + name: { kind: 'Name', value: 'AdminMemberNameServiceTicketContainer' }, + variableDefinitions: [ + { + kind: 'VariableDefinition', + variable: { kind: 'Variable', name: { kind: 'Name', value: 'communityId' } }, + type: { kind: 'NonNullType', type: { kind: 'NamedType', name: { kind: 'Name', value: 'ID' } } } + } + ], + selectionSet: { + kind: 'SelectionSet', + selections: [ + { + kind: 'Field', + name: { kind: 'Name', value: 'membersByCommunityId' }, + arguments: [ + { + kind: 'Argument', + name: { kind: 'Name', value: 'communityId' }, + value: { kind: 'Variable', name: { kind: 'Name', value: 'communityId' } } + } + ], + selectionSet: { + kind: 'SelectionSet', + selections: [ + { + kind: 'FragmentSpread', + name: { kind: 'Name', value: 'AdminMembersNameServiceTicketContainerFields' } + } + ] + } + } + ] + } + }, + { + kind: 'FragmentDefinition', + name: { kind: 'Name', value: 'AdminMembersNameServiceTicketContainerFields' }, + typeCondition: { kind: 'NamedType', name: { kind: 'Name', value: 'Member' } }, + selectionSet: { + kind: 'SelectionSet', + selections: [ + { kind: 'Field', name: { kind: 'Name', value: 'id' } }, + { kind: 'Field', name: { kind: 'Name', value: 'memberName' } } + ] + } + } + ] +} as unknown as DocumentNode< + AdminMemberNameServiceTicketContainerQuery, + AdminMemberNameServiceTicketContainerQueryVariables +>; export const AdminSettingsGeneralContainerCommunityDocument = { kind: 'Document', definitions: [ From 2ab477604af99750af7eb421e048702efbcc7ca9 Mon Sep 17 00:00:00 2001 From: Jason Morais Date: Wed, 8 May 2024 09:44:39 -0400 Subject: [PATCH 10/12] added functionality for sorting and limiting columns to admin side and added functionality back to back end --- .../cognitive-search/service-ticket.ts | 12 +++++---- .../service-tickets-list.container.tsx | 19 ++++++++++--- .../admin/components/service-tickets-list.tsx | 27 +++++++++++++++++-- .../service-tickets-list.container.tsx | 2 +- .../service-ticket-search-helpers.tsx | 11 ++++---- 5 files changed, 54 insertions(+), 17 deletions(-) diff --git a/data-access/src/app/application-services-impl/cognitive-search/service-ticket.ts b/data-access/src/app/application-services-impl/cognitive-search/service-ticket.ts index 2e868c0a..2f846e0e 100644 --- a/data-access/src/app/application-services-impl/cognitive-search/service-ticket.ts +++ b/data-access/src/app/application-services-impl/cognitive-search/service-ticket.ts @@ -100,13 +100,11 @@ export class ServiceTicketSearchApiImpl } async serviceTicketsSearchAdmin(input: ServiceTicketsSearchInput, communityId: string): Promise>> { - let searchString = "" - if(input !== null ){ - searchString = input.searchString.trim(); - } + let searchString = input.searchString.trim(); + console.log(`Resolver>Query>serviceTicketsSearchAdmin: ${searchString}`); - let filterString = this.getFilterStringAdmin(input ? input.options.filter: null, communityId); + let filterString = this.getFilterStringAdmin(input.options.filter, communityId); console.log('filterString: ', filterString); let searchResults: SearchDocumentsResult>; @@ -116,6 +114,10 @@ export class ServiceTicketSearchApiImpl searchMode: 'all', includeTotalCount: true, filter: filterString, + facets: input.options.facets, + top: input.options.top, + skip: input.options.skip, + orderBy: input.options.orderBy, }); }); diff --git a/ui-community/src/components/layouts/admin/components/service-tickets-list.container.tsx b/ui-community/src/components/layouts/admin/components/service-tickets-list.container.tsx index 14eded8c..17a28348 100644 --- a/ui-community/src/components/layouts/admin/components/service-tickets-list.container.tsx +++ b/ui-community/src/components/layouts/admin/components/service-tickets-list.container.tsx @@ -16,6 +16,7 @@ import { } from '../../../../constants'; import { useParams, useSearchParams } from 'react-router-dom'; import { Input, Skeleton, theme } from 'antd'; +import { set } from 'lodash'; export const ServiceTicketsListContainer: React.FC = () => { const params = useParams(); @@ -26,7 +27,11 @@ export const ServiceTicketsListContainer: React.FC = () => { token: { colorText } } = theme.useToken(); - const { data: membersData, loading: memberDataLoading, error: memberDataError } = useQuery(AdminMemberNameServiceTicketContainerDocument, { + const { + data: membersData, + loading: memberDataLoading, + error: memberDataError + } = useQuery(AdminMemberNameServiceTicketContainerDocument, { variables: { communityId: params.communityId ?? '' } }); @@ -114,7 +119,7 @@ export const ServiceTicketsListContainer: React.FC = () => { }; if (searchServiceTicketsError || memberDataError) { - return
{JSON.stringify(searchServiceTicketsError ? searchServiceTicketsError: memberDataError)}
; + return
{JSON.stringify(searchServiceTicketsError ? searchServiceTicketsError : memberDataError)}
; } if (searchServiceTicketsLoading || memberDataLoading) { return ( @@ -155,11 +160,17 @@ export const ServiceTicketsListContainer: React.FC = () => { clearFilter={clearFilter} />
- + } + hasDataComponent={ + + } error={searchServiceTicketsError} />
diff --git a/ui-community/src/components/layouts/admin/components/service-tickets-list.tsx b/ui-community/src/components/layouts/admin/components/service-tickets-list.tsx index 78a7cfcf..dd3560c2 100644 --- a/ui-community/src/components/layouts/admin/components/service-tickets-list.tsx +++ b/ui-community/src/components/layouts/admin/components/service-tickets-list.tsx @@ -1,10 +1,18 @@ import { Button, Table } from "antd" import dayjs from "dayjs" import { useNavigate } from "react-router-dom" +import { ServiceTicketSearchParamKeys } from "../../../../constants" -export const ServiceTicketsList: React.FC = (props) => { +interface SearchTicketsListProps { + data: any; + searchParams: URLSearchParams; + setSearchParams: (searchParams: URLSearchParams) => void; +} + +export const ServiceTicketsList: React.FC = (props) => { const navigate = useNavigate() - const columns = [ + const columnSearchParams = props.searchParams.get(ServiceTicketSearchParamKeys.Column)?.split(','); + const columnOptions = [ { title: "Action", dataIndex: "id", @@ -43,6 +51,21 @@ export const ServiceTicketsList: React.FC = (props) => { render: (text: any) => {dayjs(text).format('MM/DD/YYYY')} }, ] + + let columns: any = []; + + if (columnSearchParams) { + columns.push(columnOptions.find((option: any) => option.title === 'Action')); + + columnOptions.forEach((option: any) => { + if (columnSearchParams.includes(option.title)) { + columns.push(option); + } + }); + } else { + columns = columnOptions; + } + return
= () => { clearFilter={clearFilter} /> - + = () => { +export interface SearchHelperProps { + clearFilter: () => void +} + +export const ServiceTicketSearchHelpers: React.FC = (props) => { const [searchParams, setSearchParams] = useSearchParams(); const [columnsToDisplay, setColumnsToDisplay] = useState( searchParams.get(ServiceTicketSearchParamKeys.Column)?.split(',') ?? [] @@ -50,9 +54,6 @@ export const ServiceTicketSearchHelpers: React.FC = () => { setSearchParams(searchParams); }; - function clearFilter(): void { - throw new Error('Function not implemented.'); - } return (
@@ -89,7 +90,7 @@ export const ServiceTicketSearchHelpers: React.FC = () => { return ; })} -
From e8655f6f269d32e90d652e4a5fc0abe18ee04062 Mon Sep 17 00:00:00 2001 From: Jason Morais Date: Wed, 8 May 2024 10:08:10 -0400 Subject: [PATCH 11/12] Added facets back into query and added counts to tags --- .../service-tickets-list.container.graphql | 26 +++ .../service-tickets-list.container.tsx | 1 - .../shared/components/filter-popover.tsx | 14 +- ui-community/src/generated.tsx | 172 +++++++++++++++++- 4 files changed, 202 insertions(+), 11 deletions(-) diff --git a/ui-community/src/components/layouts/admin/components/service-tickets-list.container.graphql b/ui-community/src/components/layouts/admin/components/service-tickets-list.container.graphql index 245c25cf..7d7acddf 100644 --- a/ui-community/src/components/layouts/admin/components/service-tickets-list.container.graphql +++ b/ui-community/src/components/layouts/admin/components/service-tickets-list.container.graphql @@ -30,6 +30,32 @@ fragment AdminServiceTicketSearchFields on ServiceTicketsSearchResult { ...AdminServiceTicketsListContainerSearchServiceTicketsResultFields } count + facets { + requestor { + value + count + } + assignedTo { + value + count + } + status { + value + count + } + priority { + value + count + } + requestorId { + value + count + } + assignedToId { + value + count + } + } } fragment AdminServiceTicketsListContainerSearchServiceTicketsResultFields on ServiceTicketsResult { diff --git a/ui-community/src/components/layouts/admin/components/service-tickets-list.container.tsx b/ui-community/src/components/layouts/admin/components/service-tickets-list.container.tsx index 17a28348..8846b7b7 100644 --- a/ui-community/src/components/layouts/admin/components/service-tickets-list.container.tsx +++ b/ui-community/src/components/layouts/admin/components/service-tickets-list.container.tsx @@ -16,7 +16,6 @@ import { } from '../../../../constants'; import { useParams, useSearchParams } from 'react-router-dom'; import { Input, Skeleton, theme } from 'antd'; -import { set } from 'lodash'; export const ServiceTicketsListContainer: React.FC = () => { const params = useParams(); diff --git a/ui-community/src/components/layouts/shared/components/filter-popover.tsx b/ui-community/src/components/layouts/shared/components/filter-popover.tsx index 364444ab..198cc999 100644 --- a/ui-community/src/components/layouts/shared/components/filter-popover.tsx +++ b/ui-community/src/components/layouts/shared/components/filter-popover.tsx @@ -16,7 +16,6 @@ export const FilterPopover: React.FC = (props) => { const [open, setOpen] = useState(false); const [filters, setFilters] = useState([]); const [searchParams, setSearchParams] = useSearchParams(); - console.log("man", props.memberData) const handleOpenChange = (newOpen: any) => { setOpen(newOpen); }; @@ -31,11 +30,10 @@ export const FilterPopover: React.FC = (props) => { }; filter.values.forEach((value: any) => { - // const count = - // props.searchData.facets[filter.facet[0]].find((facet: FacetDetail) => - // filter.handleCount ? filter.handleCount(facet, value) : facet.value === value - // )?.count ?? 0; - const count = 0; + const count = + props.searchData.facets[filter.facet[0]].find((facet: FacetDetail) => + filter.handleCount ? filter.handleCount(facet, value) : facet.value === value + )?.count ?? 0; if (filter.handleBuild) { filter.handleBuild(newFilter, value, count); } else { @@ -133,9 +131,9 @@ export const FilterPopover: React.FC = (props) => { onSelectCheckbox(e, option.id)} - style={{ borderRadius: '10px', border: '1px solid #4096ff', marginBottom: '5px'}} + style={{ borderRadius: '10px', border: '1px solid #4096ff', marginBottom: '5px', fontFamily: 'sans-serif', fontWeight: '100px'}} > - {option.name} + {option.name + " (" + option.count + ")"} ); }); diff --git a/ui-community/src/generated.tsx b/ui-community/src/generated.tsx index 16550f18..84fd1361 100644 --- a/ui-community/src/generated.tsx +++ b/ui-community/src/generated.tsx @@ -2703,6 +2703,15 @@ export type AdminServiceTicketsListContainerSearchServiceTicketsQuery = { createdAt?: any | null; updatedAt?: any | null; } | null> | null; + facets?: { + __typename?: 'ServiceTicketsSearchFacets'; + requestor?: Array<{ __typename?: 'FacetDetail'; value?: string | null; count?: number | null } | null> | null; + assignedTo?: Array<{ __typename?: 'FacetDetail'; value?: string | null; count?: number | null } | null> | null; + status?: Array<{ __typename?: 'FacetDetail'; value?: string | null; count?: number | null } | null> | null; + priority?: Array<{ __typename?: 'FacetDetail'; value?: string | null; count?: number | null } | null> | null; + requestorId?: Array<{ __typename?: 'FacetDetail'; value?: string | null; count?: number | null } | null> | null; + assignedToId?: Array<{ __typename?: 'FacetDetail'; value?: string | null; count?: number | null } | null> | null; + } | null; } | null; }; @@ -2725,6 +2734,15 @@ export type AdminServiceTicketSearchFieldsFragment = { createdAt?: any | null; updatedAt?: any | null; } | null> | null; + facets?: { + __typename?: 'ServiceTicketsSearchFacets'; + requestor?: Array<{ __typename?: 'FacetDetail'; value?: string | null; count?: number | null } | null> | null; + assignedTo?: Array<{ __typename?: 'FacetDetail'; value?: string | null; count?: number | null } | null> | null; + status?: Array<{ __typename?: 'FacetDetail'; value?: string | null; count?: number | null } | null> | null; + priority?: Array<{ __typename?: 'FacetDetail'; value?: string | null; count?: number | null } | null> | null; + requestorId?: Array<{ __typename?: 'FacetDetail'; value?: string | null; count?: number | null } | null> | null; + assignedToId?: Array<{ __typename?: 'FacetDetail'; value?: string | null; count?: number | null } | null> | null; + } | null; }; export type AdminServiceTicketsListContainerSearchServiceTicketsResultFieldsFragment = { @@ -6413,7 +6431,82 @@ export const AdminServiceTicketSearchFieldsFragmentDoc = { ] } }, - { kind: 'Field', name: { kind: 'Name', value: 'count' } } + { kind: 'Field', name: { kind: 'Name', value: 'count' } }, + { + kind: 'Field', + name: { kind: 'Name', value: 'facets' }, + selectionSet: { + kind: 'SelectionSet', + selections: [ + { + kind: 'Field', + name: { kind: 'Name', value: 'requestor' }, + selectionSet: { + kind: 'SelectionSet', + selections: [ + { kind: 'Field', name: { kind: 'Name', value: 'value' } }, + { kind: 'Field', name: { kind: 'Name', value: 'count' } } + ] + } + }, + { + kind: 'Field', + name: { kind: 'Name', value: 'assignedTo' }, + selectionSet: { + kind: 'SelectionSet', + selections: [ + { kind: 'Field', name: { kind: 'Name', value: 'value' } }, + { kind: 'Field', name: { kind: 'Name', value: 'count' } } + ] + } + }, + { + kind: 'Field', + name: { kind: 'Name', value: 'status' }, + selectionSet: { + kind: 'SelectionSet', + selections: [ + { kind: 'Field', name: { kind: 'Name', value: 'value' } }, + { kind: 'Field', name: { kind: 'Name', value: 'count' } } + ] + } + }, + { + kind: 'Field', + name: { kind: 'Name', value: 'priority' }, + selectionSet: { + kind: 'SelectionSet', + selections: [ + { kind: 'Field', name: { kind: 'Name', value: 'value' } }, + { kind: 'Field', name: { kind: 'Name', value: 'count' } } + ] + } + }, + { + kind: 'Field', + name: { kind: 'Name', value: 'requestorId' }, + selectionSet: { + kind: 'SelectionSet', + selections: [ + { kind: 'Field', name: { kind: 'Name', value: 'value' } }, + { kind: 'Field', name: { kind: 'Name', value: 'count' } } + ] + } + }, + { + kind: 'Field', + name: { kind: 'Name', value: 'assignedToId' }, + selectionSet: { + kind: 'SelectionSet', + selections: [ + { kind: 'Field', name: { kind: 'Name', value: 'value' } }, + { kind: 'Field', name: { kind: 'Name', value: 'count' } } + ] + } + } + ] + } + } ] } }, @@ -12184,7 +12277,82 @@ export const AdminServiceTicketsListContainerSearchServiceTicketsDocument = { ] } }, - { kind: 'Field', name: { kind: 'Name', value: 'count' } } + { kind: 'Field', name: { kind: 'Name', value: 'count' } }, + { + kind: 'Field', + name: { kind: 'Name', value: 'facets' }, + selectionSet: { + kind: 'SelectionSet', + selections: [ + { + kind: 'Field', + name: { kind: 'Name', value: 'requestor' }, + selectionSet: { + kind: 'SelectionSet', + selections: [ + { kind: 'Field', name: { kind: 'Name', value: 'value' } }, + { kind: 'Field', name: { kind: 'Name', value: 'count' } } + ] + } + }, + { + kind: 'Field', + name: { kind: 'Name', value: 'assignedTo' }, + selectionSet: { + kind: 'SelectionSet', + selections: [ + { kind: 'Field', name: { kind: 'Name', value: 'value' } }, + { kind: 'Field', name: { kind: 'Name', value: 'count' } } + ] + } + }, + { + kind: 'Field', + name: { kind: 'Name', value: 'status' }, + selectionSet: { + kind: 'SelectionSet', + selections: [ + { kind: 'Field', name: { kind: 'Name', value: 'value' } }, + { kind: 'Field', name: { kind: 'Name', value: 'count' } } + ] + } + }, + { + kind: 'Field', + name: { kind: 'Name', value: 'priority' }, + selectionSet: { + kind: 'SelectionSet', + selections: [ + { kind: 'Field', name: { kind: 'Name', value: 'value' } }, + { kind: 'Field', name: { kind: 'Name', value: 'count' } } + ] + } + }, + { + kind: 'Field', + name: { kind: 'Name', value: 'requestorId' }, + selectionSet: { + kind: 'SelectionSet', + selections: [ + { kind: 'Field', name: { kind: 'Name', value: 'value' } }, + { kind: 'Field', name: { kind: 'Name', value: 'count' } } + ] + } + }, + { + kind: 'Field', + name: { kind: 'Name', value: 'assignedToId' }, + selectionSet: { + kind: 'SelectionSet', + selections: [ + { kind: 'Field', name: { kind: 'Name', value: 'value' } }, + { kind: 'Field', name: { kind: 'Name', value: 'count' } } + ] + } + } + ] + } + } ] } } From edcbec8c1bc949be04a7e16547c495f17ef779fc Mon Sep 17 00:00:00 2001 From: Jason Morais Date: Wed, 8 May 2024 10:10:33 -0400 Subject: [PATCH 12/12] removed uneeded statement --- .../src/components/layouts/shared/components/filter-popover.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ui-community/src/components/layouts/shared/components/filter-popover.tsx b/ui-community/src/components/layouts/shared/components/filter-popover.tsx index 198cc999..94ff8119 100644 --- a/ui-community/src/components/layouts/shared/components/filter-popover.tsx +++ b/ui-community/src/components/layouts/shared/components/filter-popover.tsx @@ -131,7 +131,7 @@ export const FilterPopover: React.FC = (props) => { onSelectCheckbox(e, option.id)} - style={{ borderRadius: '10px', border: '1px solid #4096ff', marginBottom: '5px', fontFamily: 'sans-serif', fontWeight: '100px'}} + style={{ borderRadius: '10px', border: '1px solid #4096ff', marginBottom: '5px', fontFamily: 'sans-serif'}} > {option.name + " (" + option.count + ")"}