diff --git a/src/components/settings_modal/admin_tabs/auth_tab.js b/src/components/settings_modal/admin_tabs/auth_tab.js index 0e0c082e8..a078291e6 100644 --- a/src/components/settings_modal/admin_tabs/auth_tab.js +++ b/src/components/settings_modal/admin_tabs/auth_tab.js @@ -6,7 +6,7 @@ import TupleSetting from '../helpers/tuple_setting.vue' import GroupSetting from '../helpers/group_setting.vue' import AttachmentSetting from '../helpers/attachment_setting.vue' import ListSetting from '../helpers/list_setting.vue' -import ListTupleSetting from '../helpers/list_tuple_setting.vue' +import MapSetting from '../helpers/map_setting.vue' import SharedComputedObject from '../helpers/shared_computed_object.js' @@ -26,7 +26,7 @@ const AuthTab = { AttachmentSetting, GroupSetting, ListSetting, - ListTupleSetting + MapSetting }, computed: { ...SharedComputedObject(), diff --git a/src/components/settings_modal/admin_tabs/auth_tab.vue b/src/components/settings_modal/admin_tabs/auth_tab.vue index e953afaa6..99922ff3b 100644 --- a/src/components/settings_modal/admin_tabs/auth_tab.vue +++ b/src/components/settings_modal/admin_tabs/auth_tab.vue @@ -67,13 +67,21 @@
  • - + +
  • - + +
  • diff --git a/src/components/settings_modal/helpers/map_setting.js b/src/components/settings_modal/helpers/map_setting.js new file mode 100644 index 000000000..ad93ceacf --- /dev/null +++ b/src/components/settings_modal/helpers/map_setting.js @@ -0,0 +1,70 @@ +import Setting from './setting.js' + +export default { + ...Setting, + props: { + ...Setting.props, + allowNew: { + required: false, + type: Boolean, + default: true + } + }, + data () { + return { + newValue: ['',''] // avoiding extra complexity by just using an array instead of an object + } + }, + computed: { + ...Setting.computed, + // state that we'll show in the UI, i.e. transforming map into list + displayState () { + return Object.entries(this.visibleState) + } + }, + methods: { + ...Setting.methods, + getValue ({ event, key, eventType, isKey }) { + switch (eventType) { + case 'add': { + if (key === '') return this.visibleState + const res = {...this.visibleState, ...Object.fromEntries([this.newValue])} + this.newValue = ['', ''] + return res + } + + case 'remove': { + // initial state for this type is empty array + if (Array.isArray(this.visibleState)) return this.visibleState + const newEntries = Object.entries(this.visibleState).filter(([k]) => k !== key) + + if (newEntries.length === 0 ) return [] + return Object.fromEntries(newEntries) + } + + case 'edit': { + const string = event.target.value + const newEntries = Object + .entries(this.visibleState) + .map(([k, v]) => { + if (isKey) { + if (k === key) { + return [string, v] + } else { + return [k, v] + } + } else { + if (k === key) { + return [k, string] + } else { + return [k, v] + } + } + }) + + return Object.fromEntries(newEntries) + } + } + } + } +} diff --git a/src/components/settings_modal/helpers/map_setting.vue b/src/components/settings_modal/helpers/map_setting.vue new file mode 100644 index 000000000..01b6cbc0f --- /dev/null +++ b/src/components/settings_modal/helpers/map_setting.vue @@ -0,0 +1,109 @@ + + + +