Vue sample code

TapiCmsForm.vue

<template>
	<CmsForm
		ref="form"
		class="tap-form"
		:title="title"
		:cancelText="cancelText"
		:submitText="submitText"
		:canDelete="canDelete"
		entityDesignator="ce taraud"
		@cancel="onCancel"
		@submit="onSubmit"
		@delete="doDelete">
		<template slot="fields">
			<div class="tap-form__field">
				<SelectField
					:class="{
						'tap-form__diameter': true,
						'tap-form__diameter--error': hasErrorFor('diameter'),
					}"
					:hasError="hasErrorFor('diameter')"
					name="diameter"
					:disabled="!isCreating"
					:value="edit.diameter"
					@input="onDiameter"
					:options="diameters"
					placeholder="Diamètre"
					:option-key="diameterKey"
					:option-label="diameterLabel"/>

				<p v-if="hasErrorFor('diameter')" class="tap-form__error">
					{{ errors.diameter }}
				</p>
			</div>

			<div class="tap-form__field">
				<label for="pitch" class="tap-form__label">Pas</label>
				<NumberInput
					:class="{
						'tap-form__pitch': true,
						'tap-form__pitch--error': hasErrorFor('pitch'),
					}"
					:hasError="hasErrorFor('pitch')"
					name="pitch"
					:value="edit.pitch"
					@change="onPitch"/>

				<p v-if="hasErrorFor('pitch')" class="tap-form__error">
					{{ errors.pitch }}
				</p>
			</div>

			<div class="tap-form__field">
				<SelectField
					:class="{
						'tap-form__norm': true,
						'tap-form__norm--error': hasErrorFor('norm'),
					}"
					:hasError="hasErrorFor('norm')"
					name="norm"
					:disabled="!isCreating"
					:value="edit.norm"
					@input="onNorm"
					:options="norms"
					placeholder="Norme"
					:option-key="normKey"
					:option-label="normLabel"/>

				<p v-if="hasErrorFor('norm')" class="tap-form__error">
					{{ errors.norm }}
				</p>
			</div>

			<div class="tap-form__field">
				<FormField
					class="tap-form__name"
					name="name"
					:value="edit.name"
					@input="onName"
					label="Nom"
					:error="errors.name"/>
			</div>

			<div class="tap-form__field">
				<FormField
					class="tap-form__url"
					name="url"
					:value="edit.url"
					@input="onUrl"
					label="URL"
					:error="errors.url"/>
			</div>
		</template>
	</CmsForm>
</template>

<script>
	import VueTypes from "vue-types"
	import { get, call } from "vuex-pathify"
	import NumberInput from "@/components/NumberInput"
	import FormField from "@/components/FormField"
	import SelectField from "@/components/SelectField"
	import CmsForm from "@/components/cms/forms/CmsForm"
	import permissions from "@/mixins/permissions"

	const vuex_module = "cms_taps";

	export default {
		mixins: [
			permissions,
		],
		props: {
			title: VueTypes.string.isRequired,
			cancelText: VueTypes.string.def("Annuler"),
			submitText: VueTypes.string.def("Valider"),
		},
		inject: [
			"updater",
		],
		components: {
			CmsForm,
			NumberInput,
			FormField,
			SelectField,
		},
		mounted(){
			["LOAD_DIAMETERS", "LOAD_NORMS"]
			.forEach(action => {
				this.$store.dispatch(`formBuilding/${action}`, {
					vm: this,
				});
			});
		},
		computed: {
			...get("formBuilding", [
				"diameters",
				"norms",
				"diameterKey",
				"diameterLabel",
				"normKey",
				"normLabel",
			]),
			...get(vuex_module, [
				"edit",
				"isEditing",
				"isCreating",
				"errors",
				"hasErrorFor",
			]),
			canDelete(){
				return this.can('delete_taps')
						&& this.isEditing
						&& !this.isCreating;
			}
		},
		methods: {
			onDiameter(payload){
				if(payload === null || !this.isCreating)
					return;

				const { [this.diameterKey]: id, [this.diameterLabel]: diameter } = payload;

				this.updater({
					key: "diameter",
					value: diameter,
					vm: this,
				});

				this.updater({
					key: "id",
					value: id,
					vm: this,
					skipCheck: true,
				});
			},
			onNorm(payload){
				if(payload === null || !this.isCreating)
					return;

				const { [this.normKey]: norm_id, [this.normLabel]: norm } = payload;

				this.updater({
					key: "norm",
					value: norm,
					vm: this,
				});

				this.updater({
					key: "norm_id",
					value: norm_id,
					vm: this,
					skipCheck: true,
				});
			},
			onPitch(value){
				this.updater({
					key: "pitch",
					value,
					vm: this,
				});
			},
			onUrl(value){
				this.updater({
					key: "url",
					value,
					vm: this,
				});
			},
			onName(value){
				this.updater({
					key: "name",
					value,
					vm: this,
				});
			},
			...call(vuex_module, {
				performDelete: "DELETE",
			}),
			onCancel(){
				this.$emit("cancel");
			},
			onSubmit(){
				this.$emit("submit");
			},
			doDelete(){
				this.performDelete({
					vm: this,
				});
				this.$emit("delete");
			},
			stopDeleting(){
				return this.$refs.form.stopDeleting();
			}
		},
	}
</script>

<style lang="scss" scoped>
	@use "~@scss/components/cms/forms/TapCmsForm" as *;
</style>