print and new types and multi image

app/Http/Controllers/TestResultController.php

@@ -165,9 +165,9 @@ class TestResultController extends Controller
 
     public function show($id)
     {
-        $TestResult = TestResult::with('input_values', 'user')->select('result', 'verified', 'autoclave_id','user_id','id')->findOrFail($id);
+        $TestResult = TestResult::with('input_values', 'user.medical_center')->select('result', 'verified', 'autoclave_id','user_id','id', 'created_at')->findOrFail($id);
         $options = [];
-        foreach ($TestResult->input_values as $key => $value) {
+        foreach ($TestResult->input_values as $value) {
           $input = $value->input;
 
           if ($input->parent_id != null && $input->parent['type'] == 'Form') {

composer.json

@@ -13,6 +13,7 @@
         "laravel/framework": "5.8.*",
         "laravel/passport": "^7.2",
         "laravel/tinker": "^1.0",
+        "milon/barcode": "^5.3",
         "spatie/laravel-permission": "^2.36"
     },
     "require-dev": {

composer.lock

@@ -4,7 +4,7 @@
         "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
         "This file is @generated automatically"
     ],
-    "content-hash": "181bdb262cee4face3bcdcaea8f1a4cf",
+    "content-hash": "282319c473e3a4fae1950c36e3c9832a",
     "packages": [
         {
             "name": "defuse/php-encryption",
@@ -1300,6 +1300,55 @@
             ],
             "time": "2019-03-29T18:19:35+00:00"
         },
+        {
+            "name": "milon/barcode",
+            "version": "5.3.6",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/milon/barcode.git",
+                "reference": "ca2f3efbf46142ff7f7afe3b0f3660ea4a067576"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/milon/barcode/zipball/ca2f3efbf46142ff7f7afe3b0f3660ea4a067576",
+                "reference": "ca2f3efbf46142ff7f7afe3b0f3660ea4a067576",
+                "shasum": ""
+            },
+            "require": {
+                "illuminate/support": "5.*",
+                "php": ">=5.6.0"
+            },
+            "type": "library",
+            "autoload": {
+                "psr-0": {
+                    "Milon\\Barcode": "src/"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "LGPL-3.0"
+            ],
+            "authors": [
+                {
+                    "name": "Nuruzzaman Milon",
+                    "email": "contact@milon.im"
+                }
+            ],
+            "description": "Barcode generator like Qr Code , PDF417,C39, C39+,C39E,C39E+,C93,S25,S25+,I25,I25+,C128,C128A,C128B,C128C,2-Digits UPC-Based Extention,5-Digits UPC-Based Extention,EAN 8,EAN 13,UPC-A,UPC-E,MSI (Variation of Plessey code) ",
+            "keywords": [
+                "CODABAR",
+                "CODE 128",
+                "CODE 39",
+                "barcode",
+                "datamatrix",
+                "ean",
+                "laravel",
+                "pdf417",
+                "qr code",
+                "qrcode"
+            ],
+            "time": "2017-07-28T00:33:38+00:00"
+        },
         {
             "name": "monolog/monolog",
             "version": "1.24.0",

package-lock.json

@@ -14869,6 +14869,11 @@
             "integrity": "sha512-KmvZVtmM26BQOMK1rwUZsrqxEGeKiYSZGA7SNWE6uExx8UX/cj9hq2MRV/wWC3Cq6AoeDGk57rL9YMFRel/q+g==",
             "dev": true
         },
+        "vue-html-to-paper": {
+            "version": "1.1.0",
+            "resolved": "https://registry.npmjs.org/vue-html-to-paper/-/vue-html-to-paper-1.1.0.tgz",
+            "integrity": "sha512-ywxYfSg1y3Sv50POhfYPSv9ls0z4lrV/AuliJ2XmTguJvf7RAQTGnDHxfODK74Qj2gHsKgXqPvn5NtZ2Lti+uQ=="
+        },
         "vue-i18n": {
             "version": "7.8.1",
             "resolved": "https://registry.npmjs.org/vue-i18n/-/vue-i18n-7.8.1.tgz",

package.json

@@ -64,6 +64,7 @@
         "vuex-router-sync": "^5.0.0"
     },
     "dependencies": {
+        "vue-html-to-paper": "^1.1.0",
         "vuetify-upload-component": "^1.0.6"
     }
 }

resources/js/vue/components/core/Footer.vue

@@ -33,7 +33,7 @@
 export default {
   data: () => ({
     links: [
-      { name: 'Powered By WillaMall', Link: 'https://www.willamall.com' },
+      // { name: 'Powered By WillaMall', Link: 'https://www.willamall.com' },
       // { name: 'Home', Link: '/dashboard' },
       // { name: 'Creative Tim', Link: 'https://www.creative-tim.com' },
       // { name: 'About Us', Link: 'https://creative-tim.com/presentation' },

resources/js/vue/components/modal/testresult/Show.vue

@@ -1,37 +1,67 @@
 
 <template>
     <v-container grid-list-xs>
-        <material-card color="black" title="Submit Test Result">
+        <material-card color="black" title="Submit Test Result" id="printMe">
             <v-layout align-left justify-left wrap class="px-5 my-3">
                 <h3 class="ml-3">Common Info</h3>
                 <v-flex xs12>
-                    <hr class="v-divider theme--light">
+                    <hr class="v-divider theme--light" />
                 </v-flex>
                 <v-layout row wrap class="ml-4">
                     <v-flex xs12 md6 sm6>
                         <div class>
                             <span class="title">Auto Clave Id :</span>
-                            <span class="headline ml-2" style="letter-spacing:0 !important">{{ data.autoclave_id }}</span>
+                            <span
+                                class="headline ml-2"
+                                style="letter-spacing:0 !important"
+                            >{{ data.autoclave_id }}</span>
                         </div>
                     </v-flex>
                     <v-flex xs12 md6 sm6>
                         <div class>
                             <span class="title">Result :</span>
                             <v-icon class="green--text ml-2 caption">fas fa-check</v-icon>
-                            <span class="headline ml-1" style="letter-spacing:0 !important">{{ data.result }}</span>
+                            <span
+                                class="headline ml-1"
+                                style="letter-spacing:0 !important"
+                            >{{ data.result }}</span>
                         </div>
                     </v-flex>
                     <v-flex xs12 md6 sm6>
                         <div class>
                             <span class="title">verify :</span>
                             <v-icon class="pink--text ml-2 caption">fas fa-times</v-icon>
-                            <span class="headline ml-1" style="letter-spacing:0 !important">{{ data.verified }}</span>
+                            <span
+                                class="headline ml-1"
+                                style="letter-spacing:0 !important"
+                            >{{ data.verified }}</span>
                         </div>
                     </v-flex>
                     <v-flex xs12 md6 sm6>
                         <div class>
                             <span class="title">Register User :</span>
-                            <span class="headline ml-2" style="letter-spacing:0 !important">{{ data.user.name }}</span>
+                            <span
+                                class="headline ml-2"
+                                style="letter-spacing:0 !important"
+                            >{{ data.user.name }}</span>
+                        </div>
+                    </v-flex>
+                    <v-flex xs12 md6 sm6>
+                        <div class>
+                            <span class="title">Date :</span>
+                            <span
+                                class="headline ml-2"
+                                style="letter-spacing:0 !important"
+                            >{{ data.created_at }}</span>
+                        </div>
+                    </v-flex>
+                    <v-flex xs12 md6 sm6>
+                        <div class>
+                            <span class="title">Medical Center :</span>
+                            <span
+                                class="headline ml-2"
+                                style="letter-spacing:0 !important"
+                            >{{ data.user.medical_center.name }}</span>
                         </div>
                     </v-flex>
                 </v-layout>
@@ -39,7 +69,7 @@
             <v-layout align-left justify-left wrap class="px-5 my-3">
                 <h3 class="ml-3">Special Info</h3>
                 <v-flex xs12>
-                    <hr class="v-divider theme--light">
+                    <hr class="v-divider theme--light" />
                 </v-flex>
                 <v-layout row wrap>
                     <template v-if="data.inputs">
@@ -51,7 +81,10 @@
                             :key="keyInputs"
                         >
                             <span class="title">{{keyInputs}} :</span>
-                            <span class="headline ml-2" style="letter-spacing:0 !important">{{inputData}}</span>
+                            <span
+                                class="headline ml-2"
+                                style="letter-spacing:0 !important"
+                            >{{inputData}}</span>
                         </v-flex>
                     </template>
                     <template v-if="data.options">
@@ -103,14 +136,16 @@
             <v-layout align-left justify-left wrap class="px-5 my-3">
                 <h3 class="ml-3">Image</h3>
                 <v-flex xs12>
-                    <hr class="v-divider theme--light">
+                    <hr class="v-divider theme--light" />
                 </v-flex>
                 <v-layout row wrap class="ml-4">
                     <v-flex xs12 md6 sm6>
-                        <img :src="'/'+data.imagePath" style="width: 100%">
+                        <img :src="'/'+data.imagePath" style="width: 100%" />
                     </v-flex>
                 </v-layout>
             </v-layout>
+        </material-card>
+        <material-card>
             <v-layout row wrap align-center justify-center v-if="$hasRole('Admin|Supervisor')">
                 <v-flex
                     class
@@ -134,6 +169,15 @@
                         <span class="black--text">UnVerify</span>
                     </v-btn>
                 </v-flex>
+                <v-flex class xs12 md2 sm2>
+                    <v-btn
+                        class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Gray"
+                        @click="print"
+                    >
+                        <v-icon class="black--text mr-2 caption">fas fa-print</v-icon>
+                        <span class="black--text">Print</span>
+                    </v-btn>
+                </v-flex>
             </v-layout>
         </material-card>
     </v-container>
@@ -159,6 +203,39 @@ export default {
                 this.setResultModal(result.data.data);
                 this.closeModal();
             }
+        },
+        print() {
+            const prtHtml = document.getElementById("printMe").innerHTML;
+
+            // Get all stylesheets HTML
+            let stylesHtml = "";
+            for (const node of [
+                ...document.querySelectorAll('link[rel="stylesheet"], style')
+            ]) {
+                stylesHtml += node.outerHTML;
+            }
+
+            // Open the print window
+            const WinPrint = window.open(
+                "",
+                "",
+                "left=0,top=0,width=800,height=900,toolbar=0,scrollbars=0,status=0"
+            );
+
+            WinPrint.document.write(`<!DOCTYPE html>
+            <html>
+            <head>
+                ${stylesHtml}
+            </head>
+            <body>
+                ${prtHtml}
+            </body>
+            </html>`);
+
+            WinPrint.document.close();
+            WinPrint.focus();
+            WinPrint.print();
+            WinPrint.close();
         }
     },
     created() {

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

@@ -52,18 +52,27 @@
               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="Resualt"
+              label="Result"
               color="black"
               class="pa-2"
             ></v-select>
           </v-flex>
           <v-flex xs12 sm4 md4>
              <div v-if="!image">
-                <input type="file" class="inputfile" @change="onFileChange">
+                <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>
               <div v-else>
@@ -98,6 +107,38 @@
                 :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>
@@ -177,6 +218,7 @@ export default {
     formData : {
       autoclave_id: "",
       result: "",
+      cycle_number: "",
       img: null,
       test_type_id: "",
     },

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

@@ -74,7 +74,7 @@
                             <v-text-field
                                 required
                                 slot="activator"
-                                label="FromDate"
+                                label="UpToDate"
                                 v-model="filter.upToPicker"
                             ></v-text-field>
                             <v-date-picker
@@ -128,6 +128,10 @@
                                         <v-icon class="white--text mr-1 caption">fas fa-eye</v-icon>
                                         <span>Show</span>
                                     </v-btn>
+                                    <v-btn color="orange" class="mr-2" @click="generateBarcode(item.id)">
+                                        <v-icon class="white--text mr-1 caption">fas fa-eye</v-icon>
+                                        <span>generate Barcode</span>
+                                    </v-btn>
                                     <router-link
                                         v-if="$hasRole('Admin') || item.user_id == $store.state.user.id"
                                         :to="{name: 'EditTestResult', params: {testResult: item.id}}"
@@ -295,6 +299,15 @@ export default {
                 this.medicalCenters = result.data.data.MedicalCenters;
                 this.testTypes = result.data.data.TestTypes;
             }
+        },
+        async generateBarcode(id) {
+             const result = await ApiService.post(urls.Barcode(`Cssd-100 ${id}`));
+            if (result && result.status == 200) {
+                this.changeCurrentModal({
+                    modal: "modal-barcode-barcode",
+                    properties: { result }
+                });
+            }
         }
     },
     computed: {

resources/js/vue/views/TestType/AddEdit.vue

@@ -1,441 +1,536 @@
 <template>
-  <v-form ref="form">
+    <v-form ref="form">
-    <v-container grid-list-xs>
+        <v-container grid-list-xs>
-      <material-card color="black" title="Add a New Test" class>
+            <material-card color="black" title="Add a New Test" class>
-        <v-layout row wrap class="ma-2">
+                <v-layout row wrap class="ma-2">
-          <v-flex xs12 md3 sm3>
+                    <v-flex xs12 md3 sm3>
-            <v-text-field
+                        <v-text-field
-              name="name"
+                            name="name"
-              v-model="form.name"
+                            v-model="form.name"
-              label="Name"
+                            label="Name"
-              color="black"
+                            color="black"
-              class="pa-2"
+                            class="pa-2"
-              :rules="[rules.required]"
+                            :rules="[rules.required]"
-            ></v-text-field>
+                        ></v-text-field>
-          </v-flex>
+                    </v-flex>
-          <v-flex xs12 md3 sm3>
+                    <v-flex xs12 md3 sm3>
-            <v-text-field
+                        <v-text-field
-              :rules="[rules.required]"
+                            :rules="[rules.required]"
-              name="uniquecode"
+                            name="uniquecode"
-              v-model="form.unique_code"
+                            v-model="form.unique_code"
-              label="Unique Code"
+                            label="Unique Code"
-              color="black"
+                            color="black"
-              class="pa-2"
+                            class="pa-2"
-            ></v-text-field>
+                        ></v-text-field>
-          </v-flex>
+                    </v-flex>
-        </v-layout>
-        <v-layout
-          row
-          wrap
-          class="pb-4 ma-2 WM-Border WM-Border-Gray WM-BG-White WM-Relative"
-          :key="keyForm"
-          v-for="(info, keyForm) in form.info"
-        >
-          <v-layout row wrap class="ma-2">
-            <v-flex xs12 md3 sm3>
-              <v-text-field
-                name="inputname"
-                v-model="info.name"
-                label="Input Name"
-                color="black"
-                class="pa-2"
-                :rules="[rules.required]"
-              ></v-text-field>
-            </v-flex>
-            <v-flex xs12 md3 sm3>
-              <v-select
-                :items="type"
-                item-text="state"
-                item-value="abbr"
-                label="Type"
-                v-bind="info.id !== 0 ? {disabled: true} : {disabled: false}"
-                v-model="info.type"
-                single-line
-                color="black"
-                class="pa-2"
-                @change="changeType(keyForm, info.type)"
-              ></v-select>
-            </v-flex>
-            <!-- Text Input Section -->
-            <v-flex xs12 md3 sm3>
-              <v-select
-                :items="size"
-                item-text="state"
-                item-value="abbr"
-                label="Size"
-                v-model="info.size"
-                v-if="info.type !== 'Form'"
-                single-line
-                color="black"
-                class="pa-2"
-              ></v-select>
-            </v-flex>
-          </v-layout>
-          <!-- SelectBox Section -->
-          <v-layout
-            class="ma-3 pa-3 WM-Border WM-Border-Black WM-Relative WM-Width-Full"
-            row
-            wrap
-            v-if="info.type === 'Select' || info.type === 'Checkbox'"
-          >
-            <v-layout row wrap class="WM-Relative WM-Width-Full" v-if="info['options'].length > 0">
-              <v-flex
-                xs12
-                md3
-                sm3
-                v-for="(selectbox , keySelect) in info['options']"
-                :key="keySelect"
-                class="pb-4 ma-2 WM-Border WM-Border-Gray WM-BG-White WM-Width-Full WM-Relative"
-              >
-                <v-text-field
-                  :rules="[rules.required]"
-                  name="title"
-                  label="Title"
-                  color="black"
-                  class="pa-2 Input"
-                  v-model="selectbox.title"
-                ></v-text-field>
-                <v-btn
-                  absolute
-                  small
-                  right
-                  bottom
-                  color="pink"
-                  v-if="keySelect >= 1"
-                  @click="removeSelectbox(keyForm, keySelect)"
-                >
-                  <v-icon class="white--text mr-2 caption">fas fa-times</v-icon>REMOVE
-                </v-btn>
-              </v-flex>
-            </v-layout>
-            <v-btn
-              absolute
-              right
-              bottom
-              small
-              @click="addSelectbox(keyForm)"
-              color="black"
-              class="mb-2"
-            >
-              <v-icon class="white--text mr-2 caption">fas fa-plus</v-icon>
-              <span class="white--text">Add</span>
-            </v-btn>
-          </v-layout>
-          <!-- Form Section -->
-          <v-layout
-            row
-            wrap
-            v-if="info.type === 'Form'"
-            class="pa-3 my-4 mx-3 WM-Border WM-Border-Black WM-Relative"
-          >
-            <v-layout
-              row
-              wrap
-              v-for="(children , keychildren) in info.children"
-              :key="keychildren"
-              class="pa-3 my-4 mx-3 WM-Border WM-Border-Gray WM-Color-LightGrey WM-Width-Full WM-Relative Form"
-            >
-              <v-flex xs12 md3 sm3>
-                <v-text-field
-                  :rules="[rules.required]"
-                  name="name"
-                  v-model="children.name"
-                  label="Input Name"
-                  color="black"
-                  class="pa-2"
-                ></v-text-field>
-              </v-flex>
-              <v-flex xs12 md3 sm3>
-                <v-select
-                  :items="type"
-                  item-text="state"
-                  item-value="abbr"
-                  label="Type"
-                  v-model="children.type"
-                  v-bind="children.id !== 0 ? {disabled: true} : {disabled: false}"
-                  single-line
-                  color="black"
-                  class="pa-2"
-                  @change="changeTypeForm(keyForm, children.type, keychildren)"
-                ></v-select>
-              </v-flex>
-              <v-flex xs12 md3 sm3>
-                <v-select
-                  :items="size"
-                  item-text="state"
-                  item-value="abbr"
-                  label="Size"
-                  v-if="children.type !== 'Form'"
-                  v-model="children.size"
-                  single-line
-                  color="black"
-                  class="pa-2"
-                ></v-select>
-              </v-flex>
-              <!-- Inner Form Selectbox Section  -->
-              <v-layout
-                row
-                wrap
-                class="pa-3 mb-3 WM-Border WM-Border-Black WM-Relative WM-Width-Full"
-                v-if="children.type === 'Select' || children.type === 'Checkbox'"
-              >
-                <v-layout
-                  row
-                  wrap
-                  class="WM-Relative WM-Width-Full"
-                  v-if="children['options'].length > 0"
-                >
-                  <v-flex
-                    xs12
-                    md3
-                    sm3
-                    v-for="(selectbox , keySelect) in children['options']"
-                    :key="keySelect"
-                    class="pb-4 ma-2 WM-Border WM-Border-Gray WM-BG-White WM-Width-Full WM-Relative"
-                  >
-                    <v-text-field
-                      name="title"
-                      label="Title"
-                      color="black"
-                      class="pa-2 Input"
-                      v-model="selectbox.title"
-                      :rules="[rules.required]"
-                    ></v-text-field>
-                    <v-btn
-                      absolute
-                      small
-                      right
-                      bottom
-                      color="pink"
-                      @click="removeSelectboxForm(keyForm, keySelect, keychildren)"
-                      v-if="keySelect >= 1"
-                    >
-                      <v-icon class="white--text mr-2 caption">fas fa-times</v-icon>REMOVE
-                    </v-btn>
-                  </v-flex>
                 </v-layout>
-                <v-btn
+                <v-layout
-                  absolute
+                    row
-                  right
+                    wrap
-                  bottom
+                    class="pb-4 ma-2 WM-Border WM-Border-Gray WM-BG-White WM-Relative"
-                  small
+                    :key="keyForm"
-                  @click="addSelectboxForm(keyForm, keychildren)"
+                    v-for="(info, keyForm) in form.info"
-                  color="black"
                 >
-                  <v-icon class="white--text mr-2 caption">fas fa-plus</v-icon>
+                    <v-layout row wrap class="ma-2">
-                  <span class="white--text">Add</span>
+                        <v-flex xs12 md3 sm3>
-                </v-btn>
+                            <v-text-field
-              </v-layout>
+                                name="inputname"
-              <v-btn
+                                v-model="info.name"
-                absolute
+                                label="Input Name"
-                small
+                                color="black"
-                right
+                                class="pa-2"
-                top
+                                :rules="[rules.required]"
-                color="pink"
+                            ></v-text-field>
-                @click="removeForm(keyForm, keychildren)"
+                        </v-flex>
-              >
+                        <v-flex xs12 md3 sm3>
-                <v-icon class="white--text mr-2 caption">fas fa-times</v-icon>REMOVE
+                            <v-select
-              </v-btn>
+                                :items="type"
-            </v-layout>
+                                item-text="state"
-            <v-btn absolute small right bottom color="cyan" @click="duplicateForm(keyForm)">
+                                item-value="abbr"
-              <v-icon class="white--text mr-2 caption">fas fa-plus</v-icon>ADD
+                                label="Type"
-            </v-btn>
+                                v-bind="info.id !== 0 ? {disabled: true} : {disabled: false}"
-          </v-layout>
+                                v-model="info.type"
-          <v-btn v-if="keyForm > 0" absolute small right top color="pink" @click="removeInput(keyForm)">
+                                single-line
-            <v-icon class="white--text mr-2 caption">fas fa-times</v-icon>REMOVE
+                                color="black"
-          </v-btn>
+                                class="pa-2"
-          <v-layout
+                                @change="changeType(keyForm, info.type)"
-            row
+                            ></v-select>
-            wrap
+                        </v-flex>
-            align-center
+                        <!-- Text Input Section -->
-            justify-center
+                        <v-flex xs12 md3 sm3>
-            class="mt-4"
+                            <v-select
-            v-if="(form.info.length -1)  == keyForm"
+                                :items="size"
-          >
+                                item-text="state"
-            <v-btn absolute right bottom small @click="addInput" color="pink" class="mb-2">
+                                item-value="abbr"
-              <v-icon class="white--text mr-2 caption">fas fa-plus</v-icon>
+                                label="Size"
-              <span class="white--text">Add</span>
+                                v-model="info.size"
-            </v-btn>
+                                v-if="info.type !== 'Form'"
-          </v-layout>
+                                single-line
-        </v-layout>
+                                color="black"
+                                class="pa-2"
+                            ></v-select>
+                        </v-flex>
+                    </v-layout>
+                    <!-- SelectBox Section -->
+                    <v-layout
+                        class="ma-3 pa-3 WM-Border WM-Border-Black WM-Relative WM-Width-Full"
+                        row
+                        wrap
+                        v-if="info.type === 'Select' || info.type === 'Checkbox' || info.type === 'Radiobutton'"
+                    >
+                        <v-layout
+                            row
+                            wrap
+                            class="WM-Relative WM-Width-Full"
+                            v-if="info['options'].length > 0"
+                        >
+                            <v-flex
+                                xs12
+                                md3
+                                sm3
+                                v-for="(selectbox , keySelect) in info['options']"
+                                :key="keySelect"
+                                class="pb-4 ma-2 WM-Border WM-Border-Gray WM-BG-White WM-Width-Full WM-Relative"
+                            >
+                                <v-text-field
+                                    :rules="[rules.required]"
+                                    name="title"
+                                    label="Title"
+                                    color="black"
+                                    class="pa-2 Input"
+                                    v-model="selectbox.title"
+                                ></v-text-field>
+                                <v-btn
+                                    absolute
+                                    small
+                                    right
+                                    bottom
+                                    color="pink"
+                                    v-if="keySelect >= 1"
+                                    @click="removeSelectbox(keyForm, keySelect)"
+                                >
+                                    <v-icon class="white--text mr-2 caption">fas fa-times</v-icon>REMOVE
+                                </v-btn>
+                            </v-flex>
+                        </v-layout>
+                        <v-btn
+                            absolute
+                            right
+                            bottom
+                            small
+                            @click="addSelectbox(keyForm)"
+                            color="black"
+                            class="mb-2"
+                        >
+                            <v-icon class="white--text mr-2 caption">fas fa-plus</v-icon>
+                            <span class="white--text">Add</span>
+                        </v-btn>
+                    </v-layout>
+                    <v-layout
+                        class="ma-3 pa-3 WM-Border WM-Border-Black WM-Relative WM-Width-Full"
+                        row
+                        wrap
+                        v-if="info.type === 'Range'"
+                    >
+                        <v-layout
+                            row
+                            wrap
+                            class="WM-Relative WM-Width-Full"
+                            v-if="info['options'].length > 0"
+                        >
+                            <v-flex
+                                xs12
+                                md3
+                                sm3
+                                class="pb-4 ma-2 WM-Border WM-Border-Gray WM-BG-White WM-Width-Full WM-Relative"
+                            >
+                                <v-text-field
+                                    :rules="[rules.required]"
+                                    name="from"
+                                    label="From"
+                                    color="black"
+                                    class="pa-2 Input"
+                                    v-model="info['options'][0].title"
+                                ></v-text-field>
+                            </v-flex>
+                            <v-flex
+                                xs12
+                                md3
+                                sm3
+                                class="pb-4 ma-2 WM-Border WM-Border-Gray WM-BG-White WM-Width-Full WM-Relative"
+                            >
+                                <v-text-field
+                                    :rules="[rules.required]"
+                                    name="to"
+                                    label="To"
+                                    color="black"
+                                    class="pa-2 Input"
+                                    v-model="info['options'][1].title"
+                                ></v-text-field>
+                            </v-flex>
+                        </v-layout>
+                    </v-layout>
+                    <!-- Form Section -->
+                    <v-layout
+                        row
+                        wrap
+                        v-if="info.type === 'Form'"
+                        class="pa-3 my-4 mx-3 WM-Border WM-Border-Black WM-Relative"
+                    >
+                        <v-layout
+                            row
+                            wrap
+                            v-for="(children , keychildren) in info.children"
+                            :key="keychildren"
+                            class="pa-3 my-4 mx-3 WM-Border WM-Border-Gray WM-Color-LightGrey WM-Width-Full WM-Relative Form"
+                        >
+                            <v-flex xs12 md3 sm3>
+                                <v-text-field
+                                    :rules="[rules.required]"
+                                    name="name"
+                                    v-model="children.name"
+                                    label="Input Name"
+                                    color="black"
+                                    class="pa-2"
+                                ></v-text-field>
+                            </v-flex>
+                            <v-flex xs12 md3 sm3>
+                                <v-select
+                                    :items="type"
+                                    item-text="state"
+                                    item-value="abbr"
+                                    label="Type"
+                                    v-model="children.type"
+                                    v-bind="children.id !== 0 ? {disabled: true} : {disabled: false}"
+                                    single-line
+                                    color="black"
+                                    class="pa-2"
+                                    @change="changeTypeForm(keyForm, children.type, keychildren)"
+                                ></v-select>
+                            </v-flex>
+                            <v-flex xs12 md3 sm3>
+                                <v-select
+                                    :items="size"
+                                    item-text="state"
+                                    item-value="abbr"
+                                    label="Size"
+                                    v-if="children.type !== 'Form'"
+                                    v-model="children.size"
+                                    single-line
+                                    color="black"
+                                    class="pa-2"
+                                ></v-select>
+                            </v-flex>
+                            <!-- Inner Form Selectbox Section  -->
+                            <v-layout
+                                row
+                                wrap
+                                class="pa-3 mb-3 WM-Border WM-Border-Black WM-Relative WM-Width-Full"
+                                v-if="children.type === 'Select' || children.type === 'Checkbox' || children.type === 'Radiobutton'"
+                            >
+                                <v-layout
+                                    row
+                                    wrap
+                                    class="WM-Relative WM-Width-Full"
+                                    v-if="children['options'].length > 0"
+                                >
+                                    <v-flex
+                                        xs12
+                                        md3
+                                        sm3
+                                        v-for="(selectbox , keySelect) in children['options']"
+                                        :key="keySelect"
+                                        class="pb-4 ma-2 WM-Border WM-Border-Gray WM-BG-White WM-Width-Full WM-Relative"
+                                    >
+                                        <v-text-field
+                                            name="title"
+                                            label="Title"
+                                            color="black"
+                                            class="pa-2 Input"
+                                            v-model="selectbox.title"
+                                            :rules="[rules.required]"
+                                        ></v-text-field>
+                                        <v-btn
+                                            absolute
+                                            small
+                                            right
+                                            bottom
+                                            color="pink"
+                                            @click="removeSelectboxForm(keyForm, keySelect, keychildren)"
+                                            v-if="keySelect >= 1"
+                                        >
+                                            <v-icon class="white--text mr-2 caption">fas fa-times</v-icon>REMOVE
+                                        </v-btn>
+                                    </v-flex>
+                                </v-layout>
+                                <v-btn
+                                    absolute
+                                    right
+                                    bottom
+                                    small
+                                    @click="addSelectboxForm(keyForm, keychildren)"
+                                    color="black"
+                                >
+                                    <v-icon class="white--text mr-2 caption">fas fa-plus</v-icon>
+                                    <span class="white--text">Add</span>
+                                </v-btn>
+                            </v-layout>
+                            <v-btn
+                                absolute
+                                small
+                                right
+                                top
+                                color="pink"
+                                @click="removeForm(keyForm, keychildren)"
+                            >
+                                <v-icon class="white--text mr-2 caption">fas fa-times</v-icon>REMOVE
+                            </v-btn>
+                        </v-layout>
+                        <v-btn
+                            absolute
+                            small
+                            right
+                            bottom
+                            color="cyan"
+                            @click="duplicateForm(keyForm)"
+                        >
+                            <v-icon class="white--text mr-2 caption">fas fa-plus</v-icon>ADD
+                        </v-btn>
+                    </v-layout>
+                    <v-btn
+                        v-if="keyForm > 0 || form.info.length > 1"
+                        absolute
+                        small
+                        right
+                        top
+                        color="pink"
+                        @click="removeInput(keyForm)"
+                    >
+                        <v-icon class="white--text mr-2 caption">fas fa-times</v-icon>REMOVE
+                    </v-btn>
+                    <v-layout
+                        row
+                        wrap
+                        align-center
+                        justify-center
+                        class="mt-4"
+                        v-if="(form.info.length -1)  == keyForm"
+                    >
+                        <v-btn
+                            absolute
+                            right
+                            bottom
+                            small
+                            @click="addInput"
+                            color="pink"
+                            class="mb-2"
+                        >
+                            <v-icon class="white--text mr-2 caption">fas fa-plus</v-icon>
+                            <span class="white--text">Add</span>
+                        </v-btn>
+                    </v-layout>
+                </v-layout>
 
-        <v-layout row wrap align-center justify-center class="mt-4">
+                <v-layout row wrap align-center justify-center class="mt-4">
-          <v-btn class="WM-CyanBlueGradient-BG" style="padding:10px 60px" @click="registerForm">
+                    <v-btn
-            <v-icon class="white--text mr-2 caption">fas fa-check</v-icon>
+                        class="WM-CyanBlueGradient-BG"
-            <span class="white--text">Generate Form</span>
+                        style="padding:10px 60px"
-          </v-btn>
+                        @click="registerForm"
-          <router-link to="/dashboard">
+                    >
-            <v-btn class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black ml-5">
+                        <v-icon class="white--text mr-2 caption">fas fa-check</v-icon>
-              <v-icon class="black--text mr-2 caption">fas fa-chevron-left</v-icon>
+                        <span class="white--text">Generate Form</span>
-              <span class="black--text">Back</span>
+                    </v-btn>
-            </v-btn>
+                    <router-link to="/dashboard">
-          </router-link>
+                        <v-btn class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black ml-5">
-        </v-layout>
+                            <v-icon class="black--text mr-2 caption">fas fa-chevron-left</v-icon>
-      </material-card>
+                            <span class="black--text">Back</span>
-    </v-container>
+                        </v-btn>
-  </v-form>
+                    </router-link>
+                </v-layout>
+            </material-card>
+        </v-container>
+    </v-form>
 </template>
 <script>
 import { ApiService } from "@/services";
 import { urls } from "@/config/urls";
 export default {
-  data() {
+    data() {
-    return {
+        return {
-      form: {
+            form: {
-        name: "",
+                name: "",
-        unique_code: "",
+                unique_code: "",
-        info: [
+                info: [
-          {
+                    {
-            id: 0,
+                        id: 0,
-            name: "",
+                        name: "",
-            type: "",
+                        type: "",
-            size: ""
+                        size: ""
-          }
+                    }
-        ]
+                ]
-      },
+            },
-      type: [
+            type: [
-        { state: "Text", abbr: "Text" },
+                { state: "Text", abbr: "Text" },
-        { state: "Checkbox", abbr: "Checkbox" },
+                { state: "Checkbox", abbr: "Checkbox" },
-        { state: "Select", abbr: "Select" },
+                { state: "Select", abbr: "Select" },
-        { state: "Form", abbr: "Form" }
+                { state: "Radiobutton", abbr: "Radiobutton" },
-      ],
+                { state: "Switch", abbr: "Switch" },
-      size: [
+                { state: "Range", abbr: "Range" },
-        { state: "not Selected", abbr: "" },
+                { state: "Time", abbr: "Time" },
-        { state: "2 as 12", abbr: "md2 xs12" },
+                { state: "Form", abbr: "Form" }
-        { state: "3 as 12", abbr: "md3 xs12" },
+            ],
-        { state: "4 as 12", abbr: "md4 xs12" },
+            size: [
-        { state: "6 as 12", abbr: "md6 xs12" },
+                { state: "not Selected", abbr: "" },
-        { state: "8 as 12", abbr: "md8 xs12" },
+                { state: "2 as 12", abbr: "md2 xs12" },
-        { state: "10 as 12", abbr: "md10 xs12" },
+                { state: "3 as 12", abbr: "md3 xs12" },
-        { state: "10 as 12", abbr: "md12 xs12" },
+                { state: "4 as 12", abbr: "md4 xs12" },
-      ],
+                { state: "6 as 12", abbr: "md6 xs12" },
-      rules: {
+                { state: "8 as 12", abbr: "md8 xs12" },
-        required: value => !!value || "Required."
+                { state: "10 as 12", abbr: "md10 xs12" },
-      },
+                { state: "10 as 12", abbr: "md12 xs12" }
-    };
+            ],
-  },
+            rules: {
-  created() {
+                required: value => !!value || "Required."
-    if (this.$route.params.testType) {
+            }
-      this.load(this.$route.params.testType);
+        };
-    }
-  },
-  methods: {
-    changeType(infoIndex, selectedboxType) {
-      if (selectedboxType == "Select" || selectedboxType == "Checkbox") {
-        this.form.info[infoIndex]["options"] = [{ id: 0, title: "" }];
-      } else {
-        this.form.info[infoIndex]["options"] = [];
-      }
-      if (selectedboxType == "Form") {
-        this.form.info[infoIndex]["children"] = [
-          { id: 0, name: "", type: "", size: "" }
-        ];
-      }
     },
-    removeSelectbox(infoIndex, selectboxOptions) {
+    created() {
-      let form = this.form;
-      this.form = [];
-      form.info[infoIndex]["options"].splice(selectboxOptions, 1);
-      this.form = form;
-    },
-    addSelectbox(infoIndex) {
-      let form = this.form;
-      this.form = [];
-      form.info[infoIndex]["options"].push({ id: 0, title: "" });
-      this.form = form;
-    },
-    addInput() {
-      this.form.info.push({ id: 0, name: "", type: "", size: "" });
-    },
-    changeTypeForm(infoIndex, type, formLevel) {
-      if (type == "Select" || type == "Checkbox") {
-        let form = this.form;
-        this.form = "";
-        form.info[infoIndex]["children"][formLevel]["options"] = [
-          { id: 0, title: "" }
-        ];
-        this.form = form;
-      } else {
-        let form = this.form;
-        this.form = "";
-        form.info[infoIndex]["children"][formLevel]["options"] = [];
-        this.form = form;
-      }
-    },
-    removeSelectboxForm(infoIndex, selectboxOptions, formLevel) {
-      let form = this.form;
-      this.form = [];
-      form.info[infoIndex]["children"][formLevel]["options"].splice(
-        selectboxOptions,
-        1
-      );
-      this.form = form;
-    },
-    addSelectboxForm(infoIndex, formLevel) {
-      let form = this.form;
-      this.form = [];
-      form.info[infoIndex]["children"][formLevel]["options"].push({
-        id: 0, 
-        title: ""
-      });
-      this.form = form;
-    },
-    duplicateForm(infoIndex) {
-      let form = this.form;
-      this.form = [];
-      form.info[infoIndex]["children"].push({
-        id: 0,
-        name: "",
-        type: "",
-        size: ""
-      });
-      this.form = form;
-    },
-    removeForm(infoIndex, formLevel) {
-      let form = this.form;
-      this.form = [];
-      form.info[infoIndex]["children"].splice(formLevel, 1);
-      this.form = form;
-    },
-    removeInput(infoIndex) {
-      let form = this.form;
-      this.form = [];
-      form.info.splice(infoIndex, 1);
-      this.form = form;
-    },
-    async registerForm() {
-      if (this.$refs.form.validate()) {
-        let result = null;
         if (this.$route.params.testType) {
-          result = await ApiService.put(urls.updateTestType(this.$route.params.testType), this.form); 
+            this.load(this.$route.params.testType);
-        } else {
-          result = await ApiService.post(urls.storeTestType, this.form); 
         }
-        if (result && result.status == 200) {
+    },
-          this.$router.push({ name: `Dashboard` });
+    methods: {
+        changeType(infoIndex, selectedboxType) {
+            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: "" }];
+            } else {
+                this.form.info[infoIndex]["options"] = [];
+            }
+            if (selectedboxType == "Form") {
+                this.form.info[infoIndex]["children"] = [
+                    { id: 0, name: "", type: "", size: "" }
+                ];
+            }
+        },
+        removeSelectbox(infoIndex, selectboxOptions) {
+            let form = this.form;
+            this.form = [];
+            form.info[infoIndex]["options"].splice(selectboxOptions, 1);
+            this.form = form;
+        },
+        addSelectbox(infoIndex) {
+            let form = this.form;
+            this.form = [];
+            form.info[infoIndex]["options"].push({ id: 0, title: "" });
+            this.form = form;
+        },
+        addInput() {
+            this.form.info.push({ id: 0, name: "", type: "", size: "" });
+        },
+        changeTypeForm(infoIndex, type, formLevel) {
+            if (type == "Select" || type == "Checkbox" || type == "Radiobutton") {
+                let form = this.form;
+                this.form = "";
+                form.info[infoIndex]["children"][formLevel]["options"] = [
+                    { id: 0, title: "" }
+                ];
+                this.form = form;
+            } else if(type == "Rang") {
+                let form = this.form;
+                this.form = "";
+                form.info[infoIndex]["children"][formLevel]["options"] = [
+                    { id: 0, from: "", to: "" }
+                ];
+                this.form = form;
+            } else {
+                let form = this.form;
+                this.form = "";
+                form.info[infoIndex]["children"][formLevel]["options"] = [];
+                this.form = form;
+            }
+        },
+        removeSelectboxForm(infoIndex, selectboxOptions, formLevel) {
+            let form = this.form;
+            this.form = [];
+            form.info[infoIndex]["children"][formLevel]["options"].splice(
+                selectboxOptions,
+                1
+            );
+            this.form = form;
+        },
+        addSelectboxForm(infoIndex, formLevel) {
+            let form = this.form;
+            this.form = [];
+            form.info[infoIndex]["children"][formLevel]["options"].push({
+                id: 0,
+                title: ""
+            });
+            this.form = form;
+        },
+        duplicateForm(infoIndex) {
+            let form = this.form;
+            this.form = [];
+            form.info[infoIndex]["children"].push({
+                id: 0,
+                name: "",
+                type: "",
+                size: ""
+            });
+            this.form = form;
+        },
+        removeForm(infoIndex, formLevel) {
+            let form = this.form;
+            this.form = [];
+            form.info[infoIndex]["children"].splice(formLevel, 1);
+            this.form = form;
+        },
+        removeInput(infoIndex) {
+            let form = this.form;
+            this.form = [];
+            form.info.splice(infoIndex, 1);
+            this.form = form;
+        },
+        async registerForm() {
+            if (this.$refs.form.validate()) {
+                let result = null;
+                if (this.$route.params.testType) {
+                    result = await ApiService.put(
+                        urls.updateTestType(this.$route.params.testType),
+                        this.form
+                    );
+                } else {
+                    result = await ApiService.post(
+                        urls.storeTestType,
+                        this.form
+                    );
+                }
+                if (result && result.status == 200) {
+                    this.$router.push({ name: `Dashboard` });
+                }
+            }
+        },
+        async load(id) {
+            const result = await ApiService.get(urls.editTestType(id));
+            if (result.status == 200) {
+                this.form = result.data.data;
+            }
         }
-      }
+    }
-    },
-     async load(id) {
-      const result = await ApiService.get(urls.editTestType(id));
-      if (result.status == 200) {
-        this.form = result.data.data;
-      }
-    },
-  }
 };
 </script>
 <style lang="css" scoped>
 .WM-Border-Gray {
-  border-color: #aaa !important;
+    border-color: #aaa !important;
 }
 .WM-Color-LightGrey {
-  background-color: #f5f5f5;
+    background-color: #f5f5f5;
 }
 .v-btn--top.v-btn--absolute.v-btn--small {
-  top: -25px !important;
+    top: -25px !important;
 }
 .v-btn--bottom.v-btn--absolute.v-btn--small {
-  bottom: -24px !important;
+    bottom: -24px !important;
 }
 </style>