Merge pull request finos#32 from Finsemble/49663-fix-grid-scroll

minor UX tweaks
whitedogio · Nov 8, 2022 · 830dd33 · 830dd33
2 parents c5d8c43 + 1e9fa5e
commit 830dd33
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 41 deletions.
diff --git a/toolbox/fdc3-workbench/src/components/ContextCreate.tsx b/toolbox/fdc3-workbench/src/components/ContextCreate.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useState, useRef } from "react";
 import { observer } from "mobx-react";
 import { createStyles, makeStyles, Theme } from "@material-ui/core/styles";
 import { Button, Grid, Typography, Tooltip, IconButton, Table, TableBody, TableRow, TableCell, TableContainer } from "@material-ui/core";
@@ -93,7 +93,7 @@ const useStyles: any = makeStyles((theme: Theme) =>
 	})
 );
 
-let emptyJson: ContextType = {
+const emptyJson: ContextType = {
 	type: "",
 	id: {}
 };
@@ -111,9 +111,10 @@ export const ContextCreate = observer(({contextName}: {contextName:string}) => {
 		schemaUrl: new URL("https://fdc3.finos.org/schemas/1.2/context.schema.json"),
 	});
 	const [contextError, setContextError] = useState<string | false>(false);
-	const [open, setOpen] = React.useState(false);
+	const [open, setOpen] = useState(false);
 	const [deleteContext, setDeleteContext] = useState<object | null>(null);
 	const [disabled, setDisabled] = useState(true);
+	const gridRef = useRef<any>(null);
 
 	const handleClickOpen = (id: string, name: any) => {
 		setOpen(true);
@@ -130,6 +131,7 @@ export const ContextCreate = observer(({contextName}: {contextName:string}) => {
 
 	const handleChangeTemplate = (newValue: any) => {
 		setTemplateName(newValue);
+
 		if (newValue?.value) {
 			const selectedContext = contextStore.contextsList.find(({ id }) => id === newValue?.value);
 			if (selectedContext) {
@@ -152,21 +154,9 @@ export const ContextCreate = observer(({contextName}: {contextName:string}) => {
 		setDisabled(false);
 		setContextError(false)
 		setTemplateName(newValue);
-		if(context && !found(newValue.value)){
-			const selectedContext = contextStore.contextsList.find(({ id }) => id === context.id);
-			if(selectedContext) {
-				selectedContext.id = newValue.value
-				setContext(selectedContext)
-			} else {
-				context.id = newValue.value;
-				setContext(context);
-			}
-			setDuplicateName(false)
-		}
-		else if(found(newValue.value) >= 1) {
-			setDuplicateName(true);
-			setContextError("Template name already exists");
-		}
+
+		if(context && !found(newValue.value)) setDuplicateName(false);
+		else if(found(newValue.value) >= 1) setDuplicateName(true);
 	}
 
 	const handleContextChange = (json: ContextType) => {
@@ -200,32 +190,32 @@ export const ContextCreate = observer(({contextName}: {contextName:string}) => {
 
 	const handleCreateTemplate = () => {
 		setTemplateName(null)
-		const newContext: ContextItem = {
-			id: "empty",
-			template: emptyJson,
-			schemaUrl: new URL("https://fdc3.finos.org/schemas/1.2/context.schema.json"),
-		};
-		setContext(newContext);
-		setContextValue(emptyJson);
+		setContext(null);
+		setContextValue(null);
 		setDisabled(true);
 	};
 
 	const handleSaveTemplate = () => {
 		const isValid: boolean = validate();
 
 		if (isValid && context && templateName) {
-			const selectedContext = contextStore.contextsList.find(({ id }) => id === templateName.value);
-			if(!selectedContext) contextStore.addContextItem(context);
-			contextStore.saveContextItem({
-				id: context.id,
+
+			const selectedContext = contextStore.contextsList.find(({ id }) => id === context.id);
+			const currContext = {
+				id: templateName.value,
 				schemaUrl: context.schemaUrl,
 				template: contextValue,
-			});
-			handleChangeTemplate({title: context.id, value: context.id})
+			}
+
+			if(!selectedContext) contextStore.addContextItem(currContext);
+
+			contextStore.saveContextItem(currContext, context.id);
+			handleChangeTemplate({title: currContext.id, value: currContext.id});
+
 			systemLogStore.addLog({
 				name: "saveTemplate",
 				type: "success",
-				value: context?.id,
+				value: currContext?.id,
 				variant: "text",
 			});
 		} else {
@@ -246,13 +236,16 @@ export const ContextCreate = observer(({contextName}: {contextName:string}) => {
 			const selectedContext = contextStore.contextsList.find(({ id }) => id === newValue.value);
 
 			if (selectedContext) {
+
 				const newContext: ContextItem = {
 					id: copyName,
 					template: selectedContext.template,
 					schemaUrl: selectedContext.schemaUrl,
 				};
+
 				contextStore.addContextItem(newContext);
 				contextStore.saveContextItem(newContext);
+
 				setContextValue(selectedContext.template);
 				setContext(newContext);
 
@@ -296,9 +289,25 @@ export const ContextCreate = observer(({contextName}: {contextName:string}) => {
 	};
 
 	useEffect(() => {
-	  if(duplicateName) setDisabled(true)
-	}, [duplicateName])
+	  if(duplicateName) {
+		setDisabled(true);
+		setContextError("Template name already exists");
+	  }
+	  else setDisabled(false);
+	}, [duplicateName, contextValue])
 
+	useEffect(() => {
+		if(gridRef && gridRef.current) gridRef.current.scrollIntoView({behavior: 'auto', block: 'nearest'});
+		if(context == null) {
+			const newContext: ContextItem = {
+				id: "empty",
+				template: emptyJson,
+				schemaUrl: new URL("https://fdc3.finos.org/schemas/1.2/context.schema.json"),
+			};
+			setContext(newContext);
+			setContextValue(emptyJson);
+		}
+	}, [context])
 
 	return (
 		<div className={classes.root}>
@@ -311,7 +320,7 @@ export const ContextCreate = observer(({contextName}: {contextName:string}) => {
 					<Table>
 						<TableBody>
 							{contextStore.contextsList.map(({ id, template }, index) => (
-								<TableRow hover role="checkbox" tabIndex={-1} key={`row-${index}`} selected={id === templateName?.value}>
+								<TableRow hover role="checkbox" tabIndex={-1} key={`row-${index}`} selected={id === templateName?.value} ref={id === templateName?.value ? gridRef : null}>
 									<TableCell key={`row-${index}-column-0`} align="left" onClick={() => handleChangeTemplate({title: id, value: id})}>
 										<Typography variant="subtitle1" >
 											{id}
@@ -376,7 +385,7 @@ export const ContextCreate = observer(({contextName}: {contextName:string}) => {
 								variant="outlined"
 								className={classes.textField}
 								placeholder="Choose Context Template"
-								value={templateName?.value || ' '}
+								value={templateName?.value || ''}
 								onChange={(e) => handleChangeTemplateName({title: e.target.value, value: e.target.value})}
 							/>
 						</Grid>

diff --git a/toolbox/fdc3-workbench/src/store/ContextStore.ts b/toolbox/fdc3-workbench/src/store/ContextStore.ts
@@ -67,15 +67,14 @@ class ContextStore {
 
 	addContextItem(contextItem: ContextItem) {
 		this.contextsList.push(contextItem);
-		this.contextsList.sort((a, b) => (a.id > b.id ? 1 : -1));
+		this.contextsList.sort((a, b) => a.id.localeCompare(b.id));
 		this.updateLocalStorage(this.contextsList);
 	}
 
-	saveContextItem(contextItem: ContextItem) {
-		const context = this.contextsList.find(({ id }) => id === contextItem.id);
-
+	saveContextItem(contextItem: ContextItem, selectedId?: string) {
+		const context = this.contextsList.find(({ id }) => id === selectedId || id ===contextItem.id);
 		if (context) {
-			context.template = contextItem.template;
+			Object.keys(contextItem).forEach((key:any) => (context[key as keyof ContextItem] as any) = contextItem[key as keyof ContextItem]);
 		}
 		this.updateLocalStorage(this.contextsList);
 	}