Skip to content

Commit

Permalink
working groups
Browse files Browse the repository at this point in the history
  • Loading branch information
@shedoev
shedoev committed Oct 14, 2020
1 parent 945ef4e commit 6e87f9c
Show file tree
Hide file tree
Showing 4 changed files with 108 additions and 101 deletions.
6 changes: 3 additions & 3 deletions app/working-group/client/views/AddWorkingGroup.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,15 +26,15 @@ export function AddWorkingGroup({ goToNew, close, onChange, ...props }) {

const insertOrUpdateWorkingGroup = useMethod('insertOrUpdateWorkingGroup');

const saveAction = async (workingGroupType, surname, name, patronymic, position, phone, email) => {
const saveAction = useCallback(async (workingGroupType, surname, name, patronymic, position, phone, email) => {
const workingGroupData = createWorkingGroupData(workingGroupType, surname, name, patronymic, position, phone, email);
const validation = validate(workingGroupData);
if (validation.length === 0) {
const _id = await insertOrUpdateWorkingGroup(workingGroupData);
return _id;
}
validation.forEach((error) => { throw new Error({ type: 'error', message: t('error-the-field-is-required', { field: t(error) }) }); });
};
}, [dispatchToastMessage, insertOrUpdateWorkingGroup, t]);

const handleSave = useCallback(async () => {
try {
Expand All @@ -53,7 +53,7 @@ export function AddWorkingGroup({ goToNew, close, onChange, ...props }) {
} catch (error) {
dispatchToastMessage({ type: 'error', message: error });
}
}, [workingGroupType, surname, name, patronymic, position, phone, email]);
}, [dispatchToastMessage, goToNew, onChange, saveAction, workingGroupType, surname, name, patronymic, position, phone, email, t]);

return <VerticalBar.ScrollableContent {...props}>
<Field>
Expand Down
163 changes: 86 additions & 77 deletions app/working-group/client/views/EditWorkingGroup.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import {
InputBox,
TextAreaInput,
TextInput,
Modal
} from '@rocket.chat/fuselage';
import moment from 'moment';
import DatePicker, { registerLocale } from 'react-datepicker';
Expand All @@ -19,9 +20,9 @@ registerLocale('ru', ru);
import { useTranslation } from '../../../../client/contexts/TranslationContext';
import { useMethod } from '../../../../client/contexts/ServerContext';
import { useToastMessageDispatch } from '../../../../client/contexts/ToastMessagesContext';
import { Modal } from '../../../../client/components/basic/Modal';
import { useEndpointDataExperimental, ENDPOINT_STATES } from '../../../../client/hooks/useEndpointDataExperimental';
import { validate, createWorkingGroupData } from './lib';
import { useSetModal } from '../../../../client/contexts/ModalContext';
import VerticalBar from '../../../../client/components/basic/VerticalBar';

