From dd33d96ef68776baf0f202075415500ac8a73f7c Mon Sep 17 00:00:00 2001
From: Jan Prochazka <jan.prochazka@gmail.com>
Date: Thu, 29 Sep 2022 19:35:58 +0200
Subject: [PATCH] close tabs question

---
 packages/web/src/modals/CloseTabModal.svelte | 47 ++++++++++++++++++++
 packages/web/src/widgets/TabsPanel.svelte    | 35 +++++++++++++--
 2 files changed, 79 insertions(+), 3 deletions(-)
 create mode 100644 packages/web/src/modals/CloseTabModal.svelte

diff --git a/packages/web/src/modals/CloseTabModal.svelte b/packages/web/src/modals/CloseTabModal.svelte
new file mode 100644
index 000000000..ef8de7380
--- /dev/null
+++ b/packages/web/src/modals/CloseTabModal.svelte
@@ -0,0 +1,47 @@
+<script lang="ts">
+  import FormStyledButton from '../buttons/FormStyledButton.svelte';
+
+  import FormProvider from '../forms/FormProvider.svelte';
+  import FormSubmit from '../forms/FormSubmit.svelte';
+  import FontIcon from '../icons/FontIcon.svelte';
+  import ModalBase from './ModalBase.svelte';
+  import { closeCurrentModal } from './modalTools';
+
+  export let tabs;
+  export let onConfirm;
+  export let onCancel;
+</script>
+
+<FormProvider>
+  <ModalBase {...$$restProps}>
+    <svelte:fragment slot="header">Confirm close tabs</svelte:fragment>
+
+    <div>
+      Following files are modified, really close tabs? After closing, you could reopen them in history
+      <FontIcon icon="icon history" />
+      widget
+    </div>
+
+    {#each tabs as tab}
+      <div class="ml-2"><FontIcon icon={tab.icon} /> {tab.title}</div>
+    {/each}
+
+    <svelte:fragment slot="footer">
+      <FormSubmit
+        value="Close tabs"
+        on:click={() => {
+          closeCurrentModal();
+          onConfirm();
+        }}
+      />
+      <FormStyledButton
+        type="button"
+        value="Cancel"
+        on:click={() => {
+          closeCurrentModal();
+          onCancel();
+        }}
+      />
+    </svelte:fragment>
+  </ModalBase>
+</FormProvider>
diff --git a/packages/web/src/widgets/TabsPanel.svelte b/packages/web/src/widgets/TabsPanel.svelte
index 9eb5edcaf..a50048976 100644
--- a/packages/web/src/widgets/TabsPanel.svelte
+++ b/packages/web/src/widgets/TabsPanel.svelte
@@ -1,5 +1,23 @@
 <script lang="ts" context="module">
-  const closeTabFunc = closeCondition => tabid => {
+  function allowCloseTabs(tabs) {
+    if (tabs.length == 0) return Promise.resolve(true);
+    return new Promise(resolve => {
+      showModal(CloseTabModal, {
+        onCancel: () => resolve(false),
+        onConfirm: () => resolve(true),
+        tabs,
+      });
+    });
+  }
+
+  const closeTabFunc = closeCondition => async tabid => {
+    const activeCandidate = getOpenedTabs().find(x => x.tabid == tabid);
+    const closeCandidates = getOpenedTabs()
+      .filter(x => closeCondition(x, activeCandidate))
+      .filter(x => x.unsaved && x.closedTime == null);
+
+    if (!(await allowCloseTabs(closeCandidates))) return;
+
     openedTabs.update(files => {
       const active = files.find(x => x.tabid == tabid);
       if (!active) return files;
@@ -22,7 +40,13 @@
     });
   };
 
-  export const closeMultipleTabs = (closeCondition, deleteFromHistory = false) => {
+  export const closeMultipleTabs = async (closeCondition, deleteFromHistory = false) => {
+    const closeCandidates = getOpenedTabs()
+      .filter(x => closeCondition(x))
+      .filter(x => x.unsaved && x.closedTime == null);
+
+    if (!(await allowCloseTabs(closeCandidates))) return;
+
     openedTabs.update(files => {
       const newFiles = deleteFromHistory
         ? files.filter(x => !closeCondition(x))
@@ -45,7 +69,11 @@
   };
 
   const closeTab = closeTabFunc((x, active) => x.tabid == active.tabid);
-  const closeAll = () => {
+  const closeAll = async () => {
+    const closeCandidates = getOpenedTabs().filter(x => x.unsaved && x.closedTime == null);
+
+    if (!(await allowCloseTabs(closeCandidates))) return;
+
     const closedTime = new Date().getTime();
     openedTabs.update(tabs =>
       tabs.map(tab => ({
@@ -213,6 +241,7 @@
   import { duplicateTab, getTabDbKey, sortTabs, groupTabs } from '../utility/openNewTab';
   import { useConnectionColorFactory } from '../utility/useConnectionColor';
   import TabCloseButton from '../elements/TabCloseButton.svelte';
+  import CloseTabModal from '../modals/CloseTabModal.svelte';
 
   $: connectionList = useConnectionList();