From 56b0a4815c6f54eef164d849f6ca25af1e142b16 Mon Sep 17 00:00:00 2001
From: Fabio Di Stasio <fabio286@gmail.com>
Date: Mon, 4 Jul 2022 15:10:40 +0200
Subject: [PATCH] feat: option to disable scratchpad

---
 src/renderer/App.vue                          | 18 ++++++++++--------
 .../components/ModalAllConnections.vue        |  6 ++++++
 src/renderer/components/ModalSettings.vue     | 19 +++++++++++++++++++
 src/renderer/components/TheSettingBar.vue     |  9 ++++++++-
 src/renderer/composables/useFocusTrap.ts      |  3 ++-
 src/renderer/i18n/en-US.ts                    |  3 ++-
 src/renderer/stores/settings.ts               |  7 ++++++-
 7 files changed, 53 insertions(+), 12 deletions(-)

diff --git a/src/renderer/App.vue b/src/renderer/App.vue
index 84db11ee..9fc02dac 100644
--- a/src/renderer/App.vue
+++ b/src/renderer/App.vue
@@ -67,21 +67,23 @@ const { changeApplicationTheme } = settingsStore;
 
 const isAllConnectionsModal: Ref<boolean> = ref(false);
 
-document.addEventListener('DOMContentLoaded', () => {
-   setTimeout(() => {
-      changeApplicationTheme(applicationTheme.value);// Forces persistentStore to save on file and mail process
-   }, 1000);
-});
-
-window.addEventListener('keypress', (e: KeyboardEvent) => {
+const onKey = (e: KeyboardEvent) => {
    if (e.ctrlKey || e.metaKey) {
       if (e.code === 'Space') {
          isAllConnectionsModal.value = true;
          e.stopPropagation();
       }
    }
+};
+
+document.addEventListener('DOMContentLoaded', () => {
+   setTimeout(() => {
+      changeApplicationTheme(applicationTheme.value);// Forces persistentStore to save on file and mail process
+   }, 1000);
 });
 
+window.addEventListener('keypress', onKey);
+
 onMounted(() => {
    ipcRenderer.send('check-for-updates');
    checkVersionUpdate();
@@ -126,7 +128,7 @@ onMounted(() => {
 });
 
 onBeforeUnmount(() => {
-   window.removeEventListener('keydown', console.log);
+   window.removeEventListener('keydown', onKey);
 });
 </script>
 
diff --git a/src/renderer/components/ModalAllConnections.vue b/src/renderer/components/ModalAllConnections.vue
index a340e9eb..47d03238 100644
--- a/src/renderer/components/ModalAllConnections.vue
+++ b/src/renderer/components/ModalAllConnections.vue
@@ -96,6 +96,12 @@
                            </div>
                         </div>
                      </div>
+                     <input
+                        readonly
+                        class="p-absolute"
+                        style="width: 1px; height: 1px; opacity: 0"
+                        type="text"
+                     ><!-- workaround for useFocusTrap $lastFocusable -->
                   </TransitionGroup>
                </div>
             </div>
diff --git a/src/renderer/components/ModalSettings.vue b/src/renderer/components/ModalSettings.vue
index f91dc9c4..4e1c11b7 100644
--- a/src/renderer/components/ModalSettings.vue
+++ b/src/renderer/components/ModalSettings.vue
@@ -126,6 +126,19 @@
                                     </label>
                                  </div>
                               </div>
+                              <div class="form-group column col-12 mb-0">
+                                 <div class="col-5 col-sm-12">
+                                    <label class="form-label">
+                                       {{ t('message.disableScratchpad') }}
+                                    </label>
+                                 </div>
+                                 <div class="col-3 col-sm-12">
+                                    <label class="form-switch d-inline-block" @click.prevent="toggleDisableScratchpad">
+                                       <input type="checkbox" :checked="disableScratchpad">
+                                       <i class="form-icon" />
+                                    </label>
+                                 </div>
+                              </div>
                               <div class="form-group column col-12">
                                  <div class="col-5 col-sm-12">
                                     <label class="form-label">
@@ -337,6 +350,7 @@ const {
    notificationsTimeout,
    restoreTabs,
    disableBlur,
+   disableScratchpad,
    applicationTheme,
    editorTheme,
    editorFontSize
@@ -349,6 +363,7 @@ const {
    changePageSize,
    changeRestoreTabs,
    changeDisableBlur,
+   changeDisableScratchpad,
    changeAutoComplete,
    changeLineWrap,
    changeApplicationTheme,
@@ -490,6 +505,10 @@ const toggleDisableBlur = () => {
    changeDisableBlur(!disableBlur.value);
 };
 
+const toggleDisableScratchpad = () => {
+   changeDisableScratchpad(!disableScratchpad.value);
+};
+
 const toggleAutoComplete = () => {
    changeAutoComplete(!selectedAutoComplete.value);
 };
diff --git a/src/renderer/components/TheSettingBar.vue b/src/renderer/components/TheSettingBar.vue
index ad61f299..2d705a6a 100644
--- a/src/renderer/components/TheSettingBar.vue
+++ b/src/renderer/components/TheSettingBar.vue
@@ -71,7 +71,11 @@
 
       <div class="settingbar-bottom-elements">
          <ul class="settingbar-elements">
-            <li class="settingbar-element btn btn-link ex-tooltip" @click="showScratchpad">
+            <li
+               v-if="!disableScratchpad"
+               class="settingbar-element btn btn-link ex-tooltip"
+               @click="showScratchpad"
+            >
                <i class="settingbar-element-icon mdi mdi-24px mdi-notebook-edit-outline text-light" />
                <span class="ex-tooltip-content">{{ $t('word.scratchpad') }}</span>
             </li>
@@ -90,6 +94,7 @@ import { storeToRefs } from 'pinia';
 import { useApplicationStore } from '@/stores/application';
 import { useConnectionsStore } from '@/stores/connections';
 import { useWorkspacesStore } from '@/stores/workspaces';
+import { useSettingsStore } from '@/stores/settings';
 import * as Draggable from 'vuedraggable';
 import SettingBarContext from '@/components/SettingBarContext.vue';
 import { ConnectionParams } from 'common/interfaces/antares';
@@ -98,10 +103,12 @@ import { useElementBounding, useScroll } from '@vueuse/core';
 const applicationStore = useApplicationStore();
 const connectionsStore = useConnectionsStore();
 const workspacesStore = useWorkspacesStore();
+const settingsStore = useSettingsStore();
 
 const { updateStatus } = storeToRefs(applicationStore);
 const { connections: storedConnections, pinnedConnections, lastConnections } = storeToRefs(connectionsStore);
 const { getSelected: selectedWorkspace } = storeToRefs(workspacesStore);
+const { disableScratchpad } = storeToRefs(settingsStore);
 
 const { showSettingModal, showScratchpad } = applicationStore;
 const { getConnectionName, updatePinnedConnections } = connectionsStore;
diff --git a/src/renderer/composables/useFocusTrap.ts b/src/renderer/composables/useFocusTrap.ts
index 7fd7c5c8..76cdb8f4 100644
--- a/src/renderer/composables/useFocusTrap.ts
+++ b/src/renderer/composables/useFocusTrap.ts
@@ -56,7 +56,8 @@ const useFocusTrap = (args?: {disableAutofocus?: boolean}) => {
    }
 
    function initFocusTrap () {
-      if (!trapRef.value || isInitiated.value) return;
+      if (!trapRef.value || (isInitiated.value)) return;
+
       focusableElements = (trapRef.value as HTMLElement).querySelectorAll(
          focusableElementsSelector
       );
diff --git a/src/renderer/i18n/en-US.ts b/src/renderer/i18n/en-US.ts
index 522bd126..ed6f8044 100644
--- a/src/renderer/i18n/en-US.ts
+++ b/src/renderer/i18n/en-US.ts
@@ -295,7 +295,8 @@ module.exports = {
       findOutHowToContribute: 'Find out how to contribute',
       disableFKChecks: 'Disable foreigh key checks',
       allConnections: 'All connections',
-      searchForConnections: 'Search for connections'
+      searchForConnections: 'Search for connections',
+      disableScratchpad: 'Disable scratchpad'
    },
    faker: {
       address: 'Address',
diff --git a/src/renderer/stores/settings.ts b/src/renderer/stores/settings.ts
index ee8ddb1f..6b1b87c4 100644
--- a/src/renderer/stores/settings.ts
+++ b/src/renderer/stores/settings.ts
@@ -23,7 +23,8 @@ export const useSettingsStore = defineStore('settings', {
       editorTheme: persistentStore.get('editor_theme', defaultEditorTheme) as string,
       editorFontSize: persistentStore.get('editor_font_size', 'medium') as EditorFontSize,
       restoreTabs: persistentStore.get('restore_tabs', true) as boolean,
-      disableBlur: persistentStore.get('disable_blur', false) as boolean
+      disableBlur: persistentStore.get('disable_blur', false) as boolean,
+      disableScratchpad: persistentStore.get('disable_scratchpad', false) as boolean
    }),
    actions: {
       changeLocale (locale: string) {
@@ -75,6 +76,10 @@ export const useSettingsStore = defineStore('settings', {
       changeDisableBlur (val: boolean) {
          this.disableBlur = val;
          persistentStore.set('disable_blur', this.disableBlur);
+      },
+      changeDisableScratchpad (val: boolean) {
+         this.disableScratchpad = val;
+         persistentStore.set('disable_scratchpad', this.disableScratchpad);
       }
    }
 });