mirror of https://github.com/Fabio286/antares.git
123 lines
3.8 KiB
Vue
123 lines
3.8 KiB
Vue
<template>
|
|
<ConfirmModal
|
|
size="resize"
|
|
:disable-autofocus="true"
|
|
:close-on-confirm="!!newNote.note.length"
|
|
:confirm-text="t('general.save')"
|
|
@confirm="createNote"
|
|
@hide="$emit('hide')"
|
|
>
|
|
<template #header>
|
|
<div class="d-flex">
|
|
<BaseIcon
|
|
icon-name="mdiNotePlusOutline"
|
|
class="mr-1"
|
|
:size="24"
|
|
/> {{ t('application.addNote') }}
|
|
</div>
|
|
</template>
|
|
<template #body>
|
|
<form class="form">
|
|
<div class="form-group columns">
|
|
<div class="column col-8">
|
|
<label class="form-label">{{ t('connection.connection') }}</label>
|
|
<BaseSelect
|
|
v-model="newNote.cUid"
|
|
class="form-select"
|
|
:options="connectionOptions"
|
|
option-track-by="code"
|
|
option-label="name"
|
|
@change="null"
|
|
/>
|
|
</div>
|
|
<div class="column col-4">
|
|
<label class="form-label">{{ t('application.tag') }}</label>
|
|
<BaseSelect
|
|
v-model="newNote.type"
|
|
class="form-select"
|
|
:options="noteTags"
|
|
option-track-by="code"
|
|
option-label="name"
|
|
@change="null"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">{{ t('general.content') }} <small
|
|
v-if="newNote.type !== 'query'"
|
|
style="line-height: 1;"
|
|
class="text-gray"
|
|
>({{ t('application.markdownSupported') }})</small></label>
|
|
<BaseTextEditor
|
|
v-model="newNote.note"
|
|
:mode="editorMode"
|
|
:show-line-numbers="false"
|
|
:auto-focus="true"
|
|
:height="400"
|
|
:width="640"
|
|
:resizable="true"
|
|
/>
|
|
</div>
|
|
</form>
|
|
</template>
|
|
</ConfirmModal>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { uidGen } from 'common/libs/uidGen';
|
|
import { inject, 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 BaseTextEditor from '@/components/BaseTextEditor.vue';
|
|
import { ConnectionNote, TagCode, useScratchpadStore } from '@/stores/scratchpad';
|
|
|
|
const { t } = useI18n();
|
|
const { addNote } = useScratchpadStore();
|
|
|
|
const emit = defineEmits(['hide']);
|
|
|
|
const noteTags = inject<{code: TagCode; name: string}[]>('noteTags');
|
|
const selectedConnection = inject<Ref<null | string>>('selectedConnection');
|
|
const selectedTag = inject<Ref<TagCode>>('selectedTag');
|
|
const connectionOptions = inject<{code: string; name: string}[]>('connectionOptions');
|
|
|
|
const editorMode = ref('markdown');
|
|
|
|
const newNote: Ref<ConnectionNote> = ref({
|
|
uid: uidGen('N'),
|
|
cUid: null,
|
|
title: undefined,
|
|
note: '',
|
|
date: new Date(),
|
|
type: 'note',
|
|
isArchived: false
|
|
});
|
|
|
|
const createNote = () => {
|
|
if (newNote.value.note) {
|
|
if (!newNote.value.title)// Set a default title
|
|
newNote.value.title = `${newNote.value.type.toLocaleUpperCase()}: ${newNote.value.uid}`;
|
|
|
|
newNote.value.date = new Date();
|
|
addNote(newNote.value);
|
|
emit('hide');
|
|
}
|
|
};
|
|
|
|
watch(() => newNote.value.type, () => {
|
|
if (newNote.value.type === 'query')
|
|
editorMode.value = 'sql';
|
|
else
|
|
editorMode.value = 'markdown';
|
|
});
|
|
|
|
newNote.value.cUid = selectedConnection.value;
|
|
|
|
if (selectedTag.value !== 'all')
|
|
newNote.value.type = selectedTag.value;
|
|
|
|
</script>
|