Added actors admin panel with bulk merge. Fixed merge failing if source and target actor have conflicting network profiles.
This commit is contained in:
@@ -3,6 +3,13 @@
|
||||
<h2 class="heading">Admin Panel</h2>
|
||||
|
||||
<ul class="menu">
|
||||
<li>
|
||||
<a
|
||||
href="/admin/actors"
|
||||
class="link"
|
||||
>Actors</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a
|
||||
href="/admin/revisions/scenes"
|
||||
|
||||
305
pages/admin/actors/+Page.vue
Normal file
305
pages/admin/actors/+Page.vue
Normal file
@@ -0,0 +1,305 @@
|
||||
<template>
|
||||
<Admin class="page">
|
||||
<div class="header">
|
||||
<input
|
||||
v-model="actorQuery"
|
||||
type="search"
|
||||
placeholder="Search actors"
|
||||
class="input search"
|
||||
@search="searchActors"
|
||||
>
|
||||
|
||||
<div class="header-actions">
|
||||
<button
|
||||
class="button"
|
||||
:disabled="selectedActors.size === 0"
|
||||
@click="selectedActors = new Set()"
|
||||
><Icon icon="cancel-square" />Deselect</button>
|
||||
|
||||
<button
|
||||
class="button"
|
||||
:disabled="selectedActors.size === 0"
|
||||
@click="showMergeDialog = true"
|
||||
><Icon icon="make-group" />Merge</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<table class="actors">
|
||||
<thead class="actors-header">
|
||||
<tr>
|
||||
<th class="actor-id">ID</th>
|
||||
<th class="actor-name">Entity</th>
|
||||
<th class="actor-avatar">Avatar</th>
|
||||
<th class="actor-name">Name</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody class="actors-body">
|
||||
<tr
|
||||
v-for="(actor, index) in actors"
|
||||
:key="`actor-${actor.id}`"
|
||||
class="actor"
|
||||
>
|
||||
<td class="actor-id ellipsis">{{ actor.id }}</td>
|
||||
|
||||
<td
|
||||
v-tooltip="actor.entity?.name || 'Global'"
|
||||
class="actor-entity ellipsis"
|
||||
>
|
||||
<img
|
||||
v-if="actor.entity"
|
||||
:src="`/logos/${actor.entity.slug}/favicon_dark.png`"
|
||||
class="actor-favicon"
|
||||
>
|
||||
|
||||
<Icon
|
||||
v-else
|
||||
icon="device_hub"
|
||||
class="actor-global"
|
||||
/>
|
||||
</td>
|
||||
|
||||
<td class="actor-avatar">
|
||||
<img
|
||||
v-if="actor.avatar"
|
||||
:src="getPath(actor.avatar, 'lazy')"
|
||||
loading="lazy"
|
||||
class="avatar"
|
||||
>
|
||||
|
||||
<img
|
||||
v-if="actor.avatar"
|
||||
:src="getPath(actor.avatar)"
|
||||
loading="lazy"
|
||||
class="avatar-zoom"
|
||||
>
|
||||
</td>
|
||||
|
||||
<td class="actor-name ellipsis">{{ actor.name }}</td>
|
||||
|
||||
<td class="actor-actions">
|
||||
<div class="actions">
|
||||
<Checkbox
|
||||
:checked="selectedActors.has(actor.id)"
|
||||
@change="(isChecked) => selectActors(actor, isChecked, index)"
|
||||
/>
|
||||
|
||||
<Icon
|
||||
v-tooltip="'Merge'"
|
||||
icon="make-group"
|
||||
class="actor-action action-merge"
|
||||
/>
|
||||
|
||||
<Icon
|
||||
v-tooltip="'Delete'"
|
||||
icon="bin"
|
||||
class="actor-action action-delete"
|
||||
/>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<Merge
|
||||
v-if="showMergeDialog"
|
||||
:actor="actors[0]"
|
||||
:actors="actors.filter((actor) => selectedActors.has(actor.id))"
|
||||
@close="showMergeDialog = false"
|
||||
/>
|
||||
</Admin>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
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 getPath from '#/src/get-path.js';
|
||||
import navigate from '#/src/navigate.js';
|
||||
// import { get } from '#/src/api.js';
|
||||
|
||||
const { pageProps, urlParsed } = inject('pageContext');
|
||||
|
||||
const actors = ref(pageProps.actors);
|
||||
const selectedActors = ref(new Set([]));
|
||||
const actorQuery = ref(urlParsed.search.q || null);
|
||||
|
||||
const lastSelectedIndex = ref(null);
|
||||
const holdingShift = ref(false);
|
||||
const showMergeDialog = ref(false);
|
||||
|
||||
console.log(actors.value);
|
||||
|
||||
function selectActors(selectedActor, isChecked, index) {
|
||||
const [start, end] = holdingShift.value
|
||||
? [index, lastSelectedIndex.value].toSorted((indexA, indexB) => indexA - indexB)
|
||||
: [index, index];
|
||||
|
||||
const actorIds = actors.value
|
||||
.slice(start, end + 1)
|
||||
.map((actor) => actor.id);
|
||||
|
||||
actorIds.forEach((actorId) => {
|
||||
if (isChecked) {
|
||||
selectedActors.value.add(actorId);
|
||||
} else {
|
||||
selectedActors.value.delete(actorId);
|
||||
}
|
||||
});
|
||||
|
||||
lastSelectedIndex.value = index;
|
||||
}
|
||||
|
||||
async function searchActors() {
|
||||
navigate('/admin/actors', { q: actorQuery.value }, { redirect: true });
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
window.addEventListener('keydown', (event) => {
|
||||
if (event.key === 'Shift') {
|
||||
holdingShift.value = true;
|
||||
}
|
||||
});
|
||||
|
||||
window.addEventListener('keyup', (event) => {
|
||||
if (event.key === 'Shift') {
|
||||
holdingShift.value = false;
|
||||
}
|
||||
});
|
||||
|
||||
window.addEventListener('blur', () => {
|
||||
holdingShift.value = false;
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.search {
|
||||
max-width: 20rem;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.header-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: .5rem;
|
||||
}
|
||||
|
||||
.actors-header tr {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.actors, .actors th, .actors td {
|
||||
border-collapse: collapse;
|
||||
padding: .5rem;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.actor {
|
||||
&:nth-child(2n) {
|
||||
background: var(--glass-weak-50);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: var(--glass-weak-40);
|
||||
}
|
||||
}
|
||||
|
||||
.actor-id {
|
||||
width: 6rem;
|
||||
font-family: monospace;
|
||||
font-size: 1rem;
|
||||
user-select: all;
|
||||
}
|
||||
|
||||
.actor-entity {
|
||||
width: 2rem;
|
||||
}
|
||||
|
||||
.actor-favicon {
|
||||
width: 1rem;
|
||||
margin-left: .5rem;
|
||||
}
|
||||
|
||||
.actor-global {
|
||||
background: var(--primary);
|
||||
fill: var(--text-light);
|
||||
padding: .5rem;
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
th.actor-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: .5rem;
|
||||
|
||||
.button:first-child {
|
||||
margin-left: .5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.actor-actions {
|
||||
width: 1%;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.actor-action {
|
||||
padding: .5rem .75rem;
|
||||
fill: var(--glass);
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
fill: var(--primary);
|
||||
}
|
||||
|
||||
&:hover.action-delete {
|
||||
fill: var(--error);
|
||||
}
|
||||
}
|
||||
|
||||
.actor-avatar {
|
||||
width: 5rem;
|
||||
position: relative;
|
||||
line-height: 0;
|
||||
|
||||
&:hover .avatar-zoom,
|
||||
&:active .avatar-zoom {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
.avatar {
|
||||
height: 3.5rem;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.avatar-zoom {
|
||||
display: none;
|
||||
height: 50vh;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 10;
|
||||
box-shadow: 0 0 3px var(--shadow-weak-30);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.check-container {
|
||||
display: inline-flex;
|
||||
padding: .5rem .75rem;
|
||||
}
|
||||
</style>
|
||||
19
pages/admin/actors/+onBeforeRender.js
Normal file
19
pages/admin/actors/+onBeforeRender.js
Normal file
@@ -0,0 +1,19 @@
|
||||
import { fetchActors } from '#/src/actors.js';
|
||||
|
||||
export default async function onBeforeRender(pageContext) {
|
||||
const { actors } = await fetchActors({
|
||||
query: pageContext.urlParsed.search.q,
|
||||
}, {
|
||||
limit: 100,
|
||||
// order: pageContext.urlParsed.search.order?.split('.') || ['likes', 'desc'],
|
||||
}, pageContext.user);
|
||||
|
||||
return {
|
||||
pageContext: {
|
||||
title: 'Actors',
|
||||
pageProps: {
|
||||
actors,
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
Reference in New Issue
Block a user