Merge remote-tracking branch 'origin/autocomplete_persons' into Rocke…

…tChat#764
sibdigital · Jan 26, 2021 · 8b93c0d · 8b93c0d
2 parents be0b042 + aa6a08b
commit 8b93c0d
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 17 deletions.
diff --git a/app/protocols/client/views/AddItem.js b/app/protocols/client/views/AddItem.js
@@ -1,9 +1,10 @@
-import React, { useState, useCallback } from 'react';
+import React, { useState, useMemo, useCallback } from 'react';
 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);
 
+import { useEndpointData } from '../../../../client/hooks/useEndpointData';
 import { useToastMessageDispatch } from '../../../../client/contexts/ToastMessagesContext';
 import { useTranslation } from '../../../../client/contexts/TranslationContext';
 import { useRouteParameter } from '../../../../client/contexts/RouterContext';
@@ -13,14 +14,24 @@ import VerticalBar from '../../../../client/components/basic/VerticalBar';
 import CKEditor from "@ckeditor/ckeditor5-react";
 import ClassicEditor from "@ckeditor/ckeditor5-build-classic";
 import { checkNumberWithDot } from '../../../utils/client/methods/checkNumber';
+import { Autocomplete, createFilterOptions } from '@material-ui/lab';
+import { makeStyles } from '@material-ui/core/styles';
+import TextField from '@material-ui/core/TextField';
+import Chip from '@material-ui/core/Chip';
+
+function constructPersonFIO(person) {
+	return person.surname + " " + person.name.substr(0,1) + "." + person.patronymic.substr(0,1) + "."
+}
 
 export function AddItem({ goToNew, close, onChange, ...props }) {
 	const t = useTranslation();
 	const dispatchToastMessage = useToastMessageDispatch();
 
+	const personsData = useEndpointData('persons.list', useMemo(() => ({ }), [])) || { persons: [] };
+
 	const [number, setNumber] = useState('');
 	const [name, setName] = useState('');
-	const [responsible, setResponsible] = useState('');
+	const [responsible, setResponsible] = useState({});
 	const [expireAt, setExpireAt] = useState('');
 
 	const protocolId = useRouteParameter('id');
@@ -84,11 +95,32 @@ export function AddItem({ goToNew, close, onChange, ...props }) {
 				/>
 			</Field.Row>
 		</Field>
+		<Field>
 		<Field>
 			<Field.Label>{t('Item_Responsible')}</Field.Label>
-			<Field.Row>
-				<TextInput value={responsible} onChange={(e) => setResponsible(e.currentTarget.value)} placeholder={t('Item_Responsible')} />
-			</Field.Row>
+			<Autocomplete
+				multiple
+				id="tags-standard"
+				options={personsData.persons}
+				forcePopupIcon={false}
+				getOptionLabel={(option) => constructPersonFIO(option)}
+				filterSelectedOptions
+				filterOptions={createFilterOptions({ limit: 10 })}
+				onChange={(event, value) => setResponsible(value)}
+				renderTags={(value, getTagProps) =>
+					value.map((option, index) => (
+					  	<Chip label={constructPersonFIO(option)} {...getTagProps({ index })} />
+					))
+				}
+				renderInput={(params) => (
+					<TextField
+						{...params}
+						variant="outlined"
+						placeholder={t('Item_Responsible')}
+					/>
+				)}
+			/>
+		</Field>
 		</Field>
 		<Field>
 			<Field.Label>{t('Item_ExpireAt')}</Field.Label>

diff --git a/app/protocols/client/views/EditItem.js b/app/protocols/client/views/EditItem.js
@@ -1,6 +1,6 @@
 import React, { useCallback, useState, useMemo, useEffect } from 'react';
 import Chip from '@material-ui/core/Chip';
-import Autocomplete from '@material-ui/lab/Autocomplete';
+import { Autocomplete, createFilterOptions } from '@material-ui/lab';
 import { makeStyles } from '@material-ui/core/styles';
 import TextField from '@material-ui/core/TextField';
 import {
@@ -63,6 +63,10 @@ export function EditItem({ protocolId, sectionId, _id, cache, onChange, ...props
 	return <EditItemWithData protocol={data} sectionId={sectionId} itemId={_id} onChange={onChange} {...props}/>;
 }
 
+function constructPersonFIO(person) {
+	return person.surname + " " + person.name.substr(0,1) + "." + person.patronymic.substr(0,1) + "."
+}
+
 function EditItemWithData({ close, onChange, protocol, sectionId, itemId, ...props }) {
 	const t = useTranslation();
 	const dispatchToastMessage = useToastMessageDispatch();
@@ -79,7 +83,6 @@ function EditItemWithData({ close, onChange, protocol, sectionId, itemId, ...pro
 	const [name, setName] = useState('');
 	const [responsible, setResponsible] = useState({});
 	const [expireAt, setExpireAt] = useState('');
-	console.log(responsible)
 
 	useEffect(() => {
 		setNumber(previousNumber || '');
@@ -142,20 +145,26 @@ function EditItemWithData({ close, onChange, protocol, sectionId, itemId, ...pro
 			<Field.Label>{t('Item_Responsible')}</Field.Label>
 			<Autocomplete
 				multiple
-				id="size-small-outlined-multi"
-				size="small"
+				id="tags-standard"
 				value={responsible}
+				forcePopupIcon={false}
 				options={personsData.persons}
-				getOptionLabel={(option) => option.name}
-				getOptionSelected={(option, value) => option.name === value.name} 
+				getOptionLabel={(option) => constructPersonFIO(option)}
+				getOptionSelected={(option, value) => option.name === value.name && option.surname === value.surname}
+				filterOptions={createFilterOptions({ limit: 10 })}
 				filterSelectedOptions
 				onChange={(event, value) => setResponsible(value)}
+				renderTags={(value, getTagProps) =>
+					value.map((option, index) => (
+					  	<Chip label={constructPersonFIO(option)} {...getTagProps({ index })} />
+					))
+				}
 				renderInput={(params) => (
-				<TextField
-					{...params}
-					variant="outlined"
-					placeholder={t('Item_Responsible')}
-				/>
+					<TextField
+						{...params}
+						variant="outlined"
+						placeholder={t('Item_Responsible')}
+					/>
 				)}
 			/>
 		</Field>

diff --git a/app/protocols/client/views/Sections.js b/app/protocols/client/views/Sections.js
@@ -28,7 +28,7 @@ export function Sections({ data, onSectionMenuClick, onItemMenuClick }) {
 			<Box is='span' pie='x8'>{item.num}.</Box>
 			<Box flexGrow={1}>
 				<Box mbe='x4' dangerouslySetInnerHTML={{ __html: item.name }} align='justify'/>
-				{ item.responsible && <Box mbe='x4'>{t('Item_Responsible')}: {(item.responsible.map((s) => s.name) + ",").slice(0, -1)}</Box> }
+				{ item.responsible && <Box mbe='x4'>{t('Item_Responsible')}: {(item.responsible.map((s) => s.surname + " " + s.name.substr(0,1) + "." + s.patronymic.substr(0,1) + ".") + ",").slice(0, -1)}</Box> }
 				{ item.expireAt && <Box mbe='x4'>{t('Item_ExpireAt')}: {formatDate(item.expireAt)}</Box> }
 			</Box>
 			<Box pi='x4' style={{cursor: 'pointer'}} data-item={item._id} data-section={item.sectionId}