Maksim Eltyshev
4 years ago
parent
8490629e4c
commit
c9b23652d1
@ -0,0 +1,5 @@
|
||||
import { withPopup } from '../lib/popup';
|
||||
|
||||
import UserEmailEditStep from './UserEmailEditStep';
|
||||
|
||||
export default withPopup(UserEmailEditStep);
|
||||
@ -0,0 +1,3 @@
|
||||
import UserEmailEditStep from './UserEmailEditStep';
|
||||
|
||||
export default UserEmailEditStep;
|
||||
@ -0,0 +1,3 @@
|
||||
import UserInformationEdit from './UserInformationEdit';
|
||||
|
||||
export default UserInformationEdit;
|
||||
@ -0,0 +1,44 @@
|
||||
import React, { useCallback } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { Popup } from '../lib/custom-ui';
|
||||
|
||||
import UserInformationEdit from './UserInformationEdit';
|
||||
|
||||
const UserInformationEditStep = React.memo(({ defaultData, onUpdate, onBack, onClose }) => {
|
||||
const [t] = useTranslation();
|
||||
|
||||
const handleUpdate = useCallback(
|
||||
(data) => {
|
||||
onUpdate(data);
|
||||
onClose();
|
||||
},
|
||||
[onUpdate, onClose],
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Popup.Header onBack={onBack}>
|
||||
{t('common.editInformation', {
|
||||
context: 'title',
|
||||
})}
|
||||
</Popup.Header>
|
||||
<Popup.Content>
|
||||
<UserInformationEdit defaultData={defaultData} onUpdate={handleUpdate} />
|
||||
</Popup.Content>
|
||||
</>
|
||||
);
|
||||
});
|
||||
|
||||
UserInformationEditStep.propTypes = {
|
||||
defaultData: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
|
||||
onUpdate: PropTypes.func.isRequired,
|
||||
onBack: PropTypes.func,
|
||||
onClose: PropTypes.func.isRequired,
|
||||
};
|
||||
|
||||
UserInformationEditStep.defaultProps = {
|
||||
onBack: undefined,
|
||||
};
|
||||
|
||||
export default UserInformationEditStep;
|
||||
@ -0,0 +1,5 @@
|
||||
import { withPopup } from '../lib/popup';
|
||||
|
||||
import UserPasswordEditStep from './UserPasswordEditStep';
|
||||
|
||||
export default withPopup(UserPasswordEditStep);
|
||||
@ -0,0 +1,3 @@
|
||||
import UserPasswordEditStep from './UserPasswordEditStep';
|
||||
|
||||
export default UserPasswordEditStep;
|
||||
@ -0,0 +1,5 @@
|
||||
import { withPopup } from '../lib/popup';
|
||||
|
||||
import UserUsernameEditStep from './UserUsernameEditStep';
|
||||
|
||||
export default withPopup(UserUsernameEditStep);
|
||||
@ -0,0 +1,3 @@
|
||||
import UserUsernameEditStep from './UserUsernameEditStep';
|
||||
|
||||
export default UserUsernameEditStep;
|
||||
@ -1,56 +0,0 @@
|
||||
import React, { useCallback } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { Button, Radio, Table } from 'semantic-ui-react';
|
||||
|
||||
import DeletePopup from '../DeletePopup';
|
||||
|
||||
import styles from './Item.module.scss';
|
||||
|
||||
const Item = React.memo(({ name, username, email, isAdmin, onUpdate, onDelete }) => {
|
||||
const [t] = useTranslation();
|
||||
|
||||
const handleIsAdminChange = useCallback(() => {
|
||||
onUpdate({
|
||||
isAdmin: !isAdmin,
|
||||
});
|
||||
}, [isAdmin, onUpdate]);
|
||||
|
||||
return (
|
||||
<Table.Row>
|
||||
<Table.Cell>{name}</Table.Cell>
|
||||
<Table.Cell>{username || '-'}</Table.Cell>
|
||||
<Table.Cell>{email}</Table.Cell>
|
||||
<Table.Cell collapsing>
|
||||
<Radio toggle checked={isAdmin} onChange={handleIsAdminChange} />
|
||||
</Table.Cell>
|
||||
<Table.Cell collapsing>
|
||||
<DeletePopup
|
||||
title={t('common.deleteUser', {
|
||||
context: 'title',
|
||||
})}
|
||||
content={t('common.areYouSureYouWantToDeleteThisUser')}
|
||||
buttonContent={t('action.deleteUser')}
|
||||
onConfirm={onDelete}
|
||||
>
|
||||
<Button content={t('action.delete')} className={styles.button} />
|
||||
</DeletePopup>
|
||||
</Table.Cell>
|
||||
</Table.Row>
|
||||
);
|
||||
});
|
||||
|
||||
Item.propTypes = {
|
||||
name: PropTypes.string.isRequired,
|
||||
username: PropTypes.string,
|
||||
email: PropTypes.string.isRequired,
|
||||
isAdmin: PropTypes.bool.isRequired,
|
||||
onUpdate: PropTypes.func.isRequired,
|
||||
onDelete: PropTypes.func.isRequired,
|
||||
};
|
||||
|
||||
Item.defaultProps = {
|
||||
username: undefined,
|
||||
};
|
||||
|
||||
export default Item;
|
||||
@ -0,0 +1,181 @@
|
||||
import pick from 'lodash/pick';
|
||||
import React, { useCallback } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { Menu } from 'semantic-ui-react';
|
||||
import { withPopup } from '../../../lib/popup';
|
||||
import { Popup } from '../../../lib/custom-ui';
|
||||
|
||||
import { useSteps } from '../../../hooks';
|
||||
import UserInformationEditStep from '../../UserInformationEditStep';
|
||||
import UserUsernameEditStep from '../../UserUsernameEditStep';
|
||||
import UserEmailEditStep from '../../UserEmailEditStep';
|
||||
import UserPasswordEditStep from '../../UserPasswordEditStep';
|
||||
import DeleteStep from '../../DeleteStep';
|
||||
|
||||
import styles from './ActionsPopup.module.scss';
|
||||
|
||||
const StepTypes = {
|
||||
EDIT_INFORMATION: 'EDIT_INFORMATION',
|
||||
EDIT_USERNAME: 'EDIT_USERNAME',
|
||||
EDIT_EMAIL: 'EDIT_EMAIL',
|
||||
EDIT_PASSWORD: 'EDIT_PASSWORD',
|
||||
DELETE: 'DELETE',
|
||||
};
|
||||
|
||||
const ActionsStep = React.memo(
|
||||
({
|
||||
user,
|
||||
onUpdate,
|
||||
onUsernameUpdate,
|
||||
onUsernameUpdateMessageDismiss,
|
||||
onEmailUpdate,
|
||||
onEmailUpdateMessageDismiss,
|
||||
onPasswordUpdate,
|
||||
onPasswordUpdateMessageDismiss,
|
||||
onDelete,
|
||||
onClose,
|
||||
}) => {
|
||||
const [t] = useTranslation();
|
||||
const [step, openStep, handleBack] = useSteps();
|
||||
|
||||
const handleEditInformationClick = useCallback(() => {
|
||||
openStep(StepTypes.EDIT_INFORMATION);
|
||||
}, [openStep]);
|
||||
|
||||
const handleEditUsernameClick = useCallback(() => {
|
||||
openStep(StepTypes.EDIT_USERNAME);
|
||||
}, [openStep]);
|
||||
|
||||
const handleEditEmailClick = useCallback(() => {
|
||||
openStep(StepTypes.EDIT_EMAIL);
|
||||
}, [openStep]);
|
||||
|
||||
const handleEditPasswordClick = useCallback(() => {
|
||||
openStep(StepTypes.EDIT_PASSWORD);
|
||||
}, [openStep]);
|
||||
|
||||
const handleDeleteClick = useCallback(() => {
|
||||
openStep(StepTypes.DELETE);
|
||||
}, [openStep]);
|
||||
|
||||
if (step) {
|
||||
switch (step.type) {
|
||||
case StepTypes.EDIT_INFORMATION:
|
||||
return (
|
||||
<UserInformationEditStep
|
||||
defaultData={pick(user, ['name', 'phone', 'organization'])}
|
||||
onUpdate={onUpdate}
|
||||
onBack={handleBack}
|
||||
onClose={onClose}
|
||||
/>
|
||||
);
|
||||
case StepTypes.EDIT_USERNAME:
|
||||
return (
|
||||
<UserUsernameEditStep
|
||||
defaultData={user.usernameUpdateForm.data}
|
||||
username={user.username}
|
||||
isSubmitting={user.usernameUpdateForm.isSubmitting}
|
||||
error={user.usernameUpdateForm.error}
|
||||
onUpdate={onUsernameUpdate}
|
||||
onMessageDismiss={onUsernameUpdateMessageDismiss}
|
||||
onBack={handleBack}
|
||||
onClose={onClose}
|
||||
/>
|
||||
);
|
||||
case StepTypes.EDIT_EMAIL:
|
||||
return (
|
||||
<UserEmailEditStep
|
||||
defaultData={user.emailUpdateForm.data}
|
||||
email={user.email}
|
||||
isSubmitting={user.emailUpdateForm.isSubmitting}
|
||||
error={user.emailUpdateForm.error}
|
||||
onUpdate={onEmailUpdate}
|
||||
onMessageDismiss={onEmailUpdateMessageDismiss}
|
||||
onBack={handleBack}
|
||||
onClose={onClose}
|
||||
/>
|
||||
);
|
||||
case StepTypes.EDIT_PASSWORD:
|
||||
return (
|
||||
<UserPasswordEditStep
|
||||
defaultData={user.passwordUpdateForm.data}
|
||||
isSubmitting={user.passwordUpdateForm.isSubmitting}
|
||||
error={user.emailUpdateForm.error}
|
||||
onUpdate={onPasswordUpdate}
|
||||
onMessageDismiss={onPasswordUpdateMessageDismiss}
|
||||
onBack={handleBack}
|
||||
onClose={onClose}
|
||||
/>
|
||||
);
|
||||
case StepTypes.DELETE:
|
||||
return (
|
||||
<DeleteStep
|
||||
title={t('common.deleteUser', {
|
||||
context: 'title',
|
||||
})}
|
||||
content={t('common.areYouSureYouWantToDeleteThisUser')}
|
||||
buttonContent={t('action.deleteUser')}
|
||||
onConfirm={onDelete}
|
||||
onBack={handleBack}
|
||||
/>
|
||||
);
|
||||
default:
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<Popup.Header>
|
||||
{t('common.userActions', {
|
||||
context: 'title',
|
||||
})}
|
||||
</Popup.Header>
|
||||
<Popup.Content>
|
||||
<Menu secondary vertical className={styles.menu}>
|
||||
<Menu.Item className={styles.menuItem} onClick={handleEditInformationClick}>
|
||||
{t('action.editInformation', {
|
||||
context: 'title',
|
||||
})}
|
||||
</Menu.Item>
|
||||
<Menu.Item className={styles.menuItem} onClick={handleEditUsernameClick}>
|
||||
{t('action.editUsername', {
|
||||
context: 'title',
|
||||
})}
|
||||
</Menu.Item>
|
||||
<Menu.Item className={styles.menuItem} onClick={handleEditEmailClick}>
|
||||
{t('action.editEmail', {
|
||||
context: 'title',
|
||||
})}
|
||||
</Menu.Item>
|
||||
<Menu.Item className={styles.menuItem} onClick={handleEditPasswordClick}>
|
||||
{t('action.editPassword', {
|
||||
context: 'title',
|
||||
})}
|
||||
</Menu.Item>
|
||||
<Menu.Item className={styles.menuItem} onClick={handleDeleteClick}>
|
||||
{t('action.deleteUser', {
|
||||
context: 'title',
|
||||
})}
|
||||
</Menu.Item>
|
||||
</Menu>
|
||||
</Popup.Content>
|
||||
</>
|
||||
);
|
||||
},
|
||||
);
|
||||
|
||||
ActionsStep.propTypes = {
|
||||
user: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
|
||||
onUpdate: PropTypes.func.isRequired,
|
||||
onUsernameUpdate: PropTypes.func.isRequired,
|
||||
onUsernameUpdateMessageDismiss: PropTypes.func.isRequired,
|
||||
onEmailUpdate: PropTypes.func.isRequired,
|
||||
onEmailUpdateMessageDismiss: PropTypes.func.isRequired,
|
||||
onPasswordUpdate: PropTypes.func.isRequired,
|
||||
onPasswordUpdateMessageDismiss: PropTypes.func.isRequired,
|
||||
onDelete: PropTypes.func.isRequired,
|
||||
onClose: PropTypes.func.isRequired,
|
||||
};
|
||||
|
||||
export default withPopup(ActionsStep);
|
||||
@ -0,0 +1,11 @@
|
||||
:global(#app) {
|
||||
.menu {
|
||||
margin: -7px -12px -5px;
|
||||
width: calc(100% + 24px);
|
||||
}
|
||||
|
||||
.menuItem {
|
||||
margin: 0;
|
||||
padding-left: 14px;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,103 @@
|
||||
import React, { useCallback } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { Button, Icon, Radio, Table } from 'semantic-ui-react';
|
||||
|
||||
import ActionsPopup from './ActionsPopup';
|
||||
|
||||
import styles from './Item.module.scss';
|
||||
|
||||
const Item = React.memo(
|
||||
({
|
||||
email,
|
||||
username,
|
||||
name,
|
||||
organization,
|
||||
phone,
|
||||
isAdmin,
|
||||
emailUpdateForm,
|
||||
passwordUpdateForm,
|
||||
usernameUpdateForm,
|
||||
onUpdate,
|
||||
onUsernameUpdate,
|
||||
onUsernameUpdateMessageDismiss,
|
||||
onEmailUpdate,
|
||||
onEmailUpdateMessageDismiss,
|
||||
onPasswordUpdate,
|
||||
onPasswordUpdateMessageDismiss,
|
||||
onDelete,
|
||||
}) => {
|
||||
const handleIsAdminChange = useCallback(() => {
|
||||
onUpdate({
|
||||
isAdmin: !isAdmin,
|
||||
});
|
||||
}, [isAdmin, onUpdate]);
|
||||
|
||||
return (
|
||||
<Table.Row>
|
||||
<Table.Cell>{name}</Table.Cell>
|
||||
<Table.Cell>{username || '-'}</Table.Cell>
|
||||
<Table.Cell>{email}</Table.Cell>
|
||||
<Table.Cell collapsing>
|
||||
<Radio toggle checked={isAdmin} onChange={handleIsAdminChange} />
|
||||
</Table.Cell>
|
||||
<Table.Cell collapsing>
|
||||
<ActionsPopup
|
||||
user={{
|
||||
email,
|
||||
username,
|
||||
name,
|
||||
organization,
|
||||
phone,
|
||||
isAdmin,
|
||||
emailUpdateForm,
|
||||
passwordUpdateForm,
|
||||
usernameUpdateForm,
|
||||
}}
|
||||
onUpdate={onUpdate}
|
||||
onUsernameUpdate={onUsernameUpdate}
|
||||
onUsernameUpdateMessageDismiss={onUsernameUpdateMessageDismiss}
|
||||
onEmailUpdate={onEmailUpdate}
|
||||
onEmailUpdateMessageDismiss={onEmailUpdateMessageDismiss}
|
||||
onPasswordUpdate={onPasswordUpdate}
|
||||
onPasswordUpdateMessageDismiss={onPasswordUpdateMessageDismiss}
|
||||
onDelete={onDelete}
|
||||
>
|
||||
<Button className={styles.button}>
|
||||
<Icon fitted name="pencil" />
|
||||
</Button>
|
||||
</ActionsPopup>
|
||||
</Table.Cell>
|
||||
</Table.Row>
|
||||
);
|
||||
},
|
||||
);
|
||||
|
||||
Item.propTypes = {
|
||||
email: PropTypes.string.isRequired,
|
||||
username: PropTypes.string,
|
||||
name: PropTypes.string.isRequired,
|
||||
organization: PropTypes.string,
|
||||
phone: PropTypes.string,
|
||||
isAdmin: PropTypes.bool.isRequired,
|
||||
/* eslint-disable react/forbid-prop-types */
|
||||
emailUpdateForm: PropTypes.object.isRequired,
|
||||
passwordUpdateForm: PropTypes.object.isRequired,
|
||||
usernameUpdateForm: PropTypes.object.isRequired,
|
||||
/* eslint-enable react/forbid-prop-types */
|
||||
onUpdate: PropTypes.func.isRequired,
|
||||
onUsernameUpdate: PropTypes.func.isRequired,
|
||||
onUsernameUpdateMessageDismiss: PropTypes.func.isRequired,
|
||||
onEmailUpdate: PropTypes.func.isRequired,
|
||||
onEmailUpdateMessageDismiss: PropTypes.func.isRequired,
|
||||
onPasswordUpdate: PropTypes.func.isRequired,
|
||||
onPasswordUpdateMessageDismiss: PropTypes.func.isRequired,
|
||||
onDelete: PropTypes.func.isRequired,
|
||||
};
|
||||
|
||||
Item.defaultProps = {
|
||||
username: undefined,
|
||||
organization: undefined,
|
||||
phone: undefined,
|
||||
};
|
||||
|
||||
export default Item;
|
||||
@ -0,0 +1,3 @@
|
||||
import Item from './Item';
|
||||
|
||||
export default Item;
|
||||
Loading…
Reference in New Issue