Merge pull request #74 from Five-Fishes/register-attendee

Register Attendee
Five-Fishes · Apr 14, 2021 · 9730b8b · 9730b8b
2 parents ed8525b + b2f56b0
commit 9730b8b
Show file tree

Hide file tree

Showing 12 changed files with 122 additions and 75 deletions.
diff --git a/.../event-attendee/event-attendee-update.tsx → .../event-attendee/event-attendee-create.tsx b/.../event-attendee/event-attendee-update.tsx → .../event-attendee/event-attendee-create.tsx
@@ -1,4 +1,6 @@
+import 'app/styles/event-module.scss';
 import React from 'react';
+import axios from 'axios';
 import { connect } from 'react-redux';
 import { Link, RouteComponentProps } from 'react-router-dom';
 import { Button, Row, Col, Label } from 'reactstrap';
@@ -11,37 +13,37 @@ import { IRootState } from 'app/shared/reducers';
 import { getEntity, updateEntity, createEntity, reset } from './event-attendee.reducer';
 import { IEventAttendee } from 'app/shared/model/event-attendee.model';
 // tslint:disable-next-line:no-unused-variable
-import { convertDateTimeFromServer, convertDateTimeToServer } from 'app/shared/util/date-utils';
-import { mapIdList } from 'app/shared/util/entity-utils';
+import { IEvent } from 'app/shared/model/event.model';
 
