diff --git a/webapp/src/App.tsx b/webapp/src/App.tsx index ec8c0eb..ef41e4f 100644 --- a/webapp/src/App.tsx +++ b/webapp/src/App.tsx @@ -8,6 +8,7 @@ import { FileBar } from "./AppComponents/FileBar"; import { get_model, uploadFile } from "./AppComponents/rpc"; import { createNewModel, + deleteSelectedModel, loadModelFromStorageOrCreate, saveModelToStorage, saveSelectedModelInStorage, @@ -86,6 +87,12 @@ function App() { setModel(newModel); } }} + onDelete={() => { + const newModel = deleteSelectedModel(); + if (newModel) { + setModel(newModel); + } + }} /> diff --git a/webapp/src/AppComponents/FileBar.tsx b/webapp/src/AppComponents/FileBar.tsx index e7f685f..52aa85a 100644 --- a/webapp/src/AppComponents/FileBar.tsx +++ b/webapp/src/AppComponents/FileBar.tsx @@ -14,6 +14,7 @@ export function FileBar(properties: { newModel: () => void; setModel: (key: string) => void; onModelUpload: (blob: ArrayBuffer, fileName: string) => Promise; + onDelete: () => void; }) { const hiddenInputRef = useRef(null); const [toast, setToast] = useState(false); @@ -32,6 +33,7 @@ export function FileBar(properties: { const fileName = model.getName(); await downloadModel(bytes, fileName); }} + onDelete={properties.onDelete} /> void; onDownload: () => void; onModelUpload: (blob: ArrayBuffer, fileName: string) => Promise; + onDelete: () => void; }) { const [isMenuOpen, setMenuOpen] = useState(false); const [isImportMenuOpen, setImportMenuOpen] = useState(false); @@ -69,6 +70,17 @@ export function FileMenu(props: { Download (.xlsx) + + + { + props.onDelete(); + setMenuOpen(false); + }} + > + Delete workbook + + {elements} @@ -122,6 +134,13 @@ const StyledFileUp = styled(FileUp)` padding-right: 10px; `; +const StyledTrash = styled(Trash2)` + width: 16px; + height: 16px; + color: #333333; + padding-right: 10px; +`; + const MenuDivider = styled("div")` width: 80%; margin: auto; diff --git a/webapp/src/AppComponents/storage.ts b/webapp/src/AppComponents/storage.ts index 1778496..c00aa8d 100644 --- a/webapp/src/AppComponents/storage.ts +++ b/webapp/src/AppComponents/storage.ts @@ -99,14 +99,31 @@ export function saveModelToStorage(model: Model) { localStorage.setItem("models", JSON.stringify(models)); } -export function selectModelFromStorage(uuid: string): Model | undefined { +export function selectModelFromStorage(uuid: string): Model | null { localStorage.setItem("selected", uuid); const modelBytesString = localStorage.getItem(uuid); if (modelBytesString) { return Model.from_bytes(base64ToBytes(modelBytesString)); } + return null; } export function getSelectedUuuid(): string | null { return localStorage.getItem("selected"); } + +export function deleteSelectedModel(): Model | null { + const uuid = localStorage.getItem("selected"); + if (!uuid) { + return null; + } + localStorage.removeItem(uuid); + const metadata = getModelsMetadata(); + delete metadata[uuid]; + localStorage.setItem("models", JSON.stringify(metadata)); + const uuids = Object.keys(metadata); + if (uuids.length === 0) { + return createNewModel(); + } + return selectModelFromStorage(uuids[0]); +}