Merge pull request #146 from Cycling74/feature/set-save

add save/save as (aka overwrite) to sets action menu
Cycling74 · Jun 22, 2024 · 8c03763 · 8c03763
2 parents feac99b + cd80b6c
commit 8c03763
Show file tree

Hide file tree

Showing 9 changed files with 49 additions and 17 deletions.
diff --git a/src/components/dataref/item.tsx b/src/components/dataref/item.tsx
@@ -115,10 +115,10 @@ const DataRefEntry: FunctionComponent<DataRefEntryProps> = memo(function Wrapped
 						</Menu.Target>
 						<Menu.Dropdown>
 							<Menu.Label>Actions</Menu.Label>
-							<Menu.Item onClick={ toggleEditing } leftSection={ <FontAwesomeIcon icon={ faPen } /> } >
+							<Menu.Item onClick={ toggleEditing } leftSection={ <FontAwesomeIcon fixedWidth icon={ faPen } /> } >
 								Change Source
 							</Menu.Item>
-							<Menu.Item color="red" leftSection={ <FontAwesomeIcon icon={ faEraser } /> } onClick={ onClearDataRef } disabled={ !dataFile } >
+							<Menu.Item color="red" leftSection={ <FontAwesomeIcon fixedWidth icon={ faEraser } /> } onClick={ onClearDataRef } disabled={ !dataFile } >
 								Clear Buffer
 							</Menu.Item>
 						</Menu.Dropdown>

diff --git a/src/components/messages/inport.tsx b/src/components/messages/inport.tsx
@@ -78,7 +78,7 @@ const MessageInportEntry: FunctionComponent<MessageInportEntryProps> = memo(func
 					</Menu.Target>
 					<Menu.Dropdown>
 						<Menu.Label>Actions</Menu.Label>
-						<Menu.Item leftSection={ <FontAwesomeIcon icon={ faCode } /> } onClick={ toggleMetaEditor }>
+						<Menu.Item leftSection={ <FontAwesomeIcon fixedWidth icon={ faCode } /> } onClick={ toggleMetaEditor }>
 							Edit Metadata
 						</Menu.Item>
 					</Menu.Dropdown>

diff --git a/src/components/messages/outport.tsx b/src/components/messages/outport.tsx
@@ -67,7 +67,7 @@ const MessageOutportEntry: FunctionComponent<MessageOutportEntryProps> = memo(fu
 					</Menu.Target>
 					<Menu.Dropdown>
 						<Menu.Label>Actions</Menu.Label>
-						<Menu.Item leftSection={ <FontAwesomeIcon icon={ faCode } /> } onClick={ toggleMetaEditor }>
+						<Menu.Item leftSection={ <FontAwesomeIcon fixedWidth icon={ faCode } /> } onClick={ toggleMetaEditor }>
 							Edit Metadata
 						</Menu.Item>
 					</Menu.Dropdown>

diff --git a/src/components/parameter/item.tsx b/src/components/parameter/item.tsx
@@ -94,7 +94,7 @@ const Parameter = memo(function WrappedParameter({ param, onSetNormalizedValue,
 					</Menu.Target>
 					<Menu.Dropdown>
 						<Menu.Label>Actions</Menu.Label>
-						<Menu.Item leftSection={ <FontAwesomeIcon icon={ faCode } /> } onClick={ toggleMetaEditor }>
+						<Menu.Item leftSection={ <FontAwesomeIcon fixedWidth icon={ faCode } /> } onClick={ toggleMetaEditor }>
 							Edit Metadata
 						</Menu.Item>
 					</Menu.Dropdown>

diff --git a/src/components/patchers/item.tsx b/src/components/patchers/item.tsx
@@ -125,8 +125,8 @@ export const PatcherItem: FunctionComponent<PatcherItemProps> = memo(function Wr
 				</Menu.Target>
 				<Menu.Dropdown>
 					<Menu.Label>Actions</Menu.Label>
-					<Menu.Item leftSection={ <FontAwesomeIcon icon={ faPen } /> } onClick={ toggleEditing } >Rename</Menu.Item>
-					<Menu.Item color="red" leftSection={ <FontAwesomeIcon icon={ faTrash } /> } onClick={ onDeletePatcher } >Delete</Menu.Item>
+					<Menu.Item leftSection={ <FontAwesomeIcon fixedWidth icon={ faPen } /> } onClick={ toggleEditing } >Rename</Menu.Item>
+					<Menu.Item color="red" leftSection={ <FontAwesomeIcon fixedWidth icon={ faTrash } /> } onClick={ onDeletePatcher } >Delete</Menu.Item>
 				</Menu.Dropdown>
 			</Menu>
 		</Group>

diff --git a/src/components/presets/item.tsx b/src/components/presets/item.tsx
@@ -138,9 +138,9 @@ export const PresetItem: FunctionComponent<PresetItemProps> = memo(function Wrap
 				</Menu.Target>
 				<Menu.Dropdown>
 					<Menu.Label>Actions</Menu.Label>
-					<Menu.Item leftSection={ <FontAwesomeIcon icon={ faPen } /> } onClick={ toggleEditing } >Rename</Menu.Item>
-					{ onSetInitial && <Menu.Item leftSection={ <FontAwesomeIcon icon={ faStar } /> } onClick={ onSetInitialPreset } >Load on Startup</Menu.Item> }
-					<Menu.Item color="red" leftSection={ <FontAwesomeIcon icon={ faTrash } /> } onClick={ onDeletePreset } >Delete</Menu.Item>
+					<Menu.Item leftSection={ <FontAwesomeIcon fixedWidth icon={ faPen } /> } onClick={ toggleEditing } >Rename</Menu.Item>
+					{ onSetInitial && <Menu.Item leftSection={ <FontAwesomeIcon fixedWidth icon={ faStar } /> } onClick={ onSetInitialPreset } >Load on Startup</Menu.Item> }
+					<Menu.Item color="red" leftSection={ <FontAwesomeIcon fixedWidth icon={ faTrash } /> } onClick={ onDeletePreset } >Delete</Menu.Item>
 				</Menu.Dropdown>
 			</Menu>
 		</Group>

diff --git a/src/components/sets/index.tsx b/src/components/sets/index.tsx
@@ -17,6 +17,7 @@ export type SetsDrawerProps = {
 	onLoadSet: (set: GraphSetRecord) => any;
 	onRenameSet: (set: GraphSetRecord, name: string) => any;
 	onSaveSet: (name: string) => any;
+	onSaveSetAs: (set: GraphSetRecord) => any;
 	open: boolean;
 	sets: Seq.Indexed<GraphSetRecord>;
 }
@@ -30,7 +31,8 @@ const SetsDrawer: FunctionComponent<SetsDrawerProps> = memo(function WrappedSets
 	onDeleteSet,
 	onLoadSet,
 	onRenameSet,
-	onSaveSet
+	onSaveSet,
+	onSaveSetAs
 
 }) {
 
@@ -86,7 +88,7 @@ const SetsDrawer: FunctionComponent<SetsDrawerProps> = memo(function WrappedSets
 								<DrawerSectionTitle>Saved Sets</DrawerSectionTitle>
 								<Stack gap="sm" >
 									{
-										sets.map(set => <GraphSetItem key={ set.id } set={ set } onRename={ onRenameSet } onLoad={ onLoadSet } onDelete={ onTriggerDeleteSet }/> )
+										sets.map(set => <GraphSetItem key={ set.id } set={ set } onRename={ onRenameSet } onLoad={ onLoadSet } onDelete={ onTriggerDeleteSet } onSave={ onSaveSetAs }/> )
 									}
 								</Stack>
 							</Flex>

diff --git a/src/components/sets/item.tsx b/src/components/sets/item.tsx
@@ -2,7 +2,7 @@ import { ChangeEvent, FormEvent, FunctionComponent, KeyboardEvent, MouseEvent, m
 import { GraphSetRecord } from "../../models/set";
 import { ActionIcon, Button, Group, Menu, TextInput, Tooltip } from "@mantine/core";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faCheck, faClose, faEllipsisVertical, faPen, faTrash, faClock } from "@fortawesome/free-solid-svg-icons";
+import { faCheck, faClose, faEllipsisVertical, faPen, faTrash, faClock, faFileArrowDown } from "@fortawesome/free-solid-svg-icons";
 import classes from "./sets.module.css";
 import { keyEventIsValidForName, replaceInvalidNameChars } from "../../lib/util";
 
@@ -11,13 +11,15 @@ export type GraphSetItemProps = {
 	onDelete: (set: GraphSetRecord) => any;
 	onLoad: (set: GraphSetRecord) => any;
 	onRename: (set: GraphSetRecord, name: string) => any;
+	onSave: (set: GraphSetRecord) => any;
 };
 
 export const GraphSetItem: FunctionComponent<GraphSetItemProps> = memo(function WrappedGraphSet({
 	set,
 	onDelete,
 	onLoad,
-	onRename
+	onRename,
+	onSave
 }: GraphSetItemProps) {
 
 	const [isEditing, setIsEditing] = useState<boolean>(false);
@@ -49,6 +51,10 @@ export const GraphSetItem: FunctionComponent<GraphSetItemProps> = memo(function
 		onDelete(set);
 	}, [onDelete, set]);
 
+	const onSaveSet = useCallback((_e: MouseEvent<HTMLButtonElement>) => {
+		onSave(set);
+	}, [onSave, set]);
+
 	const onChange = useCallback((e: ChangeEvent<HTMLInputElement>) => {
 		setName(replaceInvalidNameChars(e.target.value));
 		if (error && e.target.value?.length) setError(undefined);
@@ -128,8 +134,9 @@ export const GraphSetItem: FunctionComponent<GraphSetItemProps> = memo(function
 				</Menu.Target>
 				<Menu.Dropdown>
 					<Menu.Label>Actions</Menu.Label>
-					<Menu.Item leftSection={ <FontAwesomeIcon icon={ faPen } /> } onClick={ toggleEditing } >Rename</Menu.Item>
-					<Menu.Item color="red" leftSection={ <FontAwesomeIcon icon={ faTrash } /> } onClick={ onDeleteSet } >Delete</Menu.Item>
+					<Menu.Item leftSection={ <FontAwesomeIcon fixedWidth icon={ faFileArrowDown } /> } onClick={ onSaveSet } >{ set.latest ? "Save Changes" : "Overwrite" }</Menu.Item>
+					<Menu.Item leftSection={ <FontAwesomeIcon fixedWidth icon={ faPen } /> } onClick={ toggleEditing } >Rename</Menu.Item>
+					<Menu.Item color="red" leftSection={ <FontAwesomeIcon fixedWidth icon={ faTrash } /> } onClick={ onDeleteSet } >Delete</Menu.Item>
 				</Menu.Dropdown>
 			</Menu>
 		</Group>

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -1,4 +1,4 @@
-import { Button, Group, Stack } from "@mantine/core";
+import { Button, Group, Stack, Text } from "@mantine/core";
 import { FunctionComponent, useCallback } from "react";
 import { useAppDispatch, useAppSelector } from "../hooks/useAppDispatch";
 import { RootStateType } from "../lib/store";
@@ -24,6 +24,7 @@ import PatcherDrawer from "../components/patchers";
 import { PatcherRecord } from "../models/patcher";
 import { SortOrder } from "../lib/constants";
 import { GraphSetRecord } from "../models/set";
+import { modals } from "@mantine/modals";
 
 const Index: FunctionComponent<Record<string, never>> = () => {
 
@@ -97,6 +98,27 @@ const Index: FunctionComponent<Record<string, never>> = () => {
 		dispatch(saveGraphSetOnRemote(name));
 	}, [dispatch]);
 
+	const onSaveSetAs = useCallback((set: GraphSetRecord) => {
+		if (set.latest) {
+			dispatch(saveGraphSetOnRemote(set.name));
+		} else {
+			modals.openConfirmModal({
+				title: "Overwrite Set",
+				centered: true,
+				children: (
+					<Text size="sm">
+						Are you sure you want to overwrite the set named { `"${set.name}"` }?
+					</Text>
+				),
+				labels: { confirm: "Overwrite", cancel: "Cancel" },
+				confirmProps: { color: "red" },
+				onConfirm: () => {
+					dispatch(saveGraphSetOnRemote(set.name));
+				}
+			});
+		}
+	}, [dispatch]);
+
 	// Presets
 	const onLoadPreset = useCallback((preset: PresetRecord) => {
 		dispatch(loadSetPresetOnRemote(preset));
@@ -163,6 +185,7 @@ const Index: FunctionComponent<Record<string, never>> = () => {
 				onLoadSet={ onLoadSet }
 				onRenameSet={ onRenameSet }
 				onSaveSet={ onSaveSet }
+				onSaveSetAs={ onSaveSetAs }
 				open={ setDrawerIsOpen }
 				sets={ graphSets }
 			/>