mirror of
https://github.com/Fabio286/antares.git
synced 2025-06-05 21:59:22 +02:00
feat: new notes system
This commit is contained in:
@ -1,176 +1,144 @@
|
||||
<template>
|
||||
<ConfirmModal
|
||||
:confirm-text="t('application.update')"
|
||||
:cancel-text="t('general.close')"
|
||||
size="medium"
|
||||
:hide-footer="true"
|
||||
:disable-autofocus="true"
|
||||
@hide="hideScratchpad"
|
||||
>
|
||||
<template #header>
|
||||
<div class="d-flex">
|
||||
<BaseIcon
|
||||
icon-name="mdiNotebookOutline"
|
||||
class="mr-1"
|
||||
:size="24"
|
||||
/> {{ t('application.note', 2) }}
|
||||
</div>
|
||||
</template>
|
||||
<template #body>
|
||||
<div class="p-relative">
|
||||
<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>
|
||||
<div class="btn-group btn-group-block text-uppercase">
|
||||
<div
|
||||
v-for="tag in [{ code: 'all', name: t('general.all') }, ...noteTags]"
|
||||
:key="tag.code"
|
||||
class="btn"
|
||||
:class="[selectedTab === tag.code ? 'btn-primary': 'btn-dark']"
|
||||
@click="selectedTab = tag.code"
|
||||
>
|
||||
{{ tag.name }}
|
||||
<Teleport to="#window-content">
|
||||
<div class="modal active">
|
||||
<a class="modal-overlay" @click.stop="hideScratchpad" />
|
||||
<div ref="trapRef" class="modal-container p-0 pb-4">
|
||||
<div class="modal-header pl-2">
|
||||
<div class="modal-title h6">
|
||||
<div class="d-flex">
|
||||
<BaseIcon
|
||||
icon-name="mdiNotebookOutline"
|
||||
class="mr-1"
|
||||
:size="24"
|
||||
/>
|
||||
<span>{{ t('application.note', 2) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="">
|
||||
<a class="btn btn-clear c-hand" @click.stop="hideScratchpad" />
|
||||
</div>
|
||||
<div class="modal-body p-0 workspace-query-results">
|
||||
<div
|
||||
ref="noteFilters"
|
||||
class="d-flex p-vcentered p-2"
|
||||
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>
|
||||
<div class="btn-group btn-group-block text-uppercase">
|
||||
<div
|
||||
v-for="tag in [{ code: 'all', name: t('general.all') }, ...noteTags]"
|
||||
:key="tag.code"
|
||||
class="btn"
|
||||
:class="[selectedTag === tag.code ? 'btn-primary': 'btn-dark']"
|
||||
@click="setTag(tag.code)"
|
||||
>
|
||||
{{ tag.name }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="">
|
||||
<div
|
||||
class="btn px-1 tooltip tooltip-left s-rounded archived-button"
|
||||
:class="[showArchived ? 'btn-primary' : 'btn-link']"
|
||||
:data-tooltip="showArchived ? t('application.hideArchivedNotes') : t('application.showArchivedNotes')"
|
||||
@click="showArchived = !showArchived"
|
||||
>
|
||||
<BaseIcon
|
||||
:icon-name="!showArchived ? 'mdiArchiveEyeOutline' : 'mdiArchiveCancelOutline'"
|
||||
class=""
|
||||
:size="24"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
class="btn px-1 tooltip tooltip-left s-rounded archived-button"
|
||||
:class="[showArchived ? 'btn-primary' : 'btn-link']"
|
||||
:data-tooltip="showArchived ? t('application.hideArchivedNotes') : t('application.showArchivedNotes')"
|
||||
@click="showArchived = !showArchived"
|
||||
v-show="filteredNotes.length || searchTerm.length"
|
||||
ref="searchForm"
|
||||
class="form-group has-icon-right m-0 p-2"
|
||||
>
|
||||
<input
|
||||
v-model="searchTerm"
|
||||
class="form-input"
|
||||
type="text"
|
||||
:placeholder="t('general.search')"
|
||||
>
|
||||
<BaseIcon
|
||||
:icon-name="!showArchived ? 'mdiArchiveEyeOutline' : 'mdiArchiveCancelOutline'"
|
||||
class=""
|
||||
:size="24"
|
||||
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>
|
||||
<div>
|
||||
|
||||
<div
|
||||
v-if="filteredNotes.length"
|
||||
ref="searchForm"
|
||||
class="form-group has-icon-right m-0"
|
||||
ref="tableWrapper"
|
||||
class="vscroll px-2"
|
||||
:style="{'height': resultsSize+'px'}"
|
||||
>
|
||||
<div ref="table">
|
||||
<BaseVirtualScroll
|
||||
ref="resultTable"
|
||||
:items="filteredNotes"
|
||||
:item-height="83"
|
||||
:visible-height="resultsSize"
|
||||
:scroll-element="scrollElement"
|
||||
>
|
||||
<template #default="{ items }">
|
||||
<ScratchpadNote
|
||||
v-for="note in items"
|
||||
:key="note.uid"
|
||||
:search-term="searchTerm"
|
||||
:note="note"
|
||||
:selected-note="selectedNote"
|
||||
@select-note="selectedNote = note.uid"
|
||||
@toggle-note="toggleNote"
|
||||
@delete-note="deleteNote"
|
||||
@archive-note="archiveNote"
|
||||
@restore-note="restoreNote"
|
||||
/>
|
||||
</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.thereAreNoNotesYet') }}
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
class="btn btn-primary p-0 add-button tooltip tooltip-left"
|
||||
:data-tooltip="t('application.addNote')"
|
||||
@click="isAddModal = true"
|
||||
>
|
||||
<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 = ''"
|
||||
icon-name="mdiPlus"
|
||||
:size="48"
|
||||
/>
|
||||
</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.thereAreNoNotesYet') }}
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
class="btn btn-primary p-0 add-button p-absolute tooltip tooltip-left"
|
||||
:data-tooltip="t('application.addNote')"
|
||||
@click="isAddModal = true"
|
||||
>
|
||||
<BaseIcon
|
||||
icon-name="mdiPlus"
|
||||
:size="48"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</ConfirmModal>
|
||||
</div>
|
||||
</Teleport>
|
||||
<ModalNewNote v-if="isAddModal" @hide="isAddModal = false" />
|
||||
</template>
|
||||
|
||||
@ -185,18 +153,20 @@ import {
|
||||
onUpdated,
|
||||
provide,
|
||||
Ref,
|
||||
ref
|
||||
ref,
|
||||
watch
|
||||
} from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
|
||||
import ConfirmModal from '@/components/BaseConfirmModal.vue';
|
||||
import BaseIcon from '@/components/BaseIcon.vue';
|
||||
import BaseSelect from '@/components/BaseSelect.vue';
|
||||
import BaseVirtualScroll from '@/components/BaseVirtualScroll.vue';
|
||||
import ModalNewNote from '@/components/ModalNewNote.vue';
|
||||
import ScratchpadNote from '@/components/ScratchpadNote.vue';
|
||||
import { useApplicationStore } from '@/stores/application';
|
||||
import { useConnectionsStore } from '@/stores/connections';
|
||||
import { TagCode, useScratchpadStore } from '@/stores/scratchpad';
|
||||
import { useWorkspacesStore } from '@/stores/workspaces';
|
||||
|
||||
const { t } = useI18n();
|
||||
|
||||
@ -208,14 +178,15 @@ const { changeNotes } = scratchpadStore;
|
||||
const { hideScratchpad } = applicationStore;
|
||||
const { getConnectionName } = useConnectionsStore();
|
||||
const { connections } = storeToRefs(useConnectionsStore());
|
||||
const { getSelected: selectedWorkspace } = storeToRefs(useWorkspacesStore());
|
||||
|
||||
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 noteFilters: Ref<HTMLInputElement> = 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('');
|
||||
@ -223,14 +194,20 @@ const localSearchTerm = ref('');
|
||||
const showArchived = ref(false);
|
||||
const isAddModal = ref(false);
|
||||
const isEditModal = ref(false);
|
||||
const selectedTab = ref('all');
|
||||
const selectedTag = ref('all');
|
||||
const selectedNote = ref(null);
|
||||
|
||||
const noteTags: ComputedRef<{code: TagCode; name: string}[]> = computed(() => [
|
||||
{ code: 'note', name: t('application.note') },
|
||||
{ code: 'todo', name: 'TODO' },
|
||||
{ code: 'query', name: 'Query' }
|
||||
]);
|
||||
const filteredNotes = computed(() => localNotes.value);
|
||||
const filteredNotes = computed(() => connectionNotes.value.filter(n => (
|
||||
(n.type === selectedTag.value || selectedTag.value === 'all') &&
|
||||
(n.cUid === localConnection.value || localConnection.value === null) &&
|
||||
(!n.isArchived || showArchived.value) &&
|
||||
(n.note.toLowerCase().search(localSearchTerm.value.toLowerCase()) >= 0)
|
||||
)));
|
||||
const connectionOptions = computed(() => {
|
||||
return [
|
||||
{ code: null, name: t('general.all') },
|
||||
@ -240,13 +217,15 @@ const connectionOptions = computed(() => {
|
||||
|
||||
provide('noteTags', noteTags);
|
||||
provide('connectionOptions', connectionOptions);
|
||||
provide('selectedConnection', localConnection);
|
||||
provide('selectedTag', selectedTag);
|
||||
|
||||
const resizeResults = () => {
|
||||
if (resultTable.value) {
|
||||
const el = tableWrapper.value.parentElement;
|
||||
|
||||
if (el)
|
||||
resultsSize.value = el.offsetHeight - searchForm.value.offsetHeight;
|
||||
resultsSize.value = el.offsetHeight - searchForm.value.offsetHeight - noteFilters.value.offsetHeight;
|
||||
|
||||
resultTable.value.updateWindow();
|
||||
}
|
||||
@ -254,17 +233,45 @@ const resizeResults = () => {
|
||||
|
||||
const refreshScroller = () => resizeResults();
|
||||
|
||||
const highlightWord = (string: string) => {
|
||||
string = string.replaceAll('<', '<').replaceAll('>', '>');
|
||||
|
||||
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;
|
||||
const setTag = (tag: string) => {
|
||||
selectedTag.value = tag;
|
||||
};
|
||||
|
||||
const toggleNote = (uid: string) => {
|
||||
selectedNote.value = selectedNote.value !== uid ? uid : null;
|
||||
};
|
||||
|
||||
const archiveNote = (uid: string) => {
|
||||
const remappedNotes = connectionNotes.value.map(n => {
|
||||
if (n.uid === uid)
|
||||
n.isArchived = true;
|
||||
return n;
|
||||
});
|
||||
changeNotes(remappedNotes);
|
||||
};
|
||||
|
||||
const restoreNote = (uid: string) => {
|
||||
const remappedNotes = connectionNotes.value.map(n => {
|
||||
if (n.uid === uid)
|
||||
n.isArchived = false;
|
||||
return n;
|
||||
});
|
||||
changeNotes(remappedNotes);
|
||||
};
|
||||
|
||||
const deleteNote = (uid: string) => {
|
||||
const otherNotes = connectionNotes.value.filter(n => n.uid !== uid);
|
||||
changeNotes(otherNotes);
|
||||
};
|
||||
|
||||
watch(searchTerm, () => {
|
||||
clearTimeout(searchTermInterval.value);
|
||||
|
||||
searchTermInterval.value = setTimeout(() => {
|
||||
localSearchTerm.value = searchTerm.value;
|
||||
}, 200);
|
||||
});
|
||||
|
||||
onUpdated(() => {
|
||||
if (table.value)
|
||||
refreshScroller();
|
||||
@ -276,6 +283,9 @@ onUpdated(() => {
|
||||
onMounted(() => {
|
||||
resizeResults();
|
||||
window.addEventListener('resize', resizeResults);
|
||||
|
||||
if (selectedWorkspace.value && selectedWorkspace.value !== 'NEW')
|
||||
localConnection.value = selectedWorkspace.value;
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
@ -286,13 +296,20 @@ onBeforeUnmount(() => {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.vscroll {
|
||||
height: 1000px;
|
||||
overflow: auto;
|
||||
overflow-anchor: none;
|
||||
}
|
||||
|
||||
.add-button{
|
||||
bottom: 15px;
|
||||
right: 0;
|
||||
border: none;
|
||||
height: 48px;
|
||||
width: 48px;
|
||||
border-radius: 50%;
|
||||
position: fixed;
|
||||
margin-top: -40px;
|
||||
margin-left: 580px;
|
||||
}
|
||||
.archived-button {
|
||||
border-radius: 50%;
|
||||
|
||||
Reference in New Issue
Block a user