Added socials.

pages/actors/@actorId/edit/+Page.vue

@@ -217,47 +217,12 @@
 							</span>
 						</div>
 
-						<ul
-							v-if="item.type === 'list'"
-							class="list nolist"
-							:class="{ disabled: !editing.has(item.key) }"
-						>
-							<li
-								v-for="(value, index) in item.value"
-								:key="`${item.type}-${value}`"
-								class="list-item"
-								:class="{ deleted: !edits[item.key].some((listItem) => listItem.value === value.value || listItem.url === value.url) }"
-							>
-								<Icon
-									v-if="value.icon"
-									:icon="value.icon"
-									:class="`icon-social icon-${value.icon}`"
-								/>
-
-								<a
-									v-if="value.url"
-									:href="value.url"
-									target="_blank"
-									class="link"
-								>{{ value.url }}</a>
-
-								<template v-else>{{ value.value || value }}</template>
-
-								<Icon
-									v-if="!edits[item.key].some((listItem) => listItem.value === value.value || listItem.url === value.url)"
-									icon="checkmark"
-									class="add noselect"
-									@click="edits[item.key] = edits[item.key].concat(value)"
-								/>
-
-								<Icon
-									v-else
-									icon="cross2"
-									class="remove noselect"
-									@click="edits[item.key] = edits[item.key].filter((listItem, listIndex) => listIndex !== index)"
-								/>
-							</li>
-						</ul>
+						<EditSocials
+							v-if="item.type === 'socials'"
+							:edits="edits"
+							:editing="editing"
+							@socials="(socials) => edits.socials = socials"
+						/>
 
 						<EditPlace
 							v-if="item.type === 'place'"
@@ -373,6 +338,7 @@
 import { ref, computed, inject } from 'vue';
 import { format } from 'date-fns';
 
+import EditSocials from '#/components/edit/socials.vue';
 import EditPlace from '#/components/edit/place.vue';
 import EditFigure from '#/components/edit/figure.vue';
 import EditAugmentation from '#/components/edit/augmentation.vue';
@@ -423,16 +389,11 @@ const fields = computed(() => [
 			: null,
 		inline: true,
 	},
-	/*
 	{
 		key: 'socials',
-		type: 'list',
-		value: actor.value.socials.map((social) => ({
-			url: social.url,
-			icon: social.platform,
-		})),
+		type: 'socials',
+		value: actor.value.socials,
 	},
-	*/
 	{
 		key: 'origin',
 		type: 'place',
@@ -647,7 +608,7 @@ async function submit() {
 			actorId: actor.value.id,
 			edits: {
 				...Object.fromEntries(Array.from(editing.value).flatMap((key) => {
-					if (edits.value[key] && typeof edits.value[key] === 'object') {
+					if (edits.value[key] && typeof edits.value[key] === 'object' && !Array.isArray(edits.value[key])) {
 						return Object.entries(edits.value[key]).map(([valueKey, value]) => [keyMap[key]?.[valueKey] || valueKey, value]);
 					}
 
@@ -844,61 +805,6 @@ async function submit() {
 		}
 	}
 
-	.list {
-		&.disabled {
-			opacity: .5;
-		}
-	}
-
-	.list-item {
-		display: flex;
-		align-items: center;
-		border-radius: .25rem;
-		background: var(--background);
-		box-shadow: 0 0 3px var(--shadow-weak-30);
-
-		.icon-social {
-			margin: 0 .5rem;
-		}
-
-		&.deleted {
-			color: var(--glass);
-			text-decoration: line-through;
-
-			.icon.icon-social {
-				fill: var(--glass-weak-10);
-			}
-		}
-
-		.add,
-		.remove {
-			padding: .25rem .3rem;
-			margin-left: .5rem;
-			border-radius: .25rem;
-
-			&:hover {
-				fill: var(--text-light);
-				cursor: pointer;
-			}
-		}
-
-		.add {
-			fill: var(--success);
-
-			&:hover {
-				background: var(--success);
-			}
-		}
-
-		.remove {
-			fill: var(--error);
-
-			&:hover {
-				background: var(--error);
-			}
-		}
-	}
-
 	.avatars {
 		width: 100%;
 		display: flex;