diff --git a/node_modules/.cache/babel-loader/0ac1634f1f71f6f283cccc47107665b8.json.gz b/node_modules/.cache/babel-loader/0ac1634f1f71f6f283cccc47107665b8.json.gz
new file mode 100644
index 00000000..b9086e1a
Binary files /dev/null and b/node_modules/.cache/babel-loader/0ac1634f1f71f6f283cccc47107665b8.json.gz differ
diff --git a/node_modules/.cache/babel-loader/129f32e33d5ed5b08b67be48ca2ee6fb.json.gz b/node_modules/.cache/babel-loader/129f32e33d5ed5b08b67be48ca2ee6fb.json.gz
new file mode 100644
index 00000000..2a04a620
Binary files /dev/null and b/node_modules/.cache/babel-loader/129f32e33d5ed5b08b67be48ca2ee6fb.json.gz differ
diff --git a/node_modules/.cache/babel-loader/25aa213201e04e19013ebd0964a5a666.json.gz b/node_modules/.cache/babel-loader/25aa213201e04e19013ebd0964a5a666.json.gz
new file mode 100644
index 00000000..a2f13888
Binary files /dev/null and b/node_modules/.cache/babel-loader/25aa213201e04e19013ebd0964a5a666.json.gz differ
diff --git a/node_modules/.cache/babel-loader/28e30c69918622ba747c2d0caa97fa9a.json.gz b/node_modules/.cache/babel-loader/28e30c69918622ba747c2d0caa97fa9a.json.gz
new file mode 100644
index 00000000..cfac71b7
Binary files /dev/null and b/node_modules/.cache/babel-loader/28e30c69918622ba747c2d0caa97fa9a.json.gz differ
diff --git a/node_modules/.cache/babel-loader/358f81c5b385b256f3ce0f3dd495f956.json.gz b/node_modules/.cache/babel-loader/358f81c5b385b256f3ce0f3dd495f956.json.gz
new file mode 100644
index 00000000..67b75b59
Binary files /dev/null and b/node_modules/.cache/babel-loader/358f81c5b385b256f3ce0f3dd495f956.json.gz differ
diff --git a/node_modules/.cache/babel-loader/3a1b6c9ed3ac569e9ef9fba90e9eaa09.json.gz b/node_modules/.cache/babel-loader/3a1b6c9ed3ac569e9ef9fba90e9eaa09.json.gz
new file mode 100644
index 00000000..c5169b1f
Binary files /dev/null and b/node_modules/.cache/babel-loader/3a1b6c9ed3ac569e9ef9fba90e9eaa09.json.gz differ
diff --git a/node_modules/.cache/babel-loader/7143e514929675cb82990b55b8bd3ff4.json.gz b/node_modules/.cache/babel-loader/7143e514929675cb82990b55b8bd3ff4.json.gz
new file mode 100644
index 00000000..f4b13bfd
Binary files /dev/null and b/node_modules/.cache/babel-loader/7143e514929675cb82990b55b8bd3ff4.json.gz differ
diff --git a/node_modules/.cache/babel-loader/8bf1f78ff420b664fd0f6f6f5dd3afb4.json.gz b/node_modules/.cache/babel-loader/8bf1f78ff420b664fd0f6f6f5dd3afb4.json.gz
new file mode 100644
index 00000000..931b8cad
Binary files /dev/null and b/node_modules/.cache/babel-loader/8bf1f78ff420b664fd0f6f6f5dd3afb4.json.gz differ
diff --git a/node_modules/.cache/babel-loader/a736015c06c53f2e26dd1dc91f26bc2c.json.gz b/node_modules/.cache/babel-loader/a736015c06c53f2e26dd1dc91f26bc2c.json.gz
new file mode 100644
index 00000000..cf039d63
Binary files /dev/null and b/node_modules/.cache/babel-loader/a736015c06c53f2e26dd1dc91f26bc2c.json.gz differ
diff --git a/node_modules/.cache/babel-loader/afa70eca14330cf8596a4a3542e61441.json.gz b/node_modules/.cache/babel-loader/afa70eca14330cf8596a4a3542e61441.json.gz
new file mode 100644
index 00000000..6db63902
Binary files /dev/null and b/node_modules/.cache/babel-loader/afa70eca14330cf8596a4a3542e61441.json.gz differ
diff --git a/node_modules/.cache/babel-loader/fea2ba8fb4035532ba8daf77cd1f093b.json.gz b/node_modules/.cache/babel-loader/fea2ba8fb4035532ba8daf77cd1f093b.json.gz
new file mode 100644
index 00000000..f63e8399
Binary files /dev/null and b/node_modules/.cache/babel-loader/fea2ba8fb4035532ba8daf77cd1f093b.json.gz differ
diff --git a/public/js/vue/app.js b/public/js/vue/app.js
index 75e0e025..5d630c72 100644
--- a/public/js/vue/app.js
+++ b/public/js/vue/app.js
@@ -43,7 +43,7 @@
 /******/
 /******/ 	// script path function
 /******/ 	function jsonpScriptSrc(chunkId) {
-/******/ 		return __webpack_require__.p + "js/vue/chunks/" + ({}[chunkId]||chunkId) + "." + {"0":"b47d9eaedcbd0f34d95c","1":"1a2ec2568db9e0d01036","2":"4f5525aabb9601dde4be","3":"02c941910d5eee1fceff","4":"df99230719144eec9812","5":"29e184ef07c70ad44e82","6":"2e3cea1e2ee220bcd12d","7":"c74631f669aa8185d603","8":"8e259fe897cde698bfc3","9":"5059ce6d2ab207088c31","10":"1222a2375fd940705a78","11":"a447fe0b0f0e846ad8b1","12":"ab3efed496c91cd795a5","13":"dfe16420782798d2be26","14":"0f6eeb76c4839e34f069","15":"ea55482413b70efcb3f7","16":"a81c0a25caa8d6957a37","17":"39ae6a640f4f7aee70ef","18":"b836f822bb8c2a3c29b5","19":"c27e4577cf5fbce49df4","20":"5ebb0d270ca28e346931","21":"4eab9f986d73cdfc57b2","22":"45e250b6a4deec80f3f9","23":"b317c50e2d5001c94f6c","24":"d46a5a5f496271a8198c","25":"5e531b62fd7cb4562c0d"}[chunkId] + ".js"
+/******/ 		return __webpack_require__.p + "js/vue/chunks/" + ({}[chunkId]||chunkId) + "." + {"0":"b47d9eaedcbd0f34d95c","1":"1a2ec2568db9e0d01036","2":"4f5525aabb9601dde4be","3":"02c941910d5eee1fceff","4":"df99230719144eec9812","5":"29e184ef07c70ad44e82","6":"2e3cea1e2ee220bcd12d","7":"9ef0114b3eb1b40652cd","8":"8e259fe897cde698bfc3","9":"5059ce6d2ab207088c31","10":"1222a2375fd940705a78","11":"a447fe0b0f0e846ad8b1","12":"ab3efed496c91cd795a5","13":"dfe16420782798d2be26","14":"0f6eeb76c4839e34f069","15":"ea55482413b70efcb3f7","16":"a81c0a25caa8d6957a37","17":"39ae6a640f4f7aee70ef","18":"b836f822bb8c2a3c29b5","19":"c27e4577cf5fbce49df4","20":"5ebb0d270ca28e346931","21":"4eab9f986d73cdfc57b2","22":"45e250b6a4deec80f3f9","23":"700cf55012ee90e7a0ba","24":"d46a5a5f496271a8198c","25":"5e531b62fd7cb4562c0d"}[chunkId] + ".js"
 /******/ 	}
 /******/
 /******/ 	// The require function
