event attendee listing

src/main/webapp/app/config/icon-loader.ts

@@ -42,8 +42,8 @@ import { faEllipsisV } from '@fortawesome/free-solid-svg-icons/faEllipsisV';
 import { faEllipsisH } from '@fortawesome/free-solid-svg-icons/faEllipsisH';
 import { faCar } from '@fortawesome/free-solid-svg-icons/faCar';
 import { faWhatsappSquare } from '@fortawesome/free-brands-svg-icons/faWhatsappSquare';
-
 import { library } from '@fortawesome/fontawesome-svg-core';
+import { faSortAmountUp } from '@fortawesome/free-solid-svg-icons/faSortAmountUp';
 
 export const loadIcons = () => {
   library.add(
@@ -89,6 +89,7 @@ export const loadIcons = () => {
     faCalendarAlt,
     faClock,
     faMapMarkerAlt,
-    faMoneyBillAlt
+    faMoneyBillAlt,
+    faSortAmountUp
   );
 };

src/main/webapp/app/entities/event-attendee/event-attendee-row.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { Button } from 'reactstrap';
+import { IEventAttendee } from 'app/shared/model/event-attendee.model';
+import './event-attendee.scss';
+
+export interface IEventAttendeeTableRowProps {
+  user: IEventAttendee;
+  index: number;
+}
+
+export class EventAttendeeRow extends React.Component<IEventAttendeeTableRowProps> {
+  state = { user: this.props.user };
+
+  contactUser = () => {
+    window.open(`https://wa.me/${this.props.user.contactNumber}`, '_blank');
+  };
+
+  render() {
+    const { user, index } = this.props;
+    return (
+      <tr key={`event-attendee-${index + 1}`}>
+        <td scope="row">{index + 1}</td>
+        <td>{user.userName}</td>
+        <td>{user.yearSession}</td>
+        <td>{!!user.provideTransport ? <FontAwesomeIcon icon="car" /> : null}</td>
+        <td>
+          <Button color="Link" className="icon-btn" onClick={this.contactUser}>
+            <FontAwesomeIcon icon={['fab', 'whatsapp-square']} color="#25D366" size="lg" />
+          </Button>
+        </td>
+      </tr>
+    );
+  }
+}

src/main/webapp/app/entities/event-attendee/event-attendee-sort-button.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { Button } from 'reactstrap';
+import { Translate } from 'react-jhipster';
+import { IEventAttendeeSortButtonInfo } from 'app/entities/event-attendee/event-attendee-sort-modal';
+
+export interface IEventAttendeeButtonProps {
+  buttonInfo: IEventAttendeeSortButtonInfo;
+  sort: Function;
+}
+
+export class EventAttendeeSortButton extends React.Component<IEventAttendeeButtonProps> {
+  onButtonClick = () => {
+    this.props.sort(this.props.buttonInfo.buttonSortProp, this.props.buttonInfo.buttonOrderProp);
+  };
+  render() {
+    return (
+      <Button color="secondary" size="lg" block onClick={this.onButtonClick}>
+        <Translate contentKey={this.props.buttonInfo.buttonTranslateKey}>{this.props.buttonInfo.buttonName}</Translate>
+      </Button>
+    );
+  }
+}

src/main/webapp/app/entities/event-attendee/event-attendee-sort-modal.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { Modal, ModalBody, ModalHeader } from 'reactstrap';
+import { Translate } from 'react-jhipster';
+import { eventAttendeeSortButtonList } from 'app/shared/util/event-attendee-sort.constants';
+import { EventAttendeeSortButton } from 'app/entities/event-attendee/event-attendee-sort-button';
+
+export interface IEventAttendeeSortButtonInfo {
+  buttonName: string;
+  buttonTranslateKey: string;
+  buttonSortProp: string;
+  buttonOrderProp: string;
+}
+
+export interface IEventAttendeeSortModalProps {
+  isOpen: boolean;
+  toggleModal: () => void;
+  sort: (sortProp, orderProp) => void;
+}
+
+export class EventAttendeeSortModalModal extends React.Component<IEventAttendeeSortModalProps> {
+  render() {
+    const { isOpen, toggleModal, sort } = this.props;
+    return (
+      <Modal isOpen={isOpen} toggle={toggleModal}>
+        <ModalHeader toggle={toggleModal}>
+          <Translate contentKey="clubmanagementApp.eventAttendee.sortBy.title">Sort By</Translate>
+        </ModalHeader>
+        <ModalBody id="clubmanagementApp.eventAttendee.sortBy.options">
+          <ButtonItems buttonList={eventAttendeeSortButtonList} sort={sort} />
+        </ModalBody>
+      </Modal>
+    );
+  }
+}
+
+const ButtonItems = ({ buttonList, sort }) =>
+  buttonList.map(button => <EventAttendeeSortButton buttonInfo={button} sort={sort} key={button.buttonName} />);

src/main/webapp/app/entities/event-attendee/event-attendee.reducer.ts

@@ -5,6 +5,7 @@ import { cleanEntity } from 'app/shared/util/entity-utils';
 import { REQUEST, SUCCESS, FAILURE } from 'app/shared/reducers/action-type.util';
 
 import { IEventAttendee, defaultValue } from 'app/shared/model/event-attendee.model';
+import { IGetAllByEventId } from 'app/shared/type/event-custom-action';
 
 export const ACTION_TYPES = {
   FETCH_EVENTATTENDEE_LIST: 'eventAttendee/FETCH_EVENTATTENDEE_LIST',
@@ -101,6 +102,14 @@ const apiUrl = 'api/event-attendees';
 
 // Actions
 
+export const getEventAttendeeEntities: IGetAllByEventId<IEventAttendee> = (eventId, page, size, sort) => {
+  const requestUrl = `${apiUrl}/event/${eventId}${sort ? `?page=${page}&size=${size}&sort=${sort}` : ''}`;
+  return {
+    type: ACTION_TYPES.FETCH_EVENTATTENDEE_LIST,
+    payload: axios.get<IEventAttendee>(`${requestUrl}${sort ? '&' : '?'}cacheBuster=${new Date().getTime()}`)
+  };
+};
+
 export const getEntities: ICrudGetAllAction<IEventAttendee> = (page, size, sort) => {
   const requestUrl = `${apiUrl}${sort ? `?page=${page}&size=${size}&sort=${sort}` : ''}`;
   return {

src/main/webapp/app/entities/event-attendee/event-attendee.scss

@@ -0,0 +1,4 @@
+.icon-btn {
+  padding: 0px !important;
+  font-size: 14px;
+}