mirror of
https://gitlab.com/PronounsPage/PronounsPage.git
synced 2025-10-18 11:21:37 -04:00
251 lines
11 KiB
Vue
251 lines
11 KiB
Vue
<template>
|
||
<section v-if="$user()">
|
||
<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="table-responsive">
|
||
<table :class="`table table-borderless table-sm table-fixed-${$config.nouns.plurals ? '4' : '3'}`">
|
||
<thead>
|
||
<tr>
|
||
<th v-if="$config.nouns.plurals"></th>
|
||
<th class="text-nowrap">
|
||
<Icon v="mars" />
|
||
<span class="d-none d-md-inline"><T>nouns.masculine</T></span>
|
||
<span class="d-md-none"><T>nouns.masculineShort</T></span>
|
||
</th>
|
||
<th class="text-nowrap">
|
||
<Icon v="venus" />
|
||
<span class="d-none d-md-inline"><T>nouns.feminine</T></span>
|
||
<span class="d-md-none"><T>nouns.feminineShort</T></span>
|
||
</th>
|
||
<th class="text-nowrap">
|
||
<Icon v="neuter" />
|
||
<span class="d-none d-md-inline"><T>nouns.neuter</T></span>
|
||
<span class="d-md-none"><T>nouns.neuterShort</T></span>
|
||
</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<th v-if="$config.nouns.plurals" class="text-nowrap">
|
||
<span class="d-none d-md-inline">⋅ <T>nouns.singular</T></span>
|
||
<span class="d-md-none">⋅ <T>nouns.singularShort</T></span>
|
||
</th>
|
||
<td>
|
||
<NounForm v-model="form.masc" required />
|
||
</td>
|
||
<td>
|
||
<NounForm v-model="form.fem" required />
|
||
</td>
|
||
<td>
|
||
<NounForm v-model="form.neutr" required />
|
||
</td>
|
||
</tr>
|
||
<tr v-if="$config.nouns.plurals">
|
||
<th class="text-nowrap">
|
||
<span class="d-none d-md-inline">⁖ <T>nouns.plural</T></span>
|
||
<span class="d-md-none">⁖ <T>nouns.pluralShort</T></span>
|
||
</th>
|
||
<td>
|
||
<NounForm v-model="form.mascPl" :required="$config.nouns.pluralsRequired" />
|
||
</td>
|
||
<td>
|
||
<NounForm v-model="form.femPl" :required="$config.nouns.pluralsRequired" />
|
||
</td>
|
||
<td>
|
||
<NounForm v-model="form.neutrPl" :required="$config.nouns.pluralsRequired" />
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
<div v-if="$isGranted('sources')" class="form-group">
|
||
<label><strong><T>sources.referenced</T><T>quotation.colon</T></strong></label>
|
||
<ListInput v-model="form.sources" />
|
||
</div>
|
||
<div v-if="form.base" class="alert alert-info">
|
||
<Icon v="info-circle" />
|
||
<T>nouns.editing</T>
|
||
<button class="btn btn-sm float-end" @click="form.base = null">
|
||
<Icon v="times" />
|
||
</button>
|
||
</div>
|
||
|
||
<template v-if="$config.nouns.templates">
|
||
<a v-if="!templateVisible" href="#" class="btn btn-outline-primary w-100 mb-3" @click.prevent="templateVisible = true">
|
||
<Icon v="copy" />
|
||
<T>nouns.template.header</T>
|
||
</a>
|
||
<div v-else class="card mb-3">
|
||
<a href="#" class="card-header" @click.prevent="templateVisible = false">
|
||
<Icon v="copy" />
|
||
<T>nouns.template.header</T>
|
||
</a>
|
||
<div class="card-body">
|
||
<T>nouns.template.root</T><T>quotation.colon</T>
|
||
<input v-model="templateBase" class="form-control form-control-sm d-inline-block w-auto" autofocus>
|
||
<table class="table table-striped table-hover table-fixed-3 mt-2">
|
||
<thead>
|
||
<tr>
|
||
<th class="text-nowrap">
|
||
<Icon v="mars" />
|
||
<span class="d-none d-md-inline"><T>nouns.masculine</T></span>
|
||
<span class="d-md-none"><T>nouns.masculineShort</T></span>
|
||
</th>
|
||
<th class="text-nowrap">
|
||
<Icon v="venus" />
|
||
<span class="d-none d-md-inline"><T>nouns.feminine</T></span>
|
||
<span class="d-md-none"><T>nouns.feminineShort</T></span>
|
||
</th>
|
||
<th class="text-nowrap">
|
||
<Icon v="neuter" />
|
||
<span class="d-none d-md-inline"><T>nouns.neuter</T></span>
|
||
<span class="d-md-none"><T>nouns.neuterShort</T></span>
|
||
</th>
|
||
<th></th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr v-for="(template, i) in templates" :key="i">
|
||
<td>
|
||
<Noun :noun="template" gender="masc" />
|
||
</td>
|
||
<td>
|
||
<Noun :noun="template" gender="fem" />
|
||
</td>
|
||
<td>
|
||
<Noun :noun="template" gender="neutr" />
|
||
</td>
|
||
<th>
|
||
<ul class="list-unstyled list-btn-concise">
|
||
<li>
|
||
<button
|
||
type="button"
|
||
class="btn btn-concise btn-outline-primary btn-sm"
|
||
:disabled="!templateBase"
|
||
@click="applyTemplate(template)"
|
||
>
|
||
<Icon v="copy" />
|
||
<span class="btn-label"><T>nouns.template.apply</T></span>
|
||
</button>
|
||
</li>
|
||
</ul>
|
||
</th>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<button class="btn btn-primary w-100" :disabled="submitting">
|
||
<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>
|
||
<ul v-if="Object.keys(abbreviations).length > 0" class="small text-muted">
|
||
<li v-for="(meaning, abbr) in abbreviations">
|
||
{{ abbr }} – {{ meaning }}
|
||
</li>
|
||
</ul>
|
||
</form>
|
||
</section>
|
||
<section v-else class="text-center">
|
||
<div class="alert alert-info">
|
||
<T>crud.loginRequired</T>
|
||
</div>
|
||
</section>
|
||
</template>
|
||
|
||
<script lang="ts">
|
||
import Vue from 'vue';
|
||
import { nounTemplates, abbreviations } from '../src/data.ts';
|
||
import type { Noun, MinimalNoun } from '../src/classes.ts';
|
||
import type { Config } from '../locale/config.ts';
|
||
|
||
const emptyForm = (config: Config): MinimalNoun => {
|
||
return {
|
||
masc: [''],
|
||
fem: [''],
|
||
neutr: [''],
|
||
mascPl: config.nouns.pluralsRequired ? [''] : [],
|
||
femPl: config.nouns.pluralsRequired ? [''] : [],
|
||
neutrPl: config.nouns.pluralsRequired ? [''] : [],
|
||
sources: [],
|
||
base: null,
|
||
};
|
||
};
|
||
|
||
export default Vue.extend({
|
||
data() {
|
||
return {
|
||
form: emptyForm(this.$config),
|
||
submitting: false,
|
||
afterSubmit: false,
|
||
templateBase: '',
|
||
templateVisible: false,
|
||
abbreviations,
|
||
};
|
||
},
|
||
computed: {
|
||
templates() {
|
||
return nounTemplates.map((template) => {
|
||
return template.fill(this.templateBase || '-');
|
||
});
|
||
},
|
||
},
|
||
methods: {
|
||
async applyTemplate(template: MinimalNoun): Promise<void> {
|
||
if (JSON.stringify(this.form) !== JSON.stringify(emptyForm(this.$config))) {
|
||
await this.$confirm(this.$t('nouns.template.overwrite'));
|
||
}
|
||
this.form = template;
|
||
this.templateVisible = false;
|
||
},
|
||
async submit() {
|
||
this.submitting = true;
|
||
try {
|
||
await this.$post('/nouns/submit', this.form);
|
||
|
||
this.afterSubmit = true;
|
||
this.form = emptyForm(this.$config);
|
||
this.templateVisible = false;
|
||
this.templateBase = '';
|
||
} finally {
|
||
this.submitting = false;
|
||
}
|
||
},
|
||
edit(word: Noun): void {
|
||
this.form = {
|
||
masc: word.masc,
|
||
fem: word.fem,
|
||
neutr: word.neutr,
|
||
mascPl: word.mascPl,
|
||
femPl: word.femPl,
|
||
neutrPl: word.neutrPl,
|
||
sources: word.sources,
|
||
base: word.id,
|
||
};
|
||
this.afterSubmit = false;
|
||
this.$el.scrollIntoView();
|
||
},
|
||
},
|
||
});
|
||
</script>
|