From 6e87f9c37cf8039debcf46813798c436c3e41ad2 Mon Sep 17 00:00:00 2001 From: shedoev Date: Wed, 14 Oct 2020 11:09:58 +0800 Subject: [PATCH] working groups --- .../client/views/AddWorkingGroup.js | 6 +- .../client/views/EditWorkingGroup.js | 163 +++++++++--------- .../client/views/WorkingGroups.js | 14 +- app/working-group/client/views/index.js | 26 ++- 4 files changed, 108 insertions(+), 101 deletions(-) diff --git a/app/working-group/client/views/AddWorkingGroup.js b/app/working-group/client/views/AddWorkingGroup.js index c88a99e6d4ce..2a3176fbbaf4 100644 --- a/app/working-group/client/views/AddWorkingGroup.js +++ b/app/working-group/client/views/AddWorkingGroup.js @@ -26,7 +26,7 @@ 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) { @@ -34,7 +34,7 @@ export function AddWorkingGroup({ goToNew, close, onChange, ...props }) { 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 { @@ -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 diff --git a/app/working-group/client/views/EditWorkingGroup.js b/app/working-group/client/views/EditWorkingGroup.js index 240befdaf74a..f951b297be55 100644 --- a/app/working-group/client/views/EditWorkingGroup.js +++ b/app/working-group/client/views/EditWorkingGroup.js @@ -10,6 +10,7 @@ import { InputBox, TextAreaInput, TextInput, + Modal } from '@rocket.chat/fuselage'; import moment from 'moment'; import DatePicker, { registerLocale } from 'react-datepicker'; @@ -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'); @@ -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 || ''); @@ -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, @@ -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, @@ -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 { @@ -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(() => setModal(undefined)}/>); - return <> - - - {t('Working_group')} - - setWorkingGroupType(e.currentTarget.value)} placeholder={t('Working_group')} /> - - - - {t('Surname')} - - setSurname(e.currentTarget.value)} placeholder={t('Surname')} /> - - - - {t('Name')} - - setName(e.currentTarget.value)} placeholder={t('Name')} /> - - - - {t('Patronymic')} - - setPatronymic(e.currentTarget.value)} placeholder={t('Patronymic')} /> - - - - {t('Council_Organization_Position')} - - setPosition(e.currentTarget.value)} placeholder={t('Council_Organization_Position')} /> - - - - {t('Phone_number')} - - setPhone(e.currentTarget.value)} placeholder={t('Phone_number')} /> - - - - {t('Email')} - - setEmail(e.currentTarget.value)} placeholder={t('Email')} /> - - - - - - - - - - - - - - - - - - - { modal } - ; + return + + {t('Working_group')} + + setWorkingGroupType(e.currentTarget.value)} placeholder={t('Working_group')} /> + + + + {t('Surname')} + + setSurname(e.currentTarget.value)} placeholder={t('Surname')} /> + + + + {t('Name')} + + setName(e.currentTarget.value)} placeholder={t('Name')} /> + + + + {t('Patronymic')} + + setPatronymic(e.currentTarget.value)} placeholder={t('Patronymic')} /> + + + + {t('Council_Organization_Position')} + + setPosition(e.currentTarget.value)} placeholder={t('Council_Organization_Position')} /> + + + + {t('Phone_number')} + + setPhone(e.currentTarget.value)} placeholder={t('Phone_number')} /> + + + + {t('Email')} + + setEmail(e.currentTarget.value)} placeholder={t('Email')} /> + + + + + + + + + + + + + + + + + + ; } diff --git a/app/working-group/client/views/WorkingGroups.js b/app/working-group/client/views/WorkingGroups.js index c40dea780356..44e6c9b11514 100644 --- a/app/working-group/client/views/WorkingGroups.js +++ b/app/working-group/client/views/WorkingGroups.js @@ -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, @@ -25,11 +25,11 @@ export function WorkingGroups({ {t('Surname')} {t('Name')} {t('Patronymic')} , - + mediaQuery && {t('Council_Organization_Position')} , - {t('Phone_number')}, - + mediaQuery && {t('Phone_number')}, + mediaQuery && {t('Email')} , , @@ -46,9 +46,9 @@ export function WorkingGroups({ return {workingGroupType} {surname} {name} {patronymic} - {position} - {phone} - {email} + { mediaQuery && {position}} + { mediaQuery && {phone}} + { mediaQuery && {email}}