From c6f352c711be8c2c56eb4be53d1672774209f2d9 Mon Sep 17 00:00:00 2001
From: saeid <saeidkhakbazan@gmail.com>
Date: Mon, 29 Apr 2019 12:08:53 +0430
Subject: [PATCH] Edit Test Result

---
 public/15.js                                  | 132 +++++++----
 public/2.js                                   | 211 ++++++++++--------
 public/mix-manifest.json                      |   2 +-
 public/vue/js/app.js                          |   1 +
 resources/js/vue/config/urls.js               |   1 +
 resources/js/vue/views/TestResult/AddEdit.vue |  62 +++--
 resources/js/vue/views/TestType/AddEdit.vue   |  23 +-
 7 files changed, 267 insertions(+), 165 deletions(-)

diff --git a/public/15.js b/public/15.js
index fbe49eae..d4ced414 100644
--- a/public/15.js
+++ b/public/15.js
@@ -154,9 +154,6 @@ function _asyncToGenerator(fn) { return function () { var self = this, args = ar
 //
 //
 //
-//
-//
-//
 
 
 /* harmony default export */ __webpack_exports__["default"] = ({
@@ -165,14 +162,14 @@ function _asyncToGenerator(fn) { return function () { var self = this, args = ar
       result: ["Accept", "Reject"],
       testTypeNames: [],
       searchInput: "",
-      form: {
-        autoclave_id: "",
-        result: "",
-        data: []
-      },
+      form: [],
       filter: {
         name: "",
         unique_code: ""
+      },
+      formData: {
+        autoclave_id: "",
+        result: ""
       }
     };
   },
@@ -214,7 +211,7 @@ function _asyncToGenerator(fn) { return function () { var self = this, args = ar
       var _selectTestType = _asyncToGenerator(
       /*#__PURE__*/
       _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_0___default.a.mark(function _callee2() {
-        var result;
+        var result, key, keyForm;
         return _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_0___default.a.wrap(function _callee2$(_context2) {
           while (1) {
             switch (_context2.prev = _context2.next) {
@@ -226,7 +223,21 @@ function _asyncToGenerator(fn) { return function () { var self = this, args = ar
                 result = _context2.sent;
 
                 if (result && result.status == 200) {
-                  this.form.data = result.data.data;
+                  this.form = result.data.data;
+
+                  for (key in result.data.data) {
+                    if (result.data.data.hasOwnProperty(key)) {
+                      if (result.data.data[key].type !== 'Form') {
+                        this.formData[result.data.data[key].name] = '';
+                      } else {
+                        for (keyForm in result.data.data[key].children) {
+                          if (result.data.data[key].children.hasOwnProperty(keyForm)) {
+                            this.formData[result.data.data[key].children[keyForm].name] = '';
+                          }
+                        }
+                      }
+                    }
+                  }
                 }
 
               case 4:
@@ -242,6 +253,41 @@ function _asyncToGenerator(fn) { return function () { var self = this, args = ar
       }
 
       return selectTestType;
+    }(),
+    submitForm: function () {
+      var _submitForm = _asyncToGenerator(
+      /*#__PURE__*/
+      _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_0___default.a.mark(function _callee3() {
+        var result;
+        return _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_0___default.a.wrap(function _callee3$(_context3) {
+          while (1) {
+            switch (_context3.prev = _context3.next) {
+              case 0:
+                _context3.next = 2;
+                return _services__WEBPACK_IMPORTED_MODULE_1__["ApiService"].post(_config_urls__WEBPACK_IMPORTED_MODULE_2__["urls"].storeTestResult, this.formData);
+
+              case 2:
+                result = _context3.sent;
+
+                if (result && result.status == 200) {
+                  this.$router.push({
+                    name: 'Dashboard'
+                  });
+                }
+
+              case 4:
+              case "end":
+                return _context3.stop();
+            }
+          }
+        }, _callee3, this);
+      }));
+
+      function submitForm() {
+        return _submitForm.apply(this, arguments);
+      }
+
+      return submitForm;
     }()
   }
 });
@@ -399,11 +445,11 @@ var render = function() {
                           color: "black"
                         },
                         model: {
-                          value: _vm.form.autoclave_id,
+                          value: _vm.formData.autoclave_id,
                           callback: function($$v) {
-                            _vm.$set(_vm.form, "autoclave_id", $$v)
+                            _vm.$set(_vm.formData, "autoclave_id", $$v)
                           },
-                          expression: "form.autoclave_id"
+                          expression: "formData.autoclave_id"
                         }
                       })
                     ],
@@ -422,39 +468,37 @@ var render = function() {
                           color: "black"
                         },
                         model: {
-                          value: _vm.form.result,
+                          value: _vm.formData.result,
                           callback: function($$v) {
-                            _vm.$set(_vm.form, "result", $$v)
+                            _vm.$set(_vm.formData, "result", $$v)
                           },
-                          expression: "form.result"
+                          expression: "formData.result"
                         }
                       })
                     ],
                     1
                   ),
                   _vm._v(" "),
-                  _vm._l(_vm.form.data, function(item, key) {
+                  _vm._l(_vm.form, function(item, key) {
                     return _c(
                       "v-flex",
-                      { key: key },
+                      { key: key, class: ["pa-2", item.size] },
                       [
                         item.type == "Text"
                           ? _c("v-text-field", {
-                              staticClass: "pa-2",
                               attrs: { label: item.name, color: "black" },
                               model: {
-                                value: item[item.name],
+                                value: _vm.formData[item.name],
                                 callback: function($$v) {
-                                  _vm.$set(item, item.name, $$v)
+                                  _vm.$set(_vm.formData, item.name, $$v)
                                 },
-                                expression: "item[item.name]"
+                                expression: "formData[item.name]"
                               }
                             })
                           : _vm._e(),
                         _vm._v(" "),
                         item.type == "Select"
                           ? _c("v-select", {
-                              staticClass: "pa-2",
                               attrs: {
                                 items: item.options,
                                 label: item.name,
@@ -462,11 +506,11 @@ var render = function() {
                                 "item-text": "title"
                               },
                               model: {
-                                value: item[item.name],
+                                value: _vm.formData[item.name],
                                 callback: function($$v) {
-                                  _vm.$set(item, item.name, $$v)
+                                  _vm.$set(_vm.formData, item.name, $$v)
                                 },
-                                expression: "item[item.name]"
+                                expression: "formData[item.name]"
                               }
                             })
                           : _vm._e(),
@@ -489,11 +533,11 @@ var render = function() {
                                       value: optionValue.title
                                     },
                                     model: {
-                                      value: item[item.name],
+                                      value: _vm.formData[item.name],
                                       callback: function($$v) {
-                                        _vm.$set(item, item.name, $$v)
+                                        _vm.$set(_vm.formData, item.name, $$v)
                                       },
-                                      expression: "item[item.name]"
+                                      expression: "formData[item.name]"
                                     }
                                   })
                                 })
@@ -516,33 +560,35 @@ var render = function() {
                                   ) {
                                     return _c(
                                       "v-flex",
-                                      { key: keyChildren },
+                                      {
+                                        key: keyChildren,
+                                        class: ["pa-2", children.size]
+                                      },
                                       [
                                         children.type == "Text"
                                           ? _c("v-text-field", {
-                                              staticClass: "pa-2",
                                               attrs: {
                                                 label: children.name,
                                                 color: "black"
                                               },
                                               model: {
-                                                value: children[children.name],
+                                                value:
+                                                  _vm.formData[children.name],
                                                 callback: function($$v) {
                                                   _vm.$set(
-                                                    children,
+                                                    _vm.formData,
                                                     children.name,
                                                     $$v
                                                   )
                                                 },
                                                 expression:
-                                                  "children[children.name]"
+                                                  "formData[children.name]"
                                               }
                                             })
                                           : _vm._e(),
                                         _vm._v(" "),
                                         children.type == "Select"
                                           ? _c("v-select", {
-                                              staticClass: "pa-2",
                                               attrs: {
                                                 items: children.options,
                                                 label: children.name,
@@ -550,16 +596,17 @@ var render = function() {
                                                 "item-text": "title"
                                               },
                                               model: {
-                                                value: children[children.name],
+                                                value:
+                                                  _vm.formData[children.name],
                                                 callback: function($$v) {
                                                   _vm.$set(
-                                                    children,
+                                                    _vm.formData,
                                                     children.name,
                                                     $$v
                                                   )
                                                 },
                                                 expression:
-                                                  "children[children.name]"
+                                                  "formData[children.name]"
                                               }
                                             })
                                           : _vm._e(),
@@ -588,20 +635,20 @@ var render = function() {
                                                       },
                                                       model: {
                                                         value:
-                                                          children[
+                                                          _vm.formData[
                                                             children.name
                                                           ],
                                                         callback: function(
                                                           $$v
                                                         ) {
                                                           _vm.$set(
-                                                            children,
+                                                            _vm.formData,
                                                             children.name,
                                                             $$v
                                                           )
                                                         },
                                                         expression:
-                                                          "children[children.name]"
+                                                          "formData[children.name]"
                                                       }
                                                     })
                                                   }
@@ -645,7 +692,8 @@ var render = function() {
                     "v-btn",
                     {
                       staticClass: "WM-CyanBlueGradient-BG",
-                      staticStyle: { padding: "10px 60px" }
+                      staticStyle: { padding: "10px 60px" },
+                      on: { click: _vm.submitForm }
                     },
                     [
                       _c(
diff --git a/public/2.js b/public/2.js
index e665a717..151deb10 100644
--- a/public/2.js
+++ b/public/2.js
@@ -292,6 +292,10 @@ function _asyncToGenerator(fn) { return function () { var self = this, args = ar
 //
 //
 //
+//
+//
+//
+//
 
 
 /* harmony default export */ __webpack_exports__["default"] = ({
@@ -325,22 +329,25 @@ function _asyncToGenerator(fn) { return function () { var self = this, args = ar
         abbr: ""
       }, {
         state: "2 as 12",
-        abbr: "col-md-2"
+        abbr: "md2 xs12"
       }, {
         state: "3 as 12",
-        abbr: "col-md-3"
+        abbr: "md3 xs12"
       }, {
         state: "4 as 12",
-        abbr: "col-md-4"
+        abbr: "md4 xs12"
       }, {
         state: "6 as 12",
-        abbr: "col-md-6"
+        abbr: "md6 xs12"
       }, {
         state: "8 as 12",
-        abbr: "col-md-8"
+        abbr: "md8 xs12"
       }, {
         state: "10 as 12",
-        abbr: "col-md-10"
+        abbr: "md10 xs12"
+      }, {
+        state: "10 as 12",
+        abbr: "md12 xs12"
       }],
       rules: {
         required: function required(value) {
@@ -715,29 +722,39 @@ var render = function() {
                           "v-flex",
                           { attrs: { xs12: "", md3: "", sm3: "" } },
                           [
-                            _c("v-select", {
-                              staticClass: "pa-2",
-                              attrs: {
-                                items: _vm.type,
-                                "item-text": "state",
-                                "item-value": "abbr",
-                                label: "Type",
-                                "single-line": "",
-                                color: "black"
-                              },
-                              on: {
-                                change: function($event) {
-                                  return _vm.changeType(keyForm, info.type)
-                                }
-                              },
-                              model: {
-                                value: info.type,
-                                callback: function($$v) {
-                                  _vm.$set(info, "type", $$v)
+                            _c(
+                              "v-select",
+                              _vm._b(
+                                {
+                                  staticClass: "pa-2",
+                                  attrs: {
+                                    items: _vm.type,
+                                    "item-text": "state",
+                                    "item-value": "abbr",
+                                    label: "Type",
+                                    "single-line": "",
+                                    color: "black"
+                                  },
+                                  on: {
+                                    change: function($event) {
+                                      return _vm.changeType(keyForm, info.type)
+                                    }
+                                  },
+                                  model: {
+                                    value: info.type,
+                                    callback: function($$v) {
+                                      _vm.$set(info, "type", $$v)
+                                    },
+                                    expression: "info.type"
+                                  }
                                 },
-                                expression: "info.type"
-                              }
-                            })
+                                "v-select",
+                                info.id !== 0
+                                  ? { disabled: true }
+                                  : { disabled: false },
+                                false
+                              )
+                            )
                           ],
                           1
                         ),
@@ -746,24 +763,26 @@ var render = function() {
                           "v-flex",
                           { attrs: { xs12: "", md3: "", sm3: "" } },
                           [
-                            _c("v-select", {
-                              staticClass: "pa-2",
-                              attrs: {
-                                items: _vm.size,
-                                "item-text": "state",
-                                "item-value": "abbr",
-                                label: "Type",
-                                "single-line": "",
-                                color: "black"
-                              },
-                              model: {
-                                value: info.size,
-                                callback: function($$v) {
-                                  _vm.$set(info, "size", $$v)
-                                },
-                                expression: "info.size"
-                              }
-                            })
+                            info.type !== "Form"
+                              ? _c("v-select", {
+                                  staticClass: "pa-2",
+                                  attrs: {
+                                    items: _vm.size,
+                                    "item-text": "state",
+                                    "item-value": "abbr",
+                                    label: "Size",
+                                    "single-line": "",
+                                    color: "black"
+                                  },
+                                  model: {
+                                    value: info.size,
+                                    callback: function($$v) {
+                                      _vm.$set(info, "size", $$v)
+                                    },
+                                    expression: "info.size"
+                                  }
+                                })
+                              : _vm._e()
                           ],
                           1
                         )
@@ -944,33 +963,43 @@ var render = function() {
                                     "v-flex",
                                     { attrs: { xs12: "", md3: "", sm3: "" } },
                                     [
-                                      _c("v-select", {
-                                        staticClass: "pa-2",
-                                        attrs: {
-                                          items: _vm.type,
-                                          "item-text": "state",
-                                          "item-value": "abbr",
-                                          label: "Type",
-                                          "single-line": "",
-                                          color: "black"
-                                        },
-                                        on: {
-                                          change: function($event) {
-                                            return _vm.changeTypeForm(
-                                              keyForm,
-                                              children.type,
-                                              keychildren
-                                            )
-                                          }
-                                        },
-                                        model: {
-                                          value: children.type,
-                                          callback: function($$v) {
-                                            _vm.$set(children, "type", $$v)
+                                      _c(
+                                        "v-select",
+                                        _vm._b(
+                                          {
+                                            staticClass: "pa-2",
+                                            attrs: {
+                                              items: _vm.type,
+                                              "item-text": "state",
+                                              "item-value": "abbr",
+                                              label: "Type",
+                                              "single-line": "",
+                                              color: "black"
+                                            },
+                                            on: {
+                                              change: function($event) {
+                                                return _vm.changeTypeForm(
+                                                  keyForm,
+                                                  children.type,
+                                                  keychildren
+                                                )
+                                              }
+                                            },
+                                            model: {
+                                              value: children.type,
+                                              callback: function($$v) {
+                                                _vm.$set(children, "type", $$v)
+                                              },
+                                              expression: "children.type"
+                                            }
                                           },
-                                          expression: "children.type"
-                                        }
-                                      })
+                                          "v-select",
+                                          children.id !== 0
+                                            ? { disabled: true }
+                                            : { disabled: false },
+                                          false
+                                        )
+                                      )
                                     ],
                                     1
                                   ),
@@ -979,24 +1008,26 @@ var render = function() {
                                     "v-flex",
                                     { attrs: { xs12: "", md3: "", sm3: "" } },
                                     [
-                                      _c("v-select", {
-                                        staticClass: "pa-2",
-                                        attrs: {
-                                          items: _vm.size,
-                                          "item-text": "state",
-                                          "item-value": "abbr",
-                                          label: "Type",
-                                          "single-line": "",
-                                          color: "black"
-                                        },
-                                        model: {
-                                          value: children.size,
-                                          callback: function($$v) {
-                                            _vm.$set(children, "size", $$v)
-                                          },
-                                          expression: "children.size"
-                                        }
-                                      })
+                                      children.type !== "Form"
+                                        ? _c("v-select", {
+                                            staticClass: "pa-2",
+                                            attrs: {
+                                              items: _vm.size,
+                                              "item-text": "state",
+                                              "item-value": "abbr",
+                                              label: "Size",
+                                              "single-line": "",
+                                              color: "black"
+                                            },
+                                            model: {
+                                              value: children.size,
+                                              callback: function($$v) {
+                                                _vm.$set(children, "size", $$v)
+                                              },
+                                              expression: "children.size"
+                                            }
+                                          })
+                                        : _vm._e()
                                     ],
                                     1
                                   ),
diff --git a/public/mix-manifest.json b/public/mix-manifest.json
index 335559c1..34a74e6a 100644
--- a/public/mix-manifest.json
+++ b/public/mix-manifest.json
@@ -1,3 +1,3 @@
 {
-    "/vue/js/app.js": "/vue/js/app.js?id=6aabbd513155cd4020b5"
+    "/vue/js/app.js": "/vue/js/app.js?id=705b759be318dc6a6352"
 }
diff --git a/public/vue/js/app.js b/public/vue/js/app.js
index 5057be8a..28c80be1 100644
--- a/public/vue/js/app.js
+++ b/public/vue/js/app.js
@@ -61843,6 +61843,7 @@ var urls = {
   login: "/login",
   logout: "/logout",
   storeMedicalCenter: "/MedicalCenters",
+  storeTestResult: "/TestResults",
   listTestTypeName: "/TestTypes/ListNames",
   getInputs: "/GetInputs",
   listOpertor: "/Users",
diff --git a/resources/js/vue/config/urls.js b/resources/js/vue/config/urls.js
index 1b6e662c..aaf1459d 100644
--- a/resources/js/vue/config/urls.js
+++ b/resources/js/vue/config/urls.js
@@ -5,6 +5,7 @@ const urls = {
     login : "/login",
     logout : "/logout",
     storeMedicalCenter : "/MedicalCenters",
+    storeTestResult : "/TestResults",
     listTestTypeName : "/TestTypes/ListNames",
     getInputs : `/GetInputs`,
     listOpertor : "/Users",
diff --git a/resources/js/vue/views/TestResult/AddEdit.vue b/resources/js/vue/views/TestResult/AddEdit.vue
index 8e58832e..5de6be70 100644
--- a/resources/js/vue/views/TestResult/AddEdit.vue
+++ b/resources/js/vue/views/TestResult/AddEdit.vue
@@ -40,7 +40,7 @@
           <v-flex xs12 sm4 md3>
             <v-text-field
               name="autoclave"
-              v-model="form.autoclave_id"
+              v-model="formData.autoclave_id"
               label="ID AutoClave"
               color="black"
               class="pa-2"
@@ -49,57 +49,54 @@
           <v-flex xs12 sm4 md3>
             <v-select
               :items="result"
-              v-model="form.result"
+              v-model="formData.result"
               label="Resualt"
               color="black"
               class="pa-2"
             ></v-select>
           </v-flex>
-          <v-flex v-for="(item, key) in form.data" :key="key">
+          <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="item[item.name]"
+              v-model="formData[item.name]"
               :label="item.name"
               color="black"
-              class="pa-2"
             ></v-text-field>
             <v-select
               v-if="item.type == 'Select'"
               :items="item.options"
-              v-model="item[item.name]"
+              v-model="formData[item.name]"
               :label="item.name"
               color="black"
-              class="pa-2"
+              
               item-text="title"
             ></v-select>
-            <v-container fluid v-if="item.type == 'Checkbox'">
+            <v-container fluid v-if="item.type == 'Checkbox'" >
               <p>{{ item.name }}</p>
               <v-checkbox
                 v-for="(optionValue, keyOption) in item.options"
                 :key="keyOption"
                 :label="optionValue.title"
-                v-model="item[item.name]"
+                v-model="formData[item.name]"
                 :value="optionValue.title"
               ></v-checkbox>
             </v-container>
             <template v-if="item.type == 'Form'">
               <v-layout row wrap>
                 <h3>{{ item.name }}</h3>
-                <v-flex v-for="(children, keyChildren) in item.children" :key="keyChildren">
+                <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="children[children.name]"
+                    v-model="formData[children.name]"
                     :label="children.name"
                     color="black"
-                    class="pa-2"
                   ></v-text-field>
                   <v-select
                     v-if="children.type == 'Select'"
                     :items="children.options"
-                    v-model="children[children.name]"
+                    v-model="formData[children.name]"
                     :label="children.name"
                     color="black"
-                    class="pa-2"
                     item-text="title"
                   ></v-select>
                   <v-container fluid v-if="children.type == 'Checkbox'">
@@ -108,7 +105,7 @@
                       v-for="(optionValue, keyOption) in children.options"
                       :key="keyOption"
                       :label="optionValue.title"
-                      v-model="children[children.name]"
+                      v-model="formData[children.name]"
                       :value="optionValue.title"
                     ></v-checkbox>
                   </v-container>
@@ -121,7 +118,7 @@
           <v-divider></v-divider>
         </v-layout>
         <v-layout align-center justify-center wrap class="px-5 mt-2">
-          <v-btn class="WM-CyanBlueGradient-BG" style="padding:10px 60px">
+          <v-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>
@@ -144,14 +141,14 @@ export default {
     result: ["Accept", "Reject"],
     testTypeNames: [],
     searchInput: "",
-    form: {
-      autoclave_id: "",
-      result: "",
-      data: []
-    },
+    form: [],
     filter: {
       name: "",
       unique_code: ""
+    },
+    formData : {
+      autoclave_id: "",
+      result: "",
     }
   }),
   created() {
@@ -165,9 +162,28 @@ export default {
     async selectTestType() {
       const result = await ApiService.post(urls.getInputs, this.filter);
       if (result && result.status == 200) {
-        this.form.data = result.data.data;
+        this.form = result.data.data;
+        for (const key in result.data.data) {
+          if (result.data.data.hasOwnProperty(key)) {
+            if(result.data.data[key].type !== 'Form') {
+              this.formData[result.data.data[key].name] = '';
+            } else {
+              for (const keyForm in result.data.data[key].children) {
+                if (result.data.data[key].children.hasOwnProperty(keyForm)) {
+                  this.formData[result.data.data[key].children[keyForm].name] = '';
+                }
+              }
+            }
+          }
+        }
       }
-    }
+    },
+    async submitForm() {
+      const result = await ApiService.post(urls.storeTestResult, this.formData);
+      if (result && result.status == 200) {
+        this.$router.push({name: 'Dashboard'})
+      }
+    },
   }
 };
 </script>
\ No newline at end of file
diff --git a/resources/js/vue/views/TestType/AddEdit.vue b/resources/js/vue/views/TestType/AddEdit.vue
index ad482d53..ca95aa99 100644
--- a/resources/js/vue/views/TestType/AddEdit.vue
+++ b/resources/js/vue/views/TestType/AddEdit.vue
@@ -48,6 +48,7 @@
                 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"
@@ -61,8 +62,9 @@
                 :items="size"
                 item-text="state"
                 item-value="abbr"
-                label="Type"
+                label="Size"
                 v-model="info.size"
+                v-if="info.type !== 'Form'"
                 single-line
                 color="black"
                 class="pa-2"
@@ -150,6 +152,7 @@
                   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"
@@ -161,7 +164,8 @@
                   :items="size"
                   item-text="state"
                   item-value="abbr"
-                  label="Type"
+                  label="Size"
+                  v-if="children.type !== 'Form'"
                   v-model="children.size"
                   single-line
                   color="black"
@@ -297,16 +301,17 @@ export default {
       ],
       size: [
         { state: "not Selected", abbr: "" },
-        { state: "2 as 12", abbr: "col-md-2" },
-        { state: "3 as 12", abbr: "col-md-3" },
-        { state: "4 as 12", abbr: "col-md-4" },
-        { state: "6 as 12", abbr: "col-md-6" },
-        { state: "8 as 12", abbr: "col-md-8" },
-        { state: "10 as 12", abbr: "col-md-10" }
+        { 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" },
       ],
       rules: {
         required: value => !!value || "Required."
-      }
+      },
     };
   },
   created() {