Moved summary template editor to profile page.

assets/img/icons/file-plus.svg

@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+<path d="M14.341 3.579c-0.347-0.473-0.831-1.027-1.362-1.558s-1.085-1.015-1.558-1.362c-0.806-0.591-1.197-0.659-1.421-0.659h-7.75c-0.689 0-1.25 0.561-1.25 1.25v13.5c0 0.689 0.561 1.25 1.25 1.25h6.25c0.276 0 0.5-0.224 0.5-0.5s-0.224-0.5-0.5-0.5h-6.25c-0.135 0-0.25-0.114-0.25-0.25v-13.5c0-0.135 0.115-0.25 0.25-0.25 0 0 7.749-0 7.75 0v3.5c0 0.276 0.224 0.5 0.5 0.5h3.5v3.5c0 0.276 0.224 0.5 0.5 0.5s0.5-0.224 0.5-0.5v-3.5c0-0.224-0.068-0.615-0.659-1.421zM11 4v-2.405c0.359 0.278 0.792 0.654 1.271 1.134s0.856 0.912 1.134 1.271h-2.406z"></path>
+<path d="M16 12h-2v-2h-2v2h-2v2h2v2h2v-2h2z"></path>
+</svg>

assets/img/icons/file-plus2.svg

@@ -0,0 +1,6 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+<path d="M11 4h3.627c-0.078-0.126-0.172-0.266-0.286-0.421-0.347-0.473-0.831-1.027-1.362-1.558s-1.085-1.015-1.558-1.362c-0.155-0.114-0.295-0.208-0.421-0.286v3.627z"></path>
+<path d="M7.875 12.5c0-2.55 2.075-4.625 4.625-4.625 0.92 0 1.779 0.27 2.5 0.736v-3.611h-4.5c-0.276 0-0.5-0.224-0.5-0.5v-4.5h-7.75c-0.689 0-1.25 0.561-1.25 1.25v13.5c0 0.689 0.561 1.25 1.25 1.25h7.23c-0.982-0.849-1.605-2.103-1.605-3.5z"></path>
+<path d="M12.5 9c-1.933 0-3.5 1.567-3.5 3.5s1.567 3.5 3.5 3.5c1.933 0 3.5-1.567 3.5-3.5s-1.567-3.5-3.5-3.5zM13 13v2h-1v-2h-2v-1h2v-2h1v2h2v1h-2z"></path>
+</svg>

components/alerts/alerts.vue

@@ -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;
 	}

components/scenes/summaries.vue

@@ -1,9 +1,6 @@
 <template>
-	<Dialog
+	<div class="editor">
-		title="Edit summary template"
+		<div class="editor-header">
-		:confirm-close="hasChanged"
-	>
-		<div class="dialog-body">
 			<ul class="templates nolist">
 				<li
 					v-for="storedTemplate in templates"
@@ -12,16 +9,18 @@
 					:class="{ selected: selectedTemplate === storedTemplate.id }"
 					@click="selectTemplate(storedTemplate.id)"
 				>{{ storedTemplate.name }}</li>
+			</ul>
 
-				<li
+			<div
-					class="template-key add"
+				class="template-add"
 				@click="add"
 			>
-					<Icon
+				<button class="button">
-						icon="plus3"
+					<Icon icon="file-plus2" />
-					/>
+					<span class="button-label">New template</span>
-				</li>
+				</button>
-			</ul>
+			</div>
+		</div>
 
 		<textarea
 			ref="input"
@@ -63,6 +62,7 @@
 					@click="remove"
 				/>
 
+				<div class="actions-save">
 					<input
 						v-model="templateName"
 						class="input"
@@ -73,10 +73,10 @@
 					<button
 						class="button"
 					>Save</button>
+				</div>
 			</form>
 		</div>
 	</div>
-	</Dialog>
 </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);
