Add special input for Sender setting in Welcome setting group

This commit is contained in:
Angelina Filippova 2020-08-02 03:21:39 +03:00
parent c12d3c0451
commit 54c8c2ddeb
3 changed files with 117 additions and 0 deletions

View file

@ -112,6 +112,7 @@
<reg-invites-input v-if="[':registrations_open', ':invites_enabled'].includes(setting.key)" :data="data" :setting-group="settingGroup" :setting="setting"/> <reg-invites-input v-if="[':registrations_open', ':invites_enabled'].includes(setting.key)" :data="data" :setting-group="settingGroup" :setting="setting"/>
<select-input-with-reduced-labels v-if="reducedSelects" :data="data" :setting-group="settingGroup" :setting="setting"/> <select-input-with-reduced-labels v-if="reducedSelects" :data="data" :setting-group="settingGroup" :setting="setting"/>
<specific-multiple-select v-if="setting.key === ':backends' || setting.key === ':args'" :data="data" :setting-group="settingGroup" :setting="setting"/> <specific-multiple-select v-if="setting.key === ':backends' || setting.key === ':args'" :data="data" :setting-group="settingGroup" :setting="setting"/>
<sender-input v-if="senderInput(setting)" :data="data[setting.key]" :setting-group="settingGroup" :setting="setting" :parents="settingParent"/>
<!--------------------> <!-------------------->
<el-tooltip v-if="canBeDeleted && isTablet" :content="$t('settings.removeFromDB')" placement="bottom-end" class="delete-setting-button-container"> <el-tooltip v-if="canBeDeleted && isTablet" :content="$t('settings.removeFromDB')" placement="bottom-end" class="delete-setting-button-container">
<el-button icon="el-icon-delete" circle size="mini" class="delete-setting-button" @click="removeSetting"/> <el-button icon="el-icon-delete" circle size="mini" class="delete-setting-button" @click="removeSetting"/>
@ -138,6 +139,7 @@ import {
RateLimitInput, RateLimitInput,
RegInvitesInput, RegInvitesInput,
SelectInputWithReducedLabels, SelectInputWithReducedLabels,
SenderInput,
SpecificMultipleSelect } from './inputComponents' SpecificMultipleSelect } from './inputComponents'
import { getBooleanValue, processNested } from '@/store/modules/normalizers' import { getBooleanValue, processNested } from '@/store/modules/normalizers'
import _ from 'lodash' import _ from 'lodash'
@ -156,6 +158,7 @@ export default {
RateLimitInput, RateLimitInput,
RegInvitesInput, RegInvitesInput,
SelectInputWithReducedLabels, SelectInputWithReducedLabels,
SenderInput,
SpecificMultipleSelect SpecificMultipleSelect
}, },
props: { props: {
@ -357,6 +360,9 @@ export default {
renderSingleSelect(type) { renderSingleSelect(type) {
return !this.reducedSelects && (type === 'module' || (type.includes('atom') && type.includes('dropdown'))) return !this.reducedSelects && (type === 'module' || (type.includes('atom') && type.includes('dropdown')))
}, },
senderInput({ key, type }) {
return Array.isArray(type) && type.includes('string') && type.includes('tuple') && key === ':sender'
},
update(value, group, key, parents, input, type, nested) { update(value, group, key, parents, input, type, nested) {
const updatedValue = this.renderSingleSelect(type) ? getBooleanValue(value) : value const updatedValue = this.renderSingleSelect(type) ? getBooleanValue(value) : value
nested nested

View file

@ -0,0 +1,98 @@
<template>
<div :data-search="setting.key || setting.group" class="sender-input">
<el-input
:value="sender.email"
placeholder="email address"
class="email-address-input"
@input="updateSender($event, 'email')"/>
<el-input
:value="sender.nickname"
placeholder="nickname"
class="nickname-input"
@input="updateSender($event, 'nickname')"/>
</div>
</template>
<script>
import { processNested } from '@/store/modules/normalizers'
export default {
name: 'SenderInput',
props: {
data: {
type: [Object, Array],
default: function() {
return {}
}
},
parents: {
type: Array,
default: function() {
return []
},
required: false
},
setting: {
type: Object,
default: function() {
return {}
}
},
settingGroup: {
type: Object,
default: function() {
return {}
}
}
},
computed: {
isDesktop() {
return this.$store.state.app.device === 'desktop'
},
settings() {
return this.$store.state.settings.settings
},
updatedSettings() {
return this.$store.state.settings.updatedSettings
},
sender() {
return Object.keys(this.data).length === 0 ? { email: null, nickname: null } : this.data
}
},
methods: {
updateSender(value, inputType) {
let data
if (inputType === 'email') {
data = { ...this.sender, email: value }
} else {
data = { ...this.sender, nickname: value }
}
this.updateSetting(data, this.settingGroup.group, this.settingGroup.key, this.setting.key, this.setting.type)
},
updateSetting(value, group, key, input, type) {
const assembledData = value.nickname
? [value.nickname, value.email]
: value.email
if (this.parents.length > 0) {
const { valueForState,
valueForUpdatedSettings,
setting } = processNested(value, assembledData, group, key, this.parents.reverse(), this.settings, this.updatedSettings)
this.$store.dispatch('UpdateSettings',
{ group, key, input: setting.key, value: valueForUpdatedSettings, type: setting.type })
this.$store.dispatch('UpdateState',
{ group, key, input: setting.key, value: valueForState })
} else {
this.$store.dispatch('UpdateSettings', { group, key, input, value: assembledData, type })
this.$store.dispatch('UpdateState', { group, key, input, value })
}
}
}
}
</script>
<style rel='stylesheet/scss' lang='scss'>
@import '../../styles/main';
@include settings
</style>

View file

@ -46,6 +46,10 @@
.el-tabs__header { .el-tabs__header {
z-index: 2002; z-index: 2002;
} }
.email-address-input {
width: 50%;
margin-right: 10px;
}
.esshd-list { .esshd-list {
margin: 0; margin: 0;
} }
@ -175,6 +179,9 @@
width: 30%; width: 30%;
margin-right: 8px margin-right: 8px
} }
.nickname-input {
width: 50%;
}
.no-top-margin { .no-top-margin {
margin-top: 0; margin-top: 0;
p { p {
@ -254,6 +261,12 @@
margin-left: 8px; margin-left: 8px;
margin-right: 10px margin-right: 10px
} }
.sender-input {
display: flex;
align-items: center;
margin-bottom: 10px;
width: 100%;
}
.scale-input { .scale-input {
width: 47%; width: 47%;
margin: 0 1% 5px 0 margin: 0 1% 5px 0