Skip to content

Commit

Permalink
RocketChat#755 [FIX] Правки в мероприятия
Browse files Browse the repository at this point in the history
  • Loading branch information
@Scarvis
Scarvis committed Nov 12, 2020
1 parent 44da490 commit 7220a06
Show file tree
Hide file tree
Showing 5 changed files with 74 additions and 207 deletions.
69 changes: 13 additions & 56 deletions app/councils/client/views/Council.js
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,11 @@
import React, { useCallback, useMemo, useState } from 'react';
import { ButtonGroup, Button, Field, Icon, Label, Table, TextInput, TextAreaInput, Modal } from '@rocket.chat/fuselage';
import { ButtonGroup, Button, Field, Icon, Label, TextInput, TextAreaInput, Modal } from '@rocket.chat/fuselage';

import Page from '../../../../client/components/basic/Page';
import { useTranslation } from '../../../../client/contexts/TranslationContext';
import { useRoute, useRouteParameter } from '../../../../client/contexts/RouterContext';
import { useRouteParameter } from '../../../../client/contexts/RouterContext';
import { useEndpointData } from '../../../../client/hooks/useEndpointData';
import { GenericTable, Th } from '../../../../client/components/GenericTable';
import { useFormatDateAndTime } from '../../../../client/hooks/useFormatDateAndTime';
import { useMediaQuery } from '@rocket.chat/fuselage-hooks';
import { useMethod } from '../../../../client/contexts/ServerContext';
import { settings } from '../../../settings/client';
import moment from 'moment';
Expand All @@ -17,8 +15,6 @@ import { Participants } from './Participants/Participants';
import { AddParticipant } from './Participants/AddParticipant';
import { CreateParticipant } from './Participants/CreateParticipant';

const style = { textOverflow: 'ellipsis', overflow: 'hidden' };