-
+		emit('changed', false);
-		hasChanged.value = false;
 
 		const createdTemplate = await post('/templates', {
 			name: templateName.value,
@@ -228,23 +221,22 @@ function reset() {
 </script>
 
 <style scoped>
-:deep(.dialog-container .dialog) {
+.editor {
-	background: red;
-}
-
-.dialog-body {
 	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;
+	padding: .5rem .75rem;
-	border-radius: .25rem;
+	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>

pages/scene/+Page.vue

@@ -260,13 +260,19 @@
 							@focus="$event.target.select()"
 						>
 
-						<Icon
+						<a
 							v-if="user"
-							v-tooltip="'Edit template'"
+							class="icon-link"
+							target="_blank"
+							:href="`/user/${user.username}/summaries?t=${selectedTemplate}`"
+						>
+							<Icon
+								v-tooltip="'Edit templates'"
 								icon="pencil5"
 								class="edit"
 								@click="showSummaryDialog = true"
 							/>
+						</a>
 
 						<Icon
 							v-tooltip="'Copy to clipboard'"
@@ -293,14 +299,6 @@
 				</div>
 			</div>
 		</div>
-
-		<EditSummary
-			v-if="showSummaryDialog"
-			:release="scene"
-			:selected="selectedTemplate"
-			@close="showSummaryDialog = false"
-			@event="({ type, data }) => type === 'select' && selectTemplate(data, false)"
-		/>
 	</div>
 </template>
 
@@ -318,7 +316,6 @@ import MovieTile from '#/components/movies/tile.vue';
 import SerieTile from '#/components/series/tile.vue';
 import Heart from '#/components/stashes/heart.vue';
 import Campaign from '#/components/campaigns/campaign.vue';
-import EditSummary from '#/components/scenes/edit-summary.vue';
 
 import defaultTemplate from '#/assets/summary.yaml?raw'; // eslint-disable-line import/no-unresolved
 
@@ -648,6 +645,11 @@ function copySummary() {
 	}
 }
 
+.icon-link {
+	display: flex;
+	height: auto;
+}
+
 .compact-show {
 	display: none;
 }

pages/users/@username/+Page.vue

@@ -18,6 +18,7 @@
 			<nav
 				v-if="profile.id === user?.id"
 				class="domains"
+				@click="confirmUnsaved"
 			>
 				<a
 					:href="`/user/${profile.username}/stashes`"
@@ -30,10 +31,22 @@
 					class="domain nolink"
 					:class="{ active: domain === 'alerts' }"
 				>Alerts</a>
+
+				<a
+					:href="`/user/${profile.username}/summaries`"
+					class="domain nolink"
+					:class="{ active: domain === 'summaries' }"
+				>Summaries</a>
 			</nav>
 
 			<Stashes v-if="domain === 'stashes'" />
 			<Alerts v-if="domain === 'alerts' && profile.id === user?.id" />
+
+			<Summaries
+				v-if="domain === 'summaries' && profile.id === user?.id"
+				:release="mockupRelease"
+				@changed="(changed) => summaryChanged = changed"
+			/>
 		</div>
 	</div>
 </template>
@@ -44,11 +57,52 @@ import { formatDistanceStrict } from 'date-fns';
 
 import Stashes from '#/components/stashes/stashes.vue';
 import Alerts from '#/components/alerts/alerts.vue';
+import Summaries from '#/components/scenes/summaries.vue';
 
 const pageContext = inject('pageContext');
 const domain = pageContext.routeParams.domain;
 const user = pageContext.user;
 const profile = ref(pageContext.pageProps.profile);
+
+const summaryChanged = ref(false);
+
+const mockupRelease = {
+	id: 1,
+	title: 'Nut For Human Consumption',
+	effectiveDate: new Date(),
+	actors: [
+		{
+			name: 'Chanel Chakra',
+			gender: 'female',
+		},
+		{
+			name: 'Mo The Fucker',
+			gender: 'male',
+		},
+	],
+	tags: [
+		{ name: 'anal' },
+		{ name: 'facefucking' },
+		{ name: 'deepthroat' },
+		{ name: 'blowjob' },
+		{ name: 'facial' },
+	],
+	movies: [{
+		title: 'Best Of Traxxx 23',
+	}],
+	channel: {
+		name: 'Traxxxed',
+	},
+	network: {
+		name: 'Traxxx',
+	},
+};
+
+function confirmUnsaved(event) {
+	if (summaryChanged.value && !confirm('You have unchanged changes in your summary editor, are you sure you want to leave the page?')) { // eslint-disable-line no-restricted-globals, no-alert
+		event.preventDefault();
+	}
+}
 </script>
 
 <style>
@@ -87,8 +141,11 @@ const profile = ref(pageContext.pageProps.profile);
 }
 
 .profile {
+	display: flex;
+	flex-direction: column;
 	width: 1200px;
 	max-width: 100%;
+	margin: 0 1rem;
 }
 
 .profile-header {
@@ -96,7 +153,6 @@ const profile = ref(pageContext.pageProps.profile);
 	justify-content: space-between;
 	align-items: center;
 	padding: .5rem 1rem;
-	margin-bottom: .5rem;
     color: var(--highlight-strong-30);
     background: var(--shadow-strong-30);
 	border-radius: 0 0 .5rem .5rem;
@@ -136,7 +192,7 @@ const profile = ref(pageContext.pageProps.profile);
 	display: flex;
 	gap: .5rem;
 	padding: .5rem 0;
-	margin-top: .5rem;
+	margin-top: .25rem;
 }
 
 .domain {
@@ -154,6 +210,10 @@ const profile = ref(pageContext.pageProps.profile);
 }
 
 @media(--small-30) {
+	.profile {
+		margin: 0 .5rem;
+	}
+
 	.age .icon {
 		display: none;
 	}

pages/users/@username/+route.js

@@ -1,6 +1,5 @@
 import { redirect } from 'vike/abort'; /* eslint-disable-line import/extensions */
 import { match } from 'path-to-regexp';
-// import { resolveRoute } from 'vike/routing'; // eslint-disable-line import/extensions
 
 const path = '/user/:username/:domain?';
 const urlMatch = match(path, { decode: decodeURIComponent });

utils/process-summary-template.js

@@ -39,8 +39,8 @@ const propProcessors = {
 			return true;
 		})
 		.map((tag) => tag.name),
-	movie: (sceneInfo) => sceneInfo.movies[0]?.title,
+	movie: (sceneInfo) => sceneInfo.movies?.[0]?.title,
-	date: (sceneInfo, options) => format(sceneInfo.effectiveDate, options.format || 'yyyy-MM-dd'),
+	date: (sceneInfo, options) => (sceneInfo.effectiveDate ? format(sceneInfo.effectiveDate, options.format || 'yyyy-MM-dd') : ''),
 };
 
 function curateValue(value, item) {