add modal to select direction of file transfer

dist/index.js

@@ -2602,6 +2602,7 @@
       abortButton: "Abort",
       cancelButton: "Cancel",
       closeButton: "Close",
+      backButton: "Back",
       continueButton: "Continue",
       confirmButton: "Confirm",
       saveButton: "Save",
@@ -4438,66 +4439,137 @@
     taskStatusSuggestions = new ListState();
   };
 
+  // src/ViewModel/Global/fileTransferViewModel.ts
+  var FileTransferViewModel = class {
+    fileTransferModel;
+    chatListModel;
+    // state
+    presentedModal = new State(void 0);
+    generalFileOptions = new ListState();
+    chatFileOptions = new ListState();
+    selectedPaths = new ListState();
+    // guards
+    hasNoPathsSelected = createProxyState(
+      [this.selectedPaths],
+      () => this.selectedPaths.value.size == 0
+    );
+    // methods
+    getOptions = () => {
+      this.generalFileOptions.clear();
+      this.chatFileOptions.clear();
+      this.generalFileOptions.add(
+        {
+          label: translations.dataTransferModal.connectionData,
+          path: StorageModel.getPath("connection" /* ConnectionModel */, [])
+        },
+        {
+          label: translations.dataTransferModal.settingsData,
+          path: StorageModel.getPath("settings" /* SettingsModel */, [])
+        }
+      );
+      const chatModels = this.chatListModel.chatModels;
+      for (const chatModel of chatModels) {
+        this.chatFileOptions.add({
+          label: chatModel.info.primaryChannel,
+          path: chatModel.getBasePath()
+        });
+      }
+    };
+    // view
+    showDirectionSelectionModal = () => {
+      this.presentedModal.value = 0 /* DirectionSelection */;
+    };
+    showFileSelectionModal = () => {
+      this.presentedModal.value = 1 /* FileSelection */;
+      this.getOptions();
+    };
+    hideModal = () => {
+      this.presentedModal.value = void 0;
+    };
+    // init
+    constructor(fileTransferModel2, chatListModel2) {
+      this.fileTransferModel = fileTransferModel2;
+      this.chatListModel = chatListModel2;
+    }
+  };
+
   // src/View/Modals/dataTransferModal.tsx