const DeleteWarningModal = ({ title, onDelete, onCancel, ...props }) => {
const t = useTranslation();
return <Modal {...props}>
Expand Down Expand Up @@ -60,14 +56,11 @@ const SuccessModal = ({ title, onClose, ...props }) => {

export function CouncilPage() {
console.log('council');
const routeName = 'council';
const t = useTranslation();
const formatDateAndTime = useFormatDateAndTime();
const councilId = useRouteParameter('id');
const router = useRoute(routeName);

const [params, setParams] = useState({ current: 0, itemsPerPage: 25 });
const [isAddUser, setIsAddUser] = useState(false);
const [onCreateParticipantId, setOnCreateParticipantId] = useState();
const [context, setContext] = useState('participants');
const [cache, setCache] = useState();

Expand All @@ -89,8 +82,6 @@ export function CouncilPage() {

const dispatchToastMessage = useToastMessageDispatch();

const mediaQuery = useMediaQuery('(min-width: 768px)');

const downloadCouncilParticipantsMethod = useMethod('downloadCouncilParticipants');

const downloadCouncilParticipants = (_id) => async (e) => {
Expand All @@ -111,49 +102,6 @@ export function CouncilPage() {

const address = settings.get('Site_Url') + 'i/' + data.inviteLink || '';

const header = useMemo(() => [
<Th key={'fio'} color='default'>{t('Council_participant')}</Th>,
<Th key={'position'} color='default'>{t('Council_Organization_Position')}</Th>,
mediaQuery && <Th key={'contact'} color='default'>{t('Council_Contact_person')}</Th>,
mediaQuery && <Th key={'phone'} color='default'>{t('Phone_number')}</Th>,
mediaQuery && <Th key={'email'} color='default'>{t('Email')}</Th>,
mediaQuery && <Th key={'createdAt'} style={{ width: '190px' }} color='default'>{t('Joined_at')}</Th>,
], [mediaQuery]);

const styleTableRow = { wordWrap: 'break-word' };

const getBackgroundColor = (invitedUser) => {
const index = invitedUsers.findIndex((user) => (
user.firstName === invitedUser.firstName
&& user.lastName === invitedUser.lastName
&& user.patronymic === invitedUser.patronymic
&& user.position === invitedUser.position
&& user.contactPersonFirstName === invitedUser.contactPersonFirstName
&& user.contactPersonLastName === invitedUser.contactPersonLastName
&& user.contactPersonPatronymicName === invitedUser.contactPersonPatronymicName
&& user.phone === invitedUser.phone
&& user.email === invitedUser.email
&& user.ts === invitedUser.ts
));
if (index > 0 && index % 2 === 1) {
return 'var(--color-lighter-blue)';
}

return '';
};

const renderRow = (invitedUser) => {
const iu = invitedUser;
return <Table.Row key={iu._id} style={styleTableRow} backgroundColor={getBackgroundColor(invitedUser)} tabIndex={0} role='link' action>
<Table.Cell fontScale='p1' style={style} color='default'>{iu.lastName} {iu.firstName} {iu.patronymic}</Table.Cell>
<Table.Cell fontScale='p1' style={style} color='default'>{iu.position}</Table.Cell>
{ mediaQuery && <Table.Cell fontScale='p1' style={style} color='default'>{iu.contactPersonLastName} {iu.contactPersonFirstName} {iu.contactPersonPatronymicName}</Table.Cell>}
{ mediaQuery && <Table.Cell fontScale='p1' style={style} color='default'>{iu.phone}</Table.Cell>}
{ mediaQuery && <Table.Cell fontScale='p1' style={style} color='default'>{iu.email}</Table.Cell>}
{ mediaQuery && <Table.Cell fontScale='p1' style={style} color='default'>{formatDateAndTime(iu.ts)}</Table.Cell>}
</Table.Row>;
};

const goBack = () => {
window.history.back();
};
Expand All @@ -180,8 +128,16 @@ export function CouncilPage() {

const onClose = () => {
setContext('participants');
if (onCreateParticipantId) {
setOnCreateParticipantId(undefined);
}
};

const onCreateParticipantClick = useCallback((_id) => () => {
setOnCreateParticipantId(_id);
setContext('onCreateParticipant');
}, [onCreateParticipantId, context]);

const onDeleteCouncilConfirm = useCallback(async () => {
try {
await deleteCouncil(councilId);
Expand Down Expand Up @@ -247,7 +203,8 @@ export function CouncilPage() {
</Field>}
{context === 'participants' && <Participants councilId={councilId} onChange={onChange}/>}
{context === 'addParticipants' && <AddParticipant councilId={councilId} onChange={onChange} close={onClose} invitedUsers={invitedUsers} onNewParticipant={onParticipantClick}/>}
{context === 'newParticipants' && <CreateParticipant goTo={onClose} close={onParticipantClick} />}
{context === 'newParticipants' && <CreateParticipant goTo={onCreateParticipantClick} close={onParticipantClick} />}
{context === 'onCreateParticipant' && <AddParticipant onCreateParticipantId={onCreateParticipantId} councilId={councilId} onChange={onChange} close={onClose} invitedUsers={invitedUsers} onNewParticipant={onParticipantClick}/>}
</Page.Content>
</Page>
</Page>;
Expand Down
5 changes: 2 additions & 3 deletions app/councils/client/views/Councils.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,6 +60,7 @@ export function Councils({
params,
}) {
const t = useTranslation();
const formatDateAndTime = useFormatDateAndTime();

const setModal = useSetModal();

Expand Down Expand Up @@ -127,11 +128,9 @@ export function Councils({
mediaQuery && <Th key={'createdAt'} direction={sort[1]} active={sort[0] === 'createdAt'} onClick={onHeaderClick} sort='createdAt' style={{ width: '190px' }} color='default'>{t('Created_at')}</Th>,
<Th w='x40' key='edit'></Th>,
<Th w='x40' key='delete'></Th>,
<Th w='x40' key='download'></Th>
<Th w='x40' key='download'></Th>,
], [sort, mediaQuery]);

const formatDateAndTime = useFormatDateAndTime();

const styleTr = { borderBottomWidth: '10px', borderBottomColor: 'var(--color-white)' };

const onDeleteCouncilConfirm = useCallback(async (_id) => {
Expand Down
57 changes: 47 additions & 10 deletions app/councils/client/views/EditCouncil.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,9 @@ import { useMediaQuery } from '@rocket.chat/fuselage-hooks';

import { GenericTable, Th } from '../../../../client/components/GenericTable';
import Page from '../../../../client/components/basic/Page';
import { AddParticipant } from './Participants/AddParticipant';
import { CreateParticipant } from './Participants/CreateParticipant';
import { Participants } from './Participants/Participants';

registerLocale('ru', ru);

Expand Down Expand Up @@ -97,7 +100,7 @@ export function EditCouncilPage() {
data.invitedUsers = [];
}

return <EditCouncilWithNewData council={data} onChange={onChange} context={context}/>;
return <EditCouncilWithNewData council={data} onChange={onChange}/>;
}

EditCouncilPage.displayName = 'EditCouncilPage';
Expand All @@ -106,19 +109,20 @@ export default EditCouncilPage;

const style = { textOverflow: 'ellipsis', overflow: 'hidden' };

function EditCouncilWithNewData({ council, onChange, context }) {
function EditCouncilWithNewData({ council, onChange }) {
const t = useTranslation();

const { _id, d: previousDate, desc: previousDescription } = council || {};
const previousInvitedUsers = useMemo(() => council.invitedUsers ? council.invitedUsers.slice() : [], [council.invitedUsers.slice()]);
const previousCouncil = council || {};

const isEditUserState = context === 'newParticipant';
const [isEditUser, setIsEditUser] = useState(isEditUserState);
const [context, setContext] = useState('participants');
const [isEditUser, setIsEditUser] = useState(false);
const [date, setDate] = useState(new Date(previousDate));
const [description, setDescription] = useState(previousDescription);
const [invitedUsers, setInvitedUsers] = useState(previousInvitedUsers);
const [currentInvitedUser, setCurrentInvitedUser] = useState({});
const [onCreateParticipantId, setOnCreateParticipantId] = useState();

const setModal = useSetModal();

Expand Down Expand Up @@ -215,6 +219,26 @@ function EditCouncilWithNewData({ council, onChange, context }) {
handleEditUser();
};

const onAddParticipantClick = (_id) => () => {
setContext('addParticipants');
};

const onCreateParticipantClick = useCallback((_id) => () => {
setOnCreateParticipantId(_id);
setContext('onCreateParticipant');
}, [onCreateParticipantId, context]);

const onParticipantClick = useCallback((context) => () => {
setContext(context);
}, [context]);

const onClose = () => {
setContext('participants');
if (onCreateParticipantId) {
setOnCreateParticipantId(undefined);
}
};

const saveAction = useCallback(async (date, description, invitedUsers) => {
const councilData = createCouncilData(date, description, { previousDate, previousDescription, _id }, invitedUsers);
const validation = validate(councilData);
Expand Down Expand Up @@ -319,12 +343,25 @@ function EditCouncilWithNewData({ council, onChange, context }) {
<TextAreaInput style={ { whiteSpace: 'normal' } } row='4' border='1px solid #4fb0fc' value={description} onChange={(e) => setDescription(e.currentTarget.value)} placeholder={t('Description')} />
</Field.Row>
</Field>
<Field mbe='x8'>
<Field height={'600px'}>
{ isEditUser && <EditInvitedUser invitedUser={currentInvitedUser} handleCancel={handleEditUser} handleInsertOrUpdateSubmit={handleInsertOrUpdatePerson}/>}
{ !isEditUser && <InvitedUsersTable invitedUsers={invitedUsers} onEdit={onEditClick} onDelete={onDeleteParticipantClick}/>}
</Field>
</Field>
{context === 'participants' && <Field mbe='x8'>
<Field.Row marginInlineStart='auto'>
<Button marginInlineEnd='10px' small primary onClick={onAddParticipantClick(_id)} aria-label={t('Add')}>
{t('Council_Add_Participant')}
</Button>
</Field.Row>
</Field>}
{context === 'participants' && <Participants councilId={_id} onChange={onChange}/>}
{context === 'addParticipants' && <AddParticipant councilId={_id} onChange={onChange} close={onClose} invitedUsers={invitedUsers} onNewParticipant={onParticipantClick}/>}
{context === 'newParticipants' && <CreateParticipant goTo={onCreateParticipantClick} close={onParticipantClick} />}
{context === 'onCreateParticipant' && <AddParticipant onCreateParticipantId={onCreateParticipantId} councilId={_id} onChange={onChange} close={onClose} invitedUsers={invitedUsers} onNewParticipant={onParticipantClick}/>}
{/*<Field mbe='x8'>*/}
{/* <Field height={'600px'}>*/}
{/* { isEditUser && <EditInvitedUser invitedUser={currentInvitedUser} handleCancel={handleEditUser} handleInsertOrUpdateSubmit={handleInsertOrUpdatePerson}/>}*/}
{/* { !isEditUser && <InvitedUsersTable invitedUsers={invitedUsers} onEdit={onEditClick} onDelete={onDeleteParticipantClick}/>}*/}
{/* /!*{context === 'addParticipants' && <AddParticipant councilId={_id} onChange={onChange} close={onClose} invitedUsers={invitedUsers} onNewParticipant={onParticipantClick}/>}*!/*/}
{/* /!*{context === 'newParticipants' && <CreateParticipant goTo={onClose} close={onParticipantClick} />}*!/*/}
{/* </Field>*/}
{/*</Field>*/}
</Page.Content>
</Page>
</Page>;
Expand Down
Loading

0 comments on commit 7220a06

Please sign in to comment.