diff --git a/src/main/webapp/app/config/icon-loader.ts b/src/main/webapp/app/config/icon-loader.ts index 7f5490ec..d64c9baf 100644 --- a/src/main/webapp/app/config/icon-loader.ts +++ b/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 ); }; diff --git a/src/main/webapp/app/entities/event-attendee/event-attendee-detail.tsx b/src/main/webapp/app/entities/event-attendee/event-attendee-detail.tsx deleted file mode 100644 index 22286c79..00000000 --- a/src/main/webapp/app/entities/event-attendee/event-attendee-detail.tsx +++ /dev/null @@ -1,81 +0,0 @@ -import React from 'react'; -import { connect } from 'react-redux'; -import { Link, RouteComponentProps } from 'react-router-dom'; -import { Button, Row, Col } from 'reactstrap'; -// tslint:disable-next-line:no-unused-variable -import { Translate, ICrudGetAction } from 'react-jhipster'; -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; - -import { IRootState } from 'app/shared/reducers'; -import { getEntity } from './event-attendee.reducer'; -import { IEventAttendee } from 'app/shared/model/event-attendee.model'; -// tslint:disable-next-line:no-unused-variable -import { APP_DATE_FORMAT, APP_LOCAL_DATE_FORMAT } from 'app/config/constants'; - -export interface IEventAttendeeDetailProps extends StateProps, DispatchProps, RouteComponentProps<{ id: string }> {} - -export class EventAttendeeDetail extends React.Component { - componentDidMount() { - this.props.getEntity(this.props.match.params.id); - } - - render() { - const { eventAttendeeEntity } = this.props; - return ( - - -

- EventAttendee [{eventAttendeeEntity.id}] -

