Added remaining elements to alert dialog.

pages/users/@username/+Page.vue

@@ -66,6 +66,56 @@
 					</li>
 				</ul>
 			</section>
+
+			<section
+				v-if="profile.id === user?.id"
+				class="profile-section"
+			>
+				<div class="section-header">
+					<h3 class="heading">Alerts</h3>
+
+					<button
+						class="button"
+						@click="showAlertDialog = true"
+					>
+						<Icon icon="plus3" />
+						<span class="button-label">New alert</span>
+					</button>
+				</div>
+
+				<table class="alerts">
+					<tbody>
+						<tr class="alerts-headers">
+							<th class="alerts-header">Actors</th>
+							<th class="alerts-header">Tags</th>
+							<th class="alerts-header">Entities</th>
+							<th class="alerts-header">Matches</th>
+						</tr>
+
+						<tr
+							v-for="alert in alerts"
+							:key="`alert-${alert.id}`"
+							class="alert"
+						>
+							<td class="alert-field">{{ alert.actors.map((actor) => actor.name).join(', ') }}</td>
+							<td class="alert-field">{{ alert.tags.map((tag) => tag.name).join(alert.and.tags ? ' + ' : ' | ') }}</td>
+							<td class="alert-field">{{ alert.entities.map((entity) => entity.name).join(', ') }}</td>
+							<td class="alert-field">{{ alert.matches.map((match) => match.expression).join(', ') }}</td>
+							<td class="alert-actions noselect">
+								<Icon
+									icon="bin"
+									@click="removeAlert(alert)"
+								/>
+							</td>
+						</tr>
+					</tbody>
+				</table>
+
+				<AlertDialog
+					v-if="showAlertDialog"
+					@close="showAlertDialog = false; reloadAlerts();"
+				/>
+			</section>
 		</div>
 	</div>
 </template>
@@ -74,20 +124,23 @@
 import { ref, inject } from 'vue';
 import { formatDistanceStrict } from 'date-fns';
 
-import { get, post } from '#/src/api.js';
+import { get, post, del } from '#/src/api.js';
 
 import StashTile from '#/components/stashes/tile.vue';
 import Dialog from '#/components/dialog/dialog.vue';
+import AlertDialog from '#/components/alerts/create.vue';
 
 const pageContext = inject('pageContext');
 const user = pageContext.user;
 const profile = ref(pageContext.pageProps.profile);
+const alerts = ref(pageContext.pageProps.alerts);
 
 const stashName = ref(null);
 const stashNameInput = ref(null);
 
 const done = ref(true);
 const showStashDialog = ref(false);
+const showAlertDialog = ref(false);
 
 async function reloadProfile() {
 	profile.value = await get(`/users/${profile.value.id}`);
@@ -100,20 +153,55 @@ async function createStash() {
 
 	done.value = false;
 
-	await post('/stashes', {
-		name: stashName.value,
-		public: false,
-	}, {
-		successFeedback: `Created stash '${stashName.value}'`,
-		errorFeedback: `Failed to create stash '${stashName.value}'`,
-		appendErrorMessage: true,
-	}).finally(() => { done.value = true; });
+	try {
+		await post('/stashes', {
+			name: stashName.value,
+			public: false,
+		}, {
+			successFeedback: `Created stash '${stashName.value}'`,
+			errorFeedback: `Failed to create stash '${stashName.value}'`,
+			appendErrorMessage: true,
+		});
+	} finally {
+		done.value = true;
+	}
 
 	showStashDialog.value = false;
 	stashName.value = null;
 
 	await reloadProfile();
 }
+
+async function reloadAlerts() {
+	alerts.value = await get('/alerts');
+}
+
+async function removeAlert(alert) {
+	if (done.value === false) {
+		return;
+	}
+
+	done.value = false;
+
+	const alertLabel = [
+		...alert.actors.map((actor) => actor.name),
+		...alert.tags.map((tag) => tag.name),
+		...alert.entities.map((entity) => entity.name),
+		...alert.matches.map((match) => match.expression),
+	].filter(Boolean).join(', ');
+
+	try {
+		await del(`/alerts/${alert.id}`, {
+			undoFeedback: `Removed alert for '${alertLabel}'`,
+			errorFeedback: `Failed to remove alert for '${alertLabel}'`,
+			appendErrorMessage: true,
+		});
+
+		await reloadAlerts();
+	} finally {
+		done.value = true;
+	}
+}
 </script>
 
 <style scoped>
@@ -193,6 +281,45 @@ async function createStash() {
 	padding: 0 .5rem 1rem .5rem;
 }
 
+.alerts {
+	width: 100%;
+	height: 0;
+}
+
+.alert {
+	&:nth-child(odd) {
+		background: var(--shadow-weak-40);
+	}
+
+	&:hover {
+		background: var(--shadow-weak-30);
+	}
+}
+
+.alerts-header {
+	text-align: left;
+}
+
+.alerts-header,
+.alert-field {
+	padding: .25rem .5rem;
+}
+
+.alert-actions {
+	height: 100%;
+
+	.icon {
+		height: 100%;
+		padding: 0 .25rem;
+		fill: var(--shadow);
+
+		&:hover {
+			cursor: pointer;
+			fill: var(--primary);
+		}
+	}
+}
+
 .dialog-body {
 	padding: 1rem;
 

pages/users/@username/+onBeforeRender.js

@@ -1,11 +1,17 @@
 import { render } from 'vike/abort'; /* eslint-disable-line import/extensions */
 
 import { fetchUser } from '#/src/users.js';
+import { fetchAlerts } from '#/src/alerts.js';
 
 export async function onBeforeRender(pageContext) {
-	const profile = await fetchUser(pageContext.routeParams.username, {}, pageContext.user);
+	const [profile, alerts] = await Promise.all([
+		fetchUser(pageContext.routeParams.username, {}, pageContext.user),
+		pageContext.routeParams.username === pageContext.user?.username
+			? fetchAlerts(pageContext.user)
+			: [],
+	]);
 
-	// console.log(profile);
+	console.log('out alerts', alerts);
 
 	if (!profile) {
 		throw render(404, `Cannot find user '${pageContext.routeParams.username}'.`);
@@ -16,6 +22,7 @@ export async function onBeforeRender(pageContext) {
 			title: profile.username,
 			pageProps: {
 				profile, // differentiate from authed 'user'
+				alerts,
 			},
 		},
 	};