require('react-datepicker/dist/react-datepicker.css');
Expand Down Expand Up @@ -125,7 +126,7 @@ function EditWorkingGroupWithData({ close, onChange, workingGroup, ...props }) {
const [phone, setPhone] = useState(previousPhone);
const [email, setEmail] = useState(previousEmail);

const [modal, setModal] = useState();
const setModal = useSetModal();

useEffect(() => {
setWorkingGroupType(previousWorkingGroupType || '');
Expand Down Expand Up @@ -159,7 +160,7 @@ function EditWorkingGroupWithData({ close, onChange, workingGroup, ...props }) {
|| previousEmail !== email,
[workingGroupType, surname, name, patronymic, position, phone, email]);

const saveAction = async (workingGroupType, surname, name, patronymic, position, phone, email) => {
const saveAction = useCallback(async (workingGroupType, surname, name, patronymic, position, phone, email) => {
const workingGroupData = createWorkingGroupData(
workingGroupType,
surname,
Expand All @@ -182,10 +183,29 @@ function EditWorkingGroupWithData({ close, onChange, workingGroup, ...props }) {
const _id = await insertOrUpdateWorkingGroup(workingGroupData);
}
validation.forEach((error) => { throw new Error({ type: 'error', message: t('error-the-field-is-required', { field: t(error) }) }); });
};
}, [
_id,
dispatchToastMessage,
insertOrUpdateWorkingGroup,
workingGroupType,
surname,
name,
patronymic,
position,
phone,
email,
previousWorkingGroupType,
previousSurname,
previousName,
previousPatronymic,
previousPosition,
previousPhone,
previousEmail,
previousWorkingGroup
]);

const handleSave = useCallback(async () => {
await saveAction(
saveAction(
workingGroupType,
surname,
name,
Expand All @@ -195,15 +215,7 @@ function EditWorkingGroupWithData({ close, onChange, workingGroup, ...props }) {
email
);
onChange();
}, [
workingGroupType,
surname,
name,
patronymic,
position,
phone,
email,
_id]);
}, [saveAction, onChange]);

const onDeleteConfirm = useCallback(async () => {
try {
Expand All @@ -213,70 +225,67 @@ function EditWorkingGroupWithData({ close, onChange, workingGroup, ...props }) {
dispatchToastMessage({ type: 'error', message: error });
onChange();
}
}, [_id]);
}, [_id, close, deleteWorkingGroupUser, dispatchToastMessage, onChange]);

const openConfirmDelete = () => setModal(() => <DeleteWarningModal onDelete={onDeleteConfirm} onCancel={() => setModal(undefined)}/>);

return <>
<VerticalBar.ScrollableContent {...props}>
<Field>
<Field.Label>{t('Working_group')}</Field.Label>
<Field.Row>
<TextAreaInput value={workingGroupType} onChange={(e) => setWorkingGroupType(e.currentTarget.value)} placeholder={t('Working_group')} />
</Field.Row>
</Field>
<Field>
<Field.Label>{t('Surname')}</Field.Label>
<Field.Row>
<TextInput value={surname} onChange={(e) => setSurname(e.currentTarget.value)} placeholder={t('Surname')} />
</Field.Row>
</Field>
<Field>
<Field.Label>{t('Name')}</Field.Label>
<Field.Row>
<TextInput value={name} onChange={(e) => setName(e.currentTarget.value)} placeholder={t('Name')} />
</Field.Row>
</Field>
<Field>
<Field.Label>{t('Patronymic')}</Field.Label>
<Field.Row>
<TextInput value={patronymic} onChange={(e) => setPatronymic(e.currentTarget.value)} placeholder={t('Patronymic')} />
</Field.Row>
</Field>
<Field>
<Field.Label>{t('Council_Organization_Position')}</Field.Label>
<Field.Row>
<TextAreaInput value={position} onChange={(e) => setPosition(e.currentTarget.value)} placeholder={t('Council_Organization_Position')} />
</Field.Row>
</Field>
<Field>
<Field.Label>{t('Phone_number')}</Field.Label>
<Field.Row>
<TextInput value={phone} onChange={(e) => setPhone(e.currentTarget.value)} placeholder={t('Phone_number')} />
</Field.Row>
</Field>
<Field>
<Field.Label>{t('Email')}</Field.Label>
<Field.Row>
<TextInput value={email} onChange={(e) => setEmail(e.currentTarget.value)} placeholder={t('Email')} />
</Field.Row>
</Field>
<Field>
<Field.Row>
<ButtonGroup stretch w='full'>
<Button onClick={close}>{t('Cancel')}</Button>
<Button primary onClick={handleSave} disabled={!hasUnsavedChanges}>{t('Save')}</Button>
</ButtonGroup>
</Field.Row>
</Field>
<Field>
<Field.Row>
<ButtonGroup stretch w='full'>
<Button primary danger onClick={openConfirmDelete}><Icon name='trash' mie='x4'/>{t('Delete')}</Button>
</ButtonGroup>
</Field.Row>
</Field>
</VerticalBar.ScrollableContent>
{ modal }
</>;
return <VerticalBar.ScrollableContent {...props}>
<Field>
<Field.Label>{t('Working_group')}</Field.Label>
<Field.Row>
<TextAreaInput value={workingGroupType} onChange={(e) => setWorkingGroupType(e.currentTarget.value)} placeholder={t('Working_group')} />
</Field.Row>
</Field>
<Field>
<Field.Label>{t('Surname')}</Field.Label>
<Field.Row>
<TextInput value={surname} onChange={(e) => setSurname(e.currentTarget.value)} placeholder={t('Surname')} />
</Field.Row>
</Field>
<Field>
<Field.Label>{t('Name')}</Field.Label>
<Field.Row>
<TextInput value={name} onChange={(e) => setName(e.currentTarget.value)} placeholder={t('Name')} />
</Field.Row>
</Field>
<Field>
<Field.Label>{t('Patronymic')}</Field.Label>
<Field.Row>
<TextInput value={patronymic} onChange={(e) => setPatronymic(e.currentTarget.value)} placeholder={t('Patronymic')} />
</Field.Row>
</Field>
<Field>
<Field.Label>{t('Council_Organization_Position')}</Field.Label>
<Field.Row>
<TextAreaInput value={position} onChange={(e) => setPosition(e.currentTarget.value)} placeholder={t('Council_Organization_Position')} />
</Field.Row>
</Field>
<Field>
<Field.Label>{t('Phone_number')}</Field.Label>
<Field.Row>
<TextInput value={phone} onChange={(e) => setPhone(e.currentTarget.value)} placeholder={t('Phone_number')} />
</Field.Row>
</Field>
<Field>
<Field.Label>{t('Email')}</Field.Label>
<Field.Row>
<TextInput value={email} onChange={(e) => setEmail(e.currentTarget.value)} placeholder={t('Email')} />
</Field.Row>
</Field>
<Field>
<Field.Row>
<ButtonGroup stretch w='full'>
<Button onClick={close}>{t('Cancel')}</Button>
<Button primary onClick={handleSave} disabled={!hasUnsavedChanges}>{t('Save')}</Button>
</ButtonGroup>
</Field.Row>
</Field>
<Field>
<Field.Row>
<ButtonGroup stretch w='full'>
<Button primary danger onClick={openConfirmDelete}><Icon name='trash' mie='x4'/>{t('Delete')}</Button>
</ButtonGroup>
</Field.Row>
</Field>
</VerticalBar.ScrollableContent>;
}
14 changes: 7 additions & 7 deletions app/working-group/client/views/WorkingGroups.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { Box, Button, Icon, Table } from '@rocket.chat/fuselage';
import { useMediaQuery } from '@rocket.chat/fuselage-hooks';

import { useTranslation } from '../../../../client/contexts/TranslationContext';
import { GenericTable, Th } from '../../../ui/client/components/GenericTable';
import { GenericTable, Th } from '../../../../client/components/GenericTable';

export function WorkingGroups({
data,
Expand All @@ -25,11 +25,11 @@ export function WorkingGroups({
<Th key={'name'} style={{ width: '190px' }} color='default'>
{t('Surname')} {t('Name')} {t('Patronymic')}
</Th>,
<Th key={'type'} color='default'>
mediaQuery && <Th key={'type'} color='default'>
{t('Council_Organization_Position')}
</Th>,
<Th key={'Phone_number'} style={{ width: '190px' }} color='default'>{t('Phone_number')}</Th>,
<Th key={'Email'} color='default'>
mediaQuery && <Th key={'Phone_number'} style={{ width: '190px' }} color='default'>{t('Phone_number')}</Th>,
mediaQuery && <Th key={'Email'} color='default'>
{t('Email')}
</Th>,
<Th w='x40' key='edit'></Th>,
Expand All @@ -46,9 +46,9 @@ export function WorkingGroups({
return <Table.Row key={_id} tabIndex={0} role='link' action>
<Table.Cell fontScale='p1' onClick={onClick(_id)} color='default'>{workingGroupType}</Table.Cell>
<Table.Cell fontScale='p1' onClick={onClick(_id)} color='default'>{surname} {name} {patronymic}</Table.Cell>
<Table.Cell fontScale='p1' onClick={onClick(_id)} color='default'><Box withTruncatedText>{position}</Box></Table.Cell>
<Table.Cell fontScale='p1' onClick={onClick(_id)} color='default'>{phone}</Table.Cell>
<Table.Cell fontScale='p1' onClick={onClick(_id)} color='default'><Box withTruncatedText>{email}</Box></Table.Cell>
{ mediaQuery && <Table.Cell fontScale='p1' onClick={onClick(_id)} color='default'><Box withTruncatedText>{position}</Box></Table.Cell>}
{ mediaQuery && <Table.Cell fontScale='p1' onClick={onClick(_id)} color='default'>{phone}</Table.Cell>}
{ mediaQuery && <Table.Cell fontScale='p1' onClick={onClick(_id)} color='default'><Box withTruncatedText>{email}</Box></Table.Cell>}
<Table.Cell alignItems={'end'}>
<Button small onClick={onEditClick(_id)} aria-label={t('Edit')}>
<Icon name='edit'/>
Expand Down
26 changes: 12 additions & 14 deletions app/working-group/client/views/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,11 +16,12 @@ import moment from 'moment';

const sortDir = (sortDir) => (sortDir === 'workingGroupType' ? 1 : -1);

export const useQuery = (params, sort) => useMemo(() => ({
sort: JSON.stringify({ [sort[0]]: sortDir(sort[1]) }),
...params.itemsPerPage && { count: params.itemsPerPage },
...params.current && { offset: params.current },
}), [JSON.stringify(params), JSON.stringify(sort)]);
export const useQuery = ({ text, itemsPerPage, current }, [ column, direction ], cache) => useMemo(() => ({
sort: JSON.stringify({ [column]: sortDir(direction) }),
...itemsPerPage && { count: itemsPerPage },
...current && { offset: current },
// TODO: remove cache. Is necessary for data invalidation
}), [text, itemsPerPage, current, column, direction, cache]);

export function WorkingGroupPage() {
const t = useTranslation();
Expand All @@ -33,15 +34,12 @@ export function WorkingGroupPage() {
const debouncedParams = useDebouncedValue(params, 500);
const debouncedSort = useDebouncedValue(sort, 500);

const query = useQuery(debouncedParams, debouncedSort);
const query = useQuery(debouncedParams, debouncedSort, cache);

const data = useEndpointData('working-groups.list', query) || {};

const router = useRoute(routeName);

const mobile = useMediaQuery('(max-width: 420px)');
const small = useMediaQuery('(max-width: 780px)');

const context = useRouteParameter('context');
const id = useRouteParameter('id');

Expand All @@ -67,12 +65,12 @@ export function WorkingGroupPage() {
//FlowRouter.go(`/working-group/${ _id }`);
};

const onEditClick = (_id) => () => {
const onEditClick = useCallback((_id) => () => {
router.push({
context: 'edit',
id: _id,
});
};
}, [router]);

const onHeaderClick = (id) => {
const [sortBy, sortDirection] = sort;
Expand All @@ -87,9 +85,9 @@ export function WorkingGroupPage() {
router.push({ context });
}, [router]);

const close = () => {
const close = useCallback(() => {
router.push({});
};
}, [router]);

const onChange = useCallback(() => {
setCache(new Date());
Expand All @@ -113,7 +111,7 @@ export function WorkingGroupPage() {
</Page.Content>
</Page>
{ context
&& <VerticalBar mod-small={small} mod-mobile={mobile} style={{ width: '378px' }} qa-context-name={`admin-user-and-room-context-${ context }`} flexShrink={0}>
&& <VerticalBar className='contextual-bar' width='x380' qa-context-name={`admin-user-and-room-context-${ context }`} flexShrink={0}>
<VerticalBar.Header>
{ context === 'edit' && t('Working_group_edit') }
{ context === 'new' && t('Working_group_add') }
Expand Down

0 comments on commit 6e87f9c

Please sign in to comment.