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
dist/index.js
Vendored
+103 -41
View File
@@ -1100,6 +1100,8 @@
general: {
closeButton: "Close",
deleteItemButtonAudioLabel: "delete item",
abortButton: "Abort",
confirmButton: "Confirm",
setButton: "Set"
},
regional: {
@@ -1143,12 +1145,13 @@
///
connectButtonAudioLabel: "connect"
},
fileBrowser: {
storage: {
noItemSelected: "No item selected",
notAFile: "(not a file)",
contentEmpty: "(empty)",
path: "Path",
content: "Content"
content: "Content",
deleteItem: "Delete item"
},
chatPage: {
closeChatAudioLabe: "close chat",
@@ -1306,6 +1309,40 @@
))))));
}
// src/View/Components/dangerousActionButton.tsx
function DangerousActionButton(label, icon, action) {
const isActionRequested = new State(false);
const cannotConfirm = createProxyState(
[isActionRequested],
() => isActionRequested.value == false
);
function requestAction() {
isActionRequested.value = true;
}
function abort() {
isActionRequested.value = false;
}
return /* @__PURE__ */ createElement("div", { class: "flex-row" }, /* @__PURE__ */ createElement("button", { class: "flex", "on:click": abort, "toggle:hidden": cannotConfirm }, translations.general.abortButton, /* @__PURE__ */ createElement("span", { class: "icon" }, "undo")), /* @__PURE__ */ createElement(
"button",
{
class: "danger flex",
"on:click": requestAction,
"toggle:hidden": isActionRequested
},
label,
/* @__PURE__ */ createElement("span", { class: "icon" }, icon)
), /* @__PURE__ */ createElement(
"button",
{
class: "danger flex",
"on:click": action,
"toggle:hidden": cannotConfirm
},
translations.general.confirmButton,
/* @__PURE__ */ createElement("span", { class: "icon" }, "warning")
));
}
// src/View/Components/deletableListItem.tsx
function DeletableListItem(text, primaryButton, ondelete) {
return /* @__PURE__ */ createElement("div", { class: "tile flex-row justify-apart align-center padding-0" }, /* @__PURE__ */ createElement("span", { class: "padding-h ellipsis" }, text), /* @__PURE__ */ createElement("div", { class: "flex-row justify-end" }, primaryButton, /* @__PURE__ */ createElement(
@@ -1409,15 +1446,11 @@
"on:click": setColor
}
);
})), /* @__PURE__ */ createElement("hr", null), /* @__PURE__ */ createElement(
"button",
{
class: "danger width-input flex-no",
"on:click": chatViewModel.remove
},
})), /* @__PURE__ */ createElement("hr", null), /* @__PURE__ */ createElement("div", { class: "width-input" }, DangerousActionButton(
translations.chatPage.settings.deleteChatButton,
/* @__PURE__ */ createElement("span", { class: "icon" }, "delete_forever")
)));
"chat_error",
chatViewModel.remove
))));
}
// src/View/chatPage.tsx
@@ -2092,15 +2125,15 @@
};
// src/View/Components/directoryItemList.tsx
function DirectoryItemList(storageModel2, pathString, selectedPath) {
const StringToDirectoryItemList = (pathString2) => DirectoryItemList(storageModel2, pathString2, selectedPath);
function DirectoryItemList(storageViewModel2, pathString = PATH_COMPONENT_SEPARATOR) {
const StringToDirectoryItemList = (pathString2) => DirectoryItemList(storageViewModel2, pathString2);
const path = StorageModel.stringToPathComponents(pathString);
const fileName = StorageModel.getFileName(path);
const items = new ListState();
const style = `text-indent: ${path.length * 2}rem`;
function loadItems() {
items.clear();
const directoryItems = storageModel2.list(path);
const directoryItems = storageViewModel2.storageModel.list(path);
for (const directoryItem of directoryItems) {
const itemPath = [...path, directoryItem];
const pathString2 = StorageModel.pathComponentsToString(...itemPath);
@@ -2108,11 +2141,16 @@
}
}
function select() {
selectedPath.value = pathString;
storageViewModel2.selectedPath.value = pathString;
}
storageViewModel2.lastDeletedItemPath.subscribe((lastDeletedItemPath) => {
if (!items.value.has(lastDeletedItemPath)) return;
select();
setTimeout(() => loadItems(), 50);
});
const isSelected = createProxyState(
[selectedPath],
() => selectedPath.value == pathString
[storageViewModel2.selectedPath],
() => storageViewModel2.selectedPath.value == pathString
);
isSelected.subscribe(() => {
if (isSelected.value == false) return;
@@ -2136,30 +2174,35 @@
}
// src/View/Components/fileBrowser.tsx
function FileBrowser(storageModel2, selectedPath, didMakeChanges) {
const fileContentToShow = createProxyState([selectedPath], () => {
const path = StorageModel.stringToPathComponents(selectedPath.value);
const content = storageModel2.restore(path);
return (content ?? translations.fileBrowser.notAFile) || translations.fileBrowser.contentEmpty;
});
const selectedFileName = createProxyState(
[selectedPath],
() => StorageModel.getFileNameFromString(selectedPath.value) ?? PATH_COMPONENT_SEPARATOR
function FileBrowser(storageViewModel2) {
const detailView = createProxyState(
[storageViewModel2.selectedPath],
() => {
if (storageViewModel2.selectedPath.value == PATH_COMPONENT_SEPARATOR)
return /* @__PURE__ */ createElement("span", { class: "secondary" }, translations.storage.noItemSelected);
return /* @__PURE__ */ createElement("div", { class: "flex-column gap" }, /* @__PURE__ */ createElement("div", { class: "tile flex-no" }, /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("b", null, translations.storage.path), /* @__PURE__ */ createElement(
"span",
{
class: "break-all",
"subscribe:innerText": storageViewModel2.selectedPath
}
))), /* @__PURE__ */ createElement("div", { class: "tile flex-no" }, /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("b", null, translations.storage.content), /* @__PURE__ */ createElement(
"code",
{
"subscribe:innerText": storageViewModel2.selectedFileContent
}
))), DangerousActionButton(
translations.storage.deleteItem,
"delete_forever",
storageViewModel2.deleteSelectedItem
));
}
);
const detailView = createProxyState([selectedPath], () => {
if (selectedPath.value == PATH_COMPONENT_SEPARATOR)
return /* @__PURE__ */ createElement("span", { class: "secondary" }, translations.fileBrowser.noItemSelected);
return /* @__PURE__ */ createElement("div", { class: "flex-column gap" }, /* @__PURE__ */ createElement("div", { class: "tile flex-no" }, /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("b", null, translations.fileBrowser.path), /* @__PURE__ */ createElement("span", { class: "break-all", "subscribe:innerText": selectedPath }))), /* @__PURE__ */ createElement("div", { class: "tile flex-no" }, /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("b", null, translations.fileBrowser.content), /* @__PURE__ */ createElement("code", { "subscribe:innerText": fileContentToShow }))));
});
const view = /* @__PURE__ */ createElement("div", { class: "file-browser" }, /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("div", { class: "scroll-area" }, DirectoryItemList(
storageModel2,
PATH_COMPONENT_SEPARATOR,
selectedPath
)), /* @__PURE__ */ createElement("div", { class: "detail-button-wrapper" }, /* @__PURE__ */ createElement("button", { class: "ghost", "on:click": scrollToDetails }, /* @__PURE__ */ createElement(
const view = /* @__PURE__ */ createElement("div", { class: "file-browser" }, /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("div", { class: "scroll-area" }, DirectoryItemList(storageViewModel2)), /* @__PURE__ */ createElement("div", { class: "detail-button-wrapper" }, /* @__PURE__ */ createElement("button", { class: "ghost", "on:click": scrollToDetails }, /* @__PURE__ */ createElement(
"span",
{
class: "ellipsis",
"subscribe:innerText": selectedFileName
"subscribe:innerText": storageViewModel2.selectedFileName
}
), /* @__PURE__ */ createElement("span", { class: "icon" }, "arrow_forward")))), /* @__PURE__ */ createElement("div", { class: "scroll-area", "children:set": detailView }));
function scrollToDetails() {
@@ -2170,11 +2213,7 @@
// src/View/Modals/storageModal.tsx
function StorageModal(storageViewModel2) {
return /* @__PURE__ */ createElement("div", { class: "modal", "toggle:open": storageViewModel2.isShowingStorageModal }, /* @__PURE__ */ createElement("div", { style: "max-width: 64rem" }, /* @__PURE__ */ createElement("main", { class: "padding-0" }, FileBrowser(
storageViewModel2.storageModel,
storageViewModel2.selectedPath,
storageViewModel2.didMakeChanges
)), /* @__PURE__ */ createElement("button", { "on:click": storageViewModel2.hideStorageModal }, translations.general.closeButton, /* @__PURE__ */ createElement("span", { class: "icon" }, "close"))));
return /* @__PURE__ */ createElement("div", { class: "modal", "toggle:open": storageViewModel2.isShowingStorageModal }, /* @__PURE__ */ createElement("div", { style: "max-width: 64rem" }, /* @__PURE__ */ createElement("main", { class: "padding-0" }, FileBrowser(storageViewModel2)), /* @__PURE__ */ createElement("button", { "on:click": storageViewModel2.hideStorageModal }, translations.general.closeButton, /* @__PURE__ */ createElement("span", { class: "icon" }, "close"))));
}
// src/ViewModel/storageViewModel.ts
@@ -2184,6 +2223,21 @@
isShowingStorageModal = new State(false);
selectedPath = new State(PATH_COMPONENT_SEPARATOR);
didMakeChanges = new State(false);
selectedFileName;
selectedFileContent;
lastDeletedItemPath = new State("");
// methods
getSelectedItemContent = () => {
const path = StorageModel.stringToPathComponents(this.selectedPath.value);
const content = this.storageModel.restore(path);
return (content ?? translations.storage.notAFile) || translations.storage.contentEmpty;
};
deleteSelectedItem = () => {
const path = StorageModel.stringToPathComponents(this.selectedPath.value);
this.lastDeletedItemPath.value = this.selectedPath.value;
this.storageModel.removeRecursive(path);
this.didMakeChanges.value = true;
};
// view methods
showStorageModal = () => {
this.isShowingStorageModal.value = true;
@@ -2197,6 +2251,14 @@
// init
constructor(storageModel2) {
this.storageModel = storageModel2;
this.selectedFileName = createProxyState(
[this.selectedPath],
() => StorageModel.getFileNameFromString(this.selectedPath.value)
);
this.selectedFileContent = createProxyState(
[this.selectedPath],
() => this.getSelectedItemContent()
);
}
};
dist/styles.css
Vendored
+5 -2
View File
@@ -457,11 +457,14 @@ textarea {
display: inline-flex;
}
.modal,
[hidden] {
.modal{
display: none;
}
[hidden] {
display: none !important;
}
main,
.tile,
.tile > div {
src/View/ChatPages/settingsPage.tsx
+8 -7
View File
@@ -2,6 +2,7 @@ import * as React from "bloatless-react";
import ChatViewModel from "../../ViewModel/chatViewModel";
import { Color } from "../../ViewModel/colors";
import { DangerousActionButton } from "../Components/dangerousActionButton";
import { DeletableListItem } from "../Components/deletableListItem";
import { translations } from "../translations";
@@ -139,13 +140,13 @@ export function SettingsPage(chatViewModel: ChatViewModel) {
<hr></hr>
<button
class="danger width-input flex-no"
on:click={chatViewModel.remove}
>
{translations.chatPage.settings.deleteChatButton}
<span class="icon">delete_forever</span>
</button>
<div class="width-input">
{DangerousActionButton(
translations.chatPage.settings.deleteChatButton,
"chat_error",
chatViewModel.remove
)}
</div>
</div>
</div>
);
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
+27 -39
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);
export function FileBrowser(storageViewModel: StorageViewModel) {
const detailView = React.createProxyState(
[storageViewModel.selectedPath],
() => {
if (storageViewModel.selectedPath.value == PATH_COMPONENT_SEPARATOR)
return (
(content ?? translations.fileBrowser.notAFile) ||
translations.fileBrowser.contentEmpty
);
});
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>
<span class="secondary">{translations.storage.noItemSelected}</span>
);
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>
<b>{translations.storage.path}</b>
<span
class="break-all"
subscribe:innerText={storageViewModel.selectedPath}
></span>
</div>
</div>
<div class="tile flex-no">
<div>
<b>{translations.fileBrowser.content}</b>
<code subscribe:innerText={fileContentToShow}></code>
<b>{translations.storage.content}</b>
<code
subscribe:innerText={storageViewModel.selectedFileContent}
></code>
</div>
</div>
{DangerousActionButton(
translations.storage.deleteItem,
"delete_forever",
storageViewModel.deleteSelectedItem
)}
</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>
src/View/Modals/storageModal.tsx
+1 -7
View File
@@ -8,13 +8,7 @@ export function StorageModal(storageViewModel: StorageViewModel) {
return (
<div class="modal" toggle:open={storageViewModel.isShowingStorageModal}>
<div style="max-width: 64rem">
<main class="padding-0">
{FileBrowser(
storageViewModel.storageModel,
storageViewModel.selectedPath,
storageViewModel.didMakeChanges
)}
</main>
<main class="padding-0">{FileBrowser(storageViewModel)}</main>
<button on:click={storageViewModel.hideStorageModal}>
{translations.general.closeButton}
<span class="icon">close</span>
src/View/translations.ts
+5 -1
View File
@@ -2,6 +2,8 @@ const englishTranslations = {
general: {
closeButton: "Close",
deleteItemButtonAudioLabel: "delete item",
abortButton: "Abort",
confirmButton: "Confirm",
setButton: "Set",
},
@@ -62,13 +64,15 @@ const englishTranslations = {
connectButtonAudioLabel: "connect",
},
fileBrowser: {
storage: {
noItemSelected: "No item selected",
notAFile: "(not a file)",
contentEmpty: "(empty)",
path: "Path",
content: "Content",
deleteItem: "Delete item"
},
chatPage: {
src/ViewModel/storageViewModel.ts
+32
View File
@@ -2,6 +2,8 @@ import * as React from "bloatless-react";
import StorageModel, { PATH_COMPONENT_SEPARATOR } from "../Model/storageModel";
import { translations } from "../View/translations";
export default class StorageViewModel {
storageModel: StorageModel;
@@ -10,6 +12,29 @@ export default class StorageViewModel {
selectedPath: React.State<string> = new React.State(PATH_COMPONENT_SEPARATOR);
didMakeChanges: React.State<boolean> = new React.State(false);
selectedFileName: React.State<string>;
selectedFileContent: React.State<string>;
lastDeletedItemPath: React.State<string> = new React.State("");
// methods
getSelectedItemContent = (): string => {
const path = StorageModel.stringToPathComponents(this.selectedPath.value);
const content = this.storageModel.restore(path);
return (
(content ?? translations.storage.notAFile) ||
translations.storage.contentEmpty
);
};
deleteSelectedItem = (): void => {
const path = StorageModel.stringToPathComponents(this.selectedPath.value);
this.lastDeletedItemPath.value = this.selectedPath.value;
this.storageModel.removeRecursive(path);
this.didMakeChanges.value = true;
};
// view methods
showStorageModal = (): void => {
this.isShowingStorageModal.value = true;
@@ -25,5 +50,12 @@ export default class StorageViewModel {
// init
constructor(storageModel: StorageModel) {
this.storageModel = storageModel;
this.selectedFileName = React.createProxyState([this.selectedPath], () =>
StorageModel.getFileNameFromString(this.selectedPath.value)
);
this.selectedFileContent = React.createProxyState([this.selectedPath], () =>
this.getSelectedItemContent()
);
}
}