Jason filter redesign

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<SearchDocumentsResult<Pick<unknown, never>>> {
-    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<Pick<unknown, never>>;
@@ -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,
       });
     });
 

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[];
     },

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 {
@@ -47,3 +73,14 @@ fragment AdminServiceTicketsListContainerSearchServiceTicketsResultFields on Ser
   createdAt
   updatedAt
 }
+
+query AdminMemberNameServiceTicketContainer($communityId: ID!) {
+  membersByCommunityId(communityId: $communityId) {
+    ...AdminMembersNameServiceTicketContainerFields
+  }
+}
+
+fragment AdminMembersNameServiceTicketContainerFields on Member {
+  id
+  memberName
+}

ui-community/src/components/layouts/admin/components/service-tickets-list.container.tsx

@@ -1,13 +1,43 @@
-import { useLazyQuery  } from '@apollo/client';
-import { AdminServiceTicketsListContainerSearchServiceTicketsDocument } from '../../../../generated';
+import { useLazyQuery, useQuery } from '@apollo/client';
+import {
+  AdminServiceTicketsListContainerSearchServiceTicketsDocument,
+  AdminMemberNameServiceTicketContainerDocument,
+  ServiceTicketsSearchFilterDetail
+} 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 {
+  GetFilterFromServiceTicketQueryString,
+  ServiceTicketFilterNames,
+  ServiceTicketSearchParamKeys
+} from '../../../../constants';
+import { useParams, useSearchParams } from 'react-router-dom';
+import { Input, Skeleton, theme } from 'antd';
+
+export const ServiceTicketsListContainer: React.FC<any> = () => {
+  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,
+    loading: memberDataLoading,
+    error: memberDataError
+  } = useQuery(AdminMemberNameServiceTicketContainerDocument, {
+    variables: { communityId: params.communityId ?? '' }
+  });
 
-export const ServiceTicketsListContainer: React.FC<any> = (props) => {
   const [
     getServiceTickets,
     {
+      called: searchServiceTicketsCalled,
       loading: searchServiceTicketsLoading,
       data: searchServiceTicketsData,
       error: searchServiceTicketsError
@@ -16,33 +46,132 @@ export const ServiceTicketsListContainer: React.FC<any> = (props) => {
     fetchPolicy: 'network-only'
   });
 
+  const onChange = (e: any) => {
+    setSearchString(e.target.value);
+  };
+
   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();
+    })();
+  }, []);
 
+  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 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 <div>{JSON.stringify(searchServiceTicketsError ? searchServiceTicketsError : memberDataError)}</div>;
+  }
+  if (searchServiceTicketsLoading || memberDataLoading) {
+    return (
+      <div>
+        <Skeleton active />
+      </div>
+    );
+  }
+  if (searchServiceTicketsCalled && searchServiceTicketsData) {
+    let SearchResult = null;
+    SearchResult = (
+      <pre
+        className=" mt-2 p-2"
+        style={{
+          color: colorText
+        }}
+      >
+        {JSON.stringify(searchServiceTicketsData, null, 2)}
+      </pre>
+    );
   }
 
   return (
-    <ComponentQueryLoader
-      loading={searchServiceTicketsLoading}
-      hasData={searchServiceTicketsData?.serviceTicketsSearchAdmin !== null}
-      hasDataComponent={<ServiceTicketsList data={searchServiceTicketsData?.serviceTicketsSearchAdmin} />}
-      error={searchServiceTicketsError}
-    />
+    <div>
+      <div className="py-4" style={{ display: 'inline-flex', width: '100%' }}>
+        <Search
+          allowClear
+          style={{ width: '40%', marginRight: '10px' }}
+          placeholder="Search For Service Tickets"
+          onSearch={() => handleSearch()}
+          value={searchString}
+          onChange={(e) => onChange(e)}
+          enterButton
+        />
+        <FilterPopover
+          searchData={searchServiceTicketsData?.serviceTicketsSearchAdmin}
+          memberData={membersData}
+          clearFilter={clearFilter}
+        />
+      </div>
+      <ServiceTicketSearchHelpers clearFilter={clearFilter} />
+      <ComponentQueryLoader
+        loading={searchServiceTicketsLoading}
+        hasData={searchServiceTicketsData?.serviceTicketsSearchAdmin !== null}
+        hasDataComponent={
+          <ServiceTicketsList
+            data={searchServiceTicketsData?.serviceTicketsSearchAdmin}
+            searchParams={searchParams}
+            setSearchParams={setSearchParams}
+          />
+        }
+        error={searchServiceTicketsError}
+      />
+    </div>
   );
 };

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<any> = (props) => {
+interface SearchTicketsListProps {
+  data: any;
+  searchParams: URLSearchParams;
+  setSearchParams: (searchParams: URLSearchParams) => void;
+}
+
+export const ServiceTicketsList: React.FC<SearchTicketsListProps> = (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<any> = (props) => {
       render: (text: any) => <span>{dayjs(text).format('MM/DD/YYYY')}</span>
     },
   ]
+
+  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 <div>
     <Table
       columns={columns}