traxxx-web/components/scenes/edit-summary.vue

<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>