PronounsPage/components/NounSubmitForm.vue

228 lines
8.8 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<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="row">
<div v-if="config.nouns.plurals" class="col-12 col-md text-nowrap mt-md-4">
<label><strong>⋅ <T>nouns.singular</T></strong></label>
</div>
<div v-for="gender in genders" :key="gender" class="col-6 col-sm">
<label><strong><NounGenderLabel :gender="gender" /></strong></label>
<ListInput
v-model="form[gender]"
:maxlength="36"
:minitems="1"
/>
</div>
</div>
<div v-if="config.nouns.plurals" class="row">
<div class="col-12 col-md text-nowrap">
<label><strong>⁖ <T>nouns.plural</T></strong></label>
</div>
<div v-for="gender in genders" :key="gender" class="col-6 col-sm">
<label class="d-md-none"><strong><NounGenderLabel :gender="gender" /></strong></label>
<ListInput
v-model="form[`${gender}Pl`]"
:maxlength="36"
:minitems="config.nouns.pluralsRequired ? 1 : 0"
/>
</div>
</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?.enabled">
<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">
<div class="input-group mb-3 bg-white">
<span class="input-group-text">
<Icon v="scroll-old" />
</span>
<input
v-model="templateBase"
class="form-control form-control-sm border-primary"
autofocus
:placeholder="$t('nouns.template.root')"
>
<template v-if="config.nouns.templates.filter">
<span class="input-group-text">
<Icon v="filter" />
</span>
<input
ref="templateFilter"
v-model="templateFilter"
class="form-control form-control-sm border-primary"
:placeholder="$t('crud.filterLong')"
>
<button
v-if="templateFilter"
class="btn btn-sm btn-outline-danger"
@click="templateFilter = ''; $tRefs.templateFilter?.focus()"
>
<Icon v="times" />
</button>
</template>
</div>
<NounTemplatesTable :template-base="templateBase" :filter="templateFilter">
<template #buttons="{ template }">
<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>
</template>
</NounTemplatesTable>
</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 { defineComponent, ref } from 'vue';
import { abbreviations } from '../src/data.ts';
import { genders } from '../src/classes.ts';
import useConfig from '../composables/useConfig.ts';
import type { Noun, MinimalNoun } from '../src/classes.ts';
import type { Config } from '../locale/config.ts';
interface Refs {
templateFilter: HTMLInputElement | undefined;
}
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 defineComponent({
setup() {
const config = useConfig();
return {
config,
form: ref(emptyForm(config)),
};
},
data() {
return {
submitting: false,
afterSubmit: false,
templateBase: '',
templateFilter: '',
templateVisible: false,
abbreviations,
genders,
};
},
computed: {
$tRefs(): Refs {
return this.$refs as unknown as Refs;
},
},
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;
this.$nextTick(() => {
this.$el.scrollIntoView();
});
},
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>