traxxx-web/components/scenes/summaries.vue

<template>
	<div class="editor">
		<div class="editor-header">
			<select
				class="template-select input"
				@change="selectTemplate(Number($event.target.value), $event)"
			>
				<option
					v-for="storedTemplate in templates"
					:key="`template-${storedTemplate.id}`"
					:value="storedTemplate.id"
					:selected="selectedTemplate === storedTemplate.id"
				>{{ storedTemplate.name }}</option>

				<option
					v-if="selectedTemplate === null"
					:selected="selectedTemplate === null"
					disabled
				>Unsaved</option>
			</select>

			<div
				class="template-add"
				@click="add"
			>
				<button class="button">
					<Icon icon="file-plus2" />
					<span class="button-label">New template</span>
				</button>
			</div>
		</div>

		<textarea
			ref="input"
			v-model="template"
			height="3"
			class="input edit"
			@input="update"
			@blur="save(false)"
		/>

		<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"
				>Default</button>
			</div>

			<form
				class="actions save"
				@submit.prevent="save(true)"
			>
				<Icon
					v-if="selectedTemplate"
					icon="bin"
					class="remove"
					@click="remove"
				/>

				<div class="actions-save">
					<input
						v-model="templateName"
						class="input"
						placeholder="Name"
						required
					>

					<button
						class="button"
					>Save</button>
				</div>
			</form>
		</div>
	</div>
</template>

<script setup>
import { ref, inject, onMounted } from 'vue';
import { parse } from 'yaml';
import Cookies from 'js-cookie';

// import slugify from '#/utils/slugify.js';
import events from '#/src/events.js';
import { get, post, del } from '#/src/api.js';
import processSummaryTemplate from '#/utils/process-summary-template.js';

import defaultTemplate from '#/assets/summary.yaml?raw'; // eslint-disable-line import/no-unresolved

const pageContext = inject('pageContext');

const cookies = Cookies.withConverter({
	write: (value) => value,
});

const props = defineProps({
	release: {
		type: Object,
		default: null,
	},
});

const templates = ref(pageContext.assets.templates);
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 input = ref(null);
const changed = ref(false);

const templateName = ref(initialTemplate?.name || `custom_${Date.now()}`);

function getSummary() {
	return processSummaryTemplate(template.value, props.release);
}

const summary = ref(getSummary());

function selectTemplate(templateId) {
	selectedTemplate.value = templateId;

	const nextTemplate = templates.value.find((storedTemplate) => storedTemplate.id === templateId);

	template.value = nextTemplate.template;
	templateName.value = nextTemplate.name;
	summary.value = getSummary();

	cookies.set('selectedTemplate', String(templateId));
	window.location.href = `${window.location.origin}${window.location.pathname}?t=${nextTemplate.id}`;
}

function update() {
	hasError.value = false;
	changed.value = true;

	try {
		summary.value = getSummary();
	} catch (error) {
		hasError.value = true;
	}
}

async function save(explicit) {
	if (!explicit && !changed.value) {
		return;
	}

	try {
		parse(template.value);

		const createdTemplate = await post('/templates', {
			name: templateName.value,
			template: template.value,
		}, {
			successFeedback: `Saved summary template '${templateName.value}'`,
			errorFeedback: `Failed to save summary template '${templateName.value}'`,
		});

		changed.value = false;
		templates.value = await get(`/users/${pageContext.user.id}/templates`);

		selectTemplate(createdTemplate.id);
	} catch (error) {
		events.emit('feedback', {
			type: 'error',
			message: `Failed to save summary template '${templateName.value}': ${error.message}`,
		});
	}
}

function add() {
	selectedTemplate.value = null;
	template.value = '';
	templateName.value = `custom_${Date.now()}`;
	summary.value = '';

	input.value.focus();
}

async function remove() {
	if (confirm(`Are you sure you want to delete summary template ${templateName.value}?`)) { // eslint-disable-line no-restricted-globals, no-alert
		await del(`/templates/${selectedTemplate.value}`, {
			undoFeedback: `Deleted summary template '${templateName.value}'`,
			errorFeedback: `Failed to remove summary template '${templateName.value}'`,
		});

		templates.value = await get(`/users/${pageContext.user.id}/templates`);

		selectTemplate(templates.value.at(-1)?.id);
	}
}

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 to the default? 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',
		});
	}
}

onMounted(() => {
	window.addEventListener('beforeunload', (event) => {
		if (changed.value) {
			event.preventDefault();
		}
	});
});
</script>

<style scoped>
.editor {
	display: flex;
	flex-grow: 1;
	flex-direction: column;
	max-width: 100%;
}

.input {
	resize: none;
	background: var(--background);
}

.edit {
	flex-grow: 1;
	min-height: 10rem;
	resize: vertical;
}

.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 0;

	.input {
		flex-grow: 1;
		width: 0;
	}
}

.actions {
	display: flex;

	.button {
		align-items: center;
	}

	.button:not(:last-child) {
		margin-right: 1rem;
	}

	&.save {
		flex-grow: 1;
		justify-content: flex-end;

		.input {
			margin-right: 1rem;
		}
	}

	.icon {
		height: 100%;
		padding: 0 1rem;
		cursor: pointer;
		fill: var(--glass);

		&.remove:hover {
			fill: var(--error);
		}
	}
}

.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;
	overflow-x: auto;
}

.template-key {
	padding: .5rem .75rem;
	border-radius: .5rem;
	cursor: pointer;
	color: var(--glass-strong-20);
	font-size: .9rem;
	font-weight: bold;

	.icon {
		fill: var(--glass);
	}

	&.selected {
		background: var(--primary);
		color: var(--text-light);
	}

	&:hover:not(.selected) {
		color: var(--primary);

		.icon {
			fill: var(--primary);
		}
	}
}

.template-select {
	width: 0;
	flex-grow: 1;
	max-width: 20rem;
}

.template-add {
	font-size: 0; /* prevent icon jump */
	margin-left: .5rem;
	flex-shrink: 0;
}

@media(--compact) {
	.editor {
		padding: 0 1rem;
	}
}

@media(--small-20) {
	.editor {
		padding: 0 .5rem;
	}
}

@media(--small-30) {
	.dialog-actions {
		flex-direction: column;
	}

	.actions,
	.actions.save {
		justify-content: space-between;
	}
}
</style>