Moved summary template editor to profile page.
This commit is contained in:
@@ -138,6 +138,7 @@
|
||||
|
||||
<div class="alert-actions">
|
||||
<span
|
||||
v-tooltip="format(alert.createdAt, 'yyyy-MM-dd hh:mm')"
|
||||
class="alert-id"
|
||||
title="Alert ID"
|
||||
>#{{ alert.id }}</span>
|
||||
@@ -160,6 +161,7 @@
|
||||
|
||||
<script setup>
|
||||
import { ref, inject } from 'vue';
|
||||
import { format } from 'date-fns';
|
||||
|
||||
import AlertDialog from '#/components/alerts/create.vue';
|
||||
|
||||
@@ -180,7 +182,6 @@ async function removeAlert(alert) {
|
||||
return;
|
||||
}
|
||||
|
||||
console.log(JSON.stringify(alert, null, 4));
|
||||
if (!confirm(`Are you sure you want to remove alert #${alert.id}?`)) { // eslint-disable-line no-restricted-globals, no-alert
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -1,9 +1,6 @@
|
||||
<template>
|
||||
<Dialog
|
||||
title="Edit summary template"
|
||||
:confirm-close="hasChanged"
|
||||
>
|
||||
<div class="dialog-body">
|
||||
<div class="editor">
|
||||
<div class="editor-header">
|
||||
<ul class="templates nolist">
|
||||
<li
|
||||
v-for="storedTemplate in templates"
|
||||
@@ -12,57 +9,60 @@
|
||||
:class="{ selected: selectedTemplate === storedTemplate.id }"
|
||||
@click="selectTemplate(storedTemplate.id)"
|
||||
>{{ storedTemplate.name }}</li>
|
||||
|
||||
<li
|
||||
class="template-key add"
|
||||
@click="add"
|
||||
>
|
||||
<Icon
|
||||
icon="plus3"
|
||||
/>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<textarea
|
||||
ref="input"
|
||||
v-model="template"
|
||||
height="3"
|
||||
class="input edit"
|
||||
@input="update"
|
||||
/>
|
||||
<div
|
||||
class="template-add"
|
||||
@click="add"
|
||||
>
|
||||
<button class="button">
|
||||
<Icon icon="file-plus2" />
|
||||
<span class="button-label">New template</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<textarea
|
||||
:value="summary"
|
||||
class="input summary"
|
||||
:class="{ error: hasError }"
|
||||
wrap="soft"
|
||||
@click="$event.target.select()"
|
||||
/>
|
||||
<textarea
|
||||
ref="input"
|
||||
v-model="template"
|
||||
height="3"
|
||||
class="input edit"
|
||||
@input="update"
|
||||
/>
|
||||
|
||||
<div class="dialog-actions">
|
||||
<div class="actions">
|
||||
<button
|
||||
class="button"
|
||||
@click="copy"
|
||||
>Copy</button>
|
||||
<textarea
|
||||
:value="summary"
|
||||
class="input summary"
|
||||
:class="{ error: hasError }"
|
||||
wrap="soft"
|
||||
@click="$event.target.select()"
|
||||
/>
|
||||
|
||||
<button
|
||||
class="button"
|
||||
@click="reset"
|
||||
>Default</button>
|
||||
</div>
|
||||
<div class="dialog-actions">
|
||||
<div class="actions">
|
||||
<button
|
||||
class="button"
|
||||
@click="copy"
|
||||
>Copy</button>
|
||||
|
||||
<form
|
||||
class="actions save"
|
||||
@submit.prevent="save"
|
||||
>
|
||||
<Icon
|
||||
v-if="selectedTemplate"
|
||||
icon="bin"
|
||||
class="remove"
|
||||
@click="remove"
|
||||
/>
|
||||
<button
|
||||
class="button"
|
||||
@click="reset"
|
||||
>Default</button>
|
||||
</div>
|
||||
|
||||
<form
|
||||
class="actions save"
|
||||
@submit.prevent="save"
|
||||
>
|
||||
<Icon
|
||||
v-if="selectedTemplate"
|
||||
icon="bin"
|
||||
class="remove"
|
||||
@click="remove"
|
||||
/>
|
||||
|
||||
<div class="actions-save">
|
||||
<input
|
||||
v-model="templateName"
|
||||
class="input"
|
||||
@@ -73,10 +73,10 @@
|
||||
<button
|
||||
class="button"
|
||||
>Save</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</Dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
@@ -89,11 +89,9 @@ import events from '#/src/events.js';
|
||||
import { get, post, del } from '#/src/api.js';
|
||||
import processSummaryTemplate from '#/utils/process-summary-template.js';
|
||||
|
||||
import Dialog from '#/components/dialog/dialog.vue';
|
||||
|
||||
import defaultTemplate from '#/assets/summary.yaml?raw'; // eslint-disable-line import/no-unresolved
|
||||
|
||||
const emit = defineEmits(['event']);
|
||||
const emit = defineEmits(['event', 'changed']);
|
||||
|
||||
const pageContext = inject('pageContext');
|
||||
|
||||
@@ -106,20 +104,15 @@ const props = defineProps({
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
selected: {
|
||||
type: Number,
|
||||
default: null,
|
||||
},
|
||||
});
|
||||
|
||||
const templates = ref(pageContext.assets.templates);
|
||||
const selectedTemplate = ref(props.selected || templates.value.at(0)?.id || null);
|
||||
const selectedTemplate = ref(Number(pageContext.urlParsed.search.t) || templates.value.at(0)?.id || null);
|
||||
|
||||
const initialTemplate = templates.value.find((storedTemplate) => storedTemplate.id === selectedTemplate.value) || null;
|
||||
|
||||
const template = ref(initialTemplate?.template || defaultTemplate);
|
||||
const hasError = ref(false);
|
||||
const hasChanged = ref(false);
|
||||
const input = ref(null);
|
||||
|
||||
const templateName = ref(initialTemplate?.name || `custom_${Date.now()}`);
|
||||
@@ -149,7 +142,8 @@ function selectTemplate(templateId) {
|
||||
|
||||
function update() {
|
||||
hasError.value = false;
|
||||
hasChanged.value = true;
|
||||
|
||||
emit('changed', true);
|
||||
|
||||
try {
|
||||
summary.value = getSummary();
|
||||
@@ -161,8 +155,7 @@ function update() {
|
||||
async function save() {
|
||||
try {
|
||||
parse(template.value);
|
||||
|
||||
hasChanged.value = false;
|
||||
emit('changed', false);
|
||||
|
||||
const createdTemplate = await post('/templates', {
|
||||
name: templateName.value,
|
||||
@@ -228,23 +221,22 @@ function reset() {
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
:deep(.dialog-container .dialog) {
|
||||
background: red;
|
||||
}
|
||||
|
||||
.dialog-body {
|
||||
.editor {
|
||||
display: flex;
|
||||
width: 50rem;
|
||||
flex-grow: 1;
|
||||
flex-direction: column;
|
||||
max-width: 100%;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.input {
|
||||
resize: none;
|
||||
background: var(--background);
|
||||
}
|
||||
|
||||
.edit {
|
||||
flex-grow: 1;
|
||||
min-height: 10rem;
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
.summary {
|
||||
@@ -266,7 +258,6 @@ function reset() {
|
||||
.input {
|
||||
flex-grow: 1;
|
||||
width: 0;
|
||||
max-width: 10rem;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -298,17 +289,31 @@ function reset() {
|
||||
}
|
||||
}
|
||||
|
||||
.actions-save {
|
||||
display: flex;
|
||||
width: 15rem;
|
||||
}
|
||||
|
||||
.editor-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: .5rem 0;
|
||||
}
|
||||
|
||||
.templates {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: .5rem;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.template-key {
|
||||
padding: .25rem .5rem;
|
||||
border-radius: .25rem;
|
||||
padding: .5rem .75rem;
|
||||
border-radius: .5rem;
|
||||
cursor: pointer;
|
||||
color: var(--glass-strong-20);
|
||||
font-size: .9rem;
|
||||
font-weight: bold;
|
||||
|
||||
.icon {
|
||||
fill: var(--glass);
|
||||
@@ -327,4 +332,20 @@ function reset() {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.template-add {
|
||||
font-size: 0; /* prevent icon jump */
|
||||
margin-left: .5rem;
|
||||
}
|
||||
|
||||
@media(--small-30) {
|
||||
.dialog-actions {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.actions,
|
||||
.actions.save {
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user