feat(core): Enable option group for select fields in admin settings p…

…anel (#411)
getdokan · Oct 22, 2018 · 73a72d3 · 73a72d3
1 parent 6050b02
commit 73a72d3
Show file tree

Hide file tree

Showing 2 changed files with 141 additions and 39 deletions.
diff --git a/assets/js/vue-admin.js b/assets/js/vue-admin.js
@@ -1961,6 +1961,15 @@ let Loading = dokan_get_lib('Loading');
 //
 //
 //
+//
+//
+//
+//
+//
+//
+//
+//
+//
 
 
 
@@ -4692,46 +4701,130 @@ var render = function() {
           ]),
           _vm._v(" "),
           _c("td", [
-            _c(
-              "select",
-              {
-                directives: [
+            !_vm.fieldData.grouped
+              ? _c(
+                  "select",
                   {
-                    name: "model",
-                    rawName: "v-model",
-                    value: _vm.fieldValue[_vm.fieldData.name],
-                    expression: "fieldValue[fieldData.name]"
-                  }
-                ],
-                staticClass: "regular",
-                attrs: {
-                  name: _vm.sectionId + "[" + _vm.fieldData.name + "]",
-                  id: _vm.sectionId + "[" + _vm.fieldData.name + "]"
-                },
-                on: {
-                  change: function($event) {
-                    var $$selectedVal = Array.prototype.filter
-                      .call($event.target.options, function(o) {
-                        return o.selected
-                      })
-                      .map(function(o) {
-                        var val = "_value" in o ? o._value : o.value
-                        return val
+                    directives: [
+                      {
+                        name: "model",
+                        rawName: "v-model",
+                        value: _vm.fieldValue[_vm.fieldData.name],
+                        expression: "fieldValue[fieldData.name]"
+                      }
+                    ],
+                    staticClass: "regular",
+                    attrs: {
+                      name: _vm.sectionId + "[" + _vm.fieldData.name + "]",
+                      id: _vm.sectionId + "[" + _vm.fieldData.name + "]"
+                    },
+                    on: {
+                      change: function($event) {
+                        var $$selectedVal = Array.prototype.filter
+                          .call($event.target.options, function(o) {
+                            return o.selected
+                          })
+                          .map(function(o) {
+                            var val = "_value" in o ? o._value : o.value
+                            return val
+                          })
+                        _vm.$set(
+                          _vm.fieldValue,
+                          _vm.fieldData.name,
+                          $event.target.multiple
+                            ? $$selectedVal
+                            : $$selectedVal[0]
+                        )
+                      }
+                    }
+                  },
+                  [
+                    _vm.fieldData.placeholder
+                      ? _c("option", {
+                          attrs: { value: "" },
+                          domProps: {
+                            innerHTML: _vm._s(_vm.fieldData.placeholder)
+                          }
+                        })
+                      : _vm._e(),
+                    _vm._v(" "),
+                    _vm._l(_vm.fieldData.options, function(
+                      optionVal,
+                      optionKey
+                    ) {
+                      return _c("option", {
+                        domProps: {
+                          value: optionKey,
+                          innerHTML: _vm._s(optionVal)
+                        }
                       })
-                    _vm.$set(
-                      _vm.fieldValue,
-                      _vm.fieldData.name,
-                      $event.target.multiple ? $$selectedVal : $$selectedVal[0]
-                    )
-                  }
-                }
-              },
-              _vm._l(_vm.fieldData.options, function(optionVal, optionKey) {
-                return _c("option", {
-                  domProps: { value: optionKey, innerHTML: _vm._s(optionVal) }
-                })
-              })
-            ),
+                    })
+                  ],
+                  2
+                )
+              : _c(
+                  "select",
+                  {
+                    directives: [
+                      {
+                        name: "model",
+                        rawName: "v-model",
+                        value: _vm.fieldValue[_vm.fieldData.name],
+                        expression: "fieldValue[fieldData.name]"
+                      }
+                    ],
+                    staticClass: "regular",
+                    attrs: {
+                      name: _vm.sectionId + "[" + _vm.fieldData.name + "]",
+                      id: _vm.sectionId + "[" + _vm.fieldData.name + "]"
+                    },
+                    on: {
+                      change: function($event) {
+                        var $$selectedVal = Array.prototype.filter
+                          .call($event.target.options, function(o) {
+                            return o.selected
+                          })
+                          .map(function(o) {
+                            var val = "_value" in o ? o._value : o.value
+                            return val
+                          })
+                        _vm.$set(
+                          _vm.fieldValue,
+                          _vm.fieldData.name,
+                          $event.target.multiple
+                            ? $$selectedVal
+                            : $$selectedVal[0]
+                        )
+                      }
+                    }
+                  },
+                  [
+                    _vm.fieldData.placeholder
+                      ? _c("option", {
+                          attrs: { value: "" },
+                          domProps: {
+                            innerHTML: _vm._s(_vm.fieldData.placeholder)
+                          }
+                        })
+                      : _vm._e(),
+                    _vm._v(" "),
+                    _vm._l(_vm.fieldData.options, function(optionGroup) {
+                      return _c(
+                        "optgroup",
+                        { attrs: { label: optionGroup.group_label } },
+                        _vm._l(optionGroup.group_values, function(option) {
+                          return _c("option", {
+                            domProps: {
+                              value: option.value,
+                              innerHTML: _vm._s(option.label)
+                            }
+                          })
+                        })
+                      )
+                    })
+                  ],
+                  2
+                ),
             _vm._v(" "),
             _c("p", {
               staticClass: "description",

diff --git a/src/admin/components/Fields.vue b/src/admin/components/Fields.vue
@@ -66,9 +66,18 @@
                 <label :for="sectionId + '[' + fieldData.name + ']'">{{ fieldData.label }}</label>
             </th>
             <td>
-                <select class="regular" :name="sectionId + '[' + fieldData.name + ']'" :id="sectionId + '[' + fieldData.name + ']'" v-model="fieldValue[fieldData.name]">
+                <select v-if="!fieldData.grouped" class="regular" :name="sectionId + '[' + fieldData.name + ']'" :id="sectionId + '[' + fieldData.name + ']'" v-model="fieldValue[fieldData.name]">
+                    <option v-if="fieldData.placeholder" value="" v-html="fieldData.placeholder"></option>
                     <option v-for="( optionVal, optionKey ) in fieldData.options" :value="optionKey" v-html="optionVal"></option>
                 </select>
+
+                <select v-else class="regular" :name="sectionId + '[' + fieldData.name + ']'" :id="sectionId + '[' + fieldData.name + ']'" v-model="fieldValue[fieldData.name]">
+                    <option v-if="fieldData.placeholder" value="" v-html="fieldData.placeholder"></option>
+                    <optgroup v-for="optionGroup in fieldData.options" :label="optionGroup.group_label">
+                        <option v-for="option in optionGroup.group_values" :value="option.value" v-html="option.label" />
+                    </optgroup>
+                </select>
+
                 <p class="description" v-html="fieldData.desc"></p>
             </td>
         </tr>