Upgraded dependencies, bumped to Node 24.
This commit is contained in:
@@ -1,255 +1,10 @@
|
||||
<template>
|
||||
<div class="editor">
|
||||
<p
|
||||
v-if="submitted"
|
||||
class="submitted"
|
||||
>
|
||||
<template v-if="apply">Your revision has been submitted. Thank you for your contribution!</template>
|
||||
<template v-else>Your revision has been submitted for review. Thank you for your contribution!</template>
|
||||
|
||||
<ul>
|
||||
<li>
|
||||
<a
|
||||
:href="`/scene/${scene.id}/${scene.slug}`"
|
||||
class="link"
|
||||
>Return to scene</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a
|
||||
:href="`/scene/edit/${scene.id}`"
|
||||
class="link"
|
||||
>Make another edit</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a
|
||||
:href="`/scene/revs/${scene.id}/${scene.slug}`"
|
||||
class="link"
|
||||
>Go to scene revisions</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a
|
||||
:href="`/user/${user.username}/revisions/scenes`"
|
||||
class="link"
|
||||
>Go to user revisions</a>
|
||||
</li>
|
||||
|
||||
<li v-if="user.role !== 'user'">
|
||||
<a
|
||||
href="/admin/revisions/scenes"
|
||||
class="link"
|
||||
>Go to revisions admin</a>
|
||||
</li>
|
||||
</ul>
|
||||
</p>
|
||||
|
||||
<form
|
||||
v-else
|
||||
@submit.prevent
|
||||
>
|
||||
<div class="editor-header">
|
||||
<h2 class="heading ellipsis">Edit scene #{{ scene.id }} - {{ scene.title }}</h2>
|
||||
|
||||
<a
|
||||
:href="`/scene/${scene.id}/${scene.slug}`"
|
||||
target="_blank"
|
||||
class="link noshrink"
|
||||
>Go to scene</a>
|
||||
</div>
|
||||
|
||||
<ul class="nolist">
|
||||
<li
|
||||
v-for="item in fields"
|
||||
:key="`item-${item.key}`"
|
||||
class="row"
|
||||
>
|
||||
<div class="item-header">
|
||||
<div class="key">
|
||||
{{ item.label || item.key }}
|
||||
|
||||
<Icon
|
||||
v-if="item.note"
|
||||
v-tooltip="item.note"
|
||||
icon="info2"
|
||||
class="item-note noselect"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="item-actions">
|
||||
<Icon
|
||||
v-if="!item.forced"
|
||||
icon="pencil5"
|
||||
class="noselect"
|
||||
:class="{ active: editing.has(item.key) }"
|
||||
@click="toggleField(item)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="value"
|
||||
:class="{ disabled: !editing.has(item.key) }"
|
||||
>
|
||||
<EditActors
|
||||
v-if="item.type === 'actors'"
|
||||
:scene="scene"
|
||||
:item="item"
|
||||
:edits="edits"
|
||||
:editing="editing"
|
||||
@actors="(actors) => { edits.actors = actors; }"
|
||||
/>
|
||||
|
||||
<EditTags
|
||||
v-if="item.type === 'tags'"
|
||||
:scene="scene"
|
||||
:item="item"
|
||||
:edits="edits"
|
||||
:editing="editing"
|
||||
@tags="(tags) => { edits.tags = tags; }"
|
||||
/>
|
||||
|
||||
<EditMovies
|
||||
v-if="item.type === 'movies'"
|
||||
:scene="scene"
|
||||
:item="item"
|
||||
:edits="edits"
|
||||
:editing="editing"
|
||||
@movies="(movies) => { edits.movies = movies; }"
|
||||
/>
|
||||
|
||||
<input
|
||||
v-if="item.type === 'string'"
|
||||
v-model="edits[item.key]"
|
||||
class="string input"
|
||||
:disabled="!editing.has(item.key)"
|
||||
>
|
||||
|
||||
<textarea
|
||||
v-if="item.type === 'text'"
|
||||
v-model="edits[item.key]"
|
||||
:placeholder="item.placeholder"
|
||||
rows="3"
|
||||
class="text input"
|
||||
:disabled="!editing.has(item.key)"
|
||||
/>
|
||||
|
||||
<Checkbox
|
||||
v-if="item.type === 'checkbox'"
|
||||
:label="item.checkboxLabel"
|
||||
:checked="edits[item.key]"
|
||||
:disabled="!editing.has(item.key)"
|
||||
class="checkbox delete"
|
||||
@change="(checked) => setDelete(checked)"
|
||||
/>
|
||||
|
||||
<div
|
||||
v-if="item.type === 'date'"
|
||||
class="date"
|
||||
>
|
||||
<input
|
||||
v-model="edits[item.key].date"
|
||||
type="datetime-local"
|
||||
class="date input"
|
||||
:disabled="!editing.has(item.key)"
|
||||
>
|
||||
|
||||
<select
|
||||
v-if="item.value.precision"
|
||||
v-model="edits[item.key].precision"
|
||||
class="input"
|
||||
:disabled="!editing.has(item.key)"
|
||||
>
|
||||
<option value="minute">Minute</option>
|
||||
<option value="hour">Hour</option>
|
||||
<option value="day">Day</option>
|
||||
<option value="month">Month</option>
|
||||
<option value="year">Year</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="item.type === 'duration'"
|
||||
class="duration"
|
||||
>
|
||||
<input
|
||||
type="number"
|
||||
class="input"
|
||||
:value="edits[item.key]?.[0] ?? item.value[0]"
|
||||
min="0"
|
||||
max="100"
|
||||
:disabled="!editing.has(item.key)"
|
||||
@change="setDuration('h', $event)"
|
||||
>H
|
||||
|
||||
<input
|
||||
type="number"
|
||||
class="input"
|
||||
:value="edits[item.key]?.[1] ?? item.value[1]"
|
||||
min="0"
|
||||
max="59"
|
||||
:disabled="!editing.has(item.key)"
|
||||
@change="setDuration('m', $event)"
|
||||
>M
|
||||
|
||||
<input
|
||||
type="number"
|
||||
class="input"
|
||||
:value="edits[item.key]?.[2] ?? item.value[2]"
|
||||
min="0"
|
||||
max="59"
|
||||
:disabled="!editing.has(item.key)"
|
||||
@change="setDuration('s', $event)"
|
||||
>S
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div class="editor-footer">
|
||||
<div class="comment">
|
||||
<textarea
|
||||
v-model="comment"
|
||||
rows="3"
|
||||
placeholder="Please provide verifiable information supporting your edits."
|
||||
class="text input"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="editor-actions">
|
||||
<Checkbox
|
||||
v-if="user.role !== 'user'"
|
||||
v-tooltip="isApplyDisabled && editing.has('delete') ? 'Delete must be approved by an admin' : null"
|
||||
label="Approve and apply immediately"
|
||||
:checked="apply"
|
||||
:disabled="isApplyDisabled"
|
||||
@change="(checked) => apply = checked"
|
||||
/>
|
||||
|
||||
<!-- we don't want the return key to submit the form -->
|
||||
<button
|
||||
class="button button-primary"
|
||||
type="button"
|
||||
:disabled="editing.size === 0"
|
||||
@click="submit"
|
||||
>
|
||||
<template v-if="apply">Submit</template>
|
||||
<template v-else>Submit for review</template>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, inject } from 'vue';
|
||||
import { format } from 'date-fns';
|
||||
import { computed, inject, ref, useId } from 'vue';
|
||||
|
||||
import EditActors from '#/components/edit/actors.vue';
|
||||
import EditTags from '#/components/edit/tags.vue';
|
||||
import EditMovies from '#/components/edit/movies.vue';
|
||||
import EditTags from '#/components/edit/tags.vue';
|
||||
import Checkbox from '#/components/form/checkbox.vue';
|
||||
|
||||
import { post } from '#/src/api.js';
|
||||
@@ -259,6 +14,7 @@ const pageContext = inject('pageContext');
|
||||
|
||||
const user = pageContext.user;
|
||||
const scene = ref(pageContext.pageProps.scene);
|
||||
const applyTooltipId = useId();
|
||||
|
||||
const fields = computed(() => [
|
||||
{
|
||||
@@ -423,12 +179,258 @@ async function submit() {
|
||||
submitted.value = true;
|
||||
|
||||
// scene.value = await get(`/scenes/${scene.value.id}`);
|
||||
} catch (error) {
|
||||
}
|
||||
catch (error) {
|
||||
// do nothing
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="editor">
|
||||
<p
|
||||
v-if="submitted"
|
||||
class="submitted"
|
||||
>
|
||||
<template v-if="apply">Your revision has been submitted. Thank you for your contribution!</template>
|
||||
<template v-else>Your revision has been submitted for review. Thank you for your contribution!</template>
|
||||
|
||||
<ul>
|
||||
<li>
|
||||
<a
|
||||
:href="`/scene/${scene.id}/${scene.slug}`"
|
||||
class="link"
|
||||
>Return to scene</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a
|
||||
:href="`/scene/edit/${scene.id}`"
|
||||
class="link"
|
||||
>Make another edit</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a
|
||||
:href="`/scene/revs/${scene.id}/${scene.slug}`"
|
||||
class="link"
|
||||
>Go to scene revisions</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a
|
||||
:href="`/user/${user.username}/revisions/scenes`"
|
||||
class="link"
|
||||
>Go to user revisions</a>
|
||||
</li>
|
||||
|
||||
<li v-if="user.role !== 'user'">
|
||||
<a
|
||||
href="/admin/revisions/scenes"
|
||||
class="link"
|
||||
>Go to revisions admin</a>
|
||||
</li>
|
||||
</ul>
|
||||
</p>
|
||||
|
||||
<form
|
||||
v-else
|
||||
@submit.prevent
|
||||
>
|
||||
<div class="editor-header">
|
||||
<h2 class="heading ellipsis">Edit scene #{{ scene.id }} - {{ scene.title }}</h2>
|
||||
|
||||
<a
|
||||
:href="`/scene/${scene.id}/${scene.slug}`"
|
||||
target="_blank"
|
||||
class="link noshrink"
|
||||
>Go to scene</a>
|
||||
</div>
|
||||
|
||||
<ul class="nolist">
|
||||
<li
|
||||
v-for="item in fields"
|
||||
:key="`item-${item.key}`"
|
||||
class="row"
|
||||
>
|
||||
<div class="item-header">
|
||||
<div class="key">
|
||||
{{ item.label || item.key }}
|
||||
|
||||
<Icon
|
||||
v-if="item.note"
|
||||
v-tooltip="{ content: item.note, ariaId: `field-note-${item.key}` }"
|
||||
icon="info2"
|
||||
class="item-note noselect"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="item-actions">
|
||||
<Icon
|
||||
v-if="!item.forced"
|
||||
icon="pencil5"
|
||||
class="noselect"
|
||||
:class="{ active: editing.has(item.key) }"
|
||||
@click="toggleField(item)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="value"
|
||||
:class="{ disabled: !editing.has(item.key) }"
|
||||
>
|
||||
<EditActors
|
||||
v-if="item.type === 'actors'"
|
||||
:scene="scene"
|
||||
:item="item"
|
||||
:edits="edits"
|
||||
:editing="editing"
|
||||
@actors="(actors) => { edits.actors = actors; }"
|
||||
/>
|
||||
|
||||
<EditTags
|
||||
v-if="item.type === 'tags'"
|
||||
:scene="scene"
|
||||
:item="item"
|
||||
:edits="edits"
|
||||
:editing="editing"
|
||||
@tags="(tags) => { edits.tags = tags; }"
|
||||
/>
|
||||
|
||||
<EditMovies
|
||||
v-if="item.type === 'movies'"
|
||||
:scene="scene"
|
||||
:item="item"
|
||||
:edits="edits"
|
||||
:editing="editing"
|
||||
@movies="(movies) => { edits.movies = movies; }"
|
||||
/>
|
||||
|
||||
<input
|
||||
v-if="item.type === 'string'"
|
||||
v-model="edits[item.key]"
|
||||
class="string input"
|
||||
:disabled="!editing.has(item.key)"
|
||||
>
|
||||
|
||||
<textarea
|
||||
v-if="item.type === 'text'"
|
||||
v-model="edits[item.key]"
|
||||
:placeholder="item.placeholder"
|
||||
rows="3"
|
||||
class="text input"
|
||||
:disabled="!editing.has(item.key)"
|
||||
/>
|
||||
|
||||
<Checkbox
|
||||
v-if="item.type === 'checkbox'"
|
||||
:label="item.checkboxLabel"
|
||||
:checked="edits[item.key]"
|
||||
:disabled="!editing.has(item.key)"
|
||||
class="checkbox delete"
|
||||
@change="(checked) => setDelete(checked)"
|
||||
/>
|
||||
|
||||
<div
|
||||
v-if="item.type === 'date'"
|
||||
class="date"
|
||||
>
|
||||
<input
|
||||
v-model="edits[item.key].date"
|
||||
type="datetime-local"
|
||||
class="date input"
|
||||
:disabled="!editing.has(item.key)"
|
||||
>
|
||||
|
||||
<select
|
||||
v-if="item.value.precision"
|
||||
v-model="edits[item.key].precision"
|
||||
class="input"
|
||||
:disabled="!editing.has(item.key)"
|
||||
>
|
||||
<option value="minute">Minute</option>
|
||||
<option value="hour">Hour</option>
|
||||
<option value="day">Day</option>
|
||||
<option value="month">Month</option>
|
||||
<option value="year">Year</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="item.type === 'duration'"
|
||||
class="duration"
|
||||
>
|
||||
<input
|
||||
type="number"
|
||||
class="input"
|
||||
:value="edits[item.key]?.[0] ?? item.value[0]"
|
||||
min="0"
|
||||
max="100"
|
||||
:disabled="!editing.has(item.key)"
|
||||
@change="setDuration('h', $event)"
|
||||
>H
|
||||
|
||||
<input
|
||||
type="number"
|
||||
class="input"
|
||||
:value="edits[item.key]?.[1] ?? item.value[1]"
|
||||
min="0"
|
||||
max="59"
|
||||
:disabled="!editing.has(item.key)"
|
||||
@change="setDuration('m', $event)"
|
||||
>M
|
||||
|
||||
<input
|
||||
type="number"
|
||||
class="input"
|
||||
:value="edits[item.key]?.[2] ?? item.value[2]"
|
||||
min="0"
|
||||
max="59"
|
||||
:disabled="!editing.has(item.key)"
|
||||
@change="setDuration('s', $event)"
|
||||
>S
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div class="editor-footer">
|
||||
<div class="comment">
|
||||
<textarea
|
||||
v-model="comment"
|
||||
rows="3"
|
||||
placeholder="Please provide verifiable information supporting your edits."
|
||||
class="text input"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="editor-actions">
|
||||
<Checkbox
|
||||
v-if="user.role !== 'user'"
|
||||
v-tooltip="isApplyDisabled && editing.has('delete') ? { content: 'Delete must be approved by an admin', ariaId: applyTooltipId } : null"
|
||||
label="Approve and apply immediately"
|
||||
:checked="apply"
|
||||
:disabled="isApplyDisabled"
|
||||
@change="(checked) => apply = checked"
|
||||
/>
|
||||
|
||||
<!-- we don't want the return key to submit the form -->
|
||||
<button
|
||||
class="button button-primary"
|
||||
type="button"
|
||||
:disabled="editing.size === 0"
|
||||
@click="submit"
|
||||
>
|
||||
<template v-if="apply">Submit</template>
|
||||
<template v-else>Submit for review</template>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.editor {
|
||||
flex-grow: 1;
|
||||
|
||||
Reference in New Issue
Block a user