mirror of https://github.com/Fabio286/antares.git
125 lines
3.8 KiB
Vue
125 lines
3.8 KiB
Vue
<template>
|
|
<ConfirmModal
|
|
size="resize"
|
|
:disable-autofocus="true"
|
|
:close-on-confirm="!!localNote.note.length"
|
|
:confirm-text="t('general.save')"
|
|
@confirm="updateNote"
|
|
@hide="$emit('hide')"
|
|
>
|
|
<template #header>
|
|
<div class="d-flex">
|
|
<BaseIcon
|
|
icon-name="mdiNoteEditOutline"
|
|
class="mr-1"
|
|
:size="24"
|
|
/> {{ t('application.editNote') }}
|
|
</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="localNote.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="localNote.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="localNote.type !== 'query'"
|
|
style="line-height: 1;"
|
|
class="text-gray"
|
|
>({{ t('application.markdownSupported') }})</small></label>
|
|
<BaseTextEditor
|
|
v-model="localNote.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 { inject, onBeforeMount, PropType, 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 { editNote } = useScratchpadStore();
|
|
|
|
const emit = defineEmits(['hide']);
|
|
|
|
const props = defineProps({
|
|
note: {
|
|
type: Object as PropType<ConnectionNote>,
|
|
required: true
|
|
}
|
|
});
|
|
|
|
const noteTags = inject<{code: TagCode; name: string}[]>('noteTags');
|
|
const connectionOptions = inject<{code: string; name: string}[]>('connectionOptions');
|
|
|
|
const editorMode = ref('markdown');
|
|
const localNote: Ref<ConnectionNote> = ref({
|
|
uid: 'dummy',
|
|
cUid: null,
|
|
title: undefined,
|
|
note: '',
|
|
date: new Date(),
|
|
type: 'note',
|
|
isArchived: false
|
|
});
|
|
|
|
const updateNote = () => {
|
|
if (localNote.value.note) {
|
|
if (!localNote.value.title)// Set a default title
|
|
localNote.value.title = `${localNote.value.type.toLocaleUpperCase()}: ${localNote.value.uid}`;
|
|
|
|
localNote.value.date = new Date();
|
|
editNote(localNote.value);
|
|
emit('hide');
|
|
}
|
|
};
|
|
|
|
watch(() => localNote.value.type, () => {
|
|
if (localNote.value.type === 'query')
|
|
editorMode.value = 'sql';
|
|
else
|
|
editorMode.value = 'markdown';
|
|
});
|
|
|
|
onBeforeMount(() => {
|
|
localNote.value = JSON.parse(JSON.stringify(props.note));
|
|
});
|
|
|
|
</script>
|