Added actor revision overviews to actor and user pages.

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

@@ -24,7 +24,7 @@
 
 				<li>
 					<a
-						:href="`/actor/revisions/${actor.id}/${actor.slug}`"
+						:href="`/actor/revs/${actor.id}/${actor.slug}`"
 						class="link"
 					>Go to actor revisions</a>
 				</li>
@@ -86,9 +86,20 @@
 							v-if="item.type === 'string'"
 							v-model="edits[item.key]"
 							class="string input"
+							:list="item.suggestions && `suggestions-${item.key}`"
 							:disabled="!editing.has(item.key)"
 						>
 
+						<datalist
+							v-if="item.suggestions"
+							:id="`suggestions-${item.key}`"
+						>
+							<option
+								v-for="(suggestion, index) in item.suggestions"
+								:key="`suggestion-${item.key}-${index}`"
+							>{{ suggestion }}</option>
+						</datalist>
+
 						<textarea
 							v-if="item.type === 'text'"
 							v-model="edits[item.key]"
@@ -485,38 +496,13 @@
 							class="avatars"
 							:class="{ disabled: !editing.has(item.key) }"
 						>
-							<div
+							<Avatar
 								v-for="avatar in item.options"
 								:key="`avatar-${avatar.id}`"
-								class="avatar noshrink"
+								:avatar="avatar"
 								:class="{ selected: edits[item.key] === avatar.id }"
 								@click="setAvatar(avatar.id)"
-							>
-								<img
-									:src="getPath(avatar, 'thumbnail')"
-									class="avatar-image"
-								>
-
-								<span
-									class="avatar-credit"
-									title="Credit"
-								>{{ avatar.credit }}</span>
-
-								<span class="avatar-meta">
-									<span title="Dimensions">{{ avatar.width }}x{{ avatar.height }}</span>
-									<span title="Sharpness">{{ avatar.sharpness.toFixed(2) }}</span>
-								</span>
-
-								<a
-									:href="getPath(avatar)"
-									target="_blank"
-									class="avatar-zoom"
-								>
-									<Icon
-										icon="search"
-									/>
-								</a>
-							</div>
+							/>
 						</div>
 					</div>
 				</li>
@@ -561,8 +547,7 @@
 import { ref, computed, inject } from 'vue';
 import { format } from 'date-fns';
 
-import getPath from '#/src/get-path.js';
-
+import Avatar from '#/components/edit/avatar.vue';
 import Checkbox from '#/components/form/checkbox.vue';
 
 import {
@@ -576,8 +561,6 @@ const user = pageContext.user;
 const countries = pageContext.pageProps.countries;
 const actor = ref(pageContext.pageProps.actor);
 
-console.log(actor.value);
-
 const topCountries = [
 	'AU',
 	'BR',
@@ -658,14 +641,14 @@ const fields = computed(() => [
 	{
 		key: 'height',
 		type: 'number',
-		value: actor.value.height.metric,
+		value: actor.value.height?.metric,
 		unit: 'cm',
 		inline: true,
 	},
 	{
 		key: 'weight',
 		type: 'number',
-		value: actor.value.weight.metric,
+		value: actor.value.weight?.metric,
 		unit: 'kg',
 		inline: true,
 	},
@@ -743,6 +726,22 @@ const fields = computed(() => [
 			description: actor.value.piercings,
 		},
 	},
+	{
+		key: 'agency',
+		type: 'string',
+		value: actor.value.agency,
+		suggestions: [
+			'101 Modeling',
+			'Adult Talent Managers (ATMLA)',
+			'The Bakery Talent',
+			'Coxxx Models',
+			'East Coast Talent (ECT)',
+			'Hussie Models',
+			'Invision Models',
+			'OC Modeling',
+			'Spiegler Girls',
+		],
+	},
 	{
 		key: 'penis',
 		type: 'penis',
@@ -780,30 +779,8 @@ function toggleField(item) {
 	}
 
 	editing.value.add(item.key);
-
-	/*
-	if (Array.isArray(item.value)) {
-		edits.value[item.key] = item.value.map((value) => value.hash || value.id);
-		return;
-	}
-
-	edits.value[item.key] = item.value;
-	*/
 }
 
-/*
-function setValue(item, event) {
-	console.log(item, event.target.value);
-
-	if (item.type === 'number') {
-		edits.value[item.key] = Number(event.target.value);
-		return;
-	}
-
-	edits.value[item.key] = event.target.value;
-}
-*/
-
 function setAvatar(avatarId) {
 	edits.value.avatar = avatarId;
 }
@@ -822,8 +799,6 @@ const keyMap = {
 };
 
 async function submit() {
-	console.log('SUBMIT', Array.from(editing.value), edits.value);
-
 	try {
 		await post('/revisions/actors', {
 			actorId: actor.value.id,
@@ -1014,75 +989,6 @@ async function submit() {
 	}
 }
 
-.avatar {
-	display: inline-block;
-	position: relative;
-	border: solid 2px transparent;
-	border-radius: .35rem;
-	box-shadow: 0 0 3px var(--shadow-weak-10);
-	margin: 2px; /* clear outline */
-	font-size: 0;
-	overflow: hidden;
-
-	&.selected {
-		border: solid 2px var(--primary);
-	}
-
-	&:hover {
-		/*
-		.avatar-meta,
-		.avatar-credit {
-			display: none;
-		}
-		*/
-
-		.icon {
-			fill: var(--text-light);
-		}
-	}
-}
-
-.avatar-image {
-	height: 10rem;
-}
-
-.avatar-zoom {
-	position: absolute;
-	top: 0;
-	right: 0;
-	z-index: 10;
-	padding: .25rem;
-
-	.icon {
-		fill: var(--highlight);
-	}
-}
-
-.avatar-meta,
-.avatar-credit {
-	position: absolute;
-	z-index: 10;
-	box-sizing: border-box;
-	padding: .15rem .25rem;
-	font-size: .7rem;
-	color: var(--text-light);
-	text-shadow: 1px 1px 0 var(--shadow-strong-30);
-	cursor: default;
-}
-
-.avatar-meta {
-	width: 100%;
-	display: flex;
-	justify-content: space-between;
-	bottom: 0;
-	left: 0;
-}
-
-.avatar-credit {
-	bottom: .75rem;
-	left: 0;
-}
-
 .item-actions {
 	.icon {
 		padding: .25rem 1rem;