95 lines
2.6 KiB
TypeScript
95 lines
2.6 KiB
TypeScript
import { SplitModal } from "./splitModal";
|
|
import { DirectoryItemList } from "../Components/directoryItemList";
|
|
import { DangerousActionButton } from "../Components/dangerousActionButton";
|
|
import * as React from "../../react";
|
|
import StorageViewModel from "../../ViewModel/Global/storageViewModel";
|
|
import CoreViewModel from "../../ViewModel/Global/coreViewModel";
|
|
import { PATH_COMPONENT_SEPARATOR } from "../../Model/Global/storageModel";
|
|
import {UsageBar} from "../Components/usageBar";
|
|
|
|
export function StorageModal(
|
|
coreViewModel: CoreViewModel,
|
|
storageViewModel: StorageViewModel,
|
|
) {
|
|
const usageValueLabel = React.createProxyState([storageViewModel.occupiedSpaceMB, storageViewModel.maximumSpaceMB], ()=>
|
|
coreViewModel.translations.storage.usageVauleLabel(storageViewModel.occupiedSpaceMB.value, storageViewModel.maximumSpaceMB.value));
|
|
|
|
const detailView = React.createProxyState(
|
|
[storageViewModel.selectedPath],
|
|
() => {
|
|
if (storageViewModel.selectedPath.value == PATH_COMPONENT_SEPARATOR)
|
|
return (
|
|
<div class="flex-column gap">
|
|
<span class="secondary">
|
|
{coreViewModel.translations.storage.noItemSelected}
|
|
</span>
|
|
|
|
<hr></hr>
|
|
|
|
{UsageBar(coreViewModel.translations.storage.usageLabel, usageValueLabel, storageViewModel.occupiedSpaceMB, storageViewModel.maximumSpaceMB)}
|
|
|
|
<hr></hr>
|
|
|
|
{DangerousActionButton(
|
|
coreViewModel,
|
|
coreViewModel.translations.storage.removeJunkButton,
|
|
"delete_forever",
|
|
storageViewModel.removeJunk,
|
|
)}
|
|
</div>
|
|
);
|
|
|
|
return (
|
|
<div class="flex-column gap">
|
|
<div class="tile flex-no">
|
|
<div>
|
|
<b>{coreViewModel.translations.storage.path}</b>
|
|
<span
|
|
class="break-all"
|
|
subscribe:innerText={
|
|
storageViewModel.selectedPath
|
|
}
|
|
></span>
|
|
</div>
|
|
</div>
|
|
<div class="tile flex-no">
|
|
<div>
|
|
<b>{coreViewModel.translations.storage.content}</b>
|
|
<code
|
|
subscribe:innerText={
|
|
storageViewModel.selectedFileContent
|
|
}
|
|
></code>
|
|
</div>
|
|
</div>
|
|
|
|
{DangerousActionButton(
|
|
coreViewModel,
|
|
coreViewModel.translations.storage.deleteItem,
|
|
"delete_forever",
|
|
storageViewModel.deleteSelectedItem,
|
|
)}
|
|
</div>
|
|
);
|
|
},
|
|
);
|
|
return (
|
|
<div class="modal" toggle:open={storageViewModel.isShowingStorageModal}>
|
|
<div>
|
|
<main class="padding-0">
|
|
{SplitModal(
|
|
coreViewModel,
|
|
new React.State(DirectoryItemList(storageViewModel)),
|
|
detailView,
|
|
true,
|
|
)}
|
|
</main>
|
|
<button on:click={storageViewModel.close}>
|
|
{coreViewModel.translations.general.closeButton}
|
|
<span class="icon">close</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|