Family member search

package.json

@@ -103,7 +103,6 @@
     "sourcemap-istanbul-instrumenter-loader": "0.2.0",
     "stripcomment-loader": "0.1.0",
     "style-loader": "0.23.1",
-    "swagger-ui": "3.23.11",
     "terser-webpack-plugin": "1.2.3",
     "thread-loader": "2.1.2",
     "to-string-loader": "1.1.5",

src/main/webapp/app/app.tsx

@@ -24,7 +24,13 @@ export interface IAppProps extends StateProps, DispatchProps {}
 
 export class App extends React.Component<IAppProps> {
   componentDidMount() {
-    fetchAccount();
+    fetchAccount(); // TODO: @LUXIANZE Fix this, this api requires authenticated user, if user is logged out as token expired, this call will always fail
+    /**
+     * Work around while this is not fixes
+     * 1. Comment out line: 27
+     * 2. Start app and login
+     * 3. Re-enable line: 27
+     */
     this.props.getProfile();
   }
 

src/main/webapp/app/config/constants.ts

@@ -23,6 +23,7 @@ export const APP_LOCAL_DATE_FORMAT = 'DD/MM/YYYY';
 export const DATE_WITH_MONTH_ABBREVIATION_FORMAT = 'DD MMM YYYY';
 export const APP_LOCAL_DATETIME_FORMAT = 'YYYY-MM-DDTHH:mm';
 export const APP_LOCAL_DATETIME_FORMAT_Z = 'YYYY-MM-DDTHH:mm Z';
+export const SERVER_DATE_FORMAT = 'YYYY-MM-DD';
 export const APP_WHOLE_NUMBER_FORMAT = '0,0';
 export const APP_TWO_DIGITS_AFTER_POINT_NUMBER_FORMAT = '0,0.[00]';
 

src/main/webapp/app/entities/cc-member/index.tsx

@@ -0,0 +1,14 @@
+import ErrorBoundaryRoute from 'app/shared/error/error-boundary-route';
+import React from 'react';
+import { RouteComponentProps, Switch } from 'react-router-dom';
+import Member from './member';
+
+const Routes: React.FC<RouteComponentProps> = ({ match }) => (
+  <>
+    <Switch>
+      <ErrorBoundaryRoute exact path={match.url} component={Member} />
+    </Switch>
+  </>
+);
+
+export default Routes;

src/main/webapp/app/entities/cc-member/member.indexer.ts

@@ -0,0 +1,6 @@
+import { IUserCCInfo } from 'app/shared/model/user-cc-info.model';
+
+export const generateIndex = (userCCInfo: IUserCCInfo) => {
+  const searchIndex = (userCCInfo.user?.firstName?.trim() || '') + (userCCInfo.user?.lastName?.trim() || '');
+  return searchIndex.replace(/\s+/g, '').toLowerCase();
+};

src/main/webapp/app/entities/cc-member/member.tsx

@@ -0,0 +1,141 @@
+import { updateKey, updateKeys } from 'app/shared/util/deep-copy-utils';
+import { memberTabList } from 'app/shared/util/tab.constants';
+import axios from 'axios';
+import React, { useEffect, useState } from 'react';
+import { RouteComponentProps, useLocation } from 'react-router-dom';
+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 { generateIndex } from './member.indexer';
+
+function useQuery() {
+  return new URLSearchParams(useLocation().search);
+}
+
+const member: React.FC<RouteComponentProps> = (props: RouteComponentProps) => {
+  const searchEngine: SearchEngine<IUserCCInfo> = new SearchEngine([], generateIndex);
+  const query = useQuery();
+  const [viewModel, setViewModel] = useState({
+    isLoading: false,
+    dropdownOpen: false,
+    selectedYearSession: '2019/2020',
+    memberName: '',
+    yearSessionList: ['2019/2020', '2020/2021', '2021/2022', '2022/2023', '2023/2024', '2024/2025', '2025/2026'],
+    retrievedMembers: [],
+  });
+
+  const toggle: React.MouseEventHandler = () => {
+    const currentViewModel = updateKey(viewModel, 'dropdownOpen', !viewModel.dropdownOpen);
+    setViewModel(currentViewModel);
+  };
+
+  useEffect(() => {
+    search();
+  }, []);
+
+  const updateViewModel: React.ChangeEventHandler<HTMLInputElement> = event => {
+    const currentViewModel = updateKey(viewModel, 'memberName', event.target.value);
+    setViewModel(currentViewModel);
+  };
+
+  const search = () => {
+    const currentViewModel = updateKey(viewModel, 'isLoading', true);
+    setViewModel(currentViewModel);
+
+    const searchString = `api/cc-members?yearSession.equals=${viewModel.selectedYearSession}`;
+
+    axios
+      .get<IUserCCInfo[]>(searchString)
+      .then(response => {
+        const values = new Map();
+        if (response?.data) {
+          const filteredResponseData = searchEngine.updateEngine(response.data).search(viewModel.memberName);
+          values.set('retrievedMembers', filteredResponseData);
+        }
+        values.set('isLoading', false);
+        const currentViewModel1 = updateKeys(viewModel, values);
+        setViewModel(currentViewModel1);
+      })
+      .catch(alert);
+  };
+
+  return (
+    <>
+      <div>
+        <h2 id="club-family-heading" className="member-module-heading">
+          Fishes
+        </h2>
+        <div className="my-3">
+          <CustomTab tabList={memberTabList} currentTab="CC Family" key={Date.now()} />
+        </div>
+        <div className="jumbotron container">
+          <div className="row">
+            <div className="col-4">
+              <Dropdown isOpen={viewModel.dropdownOpen} toggle={toggle}>
+                <DropdownToggle caret>{viewModel.selectedYearSession}</DropdownToggle>
+                <DropdownMenu>
+                  {viewModel.yearSessionList ? (
+                    viewModel.yearSessionList.map(yearSession => {
+                      const setYearSession = () => {
+                        viewModel.selectedYearSession = yearSession;
+                        setViewModel(viewModel);
+                      };
+
+                      return (
+                        <DropdownItem key={yearSession}>
+                          <div onClick={setYearSession}>{yearSession}</div>
+                        </DropdownItem>
+                      );
+                    })
+                  ) : (
+                    <DropdownItem>no year session</DropdownItem>
+                  )}
+                </DropdownMenu>
+              </Dropdown>
+            </div>
+            <div className="col-8">
+              <div className="input-group mb-3">
+                <div className="input-group-prepend">
+                  <button className="btn btn-outline-secondary" type="button" onClick={search}>
+                    search
+                  </button>
+                </div>
+                <input
+                  name="memberName"
+                  type="text"
+                  className="form-control"
+                  placeholder=""
+                  aria-label=""
+                  aria-describedby="basic-addon1"
+                  value={viewModel.memberName}
+                  onChange={updateViewModel}
+                />
+              </div>
+            </div>
+          </div>
+          <div className="row container">
+            <div className="container">
+              {viewModel.isLoading ? (
+                `Loading`
+              ) : (
+                <div>
+                  {viewModel?.retrievedMembers &&
+                    viewModel.retrievedMembers.map((retrievedMember: any) => {
+                      return (
+                        <div className="row" key={retrievedMember.id}>
+                          {JSON.stringify(retrievedMember.user)}
+                        </div>
+                      );
+                    })}
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default member;

src/main/webapp/app/entities/club-family/club-family-detail.tsx

@@ -41,14 +41,14 @@ export class ClubFamilyDetail extends React.Component<IClubFamilyDetailProps> {
             </dt>
             <dd>{clubFamilyEntity.slogan}</dd>
           </dl>
-          <Button tag={Link} to="/entity/club-family" replace color="info">
+          <Button tag={Link} to="/entity/members/club-family" replace color="info">
             <FontAwesomeIcon icon="arrow-left" />{' '}
             <span className="d-none d-md-inline">
               <Translate contentKey="entity.action.back">Back</Translate>
             </span>
           </Button>
           &nbsp;
-          <Button tag={Link} to={`/entity/club-family/${clubFamilyEntity.id}/edit`} replace color="primary">
+          <Button tag={Link} to={`/entity/members/club-family/${clubFamilyEntity.id}/edit`} replace color="primary">
             <FontAwesomeIcon icon="pencil-alt" />{' '}
             <span className="d-none d-md-inline">
               <Translate contentKey="entity.action.edit">Edit</Translate>
@@ -61,15 +61,12 @@ export class ClubFamilyDetail extends React.Component<IClubFamilyDetailProps> {
 }
 
 const mapStateToProps = ({ clubFamily }: IRootState) => ({
-  clubFamilyEntity: clubFamily.entity
+  clubFamilyEntity: clubFamily.entity,
 });
 
 const mapDispatchToProps = { getEntity };
 
 type StateProps = ReturnType<typeof mapStateToProps>;
 type DispatchProps = typeof mapDispatchToProps;
 
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(ClubFamilyDetail);
+export default connect(mapStateToProps, mapDispatchToProps)(ClubFamilyDetail);

src/main/webapp/app/entities/club-family/family-member-create.tsx

@@ -55,7 +55,7 @@ export class FamilyMemberCreate extends React.Component<IFamilyMemberCreateProps
         if (user) {
           return (
             <option key={user.id} value={user.id}>
-              {concatFullName(user.firstName, user.lastName)}
+              {concatFullName(user.firstName ?? '', user.lastName ?? '')}
             </option>
           );
         }
@@ -137,7 +137,7 @@ export class FamilyMemberCreate extends React.Component<IFamilyMemberCreateProps
                       this.renderNames(users)
                     ) : (
                       <option key={userEntity.id} value={userEntity.id}>
-                        {concatFullName(userEntity?.user?.firstName, userEntity?.user?.lastName)}
+                        {concatFullName(userEntity?.user?.firstName ?? '', userEntity?.user?.lastName ?? '')}
                       </option>
                     )}
                   </AvField>

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<IFamilyMemberProps, IFamilyMemberState> {
+  searchEngine: SearchEngine<IUserCCInfo> = new SearchEngine([], generateIndex);
+
   constructor(props: IFamilyMemberProps) {
     super(props);
     this.state = {
       searchModalIsOpen: false,
+      memberName: '',
+      filteredUsers: [],
     };
   }
 
   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<IFamilyMemberProps, IFamilyMemberStat
     });
   };
 
-  onEditButtonClick = (userCCInfoId?: number): void => {};
+  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<void> => {
+    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 (
       <div>
-        <FilterSearchBar
+        <AdvancedSearchBar
           isOpen={searchModalIsOpen}
           toggleModal={this.toggleSearchModal}
           familyCode={this.props.match.params.familyCode}
-          searchUsers={this.props.getUsersWithFilter}
+          searchUsers={this.advanceSearch}
         />
         <h2 id="event-activity-heading" className="event-module-heading">
           {familyName ? translate(familyName) : null}
@@ -80,21 +101,20 @@ class FamilyMember extends React.Component<IFamilyMemberProps, IFamilyMemberStat
           </AuthorizationChecker>
           <InputGroup>
             <InputGroupAddon className="search-bar-prepend" addonType="prepend" color="white">
-              {/* ADD IN SEARCH ONCLICK TO THE BUTTON BELOW*/}
-              <Button color="primary">
+              <Button color="primary" onClick={this.searchMembers}>
                 <FontAwesomeIcon icon="search" />
               </Button>
             </InputGroupAddon>
-            <Input placeholder="Type a name to filter" className="search-bar-input" />
+            <Input placeholder="Type a name to filter" className="search-bar-input" value={memberName} onChange={this.updateMemberName} />
             <InputGroupAddon addonType="append">
               <Button className="search-bar-append" onClick={this.toggleSearchModal}>
                 <FontAwesomeIcon icon="filter" color="#07ADE1" />
               </Button>
             </InputGroupAddon>
           </InputGroup>
-          {users && users.length > 0 ? (
+          {filteredUsers && filteredUsers.length > 0 ? (
             <div>
-              {users.map(user => (
+              {filteredUsers.map(user => (
                 <MemberCard
                   key={user.id}
                   userCCInfo={user}

src/main/webapp/app/entities/event/event-detail.tsx

@@ -5,7 +5,7 @@ import React from 'react';
 import moment from 'moment';
 import { connect } from 'react-redux';
 import { Link, RouteComponentProps } from 'react-router-dom';
-import { Button, Container } from 'reactstrap';
+import { Button } from 'reactstrap';
 // tslint:disable-next-line:no-unused-variable
 import { Translate, TextFormat } from 'react-jhipster';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';

src/main/webapp/app/entities/index.tsx

@@ -18,6 +18,7 @@ import ClubFamily from './club-family';
 import UserCCInfo from './user-cc-info';
 import UserUniInfo from './user-uni-info';
 import Faculty from './faculty';
+import Member from './cc-member';
 import FinanceReport from './finance-report';
 /* jhipster-needle-add-route-import - JHipster will add routes here */
 
@@ -34,6 +35,7 @@ const Routes: React.FC<RouteComponentProps> = ({ match }) => (
       <ErrorBoundaryRoute path={`${match.url}/transaction`} component={Transaction} />
       <ErrorBoundaryRoute path={`${match.url}/claim`} component={Claim} />
       <ErrorBoundaryRoute path={`${match.url}/debt`} component={Debt} />
+      <ErrorBoundaryRoute path={`${match.url}/members/cc-member`} component={Member} />
       <ErrorBoundaryRoute path={`${match.url}/members/administrator`} component={Administrator} />
       <ErrorBoundaryRoute path={`${match.url}/members/cc-family`} component={ClubFamily} />
       <ErrorBoundaryRoute path={`${match.url}/user-cc-info`} component={UserCCInfo} />