cssd-front/src/views/Label/AddEdit.vue

<template>
	<v-form ref="form">
		<v-container grid-list-xs fluid>
			<material-card color="black" title="Add Label on Set ">
				<v-layout wrap class="px-5 my-3">

					<v-flex xs12 md3 sm3 class="WM-FlexCenter pl-3">
						<v-icon class="fas fa-sort-numeric-up mr-2 WM-Margin-B-8"></v-icon>
						<v-text-field name="sterilizerId" label="Sterilizer ID" color="black"
							v-model="formData.sterilizer_id" class="py-3 pr-3"></v-text-field>
					</v-flex>
					<v-flex xs12 sm6 md3 class="WM-FlexCenter pl-3">
						<v-icon class="fas fa-sort-numeric-up mr-2 WM-Margin-B-8"></v-icon>
						<v-text-field name="cycle_number" label="Cycle Number" color="black" v-model="formData.cycle_number"
							class="py-3 pr-3"></v-text-field>
					</v-flex>
					<v-flex xs12 sm6 md3 class="WM-FlexCenter pl-3">
						<v-icon class="fas fa-sort-numeric-up mr-2 WM-Margin-B-8"></v-icon>
						<v-text-field name="lot_number" label="Lot Number" color="black" readonly v-model="lotNumber"
							class="py-3 pr-3"></v-text-field>
					</v-flex>
					<v-spacer></v-spacer>
					<v-flex xs12 sm6 md3 class="WM-FlexCenter">
						<v-icon class="fas fa-check mr-2 WM-Margin-B-8"></v-icon>
						<v-autocomplete color="black" :items="items" item-text="name" v-model="formData.package_id"
							item-value="id" label="Package ID" class="py-3 pr-3" :filter="customFilter">
							<template v-slot:chip="{ item }">
								{{ item.name }} - {{ item.udi }}
							</template>

							<template v-slot:item="{ item }">
								{{ item.name }} - {{ item.udi }}
							</template>
						</v-autocomplete>
					</v-flex>
					<v-flex xs12 sm6 md2 class="WM-FlexCenter pl-3">
						<v-icon class="far fa-calendar-alt mr-2"></v-icon>
						<v-menu lazy :close-on-content-click="true" transition="v-scale-transition" offset-y
							v-model="fromMenuSterile">
							<v-text-field required slot="activator" label="Sterile Date" color="black" class="pr-3"
								v-model="formData.sterile_date">
							</v-text-field>
							<v-date-picker color="pink" no-title v-model="formData.sterile_date"
								:date-format="date => new Date(date).toDateString()"></v-date-picker>
						</v-menu>
					</v-flex>
					<v-flex xs12 sm6 md2 class="WM-FlexCenter pl-3">
						<v-icon class="far fa-calendar-alt mr-2"></v-icon>
						<v-menu lazy :close-on-content-click="true" transition="v-scale-transition" offset-y
							v-model="fromMenuExpire">
							<v-text-field required slot="activator" label="Expire Date" color="black" class="pr-3"
								v-model="formData.expire_date">
							</v-text-field>
							<v-date-picker :show-current="showCurrent" min="2020-01-01" color="pink" no-title
								v-model="formData.expire_date"
								:date-format="date => new Date(date).toDateString()"></v-date-picker>
						</v-menu>
					</v-flex>
				</v-layout>

				<v-layout row wrap justify-center align-center>
					<v-flex xs12 md2 sm2 class="text-md-center text-xs-center">
						<v-btn class="WM-CyanBlueGradient-BG" style="padding:10px 60px" @click="submitForm()">
							<v-icon class="white--text mr-2 caption">fas fa-check</v-icon>
							<span class="white--text">SAVE</span>
						</v-btn>
					</v-flex>
					<v-flex xs12 md2 sm2 class="text-md-center text-sm-center text-xs-center">
						<router-link :to="{ name: 'AllLabels' }">
							<v-btn class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black">
								<v-icon class="black--text">keyboard_arrow_left</v-icon>
								<span class="black--text">Back</span>
							</v-btn>
						</router-link>
					</v-flex>
				</v-layout>
			</material-card>
		</v-container>
	</v-form>
</template>

<script>
import { ApiService } from "@/services";
import { urls } from "@/config/urls";
import { mapMutations } from "vuex";
export default {
	data() {
		return {
			showCurrent: false,
			fromMenuSterile: false,
			fromMenuExpire: false,
			formData: {
				result: "",
				package_id: "",
				expire_date: "2020-01-01",
				sterilizer_id: '',
				cycle_number: '',
				sterile_date: new Date().toISOString().substr(0, 10)
			},
			items: [],
			rules: {
				required: value => !!value || "Required.",
				counter: value =>
					!value ||
					value.length == 0 ||
					value.length >= 5 ||
					"Min 5 characters"
			}
		};
	},
	created() {
		if (this.$route.params.label) {
			this.load(this.$route.params.label);
		}
		this.loadItems();
	},
	computed: {
		lotNumber() {
			return this.formData.sterilizer_id + ' - ' + this.formData.cycle_number;
		}
	},
	methods: {
		customFilter(item, queryText) {
			const name = item.name.toLowerCase();
			const udi = item.udi ? item.udi.toLowerCase() : null;
			const searchText = queryText.toLowerCase();
			if (udi) {
				return name.indexOf(searchText) > -1 ||
					udi.indexOf(searchText) > -1
			}
			return name.indexOf(searchText) > -1
		},
		async load(id) {
			const result = await ApiService.get(urls.editLabel(id));
			if (result.status == 200) {
				this.formData = result.data.data;
			}
		},
		async loadItems() {
			const result = await ApiService.get(urls.listAllPackage());
			if (result.status == 200) {
				this.items = result.data.data;
			}
		},
		async submitForm() {
			let result;
			this.formData['lot_number'] = this.lotNumber;
			if (this.$route.params.label) {
				result = await ApiService.put(
					urls.updateLabel(this.$route.params.label),
					this.formData
				);
			} else {
				result = await ApiService.post(
					urls.storeLabel,
					this.formData
				);
			}

			if (result && result.status == 200) {
				this.$router.push({ name: 'AllLabels' });
			}
		}
	}
};
</script>
<style>
.v-btn--floating {
	padding: 0 !important;
}

.theme--light.v-btn.v-btn--flat {
	color: rgba(0, 0, 0, .87) !important;
}

.v-btn--floating,
.v-btn--icon:before {
	border-radius: 50% !important;
}
</style>