-  function DataTransferModal(fileTransferViewModel2) {
+  function DataTransferModalWrapper(fileTransferViewModel2) {
+    return /* @__PURE__ */ createElement("div", null, DirectionSelectionModal(fileTransferViewModel2), FileSelectionModal(fileTransferViewModel2));
+  }
+  function DirectionSelectionModal(fileTransferViewModel2) {
+    const isPresented = createProxyState(
+      [fileTransferViewModel2.presentedModal],
+      () => fileTransferViewModel2.presentedModal.value == 0 /* DirectionSelection */
+    );
+    return /* @__PURE__ */ createElement("div", { class: "modal", "toggle:open": isPresented }, /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("main", null, /* @__PURE__ */ createElement("h2", null, translations.dataTransferModal.transferDataHeadline), /* @__PURE__ */ createElement("div", { class: "flex-column gap content-margin-bottom" }, /* @__PURE__ */ createElement(
+      "button",
+      {
+        class: "tile",
+        "on:click": fileTransferViewModel2.showFileSelectionModal
+      },
+      /* @__PURE__ */ createElement("span", { class: "icon" }, "upload"),
+      /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("b", null, translations.dataTransferModal.fromThisDeviceButton)),
+      /* @__PURE__ */ createElement("span", { class: "icon" }, "arrow_forward")
+    ), /* @__PURE__ */ createElement("button", { class: "tile" }, /* @__PURE__ */ createElement("span", { class: "icon" }, "download"), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("b", null, translations.dataTransferModal.toThisDeviceButton)), /* @__PURE__ */ createElement("span", { class: "icon" }, "arrow_forward")))), /* @__PURE__ */ createElement("button", { "on:click": fileTransferViewModel2.hideModal }, translations.general.closeButton, /* @__PURE__ */ createElement("span", { class: "icon" }, "close"))));
+  }
+  function FileSelectionModal(fileTransferViewModel2) {
     const OptionConverter = (fileOption) => {
       return OptionEntry(fileOption, fileTransferViewModel2);
     };
-    return /* @__PURE__ */ createElement(
+    function OptionEntry(fileOption, fileTransferViewModel3) {
+      const isSelected = new State(false);
+      isSelected.subscribeSilent((isSelected2) => {
+        if (isSelected2 == true) {
+          fileTransferViewModel3.selectedPaths.add(fileOption.path);
+        } else {
+          fileTransferViewModel3.selectedPaths.remove(fileOption.path);
+        }
+      });
+      function toggle() {
+        isSelected.value = !isSelected.value;
+      }
+      return /* @__PURE__ */ createElement("button", { class: "tile", "toggle:selected": isSelected, "on:click": toggle }, /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("b", { class: "ellipsis" }, fileOption.label), /* @__PURE__ */ createElement("span", { class: "secondary ellipsis" }, StorageModel.pathComponentsToString(...fileOption.path))));
+    }
+    const isPresented = createProxyState(
+      [fileTransferViewModel2.presentedModal],
+      () => fileTransferViewModel2.presentedModal.value == 1 /* FileSelection */
+    );
+    return /* @__PURE__ */ createElement("div", { class: "modal", "toggle:open": isPresented }, /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("main", null, /* @__PURE__ */ createElement("h2", null, translations.dataTransferModal.transferDataHeadline), /* @__PURE__ */ createElement("span", { class: "secondary" }, translations.dataTransferModal.selectionDescription), /* @__PURE__ */ createElement("hr", null), /* @__PURE__ */ createElement("h3", null, translations.dataTransferModal.generalHeadline), /* @__PURE__ */ createElement(
       "div",
       {
-        class: "modal",
-        "toggle:open": fileTransferViewModel2.isShowingTransferModal
-      },
-      /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("main", null, /* @__PURE__ */ createElement("h2", null, translations.dataTransferModal.transferDataHeadline), /* @__PURE__ */ createElement("span", { class: "secondary" }, translations.dataTransferModal.selectionDescription), /* @__PURE__ */ createElement("hr", null), /* @__PURE__ */ createElement("h3", null, translations.dataTransferModal.generalHeadline), /* @__PURE__ */ createElement(
-        "div",
-        {
-          class: "flex-column gap content-margin-bottom",
-          "children:append": [
-            fileTransferViewModel2.generalFileOptions,
-            OptionConverter
-          ]
-        }
-      ), /* @__PURE__ */ createElement("h3", null, translations.dataTransferModal.chatsHeadline), /* @__PURE__ */ createElement(
-        "div",
-        {
-          class: "flex-column gap",
-          "children:append": [
-            fileTransferViewModel2.chatFileOptions,
-            OptionConverter
-          ]
-        }
-      )), /* @__PURE__ */ createElement("div", { class: "flex-row width-100" }, /* @__PURE__ */ createElement(
-        "button",
-        {
-          class: "flex",
-          "on:click": fileTransferViewModel2.hideTransferModal
-        },
-        translations.general.cancelButton
-      ), /* @__PURE__ */ createElement(
-        "button",
-        {
-          class: "primary flex",
-          "on:click": fileTransferViewModel2.hideTransferModal
-        },
-        translations.general.continueButton,
-        /* @__PURE__ */ createElement("span", { class: "icon" }, "arrow_forward")
-      )))
-    );
-  }
-  function OptionEntry(fileOption, fileTransferViewModel2) {
-    const isSelected = new State(false);
-    isSelected.subscribeSilent((isSelected2) => {
-      if (isSelected2 == true) {
-        fileTransferViewModel2.selectedPaths.add(fileOption.path);
-      } else {
-        fileTransferViewModel2.selectedPaths.remove(fileOption.path);
+        class: "flex-column gap content-margin-bottom",
+        "children:append": [
+          fileTransferViewModel2.generalFileOptions,
+          OptionConverter
+        ]
       }
-    });
-    function toggle() {
-      isSelected.value = !isSelected.value;
-    }
-    return /* @__PURE__ */ createElement("button", { class: "tile", "toggle:selected": isSelected, "on:click": toggle }, /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("b", { class: "ellipsis" }, fileOption.label), /* @__PURE__ */ createElement("span", { class: "secondary ellipsis" }, StorageModel.pathComponentsToString(...fileOption.path))));
+    ), /* @__PURE__ */ createElement("h3", null, translations.dataTransferModal.chatsHeadline), /* @__PURE__ */ createElement(
+      "div",
+      {
+        class: "flex-column gap",
+        "children:append": [
+          fileTransferViewModel2.chatFileOptions,
+          OptionConverter
+        ]
+      }
+    )), /* @__PURE__ */ createElement("div", { class: "flex-row width-100" }, /* @__PURE__ */ createElement(
+      "button",
+      {
+        class: "flex",
+        "on:click": fileTransferViewModel2.showDirectionSelectionModal
+      },
+      translations.general.backButton
+    ), /* @__PURE__ */ createElement(
+      "button",
+      {
+        class: "primary flex",
+        "on:click": fileTransferViewModel2.hideModal,
+        "toggle:disabled": fileTransferViewModel2.hasNoPathsSelected
+      },
+      translations.general.continueButton,
+      /* @__PURE__ */ createElement("span", { class: "icon" }, "arrow_forward")
+    ))));
   }
 
   // src/Model/Global/fileTransferModel.ts