-export interface IEventAttendeeUpdateProps extends StateProps, DispatchProps, RouteComponentProps<{ id: string }> {}
+export interface IEventAttendeeUpdateProps extends StateProps, DispatchProps, RouteComponentProps<{ id: string; eventId: string }> {}
 
 export interface IEventAttendeeUpdateState {
-  isNew: boolean;
+  event: IEvent;
 }
 
 export class EventAttendeeUpdate extends React.Component<IEventAttendeeUpdateProps, IEventAttendeeUpdateState> {
   constructor(props) {
     super(props);
     this.state = {
-      isNew: !this.props.match.params || !this.props.match.params.id
+      event: null
     };
   }
 
+  getEvent = async () => {
+    const event = await axios.get<IEvent>(`api/events/${this.props.match.params.eventId}`);
+    this.setState({ event: event.data });
+  };
+
+  componentDidMount() {
+    this.getEvent();
+  }
+
   componentWillUpdate(nextProps, nextState) {
     if (nextProps.updateSuccess !== this.props.updateSuccess && nextProps.updateSuccess) {
       this.handleClose();
     }
   }
 
-  componentDidMount() {
-    if (this.state.isNew) {
-      this.props.reset();
-    } else {
-      this.props.getEntity(this.props.match.params.id);
-    }
-  }
-
   saveEntity = (event, errors, values) => {
     if (errors.length === 0) {
       const { eventAttendeeEntity } = this.props;
@@ -50,28 +52,23 @@ export class EventAttendeeUpdate extends React.Component<IEventAttendeeUpdatePro
         ...values
       };
 
-      if (this.state.isNew) {
-        this.props.createEntity(entity);
-      } else {
-        this.props.updateEntity(entity);
-      }
+      this.props.createEntity(entity);
     }
   };
 
   handleClose = () => {
-    this.props.history.push('/entity/event-attendee');
+    this.props.history.push(`/entity/event/${this.props.match.params.eventId}`);
   };
 
   render() {
-    const { eventAttendeeEntity, loading, updating } = this.props;
-    const { isNew } = this.state;
+    const { userId, loading, updating, match } = this.props;
 
     return (
       <div>
         <Row className="justify-content-center">
           <Col md="8">
             <h2 id="clubmanagementApp.eventAttendee.home.createOrEditLabel">
-              <Translate contentKey="clubmanagementApp.eventAttendee.home.createOrEditLabel">Create or edit a EventAttendee</Translate>
+              <Translate contentKey="clubmanagementApp.eventAttendee.home.registerLabel">Register as EventAttendee</Translate>
             </h2>
           </Col>
         </Row>
@@ -80,46 +77,58 @@ export class EventAttendeeUpdate extends React.Component<IEventAttendeeUpdatePro
             {loading ? (
               <p>Loading...</p>
             ) : (
-              <AvForm model={isNew ? {} : eventAttendeeEntity} onSubmit={this.saveEntity}>
-                {!isNew ? (
-                  <AvGroup>
-                    <Label for="event-attendee-id">
-                      <Translate contentKey="global.field.id">ID</Translate>
-                    </Label>
-                    <AvInput id="event-attendee-id" type="text" className="form-control" name="id" required readOnly />
-                  </AvGroup>
-                ) : null}
-                <AvGroup>
+              <AvForm onSubmit={this.saveEntity}>
+                <AvGroup hidden>
                   <Label id="userIdLabel" for="event-attendee-userId">
-                    <Translate contentKey="clubmanagementApp.eventAttendee.userId">User Id</Translate>
+                    <Translate contentKey="clubmanagementApp.eventAttendee.userId">User</Translate>
                   </Label>
-                  <AvField id="event-attendee-userId" type="string" className="form-control" name="userId" />
+                  <AvField id="event-attendee-userId" type="string" className="form-control" name="userId" value={userId} disabled />
                 </AvGroup>
                 <AvGroup>
                   <Label id="eventIdLabel" for="event-attendee-eventId">
-                    <Translate contentKey="clubmanagementApp.eventAttendee.eventId">Event Id</Translate>
+                    <Translate contentKey="clubmanagementApp.event.detail.title">Event</Translate>
                   </Label>
-                  <AvField id="event-attendee-eventId" type="string" className="form-control" name="eventId" />
+                  <AvField
+                    type="string"
+                    className="form-control"
+                    name="event"
+                    value={this.state.event ? this.state.event.name : null}
+                    disabled
+                  />
+                  <AvField
+                    id="event-attendee-eventId"
+                    type="string"
+                    className="form-control"
+                    name="eventId"
+                    value={match.params.eventId}
+                    disabled
+                    hidden
+                  />
                 </AvGroup>
                 <AvGroup>
                   <Label id="provideTransportLabel" check>
-                    <AvInput id="event-attendee-provideTransport" type="checkbox" className="form-control" name="provideTransport" />
+                    <AvInput
+                      id="event-attendee-provideTransport"
+                      type="checkbox"
+                      className="form-control transport-checkbox"
+                      name="provideTransport"
+                    />
                     <Translate contentKey="clubmanagementApp.eventAttendee.provideTransport">Provide Transport</Translate>
                   </Label>
                 </AvGroup>
-                <Button tag={Link} id="cancel-save" to="/entity/event-attendee" replace color="info">
-                  <FontAwesomeIcon icon="arrow-left" />
-                  &nbsp;
-                  <span className="d-none d-md-inline">
-                    <Translate contentKey="entity.action.back">Back</Translate>
-                  </span>
-                </Button>
-                &nbsp;
-                <Button color="primary" id="save-entity" type="submit" disabled={updating}>
-                  <FontAwesomeIcon icon="save" />
+                <div className="text-center mx-4 d-flex justify-content-between justify-content-md-center mb-2">
+                  <Button tag={Link} id="cancel-save" to={`/entity/event/${match.params.eventId}`} replace color="cancel">
+                    <FontAwesomeIcon icon="arrow-left" />
+                    &nbsp;
+                    <Translate contentKey="entity.action.cancel">Cancel</Translate>
+                  </Button>
                   &nbsp;
-                  <Translate contentKey="entity.action.save">Save</Translate>
-                </Button>
+                  <Button color="action" id="save-entity" type="submit" disabled={updating}>
+                    <FontAwesomeIcon icon="save" />
+                    &nbsp;
+                    <Translate contentKey="entity.action.register">Register</Translate>
+                  </Button>
+                </div>
               </AvForm>
             )}
           </Col>
@@ -130,6 +139,7 @@ export class EventAttendeeUpdate extends React.Component<IEventAttendeeUpdatePro
 }
 
 const mapStateToProps = (storeState: IRootState) => ({
+  userId: storeState.authentication.id,
   eventAttendeeEntity: storeState.eventAttendee.entity,
   loading: storeState.eventAttendee.loading,
   updating: storeState.eventAttendee.updating,

diff --git a/src/main/webapp/app/entities/event-attendee/event-attendee-delete-dialog.tsx b/src/main/webapp/app/entities/event-attendee/event-attendee-delete-dialog.tsx
@@ -9,11 +9,11 @@ import { IEventAttendee } from 'app/shared/model/event-attendee.model';
 import { IRootState } from 'app/shared/reducers';
 import { getEntity, deleteEntity } from './event-attendee.reducer';
 
-export interface IEventAttendeeDeleteDialogProps extends StateProps, DispatchProps, RouteComponentProps<{ id: string }> {}
+export interface IEventAttendeeDeleteDialogProps extends StateProps, DispatchProps, RouteComponentProps<{ attendeeId: string }> {}
 
 export class EventAttendeeDeleteDialog extends React.Component<IEventAttendeeDeleteDialogProps> {
   componentDidMount() {
-    this.props.getEntity(this.props.match.params.id);
+    this.props.getEntity(this.props.match.params.attendeeId);
   }
 
   confirmDelete = event => {
@@ -34,20 +34,18 @@ export class EventAttendeeDeleteDialog extends React.Component<IEventAttendeeDel
           <Translate contentKey="entity.delete.title">Confirm delete operation</Translate>
         </ModalHeader>
         <ModalBody id="clubmanagementApp.eventAttendee.delete.question">
-          <Translate contentKey="clubmanagementApp.eventAttendee.delete.question" interpolate={{ id: eventAttendeeEntity.id }}>
-            Are you sure you want to delete this EventAttendee?
-          </Translate>
+          <Translate contentKey="clubmanagementApp.eventAttendee.delete.question">Are you sure you want to unregister?</Translate>
         </ModalBody>
         <ModalFooter>
           <Button color="secondary" onClick={this.handleClose}>
             <FontAwesomeIcon icon="ban" />
             &nbsp;
-            <Translate contentKey="entity.action.cancel">Cancel</Translate>
+            <Translate contentKey="entity.action.no">No</Translate>
           </Button>
-          <Button id="jhi-confirm-delete-eventAttendee" color="danger" onClick={this.confirmDelete}>
+          <Button id="jhi-confirm-delete-eventAttendee" color="cancel" onClick={this.confirmDelete}>
             <FontAwesomeIcon icon="trash" />
             &nbsp;
-            <Translate contentKey="entity.action.delete">Delete</Translate>
+            <Translate contentKey="entity.action.yes">Yes</Translate>
           </Button>
         </ModalFooter>
       </Modal>

diff --git a/src/main/webapp/app/entities/event-attendee/event-attendee.reducer.ts b/src/main/webapp/app/entities/event-attendee/event-attendee.reducer.ts
@@ -117,6 +117,14 @@ export const getEntity: ICrudGetAction<IEventAttendee> = id => {
   };
 };
 
+export const getEntityByEventIdAndUserId = (eventId, userId) => {
+  const requestUrl = `${apiUrl}/event/${eventId}/user/${userId}`;
+  return {
+    type: ACTION_TYPES.FETCH_EVENTATTENDEE,
+    payload: axios.get<IEventAttendee>(requestUrl)
+  };
+};
+
 export const createEntity: ICrudPutAction<IEventAttendee> = entity => async dispatch => {
   const result = await dispatch({
     type: ACTION_TYPES.CREATE_EVENTATTENDEE,

diff --git a/src/main/webapp/app/entities/event-attendee/index.tsx b/src/main/webapp/app/entities/event-attendee/index.tsx
@@ -5,18 +5,16 @@ import ErrorBoundaryRoute from 'app/shared/error/error-boundary-route';
 
 import EventAttendee from './event-attendee';
 import EventAttendeeDetail from './event-attendee-detail';
-import EventAttendeeUpdate from './event-attendee-update';
-import EventAttendeeDeleteDialog from './event-attendee-delete-dialog';
+import EventAttendeeUpdate from './event-attendee-create';
 
 const Routes = ({ match }) => (
   <>
     <Switch>
-      <ErrorBoundaryRoute exact path={`${match.url}/new`} component={EventAttendeeUpdate} />
+      <ErrorBoundaryRoute exact path={`${match.url}/event/:eventId/new`} component={EventAttendeeUpdate} />
       <ErrorBoundaryRoute exact path={`${match.url}/:id/edit`} component={EventAttendeeUpdate} />
       <ErrorBoundaryRoute exact path={`${match.url}/:id`} component={EventAttendeeDetail} />
       <ErrorBoundaryRoute path={match.url} component={EventAttendee} />
     </Switch>
-    <ErrorBoundaryRoute path={`${match.url}/:id/delete`} component={EventAttendeeDeleteDialog} />
   </>
 );
 

diff --git a/src/main/webapp/app/entities/event/event-detail.tsx b/src/main/webapp/app/entities/event/event-detail.tsx
@@ -10,6 +10,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
 import { IRootState } from 'app/shared/reducers';
 import { getEntity } from './event.reducer';
+import { getEntityByEventIdAndUserId } from '../event-attendee/event-attendee.reducer';
 
 // tslint:disable-next-line:no-unused-variable
 import { APP_LOCAL_TIME_FORMAT, APP_LOCAL_DATE_FORMAT } from 'app/config/constants';
@@ -23,8 +24,14 @@ export class EventDetail extends React.Component<IEventDetailProps> {
     this.props.getEntity(this.props.match.params.id);
   }
 
+  componentDidUpdate(prevProps) {
+    if (prevProps.userId !== this.props.userId && !isNaN(this.props.userId)) {
+      this.props.getEntityByEventIdAndUserId(this.props.match.params.id, this.props.userId);
+    }
+  }
+
   render() {
-    const { eventEntity } = this.props;
+    const { eventEntity, eventAttendeeEntity } = this.props;
     const eventId = this.props.match.params.id;
     return (
       <Container>
@@ -70,9 +77,20 @@ export class EventDetail extends React.Component<IEventDetailProps> {
               <Button tag={Link} to={`/entity/event/${eventEntity.id}/edit`} replace className="my-1" color="secondary">
                 Update
               </Button>
-              <Button className="my-1" color="action">
-                Register
-              </Button>
+              {eventAttendeeEntity.userId ? (
+                <Button
+                  tag={Link}
+                  to={`/entity/event/${eventEntity.id}/eventAttendee/${eventAttendeeEntity.id}/delete`}
+                  className="my-1"
+                  color="cancel"
+                >
+                  Deregister
+                </Button>
+              ) : (
+                <Button tag={Link} to={`/entity/event-attendee/event/${eventEntity.id}/new`} className="my-1" color="action">
+                  Register
+                </Button>
+              )}
             </div>
           </div>
         </div>
@@ -81,11 +99,13 @@ export class EventDetail extends React.Component<IEventDetailProps> {
   }
 }
 
-const mapStateToProps = ({ event }: IRootState) => ({
-  eventEntity: event.entity
+const mapStateToProps = ({ event, authentication, eventAttendee }: IRootState) => ({
+  eventEntity: event.entity,
+  userId: authentication.id,
+  eventAttendeeEntity: eventAttendee.entity
 });
 
-const mapDispatchToProps = { getEntity };
+const mapDispatchToProps = { getEntity, getEntityByEventIdAndUserId };
 
 type StateProps = ReturnType<typeof mapStateToProps>;
 type DispatchProps = typeof mapDispatchToProps;

diff --git a/src/main/webapp/app/entities/event/index.tsx b/src/main/webapp/app/entities/event/index.tsx
@@ -7,16 +7,18 @@ import Event from './event';
 import EventDetail from './event-detail';
 import EventUpdate from './event-update';
 import EventDeleteDialog from './event-delete-dialog';
+import EventAttendeeDeleteDialog from '../event-attendee/event-attendee-delete-dialog';
 
 const Routes = ({ match }) => (
   <>
     <Switch>
       <ErrorBoundaryRoute exact path={`${match.url}/new`} component={EventUpdate} />
       <ErrorBoundaryRoute exact path={`${match.url}/:id/edit`} component={EventUpdate} />
-      <ErrorBoundaryRoute exact path={`${match.url}/:id`} component={EventDetail} />
-      <ErrorBoundaryRoute path={match.url} component={Event} />
+      <ErrorBoundaryRoute path={`${match.url}/:id`} component={EventDetail} />
+      <ErrorBoundaryRoute exact path={match.url} component={Event} />
     </Switch>
     <ErrorBoundaryRoute path={`${match.url}/:id/delete`} component={EventDeleteDialog} />
+    <ErrorBoundaryRoute path={`${match.url}/:id/eventAttendee/:attendeeId/delete`} component={EventAttendeeDeleteDialog} />
   </>
 );
 

diff --git a/src/main/webapp/app/entities/index.tsx b/src/main/webapp/app/entities/index.tsx
@@ -29,7 +29,7 @@ const Routes = ({ match }) => (
       <ErrorBoundaryRoute path={`${match.url}/event-attendee`} component={EventAttendee} />
       <ErrorBoundaryRoute path={`${match.url}/event-budget`} component={Budget} />
       <ErrorBoundaryRoute path={`${match.url}/event-activity`} component={EventActivity} />
-      <ErrorBoundaryRoute path={`${match.url}/event-checklists`} component={EventChecklist} />
+      <ErrorBoundaryRoute path={`${match.url}/event-checklist`} component={EventChecklist} />
       <ErrorBoundaryRoute path={`${match.url}/transaction`} component={Transaction} />
       <ErrorBoundaryRoute path={`${match.url}/claim`} component={Claim} />
       <ErrorBoundaryRoute path={`${match.url}/debt`} component={Debt} />

diff --git a/src/main/webapp/app/styles/event-module.scss b/src/main/webapp/app/styles/event-module.scss
@@ -2,3 +2,8 @@
   color: #0e516d !important;
   font-size: 32px;
 }
+
+.transport-checkbox {
+  height: 25px !important;
+  margin-top: 0px;
+}
diff --git a/src/main/webapp/i18n/en/eventAttendee.json b/src/main/webapp/i18n/en/eventAttendee.json
@@ -5,13 +5,14 @@
         "title": "Event Attendees",
         "createLabel": "Create a new Event Attendee",
         "createOrEditLabel": "Create or edit a Event Attendee",
+        "registerLabel": "Register as Event Attendee",
         "notFound": "No Event Attendee found"
       },
       "created": "A new Event Attendee is created with identifier {{ param }}",
       "updated": "A Event Attendee is updated with identifier {{ param }}",
       "deleted": "A Event Attendee is deleted with identifier {{ param }}",
       "delete": {
-        "question": "Are you sure you want to delete Event Attendee {{ id }}?"
+        "question": "Are you sure you want to deregister?"
       },
       "detail": {
         "title": "Event Attendee"

diff --git a/src/main/webapp/i18n/en/global.json b/src/main/webapp/i18n/en/global.json
@@ -122,7 +122,9 @@
       "open": "Open",
       "save": "Save",
       "view": "View",
-      "create": "Create"
+      "yes": "Yes",
+      "no": "No",
+      "register": "Register"
     },
     "detail": {
       "field": "Field",