Skip to content

Commit

Permalink
Merge pull request #158 from Five-Fishes/family-member-list
Browse files Browse the repository at this point in the history 
Family member list
  • Loading branch information
@CarlosSia
CarlosSia authored Oct 12, 2021
2 parents a95b810 + ee7edb7 commit 51a9fe2
Show file tree
Hide file tree
Showing 22 changed files with 871 additions and 269 deletions.
7 changes: 6 additions & 1 deletion src/main/webapp/app/_bootstrap-variables.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,5 +15,10 @@ $theme-colors: (
'action': #1db2a1,
'cancel': #dd5959,
'expense': #c21717,
'income': #0e516d
'income': #0e516d,
'bimu': #7cc250,
'jinlong': #b78cfb,
'qicai': #71ccff,
'nemo': #ff9e3c,
'peacock': #ff7d7d,
);
4 changes: 3 additions & 1 deletion src/main/webapp/app/config/icon-loader.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,7 @@ import { faWhatsappSquare } from '@fortawesome/free-brands-svg-icons/faWhatsappS
import { library } from '@fortawesome/fontawesome-svg-core';
import { faSortAmountUp } from '@fortawesome/free-solid-svg-icons/faSortAmountUp';
import { faEuroSign } from '@fortawesome/free-solid-svg-icons/faEuroSign';
import { faFilter } from '@fortawesome/free-solid-svg-icons/faFilter';
import { faTimes } from '@fortawesome/free-solid-svg-icons';

export const loadIcons = () => {
Expand Down Expand Up @@ -104,6 +105,7 @@ export const loadIcons = () => {
faSortAmountUp,
faPlaneDeparture,
faEuroSign,
faFish
faFish,
faFilter
);
};
226 changes: 151 additions & 75 deletions src/main/webapp/app/entities/club-family/family-member-create.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,16 +6,30 @@ import { AvForm, AvGroup, AvInput, AvField } from 'availity-reactstrap-validatio
import { Translate, translate } from 'react-jhipster';
import { connect } from 'react-redux';
import { getUsersWithoutFamily } from 'app/modules/administration/user-management/user-management.reducer';
import { createEntity, reset } from 'app/entities/user-cc-info/user-cc-info.reducer';
import { getEntity, createEntity, updateEntity, deleteEntity, reset } from 'app/entities/user-cc-info/user-cc-info.reducer';
import { IRootState } from 'app/shared/reducers';
import { IUser } from 'app/shared/model/user.model';
import { concatFullName } from 'app/shared/util/string-util';
import { IRedirectLocationState } from 'app/shared/auth/app-route';

export interface IFamilyMemberCreateProps extends StateProps, DispatchProps, RouteComponentProps<{ id: string }> {}
export interface IFamilyMemberCreateProps
extends StateProps,
DispatchProps,
RouteComponentProps<{ id: string; familyCode: string }, any, IRedirectLocationState> {}

