feat: buttons to save and access to saved queryes from query tab

src/renderer/components/TheScratchpad.vue

@@ -180,7 +180,7 @@ const { t } = useI18n();
 const applicationStore = useApplicationStore();
 const scratchpadStore = useScratchpadStore();
 
-const { connectionNotes } = storeToRefs(scratchpadStore);
+const { connectionNotes, selectedTag } = storeToRefs(scratchpadStore);
 const { changeNotes } = scratchpadStore;
 const { hideScratchpad } = applicationStore;
 const { getConnectionName } = useConnectionsStore();
@@ -202,7 +202,6 @@ const showArchived = ref(false);
 const isAddModal = ref(false);
 const isEditModal = ref(false);
 const noteToEdit: Ref<ConnectionNote> = ref(null);
-const selectedTag = ref('all');
 const selectedNote = ref(null);
 
 const noteTags: ComputedRef<{code: TagCode; name: string}[]> = computed(() => [

src/renderer/components/TheSettingBar.vue

@@ -65,7 +65,7 @@
                   content: t('application.note', 2)
                }"
                class="settingbar-element btn btn-link"
-               @click="showScratchpad"
+               @click="showScratchpad()"
             >
                <BaseIcon
                   icon-name="mdiNotebookOutline"

src/renderer/components/WorkspaceTabQuery.vue

@@ -89,27 +89,37 @@
                <button
                   class="btn btn-dark btn-sm"
                   :disabled="!query || isQuering"
+                  :title="t('general.format')"
                   @click="beautify()"
                >
-                  <BaseIcon
+                  <BaseIcon icon-name="mdiBrush" :size="24" />
-                     class="mr-1"
-                     icon-name="mdiBrush"
-                     :size="24"
-                  />
-                  <span>{{ t('general.format') }}</span>
                </button>
                <button
                   class="btn btn-dark btn-sm"
                   :disabled="isQuering"
+                  :title="t('general.history')"
                   @click="openHistoryModal()"
                >
-                  <BaseIcon
+                  <BaseIcon icon-name="mdiHistory" :size="24" />
-                     class="mr-1"
-                     icon-name="mdiHistory"
-                     :size="24"
-                  />
-                  <span>{{ t('general.history') }}</span>
                </button>
+               <div class="btn-group">
+                  <button
+                     class="btn btn-dark btn-sm mr-0"
+                     :disabled="isQuering || (isQuerySaved || query.length < 5)"
+                     :title="t('general.save')"
+                     @click="saveQuery()"
+                  >
+                     <BaseIcon icon-name="mdiContentSaveOutline" :size="24" />
+                  </button>
+                  <button
+                     class="btn btn-dark btn-sm"
+                     :disabled="isQuering"
+                     :title="t('database.savedQueries')"
+                     @click="openSavedModal()"
+                  >
+                     <BaseIcon icon-name="mdiStarOutline" :size="24" />
+                  </button>
+               </div>
                <div class="dropdown table-dropdown pr-2">
                   <button
                      :disabled="!hasResults || isQuering"
@@ -237,6 +247,7 @@
 <script setup lang="ts">
 import { Ace } from 'ace-builds';
 import { ConnectionParams } from 'common/interfaces/antares';
+import { uidGen } from 'common/libs/uidGen';
 import { ipcRenderer } from 'electron';
 import { storeToRefs } from 'pinia';
 import { format } from 'sql-formatter';
@@ -252,9 +263,11 @@ import WorkspaceTabQueryEmptyState from '@/components/WorkspaceTabQueryEmptyStat
 import WorkspaceTabQueryTable from '@/components/WorkspaceTabQueryTable.vue';
 import { useResultTables } from '@/composables/useResultTables';
 import Schema from '@/ipc-api/Schema';
+import { useApplicationStore } from '@/stores/application';
 import { useConsoleStore } from '@/stores/console';
 import { useHistoryStore } from '@/stores/history';
 import { useNotificationsStore } from '@/stores/notifications';
+import { useScratchpadStore } from '@/stores/scratchpad';
 import { useSettingsStore } from '@/stores/settings';
 import { useWorkspacesStore } from '@/stores/workspaces';
 
@@ -279,6 +292,8 @@ const {
 const { saveHistory } = useHistoryStore();
 const { addNotification } = useNotificationsStore();
 const workspacesStore = useWorkspacesStore();
+const { showScratchpad } = useApplicationStore();
+const { addNote } = useScratchpadStore();
 
 const { consoleHeight } = storeToRefs(useConsoleStore());
 const { executeSelected } = storeToRefs(useSettingsStore());
@@ -304,6 +319,7 @@ const resultsCount = ref(0);
 const durationsCount = ref(0);
 const affectedCount = ref(null);
 const editorHeight = ref(200);
+const isQuerySaved = ref(false);
 const isHistoryOpen = ref(false);
 const debounceTimeout = ref(null);
 
@@ -329,6 +345,7 @@ watch(query, (val) => {
          schema: selectedSchema.value,
          content: val
       });
+      isQuerySaved.value = false;
    }, 200);
 });
 
@@ -496,6 +513,22 @@ const openHistoryModal = () => {
    isHistoryOpen.value = true;
 };
 
+const saveQuery = () => {
+   addNote({
+      uid: uidGen('N'),
+      cUid: workspace.value.uid,
+      type: 'query',
+      date: new Date(),
+      note: query.value,
+      isArchived: false
+   });
+   isQuerySaved.value = true;
+};
+
+const openSavedModal = () => {
+   showScratchpad('query');
+};
+
 const selectQuery = (sql: string) => {
    if (queryEditor.value)
       queryEditor.value.editor.session.setValue(sql);

src/renderer/i18n/en-US.ts

@@ -280,7 +280,8 @@ export const enUS = {
       targetTable: 'Target table',
       switchDatabase: 'Switch the database',
       searchForElements: 'Search for elements',
-      searchForSchemas: 'Search for schemas'
+      searchForSchemas: 'Search for schemas',
+      savedQueries: 'Saved queries'
    },
    application: { // Application related terms
       settings: 'Settings',

src/renderer/stores/application.ts

@@ -1,6 +1,8 @@
 import { Ace } from 'ace-builds';
 import * as Store from 'electron-store';
-import { defineStore } from 'pinia';
+import { defineStore, storeToRefs } from 'pinia';
+
+import { useScratchpadStore } from './scratchpad';
 
 const persistentStore = new Store({ name: 'settings' });
 export type UpdateStatus = 'noupdate' | 'available' | 'checking' | 'nocheck' | 'downloading' | 'downloaded' | 'disabled' | 'link';
@@ -51,8 +53,12 @@ export const useApplicationStore = defineStore('application', {
       hideSettingModal () {
          this.isSettingModal = false;
       },
-      showScratchpad () {
+      showScratchpad (tag?: string) {
          this.isScratchpad = true;
+         if (tag) {
+            const { selectedTag } = storeToRefs(useScratchpadStore());
+            selectedTag.value = tag;
+         }
       },
       hideScratchpad () {
          this.isScratchpad = false;

src/renderer/stores/scratchpad.ts

@@ -16,6 +16,7 @@ export interface ConnectionNote {
 
 export const useScratchpadStore = defineStore('scratchpad', {
    state: () => ({
+      selectedTag: 'all',
       /** 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 */