Next Edit

resources/js/vue/views/TestResult/AddEdit.vue

@@ -0,0 +1,138 @@
+<template>
+  <v-form>
+    <v-container grid-list-xs>
+      <material-card
+        color="black"
+        title="Submit Test Result">
+        <v-layout align-center justify-center wrap class="px-5 my-3">
+          <v-flex xs12 sm4 md4>
+            <v-autocomplete
+              :search-input.sync="searchInput"
+              :items="testTypeNames"
+              v-model="filter.name"
+              label="Choose Test Type"
+              color="black"
+              class="pa-2"
+            ></v-autocomplete>
+          </v-flex>
+          <v-flex xs12 sm3 md3>
+            <v-text-field
+              name="testcode"
+              v-model="filter.unique_code"
+              label="Or Enter Test Unique Code"
+              color="black"
+              class="pa-2"
+            ></v-text-field>
+          </v-flex>
+          <v-flex xs12 md2 sm2 class="text-xs-center text-sm-center text-md-center">
+            <v-btn class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black" @click="selectTestType" style="padding:10px 60px;">
+              <v-icon class="black--text mr-2 caption">fas fa-chevron-right</v-icon>
+              <span class="black--text">GO</span>
+            </v-btn>
+          </v-flex>
+        </v-layout>
+        <v-layout row wrap class="px-5 my-3">
+          <v-divider></v-divider>
+        </v-layout>
+        <v-layout align-center justify-center wrap class="px-5 my-3">
+          <v-flex xs12 sm4 md3>
+            <v-text-field
+              name="autoclave"
+              v-model="form.autoclave_id"
+              label="ID AutoClave"
+              color="black"
+              class="pa-2"
+            ></v-text-field>
+          </v-flex>
+          <v-flex xs12 sm4 md3>
+            <v-select
+              :items="result"
+              v-model="form.result"
+              label="Resualt"
+              color="black"
+              class="pa-2"
+            ></v-select>
+          </v-flex>
+          <v-flex v-for="(item, key) in form.data" :key="key">
+            <v-text-field
+              v-if="item.type == 'Text'"
+              v-model="form.data[key][item.name]"
+              label="Resualt"
+              color="black"
+              class="pa-2"
+            ></v-text-field>
+            <v-select
+              v-if="item.type == 'Select'"
+              :items="item.options"
+              v-model="form.data[key][item.name]"
+              label="Resualt"
+              color="black"
+              class="pa-2"
+              item-text="title"
+            ></v-select>
+            <template v-if="item.type == 'CheckBox'">
+              <v-container  fluid v-for="(optionValue, keyOption) in item.options" :key="keyOption">
+                <v-checkbox :label="option.title" v-model="form.data[key][item.name]" :value="optionValue"></v-checkbox>
+              </v-container>
+            </template>
+            <!-- <template v-if="item.type == 'Form'">
+
+            </template> -->
+          </v-flex>
+        </v-layout>
+        <v-layout row wrap class="px-5 my-3">
+          <v-divider></v-divider>
+        </v-layout>
+        <v-layout align-center justify-center wrap class="px-5 mt-2">
+          <v-btn class="WM-CyanBlueGradient-BG" style="padding:10px 60px">
+            <v-icon class="white--text mr-2 caption">fas fa-check</v-icon>
+            <span class="white--text">SAVE</span>
+          </v-btn>
+          <router-link :to="{name: 'Dashboard'}">
+            <v-btn class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black ml-5">
+              <v-icon class="black--text mr-2 caption">fas fa-chevron-left</v-icon>
+              <span class="black--text">Back</span>
+            </v-btn>
+          </router-link>
+        </v-layout>
+     </material-card>
+    </v-container>
+  </v-form>
+</template>
+<script>
+import { ApiService } from "@/services";
+import { urls } from "@/config/urls";
+export default {
+  data: () => ({
+    result: [
+      'Accept',
+      'Reject',
+    ],
+    testTypeNames: [],
+    searchInput: '',
+    form: {
+      autoclave_id: '',
+      result: '',
+      data: [
+
+      ]
+    },
+    filter: {
+      name:'',
+      unique_code:''
+    }
+  }),
+  created() {
+    this.load();
+  },
+  methods:{
+    async load() {
+      const result = await ApiService.get(urls.listTestTypeName);
+      this.testTypeNames = result.data.data;
+    },
+    selectTestType() {
+
+    }
+  }
+}
+</script>