instance and set presets now have overwrite support

Cycling74 · Jan 8, 2025 · 44da659 · 44da659
1 parent 8699c23
commit 44da659
Show file tree

Hide file tree

Showing 4 changed files with 59 additions and 12 deletions.
diff --git a/src/components/presets/index.tsx b/src/components/presets/index.tsx
@@ -14,7 +14,8 @@ export type PresetDrawerProps = {
 	onClose: () => any;
 	onDeletePreset: (preset: PresetRecord) => any;
 	onLoadPreset: (preset: PresetRecord) => any;
-	onSavePreset: (name: string) => any;
+	onCreatePreset: (name: string) => any;
+	onSavePreset: (preset: PresetRecord) => any;
 	onRenamePreset: (preset: PresetRecord, name: string) => any;
 	onSetInitialPreset?: (set: PresetRecord) => any;
 	presets: Seq.Indexed<PresetRecord>;
@@ -23,6 +24,7 @@ export type PresetDrawerProps = {
 const PresetDrawer: FunctionComponent<PresetDrawerProps> = memo(function WrappedPresetDrawer({
 	open,
 	onClose,
+	onCreatePreset,
 	onDeletePreset,
 	onLoadPreset,
 	onSavePreset,
@@ -57,7 +59,7 @@ const PresetDrawer: FunctionComponent<PresetDrawerProps> = memo(function Wrapped
 			position="right"
 			title={ <Group gap="xs"><IconElement path={ mdiCamera }/> Presets</Group> }
 		>
-			<SavePresetForm onSave={ onSavePreset } />
+			<SavePresetForm onSave={ onCreatePreset } />
 			<Divider mt="lg" />
 			<DrawerSectionTitle>Saved Presets</DrawerSectionTitle>
 			<Stack gap="sm">
@@ -68,7 +70,8 @@ const PresetDrawer: FunctionComponent<PresetDrawerProps> = memo(function Wrapped
 							preset={ preset }
 							onLoad={ onLoadPreset }
 							onDelete={ onTriggerDeletePreset }
-							onRename = { onRenamePreset }
+							onRename={ onRenamePreset }
+							onSave={ onSavePreset }
 							onSetInitial = { onSetInitialPreset }
 							validateUniqueName={ validateUniquePresetName }
 						/>

diff --git a/src/components/presets/item.tsx b/src/components/presets/item.tsx
@@ -4,14 +4,15 @@ import classes from "./presets.module.css";
 import { PresetRecord } from "../../models/preset";
 import { keyEventIsValidForName, replaceInvalidNameChars } from "../../lib/util";
 import { IconElement } from "../elements/icon";
-import { mdiCheck, mdiClose, mdiDotsVertical, mdiHistory, mdiPencil, mdiStar, mdiTrashCan } from "@mdi/js";
+import { mdiCheck, mdiClose, mdiContentSave, mdiDotsVertical, mdiHistory, mdiPencil, mdiStar, mdiTrashCan } from "@mdi/js";
 
 export type PresetItemProps = {
 	preset: PresetRecord;
-	onDelete: (set: PresetRecord) => any;
-	onLoad: (set: PresetRecord) => any;
-	onRename: (set: PresetRecord, name: string) => any;
-	onSetInitial?: (set: PresetRecord) => any;
+	onDelete: (preset: PresetRecord) => any;
+	onLoad: (preset: PresetRecord) => any;
+	onRename: (preset: PresetRecord, name: string) => any;
+	onSave: (preset: PresetRecord) => any;
+	onSetInitial?: (preset: PresetRecord) => any;
 	validateUniqueName: (name: string) => boolean;
 };
 
@@ -20,6 +21,7 @@ export const PresetItem: FunctionComponent<PresetItemProps> = memo(function Wrap
 	onDelete,
 	onLoad,
 	onRename,
+	onSave,
 	onSetInitial,
 	validateUniqueName
 }: PresetItemProps) {
@@ -40,6 +42,10 @@ export const PresetItem: FunctionComponent<PresetItemProps> = memo(function Wrap
 		onSetInitial(preset);
 	}, [preset, onSetInitial]);
 
+	const onSavePreset = useCallback((_e: MouseEvent<HTMLButtonElement>) => {
+		onSave(preset);
+	}, [onSave, preset]);
+
 	const onLoadPreset = useCallback((_e: MouseEvent<HTMLButtonElement>) => {
 		onLoad(preset);
 	}, [onLoad, preset]);
@@ -154,8 +160,10 @@ export const PresetItem: FunctionComponent<PresetItemProps> = memo(function Wrap
 				</Menu.Target>
 				<Menu.Dropdown>
 					<Menu.Label>Preset Actions</Menu.Label>
+					<Menu.Item leftSection={ <IconElement path={ mdiContentSave } /> } onClick={ onSavePreset } >Overwrite</Menu.Item>
 					<Menu.Item leftSection={ <IconElement path={ mdiPencil } /> } onClick={ toggleEditing } >Rename</Menu.Item>
 					{ onSetInitial && <Menu.Item leftSection={ <IconElement path={ mdiStar } /> } onClick={ onSetInitialPreset } >Load on Startup</Menu.Item> }
+					<Menu.Divider />
 					<Menu.Item color="red" leftSection={ <IconElement path={ mdiTrashCan } /> } onClick={ onDeletePreset } >Delete</Menu.Item>
 				</Menu.Dropdown>
 			</Menu>

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -169,10 +169,27 @@ const Index: FunctionComponent<Record<string, never>> = () => {
 		dispatch(loadSetPresetOnRemote(preset));
 	}, [dispatch]);
 
-	const onSavePreset = useCallback((name: string) => {
+	const onCreatePreset = useCallback((name: string) => {
 		dispatch(saveSetPresetToRemote(name));
 	}, [dispatch]);
 
+	const onSavePreset = useCallback((preset: PresetRecord) => {
+		modals.openConfirmModal({
+			title: "Overwrite Preset",
+			centered: true,
+			children: (
+				<Text size="sm">
+					Are you sure you want to overwrite the preset named { `"${preset.name}"` } with the current values?
+				</Text>
+			),
+			labels: { confirm: "Overwrite", cancel: "Cancel" },
+			confirmProps: { color: "red" },
+			onConfirm: () => {
+				dispatch(saveSetPresetToRemote(preset.name, false));
+			}
+		});
+	}, [dispatch]);
+
 	const onDeletePreset = useCallback((preset: PresetRecord) => {
 		dispatch(destroySetPresetOnRemote(preset));
 	}, [dispatch]);
@@ -261,8 +278,9 @@ const Index: FunctionComponent<Record<string, never>> = () => {
 				onClose={ closePresetDrawer }
 				onDeletePreset={ onDeletePreset }
 				onLoadPreset={ onLoadPreset }
-				onSavePreset={ onSavePreset }
+				onCreatePreset={ onCreatePreset }
 				onRenamePreset={ onRenamePreset }
+				onSavePreset={ onSavePreset }
 				presets={ graphPresets }
 			/>
 		</>

diff --git a/src/pages/instances/[id].tsx b/src/pages/instances/[id].tsx
@@ -92,10 +92,27 @@ export default function Instance() {
 		dispatch(loadPresetOnRemoteInstance(currentInstance, preset));
 	}, [dispatch, currentInstance]);
 
-	const onSavePreset = useCallback((name: string) => {
+	const onCreatePreset = useCallback((name: string) => {
 		dispatch(savePresetToRemoteInstance(currentInstance, name));
 	}, [dispatch, currentInstance]);
 
+	const onSavePreset = useCallback((preset: PresetRecord) => {
+		modals.openConfirmModal({
+			title: "Overwrite Preset",
+			centered: true,
+			children: (
+				<Text size="sm">
+					Are you sure you want to overwrite the preset named { `"${preset.name}"` } with the current values?
+				</Text>
+			),
+			labels: { confirm: "Overwrite", cancel: "Cancel" },
+			confirmProps: { color: "red" },
+			onConfirm: () => {
+				dispatch(savePresetToRemoteInstance(currentInstance, preset.name, false));
+			}
+		});
+	}, [dispatch, currentInstance]);
+
 	const onDeletePreset = useCallback((preset: PresetRecord) => {
 		dispatch(destroyPresetOnRemoteInstance(currentInstance, preset));
 	}, [dispatch, currentInstance]);
@@ -178,8 +195,9 @@ export default function Instance() {
 				onClose={ closePresetDrawer }
 				onDeletePreset={ onDeletePreset }
 				onLoadPreset={ onLoadPreset }
-				onSavePreset={ onSavePreset }
+				onCreatePreset={ onCreatePreset }
 				onRenamePreset={ onRenamePreset }
+				onSavePreset={ onSavePreset }
 				onSetInitialPreset={ onSetInitialPreset }
 				presets={ currentInstance.presets.valueSeq() }
 			/>