class FamilyMemberCreate extends React.Component<IFamilyMemberCreateProps> {
export interface IFamilyMemberState {
isNew: boolean;
hasFamilyCode: boolean;
}
export class FamilyMemberCreate extends React.Component<IFamilyMemberCreateProps, IFamilyMemberState> {
constructor(props: IFamilyMemberCreateProps) {
super(props);
this.state = {
isNew: !!this.props.match.params.familyCode && !this.props.match.params.id,
hasFamilyCode: !!this.props.match.params.familyCode || !!this.props.match.params.id,
};
this.renderNames = this.renderNames.bind(this);
this.setFamilyCode = this.setFamilyCode.bind(this);
}

componentWillUpdate(nextProps: IFamilyMemberCreateProps) {
Expand All @@ -24,106 +38,164 @@ class FamilyMemberCreate extends React.Component<IFamilyMemberCreateProps> {
}
}

handleClose = () => {
this.props.history.push(`/entity/members/club-family/${this.props.match.params.id}`);
};

componentDidMount() {
this.props.reset();
this.props.getUsersWithoutFamily();
if (this.state.isNew) {
this.props.reset();
this.props.getUsersWithoutFamily();
} else {
this.props.getEntity(this.props.match.params.id);
}
}

renderNames(users: readonly IUser[]): ReactNode {
return users.map((user: IUser) => {
if (user) {
return (
<option key={user.id} value={user.id}>
{concatFullName(user.firstName, user.lastName)}
</option>
);
}
});
return users && users.length <= 0 ? (
<option disabled>{translate('error.noUserFound')}</option>
) : (
users.map((user: IUser) => {
if (user) {
return (
<option key={user.id} value={user.id}>
{concatFullName(user.firstName, user.lastName)}
</option>
);
}
})
);
}

handleClose = () => {
this.props.history.push(`${this.props.location.state?.from}` ?? '/entity/members/cc-family');
};

setFamilyCode(event: { target: HTMLInputElement }): void {
if (event.target.value === '') {
this.setState({
hasFamilyCode: false,
});
} else {
this.setState({
hasFamilyCode: true,
});
}
}

saveEntity = (event: any, errors: any, values: any) => {
if (errors.length === 0) {
if (values.familyRole === 'MEMBER') {
values.familyRole = null;
}

const { userEntity } = this.props;
const entity = {
...userEntity,
...values,
};

this.props.createEntity(entity);
if (this.state.isNew) {
this.props.createEntity(entity);
} else {
if (entity.clubFamilyCode === '') {
this.props.deleteEntity(entity.id);
} else {
this.props.updateEntity(entity);
}
}
}
};

render() {
const { users } = this.props;
const { id: familyCode } = this.props.match.params;
const { location, users, userEntity, loading } = this.props;
const { familyCode } = this.props.match.params;
const { isNew, hasFamilyCode } = this.state;
return (
<div className="mx-3">
<Row className="justify-content-center">
<Col md="8">
<h2>
<Translate contentKey="clubmanagementApp.clubFamily.member.createLabel">Add Family Member</Translate>
</h2>
{isNew ? (
<h2>
<Translate contentKey="clubmanagementApp.clubFamily.member.createLabel">Add CC Family Member</Translate>
</h2>
) : (
<h2>
<Translate contentKey="clubmanagementApp.clubFamily.member.editLabel">Edit CC Family Member</Translate>
</h2>
)}
</Col>
</Row>
<Row className="justify-content-center">
<Col md="8">
<AvForm model={{}} onSubmit={this.saveEntity}>
<AvGroup>
<Label for="memberLabel">Name</Label>
<AvField id="member-name" type="select" className="form-control" name="userId" required>
<option value="" disabled hidden>
{translate('global.select.selectUser')}
</option>
{this.renderNames(users)}
</AvField>
</AvGroup>
<AvGroup>
<Label id="familyLabel" for="club-family">
Family
</Label>
<AvField id="club-family" type="select" name="clubFamilyCode" value={familyCode} disabled>
<option value="JIN_LONG">{translate('clubmanagementApp.clubFamily.jinlong.name')}</option>
<option value="BI_MU">{translate('clubmanagementApp.clubFamily.bimu.name')}</option>
<option value="QI_CAI">{translate('clubmanagementApp.clubFamily.qicai.name')}</option>
<option value="KONG_QUE">{translate('clubmanagementApp.clubFamily.kongque.name')}</option>
<option value="XIAO_CHOU">{translate('clubmanagementApp.clubFamily.xiaochou.name')}</option>
</AvField>
</AvGroup>
<AvGroup>
<Label id="roleLabel" for="club-member-role">
Role
</Label>
<AvInput id="club-member-role" type="select" name="familyRole" value={'MEMBER'}>
<option value={'MEMBER'}>{translate('clubmanagementApp.ClubFamilyRole.MEMBER')}</option>
<option value="FATHER">{translate('clubmanagementApp.ClubFamilyRole.FATHER')}</option>
<option value="MOTHER">{translate('clubmanagementApp.ClubFamilyRole.MOTHER')}</option>
</AvInput>
</AvGroup>
<div className="general-buttonContainer--flexContainer">
<Button
className="general-button--width"
tag={Link}
id="cancel-save"
to={`/entity/members/club-family/${familyCode}`}
replace
color="cancel"
>
<Translate contentKey="entity.action.cancel">Cancel</Translate>
</Button>
&nbsp;
<Button className="general-button--width" color="action" id="save-entity" type="submit">
<Translate contentKey="entity.action.add">Add</Translate>
</Button>
</div>
</AvForm>
{loading ? (
<p>Loading...</p>
) : (
<AvForm model={isNew ? {} : userEntity} onSubmit={this.saveEntity}>
<AvGroup>
<Label for="user-id">Name</Label>
<AvField id="user-id" type="select" className="form-control" name="userId" required={isNew} disabled={!isNew}>
<option value="" disabled hidden>
{translate('global.select.selectUser')}
</option>

{isNew ? (
this.renderNames(users)
) : (
<option key={userEntity.id} value={userEntity.id}>
{concatFullName(userEntity?.user?.firstName, userEntity?.user?.lastName)}
</option>
)}
</AvField>
</AvGroup>
<AvGroup>
<Label id="familyLabel" for="club-family">
Family
</Label>
<AvField
id="club-family"
type="select"
name="clubFamilyCode"
value={familyCode ?? userEntity.clubFamilyCode}
disabled={isNew}
onChange={this.setFamilyCode}
>
{isNew ? null : <option value="">{translate('clubmanagementApp.clubFamily.none')}</option>}
<option value="JIN_LONG">{translate('clubmanagementApp.clubFamily.jinlong.name')}</option>
<option value="BI_MU">{translate('clubmanagementApp.clubFamily.bimu.name')}</option>
<option value="QI_CAI">{translate('clubmanagementApp.clubFamily.qicai.name')}</option>
<option value="KONG_QUE">{translate('clubmanagementApp.clubFamily.kongque.name')}</option>
<option value="XIAO_CHOU">{translate('clubmanagementApp.clubFamily.xiaochou.name')}</option>
</AvField>
</AvGroup>
{hasFamilyCode ? (
<AvGroup>
<Label id="roleLabel" for="club-member-role">
Role
</Label>
<AvInput id="club-member-role" type="select" name="familyRole" value={(!isNew && userEntity.familyRole) || 'MEMBER'}>
<option value={'MEMBER'}>{translate('clubmanagementApp.ClubFamilyRole.MEMBER')}</option>
<option value="FATHER">{translate('clubmanagementApp.ClubFamilyRole.FATHER')}</option>
<option value="MOTHER">{translate('clubmanagementApp.ClubFamilyRole.MOTHER')}</option>
</AvInput>
</AvGroup>
) : null}
<div className="general-buttonContainer--flexContainer">
<Button
className="general-button--width"
tag={Link}
id="cancel-save"
to={location.state?.from ?? '/entity/members/cc-family'}
replace
color="cancel"
>
<Translate contentKey="entity.action.cancel">Cancel</Translate>
</Button>
&nbsp;
<Button className="general-button--width" color="action" id="save-entity" type="submit">
{isNew ? (
<Translate contentKey="entity.action.add">Add</Translate>
) : (
<Translate contentKey="entity.action.update">Update</Translate>
)}
</Button>
</div>
</AvForm>
)}
</Col>
</Row>
</div>
Expand All @@ -134,14 +206,18 @@ class FamilyMemberCreate extends React.Component<IFamilyMemberCreateProps> {
// Reducer props
const mapStateToProps = (storeState: IRootState) => ({
users: storeState.userManagement.users,
loading: storeState.userCCInfo.loading,
userEntity: storeState.userCCInfo.entity,
updateSuccess: storeState.userCCInfo.updateSuccess,
});

// Reducer Action Creators
const mapDispatchToProps = {
getEntity,
getUsersWithoutFamily,
createEntity,
updateEntity,
deleteEntity,
reset,
};

Expand Down
25 changes: 25 additions & 0 deletions src/main/webapp/app/entities/club-family/family-member.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
.search-bar-prepend span {
background-color: white;
border-right: none;
}

.search-bar-input {
border-left: none;
border-right: none;
}

.search-bar-append {
background-color: white;
border-left: none;
border-color: #ced4da;
}

.search-bar-append:focus {
background-color: white;
}

.member-card {
padding: 1rem 0.5rem 1rem 1rem;
margin-top: 1rem;
margin-bottom: 1rem;
}
Loading

0 comments on commit 51a9fe2

Please sign in to comment.