Page MenuHomePhorge

No OneTemporary

Authored By
Unknown
Size
9 KB
Referenced Files
None
Subscribers
None
diff --git a/src/components/admin_dashboard/tabs/config_entry.js b/src/components/admin_dashboard/tabs/config_entry.js
index 75251e8329..59c098d016 100644
--- a/src/components/admin_dashboard/tabs/config_entry.js
+++ b/src/components/admin_dashboard/tabs/config_entry.js
@@ -1,36 +1,49 @@
+import { isEqual } from 'lodash'
import TypedInput from './typed_input.vue'
const BASIC_TYPES = ['boolean', 'string', 'integer']
const ConfigEntry = {
props: {
configs: {},
descriptions: Object,
path: Array
},
components: {
TypedInput
},
computed: {
type () {
- return (
- Array.isArray(this.descriptions.type) &&
- this.descriptions.type.find(k => Array.isArray(k))
- ) || this.descriptions.type
+ if (isEqual(this.descriptions.type, ['string', 'tuple'])) {
+ return 'tuple'
+ }
+
+ if (Array.isArray(this.descriptions.type)) {
+ if (this.descriptions.type[0] === 'keyword') {
+ return this.descriptions.type
+ } else {
+ const maybeBestType = this.descriptions.type.find(k => Array.isArray(k))
+ if (maybeBestType) {
+ return maybeBestType
+ }
+ }
+ }
+
+ return this.descriptions.type
},
isBasicType () {
return BASIC_TYPES.includes(this.type)
},
suggestions () {
return this.descriptions.suggestions
}
},
methods: {
setConfigs (newVal) {
console.log('changing to', newVal)
this.$store.dispatch('updateAdminConfig', { path: this.path, newVal })
}
}
}
export default ConfigEntry
diff --git a/src/components/admin_dashboard/tabs/typed_input.js b/src/components/admin_dashboard/tabs/typed_input.js
index fc1acecd47..e4650091ac 100644
--- a/src/components/admin_dashboard/tabs/typed_input.js
+++ b/src/components/admin_dashboard/tabs/typed_input.js
@@ -1,122 +1,128 @@
import { isEqual } from 'lodash'
import Checkbox from 'src/components/checkbox/checkbox.vue'
import Select from 'src/components/select/select.vue'
const STRINGISH_TYPES = ['string', 'atom', 'module']
const NUMERIC_TYPES = ['float', 'integer']
const TypedInput = {
name: 'TypedInput',
props: [
'modelValue',
'type',
'suggestions',
'specialSubtype'
],
emits: ['update:modelValue'],
components: {
Checkbox,
Select
},
data () {
return {
mapData: []
}
},
computed: {
isDropdown () {
return Array.isArray(this.type) && this.type[0] === 'dropdown'
},
isStringish () {
- return STRINGISH_TYPES.includes(this.type)
+ return STRINGISH_TYPES.includes(this.type) || (Array.isArray(this.type) && this.type.every(k => STRINGISH_TYPES.includes(k)))
},
isNumeric () {
return NUMERIC_TYPES.includes(this.type)
},
isList () {
return Array.isArray(this.type) && (this.type[0] === 'list' || this.type[0] === 'keyword')
},
isKeyword () {
return this.isList && this.type[0] === 'keyword'
},
isMap () {
return this.type === 'map' || (Array.isArray(this.type) && this.type[0] === 'map')
},
+ isImage () {
+ return isEqual(this.type, ['string', 'image'])
+ },
+ isTuple () {
+ return this.type === 'tuple'
+ },
isMaybeType () {
return Array.isArray(this.type) && this.type[1] === 'boolean'
},
subtype () {
return this.specialSubtype || (
Array.isArray(this.type)
? (this.isMaybeType ? this.type[0] : this.type[1])
: 'string'
)
},
listifiedModel () {
return this.modelValue || []
},
mapifiedModel () {
return this.modelValue || {}
},
tupleList () {
- return this.modelValue.tuple || ['', '']
+ return (this.modelValue || {}).tuple || ['', '']
}
},
watch: {
modelValue (newVal, oldVal) {
if (!this.isMap) {
return
}
if (!isEqual(newVal, oldVal)) {
this.mapData = this.getMapData(newVal || {})
}
}
},
mounted () {
if (this.isMap) {
this.mapData = this.getMapData(this.modelValue || {})
}
},
methods: {
defaultSubvalue () {
if (this.subtype === 'tuple') {
return { tuple: ['', ''] }
} else if (this.subtype === 'map') {
return {}
} else {
return ''
}
},
listRemove (list, index) {
const newVal = [...list]
newVal.splice(index, 1)
return newVal
},
listSet (list, index, value) {
const newVal = [...list]
newVal[index] = value
return newVal
},
listAdd (list) {
const newVal = [...list, this.defaultSubvalue()]
return newVal
},
getMapData (value) {
console.log('value:', value)
const res = Object.keys(value)
.map(k => ({ tuple: [k, value[k]] }))
console.log(res)
return res
},
dataToMap (data) {
return data.reduce((acc, cur) => {
cur ||= { tuple: ['', ''] }
acc[cur.tuple[0]] = cur.tuple[1]
return acc
}, {})
}
}
}
export default TypedInput
diff --git a/src/components/admin_dashboard/tabs/typed_input.vue b/src/components/admin_dashboard/tabs/typed_input.vue
index bc0759e8df..3d041de7ff 100644
--- a/src/components/admin_dashboard/tabs/typed_input.vue
+++ b/src/components/admin_dashboard/tabs/typed_input.vue
@@ -1,147 +1,147 @@
<template>
<div
class="typed-input"
>
<div
v-if="isMaybeType"
>
<Checkbox
:model-value="modelValue"
@update:modelValue="k => $emit('update:modelValue', k && defaultSubvalue())"
/>
<typed-input
v-if="modelValue !== false"
:type="subtype"
:model-value="modelValue"
@update:modelValue="k => $emit('update:modelValue', k)"
/>
</div>
<Select
v-else-if="isDropdown"
:model-value="modelValue"
@update:modelValue="k => $emit('update:modelValue', k)"
>
<option
v-for="option in suggestions"
:key="option"
:value="option"
>
{{ option }}
</option>
</Select>
<input
v-else-if="isNumeric"
type="number"
:value="modelValue"
@change="$emit('update:modelValue', $event.target.value)"
>
<input
- v-else-if="isStringish"
+ v-else-if="isStringish || isImage"
type="string"
:value="modelValue"
@change="$emit('update:modelValue', $event.target.value)"
>
<Checkbox
v-else-if="type === 'boolean'"
:model-value="modelValue"
@update:modelValue="k => $emit('update:modelValue', k)"
/>
<div
- v-else-if="type === 'tuple'"
+ v-else-if="isTuple"
>
<input
type="string"
:value="tupleList[0]"
@change="$emit('update:modelValue', { tuple: listSet(tupleList, 0, $event.target.value) })"
>
{{ /* This is the Elixir pair constructing operator. */ '=>' }}
<typed-input
:type="subtype"
:model-value="tupleList[1]"
@update:modelValue="k => $emit('update:modelValue', { tuple: listSet(tupleList, 1, k) })"
/>
</div>
<ol
v-else-if="isList"
>
<li
v-for="(item, index) in listifiedModel"
:key="index"
>
<div
class="list-input-item"
>
<typed-input
:model-value="item"
:type="isKeyword ? 'tuple' : subtype"
:special-subtype="isKeyword ? subtype : ''"
:suggestions="suggestions"
@update:modelValue="k => $emit('update:modelValue', listSet(listifiedModel, index, k))"
/>
<button
class="button-default btn"
@click="() => $emit('update:modelValue', listRemove(listifiedModel, index))"
>
{{ $t('admin_dashboard.config.remove_item') }}
</button>
</div>
</li>
<li>
<button
class="button-default btn"
@click="() => $emit('update:modelValue', listAdd(listifiedModel))"
>
{{ $t('admin_dashboard.config.add_item') }}
</button>
</li>
</ol>
<ul
v-else-if="isMap"
>
<li
v-for="(item, index) in mapData"
:key="index"
>
<div
class="list-input-item"
>
<typed-input
type="tuple"
:model-value="item"
:suggestions="suggestions"
@update:modelValue="k => $emit('update:modelValue', dataToMap(listSet(mapData, index, k)))"
/>
<button
class="button-default btn"
@click="() => $emit('update:modelValue', dataToMap(listRemove(mapData, index)))"
>
{{ $t('admin_dashboard.config.remove_item') }}
</button>
</div>
</li>
<li>
<button
class="button-default btn"
@click="() => $emit('update:modelValue', dataToMap(listAdd(mapData)))"
>
{{ $t('admin_dashboard.config.add_item') }}
</button>
</li>
</ul>
<p v-else>
Type: {{ type }}
Value: {{ modelValue }}
</p>
</div>
</template>
<script src="./typed_input.js"></script>
<style lang="scss">
.typed-input {
.list-input-item {
display: flex;
flex-direction: row;
}
}
</style>

File Metadata

Mime Type
text/x-diff
Expires
Thu, Oct 29, 2:32 PM (1 d, 6 h)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
1798201
Default Alt Text
(9 KB)

Event Timeline