189 lines
7.9 KiB
Vue
189 lines
7.9 KiB
Vue
<template>
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<Icon v="plus-circle"/>
|
|
<T>sources.submit.header</T>
|
|
</div>
|
|
<div v-if="$user()" class="card-body">
|
|
<div v-if="afterSubmit" class="alert alert-success text-center">
|
|
<p>
|
|
<T>sources.submit.thanks</T>
|
|
</p>
|
|
<p>
|
|
<button class="btn btn-success" @click="afterSubmit = false">
|
|
<Icon v="plus"/>
|
|
<T>sources.submit.another</T>
|
|
</button>
|
|
</p>
|
|
</div>
|
|
<form v-else @submit.prevent="submit">
|
|
<div class="form-group">
|
|
<label for="type" class="required"><T>sources.submit.type</T></label>
|
|
<select id="type" class="form-control" v-model="form.type" required>
|
|
<option value=""></option>
|
|
<option v-for="t in Object.keys(sourceTypes)" v-if="t !== ''" :value="t">{{$t('sources.type.' + t)}}</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="author"><T>sources.submit.author</T></label>
|
|
<input type="text" id="author" class="form-control" v-model="form.author"
|
|
maxlength="255"/>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="title" class="required"><T>sources.submit.title</T></label>
|
|
<input type="text" id="title" class="form-control" v-model="form.title"
|
|
required maxlength="255"/>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="extra"><T>sources.submit.extra</T></label>
|
|
<input type="text" id="extra" class="form-control" v-model="form.extra"
|
|
maxlength="255"/>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="year"><T>sources.submit.year</T></label>
|
|
<input type="number" id="year" class="form-control" v-model="form.year"
|
|
min="0" max="2100"/>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="fragments"><T>sources.submit.fragments</T></label>
|
|
<p class="small text-muted mb-0"><T>sources.submit.fragmentsInfo</T></p>
|
|
<ListInput v-model="form.fragments" v-slot="s" id="fragments">
|
|
<textarea v-model="s.val" class="form-control" rows="3" @keyup="s.update(s.val)" required></textarea>
|
|
</ListInput>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="pronouns" class="required"><T>sources.submit.pronouns</T></label>
|
|
<p class="small text-muted mb-0">
|
|
<T>sources.submit.pronounsInfo</T>
|
|
</p>
|
|
<ListInput v-model="form.pronouns">
|
|
<template v-slot="s">
|
|
<input v-model="s.val" type="text" class="form-control" @keyup="s.update(s.val)" required maxlength="24"/>
|
|
</template>
|
|
<template v-slot:validation="s">
|
|
<p v-if="s.val && !pronounLibrary.isCanonical(s.val) && !(config.sources.extraTypes || []).includes(s.val)"
|
|
class="small text-danger"
|
|
>
|
|
<Icon v="exclamation-triangle"/>
|
|
<span class="ml-1"><T>profile.pronounsNotFound</T></span>
|
|
</p>
|
|
</template>
|
|
</ListInput>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="comment"><T>sources.submit.comment</T></label>
|
|
<input type="text" id="comment" class="form-control" v-model="form.comment"
|
|
maxlength="255"/>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="link"><T>sources.submit.link</T></label>
|
|
<input type="url" id="link" class="form-control" v-model="form.link"
|
|
maxlength="255"/>
|
|
</div>
|
|
<div class="form-group">
|
|
<label><T>sources.submit.images</T></label>
|
|
<ImageWidget v-model="form.images" multiple sizes="big,thumb"/>
|
|
</div>
|
|
<div class="form-group" v-if="$isGranted('sources')">
|
|
<label for="key"><T>sources.submit.key</T></label>
|
|
<input type="text" id="key" class="form-control" v-model="form.key"
|
|
maxlength="255"/>
|
|
<p class="small text-muted"><T>sources.submit.keyInfo</T></p>
|
|
</div>
|
|
<div class="alert alert-info" v-if="form.base">
|
|
<Icon v="info-circle"/>
|
|
<T>nouns.editing</T>
|
|
<button class="btn btn-sm float-end" @click="form.base = null">
|
|
<Icon v="times"/>
|
|
</button>
|
|
</div>
|
|
<button class="btn btn-success w-100" :disabled="submitting">
|
|
<Icon v="plus-circle"/>
|
|
<T>sources.submit.action</T>
|
|
</button>
|
|
<p class="small text-muted mt-1"><T>sources.submit.moderation</T></p>
|
|
</form>
|
|
</div>
|
|
<div v-else class="card-body py-5 text-center">
|
|
<T>crud.loginRequired</T>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import {pronounLibrary} from "../src/data";
|
|
import {Source} from "@/src/classes";
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
form: {
|
|
pronouns: [''],
|
|
type: '',
|
|
author: '',
|
|
title: '',
|
|
extra: '',
|
|
year: '',
|
|
fragments: [],
|
|
comment: '',
|
|
images: [],
|
|
link: '',
|
|
key: null,
|
|
base: null,
|
|
},
|
|
|
|
sourceTypes: Source.TYPES,
|
|
|
|
submitting: false,
|
|
afterSubmit: false,
|
|
|
|
pronounLibrary,
|
|
}
|
|
},
|
|
methods: {
|
|
async submit() {
|
|
this.submitting = true;
|
|
try {
|
|
await this.$post(`/sources/submit`, this.form);
|
|
|
|
this.afterSubmit = true;
|
|
this.form = {
|
|
pronouns: [''],
|
|
type: '',
|
|
author: '',
|
|
title: '',
|
|
extra: '',
|
|
year: '',
|
|
fragments: [],
|
|
comment: '',
|
|
images: [],
|
|
link: '',
|
|
key: null,
|
|
base: null,
|
|
}
|
|
} finally {
|
|
this.submitting = false;
|
|
}
|
|
},
|
|
edit(source) {
|
|
this.form = {
|
|
pronouns: source.pronouns,
|
|
type: source.type,
|
|
author: source.author,
|
|
title: source.title,
|
|
extra: source.extra,
|
|
year: source.year,
|
|
fragments: source.fragments,
|
|
comment: source.comment,
|
|
images: source.images,
|
|
link: source.link,
|
|
key: source.key,
|
|
base: source.id,
|
|
}
|
|
this.afterSubmit = false;
|
|
this.$el.scrollIntoView();
|
|
},
|
|
},
|
|
}
|
|
</script>
|