Added tag actor editing.

components/edit/tags.vue

@@ -1,43 +1,56 @@
 <template>
-	<ul
-		class="tags nolist"
-		:class="{ disabled: !editing.has(item.key) }"
-	>
-		<li
-			v-for="tag in [...item.value, ...newTags]"
-			:key="`tag-${tag.id}`"
-			class="tag"
-			:class="{ deleted: edits.tags && !edits.tags.some((tagId) => tagId === tag.id) }"
+	<div class="tags-sections">
+		<div
+			v-for="actorTags in tags"
+			:key="`tags-${actorTags.actor?.slug || 'scene'}`"
+			class="tags-section"
 		>
-			<span class="tag-name">{{ tag.name }}</span>
-
-			<Icon
-				v-if="edits.tags && !edits.tags.some((tagId) => tagId === tag.id)"
-				icon="checkmark"
-				class="add"
-				@click="emit('tags', edits.tags.concat(tag.id))"
-			/>
-
-			<Icon
-				v-else
-				icon="cross2"
-				class="remove"
-				@click="emit('tags', edits.tags.filter((tagId) => tagId !== tag.id))"
-			/>
-		</li>
-
-		<li class="new">
-			<TagSearch
-				:disabled="!editing.has(item.key)"
-				@tag="addTag"
+			<ul
+				class="tags nolist"
+				:class="{ disabled: !editing.has(item.key) }"
 			>
-				<Icon
-					icon="plus3"
-					class="add"
-				/>
-			</TagSearch>
-		</li>
-	</ul>
+				<li
+					v-if="actorTags.actor"
+					class="tags-actor"
+				>{{ actorTags.actor.name }}:</li>
+
+				<li
+					v-for="tag in [...actorTags.tags, ...newTags.filter((newTag) => newTag.actorId === actorTags.actorId)]"
+					:key="`tag-${tag.id}`"
+					class="tag"
+					:class="{ deleted: edits.tags && !edits.tags.some((sceneTag) => sceneTag.id === tag.id && sceneTag.actorId === actorTags.actorId) }"
+				>
+					<span class="tag-name">{{ tag.name }}</span>
+
+					<Icon
+						v-if="edits.tags && !edits.tags.some((sceneTag) => sceneTag.id === tag.id && sceneTag.actorId === actorTags.actorId)"
+						icon="checkmark"
+						class="add"
+						@click="emit('tags', edits.tags.concat(tag))"
+					/>
+
+					<Icon
+						v-else
+						icon="cross2"
+						class="remove"
+						@click="emit('tags', edits.tags.filter((sceneTag) => !(sceneTag.id === tag.id && sceneTag.actorId === actorTags.actorId)))"
+					/>
+				</li>
+
+				<li class="new">
+					<TagSearch
+						:disabled="!editing.has(item.key)"
+						@tag="(tag) => addTag(tag, actorTags.actor)"
+					>
+						<Icon
+							icon="plus3"
+							class="add"
+						/>
+					</TagSearch>
+				</li>
+			</ul>
+		</div>
+	</div>
 </template>
 
 <script setup>
@@ -70,8 +83,23 @@ const props = defineProps({
 
 const emit = defineEmits(['tags']);
 
-function addTag(tag) {
-	if (props.edits.tags.some((tagId) => tagId === tag.id)) {
+const tags = [
+	{
+		tags: props.item.value.filter((tag) => tag.actorId === null),
+		actor: null,
+		actorId: null,
+	},
+	...props.scene.actors.map((actor) => ({
+		tags: props.item.value.filter((tag) => tag.actorId === actor.id),
+		actor,
+		actorId: actor?.id || null,
+	})),
+];
+
+function addTag(newTag, actor) {
+	const actorId = actor?.id || null;
+
+	if (props.edits.tags.some((sceneTag) => sceneTag.id === newTag.id && sceneTag.actorId === actorId)) {
 		events.emit('feedback', {
 			type: 'error',
 			message: 'Tag already added',
@@ -80,9 +108,13 @@ function addTag(tag) {
 		return;
 	}
 
-	newTags.value = newTags.value.concat(tag);
+	const newTagWithActorId = {
+		...newTag,
+		actorId,
+	};
 
-	emit('tags', props.edits.tags.concat(tag.id));
+	newTags.value = newTags.value.concat(newTagWithActorId);
+	emit('tags', props.edits.tags.concat(newTagWithActorId));
 }
 
 watch(() => props.scene, () => { newTags.value = []; });
@@ -116,7 +148,7 @@ watch(() => props.scene, () => { newTags.value = []; });
 		align-items: center;
 		margin-left: .25rem;
 
-		&:hover {
+		&:hover .icon {
 			box-shadow: 0 0 3px var(--shadow-weak-20);
 		}
 
@@ -129,6 +161,18 @@ watch(() => props.scene, () => { newTags.value = []; });
 	}
 }
 
+.tags-sections {
+	display: flex;
+	flex-direction: column;
+	gap: .75rem;
+	margin: .5rem 0;
+}
+
+.tags-actor {
+	margin-right: .5rem;
+	font-weight: bold;
+}
+
 .tag {
 	display: flex;
 	align-items: stretch;
@@ -145,9 +189,11 @@ watch(() => props.scene, () => { newTags.value = []; });
 .tag,
 .new {
 	.remove,
-	.add {
+	.add,
+	.actor {
 		height: auto;
 		padding: .25rem .3rem;
+		margin-left: .25rem;
 		border-radius: .25rem;
 		fill: var(--highlight-strong-10);