diff --git a/src/store/modules/normalizers.js b/src/store/modules/normalizers.js
index f2aaa9b541d3ddc538c18f01a241aebbf1e80e52..3822f96f55a807c74e6c3305483fbb2bb272f37e 100644
--- a/src/store/modules/normalizers.js
+++ b/src/store/modules/normalizers.js
@@ -70,6 +70,7 @@ export const valueHasTuples = (key, value) => {
}
export const wrapUpdatedSettings = (group, settings) => {
+ console.log(group, settings)
return Object.keys(settings).map((key) => {
const value = groupWithoutKey(settings[key]) || wrapValues(settings[key])
return { group, key, value }
@@ -78,7 +79,8 @@ export const wrapUpdatedSettings = (group, settings) => {
const wrapValues = settings => {
return Object.keys(settings).map(setting => {
- const [type, value] = settings[setting]
+ console.log(settings[setting])
+ const [type, value] = Array.isArray(settings[setting]) ? settings[setting] : ['', settings[setting]]
if (type === 'keyword' || type.includes('keyword')) {
return { 'tuple': [setting, wrapValues(value)] }
} else if (type === 'atom') {
diff --git a/src/views/settings/components/Inputs.vue b/src/views/settings/components/Inputs.vue
index 8ec62cab654c50e9075e6c327778c5634222b3b7..16425bfcee0acf5aefc4cd7a15428f6f5e221db9 100644
--- a/src/views/settings/components/Inputs.vue
+++ b/src/views/settings/components/Inputs.vue
@@ -148,20 +148,10 @@
class="value-input"
@input="updateSetting($event, settingGroup.group, settingGroup.key, setting.key)"/>
</div>
- <div v-if="settingGroup.group === ':auto_linker'">
- <auto-linker-input :setting-group="settingGroup" :setting="setting" :data="data"/>
- </div>
- <div v-if="setting.key === ':mascots'">
- <div v-for="([name, url, mimeType], index) in mascotsValue" :key="index" class="mascot-container">
- <div class="mascot-name-container">
- <el-input :value="name" placeholder="Name" class="mascot-name-input" @input="parseMascots($event, 'name', index)"/>
- <el-button icon="el-icon-minus" circle @click="deleteMascotsRow(index, 'emoji', 'groups')"/>
- </div>
- <el-input :value="url" placeholder="URL" class="mascot-input" @input="parseMascots($event, 'url', index)"/>
- <el-input :value="mimeType" placeholder="Mime type" class="mascot-input" @input="parseMascots($event, 'mimeType', index)"/>
- </div>
- <el-button icon="el-icon-plus" circle @click="addRowToMascots"/>
- </div>
+ <!-- special inputs -->
+ <auto-linker-input v-if="settingGroup.group === ':auto_linker'" :setting-group="settingGroup" :setting="setting" :data="data"/>
+ <mascots-input v-if="setting.key === ':mascots'" :setting-group="settingGroup" :setting="setting" :data="data"/>
+ <!-------------------->
<div v-if="setting.key === ':icons'">
<div v-for="(icon, index) in iconsValue" :key="index" class="mascot-container">
<div v-for="([key, value], index) in icon" :key="index" class="setting-input">
@@ -187,13 +177,14 @@
import AceEditor from 'vue2-ace-editor'
import 'brace/mode/elixir'
import 'default-passive-events'
-import { AutoLinkerInput } from './inputComponents'
+import { AutoLinkerInput, MascotsInput } from './inputComponents'
export default {
name: 'Inputs',
components: {
editor: AceEditor,
- AutoLinkerInput
+ AutoLinkerInput,
+ MascotsInput
},
props: {
customLabelWidth: {
@@ -265,11 +256,6 @@ export default {
labelWidth() {
return this.isMobile ? '100px' : '240px'
},
- mascotsValue() {
- return Object.keys(this.data)
- .map(mascotName =>
- [mascotName, this.data[mascotName][':url'], this.data[mascotName][':mime_type']])
- },
proxyUrlData() {
if (!this.data[this.setting.key]) {
return null
@@ -319,12 +305,6 @@ export default {
}, {})
this.updateSetting({ ...updatedValue, '': [] }, this.settingGroup.group, this.settingGroup.key, this.setting.key)
},
- addRowToMascots() {
- const updatedValue = this.data[':mascots'].reduce((acc, el, i) => {
- return { ...acc, [el[0]]: { url: el[1], mime_type: el[2] }}
- }, {})
- this.updateSetting({ ...updatedValue, '': { url: '', mime_type: '' }}, this.settingGroup.group, 'assets', 'mascots')
- },
deleteEditableKeywordRow(index) {
const filteredValues = this.editableKeywordData(this.data).filter((el, i) => index !== i)
const updatedValue = filteredValues.reduce((acc, el, i) => {
@@ -334,13 +314,6 @@ export default {
this.updateSetting(updatedValue, this.settingGroup.group, this.settingGroup.key, this.setting.key)
},
deleteIcondRow(index) {},
- deleteMascotsRow(index) {
- const filteredValues = this.data[':mascots'].filter((el, i) => index !== i)
- const updatedValue = filteredValues.reduce((acc, el, i) => {
- return { ...acc, [el[0]]: { url: el[1], mime_type: el[2] }}
- }, {})
- this.updateSetting(updatedValue, this.settingGroup.group, 'assets', 'mascots')
- },
editableKeywordWithInput(key) {
return key === ':replace'
},
@@ -367,21 +340,6 @@ export default {
this.updateSetting(updatedValue, this.settingGroup.group, this.settingGroup.key, this.setting.key)
},
parseIcons(value, inputType, index) {},
- parseMascots(value, inputType, index) {
- const updatedValue = this.data[':mascots'].reduce((acc, el, i) => {
- if (index === i) {
- if (inputType === 'name') {
- return { ...acc, [value]: { url: el[1], mime_type: el[2] }}
- } else if (inputType === 'url') {
- return { ...acc, [el[0]]: { url: value, mime_type: el[2] }}
- } else {
- return { ...acc, [el[0]]: { url: el[1], mime_type: value }}
- }
- }
- return { ...acc, [el[0]]: { url: el[1], mime_type: el[2] }}
- }, {})
- this.updateSetting(updatedValue, this.settingGroup.group, 'assets', 'mascots')
- },
parseRateLimiter(value, input, typeOfInput, typeOfLimit, currentValue) {
if (typeOfLimit === 'oneLimit') {
const valueToSend = typeOfInput === 'scale' ? { 'tuple': [value, currentValue[1]] } : { 'tuple': [currentValue[0], value] }
diff --git a/src/views/settings/components/inputComponents/AutoLinkerInput.vue b/src/views/settings/components/inputComponents/AutoLinkerInput.vue
index 0a305f9b5d98f510281af10ebaece70057384004..97f7adf82096e399a5eb3b14de0da10746c2bcd1 100644
--- a/src/views/settings/components/inputComponents/AutoLinkerInput.vue
+++ b/src/views/settings/components/inputComponents/AutoLinkerInput.vue
@@ -34,7 +34,6 @@ export default {
}
}
},
- computed: {},
methods: {
autoLinkerBooleanValue(key) {
const value = this.data[this.setting.key]
diff --git a/src/views/settings/components/inputComponents/MascotsInput.vue b/src/views/settings/components/inputComponents/MascotsInput.vue
new file mode 100644
index 0000000000000000000000000000000000000000..8bcc73cbc5a37a8c9a5f0a698892e1f7d706a804
--- /dev/null
+++ b/src/views/settings/components/inputComponents/MascotsInput.vue
@@ -0,0 +1,103 @@
+<template>
+ <div>
+ <div v-for="([name, url, mimeType, id], index) in mascotsValue" :key="id" :data-id="id" class="mascot-container">
+ <el-form-item label="Name" label-width="100px">
+ <div class="mascot-name-container">
+ <el-input :value="name" placeholder="Name" class="mascot-name-input" @input="parseMascots($event, 'name', id)"/>
+ <el-button icon="el-icon-minus" circle @click="deleteMascotsRow(id)"/>
+ </div>
+ </el-form-item>
+ <el-form-item label="URL" label-width="100px">
+ <el-input :value="url" :ref="generateRef('url', index)" placeholder="URL" class="mascot-input" @input.native="parseMascots($event, 'url', id, index)"/>
+ </el-form-item>
+ <el-form-item label="Mime type" label-width="100px">
+ <el-input :value="mimeType" placeholder="Mime type" class="mascot-input" @input="parseMascots($event, 'mimeType', id)"/>
+ </el-form-item>
+ </div>
+ <el-button icon="el-icon-plus" circle @click="addRowToMascots"/>
+ </div>
+</template>
+
+<script>
+
+export default {
+ name: 'MascotsInput',
+ props: {
+ data: {
+ type: Object || Array,
+ default: function() {
+ return {}
+ }
+ },
+ setting: {
+ type: Object,
+ default: function() {
+ return {}
+ }
+ },
+ settingGroup: {
+ type: Object,
+ default: function() {
+ return {}
+ }
+ }
+ },
+ computed: {
+ mascotsValue() {
+ return Object.keys(this.data).map(mascotName =>
+ [mascotName, this.data[mascotName][':url'], this.data[mascotName][':mime_type'], this.generateID()]
+ )
+ }
+ },
+ methods: {
+ addRowToMascots() {
+ const updatedValue = { ...this.data, '': { ':url': '', ':mime_type': '' }}
+ this.updateSetting(updatedValue, this.settingGroup.group, this.settingGroup.key, this.setting.key, this.setting.type)
+ },
+ deleteMascotsRow(id) {
+ const filteredValues = this.mascotsValue.filter(mascot => mascot[3] !== id)
+ const updatedValue = filteredValues.reduce((acc, mascot) => {
+ return { ...acc, ...{ [mascot[0]]: { ':url': mascot[1], ':mime_type': mascot[2] }}}
+ }, {})
+ this.updateSetting(updatedValue, this.settingGroup.group, this.settingGroup.key, this.setting.key, this.setting.type)
+ },
+ generateID() {
+ return `f${(~~(Math.random() * 1e8)).toString(16)}`
+ },
+ parseMascots(event, inputType, id, index) {
+ const value = `${event.target.value}${event.data}` // FIXME deletion
+ const updatedValue = this.mascotsValue.map(mascot => {
+ if (mascot[3] === id) {
+ if (inputType === 'name') {
+ mascot[0] = value
+ } else if (inputType === 'url') {
+ mascot[1] = value
+ } else {
+ mascot[2] = value
+ }
+ }
+ return mascot
+ })
+ const parsedMascots = updatedValue.reduce((acc, mascot) => {
+ return { ...acc, ...{ [mascot[0]]: { ':url': mascot[1], ':mime_type': mascot[2] }}}
+ }, {})
+
+ this.updateSetting(parsedMascots, this.settingGroup.group, this.settingGroup.key, this.setting.key, this.setting.type)
+
+ this.$nextTick(() => this.$refs[`${inputType}${index}`][0].focus())
+ },
+ updateSetting(value, group, key, input, type) {
+ this.$store.dispatch('UpdateSettings', { group, key, input, value, type })
+ this.$store.dispatch('UpdateState', { group, key, input, value })
+ },
+ generateRef(field, index) {
+ return `${field}${index}`
+ }
+ }
+}
+</script>
+
+<style rel='stylesheet/scss' lang='scss'>
+@import '../../styles/main';
+@include settings
+</style>
diff --git a/src/views/settings/components/inputComponents/index.js b/src/views/settings/components/inputComponents/index.js
index ff6dfc2be307e983c5d4b1aed0cab9f3ea830521..eb2d7b8364ad5486930bfb92a34dd468df619a8d 100644
--- a/src/views/settings/components/inputComponents/index.js
+++ b/src/views/settings/components/inputComponents/index.js
@@ -1 +1,2 @@
export { default as AutoLinkerInput } from './AutoLinkerInput'
+export { default as MascotsInput } from './MascotsInput'