diff --git a/resources/js/vue/views/TestResult/AddEdit.vue b/resources/js/vue/views/TestResult/AddEdit.vue
index 7402c478..e172bdf1 100644
--- a/resources/js/vue/views/TestResult/AddEdit.vue
+++ b/resources/js/vue/views/TestResult/AddEdit.vue
@@ -1,318 +1,400 @@
 <template>
-  <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-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-if="!$route.params.testResult">
-          <v-divider></v-divider>
-        </v-layout>
-        <v-layout align-center justify-center wrap class="px-5 my-3">
-          <v-flex xs12 sm4 md4>
-            <v-text-field
-              name="autoclave"
-              v-model="formData.autoclave_id"
-              label="ID AutoClave"
-              color="black"
-              class="pa-2"
-            ></v-text-field>
-          </v-flex>
-          <v-flex xs12 sm4 md4>
-            <v-text-field
-              :items="result"
-              v-model="formData.cycle_number "
-              label="Cycle Number"
-              color="black"
-              class="pa-2"
-            ></v-text-field>
-          </v-flex>
-          <v-flex xs12 sm4 md4>
-            <v-select
-              :items="result"
-              v-model="formData.result"
-              label="Result"
-              color="black"
-              class="pa-2"
-            ></v-select>
-          </v-flex>
-          <v-flex xs12 sm4 md4>
-             <div  >
-                <input type="file" class="inputfile" @change="onFileChange" multiple />
-                <label f or="file"><v-icon class="v-icon greylighten-3--text mr-2 caption IconHover">fas fa-chevron-right</v-icon>Choose a file</label>
-              </div>
-              <div >
-                <div v-for="(img, key) in images" :key="key">
-                  <img :src="img" style="width:100%;"/>
-                  <button @click="removeImage(key)">Remove image</button>
-                </div>
-              </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'"
-              v-model="formData[item.name+'_'+item.id]"
-              :label="item.name"
-              color="black"
-            ></v-text-field>
-            <v-select
-              multiple
-              v-if="item.type == 'Select'"
-              :items="item.options"
-              v-model="formData[item.name+'_'+item.id]"
-              :label="item.name"
-              color="black"
-              item-text="title"
-              item-value="id"
-            ></v-select>
-            <v-container fluid v-if="item.type == 'Checkbox'">
-              <p>{{ item.name }}</p>
-              <v-checkbox
-                v-for="(optionValue, keyOption) in item.options"
-                :key="keyOption"
-                :label="optionValue.title"
-                v-model="formData[item.name+'_'+item.id]"
-                :value="optionValue.id"
-              ></v-checkbox>
-            </v-container>
-            <v-container fluid v-if="item.type == 'Radiobutton'">
-              <p>{{ item.name }}</p>
-              <v-radio-group v-model="formData[item.name+'_'+item.id]">
-                <v-radio
-                  v-for="(optionValue, keyOption) in item.options"
-                  :key="keyOption"
-                  :label="optionValue.title"
-                  :value="optionValue.id"
-                ></v-radio>
-              </v-radio-group>
-            </v-container>
-            <v-container fluid v-if="item.type == 'Switch'">
-              <v-switch
-                v-model="formData[item.name+'_'+item.id]"
-                :label="item.name + ': ' + formData[item.name+'_'+item.id].toString()"
-              ></v-switch>
-            </v-container>
-            <v-container fluid v-if="item.type == 'Range'">
-              <v-flex xs12>
-                <v-slider
-                  v-model="formData[item.name+'_'+item.id]"
-                  :min="item.options[0].id"
-                  :max="item.options[1].id"
-                  thumb-label="always"
-                ></v-slider>
-              </v-flex>
-            </v-container>
-            <v-container fluid v-if="item.type == 'Time'">
-              <v-flex xs12>
-                <v-time-picker v-model="formData[item.name+'_'+item.id]"></v-time-picker>
-              </v-flex>
-            </v-container>
-            <template v-if="item.type == 'Form'">
-              <v-container row md-12 sm-12 xs-12>
-              <v-layout row wrap>
-                <h3>{{ item.name }}</h3>
-              </v-layout>
-              <v-layout row wrap>
-                <v-flex
-                  :class="['pa-2', children.size]"
-                  v-for="(children, keyChildren) in item.children"
-                  :key="keyChildren"
+    <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-text-field
-                    v-if="children.type == 'Text'"
-                    v-model="formData[children.name+'_'+children.id]"
-                    :label="children.name"
-                    color="black"
-                  ></v-text-field>
-                  <v-select
-                    multiple
-                    v-if="children.type == 'Select'"
-                    :items="children.options"
-                    v-model="formData[children.name+'_'+children.id]"
-                    :label="children.name"
-                    color="black"
-                    item-text="title"
-                    item-value="id"
-                  ></v-select>
-                  <v-container fluid v-if="children.type == 'Checkbox'">
-                    <p>{{ children.name }}</p>
-                    <v-checkbox
-                      v-for="(optionValue, keyOption) in children.options"
-                      :key="keyOption"
-                      :label="optionValue.title"
-                      v-model="formData[children.name+'_'+children.id]"
-                      :value="optionValue.id"
-                    ></v-checkbox>
-                  </v-container>
-                </v-flex>
-              </v-layout>
-              </v-container>
-            </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" @click="submitForm">
-            <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>
+                    <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-if="!$route.params.testResult">
+                    <v-divider></v-divider>
+                </v-layout>
+                <v-layout align-center justify-center wrap class="px-5 my-3">
+                    <v-flex xs12 sm4 md4>
+                        <v-text-field
+                            name="autoclave"
+                            v-model="form.device_id"
+                            :label="form.device_label"
+                            color="black"
+                            class="pa-2"
+                        ></v-text-field>
+                    </v-flex>
+                    <v-flex xs12 sm4 md4>
+                        <v-text-field
+                            v-model="formData.cycle_number "
+                            label="Cycle Number"
+                            color="black"
+                            class="pa-2"
+                        ></v-text-field>
+                    </v-flex>
+                    <v-flex xs12 sm4 md4>
+                        <v-switch
+                            v-model="formData.result"
+                            :label="'Result: ' + ((formData.result) ? 'Accept' : 'Reject')"
+                        ></v-switch>
+                    </v-flex>
+                    <v-flex xs12 sm12 md12>
+                        <div>
+                            <input type="file" class="inputfile" @change="onFileChange" multiple />
+                            <label for="file">
+                                <v-icon
+                                    class="v-icon greylighten-3--text mr-2 caption IconHover"
+                                >fas fa-chevron-right</v-icon>Choose a file
+                            </label>
+                        </div>
+                        <v-layout>
+                            <v-flex v-for="(img, key) in images" :key="key" xs12 sm6 md3>
+                                <img :src="img" style="width:100%;" />
+                                <button @click="removeImage(key)">Remove image</button>
+                            </v-flex>
+                        </v-layout>
+                    </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'"
+                            v-model="formData[item.name+'_'+item.id]"
+                            :label="item.name"
+                            color="black"
+                        ></v-text-field>
+                        <v-select
+                            multiple
+                            v-if="item.type == 'Select'"
+                            :items="item.options"
+                            v-model="formData[item.name+'_'+item.id]"
+                            :label="item.name"
+                            color="black"
+                            item-text="title"
+                            item-value="id"
+                        ></v-select>
+                        <v-container fluid v-if="item.type == 'Checkbox'">
+                            <p>{{ item.name }}</p>
+                            <v-checkbox
+                                v-for="(optionValue, keyOption) in item.options"
+                                :key="keyOption"
+                                :label="optionValue.title"
+                                v-model="formData[item.name+'_'+item.id]"
+                                :value="optionValue.id"
+                            ></v-checkbox>
+                        </v-container>
+                        <v-container fluid v-if="item.type == 'Radiobutton'">
+                            <p>{{ item.name }}</p>
+                            <v-radio-group v-model="formData[item.name+'_'+item.id]">
+                                <v-radio
+                                    v-for="(optionValue, keyOption) in item.options"
+                                    :key="keyOption"
+                                    :label="optionValue.title"
+                                    :value="optionValue.id"
+                                ></v-radio>
+                            </v-radio-group>
+                        </v-container>
+                        <v-container fluid v-if="item.type == 'Switch'">
+                            <v-switch
+                                v-model="formData[item.name+'_'+item.id]"
+                                :label="item.name + ': ' + formData[item.name+'_'+item.id].toString()"
+                            ></v-switch>
+                        </v-container>
+                        <v-container fluid v-if="item.type == 'Range'">
+                            <p>{{ item.name }}</p>
+                            <v-flex xs12>
+                                <v-slider
+                                    v-model="formData[item.name+'_'+item.id]"
+                                    :min="item.options[0].title"
+                                    :max="item.options[1].title"
+                                    thumb-label="always"
+                                ></v-slider>
+                            </v-flex>
+                        </v-container>
+                        <v-container fluid v-if="item.type == 'Time'">
+                            <v-flex xs12>
+                                <v-time-picker v-model="formData[item.name+'_'+item.id]"></v-time-picker>
+                            </v-flex>
+                        </v-container>
+                        <template v-if="item.type == 'Form'">
+                            <v-container row md-12 sm-12 xs-12>
+                                <v-layout row wrap>
+                                    <h3>{{ item.name }}</h3>
+                                </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+'_'+children.id]"
+                                            :label="children.name"
+                                            color="black"
+                                        ></v-text-field>
+                                        <v-select
+                                            multiple
+                                            v-if="children.type == 'Select'"
+                                            :items="children.options"
+                                            v-model="formData[children.name+'_'+children.id]"
+                                            :label="children.name"
+                                            color="black"
+                                            item-text="title"
+                                            item-value="id"
+                                        ></v-select>
+                                        <v-container fluid v-if="children.type == 'Checkbox'">
+                                            <p>{{ children.name }}</p>
+                                            <v-checkbox
+                                                v-for="(optionValue, keyOption) in children.options"
+                                                :key="keyOption"
+                                                :label="optionValue.title"
+                                                v-model="formData[children.name+'_'+children.id]"
+                                                :value="optionValue.id"
+                                            ></v-checkbox>
+                                        </v-container>
+                                        <v-container fluid v-if="children.type == 'Radiobutton'">
+                                            <p>{{ children.name }}</p>
+                                            <v-radio-group
+                                                v-model="formData[children.name+'_'+children.id]"
+                                            >
+                                                <v-radio
+                                                    v-for="(optionValue, keyOption) in children.options"
+                                                    :key="keyOption"
+                                                    :label="optionValue.title"
+                                                    :value="optionValue.id"
+                                                ></v-radio>
+                                            </v-radio-group>
+                                        </v-container>
+                                        <v-container fluid v-if="children.type == 'Switch'">
+                                            <v-switch
+                                                v-model="formData[children.name+'_'+children.id]"
+                                                :label="children.name + ': ' + formData[children.name+'_'+children.id].toString()"
+                                            ></v-switch>
+                                        </v-container>
+                                        <v-container fluid v-if="children.type == 'Range'">
+                                            <p>{{ item.name }}</p>
+                                            <v-flex xs12>
+                                                <v-slider
+                                                    v-model="formData[children.name+'_'+children.id]"
+                                                    :min="children.options[0].title"
+                                                    :max="children.options[1].title"
+                                                    thumb-label="always"
+                                                ></v-slider>
+                                            </v-flex>
+                                        </v-container>
+                                        <v-container fluid v-if="children.type == 'Time'">
+                                            <v-flex xs12>
+                                                <v-time-picker
+                                                    v-model="formData[children.name+'_'+children.id]"
+                                                ></v-time-picker>
+                                            </v-flex>
+                                        </v-container>
+                                    </v-flex>
+                                </v-layout>
+                            </v-container>
+                        </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"
+                        @click="submitForm"
+                    >
+                        <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: [],
-    filter: {
-      test_result_id: "",
-      name: "",
-      unique_code: ""
-    },
-    formData : {
-      autoclave_id: "",
-      result: "",
-      cycle_number: "",
-      img: null,
-      test_type_id: "",
-    },
-    images: [],
-  }),
-  created() {
-    if (this.$route.params.testResult) {
-      this.filter.test_result_id = this.$route.params.testResult;
-      this.selectTestType();
-    }
-    this.load();
-
-  },
-  methods: {
-    async load() {
-      const result = await ApiService.get(urls.listTestTypeName);
-      this.testTypeNames = result.data.data;
-    },
-    async selectTestType() {
-      const result = await ApiService.post(urls.getInputs, this.filter);
-      if (result && result.status == 200) {
-        this.form = result.data.data.inputs;
-        this.formData.test_type_id = result.data.data.testType.id;
-        for (const key in result.data.data.inputs) {
-          if (result.data.data.inputs.hasOwnProperty(key)) {
-            if(result.data.data.inputs[key].type == 'Form') {
-              for (const keyForm in result.data.data.inputs[key].children) {
-                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 +'_'+ result.data.data.inputs[key].children[keyForm].id] = [];
-                  } else {
-                    this.formData[result.data.data.inputs[key].children[keyForm].name +'_'+ result.data.data.inputs[key].children[keyForm].id] = '';
-                  }
-                }
-              }
-            } else if(result.data.data.inputs[key].type == 'Checkbox' || result.data.data.inputs[key].type == 'Select') {
-              this.formData[result.data.data.inputs[key].name +'_'+ result.data.data.inputs[key].id] = [];
-            } else {
-              this.formData[result.data.data.inputs[key].name +'_'+ result.data.data.inputs[key].id] = '';
-            }
-          }
-        }
+    data: () => ({
+        testTypeNames: [],
+        searchInput: "",
+        form: [],
+        filter: {
+            test_result_id: "",
+            name: "",
+            unique_code: ""
+        },
+        formData: {
+            device_id: "",
+            device_label: "AutoClaveID or WasherID",
+            result: "",
+            cycle_number: "",
+            img: null,
+            test_type_id: ""
+        },
+        images: []
+    }),
+    created() {
         if (this.$route.params.testResult) {
-          const result = await ApiService.get(urls.editTestResult(this.$route.params.testResult));
-          if (result && result.status == 200) {
-            this.formData = result.data.data;
-          }
+            this.filter.test_result_id = this.$route.params.testResult;
+            this.selectTestType();
         }
-      }
+        this.load();
     },
