RocketChat#752 Доработка интерфейса электронного протокола

sibdigital · Nov 5, 2020 · 46f7413 · 46f7413
1 parent d0f45ef
commit 46f7413
Show file tree

Hide file tree

Showing 7 changed files with 109 additions and 36 deletions.
diff --git a/app/protocols/client/views/AddItem.js b/app/protocols/client/views/AddItem.js
@@ -1,5 +1,5 @@
 import React, { useState, useCallback } from 'react';
-import { Field, TextAreaInput, Button, InputBox, ButtonGroup, TextInput } from '@rocket.chat/fuselage';
+import { Field, Button, InputBox, ButtonGroup, TextInput } from '@rocket.chat/fuselage';
 import DatePicker, { registerLocale } from 'react-datepicker';
 import ru from 'date-fns/locale/ru';
 registerLocale('ru', ru);
@@ -10,6 +10,8 @@ import { useRouteParameter } from '../../../../client/contexts/RouterContext';
 import { useMethod } from '../../../../client/contexts/ServerContext';
 import { validateItemData, createItemData } from './lib';
 import VerticalBar from '../../../../client/components/basic/VerticalBar';
+import CKEditor from "@ckeditor/ckeditor5-react";
+import ClassicEditor from "@ckeditor/ckeditor5-build-classic";
 
 export function AddItem({ goToNew, close, onChange, ...props }) {
 	const t = useTranslation();
@@ -61,7 +63,18 @@ export function AddItem({ goToNew, close, onChange, ...props }) {
 		<Field>
 			<Field.Label>{t('Item_Name')}</Field.Label>
 			<Field.Row>
-				<TextAreaInput rows='10' multiple value={name} onChange={(e) => setName(e.currentTarget.value)} placeholder={t('Item_Name')} />
+				<CKEditor
+					editor={ ClassicEditor }
+					config={ {
+						language: 'ru',
+						toolbar: [ 'bold', 'italic', 'link' ]
+					} }
+					data={name}
+					onChange={ (event, editor) => {
+						const data = editor.getData();
+						setName(data);
+					} }
+				/>
 			</Field.Row>
 		</Field>
 		<Field>

diff --git a/app/protocols/client/views/AddSection.js b/app/protocols/client/views/AddSection.js
@@ -1,12 +1,14 @@
 import React, { useState, useCallback } from 'react';
-import { Field, TextAreaInput, Button, InputBox, ButtonGroup, TextInput } from '@rocket.chat/fuselage';
+import { Field, Button, InputBox, ButtonGroup } from '@rocket.chat/fuselage';
 
 import { useToastMessageDispatch } from '../../../../client/contexts/ToastMessagesContext';
 import { useTranslation } from '../../../../client/contexts/TranslationContext';
 import { useRouteParameter } from '../../../../client/contexts/RouterContext';
 import { useMethod } from '../../../../client/contexts/ServerContext';
 import { validateSectionData, createSectionData } from './lib';
 import VerticalBar from '../../../../client/components/basic/VerticalBar';
+import CKEditor from "@ckeditor/ckeditor5-react";
+import ClassicEditor from "@ckeditor/ckeditor5-build-classic";
 
 export function AddSection({ goToNew, close, onChange, ...props }) {
 	const t = useTranslation();
@@ -53,7 +55,18 @@ export function AddSection({ goToNew, close, onChange, ...props }) {
 		<Field>
 			<Field.Label>{t('Section_Name')}</Field.Label>
 			<Field.Row>
-				<TextAreaInput value={name} onChange={(e) => setName(e.currentTarget.value)} placeholder={t('Section_Name')} />
+				<CKEditor
+					editor={ ClassicEditor }
+					config={ {
+						language: 'ru',
+						toolbar: [ 'bold', 'italic', 'link' ]
+					} }
+					data={name}
+					onChange={ (event, editor) => {
+						const data = editor.getData();
+						setName(data);
+					} }
+				/>
 			</Field.Row>
 		</Field>
 		<Field>

diff --git a/app/protocols/client/views/EditItem.js b/app/protocols/client/views/EditItem.js
@@ -8,14 +8,17 @@ import {
 	Skeleton,
 	Throbber,
 	InputBox,
-	TextAreaInput,
 	TextInput,
 	Modal
 } from '@rocket.chat/fuselage';
 import DatePicker, { registerLocale } from 'react-datepicker';
 import ru from 'date-fns/locale/ru';
 registerLocale('ru', ru);
 
+import CKEditor from '@ckeditor/ckeditor5-react';
+import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
+import '@ckeditor/ckeditor5-build-classic/build/translations/ru';
+
 import { useTranslation } from '../../../../client/contexts/TranslationContext';
 import { useMethod } from '../../../../client/contexts/ServerContext';
 import { useToastMessageDispatch } from '../../../../client/contexts/ToastMessagesContext';
@@ -74,6 +77,10 @@ export function EditItem({ protocolId, sectionId, _id, cache, onChange, ...props
 
 	if (state === ENDPOINT_STATES.LOADING) {
 		return <Box pb='x20'>
+			<Skeleton mbs='x8'/>
+			<InputBox.Skeleton w='full'/>
+			<Skeleton mbs='x8'/>
+			<InputBox.Skeleton w='full'/>
 			<Skeleton mbs='x8'/>
 			<InputBox.Skeleton w='full'/>
 			<Skeleton mbs='x8'/>
@@ -159,7 +166,18 @@ function EditItemWithData({ close, onChange, protocol, sectionId, itemId, ...pro
 		<Field>
 			<Field.Label>{t('Item_Name')}</Field.Label>
 			<Field.Row>
-				<TextAreaInput rows='10' multiple value={name} onChange={(e) => setName(e.currentTarget.value)} placeholder={t('Item_name')} />
+				<CKEditor
+					editor={ ClassicEditor }
+					config={ {
+						language: 'ru',
+						toolbar: [ 'bold', 'italic', 'link' ]
+					} }
+					data={name}
+					onChange={ (event, editor) => {
+						const data = editor.getData();
+						setName(data);
+					} }
+				/>
 			</Field.Row>
 		</Field>
 		<Field>

diff --git a/app/protocols/client/views/EditProtocol.js b/app/protocols/client/views/EditProtocol.js
@@ -78,6 +78,8 @@ export function EditProtocol({ _id, cache, onChange, ...props }) {
 			<InputBox.Skeleton w='full'/>
 			<Skeleton mbs='x8'/>
 			<InputBox.Skeleton w='full'/>
+			<Skeleton mbs='x8'/>
+			<InputBox.Skeleton w='full'/>
 			<ButtonGroup stretch w='full' mbs='x8'>
 				<Button disabled><Throbber inheritColor/></Button>
 				<Button primary disabled><Throbber inheritColor/></Button>

diff --git a/app/protocols/client/views/EditSection.js b/app/protocols/client/views/EditSection.js
@@ -8,13 +8,11 @@ import {
 	Skeleton,
 	Throbber,
 	InputBox,
-	TextAreaInput,
-	TextInput,
 	Modal
 } from '@rocket.chat/fuselage';
-import DatePicker, { registerLocale } from 'react-datepicker';
-import ru from 'date-fns/locale/ru';
-registerLocale('ru', ru);
+import CKEditor from '@ckeditor/ckeditor5-react';
+import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
+import '@ckeditor/ckeditor5-build-classic/build/translations/ru';
 
 import { useTranslation } from '../../../../client/contexts/TranslationContext';
 import { useMethod } from '../../../../client/contexts/ServerContext';
@@ -155,7 +153,18 @@ function EditSectionWithData({ close, onChange, protocol, sectionId, ...props })
 		<Field>
 			<Field.Label>{t('Section_Name')}</Field.Label>
 			<Field.Row>
-				<TextAreaInput value={name} onChange={(e) => setName(e.currentTarget.value)} placeholder={t('Section_Name')} />
+				<CKEditor
+					editor={ ClassicEditor }
+					config={ {
+						language: 'ru',
+						toolbar: [ 'bold', 'italic', 'link' ]
+					} }
+					data={name}
+					onChange={ (event, editor) => {
+						const data = editor.getData();
+						setName(data);
+					} }
+				/>
 			</Field.Row>
 		</Field>
 		<Field>

diff --git a/app/protocols/client/views/Sections.js b/app/protocols/client/views/Sections.js
@@ -8,49 +8,57 @@ export function Sections({ data, onSectionClick, onAddItemClick, onItemClick })
 	const formatDate = useFormatDate();
 
 	const Item = (item) => <>
-		<Box mbe='x4' onClick={onItemClick(item.sectionId, item._id)}>
-			<Box mbe='x4'>{item.num}. {item.name}</Box>
-			{ item.responsible && <Box mbe='x4' pis='x16'>{t('Item_Responsible')}: {item.responsible}</Box> }
-			{ item.expireAt && <Box mbe='x4' pis='x16'>{t('Item_ExpireAt')}: {formatDate(item.expireAt)}</Box> }
+		<Box mis='x24'
+			 mbe='x4'
+			 style={{cursor: 'pointer'}}
+			 onClick={onItemClick(item.sectionId, item._id)}
+			 display='flex'
+			 flexDirection='row'
+		>
+			<Box is='span' pie='x8'>{item.num}.</Box>
+			<Box>
+				<Box mbe='x4' dangerouslySetInnerHTML={{ __html: item.name }} align='justify'/>
+				{ item.responsible && <Box mbe='x4'>{t('Item_Responsible')}: {item.responsible}</Box> }
+				{ item.expireAt && <Box mbe='x4'>{t('Item_ExpireAt')}: {formatDate(item.expireAt)}</Box> }
+			</Box>
 		</Box>
 	</>;
 
-	const Section = (section) => <>
+	const Section = (section) => <Box>
 		<Box
-			mi='x24'
 			mbe='x8'
 			color='default'
+			style={{cursor: 'pointer'}}
 			onClick={onSectionClick(section._id)}
+			display='flex'
+			flexDirection='row'
 		>
-			{section.num}. {section.name}
+			<Box is='span' pie='x8'>{section.num}.</Box>
+			<Box is='span' dangerouslySetInnerHTML={{ __html: section.name }} align='justify'/>
 		</Box>
-		<Box mb='x16' mi='neg-x24' pi='x24'>
+		<Box mbe='x8'>
 			{(
 				section.items
 					? section.items.map((props, index) => <Item key={props._id || index} sectionId={section._id} { ...props }/>)
 					: <></>
 			)}
 		</Box>
-		<Button mbe='x8' small onClick={onAddItemClick('new-item', section._id)} aria-label={t('New')}>
+		<Button mi='x24' mbe='x8' small onClick={onAddItemClick('new-item', section._id)} aria-label={t('New')}>
 			{t('Item_Add')}
 		</Button>
-	</>;
+	</Box>;
 
 	return <>
 		{data && !data.length
-			? <Tile fontScale='p1' elevation='0' color='info' textAlign='center'>
-				{t('No_data_found')}
-			</Tile>
+			? <></>
 			: <>
-				<Scrollable>
-					<Box mb='x16' mi='neg-x24' pi='x24'>
-						{(
-							data
-								? data.map((props, index) => <Section key={props._id || index} { ...props}/>)
-								: <></>
-						)}
-					</Box>
-				</Scrollable>
+				<Box mbe='x8'>
+					{(
+						data
+							? data.map((props, index) => <Section key={props._id || index} { ...props}/>)
+							: <></>
+					)}
+				</Box>
 			</>
 		}
 	</>;

diff --git a/app/protocols/client/views/index.js b/app/protocols/client/views/index.js
@@ -1,5 +1,5 @@
 import React, { useCallback, useMemo, useState } from 'react';
-import { Button, Icon } from '@rocket.chat/fuselage';
+import { Button, Field, Icon, Label } from '@rocket.chat/fuselage';
 import { useDebouncedValue } from '@rocket.chat/fuselage-hooks';
 
 import Page from '../../../../client/components/basic/Page';
@@ -75,9 +75,19 @@ export function ProtocolsPage() {
 		setCache(new Date());
 	}, []);
 
+	const goBack = () => {
+		window.history.back();
+	};
+
 	return <Page flexDirection='row'>
 		<Page>
-			<Page.Header title={t('Protocols')}>
+			<Page.Header>
+				<Field width={'100%'} display={'block'} marginBlock={'15px'}>
+					<Button className='go-back-button' onClick={goBack}>
+						<Icon name='back'/>
+					</Button>
+					<Label fontScale='h1'>{t('Protocols')}</Label>
+				</Field>
 				<Button small onClick={handleHeaderButtonClick('new')} aria-label={t('New')}>
 					<Icon name='plus'/>
 				</Button>