Skip to content
Snippets Groups Projects
Commit 7dc74ef7 authored by Angelina Filippova's avatar Angelina Filippova
Browse files

Extract mascots input into separate component

parent 59e98023
No related branches found
No related tags found
1 merge request!65Update server configuration
Hide whitespace changes
Inline Side-by-side
src/store/modules/normalizers.js
+ 3
− 1
View file @ 7dc74ef7
......@@ -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') {
......
src/views/settings/components/Inputs.vue
+ 7
− 49
View file @ 7dc74ef7
......@@ -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] }
......
src/views/settings/components/inputComponents/AutoLinkerInput.vue
+ 0
− 1
View file @ 7dc74ef7
......@@ -34,7 +34,6 @@ export default {
}
}
},
computed: {},
methods: {
autoLinkerBooleanValue(key) {
const value = this.data[this.setting.key]
......
src/views/settings/components/inputComponents/MascotsInput.vue 0 → 100644
+ 103
− 0
View file @ 7dc74ef7
<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>
src/views/settings/components/inputComponents/index.js
+ 1
− 0
View file @ 7dc74ef7
export { default as AutoLinkerInput } from './AutoLinkerInput'
export { default as MascotsInput } from './MascotsInput'
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment