hj/pleroma-fe
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

merge multicheckbox and list inputs

Browse source
This commit is contained in:
Henry Jameson 2025-12-02 20:44:14 +02:00
commit b7a97b8603
8 changed files with 138 additions and 162 deletions
Download patch file Download diff file Expand all files Collapse all files

22
src/components/settings_modal/admin_tabs/instance_tab.js
View file

@ -4,17 +4,10 @@ import IntegerSetting from '../helpers/integer_setting.vue'
import StringSetting from '../helpers/string_setting.vue'
import GroupSetting from '../helpers/group_setting.vue'
import AttachmentSetting from '../helpers/attachment_setting.vue'
import MultiCheckboxSetting from '../helpers/multicheckbox_setting.vue'
import ListSetting from '../helpers/list_setting.vue'
import SharedComputedObject from '../helpers/shared_computed_object.js'
import { library } from '@fortawesome/fontawesome-svg-core'
import {
faGlobe
} from '@fortawesome/free-solid-svg-icons'
library.add(
faGlobe
)
import { get } from 'lodash'
const InstanceTab = {
provide () {
@ -29,11 +22,18 @@ const InstanceTab = {
IntegerSetting,
StringSetting,
AttachmentSetting,
MultiCheckboxSetting,
ListSetting,
GroupSetting
},
computed: {
...SharedComputedObject()
...SharedComputedObject(),
providersOptions () {
const desc = get(this.$store.state.adminSettings.descriptions, [':pleroma', 'Pleroma.Web.Metadata', ':providers'])
return new Set(desc.suggestions.map(option => ({
label: option.replace('Pleroma.Web.Metadata.Providers.', ''),
value: option
})))
},
}
}

3
src/components/settings_modal/admin_tabs/instance_tab.vue
View file

@ -134,7 +134,8 @@
<h3>{{ $t('admin_dash.instance.rich_metadata') }}</h3>
<ul class="setting-list">
<li>
<MultiCheckboxSetting
<ListSetting
:override-available-options="providersOptions"
:path="[':pleroma','Pleroma.Web.Metadata', ':providers']"
/>
</li>

6
src/components/settings_modal/admin_tabs/links_tab.js
View file

@ -5,7 +5,6 @@ import StringSetting from '../helpers/string_setting.vue'
import GroupSetting from '../helpers/group_setting.vue'
import AttachmentSetting from '../helpers/attachment_setting.vue'
import ListSetting from '../helpers/list_setting.vue'
import MultiCheckboxSetting from '../helpers/multicheckbox_setting.vue'
import SharedComputedObject from '../helpers/shared_computed_object.js'
import { get } from 'lodash'
@ -24,13 +23,12 @@ const MediaProxyTab = {
StringSetting,
AttachmentSetting,
GroupSetting,
ListSetting,
MultiCheckboxSetting
ListSetting
},
computed: {
ttlSettersOptions () {
const desc = get(this.$store.state.adminSettings.descriptions, ':pleroma.:rich_media.:ttl_setters')
return new Set([...desc.suggestions, 'Pleroma.Web.RichMedia.Parser.TTL.Opengraph'].map(option => ({
return new Set(desc.suggestions.map(option => ({
label: option.replace('Pleroma.Web.RichMedia.Parser.TTL.', ''),
value: option
})))

9
src/components/settings_modal/admin_tabs/links_tab.vue
View file

@ -7,7 +7,7 @@
<BooleanSetting path=":pleroma.:rich_media.:enabled" />
</li>
<li>
<MultiCheckboxSetting
<ListSetting
:override-available-options="parsersOptions"
path=":pleroma.:rich_media.:parsers"
/>
@ -18,13 +18,16 @@
/>
</li>
<li>
<MultiCheckboxSetting
<ListSetting
:override-available-options="ttlSettersOptions"
path=":pleroma.:rich_media.:ttl_setters"
/>
</li>
<li>
<ListSetting path=":pleroma.:rich_media.:ignore_tld" />
<ListSetting
path=":pleroma.:rich_media.:ignore_tld"
ignore-suggestions
/>
</li>
<li>
<ListSetting path=":pleroma.:rich_media.:ignore_hosts" />

81
src/components/settings_modal/helpers/list_setting.js
View file

@ -1,36 +1,94 @@
import Checkbox from 'src/components/checkbox/checkbox.vue'
import Setting from './setting.js'
export default {
...Setting,
data () {
return {
newValue: ''
newValue: '',
}
},
components: {
...Setting.components
...Setting.components,
Checkbox
},
props: {
...Setting.props
...Setting.props,
ignoreSuggestions: {
required: false,
type: Boolean
},
overrideAvailableOptions: {
required: false,
type: Set
},
allowNew: {
required: false,
type: Set,
default: true
}
},
computed: {
...Setting.computed
...Setting.computed,
valueSet () {
return new Set(this.visibleState)
},
suggestions () {
const suggestions = this.backendDescription?.suggestions
if (suggestions) {
return new Set(this.backendDescription.suggestions)
} else {
return new Set()
}
},
extraEntries () {
if (this.ignoreSuggestions) return [...this.valueSet.values()]
return [...this.valueSet.values()].filter((x) => {
return !this.suggestions.has(x)
})
},
builtinEntries () {
if (this.ignoreSuggestions) return []
if (this.overrideAvailableOptions) {
return [...this.overrideAvailableOptions]
}
const builtins = [...this.valueSet.values()].filter((x) => {
return this.suggestions.has(x)
})
return builtins.map((option) => ({
label: option,
value: option
}))
}
},
methods: {
...Setting.methods,
addNew () {
this.update({ newValue: this.newValue })
optionPresent (option) {
return this.valueSet.has(option)
},
getValue ({ event, index, newValue, remove }) {
if (newValue) {
getValue ({ event, index, eventType }) {
switch (eventType) {
case 'toggle': {
this.newValue = ''
return [...this.visibleState, newValue]
} else if (remove) {
return [...this.visibleState, event]
}
case 'add': {
const res = [...this.visibleState, this.newValue]
this.newValue = ''
return res
}
case 'remove': {
const pre = this.visibleState.slice(0, index)
const post = this.visibleState.slice(index + 1)
return [...pre, ...post]
} else {
}
case 'edit': {
const pre = this.visibleState.slice(0, index)
const post = this.visibleState.slice(index + 1)
const string = event?.target?.value
@ -39,4 +97,5 @@ export default {
}
}
}
}
}

26
src/components/settings_modal/helpers/list_setting.vue
View file

@ -23,24 +23,33 @@
{{ backendDescriptionDescription + ' ' }}
</p>
<ul class="setting-list">
<li
class="btn-group"
v-for="(item, index) in visibleState"
<li v-for="item in builtinEntries">
<Checkbox
:disabled="shouldBeDisabled"
:model-value="optionPresent(item.value)"
@update:model-value="e => update({ event, eventType: 'toggle' })"
>
{{ item.label }}
</Checkbox>
</li>
<li v-for="(item, index) in extraEntries">
<div class="btn-group">
<input
class="input string-input"
:class="{ disabled: shouldBeDisabled }"
:value="item"
@change="e => update({event: e, index })"
@change="e => update({ event: e, index, eventType: 'edit' })"
>
<button
class="button-default"
@click="e => update({ remove: true, index })"
@click="e => update({ index, eventType: 'remove' })"
>
<FAIcon icon="times" />
</button>
</div>
</li>
<li class="btn-group">
<li v-if="allowNew">
<div class="btn-group">
<input
class="input string-input"
:class="{ disabled: shouldBeDisabled }"
@ -49,10 +58,11 @@
>
<button
class="button-default"
@click="addNew"
@click="e => update({ eventType: 'add' })"
>
<FAIcon icon="plus" />
</button>
</div>
</li>
</ul>
<ModifiedIndicator
@ -66,7 +76,7 @@
<style lang="scss">
.ListSetting {
li.btn-group {
.btn-group {
display: flex
}
}

47
src/components/settings_modal/helpers/multicheckbox_setting.js
View file

@ -1,47 +0,0 @@
import Checkbox from 'src/components/checkbox/checkbox.vue'
import Setting from './setting.js'
export default {
...Setting,
props: {
...Setting.props,
overrideAvailableOptions: {
required: false,
type: Set
}
},
components: {
...Setting.components,
Checkbox
},
computed: {
...Setting.computed,
availableOptions () {
if (this.overrideAvailableOptions) {
return new Set(this.overrideAvailableOptions)
}
return new Set(this.backendDescription?.suggestions.map((option) => ({
label: option,
value: option
})))
},
valueSet () {
return new Set(this.visibleState)
}
},
methods: {
...Setting.methods,
optionPresent (option) {
return this.valueSet.has(option)
},
getValue ({ event, option }) {
const set = new Set(this.visibleState)
if (event) {
set.add(option)
} else {
set.delete(option)
}
return [...set]
}
}
}

48
src/components/settings_modal/helpers/multicheckbox_setting.vue
View file

@ -1,48 +0,0 @@
<template>
<label
v-if="matchesExpertLevel"
class="MultiCheckboxSetting"
>
<h5
:for="path"
class="setting-label"
:class="{ 'faint': shouldBeDisabled }"
>
<template v-if="backendDescriptionLabel">
{{ backendDescriptionLabel + ' ' }}
</template>
<template v-else-if="source === 'admin'">
MISSING LABEL FOR {{ path }}
</template>
<slot v-else />
</h5>
<p
v-if="backendDescriptionDescription"
class="setting-description"
:class="{ 'faint': shouldBeDisabled }"
>
{{ backendDescriptionDescription + ' ' }}
</p>
<ul class="setting-list">
<li v-for="option in availableOptions">
<Checkbox
:model-value="optionPresent(option.value)"
:disabled="shouldBeDisabled"
@update:model-value="e => update({event: e, option: option.value})"
>
{{ option.label }}
</Checkbox>
</li>
</ul>
<div>
<ModifiedIndicator
:changed="isChanged"
:onclick="reset"
/>
<ProfileSettingIndicator :is-profile="isProfileSetting" />
<DraftButtons />
</div>
</label>
</template>
<script src="./multicheckbox_setting.js"></script>