Render form for configuring tesla adapter settings and mime types

src/views/settings/components/Other.vue

@@ -1,27 +1,11 @@
 <template>
   <div v-if="!loading">
-    <el-form ref="formatEncoders" :model="formatEncoders" :label-width="labelWidth">
+    <el-form ref="teslaAdapter" :model="teslaAdapterData" :label-width="labelWidth">
-      <el-form-item label="Phoenix Format encoders:"/>
+      <setting :setting-group="teslaAdapter" :data="teslaAdapterData"/>
-      <el-form-item label="JSON">
-        <el-input :value="formatEncoders.json" @input="updateSetting($event, 'format_encoders', 'json')"/>
-      </el-form-item>
     </el-form>
     <div class="line"/>
-    <el-form ref="teslaAdapter" :model="teslaAdapter" :label-width="labelWidth">
+    <el-form ref="mimeTypes" :model="mimeTypesData" :label-width="labelWidth">
-      <el-form-item label="Tesla adapter">
+      <setting :setting-group="mimeTypes" :data="mimeTypesData"/>
-        <el-input :value="teslaAdapter.value" @input="updateSetting($event, 'adapter', 'value')"/>
-      </el-form-item>
-    </el-form>
-    <div class="line"/>
-    <el-form ref="mimeTypesConfig" :model="mimeTypesConfig" :label-width="labelWidth">
-      <el-form-item label="Mime types">
-        <div v-for="([type, value], index) in mimeTypes" :key="index" class="setting-input">
-          <el-input :value="type" placeholder="type" class="name-input" @input="parseMimeTypes($event, 'type', index)"/> :
-          <el-select :value="value" multiple filterable allow-create class="value-input" @change="parseMimeTypes($event, 'value', index)"/>
-          <el-button icon="el-icon-minus" circle @click="deleteMimeTypes(index)"/>
-        </div>
-        <el-button icon="el-icon-plus" circle @click="addRowToMimeTypes"/>
-      </el-form-item>
       <el-form-item>
         <el-button type="primary" @click="onSubmit">Submit</el-button>
       </el-form-item>
@@ -32,14 +16,14 @@
 <script>
 import i18n from '@/lang'
 import { mapGetters } from 'vuex'
+import Setting from './Setting'
 
 export default {
   name: 'Other',
+  components: { Setting },
   computed: {
     ...mapGetters([
-      'formatEncoders',
+      'settings'
-      'mimeTypesConfig',
-      'teslaAdapter'
     ]),
     isMobile() {
       return this.$store.state.app.device === 'mobile'
@@ -48,26 +32,22 @@ export default {
       return this.isMobile ? '100px' : '240px'
     },
     loading() {
-      return this.$store.state.settings.loading
+      return this.settings.loading
     },
     mimeTypes() {
-      return Object.keys(this.mimeTypesConfig.value).map(key => [key, this.mimeTypesConfig.value[key]])
+      return this.settings.description.find(setting => setting.group === ':mime')
+    },
+    mimeTypesData() {
+      return this.settings.settings.mime[':types']
+    },
+    teslaAdapter() {
+      return this.settings.description.find(setting => setting.group === ':tesla')
+    },
+    teslaAdapterData() {
+      return this.settings.settings.tesla[':adapter']
     }
   },
   methods: {
-    addRowToMimeTypes() {
-      const updatedValue = this.mimeTypes.reduce((acc, el, i) => {
-        return { ...acc, [el[0]]: el[1] }
-      }, {})
-      this.updateSetting({ ...updatedValue, '': [] }, 'types', 'value')
-    },
-    deleteMimeTypes(index) {
-      const filteredValues = this.mimeTypes.filter((el, i) => index !== i)
-      const updatedValue = filteredValues.reduce((acc, el, i) => {
-        return { ...acc, [el[0]]: el[1] }
-      }, {})
-      this.updateSetting(updatedValue, 'types', 'value')
-    },
     async onSubmit() {
       try {
         await this.$store.dispatch('SubmitChanges')
@@ -78,18 +58,6 @@ export default {
         type: 'success',
         message: i18n.t('settings.success')
       })
-    },
-    parseMimeTypes(value, inputType, index) {
-      const updatedValue = this.mimeTypes.reduce((acc, el, i) => {
-        if (index === i) {
-          return inputType === 'type' ? { ...acc, [value]: el[1] } : { ...acc, [el[0]]: value }
-        }
-        return { ...acc, [el[0]]: el[1] }
-      }, {})
-      this.updateSetting(updatedValue, 'types', 'value')
-    },
-    updateSetting(value, tab, input) {
-      this.$store.dispatch('UpdateSettings', { tab, data: { [input]: value }})
     }
   }
 }