cssd-back/resources/js/vue/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"
							v-model="formData.lot_number"
							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="Select Package For Label"
							class="py-3 pr-3"
						></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
								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 {
			fromMenuSterile: false ,
			fromMenuExpire: false,
			formData: {
				result: "",
				package_id: ""
			},
			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();
	},
	methods: {
		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;
			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>