Create component for backends logger setting

src/views/settings/components/Inputs.vue

@@ -111,6 +111,7 @@
     <icons-input v-if="setting.key === ':icons'" :data="data[':icons']" :setting-group="settingGroup" :setting="setting"/>
     <proxy-url-input v-if="setting.key === ':proxy_url'" :data="data[setting.key]" :setting-group="settingGroup" :setting="setting"/>
     <ssl-options-input v-if="setting.key === ':ssl_options'" :setting-group="settingGroup" :setting-parent="settingParent" :setting="setting" :data="data" :nested="true" :custom-label-width="'100px'"/>
+    <backends-logger-input v-if="setting.key === ':backends'" :data="data" :setting-group="settingGroup" :setting="setting"/>
     <!-------------------->
     <p class="expl">{{ setting.description }}</p>
   </el-form-item>
@@ -120,13 +121,14 @@
 import AceEditor from 'vue2-ace-editor'
 import 'brace/mode/elixir'
 import 'default-passive-events'
-import { AutoLinkerInput, EditableKeywordInput, IconsInput, MascotsInput, ProxyUrlInput, SslOptionsInput } from './inputComponents'
+import { AutoLinkerInput, BackendsLoggerInput, EditableKeywordInput, IconsInput, MascotsInput, ProxyUrlInput, SslOptionsInput } from './inputComponents'
 
 export default {
   name: 'Inputs',
   components: {
     editor: AceEditor,
     AutoLinkerInput,
+    BackendsLoggerInput,
     EditableKeywordInput,
     IconsInput,
     MascotsInput,
@@ -264,7 +266,7 @@ export default {
       this.$store.dispatch('UpdateState', { group, key, input: parentInput, value: updatedValueForState })
     },
     renderMultipleSelect(type) {
-      return Array.isArray(type) && (
+      return Array.isArray(type) && this.setting.key !== ':backends' && (
         type.includes('module') ||
         (type.includes('list') && type.includes('string')) ||
         (type.includes('list') && type.includes('atom')) ||

src/views/settings/components/inputComponents/BackendsLoggerInput.vue

+<template>
+  <el-select
+    :value="data.value"
+    multiple
+    filterable
+    allow-create
+    @change="updateSetting($event, settingGroup.group, settingGroup.key, setting.key, setting.type)">
+    <el-option value=":console" label="console"/>
+    <el-option value=":ex_syslogger" label="ExSyslogger"/>
+    <el-option value="Quack.Logger" label="Quack.Logger"/>
+  </el-select>
+</template>
+
+<script>
+export default {
+  name: 'BackendsLoggerInput',
+  props: {
+    data: {
+      type: Object || Array,
+      default: function() {
+        return {}
+      }
+    },
+    setting: {
+      type: Object,
+      default: function() {
+        return {}
+      }
+    },
+    settingGroup: {
+      type: Object,
+      default: function() {
+        return {}
+      }
+    }
+  },
+  methods: {
+    updateSetting(value, group, key, input, type) {
+      this.$store.dispatch('UpdateSettings', { group, key, input, value, type })
+      this.$store.dispatch('UpdateState', { group, key, input, value })
+    }
+  }
+}
+</script>
+
+<style rel='stylesheet/scss' lang='scss'>
+@import '../../styles/main';
+@include settings
+</style>

src/views/settings/components/inputComponents/index.js

 export { default as AutoLinkerInput } from './AutoLinkerInput'
+export { default as BackendsLoggerInput } from './BackendsLoggerInput'
 export { default as MascotsInput } from './MascotsInput'
 export { default as EditableKeywordInput } from './EditableKeywordInput'
 export { default as IconsInput } from './IconsInput'