From 756786d72e6ec57a08d8c7f58f0c82dc52702fe5 Mon Sep 17 00:00:00 2001
From: Fabio Di Stasio <fabio286@gmail.com>
Date: Wed, 6 Dec 2023 08:44:07 +0100
Subject: [PATCH] chore: utility commit

---
 scripts/devRunner.js                          |   1 +
 .../components/ModalAllConnections.vue        |   8 +
 src/renderer/components/ModalSettings.vue     |  19 --
 src/renderer/components/TheScratchpad.vue     | 236 ++++++++++++++++--
 src/renderer/components/TheSettingBar.vue     |   8 +-
 src/renderer/i18n/en-US.ts                    |  19 +-
 src/renderer/stores/scratchpad.ts             |  10 +-
 src/renderer/stores/settings.ts               |   5 -
 8 files changed, 245 insertions(+), 61 deletions(-)

diff --git a/scripts/devRunner.js b/scripts/devRunner.js
index 98f3fd3b..88db8f5e 100644
--- a/scripts/devRunner.js
+++ b/scripts/devRunner.js
@@ -111,6 +111,7 @@ function startRenderer (callback) {
 
    const server = new WebpackDevServer(compiler, {
       port: 9080,
+      hot: true,
       client: {
          overlay: true,
          logging: 'warn'
diff --git a/src/renderer/components/ModalAllConnections.vue b/src/renderer/components/ModalAllConnections.vue
index c3385877..ff6fce48 100644
--- a/src/renderer/components/ModalAllConnections.vue
+++ b/src/renderer/components/ModalAllConnections.vue
@@ -152,6 +152,14 @@
                                  />
                                  SSH
                               </div>
+                              <div v-if="connection.readonly" class="chip bg-success mt-2">
+                                 <BaseIcon
+                                    icon-name="mdiLock"
+                                    class="mr-1"
+                                    :size="18"
+                                 />
+                                 Read-only
+                              </div>
                            </div>
                         </div>
                      </div>
diff --git a/src/renderer/components/ModalSettings.vue b/src/renderer/components/ModalSettings.vue
index 4e309bfb..ce7145dc 100644
--- a/src/renderer/components/ModalSettings.vue
+++ b/src/renderer/components/ModalSettings.vue
@@ -166,19 +166,6 @@
                                     </label>
                                  </div>
                               </div>
-                              <div class="form-group column col-12 mb-0">
-                                 <div class="col-5 col-sm-12">
-                                    <label class="form-label">
-                                       {{ t('application.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">
@@ -499,7 +486,6 @@ const {
    restoreTabs,
    showTableSize,
    disableBlur,
-   disableScratchpad,
    applicationTheme,
    editorTheme,
    editorFontSize
@@ -512,7 +498,6 @@ const {
    changePageSize,
    changeRestoreTabs,
    changeDisableBlur,
-   changeDisableScratchpad,
    changeAutoComplete,
    changeLineWrap,
    changeExecuteSelected,
@@ -671,10 +656,6 @@ const toggleDisableBlur = () => {
    changeDisableBlur(!disableBlur.value);
 };
 
-const toggleDisableScratchpad = () => {
-   changeDisableScratchpad(!disableScratchpad.value);
-};
-
 const toggleAutoComplete = () => {
    changeAutoComplete(!selectedAutoComplete.value);
 };
diff --git a/src/renderer/components/TheScratchpad.vue b/src/renderer/components/TheScratchpad.vue
index 2b9819ed..cdaa59ea 100644
--- a/src/renderer/components/TheScratchpad.vue
+++ b/src/renderer/components/TheScratchpad.vue
@@ -2,45 +2,183 @@
    <ConfirmModal
       :confirm-text="t('application.update')"
       :cancel-text="t('general.close')"
-      size="large"
+      size="medium"
       :hide-footer="true"
       @hide="hideScratchpad"
    >
       <template #header>
          <div class="d-flex">
             <BaseIcon
-               icon-name="mdiNotebookEditOutline"
+               icon-name="mdiNotebookOutline"
                class="mr-1"
                :size="24"
-            /> {{ t('application.scratchpad') }}
+            /> {{ t('application.note', 2) }}
          </div>
       </template>
       <template #body>
-         <div>
-            <div>
-               <TextEditor
-                  v-model="localNotes"
-                  editor-class="textarea-editor"
-                  mode="markdown"
-                  :auto-focus="true"
-                  :show-line-numbers="false"
+         <div class="d-flex p-vcentered" style="gap: 0 10px">
+            <div style="flex: 1;">
+               <BaseSelect
+                  v-model="localConnection"
+                  class="form-select"
+                  :options="connectionOptions"
+                  option-track-by="code"
+                  option-label="name"
+                  @change="null"
                />
             </div>
-            <small class="text-gray">{{ t('application.markdownSupported') }}</small>
+            <div class="btn-group btn-group-block text-uppercase">
+               <div class="btn btn-primary">
+                  {{ t('general.all') }}
+               </div>
+               <div class="btn btn-dark">
+                  {{ t('application.note', 1) }}
+               </div>
+               <div class="btn btn-dark">
+                  TODO
+               </div>
+               <div class="btn btn-dark">
+                  Query
+               </div>
+            </div>
+            <div class="">
+               <button class="btn btn-link px-1 tooltip tooltip-left" :data-tooltip="'Show archived notes'">
+                  <BaseIcon
+                     icon-name="mdiArchiveEyeOutline"
+                     class=""
+                     :size="24"
+                  />
+               </button>
+            </div>
+         </div>
+         <div>
+            <div
+               v-if="filteredNotes.length"
+               ref="searchForm"
+               class="form-group has-icon-right m-0"
+            >
+               <input
+                  v-model="searchTerm"
+                  class="form-input"
+                  type="text"
+                  :placeholder="t('general.search')"
+               >
+               <BaseIcon
+                  v-if="!searchTerm"
+                  icon-name="mdiMagnify"
+                  class="form-icon pr-2"
+                  :size="18"
+               />
+               <BaseIcon
+                  v-else
+                  icon-name="mdiBackspace"
+                  class="form-icon c-hand pr-2"
+                  :size="18"
+                  @click="searchTerm = ''"
+               />
+            </div>
+         </div>
+         <div
+            v-if="connectionNotes.length"
+            ref="tableWrapper"
+            class="vscroll px-1"
+            :style="{'height': resultsSize+'px'}"
+         >
+            <div ref="table">
+               <BaseVirtualScroll
+                  ref="resultTable"
+                  :items="filteredNotes"
+                  :item-height="66"
+                  :visible-height="resultsSize"
+                  :scroll-element="scrollElement"
+               >
+                  <template #default="{ items }">
+                     <div
+                        v-for="note in items"
+                        :key="note.uid"
+                        class="tile my-2"
+                        tabindex="0"
+                     >
+                        <div class="tile-icon">
+                           <BaseIcon
+                              icon-name="mdiCodeTags"
+                              class="pr-1"
+                              :size="24"
+                           />
+                        </div>
+                        <div class="tile-content">
+                           <div class="tile-title">
+                              <code
+                                 class="cut-text"
+                                 :title="note.note"
+                                 v-html="highlightWord(note.note)"
+                              />
+                           </div>
+                           <div class="tile-bottom-content">
+                              <!-- <small class="tile-subtitle">{{ query.schema }} · {{ formatDate(query.date) }}</small>
+                              <div class="tile-history-buttons">
+                                 <button class="btn btn-link pl-1" @click.stop="$emit('select-query', query.sql)">
+                                    <BaseIcon
+                                       icon-name="mdiOpenInApp"
+                                       class="pr-1"
+                                       :size="22"
+                                    /> {{ t('general.select') }}
+                                 </button>
+                                 <button class="btn btn-link pl-1" @click="copyQuery(query.sql)">
+                                    <BaseIcon
+                                       icon-name="mdiContentCopy"
+                                       class="pr-1"
+                                       :size="22"
+                                    /> {{ t('general.copy') }}
+                                 </button>
+                                 <button class="btn btn-link pl-1" @click="deleteQuery(query)">
+                                    <BaseIcon
+                                       icon-name="mdiDeleteForever"
+                                       class="pr-1"
+                                       :size="22"
+                                    /> {{ t('general.delete') }}
+                                 </button>
+                              </div> -->
+                           </div>
+                        </div>
+                     </div>
+                  </template>
+               </BaseVirtualScroll>
+            </div>
+         </div>
+         <div v-else class="empty">
+            <div class="empty-icon">
+               <BaseIcon icon-name="mdiNoteSearch" :size="48" />
+            </div>
+            <p class="empty-title h5">
+               {{ t('application.thereIsNoNotesYet') }}
+            </p>
          </div>
       </template>
    </ConfirmModal>
 </template>
 
 <script setup lang="ts">
+import { ConnectionParams } from 'common/interfaces/antares';
 import { storeToRefs } from 'pinia';
-import { Ref, ref, watch } from 'vue';
+import {
+   Component,
+   computed,
+   onBeforeUnmount,
+   onMounted,
+   onUpdated,
+   Ref,
+   ref
+} from 'vue';
 import { useI18n } from 'vue-i18n';
 
 import ConfirmModal from '@/components/BaseConfirmModal.vue';
 import BaseIcon from '@/components/BaseIcon.vue';
-import TextEditor from '@/components/BaseTextEditor.vue';
+import BaseSelect from '@/components/BaseSelect.vue';
+import BaseVirtualScroll from '@/components/BaseVirtualScroll.vue';
+import { unproxify } from '@/libs/unproxify';
 import { useApplicationStore } from '@/stores/application';
+import { SidebarElement, useConnectionsStore } from '@/stores/connections';
 import { useScratchpadStore } from '@/stores/scratchpad';
 
 const { t } = useI18n();
@@ -48,19 +186,73 @@ const { t } = useI18n();
 const applicationStore = useApplicationStore();
 const scratchpadStore = useScratchpadStore();
 
-const { notes } = storeToRefs(scratchpadStore);
+const { connectionNotes } = storeToRefs(scratchpadStore);
 const { changeNotes } = scratchpadStore;
 const { hideScratchpad } = applicationStore;
+const { getConnectionName } = useConnectionsStore();
+const { connections } = storeToRefs(useConnectionsStore());
+const localConnections = unproxify<ConnectionParams[]>(connections.value);
 
-const localNotes = ref(notes.value);
-const debounceTimeout: Ref<NodeJS.Timeout> = ref(null);
+const localConnection = ref(null);
+const table: Ref<HTMLDivElement> = ref(null);
+const resultTable: Ref<Component & { updateWindow: () => void }> = ref(null);
+const tableWrapper: Ref<HTMLDivElement> = ref(null);
+const searchForm: Ref<HTMLInputElement> = ref(null);
+const resultsSize = ref(1000);
+const localNotes = ref(connectionNotes.value);
+const searchTermInterval: Ref<NodeJS.Timeout> = ref(null);
+const scrollElement: Ref<HTMLDivElement> = ref(null);
+const searchTerm = ref('');
+const localSearchTerm = ref('');
 
-watch(localNotes, () => {
-   clearTimeout(debounceTimeout.value);
+const filteredNotes = computed(() => localNotes.value);
+const connectionOptions = computed(() => {
+   return [
+      { code: null, name: t('general.all') },
+      ...connections.value.map(c => ({ code: c.uid, name: getConnectionName(c.uid) }))
+   ];
+});
 
-   debounceTimeout.value = setTimeout(() => {
-      changeNotes(localNotes.value);
-   }, 200);
+const resizeResults = () => {
+   if (resultTable.value) {
+      const el = tableWrapper.value.parentElement;
+
+      if (el)
+         resultsSize.value = el.offsetHeight - searchForm.value.offsetHeight;
+
+      resultTable.value.updateWindow();
+   }
+};
+
+const refreshScroller = () => resizeResults();
+
+const highlightWord = (string: string) => {
+   string = string.replaceAll('<', '&lt;').replaceAll('>', '&gt;');
+
+   if (searchTerm.value) {
+      const regexp = new RegExp(`(${searchTerm.value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')})`, 'gi');
+      return string.replace(regexp, '<span class="text-primary text-bold">$1</span>');
+   }
+   else
+      return string;
+};
+
+onUpdated(() => {
+   if (table.value)
+      refreshScroller();
+
+   if (tableWrapper.value)
+      scrollElement.value = tableWrapper.value;
+});
+
+onMounted(() => {
+   resizeResults();
+   window.addEventListener('resize', resizeResults);
+});
+
+onBeforeUnmount(() => {
+   window.removeEventListener('resize', resizeResults);
+   clearInterval(searchTermInterval.value);
 });
 
 </script>
diff --git a/src/renderer/components/TheSettingBar.vue b/src/renderer/components/TheSettingBar.vue
index 51a3cbd7..97219ee9 100644
--- a/src/renderer/components/TheSettingBar.vue
+++ b/src/renderer/components/TheSettingBar.vue
@@ -59,17 +59,16 @@
       <div class="settingbar-bottom-elements">
          <ul class="settingbar-elements">
             <li
-               v-if="!disableScratchpad"
                v-tooltip="{
                   strategy: 'fixed',
                   placement: 'right',
-                  content: t('application.scratchpad')
+                  content: t('application.note', 2)
                }"
                class="settingbar-element btn btn-link"
                @click="showScratchpad"
             >
                <BaseIcon
-                  icon-name="mdiNotebookEditOutline"
+                  icon-name="mdiNotebookOutline"
                   class="settingbar-element-icon text-light"
                   :size="24"
                />
@@ -108,7 +107,6 @@ import SettingBarConnections from '@/components/SettingBarConnections.vue';
 import SettingBarContext from '@/components/SettingBarContext.vue';
 import { useApplicationStore } from '@/stores/application';
 import { SidebarElement, useConnectionsStore } from '@/stores/connections';
-import { useSettingsStore } from '@/stores/settings';
 import { useWorkspacesStore } from '@/stores/workspaces';
 
 const { t } = useI18n();
@@ -117,12 +115,10 @@ localStorage.setItem('opened-folders', '[]');
 const applicationStore = useApplicationStore();
 const connectionsStore = useConnectionsStore();
 const workspacesStore = useWorkspacesStore();
-const settingsStore = useSettingsStore();
 
 const { updateStatus } = storeToRefs(applicationStore);
 const { getSelected: selectedWorkspace } = storeToRefs(workspacesStore);
 const { connectionsOrder } = storeToRefs(connectionsStore);
-const { disableScratchpad } = storeToRefs(settingsStore);
 
 const { showSettingModal, showScratchpad } = applicationStore;
 const { updateConnectionsOrder, initConnectionsOrder } = connectionsStore;
diff --git a/src/renderer/i18n/en-US.ts b/src/renderer/i18n/en-US.ts
index 0ebb6136..dd6925c8 100644
--- a/src/renderer/i18n/en-US.ts
+++ b/src/renderer/i18n/en-US.ts
@@ -1,3 +1,12 @@
+/**
+ * [TRANSLATION UPDATE HELPER]
+ * - Open a terminal in antares folder and run `npm run translation:check short-code` replacing short-code with the one you are updating.
+ * - The command will output which terms are missing or not translated from english.
+ * - Open antares folder with your editor of choice.
+ * - Go to antares/src/renderer/i18n/ and open the locale file you want to translate.
+ * - Add and translate missing terms and consider whether to translate untranslated terms.
+ */
+
 export const enUS = {
    general: { // General purpose terms
       edit: 'Edit',
@@ -66,7 +75,8 @@ export const enUS = {
       outputFormat: 'Output format',
       singleFile: 'Single {ext} file',
       zipCompressedFile: 'ZIP compressed {ext} file',
-      copyName: 'Copy name'
+      copyName: 'Copy name',
+      search: 'Search'
    },
    connection: { // Database connection
       connectionName: 'Connection name',
@@ -270,8 +280,6 @@ export const enUS = {
    },
    application: { // Application related terms
       settings: 'Settings',
-      scratchpad: 'Scratchpad',
-      disableScratchpad: 'Disable scratchpad',
       console: 'Console',
       general: 'General',
       themes: 'Themes',
@@ -342,7 +350,6 @@ export const enUS = {
       saveContent: 'Save content',
       openAllConnections: 'Open all connections',
       openSettings: 'Open settings',
-      openScratchpad: 'Open scratchpad',
       runOrReload: 'Run or reload',
       openFilter: 'Open filter',
       nextResultsPage: 'Next results page',
@@ -376,7 +383,9 @@ export const enUS = {
       ignoreDuplicates: 'Ignore duplicates',
       wrongImportPassword: 'Wrong import password',
       wrongFileFormat: 'Wrong file format',
-      dataImportSuccess: 'Data successfully imported'
+      dataImportSuccess: 'Data successfully imported',
+      note: 'Note | Notes',
+      thereIsNoNotesYet: 'There is no notes yet'
    },
    faker: { // Faker.js methods, used in random generated content
       address: 'Address',
diff --git a/src/renderer/stores/scratchpad.ts b/src/renderer/stores/scratchpad.ts
index 73f2f802..e9406554 100644
--- a/src/renderer/stores/scratchpad.ts
+++ b/src/renderer/stores/scratchpad.ts
@@ -4,6 +4,8 @@ const persistentStore = new Store({ name: 'notes' });
 
 export interface ConnectionNote {
    uid: string;
+   cUid: string;
+   title?: string;
    note: string;
    date: Date;
 }
@@ -13,12 +15,12 @@ export const useScratchpadStore = defineStore('scratchpad', {
       /** Global notes */
       notes: persistentStore.get('notes', '# HOW TO SUPPORT ANTARES\n\n- [ ] Leave a star to Antares [GitHub repo](https://github.com/antares-sql/antares)\n- [ ] Send feedbacks and advices\n- [ ] Report for bugs\n- [ ] If you enjoy, share Antares with friends\n\n# ABOUT SCRATCHPAD\n\nThis is a scratchpad where you can save your **personal notes**. It supports `markdown` format, but you are free to use plain text.\nThis content is just a placeholder, feel free to clear it to make space for your notes.\n') as string,
       /** Connection specific notes */
-      connectionNotes: persistentStore.get('connectionNotes', {}) as {[k: string]: ConnectionNote}
+      connectionNotes: persistentStore.get('connectionNotes', {}) as ConnectionNote[]
    }),
    actions: {
-      changeNotes (notes: string) {
-         this.notes = notes;
-         persistentStore.set('notes', this.notes);
+      changeNotes (notes: ConnectionNote[]) {
+         this.connectionNotes = notes;
+         persistentStore.set('connectionNotes', this.connectionNotes);
       }
    }
 });
diff --git a/src/renderer/stores/settings.ts b/src/renderer/stores/settings.ts
index 7510dde1..bad9b058 100644
--- a/src/renderer/stores/settings.ts
+++ b/src/renderer/stores/settings.ts
@@ -30,7 +30,6 @@ export const useSettingsStore = defineStore('settings', {
       editorFontSize: settingsStore.get('editor_font_size', 'medium') as EditorFontSize,
       restoreTabs: settingsStore.get('restore_tabs', true) as boolean,
       disableBlur: settingsStore.get('disable_blur', false) as boolean,
-      disableScratchpad: settingsStore.get('disable_scratchpad', false) as boolean,
       shortcuts: shortcutsStore.get('shortcuts', []) as ShortcutRecord[],
       defaultCopyType: settingsStore.get('default_copy_type', 'cell') as string
    }),
@@ -93,10 +92,6 @@ export const useSettingsStore = defineStore('settings', {
          this.disableBlur = val;
          settingsStore.set('disable_blur', this.disableBlur);
       },
-      changeDisableScratchpad (val: boolean) {
-         this.disableScratchpad = val;
-         settingsStore.set('disable_scratchpad', this.disableScratchpad);
-      },
       updateShortcuts (shortcuts: ShortcutRecord[]) {
          this.shortcuts = shortcuts;
       },