Added new actor dialog to admin panel, removed create mode from actor edit page.

pages/actors/edit/+Page.vue

@@ -373,8 +373,6 @@ import {
 	post,
 } from '#/src/api.js';
 
-import events from '#/src/events.js';
-
 const pageContext = inject('pageContext');
 
 const user = pageContext.user;
@@ -642,48 +640,7 @@ const groupMap = {
 	weight: 'size',
 };
 
-async function submitCreate() {
-	submitting.value = true;
-
-	try {
-		const newActor = {
-			actor: Object.fromEntries(Array.from(['name', 'gender']).flatMap((key) => {
-				if (!edits.value[key]) {
-					throw new Error(`Missing ${key}`);
-				}
-
-				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]);
-				}
-
-				return [[key, edits.value[key]]];
-			})),
-			comment: comment.value,
-		};
-
-		const { actor: createdActor } = await post('/actors', newActor, {
-			successFeedback: 'Actor has been added.',
-			appendErrorMessage: true,
-		});
-
-		actor.value = createdActor;
-	} catch (error) {
-		events.emit('feedback', {
-			type: 'error',
-			message: error.message,
-		});
-	}
-
-	submitting.value = false;
-	submitted.value = true;
-}
-
 async function submit() {
-	if (!actor.value) {
-		submitCreate();
-		return;
-	}
-
 	try {
 		submitting.value = true;
 

pages/actors/edit/+route.js

@@ -2,7 +2,7 @@
 // import { redirect } from 'vike/abort'; /* eslint-disable-line import/extensions */
 import { match } from 'path-to-regexp';
 
-const path = '/actor/(edit|new)/:actorId?/:actorSlug?';
+const path = '/actor/edit/:actorId/:actorSlug?';
 const urlMatch = match(path, { decode: decodeURIComponent });
 
 export default (pageContext) => {

pages/admin/actors/+Page.vue

@@ -21,6 +21,11 @@
 					:disabled="selectedActors.size === 0"
 					@click="showMergeDialog = true"
 				><Icon icon="make-group" />Merge</button>
+
+				<button
+					class="button"
+					@click="showAddDialog = true"
+				><Icon icon="plus3" />Add actor</button>
 			</div>
 		</div>
 
@@ -84,6 +89,17 @@
 								@change="(isChecked) => selectActors(actor, isChecked, index)"
 							/>
 
+							<a
+								:href="`/actor/edit/${actor.id}/${actor.slug}`"
+								target="_blank"
+							>
+								<Icon
+									v-tooltip="'Edit bio'"
+									icon="pencil5"
+									class="actor-action action-merge"
+								/>
+							</a>
+
 							<Icon
 								v-tooltip="'Merge'"
 								icon="make-group"
@@ -104,11 +120,16 @@
 			</tbody>
 		</table>
 
-		<Merge
+		<MergeActors
 			v-if="showMergeDialog"
 			:actors="activeActor ? [activeActor] : actors.filter((actor) => selectedActors.has(actor.id))"
 			@close="showMergeDialog = false; activeActor = null;"
 		/>
+
+		<AddActor
+			v-if="showAddDialog"
+			@close="showAddDialog = false"
+		/>
 	</Admin>
 </template>
 
@@ -117,7 +138,8 @@ import { ref, inject, onMounted } from 'vue';
 
 import Admin from '#/components/admin/admin.vue';
 import Checkbox from '#/components/form/checkbox.vue';
-import Merge from '#/components/actors/merge.vue';
+import MergeActors from '#/components/actors/merge.vue';
+import AddActor from '#/components/actors/add.vue';
 
 import getPath from '#/src/get-path.js';
 import navigate from '#/src/navigate.js';
@@ -133,6 +155,7 @@ const actorQuery = ref(urlParsed.search.q || null);
 const lastSelectedIndex = ref(null);
 const holdingShift = ref(false);
 const showMergeDialog = ref(false);
+const showAddDialog = ref(false);
 
 function selectActors(selectedActor, isChecked, index) {
 	const [start, end] = holdingShift.value
@@ -155,7 +178,7 @@ function selectActors(selectedActor, isChecked, index) {
 }
 
 async function searchActors() {
-	navigate('/admin/actors', { q: actorQuery.value }, { redirect: true });
+	navigate('/admin/actors', { q: actorQuery.value || undefined }, { redirect: true });
 }
 
 onMounted(() => {
@@ -192,7 +215,9 @@ onMounted(() => {
 .header-actions {
 	display: flex;
 	align-items: center;
+	justify-content: flex-end;
 	gap: .5rem;
+	flex-grow: 1;
 }
 
 .actors-header tr {

pages/admin/actors/+onBeforeRender.js

@@ -12,7 +12,7 @@ export default async function onBeforeRender(pageContext) {
 		query: pageContext.urlParsed.search.q,
 	}, {
 		limit: 100,
-		// order: pageContext.urlParsed.search.order?.split('.') || ['likes', 'desc'],
+		order: pageContext.urlParsed.search.order?.split('.') || ['likes', 'desc'],
 	}, pageContext.user);
 
 	return {