Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

add save/save as (aka overwrite) to sets action menu #146

Merged
merged 3 commits into from
Jun 22, 2024
Merged

add save/save as (aka overwrite) to sets action menu #146

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
66dcb00
add save/save as (aka overwrite) to sets action menu
x37v Jun 21, 2024
783cbd3
sets: update menu item entry for updating a set with a diff icon and …
fde31 Jun 22, 2024
cd80b6c
spread fixedWidth attr on FAIcon within Menu.Item elements
fde31 Jun 22, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions src/components/dataref/item.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion src/components/messages/inport.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion src/components/messages/outport.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion src/components/parameter/item.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
4 changes: 2 additions & 2 deletions src/components/patchers/item.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
6 changes: 3 additions & 3 deletions src/components/presets/item.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
6 changes: 4 additions & 2 deletions src/components/sets/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>;
}
Expand All @@ -30,7 +31,8 @@ const SetsDrawer: FunctionComponent<SetsDrawerProps> = memo(function WrappedSets
onDeleteSet,
onLoadSet,
onRenameSet,
onSaveSet
onSaveSet,
onSaveSetAs

}) {

Expand Down Expand Up @@ -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>
Expand Down
15 changes: 11 additions & 4 deletions src/components/sets/item.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";

Expand All @@ -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);
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -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>
Expand Down
25 changes: 24 additions & 1 deletion src/pages/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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";
Expand All @@ -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>> = () => {

Expand Down Expand Up @@ -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));
Expand Down Expand Up @@ -163,6 +185,7 @@ const Index: FunctionComponent<Record<string, never>> = () => {
onLoadSet={ onLoadSet }
onRenameSet={ onRenameSet }
onSaveSet={ onSaveSet }
onSaveSetAs={ onSaveSetAs }
open={ setDrawerIsOpen }
sets={ graphSets }
/>
Expand Down
Loading