Malte Grimm
3 years ago
2 changed files with 249 additions and 263 deletions
@ -0,0 +1,156 @@ |
|||||
|
import { ConfigSelectButton } from "@app/components/UI/ConfigSelectButton"; |
||||
|
import { useToast } from "@app/core/hooks/useToast"; |
||||
|
import { ConfigPreset, useAppStore } from "@app/core/stores/appStore"; |
||||
|
import { PlusIcon, Edit3Icon, Trash2Icon, UploadIcon, DownloadIcon } from "lucide-react"; |
||||
|
import { useState } from "react"; |
||||
|
|
||||
|
export const ConfigList = ({rootConfig, setTotalConfigCountDiff}: {rootConfig: ConfigPreset, setTotalConfigCountDiff: (val: number) => void}) => { |
||||
|
const { configPresetRoot, setConfigPresetRoot, configPresetSelected, setConfigPresetSelected } = useAppStore(); |
||||
|
const [ editSelected, setEditSelected ] = useState(false); |
||||
|
const { toast } = useToast(); |
||||
|
if(configPresetSelected === undefined) { |
||||
|
setConfigPresetSelected(configPresetRoot); |
||||
|
return (<div/>); |
||||
|
} |
||||
|
|
||||
|
return ( |
||||
|
<div className="flex flex-col min-w-[400px] rounded-md border border-dashed border-slate-200 p-3 mb-2 dark:border-slate-700"> |
||||
|
<div className="flex justify-between"> |
||||
|
<div className="flex gap-2"> |
||||
|
<button |
||||
|
className="transition-all hover:text-accent mb-4" |
||||
|
title="Add new configuration as child" |
||||
|
onClick={() => { |
||||
|
const newPreset = new ConfigPreset("New Preset", configPresetSelected); |
||||
|
configPresetSelected?.children.push(newPreset); |
||||
|
setConfigPresetRoot(Object.create(configPresetRoot)); |
||||
|
setConfigPresetSelected(newPreset); |
||||
|
setEditSelected(true); |
||||
|
newPreset.saveConfigTree(); |
||||
|
}} |
||||
|
> |
||||
|
<PlusIcon/> |
||||
|
</button> |
||||
|
<button |
||||
|
className="transition-all hover:text-accent mb-4" |
||||
|
title="Rename" |
||||
|
onClick={() => { |
||||
|
setEditSelected(true); |
||||
|
}} |
||||
|
> |
||||
|
<Edit3Icon/> |
||||
|
</button> |
||||
|
<button |
||||
|
className="transition-all hover:text-accent mb-4" |
||||
|
title="Delete" |
||||
|
onClick={() => { |
||||
|
if(configPresetSelected.parent === undefined) { |
||||
|
if(!confirm(`Are you sure you want to reset the preset list to default?`)) |
||||
|
return; |
||||
|
const newDefault = new ConfigPreset("Default"); |
||||
|
setConfigPresetRoot(newDefault); |
||||
|
newDefault.saveConfigTree(); |
||||
|
return; |
||||
|
} |
||||
|
// TEMP: Replace with proper dialog.
|
||||
|
if(!confirm(`Are you sure you want to remove "${configPresetSelected.name}" and all its children?`)) |
||||
|
return; |
||||
|
configPresetSelected.parent.children = configPresetSelected.parent.children.filter(c => c != configPresetSelected); |
||||
|
setConfigPresetSelected(configPresetSelected.parent); |
||||
|
configPresetSelected.saveConfigTree(); |
||||
|
}} |
||||
|
> |
||||
|
<Trash2Icon/> |
||||
|
</button> |
||||
|
</div> |
||||
|
<div className="flex gap-2"> |
||||
|
<button |
||||
|
className="transition-all hover:text-accent mb-4" |
||||
|
title="Import" |
||||
|
onClick={() => { |
||||
|
ConfigPreset.importConfigTree().then( |
||||
|
(root) => { |
||||
|
if(root) { |
||||
|
setConfigPresetRoot(root); |
||||
|
root.saveConfigTree(); |
||||
|
toast({ |
||||
|
title: `Presets successfully imported.` |
||||
|
}); |
||||
|
} |
||||
|
}, |
||||
|
() => {toast({ |
||||
|
title: `This is not a valid configuration file.` |
||||
|
});} |
||||
|
); |
||||
|
}} |
||||
|
> |
||||
|
<UploadIcon/> |
||||
|
</button> |
||||
|
<button |
||||
|
className="transition-all hover:text-accent mb-4" |
||||
|
title="Export" |
||||
|
onClick={() => { |
||||
|
rootConfig.exportConfigTree(); |
||||
|
}} |
||||
|
> |
||||
|
<DownloadIcon/> |
||||
|
</button> |
||||
|
</div> |
||||
|
|
||||
|
</div> |
||||
|
|
||||
|
<div className='overflow-y-auto'> |
||||
|
{rootConfig && |
||||
|
<ConfigEntry |
||||
|
config={rootConfig} |
||||
|
configPresetSelected={configPresetSelected} |
||||
|
setConfigPresetSelected={setConfigPresetSelected} |
||||
|
editSelected={editSelected} |
||||
|
onConfigCountChanged={(val, diff) => setTotalConfigCountDiff(diff)} |
||||
|
onEditDone={(val) => { |
||||
|
configPresetSelected.name = val; |
||||
|
setEditSelected(false); |
||||
|
configPresetSelected.saveConfigTree(); |
||||
|
} |
||||
|
} |
||||
|
/> |
||||
|
}</div> |
||||
|
</div> |
||||
|
) |
||||
|
|
||||
|
}; |
||||
|
|
||||
|
const ConfigEntry = ({config, configPresetSelected, setConfigPresetSelected, editSelected, onEditDone, onConfigCountChanged}: |
||||
|
{config: ConfigPreset, |
||||
|
configPresetSelected: ConfigPreset, |
||||
|
setConfigPresetSelected: (selection: ConfigPreset) => void, |
||||
|
editSelected: boolean, onEditDone: (value: string) => void, |
||||
|
onConfigCountChanged: (val: number, diff: number) => void |
||||
|
}) => { |
||||
|
const [configCount, setConfigCount] = useState(config.count); |
||||
|
return ( |
||||
|
<div> |
||||
|
<ConfigSelectButton |
||||
|
label={config.name} |
||||
|
active={config == configPresetSelected} |
||||
|
setValue={(value) => {const diff = value - config.count; config.count = value; setConfigCount(value); onConfigCountChanged(value, diff);}} |
||||
|
value={configCount} |
||||
|
editing={editSelected && config == configPresetSelected} |
||||
|
onClick={() => setConfigPresetSelected(config)} |
||||
|
onChangeDone={onEditDone} |
||||
|
/> |
||||
|
<div className="ml-[20px]"> |
||||
|
{config.children.map(c => |
||||
|
(<ConfigEntry |
||||
|
config={c} |
||||
|
configPresetSelected={configPresetSelected} |
||||
|
setConfigPresetSelected={setConfigPresetSelected} |
||||
|
editSelected={editSelected} |
||||
|
onEditDone={onEditDone} |
||||
|
onConfigCountChanged={onConfigCountChanged} |
||||
|
/>) |
||||
|
)} |
||||
|
</div> |
||||
|
</div> |
||||
|
); |
||||
|
} |
||||
Loading…
Reference in new issue