Added summary template editor, improved summary template format and options.

2024-08-25 02:51:16 +02:00
parent d2c9b447ee
commit e2cffbdde2
6 changed files with 313 additions and 56 deletions
--- a/components/scenes/edit-summary.vue
+++ b/components/scenes/edit-summary.vue
@@ -0,0 +1,186 @@
+<template>
+	<Dialog title="Edit summary template">
+		<div class="dialog-body">
+			<textarea
+				v-model="template"
+				height="3"
+				class="input edit"
+				@input="update"
+			/>
+
+			<textarea
+				:value="summary"
+				class="input summary"
+				:class="{ error: hasError }"
+				wrap="soft"
+				@click="$event.target.select()"
+			/>
+
+			<div class="dialog-actions">
+				<div class="actions">
+					<button
+						class="button"
+						@click="copy"
+					>Copy</button>
+
+					<button
+						class="button"
+						@click="reset"
+					>Reset</button>
+				</div>
+
+				<div class="actions save">
+					<!--
+					<input
+						class="input"
+						placeholder="Name"
+					>
+					-->
+
+					<button
+						class="button"
+						@click="save"
+					>Save</button>
+				</div>
+			</div>
+		</div>
+	</Dialog>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { parse } from 'yaml';
+import Cookies from 'js-cookie';
+
+import events from '#/src/events.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 cookies = Cookies.withConverter({
+	write: (value) => value,
+});
+
+const props = defineProps({
+	release: {
+		type: Object,
+		default: null,
+	},
+});
+
+const storedTemplate = cookies.get('summary');
+const template = ref(storedTemplate ? JSON.parse(storedTemplate)?.custom : defaultTemplate);
+const hasError = ref(false);
+
+function getSummary() {
+	return processSummaryTemplate(props.release, parse(template.value));
+}
+
+const summary = ref(getSummary());
+
+function update() {
+	hasError.value = false;
+
+	try {
+		summary.value = getSummary();
+	} catch (error) {
+		hasError.value = true;
+	}
+}
+
+function save() {
+	try {
+		parse(template.value);
+
+		cookies.set('summary', JSON.stringify({ custom: template.value }), { expires: 400 }); // 100 years from now
+
+		events.emit('feedback', {
+			type: 'success',
+			message: 'Saved summary template',
+		});
+	} catch (error) {
+		events.emit('feedback', {
+			type: 'error',
+			message: `Failed to save summary template: ${error.message}`,
+		});
+	}
+}
+
+function copy() {
+	navigator.clipboard.writeText(summary.value);
+
+	events.emit('feedback', {
+		type: 'success',
+		message: 'Summary copied to clipboard',
+	});
+}
+
+function reset() {
+	if (confirm('Are you sure you want to reset the summary template? Your custom template will be discarded.')) { // eslint-disable-line no-restricted-globals, no-alert
+		template.value = defaultTemplate;
+
+		update();
+
+		events.emit('feedback', {
+			type: 'undo',
+			message: 'Reset summary template',
+		});
+	}
+}
+</script>
+
+<style scoped>
+:deep(.dialog-container .dialog) {
+	background: red;
+}
+
+.dialog-body {
+	display: flex;
+	width: 50rem;
+	max-width: 100%;
+	height: 100vh;
+}
+
+.input {
+	resize: none;
+}
+
+.edit {
+	flex-grow: 1;
+}
+
+.summary {
+	min-height: 4rem;
+	flex-shrink: 0;
+	line-height: 1.5;
+
+	&.error {
+		background: var(--background-error);
+	}
+}
+
+.dialog-actions {
+	display: flex;
+	justify-content: space-between;;
+	gap: 1rem;
+	padding: 1rem;
+
+	.input {
+		flex-grow: 1;
+		width: 0;
+		max-width: 10rem;
+	}
+}
+
+.actions {
+	display: flex;
+	gap: 1rem;
+
+	&.save {
+		flex-grow: 1;
+		justify-content: flex-end;
+	}
+}
+</style>