pack && packages && items && cycle

resources/js/vue/views/Cycle/AddEdit.vue

@@ -3,7 +3,7 @@
         <v-container grid-list-xs fluid>
             <material-card color="black" title="Add Cycle">
                 <v-layout align-center justify-center wrap class="px-5 my-3">
-                    <v-flex xs12 sm4 md4>
+                    <v-flex xs12 sm6 md4>
                         <v-text-field
                             name="name"
                             label="Name"
@@ -13,30 +13,58 @@
                             class="pa-2"
                         ></v-text-field>
                     </v-flex>
-                    <v-flex xs12 sm4 md4>
-                        <v-select
-                            :items="result"
-                            label="Result"
-                            name="result"
-                            v-model="formData.result"
-                            single-line
-                            :rules="[rules.required]"
-                            class="pa-2"
+                    <v-flex xs12 sm6 md4>
+                        <v-text-field
+                            name="sterilizer_id"
+                            label="Sterilizer ID"
                             color="black"
-                        ></v-select>
+                            v-model="formData.sterilizer_id"
+                            class="pa-2"
+                        ></v-text-field>
                     </v-flex>
-                </v-layout>
-                <v-layout align-center justify-center wrap class="px-5 mb-3">
-                    <v-flex xs12 sm12 md12>
+                    <v-flex xs12 sm6 md4>
+                        <v-text-field
+                            name="cycle_number"
+                            label="Cycle Number"
+                            color="black"
+                            v-model="formData.cycle_number"
+                            class="pa-2"
+                        ></v-text-field>
+                    </v-flex>
+                    <v-flex xs12 sm6 md4>
+						<v-menu
+							lazy
+							:close-on-content-click="true"
+							transition="v-scale-transition"
+							offset-y
+							v-model="fromMenuDate"
+						>
+							<v-text-field required slot="activator" label="Date" v-model="formData.date"></v-text-field>
+							<v-date-picker
+								color="pink"
+								no-title
+								v-model="formData.date"
+								:date-format="date => new Date(date).toDateString()"
+							></v-date-picker>
+						</v-menu>
+					</v-flex>
+                    <v-flex xs12 sm6 md8>
                         <v-autocomplete
                             multiple
-                            :items="packages"
+                            :items="packs"
                             item-text="name"
                             item-value="id"
-                            v-model="formData.packages"
-                            label="Select Packages For Cycle"
+                            v-model="formData.packs"
+                            label="Select Packs For Cycle"
                         ></v-autocomplete>
                     </v-flex>
+                    <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>
+							</template>
+						</v-textarea>
+					</v-flex>
                 </v-layout>
                 <v-layout row wrap justify-center align-center>
                     <v-flex xs12 md2 sm2 class="text-md-center text-xs-center">
@@ -70,14 +98,13 @@ import { mapMutations } from "vuex";
 export default {
     data() {
         return {
+            fromMenuDate: false,
             formData: {
                 name: "",
-                result: "",
                 description: "",
-                packages: []
+                packs: []
             },
-            packages: [],
-            result: ["Pass", "Fail"],
+            packs: [],
             rules: {
                 required: value => !!value || "Required.",
                 counter: value =>
@@ -92,7 +119,7 @@ export default {
         if (this.$route.params.cycle) {
             this.load(this.$route.params.cycle);
         }
-        this.loadPackages();
+        this.loadPacks();
     },
     methods: {
         async load(id) {
@@ -101,10 +128,10 @@ export default {
                 this.formData = result.data.data;
             }
         },
-        async loadPackages() {
-            const result = await ApiService.get(urls.listAllPackage());
+        async loadPacks() {
+            const result = await ApiService.get(urls.listAllPack());
             if (result.status == 200) {
-                this.packages = result.data.data;
+                this.packs = result.data.data;
             }
         },
         async submitForm() {
@@ -127,4 +154,15 @@ export default {
         }
     }
 };
-</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>