Merge pull request #5354 from 3drepo/ISSUE_5351

ISSUE #5351 - Fixed selection of collection in groups
3drepo · Jan 20, 2025 · c3edb60 · c3edb60
2 parents e6cbc1d + c958c06
commit c3edb60
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 10 deletions.
diff --git a/...OrEditGroup/groupSettingsForm/groupsCollectionSelect/groupsCollectionSelect.component.tsx b/...OrEditGroup/groupSettingsForm/groupsCollectionSelect/groupsCollectionSelect.component.tsx
@@ -15,10 +15,9 @@
  *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { Select } from '@controls/inputs/select/select.component';
 import { MenuItem } from '@mui/material';
 import { formatMessage } from '@/v5/services/intl';
-import { MenuItemPrefix } from './groupsCollectionSelect.styles';
+import { CollectionSelect, MenuItemPrefix } from './groupsCollectionSelect.styles';
 
 const NONE = formatMessage({
 	id: 'ticketsGroupSettings.form.groupCollection.option.none',
@@ -32,19 +31,24 @@ type GroupsCollectionSelectProps = {
 	prefixes: string[][];
 	disabled?: boolean;
 };
-export const GroupsCollectionSelect = ({ value, onChange, prefixes, ...props }: GroupsCollectionSelectProps) => (
-	<Select value={JSON.stringify(value || [])} onChange={(e) => onChange(JSON.parse(e.target.value as string))} {...props}>
-		<MenuItem value={JSON.stringify([])}>{NONE}</MenuItem>
+
+const renderValue = (val)=>  val == '[]' ? NONE : JSON.parse(val).join(' / ');
+
+export const GroupsCollectionSelect = ({ value, prefixes, onChange, ...props }: GroupsCollectionSelectProps) => (
+	<CollectionSelect value={JSON.stringify(value || [])} 
+		onChange={(e) => onChange(JSON.parse(e.target.value as string))} 
+		renderValue={renderValue} {...props} 
+	>
+		<MenuItem key="none" value="[]">{NONE}</MenuItem>
 		{prefixes.map((prefix) => (
 			<MenuItemPrefix
 				key={JSON.stringify(prefix)}
-				selected={JSON.stringify(prefix) === JSON.stringify(value)}
 				value={JSON.stringify(prefix)}
 				$depth={prefix.length - 1}
 			>
 				{/* @ts-ignore */}
 				<span>{prefix.at(-1)}</span>
 			</MenuItemPrefix>
 		))}
-	</Select>
+	</CollectionSelect>
 );
diff --git a/.../addOrEditGroup/groupSettingsForm/groupsCollectionSelect/groupsCollectionSelect.styles.ts b/.../addOrEditGroup/groupSettingsForm/groupsCollectionSelect/groupsCollectionSelect.styles.ts
@@ -15,6 +15,7 @@
  *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
+import { Select } from '@controls/inputs/select/select.component';
 import { MenuItem as MenuItemBase } from '@mui/material';
 import styled, { css } from 'styled-components';
 
@@ -26,3 +27,11 @@ export const MenuItemPrefix = styled(MenuItemBase)<{ $depth: number }>`
 		}
 	`}
 `;
+
+export const CollectionSelect = styled(Select)`
+	.MuiInputBase-input {
+		text-overflow: ellipsis;  
+		direction: rtl;
+		text-align: left;
+	}
+`;
diff --git a/...orm/ticketGroups/groups/groupActionMenu/groupSettingsForm/groupSettingsForm.component.tsx b/...orm/ticketGroups/groups/groupActionMenu/groupSettingsForm/groupSettingsForm.component.tsx
@@ -86,6 +86,7 @@ export const GroupSettingsForm = ({ value, onSubmit, onCancel, prefixes, isColor
 	const isAdmin = !TicketsCardHooksSelectors.selectReadOnly();
 	const { teamspace, revision } = useParams<ViewerParams>();
 	const { containerOrFederation } = useContext(TicketContext);
+	const [basePrefixes, setBasePrefixes] = useState([]);
 
 	const formRef = useRef(null);
 
@@ -144,7 +145,7 @@ export const GroupSettingsForm = ({ value, onSubmit, onCancel, prefixes, isColor
 	};
 
 	const handleNewCollectionChange = (collection: string[]) => {
-		setNewPrefix([collection]);
+		setNewPrefix(collection);
 		setValue('prefix', collection, { shouldDirty: true });
 	};
 
@@ -174,6 +175,7 @@ export const GroupSettingsForm = ({ value, onSubmit, onCancel, prefixes, isColor
 				group: {},
 			});
 			setIsSmart(true);
+			setNewPrefix([]);
 			return;
 		}
 
@@ -183,8 +185,14 @@ export const GroupSettingsForm = ({ value, onSubmit, onCancel, prefixes, isColor
 		setIsSmart(!!value?.group?.rules?.length);
 		setInputObjects(convertToV4GroupNodes(value?.group?.objects));
 		setIsPastingRules(false);
+		setNewPrefix(newValue.prefix);
 	}, [value, isColored]);
 
+	useEffect(() => {
+		const theval = prefixes.filter((elem) => !isEqual(elem, value?.prefix));
+		setBasePrefixes(theval);
+	}, [prefixes, value?.prefix]);
+
 	useEffect(() => {
 		if (!formRef.current) return;
 		const viewportHeight = window.innerHeight;
@@ -264,7 +272,7 @@ export const GroupSettingsForm = ({ value, onSubmit, onCancel, prefixes, isColor
 							})}
 							formError={errors?.prefix}
 							disabled={!isAdmin}
-							prefixes={prefixes.concat(newPrefix).sort()}
+							prefixes={basePrefixes.concat([newPrefix]).sort()}
 						/>
 					</FormRow>
 					{
@@ -275,7 +283,7 @@ export const GroupSettingsForm = ({ value, onSubmit, onCancel, prefixes, isColor
 										{newPrefix?.length ? (
 											<FormattedMessage
 												id="ticketsGroupSettings.link.editCollection"
-												defaultMessage="Edit new collection"
+												defaultMessage="Edit collection"
 											/>
 										) : (
 											<FormattedMessage