ASC.People: ProfileAction: refactoring
This commit is contained in:
parent
e3f341c032
commit
39d332e10e
@ -36,8 +36,6 @@ class CreateUserForm extends React.Component {
|
||||
}
|
||||
|
||||
mapPropsToState = (props) => {
|
||||
const isVisitor = props.match.params.type === "guest";
|
||||
|
||||
return {
|
||||
isLoading: false,
|
||||
showPassword: false,
|
||||
@ -47,7 +45,10 @@ class CreateUserForm extends React.Component {
|
||||
email: false,
|
||||
password: false,
|
||||
},
|
||||
profile: toEmployeeWrapper({ isVisitor: isVisitor})
|
||||
profile: toEmployeeWrapper({
|
||||
isVisitor: props.match.params.type === "guest",
|
||||
passwordType: "link"
|
||||
})
|
||||
};
|
||||
}
|
||||
|
||||
@ -80,12 +81,13 @@ class CreateUserForm extends React.Component {
|
||||
}
|
||||
|
||||
validate() {
|
||||
const { profile } = this.state;
|
||||
const emailRegex = /.+@.+\..+/;
|
||||
const errors = {
|
||||
firstName: !this.state.profile.firstName,
|
||||
lastName: !this.state.profile.lastName,
|
||||
email: !emailRegex.test(this.state.profile.email),
|
||||
password: this.state.profile.passwordType === "temp" && !this.state.profile.password
|
||||
firstName: !profile.firstName,
|
||||
lastName: !profile.lastName,
|
||||
email: !emailRegex.test(profile.email),
|
||||
password: profile.passwordType === "temp" && !profile.password
|
||||
};
|
||||
const hasError = errors.firstName || errors.lastName || errors.email || errors.password;
|
||||
this.setState({errors: errors});
|
||||
@ -114,129 +116,132 @@ class CreateUserForm extends React.Component {
|
||||
}
|
||||
|
||||
render() {
|
||||
const { isLoading, showPassword, errors, profile } = this.state;
|
||||
const { t } = this.props;
|
||||
|
||||
return (
|
||||
<>
|
||||
<MainContainer>
|
||||
<AvatarContainer>
|
||||
<Avatar
|
||||
size="max"
|
||||
role={getUserRole(this.state.profile)}
|
||||
role={getUserRole(profile)}
|
||||
editing={true}
|
||||
editLabel={this.props.t("AddPhoto")}
|
||||
editLabel={t("AddPhoto")}
|
||||
/>
|
||||
</AvatarContainer>
|
||||
<MainFieldsContainer>
|
||||
<TextField
|
||||
isRequired={true}
|
||||
hasError={this.state.errors.firstName}
|
||||
labelText={`${this.props.t("FirstName")}:`}
|
||||
hasError={errors.firstName}
|
||||
labelText={`${t("FirstName")}:`}
|
||||
inputName="firstName"
|
||||
inputValue={this.state.profile.firstName}
|
||||
inputIsDisabled={this.state.isLoading}
|
||||
inputValue={profile.firstName}
|
||||
inputIsDisabled={isLoading}
|
||||
inputOnChange={this.onTextChange}
|
||||
inputAutoFocussed={true}
|
||||
inputTabIndex={1}
|
||||
/>
|
||||
<TextField
|
||||
isRequired={true}
|
||||
hasError={this.state.errors.lastName}
|
||||
labelText={`${this.props.t("LastName")}:`}
|
||||
hasError={errors.lastName}
|
||||
labelText={`${t("LastName")}:`}
|
||||
inputName="lastName"
|
||||
inputValue={this.state.profile.lastName}
|
||||
inputIsDisabled={this.state.isLoading}
|
||||
inputValue={profile.lastName}
|
||||
inputIsDisabled={isLoading}
|
||||
inputOnChange={this.onTextChange}
|
||||
inputTabIndex={2}
|
||||
/>
|
||||
<TextField
|
||||
isRequired={true}
|
||||
hasError={this.state.errors.email}
|
||||
labelText={`${this.props.t("Email")}:`}
|
||||
hasError={errors.email}
|
||||
labelText={`${t("Email")}:`}
|
||||
inputName="email"
|
||||
inputValue={this.state.profile.email}
|
||||
inputIsDisabled={this.state.isLoading}
|
||||
inputValue={profile.email}
|
||||
inputIsDisabled={isLoading}
|
||||
inputOnChange={this.onTextChange}
|
||||
inputTabIndex={3}
|
||||
/>
|
||||
<PasswordField
|
||||
isRequired={true}
|
||||
hasError={this.state.errors.password}
|
||||
labelText={`${this.props.t("Password")}:`}
|
||||
hasError={errors.password}
|
||||
labelText={`${t("Password")}:`}
|
||||
radioName="passwordType"
|
||||
radioValue={this.state.profile.passwordType}
|
||||
radioValue={profile.passwordType}
|
||||
radioOptions={[
|
||||
{ value: 'link', label: this.props.t("ActivationLink")},
|
||||
{ value: 'temp', label: this.props.t("TemporaryPassword")}
|
||||
{ value: 'link', label: t("ActivationLink")},
|
||||
{ value: 'temp', label: t("TemporaryPassword")}
|
||||
]}
|
||||
radioIsDisabled={this.state.isLoading}
|
||||
radioIsDisabled={isLoading}
|
||||
radioOnChange={this.onTextChange}
|
||||
inputName="password"
|
||||
inputValue={this.state.profile.password}
|
||||
inputIsDisabled={this.state.isLoading || this.state.profile.passwordType === "link"}
|
||||
inputValue={profile.password}
|
||||
inputIsDisabled={isLoading || profile.passwordType === "link"}
|
||||
inputOnChange={this.onTextChange}
|
||||
inputIconOnClick={this.onShowPassword}
|
||||
inputShowPassword={this.state.showPassword}
|
||||
inputShowPassword={showPassword}
|
||||
refreshIconOnClick={()=>{}}
|
||||
copyLinkText={this.props.t("CopyEmailAndPassword")}
|
||||
copyLinkText={t("CopyEmailAndPassword")}
|
||||
copyLinkOnClick={()=>{}}
|
||||
inputTabIndex={4}
|
||||
/>
|
||||
<DateField
|
||||
labelText={`${this.props.t("Birthdate")}:`}
|
||||
labelText={`${t("Birthdate")}:`}
|
||||
inputName="birthday"
|
||||
inputValue={this.state.profile.birthday ? new Date(this.state.profile.birthday) : undefined}
|
||||
inputIsDisabled={this.state.isLoading}
|
||||
inputValue={profile.birthday ? new Date(profile.birthday) : undefined}
|
||||
inputIsDisabled={isLoading}
|
||||
inputOnChange={this.onBirthdayDateChange}
|
||||
inputTabIndex={5}
|
||||
/>
|
||||
<RadioField
|
||||
labelText={`${this.props.t("Sex")}:`}
|
||||
labelText={`${t("Sex")}:`}
|
||||
radioName="sex"
|
||||
radioValue={this.state.profile.sex}
|
||||
radioValue={profile.sex}
|
||||
radioOptions={[
|
||||
{ value: 'male', label: this.props.t("SexMale")},
|
||||
{ value: 'female', label: this.props.t("SexFemale")}
|
||||
{ value: 'male', label: t("SexMale")},
|
||||
{ value: 'female', label: t("SexFemale")}
|
||||
]}
|
||||
radioIsDisabled={this.state.isLoading}
|
||||
radioIsDisabled={isLoading}
|
||||
radioOnChange={this.onTextChange}
|
||||
/>
|
||||
<DateField
|
||||
labelText={`${this.props.t("CustomEmployedSinceDate", { employedSinceDate })}:`}
|
||||
labelText={`${t("CustomEmployedSinceDate", { employedSinceDate })}:`}
|
||||
inputName="workFrom"
|
||||
inputValue={this.state.profile.workFrom ? new Date(this.state.profile.workFrom) : undefined}
|
||||
inputIsDisabled={this.state.isLoading}
|
||||
inputValue={profile.workFrom ? new Date(profile.workFrom) : undefined}
|
||||
inputIsDisabled={isLoading}
|
||||
inputOnChange={this.onWorkFromDateChange}
|
||||
inputTabIndex={6}
|
||||
/>
|
||||
<TextField
|
||||
labelText={`${this.props.t("Location")}:`}
|
||||
labelText={`${t("Location")}:`}
|
||||
inputName="location"
|
||||
inputValue={this.state.profile.location}
|
||||
inputIsDisabled={this.state.isLoading}
|
||||
inputValue={profile.location}
|
||||
inputIsDisabled={isLoading}
|
||||
inputOnChange={this.onTextChange}
|
||||
inputTabIndex={7}
|
||||
/>
|
||||
<TextField
|
||||
labelText={`${this.props.t("CustomPosition", { position })}:`}
|
||||
labelText={`${t("CustomPosition", { position })}:`}
|
||||
inputName="title"
|
||||
inputValue={this.state.profile.title}
|
||||
inputIsDisabled={this.state.isLoading}
|
||||
inputValue={profile.title}
|
||||
inputIsDisabled={isLoading}
|
||||
inputOnChange={this.onTextChange}
|
||||
inputTabIndex={8}
|
||||
/>
|
||||
<DepartmentField
|
||||
labelText={`${this.props.t("CustomDepartment", { department })}:`}
|
||||
departments={this.state.profile.groups}
|
||||
labelText={`${t("CustomDepartment", { department })}:`}
|
||||
departments={profile.groups}
|
||||
onRemoveDepartment={this.onGroupClose}
|
||||
/>
|
||||
</MainFieldsContainer>
|
||||
</MainContainer>
|
||||
<div>
|
||||
<Text.ContentHeader>{this.props.t("Comments")}</Text.ContentHeader>
|
||||
<Textarea name="notes" value={this.state.profile.notes} isDisabled={this.state.isLoading} onChange={this.onTextChange} tabIndex={9}/>
|
||||
<Text.ContentHeader>{t("Comments")}</Text.ContentHeader>
|
||||
<Textarea name="notes" value={profile.notes} isDisabled={isLoading} onChange={this.onTextChange} tabIndex={9}/>
|
||||
</div>
|
||||
<div style={{marginTop: "60px"}}>
|
||||
<Button label={this.props.t("SaveButton")} onClick={this.handleSubmit} primary isDisabled={this.state.isLoading} size="big" tabIndex={10}/>
|
||||
<Button label={this.props.t("CancelButton")} onClick={this.onCancel} isDisabled={this.state.isLoading} size="big" style={{ marginLeft: "8px" }} tabIndex={11}/>
|
||||
<Button label={t("SaveButton")} onClick={this.handleSubmit} primary isDisabled={isLoading} size="big" tabIndex={10}/>
|
||||
<Button label={t("CancelButton")} onClick={this.onCancel} isDisabled={isLoading} size="big" style={{ marginLeft: "8px" }} tabIndex={11}/>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
|
||||
@ -44,8 +44,6 @@ class UpdateUserForm extends React.Component {
|
||||
errors: {
|
||||
firstName: false,
|
||||
lastName: false,
|
||||
email: false,
|
||||
password: false,
|
||||
},
|
||||
profile: toEmployeeWrapper(props.profile)
|
||||
};
|
||||
@ -76,14 +74,12 @@ class UpdateUserForm extends React.Component {
|
||||
}
|
||||
|
||||
validate() {
|
||||
const emailRegex = /.+@.+\..+/;
|
||||
const { profile } = this.state;
|
||||
const errors = {
|
||||
firstName: !this.state.profile.firstName,
|
||||
lastName: !this.state.profile.lastName,
|
||||
email: !emailRegex.test(this.state.profile.email),
|
||||
password: this.state.profile.passwordType === "temp" && !this.state.profile.password
|
||||
firstName: !profile.firstName,
|
||||
lastName: !profile.lastName,
|
||||
};
|
||||
const hasError = errors.firstName || errors.lastName || errors.email || errors.password;
|
||||
const hasError = errors.firstName || errors.lastName;
|
||||
this.setState({errors: errors});
|
||||
return !hasError;
|
||||
}
|
||||
@ -118,140 +114,143 @@ class UpdateUserForm extends React.Component {
|
||||
}
|
||||
|
||||
render() {
|
||||
const { isLoading, isDialogVisible, errors, profile } = this.state;
|
||||
const { t } = this.props;
|
||||
|
||||
return (
|
||||
<>
|
||||
<MainContainer>
|
||||
<AvatarContainer>
|
||||
<Avatar
|
||||
size="max"
|
||||
role={getUserRole(this.state.profile)}
|
||||
source={this.state.profile.avatarMax}
|
||||
userName={this.state.profile.displayName}
|
||||
role={getUserRole(profile)}
|
||||
source={profile.avatarMax}
|
||||
userName={profile.displayName}
|
||||
editing={true}
|
||||
editLabel={this.props.t("EditPhoto")}
|
||||
editLabel={t("EditPhoto")}
|
||||
/>
|
||||
</AvatarContainer>
|
||||
<MainFieldsContainer>
|
||||
<TextChangeField
|
||||
labelText={`${this.props.t("Email")}:`}
|
||||
labelText={`${t("Email")}:`}
|
||||
inputName="email"
|
||||
inputValue={this.state.profile.email}
|
||||
buttonText={this.props.t("ChangeButton")}
|
||||
buttonIsDisabled={this.state.isLoading}
|
||||
inputValue={profile.email}
|
||||
buttonText={t("ChangeButton")}
|
||||
buttonIsDisabled={isLoading}
|
||||
buttonOnClick={this.onDialogShow}
|
||||
buttonTabIndex={1}
|
||||
/>
|
||||
<TextChangeField
|
||||
labelText={`${this.props.t("Password")}:`}
|
||||
labelText={`${t("Password")}:`}
|
||||
inputName="password"
|
||||
inputValue={this.state.profile.password}
|
||||
buttonText={this.props.t("ChangeButton")}
|
||||
buttonIsDisabled={this.state.isLoading}
|
||||
inputValue={profile.password}
|
||||
buttonText={t("ChangeButton")}
|
||||
buttonIsDisabled={isLoading}
|
||||
buttonOnClick={this.onDialogShow}
|
||||
buttonTabIndex={2}
|
||||
/>
|
||||
<TextChangeField
|
||||
labelText={`${this.props.t("Phone")}:`}
|
||||
labelText={`${t("Phone")}:`}
|
||||
inputName="phone"
|
||||
inputValue={this.state.profile.phone}
|
||||
buttonText={this.props.t("ChangeButton")}
|
||||
buttonIsDisabled={this.state.isLoading}
|
||||
inputValue={profile.phone}
|
||||
buttonText={t("ChangeButton")}
|
||||
buttonIsDisabled={isLoading}
|
||||
buttonOnClick={this.onDialogShow}
|
||||
buttonTabIndex={3}
|
||||
/>
|
||||
<TextField
|
||||
isRequired={true}
|
||||
hasError={this.state.errors.firstName}
|
||||
labelText={`${this.props.t("FirstName")}:`}
|
||||
hasError={errors.firstName}
|
||||
labelText={`${t("FirstName")}:`}
|
||||
inputName="firstName"
|
||||
inputValue={this.state.profile.firstName}
|
||||
inputIsDisabled={this.state.isLoading}
|
||||
inputValue={profile.firstName}
|
||||
inputIsDisabled={isLoading}
|
||||
inputOnChange={this.onTextChange}
|
||||
inputAutoFocussed={true}
|
||||
inputTabIndex={4}
|
||||
/>
|
||||
<TextField
|
||||
isRequired={true}
|
||||
hasError={this.state.errors.lastName}
|
||||
labelText={`${this.props.t("LastName")}:`}
|
||||
hasError={errors.lastName}
|
||||
labelText={`${t("LastName")}:`}
|
||||
inputName="lastName"
|
||||
inputValue={this.state.profile.lastName}
|
||||
inputIsDisabled={this.state.isLoading}
|
||||
inputValue={profile.lastName}
|
||||
inputIsDisabled={isLoading}
|
||||
inputOnChange={this.onTextChange}
|
||||
inputTabIndex={5}
|
||||
/>
|
||||
<DateField
|
||||
labelText={`${this.props.t("Birthdate")}:`}
|
||||
labelText={`${t("Birthdate")}:`}
|
||||
inputName="birthday"
|
||||
inputValue={this.state.profile.birthday ? new Date(this.state.profile.birthday) : undefined}
|
||||
inputIsDisabled={this.state.isLoading}
|
||||
inputValue={profile.birthday ? new Date(profile.birthday) : undefined}
|
||||
inputIsDisabled={isLoading}
|
||||
inputOnChange={this.onBirthdayDateChange}
|
||||
inputTabIndex={6}
|
||||
/>
|
||||
<RadioField
|
||||
labelText={`${this.props.t("Sex")}:`}
|
||||
labelText={`${t("Sex")}:`}
|
||||
radioName="sex"
|
||||
radioValue={this.state.profile.sex}
|
||||
radioValue={profile.sex}
|
||||
radioOptions={[
|
||||
{ value: 'male', label: this.props.t("SexMale")},
|
||||
{ value: 'female', label: this.props.t("SexFemale")}
|
||||
{ value: 'male', label: t("SexMale")},
|
||||
{ value: 'female', label: t("SexFemale")}
|
||||
]}
|
||||
radioIsDisabled={this.state.isLoading}
|
||||
radioIsDisabled={isLoading}
|
||||
radioOnChange={this.onTextChange}
|
||||
/>
|
||||
<RadioField
|
||||
labelText={`${this.props.t("UserType")}:`}
|
||||
labelText={`${t("UserType")}:`}
|
||||
radioName="sex"
|
||||
radioValue={this.state.profile.isVisitor.toString()}
|
||||
radioValue={profile.isVisitor.toString()}
|
||||
radioOptions={[
|
||||
{ value: "true", label: this.props.t("CustomTypeGuest", { typeGuest })},
|
||||
{ value: "false", label: this.props.t("CustomTypeUser", { typeUser })}
|
||||
{ value: "true", label: t("CustomTypeGuest", { typeGuest })},
|
||||
{ value: "false", label: t("CustomTypeUser", { typeUser })}
|
||||
]}
|
||||
radioIsDisabled={this.state.isLoading}
|
||||
radioIsDisabled={isLoading}
|
||||
radioOnChange={this.onTextChange}
|
||||
/>
|
||||
<DateField
|
||||
labelText={`${this.props.t("CustomEmployedSinceDate", { employedSinceDate })}:`}
|
||||
labelText={`${t("CustomEmployedSinceDate", { employedSinceDate })}:`}
|
||||
inputName="workFrom"
|
||||
inputValue={this.state.profile.workFrom ? new Date(this.state.profile.workFrom) : undefined}
|
||||
inputIsDisabled={this.state.isLoading}
|
||||
inputValue={profile.workFrom ? new Date(profile.workFrom) : undefined}
|
||||
inputIsDisabled={isLoading}
|
||||
inputOnChange={this.onWorkFromDateChange}
|
||||
inputTabIndex={7}
|
||||
/>
|
||||
<TextField
|
||||
labelText={`${this.props.t("Location")}:`}
|
||||
labelText={`${t("Location")}:`}
|
||||
inputName="location"
|
||||
inputValue={this.state.profile.location}
|
||||
inputIsDisabled={this.state.isLoading}
|
||||
inputValue={profile.location}
|
||||
inputIsDisabled={isLoading}
|
||||
inputOnChange={this.onTextChange}
|
||||
inputTabIndex={8}
|
||||
/>
|
||||
<TextField
|
||||
labelText={`${this.props.t("CustomPosition", { position })}:`}
|
||||
labelText={`${t("CustomPosition", { position })}:`}
|
||||
inputName="title"
|
||||
inputValue={this.state.profile.title}
|
||||
inputIsDisabled={this.state.isLoading}
|
||||
inputValue={profile.title}
|
||||
inputIsDisabled={isLoading}
|
||||
inputOnChange={this.onTextChange}
|
||||
inputTabIndex={9}
|
||||
/>
|
||||
<DepartmentField
|
||||
labelText={`${this.props.t("CustomDepartment", { department })}:`}
|
||||
departments={this.state.profile.groups}
|
||||
labelText={`${t("CustomDepartment", { department })}:`}
|
||||
departments={profile.groups}
|
||||
onRemoveDepartment={this.onGroupClose}
|
||||
/>
|
||||
</MainFieldsContainer>
|
||||
</MainContainer>
|
||||
<div>
|
||||
<Text.ContentHeader>{this.props.t("Comments")}</Text.ContentHeader>
|
||||
<Textarea name="notes" value={this.state.profile.notes} isDisabled={this.state.isLoading} onChange={this.onTextChange} tabIndex={10}/>
|
||||
<Text.ContentHeader>{t("Comments")}</Text.ContentHeader>
|
||||
<Textarea name="notes" value={profile.notes} isDisabled={isLoading} onChange={this.onTextChange} tabIndex={10}/>
|
||||
</div>
|
||||
<div style={{marginTop: "60px"}}>
|
||||
<Button label={this.props.t("SaveButton")} onClick={this.handleSubmit} primary isDisabled={this.state.isLoading} size="big" tabIndex={11}/>
|
||||
<Button label={this.props.t("CancelButton")} onClick={this.onCancel} isDisabled={this.state.isLoading} size="big" style={{ marginLeft: "8px" }} tabIndex={12}/>
|
||||
<Button label={t("SaveButton")} onClick={this.handleSubmit} primary isDisabled={isLoading} size="big" tabIndex={11}/>
|
||||
<Button label={t("CancelButton")} onClick={this.onCancel} isDisabled={isLoading} size="big" style={{ marginLeft: "8px" }} tabIndex={12}/>
|
||||
</div>
|
||||
|
||||
<ModalDialog
|
||||
visible={this.state.isDialogVisible}
|
||||
visible={isDialogVisible}
|
||||
headerContent={"Change something"}
|
||||
bodyContent={<p>Send the something instructions?</p>}
|
||||
footerContent={<Button label="Send" primary={true} onClick={this.onDialogClose} />}
|
||||
|
||||
@ -42,7 +42,6 @@ export function toEmployeeWrapper(profile) {
|
||||
password: "",
|
||||
birthday: "",
|
||||
sex: "male",
|
||||
passwordType: "link",
|
||||
workFrom: "",
|
||||
location: "",
|
||||
title: "",
|
||||
|
||||
Loading…
Reference in New Issue
Block a user