fix: selected departments not being displayed due to pagination (#30365)

RocketChat · Sep 12, 2023 · 880ab56 · 880ab56
1 parent 8202f27
commit 880ab56
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 6 deletions.
diff --git a/.changeset/slimy-cheetahs-heal.md b/.changeset/slimy-cheetahs-heal.md
@@ -0,0 +1,5 @@
+---
+'@rocket.chat/meteor': patch
+---
+
+Fixed selected departments not being displayed due to pagination
diff --git a/apps/meteor/client/components/Omnichannel/hooks/useDepartmentsList.ts b/apps/meteor/client/components/Omnichannel/hooks/useDepartmentsList.ts
@@ -20,7 +20,6 @@ type DepartmentListItem = {
 	_id: string;
 	label: string;
 	value: string;
-	_updatedAt: Date;
 };
 
 export const useDepartmentsList = (
@@ -66,7 +65,6 @@ export const useDepartmentsList = (
 						_id,
 						label: department.archived ? `${name} [${t('Archived')}]` : name,
 						value: _id,
-						_updatedAt: new Date(_updatedAt || ''),
 					};
 				});
 
@@ -75,15 +73,13 @@ export const useDepartmentsList = (
 					_id: '',
 					label: t('All'),
 					value: 'all',
-					_updatedAt: new Date(),
 				});
 
 			options.haveNone &&
 				items.unshift({
 					_id: '',
 					label: t('None'),
 					value: '',
-					_updatedAt: new Date(),
 				});
 
 			return {

diff --git a/apps/meteor/client/views/omnichannel/departments/EditDepartmentWithData.tsx b/apps/meteor/client/views/omnichannel/departments/EditDepartmentWithData.tsx
@@ -22,7 +22,7 @@ const EditDepartmentWithData = ({ id, title }: EditDepartmentWithDataProps) => {
 	});
 
 	if (isInitialLoading) {
-		return <FormSkeleton />;
+		return <FormSkeleton padding='1.5rem 1rem' maxWidth='37.5rem' margin='0 auto' />;
 	}
 
 	if (isError || (id && !data?.department)) {

diff --git a/apps/meteor/ee/client/omnichannel/additionalForms/DepartmentForwarding.tsx b/apps/meteor/ee/client/omnichannel/additionalForms/DepartmentForwarding.tsx
@@ -28,6 +28,11 @@ export const DepartmentForwarding = ({ departmentId, value = [], handler, label
 
 	const { phase: departmentsPhase, items: departmentsItems, itemCount: departmentsTotal } = useRecordList(departmentsList);
 
+	const options = useMemo(() => {
+		const pending = value.filter(({ value }) => !departmentsItems.find((dep) => dep.value === value));
+		return [...departmentsItems, ...pending];
+	}, [departmentsItems, value]);
+
 	return (
 		<Field>
 			<Field.Label>{t(label)}</Field.Label>
@@ -41,7 +46,7 @@ export const DepartmentForwarding = ({ departmentId, value = [], handler, label
 						filter={debouncedDepartmentsFilter}
 						setFilter={setDepartmentsFilter}
 						onChange={handler}
-						options={departmentsItems}
+						options={options}
 						value={value}
 						placeholder={t('Select_an_option')}
 						endReached={