From c151d444d5b614a02f0f7df9456a315b940b9b7b Mon Sep 17 00:00:00 2001 From: Clement Date: Sun, 10 Oct 2021 22:05:06 +0800 Subject: [PATCH 1/2] Implement Native search engines into family member list search and advancedSearchModal seach --- .../app/entities/cc-member/member.indexer.ts | 2 +- .../webapp/app/entities/cc-member/member.tsx | 4 +- .../club-family/family-member-create.tsx | 4 +- .../entities/club-family/family-member.tsx | 50 +++++++++++++------ src/main/webapp/app/entities/index.tsx | 2 - .../user-cc-info/user-cc-info.reducer.ts | 4 +- .../advancedSearchModal.reducer.ts | 3 +- .../advancedSearchModal.tsx | 16 +++--- 8 files changed, 49 insertions(+), 36 deletions(-) diff --git a/src/main/webapp/app/entities/cc-member/member.indexer.ts b/src/main/webapp/app/entities/cc-member/member.indexer.ts index 6d4408c3..fc4624dd 100644 --- a/src/main/webapp/app/entities/cc-member/member.indexer.ts +++ b/src/main/webapp/app/entities/cc-member/member.indexer.ts @@ -1,6 +1,6 @@ import { IUserCCInfo } from 'app/shared/model/user-cc-info.model'; -export const genereateIndex = (userCCInfo: IUserCCInfo) => { +export const generateIndex = (userCCInfo: IUserCCInfo) => { const searchIndex = (userCCInfo.user?.firstName?.trim() || '') + (userCCInfo.user?.lastName?.trim() || ''); return searchIndex.replace(/\s+/g, '').toLowerCase(); }; diff --git a/src/main/webapp/app/entities/cc-member/member.tsx b/src/main/webapp/app/entities/cc-member/member.tsx index 109b2df8..9244b281 100644 --- a/src/main/webapp/app/entities/cc-member/member.tsx +++ b/src/main/webapp/app/entities/cc-member/member.tsx @@ -7,14 +7,14 @@ import { Dropdown, DropdownItem, DropdownMenu, DropdownToggle } from 'reactstrap import CustomTab from 'app/shared/components/customTab/custom-tab'; import { SearchEngine } from 'app/shared/util/native-search-utils'; import { IUserCCInfo } from 'app/shared/model/user-cc-info.model'; -import { genereateIndex } from './member.indexer'; +import { generateIndex } from './member.indexer'; function useQuery() { return new URLSearchParams(useLocation().search); } const member: React.FC = (props: RouteComponentProps) => { - const searchEngine: SearchEngine = new SearchEngine([], genereateIndex); + const searchEngine: SearchEngine = new SearchEngine([], generateIndex); const query = useQuery(); const [viewModel, setViewModel] = useState({ isLoading: false, diff --git a/src/main/webapp/app/entities/club-family/family-member-create.tsx b/src/main/webapp/app/entities/club-family/family-member-create.tsx index 094a2e91..d3062991 100644 --- a/src/main/webapp/app/entities/club-family/family-member-create.tsx +++ b/src/main/webapp/app/entities/club-family/family-member-create.tsx @@ -55,7 +55,7 @@ export class FamilyMemberCreate extends React.Component - {concatFullName(user.firstName, user.lastName)} + {concatFullName(user.firstName ?? '', user.lastName ?? '')} ); } @@ -137,7 +137,7 @@ export class FamilyMemberCreate extends React.Component - {concatFullName(userEntity?.user?.firstName, userEntity?.user?.lastName)} + {concatFullName(userEntity?.user?.firstName ?? '', userEntity?.user?.lastName ?? '')} )} diff --git a/src/main/webapp/app/entities/club-family/family-member.tsx b/src/main/webapp/app/entities/club-family/family-member.tsx index 264e46a2..059b8d59 100644 --- a/src/main/webapp/app/entities/club-family/family-member.tsx +++ b/src/main/webapp/app/entities/club-family/family-member.tsx @@ -6,33 +6,41 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { Translate, translate } from 'react-jhipster'; import { connect } from 'react-redux'; import { IRootState } from 'app/shared/reducers'; - +import { generateIndex } from '../cc-member/member.indexer'; import AuthorizationChecker from 'app/shared/components/authorization-checker/authorization-checker'; import CCRole from 'app/shared/model/enum/cc-role.enum'; -import EventRole from 'app/shared/model/enum/event-role.enum'; import MemberCard from './member-card'; -import FilterSearchBar from 'app/shared/components/advancedSearchModal/advancedSearchModal'; -import EventModal from 'app/shared/components/eventModal/event-modal'; - +import AdvancedSearchBar from 'app/shared/components/advancedSearchModal/advancedSearchModal'; import { getUsersWithFilter, reset as resetUsers } from 'app/entities/user-cc-info/user-cc-info.reducer'; import { getClubFamilyDetails } from 'app/shared/services/club-family-info.service'; import { reset as resetFilter } from 'app/shared/components/advancedSearchModal/advancedSearchModal.reducer'; +import { SearchEngine } from 'app/shared/util/native-search-utils'; +import { IUserCCInfo } from 'app/shared/model/user-cc-info.model'; export interface IFamilyMemberProps extends StateProps, DispatchProps, RouteComponentProps<{ familyCode: string }> {} export interface IFamilyMemberState { searchModalIsOpen: boolean; + memberName: string; + filteredUsers: IUserCCInfo[]; } class FamilyMember extends React.Component { constructor(props: IFamilyMemberProps) { super(props); this.state = { searchModalIsOpen: false, + memberName: '', + filteredUsers: [], }; } + searchEngine: SearchEngine = new SearchEngine([], generateIndex); + async componentDidMount() { - this.props.getUsersWithFilter(this.props.match.params.familyCode); + await this.props.getUsersWithFilter(this.props.match.params.familyCode); + this.setState({ + filteredUsers: this.props.users, + }); } componentWillUnmount() { @@ -52,19 +60,32 @@ class FamilyMember extends React.Component {}; + updateMemberName = (event: { target: HTMLInputElement }): void => { + this.setState({ memberName: event.target.value }); + }; + + searchMembers = (): void => { + const filteredUsers = this.searchEngine.updateEngine(this.props.users).search(this.state.memberName); + this.setState({ filteredUsers }); + }; + + advanceSearch = async (familyCode: string, filters: any): Promise => { + await this.props.getUsersWithFilter(familyCode, filters); + const filteredUsers = this.searchEngine.updateEngine(this.props.users).search(this.state.memberName); + this.setState({ filteredUsers }); + }; render() { const { users, match } = this.props; - const { searchModalIsOpen } = this.state; + const { searchModalIsOpen, memberName, filteredUsers } = this.state; const familyName = getClubFamilyDetails(match.params.familyCode).name; return (
-

{familyName ? translate(familyName) : null} @@ -80,21 +101,20 @@ class FamilyMember extends React.Component - {/* ADD IN SEARCH ONCLICK TO THE BUTTON BELOW*/} - - + - {users && users.length > 0 ? ( + {filteredUsers && filteredUsers.length > 0 ? (
- {users.map(user => ( + {filteredUsers.map(user => ( = ({ match }) => ( - - diff --git a/src/main/webapp/app/entities/user-cc-info/user-cc-info.reducer.ts b/src/main/webapp/app/entities/user-cc-info/user-cc-info.reducer.ts index 7fe41d9a..88e1c03b 100644 --- a/src/main/webapp/app/entities/user-cc-info/user-cc-info.reducer.ts +++ b/src/main/webapp/app/entities/user-cc-info/user-cc-info.reducer.ts @@ -22,7 +22,7 @@ export const ACTION_TYPES = { const initialState: IUserCCInfoState = { loading: false, errResponse: null, - entities: [] as ReadonlyArray, + entities: [], entity: defaultValue, updating: false, updateSuccess: false, @@ -33,7 +33,7 @@ const initialState: IUserCCInfoState = { export interface IUserCCInfoState { loading: boolean; errResponse: null | AxiosError; - entities: ReadonlyArray; + entities: IUserCCInfo[]; entity: Readonly; updating: boolean; updateSuccess: boolean; diff --git a/src/main/webapp/app/shared/components/advancedSearchModal/advancedSearchModal.reducer.ts b/src/main/webapp/app/shared/components/advancedSearchModal/advancedSearchModal.reducer.ts index c0fd6bdc..93d0b5f1 100644 --- a/src/main/webapp/app/shared/components/advancedSearchModal/advancedSearchModal.reducer.ts +++ b/src/main/webapp/app/shared/components/advancedSearchModal/advancedSearchModal.reducer.ts @@ -14,8 +14,7 @@ export interface IAdvancedSearchModalState { } export interface IFilter { - userFirstName?: string; - userLastName?: string; + memberName?: string; courseProgramId?: number; yearSession?: string; } diff --git a/src/main/webapp/app/shared/components/advancedSearchModal/advancedSearchModal.tsx b/src/main/webapp/app/shared/components/advancedSearchModal/advancedSearchModal.tsx index c9fe1bda..8cd65cd8 100644 --- a/src/main/webapp/app/shared/components/advancedSearchModal/advancedSearchModal.tsx +++ b/src/main/webapp/app/shared/components/advancedSearchModal/advancedSearchModal.tsx @@ -10,7 +10,7 @@ import { IFilter, setEntity } from './advancedSearchModal.reducer'; import './advancedSearchModal.scss'; -interface IFilterSearchBarProps extends StateProps, DispatchProps { +interface IAdvancedSearchModalProps extends StateProps, DispatchProps { isOpen: boolean; toggleModal: () => void; familyCode: string; @@ -21,20 +21,19 @@ interface IAdvancedSearchModalState { filters: IFilter; } -class AdvancedSearchModal extends React.Component { - constructor(props: IFilterSearchBarProps) { +class AdvancedSearchModal extends React.Component { + constructor(props: IAdvancedSearchModalProps) { super(props); this.state = { filters: { - userFirstName: '', - userLastName: '', + memberName: '', courseProgramId: undefined, yearSession: '', }, }; } - componentDidUpdate(prevProps: IFilterSearchBarProps) { + componentDidUpdate(prevProps: IAdvancedSearchModalProps) { if (this.props.isOpen !== prevProps.isOpen) { this.props.getYearSessionOptions(0, 12, 'value,desc'); this.props.getCourseProgramOptions(0, 12, 'value,desc'); @@ -77,10 +76,7 @@ class AdvancedSearchModal extends React.ComponentAdvanced Search

- - - - + From a989133afae6e5ca4dd1b2539bc1f018d8fc885b Mon Sep 17 00:00:00 2001 From: Clement Date: Sun, 10 Oct 2021 22:20:43 +0800 Subject: [PATCH 2/2] Fix tslint error --- src/main/webapp/app/entities/club-family/family-member.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/main/webapp/app/entities/club-family/family-member.tsx b/src/main/webapp/app/entities/club-family/family-member.tsx index 059b8d59..e8ea542c 100644 --- a/src/main/webapp/app/entities/club-family/family-member.tsx +++ b/src/main/webapp/app/entities/club-family/family-member.tsx @@ -25,6 +25,8 @@ export interface IFamilyMemberState { filteredUsers: IUserCCInfo[]; } class FamilyMember extends React.Component { + searchEngine: SearchEngine = new SearchEngine([], generateIndex); + constructor(props: IFamilyMemberProps) { super(props); this.state = { @@ -34,8 +36,6 @@ class FamilyMember extends React.Component = new SearchEngine([], generateIndex); - async componentDidMount() { await this.props.getUsersWithFilter(this.props.match.params.familyCode); this.setState({