diff --git a/package-lock.json b/package-lock.json index abc9e1861..f87ca6aef 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2179,7 +2179,7 @@ "jsonfile": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz", - "integrity": "sha1-h3Gq4HmbZAdrdmQPygWPnBDjPss=", + "integrity": "sha512-m6F1R3z8jjlf2imQHS2Qez5sjKWQzbuuhuJ/FKYFRZvPE3PuHcSMVZzfsLhGVOkfd20obL5SWEBew5ShlquNxg==", "dev": true, "requires": { "graceful-fs": "^4.1.6" @@ -5717,7 +5717,7 @@ "dot-prop": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/dot-prop/-/dot-prop-3.0.0.tgz", - "integrity": "sha1-G3CK8JSknJoOfbyteQq6U52sEXc=", + "integrity": "sha512-k4ELWeEU3uCcwub7+dWydqQBRjAjkV9L33HjVRG5Xo2QybI6ja/v+4W73SRi8ubCqJz0l9XsTP1NbewfyqaSlw==", "dev": true, "requires": { "is-obj": "^1.0.0" @@ -5814,13 +5814,13 @@ "pify": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/pify/-/pify-3.0.0.tgz", - "integrity": "sha1-5aSs0sEB/fPZpNB/DbxNtJ3SgXY=", + "integrity": "sha512-C3FsVNH1udSEX48gGX1xfvwTWfsYWj5U+8/uK15BGzIGrKoUpghX8hWZwa/OFnakBiiVNmBvemTJR5mcy7iPcg==", "dev": true }, "read-pkg": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-3.0.0.tgz", - "integrity": "sha1-nLxoaXj+5l0WwA4rGcI3/Pbjg4k=", + "integrity": "sha512-BLq/cCO9two+lBgiTYNqD6GdtK8s4NpaWrl6/rCO9w0TUS8oJl7cmToOZfRYllKTISY6nt1U7jQ53brmKqY6BA==", "dev": true, "requires": { "load-json-file": "^4.0.0", @@ -6384,7 +6384,7 @@ "isarray": { "version": "0.0.1", "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz", - "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8=", + "integrity": "sha512-D2S+3GLxWH+uhrNEcoh/fnmYeP8E8/zHl644d/jdA0g2uyXvy3sb0qxotE+ne0LtccHknQzWwZEzhak7oJ0COQ==", "dev": true }, "readable-stream": { @@ -6442,7 +6442,7 @@ "isarray": { "version": "0.0.1", "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz", - "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8=", + "integrity": "sha512-D2S+3GLxWH+uhrNEcoh/fnmYeP8E8/zHl644d/jdA0g2uyXvy3sb0qxotE+ne0LtccHknQzWwZEzhak7oJ0COQ==", "dev": true }, "readable-stream": { @@ -7352,7 +7352,7 @@ "isarray": { "version": "0.0.1", "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz", - "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8=", + "integrity": "sha512-D2S+3GLxWH+uhrNEcoh/fnmYeP8E8/zHl644d/jdA0g2uyXvy3sb0qxotE+ne0LtccHknQzWwZEzhak7oJ0COQ==", "dev": true }, "readable-stream": { @@ -8361,7 +8361,7 @@ "punycode": { "version": "1.4.1", "resolved": "https://registry.npmjs.org/punycode/-/punycode-1.4.1.tgz", - "integrity": "sha1-wNWmOycYgArY4esPpSachN1BhF4=", + "integrity": "sha512-jmYNElW7yvO7TV33CjSmvSiE2yco3bV2czu/OzDKdMNVZQWfxCblURLhf+47syQRBntjfLdd/H0egrzIG+oaFQ==", "dev": true } } @@ -9162,7 +9162,7 @@ "global-dirs": { "version": "0.1.1", "resolved": "https://registry.npmjs.org/global-dirs/-/global-dirs-0.1.1.tgz", - "integrity": "sha1-sxnA3UYH81PzvpzKTHL8FIxJ9EU=", + "integrity": "sha512-NknMLn7F2J7aflwFOlGdNIuCDpN3VGoSoB+aap3KABFWbHVn1TCgFC+np23J8W2BiZbjfEw3BFBycSMv1AFblg==", "dev": true, "requires": { "ini": "^1.3.4" @@ -10040,7 +10040,7 @@ "is-obj": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/is-obj/-/is-obj-1.0.1.tgz", - "integrity": "sha1-PkcprB9f3gJc19g6iW2rn09n2w8=" + "integrity": "sha512-l4RyHgRqGN4Y3+9JHVrNqO+tN0rV5My76uW5/nuO4K1b6vw5G8d/cmFjP9tRfEsdhZNt0IFdZuK/c2Vr4Nb+Qg==" }, "is-path-inside": { "version": "3.0.3", @@ -10437,7 +10437,7 @@ "isarray": { "version": "0.0.1", "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz", - "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8=", + "integrity": "sha512-D2S+3GLxWH+uhrNEcoh/fnmYeP8E8/zHl644d/jdA0g2uyXvy3sb0qxotE+ne0LtccHknQzWwZEzhak7oJ0COQ==", "dev": true }, "readable-stream": { @@ -11664,13 +11664,13 @@ "pify": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/pify/-/pify-3.0.0.tgz", - "integrity": "sha1-5aSs0sEB/fPZpNB/DbxNtJ3SgXY=", + "integrity": "sha512-C3FsVNH1udSEX48gGX1xfvwTWfsYWj5U+8/uK15BGzIGrKoUpghX8hWZwa/OFnakBiiVNmBvemTJR5mcy7iPcg==", "dev": true }, "read-pkg": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-3.0.0.tgz", - "integrity": "sha1-nLxoaXj+5l0WwA4rGcI3/Pbjg4k=", + "integrity": "sha512-BLq/cCO9two+lBgiTYNqD6GdtK8s4NpaWrl6/rCO9w0TUS8oJl7cmToOZfRYllKTISY6nt1U7jQ53brmKqY6BA==", "dev": true, "requires": { "load-json-file": "^4.0.0", @@ -12112,7 +12112,7 @@ "isarray": { "version": "0.0.1", "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz", - "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8=" + "integrity": "sha512-D2S+3GLxWH+uhrNEcoh/fnmYeP8E8/zHl644d/jdA0g2uyXvy3sb0qxotE+ne0LtccHknQzWwZEzhak7oJ0COQ==" } } }, @@ -16271,7 +16271,7 @@ "strip-bom": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-3.0.0.tgz", - "integrity": "sha1-IzTBjpx1n3vdVv3vfprj1YjmjtM=" + "integrity": "sha512-vavAMRXOgBVNF6nyEEmL3DBK19iRpDcoIwW+swQ+CbGiu7lju6t+JklA1MHweoWtadgt4ISVUsXLyDq34ddcwA==" }, "strip-comments": { "version": "2.0.1", diff --git a/src/api/apiGroupChatSettings.ts b/src/api/apiGroupChatSettings.ts index 2f52a879c..5121df29c 100644 --- a/src/api/apiGroupChatSettings.ts +++ b/src/api/apiGroupChatSettings.ts @@ -7,6 +7,8 @@ export interface groupChatSettings { startDate: string; startTime: string; duration: number; + agencyId: number; + hintMessage: string; repetitive: boolean; featureGroupChatV2Enabled?: boolean; } diff --git a/src/components/form/textarea.styles.scss b/src/components/form/textarea.styles.scss index 25a6172e2..05e13738b 100644 --- a/src/components/form/textarea.styles.scss +++ b/src/components/form/textarea.styles.scss @@ -12,7 +12,11 @@ } &__letters { - text-align: right; + position: absolute; + top: 4px; + right: 20px; + font-size: 12px; + color: $tertiary; } textarea { @@ -23,6 +27,7 @@ border-radius: $input-field-border-radius; outline: 0; box-shadow: $input-field-box-shadow; + vertical-align: top; &:hover { border: 1px solid $form-active; diff --git a/src/components/form/textarea.tsx b/src/components/form/textarea.tsx index e26432b42..23f0d3074 100644 --- a/src/components/form/textarea.tsx +++ b/src/components/form/textarea.tsx @@ -41,13 +41,13 @@ export const Textarea = ({ {placeholder} )} + {attrs.maxLength && ( +
+ {(attrs?.value?.toString() ?? '').length} /{' '} + {attrs.maxLength} +
+ )} - {attrs.maxLength && ( -
- {(attrs?.value?.toString() ?? '').length} /{' '} - {attrs.maxLength} -
- )} ); }; diff --git a/src/components/groupChat/CreateChatView.tsx b/src/components/groupChat/CreateChatView.tsx index 0eda95270..09bd9dc67 100644 --- a/src/components/groupChat/CreateChatView.tsx +++ b/src/components/groupChat/CreateChatView.tsx @@ -12,7 +12,8 @@ import { getExtendedSession, UPDATE_SESSIONS, SessionTypeContext, - useTenant + useTenant, + UserDataContext } from '../../globalState'; import { InputField, InputFieldItem } from '../inputField/InputField'; import { Checkbox, CheckboxItem } from '../checkbox/Checkbox'; @@ -45,6 +46,7 @@ import { useResponsive } from '../../hooks/useResponsive'; import { apiGetSessionRoomsByGroupIds } from '../../api/apiGetSessionRooms'; import { useSearchParam } from '../../hooks/useSearchParams'; import { useTranslation } from 'react-i18next'; +import { Textarea } from '../form/textarea'; registerLocale('de', de); @@ -52,6 +54,9 @@ export const CreateGroupChatView = (props) => { const { t: translate } = useTranslation(); const { rcGroupId: groupIdFromParam } = useParams<{ rcGroupId: string }>(); const history = useHistory(); + const { + userData: { agencies = [] } + } = useContext(UserDataContext); const { sessions, ready, dispatch } = useContext(SessionsDataContext); const { path: listPath } = useContext(SessionTypeContext); @@ -59,6 +64,8 @@ export const CreateGroupChatView = (props) => { const [selectedDate, setSelectedDate] = useState(''); const [selectedTime, setSelectedTime] = useState(''); const [selectedDuration, setSelectedDuration] = useState(null); + const [selectedAgency, setSelectedAgency] = useState(null); + const [hintMessage, setHintMessage] = useState(''); const [selectedRepetitive, setSelectedRepetitive] = useState(false); const [isCreateButtonDisabled, setIsCreateButtonDisabled] = useState(true); const [isSaveButtonDisabled, setIsSaveButtonDisabled] = useState(true); @@ -174,6 +181,12 @@ export const CreateGroupChatView = (props) => { handleTimePicker(selectedTime); setSelectedDuration(activeSession.item.duration); setSelectedRepetitive(activeSession.item.repetitive); + setSelectedAgency( + activeSession.item.assignedAgencies?.length > 0 + ? activeSession.item.assignedAgencies[0].id + : null + ); + setHintMessage(activeSession.item.hintMessage); } }, [groupIdFromParam, props.location.state, ready, sessions]); @@ -192,7 +205,9 @@ export const CreateGroupChatView = (props) => { prefillTime.toLocaleTimeString() !== inputTime.toLocaleTimeString() || parseInt(selectedDuration) !== activeSession.item.duration || - selectedRepetitive !== activeSession.item.repetitive + selectedRepetitive !== activeSession.item.repetitive || + selectedAgency !== activeSession.item.assignedAgencies?.[0]?.id || + hintMessage !== activeSession.item.hintMessage ); }, [ activeSession?.item.duration, @@ -200,6 +215,10 @@ export const CreateGroupChatView = (props) => { activeSession?.item.startDate, activeSession?.item.startTime, activeSession?.item.topic, + activeSession?.item.assignedAgencies, + activeSession?.item.hintMessage, + hintMessage, + selectedAgency, selectedChatTopic, selectedDate, selectedDuration, @@ -207,6 +226,14 @@ export const CreateGroupChatView = (props) => { selectedTime ]); + useEffect(() => { + const onlyOneAgencyAvailable = agencies?.length === 1; + + if (onlyOneAgencyAvailable) { + setSelectedAgency(agencies[0].id); + } + }, [agencies]); + useEffect(() => { const isChatTopicValid = selectedChatTopic && @@ -216,7 +243,8 @@ export const CreateGroupChatView = (props) => { isChatTopicValid && selectedDate && selectedTime && - selectedDuration + selectedDuration && + selectedAgency ) { isEditGroupChatMode && arePrefilledValuesChanged() ? setIsSaveButtonDisabled(false) @@ -231,6 +259,7 @@ export const CreateGroupChatView = (props) => { selectedDate, selectedTime, selectedDuration, + selectedAgency, isEditGroupChatMode, arePrefilledValuesChanged ]); @@ -243,12 +272,14 @@ export const CreateGroupChatView = (props) => { history.push( `${listPath}/${activeSession.item.groupId}/${activeSession.item.id}${pathInfo}` ); + } else { + history.push('/sessions/consultant/sessionView'); } }; const chatTopicInputItem: InputFieldItem = { name: 'chatTopic', - class: 'creatChat__name__input', + class: 'createChat__name__input', id: 'chatTopic', type: 'text', label: translate(chatTopicLabel), @@ -280,6 +311,10 @@ export const CreateGroupChatView = (props) => { setSelectedDuration(selectedOption.value); }; + const handleAgencySelect = (selectedOption) => { + setSelectedAgency(parseInt(selectedOption.value)); + }; + const getOptionOfSelectedDuration = useCallback(() => { return durationSelectOptionsSet .map((option) => ({ ...option, label: translate(option.label) })) @@ -311,6 +346,32 @@ export const CreateGroupChatView = (props) => { [getOptionOfSelectedDuration, translate] ); + const getOptionOfSelectedAgency = useCallback(() => { + const agency = agencies.find((agency) => agency.id === selectedAgency); + return agency + ? { + value: agency.id.toString(), + label: agency.name + } + : null; + }, [agencies, selectedAgency]); + + const agencySelectDropdown = useMemo( + () => ({ + id: 'agency', + selectedOptions: agencies.map(({ id, name }) => ({ + value: id.toString(), + label: name + })), + defaultValue: getOptionOfSelectedAgency(), + handleDropdownSelect: handleAgencySelect, + selectInputLabel: translate('groupChat.create.agencySelect.label'), + isSearchable: true, + menuPlacement: 'bottom' + }), + [agencies, getOptionOfSelectedAgency, translate] + ); + const repetitiveCheckboxItem = useMemo( () => ({ inputId: 'isRepetitiveChat', @@ -423,7 +484,9 @@ export const CreateGroupChatView = (props) => { startDate: getValidDateFormatForSelectedDate(selectedDate), startTime: getValidTimeFormatForSelectedTime(selectedTime), duration: parseInt(selectedDuration), + agencyId: selectedAgency, repetitive: selectedRepetitive, + hintMessage, featureGroupChatV2Enabled }; @@ -433,7 +496,9 @@ export const CreateGroupChatView = (props) => { }, [ createGroupChat, featureGroupChatV2Enabled, + hintMessage, isEditGroupChatMode, + selectedAgency, selectedChatTopic, selectedDate, selectedDuration, @@ -514,6 +579,7 @@ export const CreateGroupChatView = (props) => {

)} +
{ {translate('groupChat.create.dateInput.label')} +
{ {translate('groupChat.create.beginDateInput.label')}
+ + + {!isEditGroupChatMode && ( + + )} + +
+