vue-form.js

<template>
	<section>
		<b-form @submit="onSubmit" @reset="onReset">
			<b-form-group id="input-group-name" label="First Name:" label-for="input-name">
				<b-form-input
					:disabled="disabled"
					id="input-name"
					v-model="form.name"
					required
					placeholder="Enter first name (required)"
				></b-form-input>
			</b-form-group>

			<b-form-group id="input-group-middle-name" label="Middle Name:" label-for="input-middle-name">
				<b-form-input
					:disabled="disabled"
					id="input-middle-name"
					v-model="form.middleName"
					placeholder="Enter middle name"
				></b-form-input>
			</b-form-group>

			<b-form-group id="input-group-last-name" label="Last Name:" label-for="input-last-name">
				<b-form-input
					:disabled="disabled"
					id="input-last-name"
					v-model="form.lastName"
					required
					placeholder="Enter last name (required)"
				></b-form-input>
			</b-form-group>

			<b-form-group v-if="!type" id="input-group-type" label="Type" label-for="input-type">
				<b-form-select
					:disabled="disabled"
					v-model="form.type"
					:options="typeOptions"
				></b-form-select>
			</b-form-group>

			<b-form-group id="input-group-birthday" label="Birth Date" label-for="input-birthday">
				<b-input-group>
					<b-input-group-prepend>
						<b-form-datepicker
							:disabled="disabled"
							v-model="form.birthDate"
							button-only
							show-decade-nav
							left
							locale="en-US"
							aria-controls="input-birthday"
							:hide-header="true"
							@context="onContext"
						></b-form-datepicker>
					</b-input-group-prepend>
					<b-form-input
						id="input-birthday"
						v-model="form.birthDate"
						:disabled="disabled"
						type="text"
						placeholder="YYYY-MM-DD"
						autocomplete="off"
					></b-form-input>
				</b-input-group>
			</b-form-group>

			<b-form-group id="input-group-drivers-license" label="Drivers License:" label-for="input-drivers-license">
				<b-form-input
					:disabled="disabled"
					id="input-drivers-license"
					v-model="form.driversLicense"
					placeholder="Enter drivers license"
				></b-form-input>
			</b-form-group>

			<b-form-group id="input-group-social-security-number" label="SSN:" label-for="input-social-security-number">
				<b-form-input
					id="input-social-security-number"
					:disabled="disabled"
					:formatter="ssnFormat"
					type="text"
					v-model="form.taxId"
				></b-form-input>
			</b-form-group>

			<b-button type="submit" variant="primary">Submit</b-button>
		</b-form>
	</section>
</template>
<script>

import { People } from "../../api/people";

let defaultFormValues = {
	name: "",
	middleName: "",
	lastName: "",
	type: null,
	birthDate: "",
	driversLicense: "",
	taxId: ""
};

export default {
	name: "PersonForm",
	props: ["disabled", "original", "type"],
	data () {
		return {
			form: { ...defaultFormValues },
			typeOptions: [
				{ value: null, text: "Please select a type, if appropriate" },
				{ value: "opponent", text: "Opponent" },
				{ value: "attorney", text: "Attorney" },
				{ value: "referrer", text: "Referrer" },
				{ value: "property_manager", text: "Property Manager" }
			]
		};
	},
	created () {
		if (this.original) {
			this.updateDefaultFormValues(this.original);
			this.reset();
		}
		if (this.type) this.form.type = this.type;
	},
	methods: {
		onSubmit (evt) {
			evt.preventDefault();
			if (this.original) this.put();
			else this.post();
		},
		onReset (evt) {
			evt.preventDefault();
			this.reset();
		},
		onContext (context) {
			this.formatted = context.selectedFormatted;
			this.selected = context.selectedYMD;
		},
		post () {
			People.post(this.form).then(response => {
				this.emitAlert(`Successfully created ${response.data.entityName}`, "success");
				this.$emit("save", response.data);
			}).catch(error => this.emitAlert(error.response.data.message, "danger"));
		},
		put () {
			People.put(this.original.id, this.form).then(response => {
				this.emitAlert(`Successfully updated ${response.data.entityName}`, "success");
				this.$emit("save", response.data);
			}).catch(error => this.emitAlert(error.response.data.message, "danger"));
		},
		reset () {
			this.form = { ...defaultFormValues };
		},
		ssnFormat (value) {
			value = value.replace(/[^0-9]/g, "");
			if (value.length <= 4) return value;
			if (value.length <= 5) return value.replace(/(\d{3})(\d{2})/, "$1-$2");
			return value.replace(/(\d{3})(\d{2})/, "$1-$2-").replace(/(\d{4})(\d*)/, "$1");
		},
		updateDefaultFormValues (newDefaults) {
			const defaults = [];
			// newDefaults.taxId = newDefaults.taxIdHidden;
			Object.keys(defaultFormValues).forEach(key => { defaults[key] = newDefaults[key]; });
			defaultFormValues = defaults;
		},
		emitAlert (message, color) {
			this.$emit("alert", message, color);
		}
	},
	watch: {
		original (newVal) {
			this.updateDefaultFormValues(newVal);
			this.reset();
		}
	}
};
</script>