VDMDI/CT
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add DangerousActionButton, add option to delete files thru StorageModal

Browse Source
This commit is contained in:
marlon-erler
2024-07-21 20:21:32 +02:00
parent 3824224e85
commit 331823f2ec
9 changed files with 259 additions and 118 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/View/Components/dangerousActionButton.tsx
+47
View File
@@ -0,0 +1,47 @@
import * as React from "bloatless-react";
import { translations } from "../translations";
export function DangerousActionButton(
label: string,
icon: string,
action: () => void
) {
const isActionRequested = new React.State(false);
const cannotConfirm = React.createProxyState(
[isActionRequested],
() => isActionRequested.value == false
);
function requestAction() {
isActionRequested.value = true;
}
function abort() {
isActionRequested.value = false;
}
return (
<div class="flex-row">
<button class="flex" on:click={abort} toggle:hidden={cannotConfirm}>
{translations.general.abortButton}
<span class="icon">undo</span>
</button>
<button
class="danger flex"
on:click={requestAction}
toggle:hidden={isActionRequested}
>
{label}
<span class="icon">{icon}</span>
</button>
<button
class="danger flex"
on:click={action}
toggle:hidden={cannotConfirm}
>
{translations.general.confirmButton}
<span class="icon">warning</span>
</button>
</div>
);
}
src/View/Components/directoryItemList.tsx
+20 -10
View File
@@ -1,17 +1,19 @@
import * as React from "bloatless-react";
import StorageModel from "../../Model/storageModel";
import { translations } from "../translations";
import StorageModel, {
PATH_COMPONENT_SEPARATOR,
} from "../../Model/storageModel";
import StorageViewModel from "../../ViewModel/storageViewModel";
export function DirectoryItemList(
storageModel: StorageModel,
pathString: string,
selectedPath: React.State<string>
storageViewModel: StorageViewModel,
pathString: string = PATH_COMPONENT_SEPARATOR
) {
// converter
const StringToDirectoryItemList: React.StateItemConverter<string> = (
pathString: string
) => DirectoryItemList(storageModel, pathString, selectedPath);
) => DirectoryItemList(storageViewModel, pathString);
// data
const path = StorageModel.stringToPathComponents(pathString);
@@ -24,7 +26,7 @@ export function DirectoryItemList(
function loadItems() {
items.clear();
const directoryItems = storageModel.list(path);
const directoryItems = storageViewModel.storageModel.list(path);
for (const directoryItem of directoryItems) {
const itemPath = [...path, directoryItem];
@@ -34,13 +36,21 @@ export function DirectoryItemList(
}
function select() {
selectedPath.value = pathString;
storageViewModel.selectedPath.value = pathString;
}
// handlers
storageViewModel.lastDeletedItemPath.subscribe((lastDeletedItemPath) => {
if (!items.value.has(lastDeletedItemPath)) return;
select();
setTimeout(() => loadItems(), 50)
});
// state
const isSelected = React.createProxyState(
[selectedPath],
() => selectedPath.value == pathString
[storageViewModel.selectedPath],
() => storageViewModel.selectedPath.value == pathString
);
isSelected.subscribe(() => {
src/View/Components/fileBrowser.tsx
+38 -50
View File
@@ -6,71 +6,59 @@ import StorageModel, {
PATH_COMPONENT_SEPARATOR,
} from "../../Model/storageModel";
import { DangerousActionButton } from "./dangerousActionButton";
import { DirectoryItemList } from "./directoryItemList";
import StorageViewModel from "../../ViewModel/storageViewModel";
import { translations } from "../translations";
export function FileBrowser(
storageModel: StorageModel,
selectedPath: React.State<string>,
didMakeChanges: React.State<boolean>
) {
// state
const fileContentToShow = React.createProxyState([selectedPath], () => {
const path = StorageModel.stringToPathComponents(selectedPath.value);
const content = storageModel.restore(path);
return (
(content ?? translations.fileBrowser.notAFile) ||
translations.fileBrowser.contentEmpty
);
});
export function FileBrowser(storageViewModel: StorageViewModel) {
const detailView = React.createProxyState(
[storageViewModel.selectedPath],
() => {
if (storageViewModel.selectedPath.value == PATH_COMPONENT_SEPARATOR)
return (
<span class="secondary">{translations.storage.noItemSelected}</span>
);
const selectedFileName = React.createProxyState(
[selectedPath],
() =>
StorageModel.getFileNameFromString(selectedPath.value) ??
PATH_COMPONENT_SEPARATOR
);
// view
const detailView = React.createProxyState([selectedPath], () => {
if (selectedPath.value == PATH_COMPONENT_SEPARATOR)
return (
<span class="secondary">{translations.fileBrowser.noItemSelected}</span>
);
<div class="flex-column gap">
<div class="tile flex-no">
<div>
<b>{translations.storage.path}</b>
<span
class="break-all"
subscribe:innerText={storageViewModel.selectedPath}
></span>
</div>
</div>
<div class="tile flex-no">
<div>
<b>{translations.storage.content}</b>
<code
subscribe:innerText={storageViewModel.selectedFileContent}
></code>
</div>
</div>
return (
<div class="flex-column gap">
<div class="tile flex-no">
<div>
<b>{translations.fileBrowser.path}</b>
<span class="break-all" subscribe:innerText={selectedPath}></span>
</div>
{DangerousActionButton(
translations.storage.deleteItem,
"delete_forever",
storageViewModel.deleteSelectedItem
)}
</div>
<div class="tile flex-no">
<div>
<b>{translations.fileBrowser.content}</b>
<code subscribe:innerText={fileContentToShow}></code>
</div>
</div>
</div>
);
});
);
}
);
const view = (
<div class="file-browser">
<div>
<div class="scroll-area">
{DirectoryItemList(
storageModel,
PATH_COMPONENT_SEPARATOR,
selectedPath
)}
</div>
<div class="scroll-area">{DirectoryItemList(storageViewModel)}</div>
<div class="detail-button-wrapper">
<button class="ghost" on:click={scrollToDetails}>
<span
class="ellipsis"
subscribe:innerText={selectedFileName}
subscribe:innerText={storageViewModel.selectedFileName}
></span>
<span class="icon">arrow_forward</span>
</button>