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/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>