Added AND/OR toggle to alerts.

assets/components/alerts/add.vue

@@ -14,7 +14,17 @@
 		>
 			<div class="dialog-section">
 				<h3 class="dialog-heading">
-					When<span class="dialog-description">All to appear in the same scene</span>
+					When
+
+					<label class="dialog-description noselect">
+						<template v-if="all">Scene must match&nbsp;<strong>all</strong>&nbsp;fields</template>
+						<template v-else>Scene must match&nbsp;<strong>any</strong>&nbsp;field</template>
+
+						<Toggle
+							:checked="all"
+							@change="(checked) => all = checked"
+						/>
+					</label>
 				</h3>
 
 				<div class="alert-section">
@@ -34,7 +44,10 @@
 							:key="`actor-${actor.id}`"
 							class="actor"
 						>
-							<ActorPreview :actor="actor" />
+							<ActorPreview
+								:actor="actor"
+								target="_blank"
+							/>
 
 							<Icon
 								icon="cross3"
@@ -109,10 +122,15 @@
 
 					<div class="entities">
 						<div
-							v-if="entity"
+							v-for="(entity, index) in entities"
+							:key="`entity-${entity.id}`"
+							:class="{ invalid: all && index > 0 }"
 							class="entity"
 						>
-							<Entity :entity="entity" />
+							<Entity
+								:entity="entity"
+								target="_blank"
+							/>
 
 							<Icon
 								icon="cross3"
@@ -121,7 +139,7 @@
 							/>
 						</div>
 
-						<Tooltip v-if="!entity">
+						<Tooltip v-if="entities.length < 1 || !all">
 							<div class="entity placeholder">
 								Any channel
 
@@ -278,6 +296,7 @@
 import ActorPreview from '../actors/preview.vue';
 import Entity from '../entities/tile.vue';
 import Checkbox from '../form/checkbox.vue';
+import Toggle from '../form/toggle.vue';
 import Search from './search.vue';
 
 async function addAlert() {
@@ -285,10 +304,11 @@ async function addAlert() {
 
 	try {
 		await this.$store.dispatch('addAlert', {
+			all: this.all,
 			actors: this.actors.map((actor) => actor.id),
 			tags: this.tags.map((tag) => tag.id),
 			matches: this.matches,
-			entity: this.entity?.id,
+			entities: this.entities.map((entity) => entity.id),
 			notify: this.notify,
 			email: this.email,
 			stashes: this.stashes.map((stash) => stash.id),
@@ -309,7 +329,7 @@ function addActor(actor) {
 }
 
 function addEntity(entity) {
-	this.entity = entity;
+	this.entities = this.entities.concat(entity);
 	this.events.emit('blur');
 }
 
@@ -325,8 +345,8 @@ function removeActor(actor) {
 	this.actors = this.actors.filter((listedActor) => listedActor.id !== actor.id);
 }
 
-function removeEntity() {
-	this.entity = null;
+function removeEntity(entity) {
+	this.entities = this.entities.filter((alertEntity) => alertEntity.id !== entity.id);
 }
 
 function removeTag(tag) {
@@ -371,6 +391,7 @@ export default {
 		Checkbox,
 		Entity,
 		Search,
+		Toggle,
 	},
 	emits: ['close'],
 	data() {
@@ -378,7 +399,8 @@ export default {
 			error: null,
 			actors: [],
 			tags: [],
-			entity: null,
+			all: true,
+			entities: [],
 			matches: [],
 			matchProperty: 'title',
 			matchExpression: null,
@@ -424,9 +446,15 @@ export default {
 }
 
 .dialog-description {
+	display: flex;
+	align-items: center;
 	color: var(--shadow);
 	font-size: .9rem;
 	font-weight: normal;
+
+	.toggle-container {
+		margin-left: .5rem;
+	}
 }
 
 .dialog-error {
@@ -488,6 +516,11 @@ export default {
 	margin: 0 .5rem .5rem 0;
 }
 
+.entity.invalid {
+	opacity: .5;
+	pointer-events: none;
+}
+
 .entity .tile {
 	width: 10rem;
 	height: 2.5rem;