This repository has been archived on 2024-07-22. You can view files and clone it, but cannot push or open issues or pull requests.
Zaimki/components/TermsSubmitForm.vue

158 lines
5.9 KiB
Vue
Raw Normal View History

2020-12-18 08:32:18 -08:00
<template>
<section v-if="$user()">
2020-12-18 08:32:18 -08:00
<div v-if="afterSubmit" class="alert alert-success text-center">
<p>
<T>nouns.submit.thanks</T>
</p>
<p>
<button class="btn btn-success" @click="afterSubmit = false">
<Icon v="plus"/>
<T>nouns.submit.another</T>
</button>
</p>
</div>
<form v-else @submit.prevent="submit">
<div class="row">
<div class="col-12 col-lg-6">
<div class="form-group">
<label class="text-nowrap"><strong>
<T>terminology.term</T>
</strong></label>
<NounForm v-model="form.term" required maxlength="128"/>
</div>
</div>
<div class="col-12 col-lg-6">
<div class="form-group">
<label class="text-nowrap"><strong>
<T>terminology.original</T>
</strong></label>
<NounForm v-model="form.original" maxlength="1024"/>
</div>
</div>
</div>
<div class="form-group">
<label class="text-nowrap"><strong>
<T>terminology.definition</T>
</strong></label>
<textarea v-model="form.definition" class="form-control form-control-sm" required rows="6"></textarea>
</div>
<div class="form-group">
2021-12-02 08:18:25 -08:00
<label><strong><T>terminology.category</T><T>quotation.colon</T></strong></label>
<a v-for="category in config.terminology.categories"
href="#" :class="['badge border mx-1 text-decoration-none', form.categories.includes(category) ? 'bg-primary text-white' : 'bg-light text-primary']"
@click.prevent="form.categories = form.categories.includes(category) ? form.categories.filter(c => c !== category) : [...form.categories, category]"
>
{{ category }}
</a>
</div>
<div class="row" v-if="$isGranted('terms')">
2021-07-30 03:51:12 -07:00
<div class="col-12 col-lg-4">
<label for="key"><strong><T>sources.submit.key</T></strong></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="col-12 col-lg-4">
<div class="form-group">
<label class="text-nowrap"><strong>
2020-12-21 10:33:41 -08:00
<T>profile.flags</T>
</strong></label>
<ListInput v-model="form.flags" v-slot="s"/>
</div>
</div>
2021-07-30 03:51:12 -07:00
<div class="col-12 col-lg-4">
<div class="form-group">
<label class="text-nowrap"><strong>
<T>terminology.images</T>
</strong></label>
<ImageWidget v-model="form.images" multiple sizes="flag"/>
</div>
</div>
2020-12-18 08:32:18 -08:00
</div>
<div class="alert alert-info" v-if="form.base">
<Icon v="info-circle"/>
<T>nouns.editing</T>
2021-01-22 14:54:24 -08:00
<button class="btn btn-sm float-end" @click="form.base = null">
2020-12-18 08:32:18 -08:00
<Icon v="times"/>
</button>
</div>
2021-01-22 14:54:24 -08:00
<button class="btn btn-primary w-100" :disabled="submitting">
2020-12-18 08:32:18 -08:00
<template v-if="submitting">
<Icon v="circle-notch fa-spin"/>
</template>
<template v-else>
<Icon v="plus"/>
<T>nouns.submit.actionLong</T>
</template>
</button>
<p class="small text-muted mt-1"><T>nouns.submit.moderation</T></p>
</form>
</section>
<section v-else class="text-center">
<div class="alert alert-info">
<T>crud.loginRequired</T>
</div>
</section>
2020-12-18 08:32:18 -08:00
</template>
<script>
export default {
data() {
return {
form: {
term: [''],
original: [],
2021-07-30 03:51:12 -07:00
key: '',
2020-12-18 08:32:18 -08:00
definition: '',
categories: [],
2020-12-21 10:33:41 -08:00
flags: [],
images: [],
2020-12-18 08:32:18 -08:00
base: null,
},
submitting: false,
afterSubmit: false,
}
},
methods: {
async submit(event) {
this.submitting = true;
try {
await this.$post(`/terms/submit`, this.form);
2020-12-18 08:32:18 -08:00
this.afterSubmit = true;
this.form = {
term: [''],
original: [],
2021-07-30 03:51:12 -07:00
key: '',
definition: '',
categories: [],
flags: [],
images: [],
base: null,
};
} finally {
this.submitting = false;
}
2020-12-18 08:32:18 -08:00
},
edit(word) {
this.form = {
term: word.term,
original: word.original,
2021-07-30 03:51:12 -07:00
key: word.key,
2020-12-18 08:32:18 -08:00
definition: word.definition,
categories: word.categories,
2020-12-21 10:33:41 -08:00
flags: word.flags,
images: word.images,
2020-12-18 08:32:18 -08:00
base: word.id,
}
this.afterSubmit = false;
this.$el.scrollIntoView();
}
},
};
</script>