-    async submitForm() {
-      let result;
-      if (this.$route.params.testResult) {
-         result = await ApiService.put(urls.updateTestResult(this.$route.params.testResult), this.formData);
-      } else {
-         result = await ApiService.post(urls.storeTestResult, this.formData);
-      }
+    methods: {
+        async load() {
+            const result = await ApiService.get(urls.listTestTypeName);
+            this.testTypeNames = result.data.data;
+        },
+        async selectTestType() {
+            const result = await ApiService.post(urls.getInputs, this.filter);
+            if (result && result.status == 200) {
+                this.form = result.data.data.inputs;
+                this.formData.test_type_id = result.data.data.testType.id;
+                for (const key in result.data.data.inputs) {
+                    if (result.data.data.inputs.hasOwnProperty(key)) {
+                        if (result.data.data.inputs[key].type == "Form") {
+                            for (const keyForm in result.data.data.inputs[key]
+                                .children) {
+                                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 +
+                                                "_" +
+                                                result.data.data.inputs[key]
+                                                    .children[keyForm].id
+                                        ] = [];
+                                    } else {
+                                        this.formData[
+                                            result.data.data.inputs[key]
+                                                .children[keyForm].name +
+                                                "_" +
+                                                result.data.data.inputs[key]
+                                                    .children[keyForm].id
+                                        ] = "";
+                                    }
+                                }
+                            }
+                        } else if (
+                            result.data.data.inputs[key].type == "Checkbox" ||
+                            result.data.data.inputs[key].type == "Select"
+                        ) {
+                            this.formData[
+                                result.data.data.inputs[key].name +
+                                    "_" +
+                                    result.data.data.inputs[key].id
+                            ] = [];
+                        } else {
+                            this.formData[
+                                result.data.data.inputs[key].name +
+                                    "_" +
+                                    result.data.data.inputs[key].id
+                            ] = "";
+                        }
+                    }
+                }
+                if (this.$route.params.testResult) {
+                    const result = await ApiService.get(
+                        urls.editTestResult(this.$route.params.testResult)
+                    );
+                    if (result && result.status == 200) {
+                        this.formData = result.data.data;
+                    }
+                }
+            }
+        },
+        async submitForm() {
+            let result;
+            if (this.$route.params.testResult) {
+                result = await ApiService.put(
+                    urls.updateTestResult(this.$route.params.testResult),
+                    this.formData
+                );
+            } else {
+                result = await ApiService.post(
+                    urls.storeTestResult,
+                    this.formData
+                );
+            }
 
-      if (result && result.status == 200) {
-        this.$router.push({name: 'Dashboard'})
-      }
-    },
-    onFileChange(e) {
-      var files = e.target.files || e.dataTransfer.files;
-      if (!files.length)
-        return;
-      for (const key in files) {
-        if (files.hasOwnProperty(key)) {
-          this.createImage(files[key], key);
+            if (result && result.status == 200) {
+                this.$router.push({ name: "Dashboard" });
+            }
+        },
+        onFileChange(e) {
+            var files = e.target.files || e.dataTransfer.files;
+            if (!files.length) return;
+            for (const key in files) {
+                if (files.hasOwnProperty(key)) {
+                    this.createImage(files[key], key);
+                }
+            }
+        },
+        createImage(file, index) {
+            var image = new Image();
+            var reader = new FileReader();
+            var vm = this;
+
+            reader.onload = e => {
+                vm.images.push(e.target.result);
+            };
+
+            reader.readAsDataURL(file);
+        },
+        removeImage(index) {
+            this.images.splice(index, 1);
         }
-      }
-      
     },
