Show Test Result

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

@@ -2,7 +2,13 @@
   <v-form ref="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-if="!$route.params.testResult">
+        <v-layout
+          align-center
+          justify-center
+          wrap
+          class="px-5 my-3"
+          v-if="!$route.params.testResult"
+        >
           <v-flex xs12 sm4 md4>
             <v-autocomplete
               :search-input.sync="searchInput"
@@ -55,6 +61,15 @@
               class="pa-2"
             ></v-select>
           </v-flex>
+          <v-flex xs12 sm4 md3>
+             <div v-if="!image">
+                <input type="file" @change="onFileChange">
+              </div>
+              <div v-else>
+                <img :src="image" style="width:100%;"/>
+                <button @click="removeImage">Remove image</button>
+              </div>
+          </v-flex>
           <v-flex :class="['pa-2', item.size]" v-for="(item, key) in form" :key="key">
             <v-text-field
               v-if="item.type == 'Text'"
@@ -72,7 +87,7 @@
               item-text="title"
               item-value="id"
             ></v-select>
-            <v-container fluid v-if="item.type == 'Checkbox'" >
+            <v-container fluid v-if="item.type == 'Checkbox'">
               <p>{{ item.name }}</p>
               <v-checkbox
                 v-for="(optionValue, keyOption) in item.options"
@@ -85,7 +100,13 @@
             <template v-if="item.type == 'Form'">
               <v-layout row wrap>
                 <h3>{{ item.name }}</h3>
-                <v-flex  :class="['pa-2', children.size]" v-for="(children, keyChildren) in item.children" :key="keyChildren">
+              </v-layout>
+              <v-layout row wrap>
+                <v-flex
+                  :class="['pa-2', children.size]"
+                  v-for="(children, keyChildren) in item.children"
+                  :key="keyChildren"
+                >
                   <v-text-field
                     v-if="children.type == 'Text'"
                     v-model="formData[children.name]"
@@ -153,8 +174,10 @@ export default {
     formData : {
       autoclave_id: "",
       result: "",
+      img: null,
       test_type_id: "",
-    }
+    },
+    image: null,
   }),
   created() {
     if (this.$route.params.testResult) {
@@ -181,7 +204,6 @@ export default {
                 if (result.data.data.inputs[key].children.hasOwnProperty(keyForm)) {
                   if (result.data.data.inputs[key].children[keyForm].type == 'Checkbox' || result.data.data.inputs[key].children[keyForm].type == 'Select' ) {
                     this.formData[result.data.data.inputs[key].children[keyForm].name] = [];
-                    console.log(this.formData[result.data.data.inputs[key].children[keyForm].name]);
                   } else {
                     this.formData[result.data.data.inputs[key].children[keyForm].name] = '';
                   }
@@ -214,6 +236,31 @@ export default {
         this.$router.push({name: 'Dashboard'})
       }
     },
+    onFileChange(e) {
+      var files = e.target.files || e.dataTransfer.files;
+      if (!files.length)
+        return;
+      this.createImage(files[0]);
+    },
+    createImage(file) {
+      var image = new Image();
+      var reader = new FileReader();
+      var vm = this;
+
+      reader.onload = (e) => {
+        vm.image = e.target.result;
+      };
+      
+      reader.readAsDataURL(file);
+    },
+    removeImage: function (e) {
+      this.image = null;
+    },
+  },
+  watch:{
+    image(img) {
+      this.formData.img = img;
+    }
   }
 };
 </script>

resources/js/vue/views/TestResult/List.vue

@@ -129,12 +129,17 @@ export default {
         lastPage: 1
     }),
     created() {
-        this.load();
+        if(this.$route.name == 'NotVerifyTestResult') {
+            this.load(1, 'NotVerified');
+        } else {
+            this.load();
+        }
+        
     },
     methods: {
         ...mapMutations("modal", ["changeCurrentModal"]),
-        async load(page = 1) {
-            const result = await ApiService.get(urls.listTestResult(page));
+        async load(page = 1, verified = null) {
+            const result = await ApiService.get(urls.listTestResult(page, verified));
             if (result && result.status == 200) {
                 this.items = result.data.data.data;
                 this.currentPage = result.data.data.current_page;