-
-
- - User Id - -
-
{eventAttendeeEntity.userId}
-
- - Event Id - -
-
{eventAttendeeEntity.eventId}
-
- - Provide Transport - -
-
{eventAttendeeEntity.provideTransport ? 'true' : 'false'}
-
- -   - - - - ); - } -} - -const mapStateToProps = ({ eventAttendee }: IRootState) => ({ - eventAttendeeEntity: eventAttendee.entity -}); - -const mapDispatchToProps = { getEntity }; - -type StateProps = ReturnType; -type DispatchProps = typeof mapDispatchToProps; - -export default connect( - mapStateToProps, - mapDispatchToProps -)(EventAttendeeDetail); diff --git a/src/main/webapp/app/entities/event-attendee/event-attendee-row.tsx b/src/main/webapp/app/entities/event-attendee/event-attendee-row.tsx new file mode 100644 index 00000000..663f7878 --- /dev/null +++ b/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 { + state = { user: this.props.user }; + + contactUser = () => { + window.open(`https://wa.me/${this.props.user.contactNumber}`, '_blank'); + }; + + render() { + const { user, index } = this.props; + return ( + + {index + 1} + {user.userName} + {user.yearSession} + {!!user.provideTransport ? : null} + + + + + ); + } +} diff --git a/src/main/webapp/app/entities/event-attendee/event-attendee-sort-button.tsx b/src/main/webapp/app/entities/event-attendee/event-attendee-sort-button.tsx new file mode 100644 index 00000000..9efe1b9e --- /dev/null +++ b/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 { + onButtonClick = () => { + this.props.sort(this.props.buttonInfo.buttonSortProp, this.props.buttonInfo.buttonOrderProp); + }; + render() { + return ( + + ); + } +} diff --git a/src/main/webapp/app/entities/event-attendee/event-attendee-sort-modal.tsx b/src/main/webapp/app/entities/event-attendee/event-attendee-sort-modal.tsx new file mode 100644 index 00000000..955f7aaf --- /dev/null +++ b/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 { + render() { + const { isOpen, toggleModal, sort } = this.props; + return ( + + + Sort By + + + + + + ); + } +} + +const ButtonItems = ({ buttonList, sort }) => + buttonList.map(button => ); 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 index aace33ed..85d43583 100644 --- a/src/main/webapp/app/entities/event-attendee/event-attendee.reducer.ts +++ b/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 = (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(`${requestUrl}${sort ? '&' : '?'}cacheBuster=${new Date().getTime()}`) + }; +}; + export const getEntities: ICrudGetAllAction = (page, size, sort) => { const requestUrl = `${apiUrl}${sort ? `?page=${page}&size=${size}&sort=${sort}` : ''}`; return { diff --git a/src/main/webapp/app/entities/event-attendee/event-attendee.scss b/src/main/webapp/app/entities/event-attendee/event-attendee.scss new file mode 100644 index 00000000..78f2c1c2 --- /dev/null +++ b/src/main/webapp/app/entities/event-attendee/event-attendee.scss @@ -0,0 +1,4 @@ +.icon-btn { + padding: 0px !important; + font-size: 14px; +} diff --git a/src/main/webapp/app/entities/event-attendee/event-attendee.tsx b/src/main/webapp/app/entities/event-attendee/event-attendee.tsx index 5a193d83..7c24a4c1 100644 --- a/src/main/webapp/app/entities/event-attendee/event-attendee.tsx +++ b/src/main/webapp/app/entities/event-attendee/event-attendee.tsx @@ -1,120 +1,114 @@ import React from 'react'; import { connect } from 'react-redux'; -import { Link, RouteComponentProps } from 'react-router-dom'; -import { Button, Col, Row, Table } from 'reactstrap'; +import { RouteComponentProps } from 'react-router-dom'; +import { Button, Row, Table, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap'; // tslint:disable-next-line:no-unused-variable -import { Translate, ICrudGetAllAction, getSortState, IPaginationBaseState, JhiPagination, JhiItemCount } from 'react-jhipster'; +import { Translate, getSortState, IPaginationBaseState, JhiPagination, JhiItemCount } from 'react-jhipster'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import { eventTabList } from 'app/shared/util/tab.constants'; import { IRootState } from 'app/shared/reducers'; -import { getEntities } from './event-attendee.reducer'; -import { IEventAttendee } from 'app/shared/model/event-attendee.model'; +import { getEventAttendeeEntities } from './event-attendee.reducer'; // tslint:disable-next-line:no-unused-variable -import { APP_DATE_FORMAT, APP_LOCAL_DATE_FORMAT } from 'app/config/constants'; import { ITEMS_PER_PAGE } from 'app/shared/util/pagination.constants'; +import { CustomTab } from 'app/shared/components/customTab/custom-tab'; +import { EventAttendeeRow } from 'app/entities/event-attendee/event-attendee-row'; +import { EventAttendeeSortModalModal } from 'app/entities/event-attendee/event-attendee-sort-modal'; -export interface IEventAttendeeProps extends StateProps, DispatchProps, RouteComponentProps<{ url: string }> {} +export interface IEventAttendeeProps extends StateProps, DispatchProps, RouteComponentProps<{ url: string; eventId: string }> {} export type IEventAttendeeState = IPaginationBaseState; -export class EventAttendee extends React.Component { - state: IEventAttendeeState = { - ...getSortState(this.props.location, ITEMS_PER_PAGE) +export class EventAttendee extends React.Component { + state = { + ...getSortState(this.props.location, ITEMS_PER_PAGE), + modalIsOpen: false, + eventId: this.props.match.params.eventId }; componentDidMount() { this.getEntities(); } - sort = prop => () => { + openModal = () => { + this.setState({ ...this.state, modalIsOpen: true }); + }; + + closeModal = () => { + this.setState({ ...this.state, modalIsOpen: false }); + }; + + contactUser = contactNumber => { + window.open(`https://wa.me/${contactNumber}`, '_blank'); + }; + + sort = (sortProp, orderProp) => { this.setState( { - order: this.state.order === 'asc' ? 'desc' : 'asc', - sort: prop + order: orderProp, + sort: sortProp }, - () => this.sortEntities() + () => { + this.sortEntities(); + this.closeModal(); + } ); }; sortEntities() { this.getEntities(); - this.props.history.push(`${this.props.location.pathname}?page=${this.state.activePage}&sort=${this.state.sort},${this.state.order}`); + this.props.history.push( + `${this.props.location.pathname}?page=${this.state.activePage}` + + (this.state.sort ? `&sort=${this.state.sort},${this.state.order}` : '') + ); } - handlePagination = activePage => this.setState({ activePage }, () => this.sortEntities()); + handlePagination = activePage => { + this.setState({ activePage }, () => this.sortEntities()); + }; getEntities = () => { - const { activePage, itemsPerPage, sort, order } = this.state; - this.props.getEntities(activePage - 1, itemsPerPage, `${sort},${order}`); + const { eventId, activePage, itemsPerPage, sort, order } = this.state; + this.props.getEventAttendeeEntities(eventId, activePage - 1, itemsPerPage, `${sort},${order}`); }; render() { - const { eventAttendeeList, match, totalItems } = this.props; + const { eventAttendeeList, totalItems } = this.props; return (
+ +
+ +

Event Attendees - - -   - Create new Event Attendee -

+
{eventAttendeeList && eventAttendeeList.length > 0 ? ( - - - - - {eventAttendeeList.map((eventAttendee, i) => ( - - - - - - - + {eventAttendeeList.map((eventAttendee, index) => ( + ))}
- ID + + ID - User Id + + User Name - Event Id - - Provide Transport{' '} - + + Session +
- - {eventAttendee.userId}{eventAttendee.eventId}{eventAttendee.provideTransport ? 'true' : 'false'} -
- - - -
-
@@ -149,7 +143,7 @@ const mapStateToProps = ({ eventAttendee }: IRootState) => ({ }); const mapDispatchToProps = { - getEntities + getEventAttendeeEntities }; type StateProps = ReturnType; diff --git a/src/main/webapp/app/entities/event-attendee/index.tsx b/src/main/webapp/app/entities/event-attendee/index.tsx index 80ac0d63..1ec6670c 100644 --- a/src/main/webapp/app/entities/event-attendee/index.tsx +++ b/src/main/webapp/app/entities/event-attendee/index.tsx @@ -4,16 +4,13 @@ import { Switch } from 'react-router-dom'; 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-create'; const Routes = ({ match }) => ( <> - - - + ); diff --git a/src/main/webapp/app/shared/model/event-attendee.model.ts b/src/main/webapp/app/shared/model/event-attendee.model.ts index 53af0a28..6fb2d2de 100644 --- a/src/main/webapp/app/shared/model/event-attendee.model.ts +++ b/src/main/webapp/app/shared/model/event-attendee.model.ts @@ -1,10 +1,8 @@ export interface IEventAttendee { id?: number; - userName?: String; - userId?: number; - eventId?: number; - year?: number; - contactNumber?: String; + userName?: string; + contactNumber?: string; + yearSession?: string; provideTransport?: boolean; } diff --git a/src/main/webapp/app/shared/util/event-attendee-sort.constants.ts b/src/main/webapp/app/shared/util/event-attendee-sort.constants.ts new file mode 100644 index 00000000..ade62136 --- /dev/null +++ b/src/main/webapp/app/shared/util/event-attendee-sort.constants.ts @@ -0,0 +1,34 @@ +import { IEventAttendeeSortButtonInfo } from 'app/entities/event-attendee/event-attendee-sort-modal'; + +export const eventAttendeeSortButtonList: IEventAttendeeSortButtonInfo[] = [ + { + buttonName: 'Sort By Id', + buttonTranslateKey: 'clubmanagementApp.eventAttendee.sortBy.sortById', + buttonSortProp: '', + buttonOrderProp: '' + }, + { + buttonName: 'Older Year Session First', + buttonTranslateKey: 'clubmanagementApp.eventAttendee.sortBy.sortByYearSessionAsc', + buttonSortProp: 'yearSession', + buttonOrderProp: 'asc' + }, + { + buttonName: 'Newer Year Session First', + buttonTranslateKey: 'clubmanagementApp.eventAttendee.sortBy.sortByYearSessionDesc', + buttonSortProp: 'yearSession', + buttonOrderProp: 'desc' + }, + { + buttonName: 'Provide Transport First', + buttonTranslateKey: 'clubmanagementApp.eventAttendee.sortBy.provideTransportFirst', + buttonSortProp: 'provideTransport', + buttonOrderProp: 'desc' + }, + { + buttonName: 'Does Not Provide Transport First', + buttonTranslateKey: 'clubmanagementApp.eventAttendee.sortBy.noProvideTransportFirst', + buttonSortProp: 'provideTransport', + buttonOrderProp: 'asc' + } +]; diff --git a/src/main/webapp/i18n/en/eventAttendee.json b/src/main/webapp/i18n/en/eventAttendee.json index e5e722b6..01c2c9e8 100644 --- a/src/main/webapp/i18n/en/eventAttendee.json +++ b/src/main/webapp/i18n/en/eventAttendee.json @@ -6,7 +6,16 @@ "createLabel": "Create a new Event Attendee", "createOrEditLabel": "Create or edit a Event Attendee", "registerLabel": "Register as Event Attendee", - "notFound": "No Event Attendee found" + "notFound": "No Event Attendee found", + "sortBy": "Sort By" + }, + "sortBy": { + "title": "Sort By", + "sortById": "Sort By Id", + "sortByYearSessionAsc": "Older Year Session First", + "sortByYearSessionDesc": "Newer Year Session First", + "provideTransportFirst": "Provide Transport First", + "noProvideTransportFirst": "Does Not Provide Transport First" }, "created": "A new Event Attendee is created with identifier {{ param }}", "updated": "A Event Attendee is updated with identifier {{ param }}", @@ -19,8 +28,9 @@ }, "userId": "User Id", "eventId": "Event Id", - "provideTransport": "Provide Transport", - "tab": "Attendees" + "tab": "Attendees", + "userName": "User Name", + "session": "Session" } } } diff --git a/src/main/webapp/i18n/zh-cn/eventAttendee.json b/src/main/webapp/i18n/zh-cn/eventAttendee.json index 22feb671..7c96b71d 100644 --- a/src/main/webapp/i18n/zh-cn/eventAttendee.json +++ b/src/main/webapp/i18n/zh-cn/eventAttendee.json @@ -2,25 +2,35 @@ "clubmanagementApp": { "eventAttendee": { "home": { - "title": "Event Attendees", - "createLabel": "创建新 Event Attendee", - "createOrEditLabel": "创建或编辑 Event Attendee", + "title": "活动参与者", "registerLabel": "注册为参与者", - "notFound": "No Event Attendee found" + "createLabel": "创建新活动参与者", + "createOrEditLabel": "创建或编辑活动参与者", + "notFound": "无活动参与者", + "sortBy": "排序方式" }, - "created": "Event Attendee {{ param }} 创建成功", - "updated": "Event Attendee {{ param }} 更新成功", - "deleted": "Event Attendee {{ param }} 删除成功", + "sortBy": { + "title": "排序方式", + "sortById": "按编号排序", + "sortByYearSessionAsc": "旧学年度优先", + "sortByYearSessionDesc": "新学年度优先", + "provideTransportFirst": "有提供交通工具者优先", + "noProvideTransportFirst": "无提供交通工具者优先" + }, + "created": "活动参与者 {{ param }} 创建成功", + "updated": "活动参与者 {{ param }} 更新成功", + "deleted": "活动参与者 {{ param }} 删除成功", "delete": { "question": "你确定要注销吗？" }, "detail": { - "title": "Event Attendee" + "title": "活动参与者" }, - "userId": "User Id", - "eventId": "Event Id", - "provideTransport": "Provide Transport", - "tab": "Attendees" + "userId": "用户编号", + "eventId": "活动编号", + "tab": "活动参与者", + "userName": "用户名", + "session": "学年度" } } }