-    createImage(file, index) {
-      var image = new Image();
-      var reader = new FileReader();
-      var vm = this;
-
-      reader.onload = (e) => {
-        vm.images.push(e.target.result);
-      };
-
-      reader.readAsDataURL(file);
-    },
-    removeImage (index) {
-      this.images.splice(index, 1);
-    },
-  },
-  watch:{
-    images(img) {
-      this.formData.imgs = img;
+    watch: {
+        images(img) {
+            this.formData.imgs = img;
+        }
     }
-  }
 };
 </script>
diff --git a/resources/js/vue/views/TestType/AddEdit.vue b/resources/js/vue/views/TestType/AddEdit.vue
index 756d4219..edc0801d 100644
--- a/resources/js/vue/views/TestType/AddEdit.vue
+++ b/resources/js/vue/views/TestType/AddEdit.vue
@@ -136,7 +136,6 @@
                             row
                             wrap
                             class="WM-Relative WM-Width-Full"
-                            v-if="info['options'].length > 0"
                         >
                             <v-flex
                                 xs12
@@ -381,13 +380,13 @@ export default {
             ],
             size: [
                 { state: "not Selected", abbr: "" },
-                { state: "2 as 12", abbr: "md2 xs12" },
-                { state: "3 as 12", abbr: "md3 xs12" },
-                { state: "4 as 12", abbr: "md4 xs12" },
-                { state: "6 as 12", abbr: "md6 xs12" },
-                { state: "8 as 12", abbr: "md8 xs12" },
-                { state: "10 as 12", abbr: "md10 xs12" },
-                { state: "10 as 12", abbr: "md12 xs12" }
+                { state: "2 from 12", abbr: "md2 xs12" },
+                { state: "3 from 12", abbr: "md3 xs12" },
+                { state: "4 from 12", abbr: "md4 xs12" },
+                { state: "6 from 12", abbr: "md6 xs12" },
+                { state: "8 from 12", abbr: "md8 xs12" },
+                { state: "10 from 12", abbr: "md10 xs12" },
+                { state: "12 from 12", abbr: "md12 xs12" }
             ],
             rules: {
                 required: value => !!value || "Required."
@@ -404,7 +403,7 @@ export default {
             if (selectedboxType == "Select" || selectedboxType == "Checkbox" || selectedboxType == "Radiobutton") {
                 this.form.info[infoIndex]["options"] = [{ id: 0, title: "" }];
             } else if(selectedboxType == "Range") {
-                this.form.info[infoIndex]["options"] = [{ id: 0, from: "", to: "" }];
+                this.form.info[infoIndex]["options"] = [{ id: 0, title: ""}, { id: 0, title: ""}];
             } else {
                 this.form.info[infoIndex]["options"] = [];
             }
@@ -437,11 +436,12 @@ export default {
                     { id: 0, title: "" }
                 ];
                 this.form = form;
-            } else if(type == "Rang") {
+            } else if(type == "Range") {
                 let form = this.form;
                 this.form = "";
                 form.info[infoIndex]["children"][formLevel]["options"] = [
-                    { id: 0, from: "", to: "" }
+                    { id: 0, title: "" },
+                    { id: 0, title: "" },
                 ];
                 this.form = form;
             } else {