@@ -4572,52 +4644,6 @@
     body: ""
   };
 
-  // src/ViewModel/Global/fileTransferViewModel.ts
-  var FileTransferViewModel = class {
-    fileTransferModel;
-    chatListModel;
-    // state
-    isShowingTransferModal = new State(false);
-    generalFileOptions = new ListState();
-    chatFileOptions = new ListState();
-    selectedPaths = new ListState();
-    // methods
-    getOptions = () => {
-      this.generalFileOptions.clear();
-      this.chatFileOptions.clear();
-      this.generalFileOptions.add(
-        {
-          label: translations.dataTransferModal.connectionData,
-          path: StorageModel.getPath("connection" /* ConnectionModel */, [])
-        },
-        {
-          label: translations.dataTransferModal.settingsData,
-          path: StorageModel.getPath("settings" /* SettingsModel */, [])
-        }
-      );
-      const chatModels = this.chatListModel.chatModels;
-      for (const chatModel of chatModels) {
-        this.chatFileOptions.add({
-          label: chatModel.info.primaryChannel,
-          path: chatModel.getBasePath()
-        });
-      }
-    };
-    // view
-    showTransferModal = () => {
-      this.isShowingTransferModal.value = true;
-      this.getOptions();
-    };
-    hideTransferModal = () => {
-      this.isShowingTransferModal.value = false;
-    };
-    // init
-    constructor(fileTransferModel2, chatListModel2) {
-      this.fileTransferModel = fileTransferModel2;
-      this.chatListModel = chatListModel2;
-    }
-  };
-
   // src/View/Components/chatEntry.tsx
   function ChatEntry(chatViewModel) {
     const view = /* @__PURE__ */ createElement(
@@ -4726,7 +4752,7 @@
       "button",
       {
         class: "tile flex-no",
-        "on:click": fileTransferViewModel2.showTransferModal
+        "on:click": fileTransferViewModel2.showDirectionSelectionModal
       },
       /* @__PURE__ */ createElement("span", { class: "icon" }, "sync_alt"),
       /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("span", null, translations.homePage.transferDataButton))
@@ -5228,7 +5254,7 @@
     ),
     ChatPageWrapper(chatListViewModel),
     ConnectionModal(connectionViewModel),
-    DataTransferModal(fileTransferViewModel),
+    DataTransferModalWrapper(fileTransferViewModel),
     StorageModal(storageViewModel)
   );
 })();

src/View/Modals/dataTransferModal.tsx

@@ -1,26 +1,113 @@
 import * as React from "bloatless-react";
 
 import FileTransferViewModel, {
+  FileTransferModal,
   FileTransferOption,
 } from "../../ViewModel/Global/fileTransferViewModel";
 
 import StorageModel from "../../Model/Global/storageModel";
 import { translations } from "../translations";
 
