Expanded edit fields. Added revision history to scene and user pages.
This commit is contained in:
@@ -8,7 +8,7 @@
|
||||
class="avatar-container"
|
||||
>
|
||||
<img
|
||||
:src="getMediaPath(actor.avatar, 'thumbnail')"
|
||||
:src="getPath(actor.avatar, 'thumbnail')"
|
||||
:title="actor.avatar.credit && `© ${actor.avatar.credit}`"
|
||||
class="avatar"
|
||||
>
|
||||
@@ -296,7 +296,7 @@
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
|
||||
import { getMediaPath } from '#/utils/media-path.js';
|
||||
import getPath from '#/src/get-path.js';
|
||||
import { formatDate } from '#/utils/format.js';
|
||||
|
||||
const expanded = ref(false);
|
||||
|
||||
@@ -23,7 +23,7 @@
|
||||
v-close-popper
|
||||
class="actor"
|
||||
@click="emit('actor', actor)"
|
||||
>{{ actor.name }} ({{ [actor.ageFromBirth, actor.origin?.country?.alpha2].join(', ') }})
|
||||
>{{ actor.name }} ({{ [actor.ageFromBirth, actor.origin?.country?.alpha2].filter(Boolean).join(', ') }})
|
||||
<img
|
||||
v-if="actor.avatar"
|
||||
:src="getPath(actor.avatar, 'thumbnail')"
|
||||
@@ -37,26 +37,12 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, inject } from 'vue';
|
||||
import { ref } from 'vue';
|
||||
|
||||
import { get } from '#/src/api.js';
|
||||
import getPath from '#/src/get-path.js';
|
||||
|
||||
const pageContext = inject('pageContext');
|
||||
|
||||
const actorNames = {
|
||||
dp: 'double penetration',
|
||||
};
|
||||
|
||||
const defaultActors = pageContext.pageProps.actorIds
|
||||
? Object.entries(pageContext.pageProps.actorIds).map(([slug, id]) => ({
|
||||
id,
|
||||
slug,
|
||||
name: actorNames[slug] || slug,
|
||||
}))
|
||||
: [];
|
||||
|
||||
const actors = ref(defaultActors);
|
||||
const actors = ref([]);
|
||||
const query = ref(null);
|
||||
const queryInput = ref(null);
|
||||
|
||||
|
||||
71
components/admin/admin.vue
Normal file
71
components/admin/admin.vue
Normal file
@@ -0,0 +1,71 @@
|
||||
<template>
|
||||
<div class="page">
|
||||
<nav class="nav">
|
||||
<ul class="nav-items nolist">
|
||||
<li class="nav-item">
|
||||
<a
|
||||
href="/admin/revisions"
|
||||
class="nav-link nolink"
|
||||
:class="{ active: pageContext.routeParams.section === 'revisions' }"
|
||||
>Revisions</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<div class="content">
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { inject } from 'vue';
|
||||
|
||||
const pageContext = inject('pageContext');
|
||||
|
||||
// console.log(pageContext);
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.page {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-grow: 1;
|
||||
background: var(--background-base-10);
|
||||
}
|
||||
|
||||
.nav {
|
||||
display: flex;
|
||||
padding: 1rem 1rem 0 1rem;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
display: block;
|
||||
background: var(--background-dark-20);
|
||||
border-radius: 1rem;
|
||||
color: var(--glass-strong-20);
|
||||
font-size: .9rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
display: block;
|
||||
padding: .5rem 1rem;
|
||||
font-weight: bold;
|
||||
|
||||
&.active {
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: var(--primary);
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-grow: 1;
|
||||
padding: 1rem;
|
||||
}
|
||||
</style>
|
||||
@@ -85,11 +85,13 @@ watch(() => props.scene, () => { newActors.value = []; });
|
||||
|
||||
&.disabled {
|
||||
.actor {
|
||||
color: var(--shadow);
|
||||
background: var(--glass-weak-50);
|
||||
color: var(--glass-strong-10);
|
||||
|
||||
.remove,
|
||||
.add {
|
||||
background: var(--shadow-weak-40);
|
||||
fill: var(--shadow-weak-30);
|
||||
background: var(--shadow-weak-50);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -103,9 +105,14 @@ watch(() => props.scene, () => { newActors.value = []; });
|
||||
align-items: center;
|
||||
margin-left: .25rem;
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 0 3px var(--shadow-weak-20);
|
||||
}
|
||||
|
||||
.icon {
|
||||
height: 100%;
|
||||
padding: 0 .5rem;
|
||||
background: var(--success);
|
||||
fill: var(--text-light);
|
||||
}
|
||||
}
|
||||
@@ -114,8 +121,9 @@ watch(() => props.scene, () => { newActors.value = []; });
|
||||
.actor {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
background: var(--glass-weak-30);
|
||||
border-radius: .25rem;
|
||||
background: var(--background);
|
||||
box-shadow: 0 0 3px var(--shadow-weak-30);
|
||||
|
||||
&.deleted {
|
||||
color: var(--glass);
|
||||
@@ -129,8 +137,8 @@ watch(() => props.scene, () => { newActors.value = []; });
|
||||
.add {
|
||||
height: auto;
|
||||
padding: .25rem .3rem;
|
||||
fill: var(--highlight-strong-10);
|
||||
border-radius: .25rem;
|
||||
fill: var(--highlight-strong-10);
|
||||
|
||||
&:hover {
|
||||
fill: var(--text-light);
|
||||
@@ -139,11 +147,19 @@ watch(() => props.scene, () => { newActors.value = []; });
|
||||
}
|
||||
|
||||
.remove {
|
||||
background: var(--error);
|
||||
fill: var(--error);
|
||||
|
||||
&:hover {
|
||||
background: var(--error);
|
||||
}
|
||||
}
|
||||
|
||||
.add {
|
||||
background: var(--success);
|
||||
fill: var(--success);
|
||||
|
||||
&:hover {
|
||||
background: var(--success);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
173
components/edit/movies.vue
Normal file
173
components/edit/movies.vue
Normal file
@@ -0,0 +1,173 @@
|
||||
<template>
|
||||
<ul
|
||||
class="movies nolist"
|
||||
:class="{ disabled: !editing.has(item.key) }"
|
||||
>
|
||||
<li
|
||||
v-for="movie in [...item.value, ...newMovies]"
|
||||
:key="`movie-${movie.id}`"
|
||||
class="movie"
|
||||
:class="{ deleted: edits.movies && !edits.movies.some((movieId) => movieId === movie.id) }"
|
||||
>
|
||||
<span class="movie-name">{{ movie.title }}</span>
|
||||
|
||||
<Icon
|
||||
v-if="edits.movies && !edits.movies.some((movieId) => movieId === movie.id)"
|
||||
icon="checkmark"
|
||||
class="add"
|
||||
@click="emit('movies', edits.movies.concat(movie.id))"
|
||||
/>
|
||||
|
||||
<Icon
|
||||
v-else
|
||||
icon="cross2"
|
||||
class="remove"
|
||||
@click="emit('movies', edits.movies.filter((movieId) => movieId !== movie.id))"
|
||||
/>
|
||||
</li>
|
||||
|
||||
<li class="new">
|
||||
<MovieSearch
|
||||
:disabled="!editing.has(item.key)"
|
||||
@movie="addMovie"
|
||||
>
|
||||
<Icon
|
||||
icon="plus3"
|
||||
class="add"
|
||||
/>
|
||||
</MovieSearch>
|
||||
</li>
|
||||
</ul>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, watch } from 'vue';
|
||||
|
||||
import MovieSearch from '#/components/movies/search.vue';
|
||||
|
||||
const newMovies = ref([]);
|
||||
|
||||
const props = defineProps({
|
||||
item: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
scene: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
edits: {
|
||||
type: Object,
|
||||
default: () => {},
|
||||
},
|
||||
editing: {
|
||||
type: Set,
|
||||
default: null,
|
||||
},
|
||||
});
|
||||
|
||||
const emit = defineEmits(['movies']);
|
||||
|
||||
function addMovie(movie) {
|
||||
newMovies.value = newMovies.value.concat(movie);
|
||||
|
||||
console.log(movie);
|
||||
|
||||
emit('movies', props.edits.movies.concat(movie.id));
|
||||
|
||||
console.log(props.edits);
|
||||
}
|
||||
|
||||
watch(() => props.scene, () => { newMovies.value = []; });
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.movies {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: .25rem;
|
||||
|
||||
&.disabled {
|
||||
.movie {
|
||||
background: var(--glass-weak-50);
|
||||
color: var(--glass-strong-10);
|
||||
|
||||
.remove,
|
||||
.add {
|
||||
fill: var(--shadow-weak-30);
|
||||
background: var(--shadow-weak-50);
|
||||
}
|
||||
}
|
||||
|
||||
.new .icon {
|
||||
background: var(--shadow-weak-40);
|
||||
}
|
||||
}
|
||||
|
||||
.new {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: .25rem;
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 0 3px var(--shadow-weak-20);
|
||||
}
|
||||
|
||||
.icon {
|
||||
height: 100%;
|
||||
padding: 0 .5rem;
|
||||
background: var(--success);
|
||||
fill: var(--text-light);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.movie {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
border-radius: .25rem;
|
||||
background: var(--background);
|
||||
box-shadow: 0 0 3px var(--shadow-weak-30);
|
||||
|
||||
&.deleted {
|
||||
color: var(--glass);
|
||||
text-decoration: line-through;
|
||||
}
|
||||
}
|
||||
|
||||
.movie,
|
||||
.new {
|
||||
.remove,
|
||||
.add {
|
||||
height: auto;
|
||||
padding: .25rem .3rem;
|
||||
border-radius: .25rem;
|
||||
fill: var(--highlight-strong-10);
|
||||
|
||||
&:hover {
|
||||
fill: var(--text-light);
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.remove {
|
||||
fill: var(--error);
|
||||
|
||||
&:hover {
|
||||
background: var(--error);
|
||||
}
|
||||
}
|
||||
|
||||
.add {
|
||||
fill: var(--success);
|
||||
|
||||
&:hover {
|
||||
background: var(--success);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.movie-name {
|
||||
padding: .25rem .5rem;
|
||||
}
|
||||
</style>
|
||||
488
components/edit/revisions.vue
Normal file
488
components/edit/revisions.vue
Normal file
@@ -0,0 +1,488 @@
|
||||
<template>
|
||||
<div class="page">
|
||||
<div
|
||||
v-if="interactive"
|
||||
class="revs-header"
|
||||
>
|
||||
<Checkbox
|
||||
label="Show finalized"
|
||||
:checked="showReviewed"
|
||||
@change="(checked) => { showReviewed = checked; reloadRevisions(); }"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<ul class="revs nolist">
|
||||
<li
|
||||
v-for="rev in curatedRevisions"
|
||||
:key="`rev-${rev.id}`"
|
||||
class="rev"
|
||||
:class="{ reviewed: reviewedRevisions.has(rev.id) }"
|
||||
>
|
||||
<div class="rev-header">
|
||||
<a
|
||||
:href="`/scene/${rev.sceneId}`"
|
||||
target="_blank"
|
||||
class="rev-link rev-scene nolink noshrink"
|
||||
>{{ rev.sceneId }}@{{ rev.hash.slice(0, 6) }}</a>
|
||||
|
||||
<a
|
||||
:href="`/scene/${rev.sceneId}`"
|
||||
target="_blank"
|
||||
class="rev-link rev-title nolink ellipsis"
|
||||
>{{ rev.base.title }}</a>
|
||||
|
||||
<div class="rev-details noshrink">
|
||||
<a
|
||||
v-if="rev.user"
|
||||
:href="`/user/${rev.user.username}`"
|
||||
target="_blank"
|
||||
class="rev-username nolink"
|
||||
>{{ rev.user.username }}</a>
|
||||
|
||||
<time
|
||||
:datetime="rev.createdAt"
|
||||
class="rev-created"
|
||||
>{{ format(rev.createdAt, 'yyyy-MM-dd hh:mm') }}</time>
|
||||
</div>
|
||||
|
||||
<div class="rev-actions noshrink">
|
||||
<span
|
||||
v-if="rev.review"
|
||||
class="approved"
|
||||
:class="{ rejected: !rev.review.isApproved }"
|
||||
>{{ rev.review.isApproved ? 'Approved' : 'Rejected' }} by <a
|
||||
:href="`/user/${rev.review.username}`"
|
||||
target="_blank"
|
||||
class="nolink"
|
||||
>{{ rev.review.username }}</a> {{ format(rev.review.reviewedAt, 'yyyy-MM-dd hh:mm') }}</span>
|
||||
|
||||
<template v-else-if="interactive">
|
||||
<Icon
|
||||
v-tooltip="`Ban user from submitting revisions`"
|
||||
icon="user-block"
|
||||
class="review-reject review-ban"
|
||||
@click="banEditor(rev)"
|
||||
/>
|
||||
|
||||
<Icon
|
||||
v-tooltip="`Reject revision`"
|
||||
icon="blocked"
|
||||
class="review-reject"
|
||||
@click="reviewRevision(rev, false)"
|
||||
/>
|
||||
|
||||
<input
|
||||
v-model="feedbacks[rev.id]"
|
||||
placeholder="Feedback"
|
||||
class="input"
|
||||
>
|
||||
</template>
|
||||
|
||||
<Icon
|
||||
v-if="(!rev.review || !rev.review.isApproved) && interactive"
|
||||
v-tooltip="`Approve and apply revision`"
|
||||
icon="checkmark"
|
||||
class="review-approve"
|
||||
@click="reviewRevision(rev, true)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ul class="rev-deltas">
|
||||
<li
|
||||
v-for="(delta, index) in rev.deltas"
|
||||
:key="`delta-${rev.id}-${index}`"
|
||||
class="delta"
|
||||
>
|
||||
<span class="delta-key ellipsis">{{ delta.key }}</span>
|
||||
|
||||
<div class="delta-deltas">
|
||||
<span class="delta-from delta-value">
|
||||
<ul
|
||||
v-if="Array.isArray(rev.base[delta.key])"
|
||||
class="nolist"
|
||||
>[
|
||||
<li
|
||||
v-for="item in rev.base[delta.key]"
|
||||
:key="`item-${rev.id}-${index}-${item.id}`"
|
||||
class="delta-item"
|
||||
:class="{ modified: item.modified }"
|
||||
>{{ item.name || item.id || item }}</li> ]
|
||||
</ul>
|
||||
|
||||
<template v-else-if="rev.base[delta.key] instanceof Date">{{ format(rev.base[delta.key], 'yyyy-MM-dd hh:mm') }}</template>
|
||||
<template v-else>{{ rev.base[delta.key] }}</template>
|
||||
</span>
|
||||
|
||||
<span class="delta-arrow">⇒</span>
|
||||
|
||||
<span class="delta-to delta-value">
|
||||
<ul
|
||||
v-if="Array.isArray(delta.value)"
|
||||
class="nolist"
|
||||
>[
|
||||
<li
|
||||
v-for="item in delta.value"
|
||||
:key="`item-${rev.id}-${index}-${item.id}`"
|
||||
class="delta-item"
|
||||
:class="{ modified: item.modified }"
|
||||
>{{ item.name || item.id || item }}</li> ]
|
||||
</ul>
|
||||
|
||||
<template v-else-if="delta.value instanceof Date">{{ format(delta.value, 'yyyy-MM-dd hh:mm') }}</template>
|
||||
<template v-else>{{ delta.value }}</template>
|
||||
</span>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div
|
||||
v-if="rev.comment"
|
||||
class="rev-comment"
|
||||
>
|
||||
{{ rev.comment }}
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, inject } from 'vue';
|
||||
import { format } from 'date-fns';
|
||||
|
||||
import Checkbox from '#/components/form/checkbox.vue';
|
||||
|
||||
import { get, post } from '#/src/api.js';
|
||||
|
||||
defineProps({
|
||||
interactive: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
});
|
||||
|
||||
const pageContext = inject('pageContext');
|
||||
const revisions = ref(pageContext.pageProps.revisions);
|
||||
|
||||
const actors = ref(pageContext.pageProps.actors);
|
||||
const tags = ref(pageContext.pageProps.tags);
|
||||
const movies = ref(pageContext.pageProps.movies);
|
||||
|
||||
const actorsById = computed(() => Object.fromEntries(actors.value.map((actor) => [actor.id, actor])));
|
||||
const tagsById = computed(() => Object.fromEntries(tags.value.map((tag) => [tag.id, tag])));
|
||||
const moviesById = computed(() => Object.fromEntries(movies.value.map((movie) => [movie.id, movie])));
|
||||
|
||||
const feedbacks = ref({});
|
||||
const showReviewed = ref(false);
|
||||
const reviewedRevisions = ref(new Set());
|
||||
|
||||
const mappedKeys = {
|
||||
actors: actorsById,
|
||||
tags: tagsById,
|
||||
movies: moviesById,
|
||||
};
|
||||
|
||||
const dateKeys = [
|
||||
'date',
|
||||
'productionDate',
|
||||
'createdAt',
|
||||
];
|
||||
|
||||
const curatedRevisions = computed(() => revisions.value.map((revision) => {
|
||||
const curatedBase = Object.fromEntries(Object.entries(revision.base).map(([key, value]) => {
|
||||
if (Array.isArray(value) && mappedKeys[key]) {
|
||||
return [key, value.map((itemId) => ({
|
||||
id: itemId,
|
||||
name: mappedKeys[key].value[itemId]?.name || mappedKeys[key].value[itemId]?.title,
|
||||
modified: revision.deltas.some((delta) => delta.key === key && !delta.value.some((deltaItemId) => deltaItemId === itemId)),
|
||||
}))];
|
||||
}
|
||||
|
||||
if (dateKeys.includes(key)) {
|
||||
return [key, new Date(value)];
|
||||
}
|
||||
|
||||
return [key, value];
|
||||
}));
|
||||
|
||||
const curatedDeltas = revision.deltas.map((delta) => {
|
||||
if (Array.isArray(delta.value) && mappedKeys[delta.key]) {
|
||||
return {
|
||||
...delta,
|
||||
value: delta.value.map((itemId) => ({
|
||||
id: itemId,
|
||||
name: mappedKeys[delta.key].value[itemId]?.name || mappedKeys[delta.key].value[itemId]?.title,
|
||||
modified: !revision.base[delta.key].includes(itemId),
|
||||
})),
|
||||
};
|
||||
}
|
||||
|
||||
if (dateKeys.includes(delta.key)) {
|
||||
return {
|
||||
...delta,
|
||||
value: new Date(delta.value),
|
||||
};
|
||||
}
|
||||
|
||||
return delta;
|
||||
});
|
||||
|
||||
return {
|
||||
...revision,
|
||||
base: curatedBase,
|
||||
deltas: curatedDeltas,
|
||||
};
|
||||
}));
|
||||
|
||||
async function reloadRevisions() {
|
||||
const updatedRevisions = await get('/revisions', {
|
||||
isFinalized: showReviewed.value ? undefined : false,
|
||||
limit: 50,
|
||||
});
|
||||
|
||||
actors.value = updatedRevisions.actors;
|
||||
tags.value = updatedRevisions.tags;
|
||||
movies.value = updatedRevisions.movies;
|
||||
revisions.value = updatedRevisions.revisions;
|
||||
}
|
||||
|
||||
async function reviewRevision(revision, isApproved) {
|
||||
reviewedRevisions.value.add(revision.id);
|
||||
|
||||
try {
|
||||
await post(`/revisions/${revision.id}/reviews`, {
|
||||
isApproved,
|
||||
feedback: feedbacks.value[revision.id],
|
||||
});
|
||||
|
||||
const updatedRevision = await get(`/revisions/${revision.id}`, {
|
||||
revisionId: revision.id,
|
||||
});
|
||||
|
||||
revisions.value = revisions.value.map((rev) => (rev.id === updatedRevision.revision.id ? updatedRevision.revision : rev));
|
||||
} catch (error) {
|
||||
reviewedRevisions.value.delete(revision.id);
|
||||
}
|
||||
}
|
||||
|
||||
async function banEditor(revision) {
|
||||
console.log('ban!', revision);
|
||||
|
||||
await post('/bans', {
|
||||
userId: revision.user.id,
|
||||
banIp: true,
|
||||
});
|
||||
|
||||
await reviewRevision(revision, false);
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.page {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.revs-header {
|
||||
display: flex;
|
||||
margin-bottom: 1rem;
|
||||
|
||||
.check-container {
|
||||
display: inline-flex;
|
||||
}
|
||||
}
|
||||
|
||||
.revs {
|
||||
width: 100%;
|
||||
flex-grow: 1;
|
||||
overflow-x: auto;
|
||||
padding: 3px; /* prevent shadow from getting cut off */
|
||||
}
|
||||
|
||||
.rev {
|
||||
min-width: 1200px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: var(--background);
|
||||
border-radius: .25rem;
|
||||
margin-bottom: .5rem;
|
||||
box-shadow: 0 0 3px var(--shadow-weak-30);
|
||||
font-size: .9rem;
|
||||
|
||||
&.reviewed {
|
||||
pointer-events: none;
|
||||
opacity: .5;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 0 3px var(--primary-light-20);
|
||||
}
|
||||
}
|
||||
|
||||
.rev-link {
|
||||
color: var(--glass-strong-10);
|
||||
|
||||
&:hover {
|
||||
color: var(--primary);
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
.rev-header {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
border-bottom: solid 1px var(--glass-weak-30);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.rev-scene {
|
||||
width: 9rem;
|
||||
display: flex;
|
||||
box-sizing: border-box;
|
||||
padding: .5rem .5rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.rev-title {
|
||||
color: inherit;
|
||||
padding: .5rem 0;
|
||||
}
|
||||
|
||||
.rev-details {
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
justify-content: flex-end;
|
||||
gap: 1rem;
|
||||
align-items: center;
|
||||
margin: 0 1rem;
|
||||
}
|
||||
|
||||
.rev-username {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.rev-actions {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
|
||||
.icon {
|
||||
height: 100%;
|
||||
padding: 0 1.5rem;
|
||||
fill: var(--glass);
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
fill: var(--text-light);
|
||||
}
|
||||
}
|
||||
|
||||
.trigger {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.review-approve {
|
||||
fill: var(--success);
|
||||
|
||||
&:hover {
|
||||
background: var(--success);
|
||||
}
|
||||
}
|
||||
|
||||
.review-reject {
|
||||
fill: var(--error);
|
||||
|
||||
&:hover {
|
||||
background: var(--error);
|
||||
}
|
||||
}
|
||||
|
||||
.review-comment {
|
||||
&:hover {
|
||||
background: var(--primary);
|
||||
}
|
||||
}
|
||||
|
||||
.approved {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: var(--success);
|
||||
padding: .5rem;
|
||||
}
|
||||
|
||||
.rejected {
|
||||
color: var(--error);
|
||||
}
|
||||
}
|
||||
|
||||
.rev-deltas {
|
||||
flex-grow: 1;
|
||||
padding: 0;
|
||||
margin: .25rem 0;
|
||||
}
|
||||
|
||||
.delta {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
padding: .15rem .5rem;
|
||||
|
||||
&:not(:last-child) {
|
||||
border-bottom: solid 1px var(--glass-weak-40);
|
||||
}
|
||||
}
|
||||
|
||||
.delta-key {
|
||||
width: 8.5rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.delta-deltas {
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.delta-from {
|
||||
width: 40%;
|
||||
flex-shrink: 0;
|
||||
color: var(--reject);
|
||||
padding: .25rem 0;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
.delta-arrow {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 1rem;
|
||||
font-size: 1.2rem;
|
||||
color: var(--glass-weak-10);
|
||||
}
|
||||
|
||||
.delta-value {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.delta-to {
|
||||
flex-grow: 1;
|
||||
color: var(--approve);
|
||||
}
|
||||
|
||||
.delta-item {
|
||||
line-height: 1.5;
|
||||
|
||||
&:not(:last-child):after {
|
||||
content: ',\00a0';
|
||||
}
|
||||
|
||||
&.modified {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.rev-comment {
|
||||
padding: .5rem .5rem;
|
||||
border-top: solid 1px var(--glass-weak-30);
|
||||
}
|
||||
</style>
|
||||
@@ -85,11 +85,13 @@ watch(() => props.scene, () => { newTags.value = []; });
|
||||
|
||||
&.disabled {
|
||||
.tag {
|
||||
color: var(--shadow);
|
||||
background: var(--glass-weak-50);
|
||||
color: var(--glass-strong-10);
|
||||
|
||||
.remove,
|
||||
.add {
|
||||
background: var(--shadow-weak-40);
|
||||
fill: var(--shadow-weak-30);
|
||||
background: var(--shadow-weak-50);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -103,9 +105,14 @@ watch(() => props.scene, () => { newTags.value = []; });
|
||||
align-items: center;
|
||||
margin-left: .25rem;
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 0 3px var(--shadow-weak-20);
|
||||
}
|
||||
|
||||
.icon {
|
||||
height: 100%;
|
||||
padding: 0 .5rem;
|
||||
background: var(--success);
|
||||
fill: var(--text-light);
|
||||
}
|
||||
}
|
||||
@@ -114,8 +121,9 @@ watch(() => props.scene, () => { newTags.value = []; });
|
||||
.tag {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
background: var(--glass-weak-30);
|
||||
border-radius: .25rem;
|
||||
background: var(--background);
|
||||
box-shadow: 0 0 3px var(--shadow-weak-30);
|
||||
|
||||
&.deleted {
|
||||
color: var(--glass);
|
||||
@@ -129,8 +137,8 @@ watch(() => props.scene, () => { newTags.value = []; });
|
||||
.add {
|
||||
height: auto;
|
||||
padding: .25rem .3rem;
|
||||
fill: var(--highlight-strong-10);
|
||||
border-radius: .25rem;
|
||||
fill: var(--highlight-strong-10);
|
||||
|
||||
&:hover {
|
||||
fill: var(--text-light);
|
||||
@@ -139,11 +147,19 @@ watch(() => props.scene, () => { newTags.value = []; });
|
||||
}
|
||||
|
||||
.remove {
|
||||
background: var(--error);
|
||||
fill: var(--error);
|
||||
|
||||
&:hover {
|
||||
background: var(--error);
|
||||
}
|
||||
}
|
||||
|
||||
.add {
|
||||
background: var(--success);
|
||||
fill: var(--success);
|
||||
|
||||
&:hover {
|
||||
background: var(--success);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -11,6 +11,7 @@
|
||||
:checked="checked"
|
||||
type="checkbox"
|
||||
class="check-checkbox"
|
||||
:disabled="disabled"
|
||||
@change="$emit('change', $event.target.checked)"
|
||||
>
|
||||
|
||||
@@ -33,6 +34,10 @@ defineProps({
|
||||
type: String,
|
||||
default: null,
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
});
|
||||
|
||||
defineEmits(['change']);
|
||||
@@ -98,6 +103,10 @@ defineEmits(['change']);
|
||||
}
|
||||
}
|
||||
|
||||
.check-checkbox:disabled + .check {
|
||||
background: var(--shadow);
|
||||
}
|
||||
|
||||
.check-container.minus .check-checkbox:checked + .check {
|
||||
background: var(--error);
|
||||
|
||||
@@ -108,7 +117,6 @@ defineEmits(['change']);
|
||||
|
||||
.check-label {
|
||||
overflow: hidden;
|
||||
text-transform: capitalize;
|
||||
text-overflow: ellipsis;
|
||||
margin: 0 .5rem 0 0;
|
||||
}
|
||||
|
||||
@@ -189,6 +189,20 @@
|
||||
Settings
|
||||
</li>
|
||||
|
||||
<li
|
||||
v-if="user?.role === 'admin'"
|
||||
v-close-popper
|
||||
class="menu-item"
|
||||
>
|
||||
<a
|
||||
href="/admin"
|
||||
class="menu-button nolink favorites"
|
||||
>
|
||||
<Icon icon="wrench" />
|
||||
Admin
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li
|
||||
v-if="theme === 'dark'"
|
||||
v-close-popper
|
||||
|
||||
102
components/movies/search.vue
Normal file
102
components/movies/search.vue
Normal file
@@ -0,0 +1,102 @@
|
||||
<template>
|
||||
<VDropdown
|
||||
:disabled="disabled"
|
||||
class="trigger"
|
||||
@show="focus"
|
||||
>
|
||||
<slot />
|
||||
|
||||
<template #popper>
|
||||
<div>
|
||||
<input
|
||||
ref="queryInput"
|
||||
v-model="query"
|
||||
placeholder="Search movie"
|
||||
class="input"
|
||||
@input="search"
|
||||
>
|
||||
|
||||
<ul class="movies nolist">
|
||||
<li
|
||||
v-for="movie in movies"
|
||||
:key="`movie-${movie.id}`"
|
||||
v-close-popper
|
||||
class="movie"
|
||||
@click="emit('movie', movie)"
|
||||
>{{ movie.title }} ({{ [format(movie.effectiveDate, 'yyyy')].filter(Boolean).join(', ') }})
|
||||
<img
|
||||
v-if="movie.covers.length > 0"
|
||||
:src="getPath(movie.covers[0], 'thumbnail')"
|
||||
class="avatar"
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
</VDropdown>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import { format } from 'date-fns';
|
||||
|
||||
import { get } from '#/src/api.js';
|
||||
import getPath from '#/src/get-path.js';
|
||||
|
||||
const movies = ref([]);
|
||||
const query = ref(null);
|
||||
const queryInput = ref(null);
|
||||
|
||||
defineProps({
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
});
|
||||
|
||||
const emit = defineEmits(['movie']);
|
||||
|
||||
async function search() {
|
||||
const data = await get('/movies', { q: query.value });
|
||||
|
||||
movies.value = data.movies;
|
||||
}
|
||||
|
||||
function focus() {
|
||||
setTimeout(() => {
|
||||
queryInput.value?.focus();
|
||||
}, 100);
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.trigger {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.movie {
|
||||
display: block;
|
||||
padding: .25rem .5rem;
|
||||
|
||||
&:hover {
|
||||
background: var(--glass-weak-50);
|
||||
color: var(--primary);
|
||||
cursor: pointer;
|
||||
|
||||
.avatar {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.avatar {
|
||||
position: fixed;
|
||||
display: none;
|
||||
left: 7rem;
|
||||
width: 8rem;
|
||||
border-radius: .25rem;
|
||||
box-shadow: 0 0 3px var(--shadow-weak-10);
|
||||
pointer-events: none;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user