forked from AkkomaGang/admin-fe
Fix mascots setting so it accepts array data
This commit is contained in:
parent
cd6ab3718b
commit
401c980e99
|
@ -10,8 +10,10 @@ export const parseTuples = (tuples, key) => {
|
||||||
return tuples.reduce((accum, item) => {
|
return tuples.reduce((accum, item) => {
|
||||||
if (key === 'rate_limit') {
|
if (key === 'rate_limit') {
|
||||||
accum[item.tuple[0]] = item.tuple[1]
|
accum[item.tuple[0]] = item.tuple[1]
|
||||||
} else if (key === ':mascots') {
|
} else if (item.tuple[0] === ':mascots') {
|
||||||
accum[item.tuple[0]] = { ...item.tuple[1], id: `f${(~~(Math.random() * 1e8)).toString(16)}` }
|
accum[item.tuple[0]] = item.tuple[1].reduce((acc, mascot) => {
|
||||||
|
return [...acc, { [mascot.tuple[0]]: { ...mascot.tuple[1], id: `f${(~~(Math.random() * 1e8)).toString(16)}` }}]
|
||||||
|
}, [])
|
||||||
} else if (item.tuple[0] === ':groups') {
|
} else if (item.tuple[0] === ':groups') {
|
||||||
accum[item.tuple[0]] = item.tuple[1].reduce((acc, group) => {
|
accum[item.tuple[0]] = item.tuple[1].reduce((acc, group) => {
|
||||||
return [...acc, { [group.tuple[0]]: { value: group.tuple[1], id: `f${(~~(Math.random() * 1e8)).toString(16)}` }}]
|
return [...acc, { [group.tuple[0]]: { value: group.tuple[1], id: `f${(~~(Math.random() * 1e8)).toString(16)}` }}]
|
||||||
|
|
|
@ -1,17 +1,17 @@
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<div v-for="(mascot, name) in data" :key="mascot.id" class="mascot-container">
|
<div v-for="mascot in data" :key="getId(mascot)" class="mascot-container">
|
||||||
<el-form-item label="Name" label-width="100px">
|
<el-form-item label="Name" label-width="100px">
|
||||||
<div class="mascot-name-container">
|
<div class="mascot-name-container">
|
||||||
<el-input :value="name" placeholder="Name" class="mascot-name-input" @input="parseMascots($event, 'name', mascot.id)"/>
|
<el-input :value="getName(mascot)" placeholder="Name" class="mascot-name-input" @input="parseMascots($event, 'name', mascot)"/>
|
||||||
<el-button icon="el-icon-minus" circle @click="deleteMascotsRow(mascot.id)"/>
|
<el-button icon="el-icon-minus" circle @click="deleteMascotsRow(mascot)"/>
|
||||||
</div>
|
</div>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="URL" label-width="100px">
|
<el-form-item label="URL" label-width="100px">
|
||||||
<el-input :value="mascot[':url']" placeholder="URL" class="mascot-input" @input="parseMascots($event, 'url', mascot.id)"/>
|
<el-input :value="getUrl(mascot)" placeholder="URL" class="mascot-input" @input="parseMascots($event, 'url', mascot)"/>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="Mime type" label-width="100px">
|
<el-form-item label="Mime type" label-width="100px">
|
||||||
<el-input :value="mascot[':mime_type']" placeholder="Mime type" class="mascot-input" @input="parseMascots($event, 'mimeType', mascot.id)"/>
|
<el-input :value="getMimeType(mascot)" placeholder="Mime type" class="mascot-input" @input="parseMascots($event, 'mimeType', mascot)"/>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</div>
|
</div>
|
||||||
<el-button icon="el-icon-plus" circle @click="addRowToMascots"/>
|
<el-button icon="el-icon-plus" circle @click="addRowToMascots"/>
|
||||||
|
@ -24,7 +24,7 @@ export default {
|
||||||
name: 'MascotsInput',
|
name: 'MascotsInput',
|
||||||
props: {
|
props: {
|
||||||
data: {
|
data: {
|
||||||
type: Object || Array,
|
type: [Object, Array],
|
||||||
default: function() {
|
default: function() {
|
||||||
return {}
|
return {}
|
||||||
}
|
}
|
||||||
|
@ -44,38 +44,52 @@ export default {
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
addRowToMascots() {
|
addRowToMascots() {
|
||||||
const updatedValue = { ...this.data, '': { ':url': '', ':mime_type': '', id: this.generateID() }}
|
const updatedValue = [...this.data, { '': { ':url': '', ':mime_type': '', id: this.generateID() }}]
|
||||||
this.updateSetting(updatedValue, this.settingGroup.group, this.settingGroup.key, this.setting.key, this.setting.type)
|
this.updateSetting(updatedValue, this.settingGroup.group, this.settingGroup.key, this.setting.key, this.setting.type)
|
||||||
},
|
},
|
||||||
deleteMascotsRow(id) {
|
deleteMascotsRow(mascot) {
|
||||||
const filteredValues = Object.keys(this.data).reduce((acc, mascot) => {
|
const deletedId = this.getId(mascot)
|
||||||
return this.data[mascot].id !== id
|
const filteredValues = this.data.filter(mascot => Object.values(mascot)[0].id !== deletedId)
|
||||||
? { ...acc, ...{ [mascot]: this.data[mascot] }}
|
|
||||||
: acc
|
|
||||||
}, {})
|
|
||||||
this.updateSetting(filteredValues, this.settingGroup.group, this.settingGroup.key, this.setting.key, this.setting.type)
|
this.updateSetting(filteredValues, this.settingGroup.group, this.settingGroup.key, this.setting.key, this.setting.type)
|
||||||
},
|
},
|
||||||
generateID() {
|
generateID() {
|
||||||
return `f${(~~(Math.random() * 1e8)).toString(16)}`
|
return `f${(~~(Math.random() * 1e8)).toString(16)}`
|
||||||
},
|
},
|
||||||
parseMascots(value, inputType, id, index) {
|
getId(mascot) {
|
||||||
const updatedValue = Object.keys(this.data).reduce((acc, mascot) => {
|
const { id } = Object.values(mascot)[0]
|
||||||
if (this.data[mascot].id === id) {
|
return id
|
||||||
|
},
|
||||||
|
getName(mascot) {
|
||||||
|
return Object.keys(mascot)[0]
|
||||||
|
},
|
||||||
|
getUrl(mascot) {
|
||||||
|
const [value] = Object.values(mascot)
|
||||||
|
return value[':url']
|
||||||
|
},
|
||||||
|
getMimeType(mascot) {
|
||||||
|
const [value] = Object.values(mascot)
|
||||||
|
return value[':mime_type']
|
||||||
|
},
|
||||||
|
parseMascots(value, inputType, mascot) {
|
||||||
|
const updatedId = this.getId(mascot)
|
||||||
|
const updatedValue = this.data.map((mascot, index) => {
|
||||||
|
if (Object.values(mascot)[0].id === updatedId) {
|
||||||
if (inputType === 'name') {
|
if (inputType === 'name') {
|
||||||
return { ...acc, ...{ [value]: this.data[mascot] }}
|
return { [value]: Object.values(this.data[index])[0] }
|
||||||
} else if (inputType === 'url') {
|
} else if (inputType === 'url') {
|
||||||
return { ...acc, ...{ [mascot]: { ...this.data[mascot], ':url': value }}}
|
return { [Object.keys(mascot)[0]]: { ...Object.values(this.data[index])[0], ':url': value }}
|
||||||
} else {
|
} else {
|
||||||
return { ...acc, ...{ [mascot]: { ...this.data[mascot], ':mime_type': value }}}
|
return { [Object.keys(mascot)[0]]: { ...Object.values(this.data[index])[0], ':mime_type': value }}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
return { ...acc, ...{ [mascot]: this.data[mascot] }}
|
return mascot
|
||||||
}, {})
|
})
|
||||||
this.updateSetting(updatedValue, this.settingGroup.group, this.settingGroup.key, this.setting.key, this.setting.type)
|
this.updateSetting(updatedValue, this.settingGroup.group, this.settingGroup.key, this.setting.key, this.setting.type)
|
||||||
},
|
},
|
||||||
updateSetting(value, group, key, input, type) {
|
updateSetting(value, group, key, input, type) {
|
||||||
const mascotsWithoutIDs = Object.keys(value).reduce((acc, name) => {
|
const mascotsWithoutIDs = value.reduce((acc, mascot) => {
|
||||||
return { ...acc, ...{ [name]: { ':url': value[name][':url'], ':mime_type': value[name][':mime_type'] }}}
|
const { id, ...mascotValue } = Object.values(mascot)[0]
|
||||||
|
return { ...acc, [Object.keys(mascot)[0]]: mascotValue }
|
||||||
}, {})
|
}, {})
|
||||||
this.$store.dispatch('UpdateSettings', { group, key, input, value: mascotsWithoutIDs, type })
|
this.$store.dispatch('UpdateSettings', { group, key, input, value: mascotsWithoutIDs, type })
|
||||||
this.$store.dispatch('UpdateState', { group, key, input, value })
|
this.$store.dispatch('UpdateState', { group, key, input, value })
|
||||||
|
|
Loading…
Reference in a new issue