Added experimental edit page and revision history.
This commit is contained in:
395
pages/scene/edit/+Page.vue
Normal file
395
pages/scene/edit/+Page.vue
Normal file
@@ -0,0 +1,395 @@
|
||||
<template>
|
||||
<div class="editor">
|
||||
<form @submit.prevent>
|
||||
<div class="editor-header">
|
||||
<h2 class="heading ellipsis">Edit scene #{{ scene.id }}</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 }}</div>
|
||||
|
||||
<div class="item-actions">
|
||||
<Icon
|
||||
v-if="!item.forced"
|
||||
icon="pencil5"
|
||||
: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; }"
|
||||
/>
|
||||
|
||||
<input
|
||||
v-if="item.type === 'string'"
|
||||
:value="edits[item.key] || item.value"
|
||||
class="string input"
|
||||
:disabled="!editing.has(item.key)"
|
||||
@input="setValue(item, $event)"
|
||||
>
|
||||
|
||||
<textarea
|
||||
v-if="item.type === 'text'"
|
||||
:value="edits[item.key] || item.value"
|
||||
:placeholder="item.placeholder"
|
||||
rows="3"
|
||||
class="text input"
|
||||
:disabled="!editing.has(item.key)"
|
||||
@input="setValue(item, $event)"
|
||||
/>
|
||||
|
||||
<input
|
||||
v-if="item.type === 'date'"
|
||||
type="datetime-local"
|
||||
:value="edits[item.key] || item.value"
|
||||
class="date input"
|
||||
:disabled="!editing.has(item.key)"
|
||||
@input="setValue(item, $event)"
|
||||
>
|
||||
|
||||
<div
|
||||
v-if="item.type === 'duration'"
|
||||
class="duration"
|
||||
>
|
||||
<input
|
||||
type="number"
|
||||
class="input"
|
||||
:value="item.value[0]"
|
||||
min="0"
|
||||
max="100"
|
||||
:disabled="!editing.has(item.key)"
|
||||
@input="setDuration('h', $event)"
|
||||
>H
|
||||
|
||||
<input
|
||||
type="number"
|
||||
class="input"
|
||||
:value="item.value[1]"
|
||||
min="0"
|
||||
max="59"
|
||||
:disabled="!editing.has(item.key)"
|
||||
@input="setDuration('m', $event)"
|
||||
>M
|
||||
|
||||
<input
|
||||
type="number"
|
||||
class="input"
|
||||
:value="item.value[2]"
|
||||
min="0"
|
||||
max="59"
|
||||
:disabled="!editing.has(item.key)"
|
||||
@input="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">
|
||||
<!-- we don't want the return key to submit the form -->
|
||||
<button
|
||||
class="button button-primary"
|
||||
type="button"
|
||||
:disabled="editing.size === 0"
|
||||
@click="submit"
|
||||
>Submit</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, inject } from 'vue';
|
||||
import { format } from 'date-fns';
|
||||
|
||||
import EditActors from '#/components/edit/actors.vue';
|
||||
import EditTags from '#/components/edit/tags.vue';
|
||||
|
||||
import { get, patch } from '#/src/api.js';
|
||||
|
||||
const pageContext = inject('pageContext');
|
||||
|
||||
const user = pageContext.user;
|
||||
const scene = ref(pageContext.pageProps.scene);
|
||||
|
||||
// console.log(scene);
|
||||
|
||||
const fields = computed(() => [
|
||||
{
|
||||
key: 'actors',
|
||||
type: 'actors',
|
||||
value: scene.value.actors,
|
||||
},
|
||||
{
|
||||
key: 'tags',
|
||||
type: 'tags',
|
||||
value: scene.value.tags,
|
||||
},
|
||||
{
|
||||
key: 'title',
|
||||
type: 'string',
|
||||
value: scene.value.title,
|
||||
},
|
||||
{
|
||||
key: 'description',
|
||||
type: 'text',
|
||||
value: scene.value.description,
|
||||
},
|
||||
{
|
||||
key: 'date',
|
||||
type: 'date',
|
||||
value: scene.value.date
|
||||
? format(scene.value.date, 'yyyy-MM-dd hh:mm')
|
||||
: null,
|
||||
},
|
||||
{
|
||||
key: 'duration',
|
||||
type: 'duration',
|
||||
value: [Math.floor(scene.value.duration / 3600), Math.floor((scene.value.duration % 3600) / 60), scene.value.duration % 60],
|
||||
},
|
||||
{
|
||||
key: 'productionDate',
|
||||
label: 'production date',
|
||||
type: 'date',
|
||||
value: scene.value.productionDate
|
||||
? format(scene.value.productionDate, 'yyyy-MM-dd hh:mm')
|
||||
: null,
|
||||
},
|
||||
...(user.role === 'user'
|
||||
? []
|
||||
: [{
|
||||
key: 'comment',
|
||||
type: 'text',
|
||||
placeholder: 'Do NOT use this field to summarize and clarify your revision. This field is for permanent notes and comments regarding the scene or database entry itself.',
|
||||
value: scene.value.comment,
|
||||
}]),
|
||||
]);
|
||||
|
||||
const editing = ref(new Set());
|
||||
const edits = ref({});
|
||||
const comment = ref(null);
|
||||
|
||||
function toggleField(item) {
|
||||
if (editing.value.has(item.key)) {
|
||||
editing.value.delete(item.key);
|
||||
delete edits.value[item.key];
|
||||
|
||||
return;
|
||||
}
|
||||
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) {
|
||||
edits.value[item.key] = event.target.value;
|
||||
}
|
||||
|
||||
const timeUnits = ['h', 'm', 's'];
|
||||
|
||||
function setDuration(unit, event) {
|
||||
edits.value.duration[timeUnits.indexOf(unit)] = Number(event.target.value);
|
||||
}
|
||||
|
||||
async function submit() {
|
||||
try {
|
||||
await patch(`/scenes/${scene.value.id}`, {
|
||||
edits: {
|
||||
...edits.value,
|
||||
duration: edits.value.duration
|
||||
? (edits.value.duration[0] * 3600) + (edits.value.duration[1] * 60) + (edits.value.duration[2])
|
||||
: undefined,
|
||||
},
|
||||
comment: comment.value,
|
||||
}, {
|
||||
successFeedback: 'Your revision has been submitted for approval.',
|
||||
appendErrorMessage: true,
|
||||
});
|
||||
|
||||
editing.value = new Set();
|
||||
edits.value = {};
|
||||
comment.value = null;
|
||||
|
||||
scene.value = await get(`/scenes/${scene.value.id}`);
|
||||
|
||||
console.log(scene.value);
|
||||
} catch (error) {
|
||||
// do nothing
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.editor {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.editor-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.heading {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: .25rem 1rem;
|
||||
}
|
||||
|
||||
.key {
|
||||
width: 8rem;
|
||||
text-transform: capitalize;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.item-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.value {
|
||||
flex-grow: 1;
|
||||
|
||||
.input {
|
||||
width: 100%;
|
||||
|
||||
&:disabled {
|
||||
color: var(--glass-strong-10);
|
||||
background: none;
|
||||
border: solid 1px var(--glass-weak-30);
|
||||
}
|
||||
}
|
||||
|
||||
.duration {
|
||||
.input {
|
||||
width: 5rem;
|
||||
margin-right: .25rem;
|
||||
|
||||
&:not(:first-child) {
|
||||
margin-left: .75rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
.item-actions {
|
||||
.icon {
|
||||
padding: .25rem 1rem;
|
||||
fill: var(--glass);
|
||||
overflow: hidden;
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
fill: var(--text);
|
||||
}
|
||||
|
||||
&.active {
|
||||
fill: var(--primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.editor-footer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
padding: 1rem 1rem 0 1rem;
|
||||
border-top: solid 1px var(--primary-light-30);
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
.comment {
|
||||
width: 100%;
|
||||
flex-shrink: 0;
|
||||
|
||||
.input {
|
||||
width: 100%;
|
||||
resize: vertical;
|
||||
}
|
||||
}
|
||||
|
||||
.editor-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 2rem;
|
||||
|
||||
.button {
|
||||
padding: .5rem 1rem;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media(--small) {
|
||||
.row {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
margin-bottom: .25rem;
|
||||
}
|
||||
|
||||
.item-header {
|
||||
margin-bottom: .25rem;
|
||||
}
|
||||
|
||||
.key {
|
||||
flex-grow: 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
1
pages/scene/edit/+route.js
Normal file
1
pages/scene/edit/+route.js
Normal file
@@ -0,0 +1 @@
|
||||
export default '/scene/@sceneId/*/edit';
|
||||
Reference in New Issue
Block a user