pack && packages && items && cycle

resources/js/vue/views/Pack/AddEdit.vue

@@ -1,9 +1,9 @@
 <template>
 	<v-form ref="form">
 		<v-container grid-list-xs fluid>
-			<material-card color="black" title="Add Package">
+			<material-card color="black" title="Add Label on Set ">
 				<v-layout align-center justify-center wrap class="px-5 my-3">
-					<v-flex xs12 sm6 md4>
+					<v-flex xs12 sm6 md3>
 						<v-text-field
 							name="name"
 							label="Name"
@@ -13,7 +13,7 @@
 							class="pa-2"
 						></v-text-field>
 					</v-flex>
-					<v-flex xs12 sm6 md4>
+					<v-flex xs12 sm6 md3>
 						<v-text-field
 							name="sterilizerId"
 							label="Sterilizer ID"
@@ -22,7 +22,7 @@
 							class="pa-2"
 						></v-text-field>
 					</v-flex>
-					<v-flex xs12 sm6 md4>
+					<v-flex xs12 sm6 md3>
 						<v-text-field
 							name="cycle_number"
 							label="Cycle Number"
@@ -31,7 +31,26 @@
 							class="pa-2"
 						></v-text-field>
 					</v-flex>
-					<v-flex xs12 sm6 md4>
+					<v-flex xs12 sm6 md3>
+						<v-text-field
+							name="lot_number"
+							label="Lot Number"
+							color="black"
+							v-model="formData.cycle_number"
+							class="pa-2"
+						></v-text-field>
+					</v-flex>
+					<v-flex xs12 sm6 md3>
+						<v-autocomplete
+							multiple
+							:items="items"
+							item-text="name"
+							v-model="formData.items"
+							item-value="id"
+							label="Select Package For Pack"
+						></v-autocomplete>
+					</v-flex>
+					<v-flex xs12 sm6 md3>
 						<v-text-field
 							name="department"
 							label="Department"
@@ -40,12 +59,46 @@
 							class="pa-2"
 						></v-text-field>
 					</v-flex>
+					<v-flex xs12 sm6 md3>
+						<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" 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 md3>
+						<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" 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 align-center justify-center wrap class="px-5 mb-3">
 					<v-flex xs12 sm12 md12>
 						<v-textarea color="black" v-model="formData.description" class="pa-2" name="address">
 							<template v-slot:label>
-								<div>description</div>
+								<div>Description</div>
 							</template>
 						</v-textarea>
 					</v-flex>
@@ -58,7 +111,7 @@
 						</v-btn>
 					</v-flex>
 					<v-flex xs12 md2 sm2 class="text-md-center text-sm-center text-xs-center">
-						<router-link :to="{name: 'AllPackage'}">
+						<router-link :to="{name: 'AllPack'}">
 							<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>
@@ -78,6 +131,8 @@ import { mapMutations } from "vuex";
 export default {
 	data() {
 		return {
+			fromMenuSterile: false ,
+			fromMenuExpire: false,
 			formData: {
 				name: "",
 				result: "",
@@ -85,7 +140,6 @@ export default {
 				items: []
 			},
 			items: [],
-			result: ["Pass", "Fail"],
 			rules: {
 				required: value => !!value || "Required.",
 				counter: value =>
@@ -97,42 +151,53 @@ export default {
 		};
 	},
 	created() {
-		if (this.$route.params.package) {
-			this.load(this.$route.params.package);
+		if (this.$route.params.pack) {
+			this.load(this.$route.params.pack);
 		}
 		this.loadItems();
 	},
 	methods: {
 		async load(id) {
-			const result = await ApiService.get(urls.editPackage(id));
+			const result = await ApiService.get(urls.editPack(id));
 			if (result.status == 200) {
 				this.formData = result.data.data;
 			}
 		},
 		async loadItems() {
-			const result = await ApiService.get(urls.listAllItem());
+			const result = await ApiService.get(urls.listAllPackage());
 			if (result.status == 200) {
 				this.items = result.data.data;
 			}
 		},
 		async submitForm() {
 			let result;
-			if (this.$route.params.package) {
+			if (this.$route.params.pack) {
 				result = await ApiService.put(
-					urls.updatePackage(this.$route.params.package),
+					urls.updatePack(this.$route.params.pack),
 					this.formData
 				);
 			} else {
 				result = await ApiService.post(
-					urls.storePackage,
+					urls.storePack,
 					this.formData
 				);
 			}
 
 			if (result && result.status == 200) {
-				this.$router.push({ name: "AllPackage" });
+				this.$router.push({ name: "AllPack" });
 			}
 		}
 	}
 };
-</script>
+</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>