-export function DataTransferModal(
+export function DataTransferModalWrapper(
   fileTransferViewModel: FileTransferViewModel
 ) {
+  return (
+    <div>
+      {DirectionSelectionModal(fileTransferViewModel)}
+      {FileSelectionModal(fileTransferViewModel)}
+    </div>
+  );
+}
+
+function DirectionSelectionModal(fileTransferViewModel: FileTransferViewModel) {
+  const isPresented = React.createProxyState(
+    [fileTransferViewModel.presentedModal],
+    () =>
+      fileTransferViewModel.presentedModal.value ==
+      FileTransferModal.DirectionSelection
+  );
+
+  return (
+    <div class="modal" toggle:open={isPresented}>
+      <div>
+        <main>
+          <h2>{translations.dataTransferModal.transferDataHeadline}</h2>
+
+          <div class="flex-column gap content-margin-bottom">
+            <button
+              class="tile"
+              on:click={fileTransferViewModel.showFileSelectionModal}
+            >
+              <span class="icon">upload</span>
+              <div>
+                <b>{translations.dataTransferModal.fromThisDeviceButton}</b>
+              </div>
+              <span class="icon">arrow_forward</span>
+            </button>
+            <button class="tile">
+              <span class="icon">download</span>
+              <div>
+                <b>{translations.dataTransferModal.toThisDeviceButton}</b>
+              </div>
+              <span class="icon">arrow_forward</span>
+            </button>
+          </div>
+        </main>
+        <button on:click={fileTransferViewModel.hideModal}>
+          {translations.general.closeButton}
+          <span class="icon">close</span>
+        </button>
+      </div>
+    </div>
+  );
+}
+
+function FileSelectionModal(fileTransferViewModel: FileTransferViewModel) {
+  // option
   const OptionConverter: React.StateItemConverter<FileTransferOption> = (
     fileOption: FileTransferOption
   ) => {
     return OptionEntry(fileOption, fileTransferViewModel);
   };
 
+  function OptionEntry(
+    fileOption: FileTransferOption,
+    fileTransferViewModel: FileTransferViewModel
+  ) {
+    const isSelected = new React.State(false);
+    isSelected.subscribeSilent((isSelected) => {
+      if (isSelected == true) {
+        fileTransferViewModel.selectedPaths.add(fileOption.path);
+      } else {
+        fileTransferViewModel.selectedPaths.remove(fileOption.path);
+      }
+    });
+    function toggle() {
+      isSelected.value = !isSelected.value;
+    }
+
+    return (
+      <button class="tile" toggle:selected={isSelected} on:click={toggle}>
+        <div>
+          <b class="ellipsis">{fileOption.label}</b>
+          <span class="secondary ellipsis">
+            {StorageModel.pathComponentsToString(...fileOption.path)}
+          </span>
+        </div>
+      </button>
+    );
+  }
+
+  // state
+  const isPresented = React.createProxyState(
+    [fileTransferViewModel.presentedModal],
+    () =>
+      fileTransferViewModel.presentedModal.value ==
+      FileTransferModal.FileSelection
+  );
+
   return (
-    <div
-      class="modal"
-      toggle:open={fileTransferViewModel.isShowingTransferModal}
-    >
+    <div class="modal" toggle:open={isPresented}>
       <div>
         <main>
           <h2>{translations.dataTransferModal.transferDataHeadline}</h2>
@@ -51,13 +138,14 @@ export function DataTransferModal(
         <div class="flex-row width-100">
           <button
             class="flex"
-            on:click={fileTransferViewModel.hideTransferModal}
+            on:click={fileTransferViewModel.showDirectionSelectionModal}
           >
-            {translations.general.cancelButton}
+            {translations.general.backButton}
           </button>
           <button
             class="primary flex"
-            on:click={fileTransferViewModel.hideTransferModal}
+            on:click={fileTransferViewModel.hideModal}
+            toggle:disabled={fileTransferViewModel.hasNoPathsSelected}
           >
             {translations.general.continueButton}
             <span class="icon">arrow_forward</span>
@@ -67,31 +155,3 @@ export function DataTransferModal(
     </div>
   );
 }
-
-function OptionEntry(
-  fileOption: FileTransferOption,
-  fileTransferViewModel: FileTransferViewModel
-) {
-  const isSelected = new React.State(false);
-  isSelected.subscribeSilent((isSelected) => {
-    if (isSelected == true) {
-      fileTransferViewModel.selectedPaths.add(fileOption.path);
-    } else {
-      fileTransferViewModel.selectedPaths.remove(fileOption.path);
-    }
-  });
-  function toggle() {
-    isSelected.value = !isSelected.value;
-  }
-
-  return (
-    <button class="tile" toggle:selected={isSelected} on:click={toggle}>
-      <div>
-        <b class="ellipsis">{fileOption.label}</b>
-        <span class="secondary ellipsis">
-          {StorageModel.pathComponentsToString(...fileOption.path)}
-        </span>
-      </div>
-    </button>
-  );
-}

src/View/homePage.tsx

@@ -120,7 +120,7 @@ export function HomePage(
 
       <button
         class="tile flex-no"
-        on:click={fileTransferViewModel.showTransferModal}
+        on:click={fileTransferViewModel.showDirectionSelectionModal}
       >
         <span class="icon">sync_alt</span>
         <div>

src/View/translations.ts

@@ -10,6 +10,7 @@ const englishTranslations = {
     abortButton: "Abort",
     cancelButton: "Cancel",
     closeButton: "Close",
+    backButton: "Back",
 
     continueButton: "Continue",
     confirmButton: "Confirm",

src/ViewModel/Global/fileTransferViewModel.ts

@@ -14,13 +14,20 @@ export default class FileTransferViewModel {
   chatListModel: ChatListModel;
 
   // state
-  isShowingTransferModal: React.State<boolean> = new React.State(false);
+  presentedModal: React.State<FileTransferModal | undefined> =
+    new React.State<any>(undefined);
 
   generalFileOptions: React.ListState<FileTransferOption> =
     new React.ListState();
   chatFileOptions: React.ListState<FileTransferOption> = new React.ListState();
   selectedPaths: React.ListState<string[]> = new React.ListState();
 
+  // guards
+  hasNoPathsSelected: React.State<boolean> = React.createProxyState(
+    [this.selectedPaths],
+    () => this.selectedPaths.value.size == 0
+  );
+
   // methods
   getOptions = (): void => {
     this.generalFileOptions.clear();
@@ -47,13 +54,17 @@ export default class FileTransferViewModel {
   };
 
   // view
-  showTransferModal = (): void => {
-    this.isShowingTransferModal.value = true;
+  showDirectionSelectionModal = (): void => {
+    this.presentedModal.value = FileTransferModal.DirectionSelection;
+  };
+
+  showFileSelectionModal = (): void => {
+    this.presentedModal.value = FileTransferModal.FileSelection;
     this.getOptions();
   };
 
-  hideTransferModal = (): void => {
-    this.isShowingTransferModal.value = false;
+  hideModal = (): void => {
+    this.presentedModal.value = undefined;
   };
 
   // init
@@ -71,7 +82,7 @@ export interface FileTransferOption {
   path: string[];
 }
 
-export enum FileTransferModals {
+export enum FileTransferModal {
   DirectionSelection,
 
   // sending
@@ -81,5 +92,5 @@ export enum FileTransferModals {
 
   // receiving
   TransferDataInput,
-  ReceptionDisplay
-}
+  ReceptionDisplay,
+}

src/index.tsx

@@ -11,7 +11,7 @@ import { ConnectionModal } from "./View/Modals/connectionModal";
 import ConnectionModel from "./Model/Global/connectionModel";
 import ConnectionViewModel from "./ViewModel/Global/connectionViewModel";
 import CoreViewModel from "./ViewModel/Global/coreViewModel";
-import { DataTransferModal } from "./View/Modals/dataTransferModal";
+import { DataTransferModalWrapper } from "./View/Modals/dataTransferModal";
 import FileTransferModel from "./Model/Global/fileTransferModel";
 import FileTransferViewModel from "./ViewModel/Global/fileTransferViewModel";
 import { HomePage } from "./View/homePage";
@@ -83,6 +83,6 @@ document
     ),
     ChatPageWrapper(chatListViewModel),
     ConnectionModal(connectionViewModel),
-    DataTransferModal(fileTransferViewModel),
+    DataTransferModalWrapper(fileTransferViewModel),
     StorageModal(storageViewModel)
   );