better layout & button to remove all expired filters
This commit is contained in:
Henry Jameson
parent
bfd271a69f
commit
8b298c800f
4 changed files with 223 additions and 179 deletions
|
|
@ -95,6 +95,12 @@ const FilteringTab = {
|
||||||
),
|
),
|
||||||
muteFiltersDraft () {
|
muteFiltersDraft () {
|
||||||
return Object.entries(this.muteFiltersDraftObject)
|
return Object.entries(this.muteFiltersDraftObject)
|
||||||
|
},
|
||||||
|
muteFiltersExpired () {
|
||||||
|
const now = Date.now()
|
||||||
|
return Object
|
||||||
|
.entries(this.muteFiltersDraftObject)
|
||||||
|
.filter(([, { expires }]) => expires != null && expires <= now)
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
|
@ -164,6 +170,14 @@ const FilteringTab = {
|
||||||
this.unsetPreference({ path: 'simple.muteFilters.' + id , value: null })
|
this.unsetPreference({ path: 'simple.muteFilters.' + id , value: null })
|
||||||
this.pushServerSideStorage()
|
this.pushServerSideStorage()
|
||||||
},
|
},
|
||||||
|
purgeExpiredFilters () {
|
||||||
|
this.muteFiltersExpired.forEach(([id]) => {
|
||||||
|
console.log(id)
|
||||||
|
delete this.muteFiltersDraftObject[id]
|
||||||
|
this.unsetPreference({ path: 'simple.muteFilters.' + id , value: null })
|
||||||
|
})
|
||||||
|
this.pushServerSideStorage()
|
||||||
|
},
|
||||||
updateFilter(id, field, value) {
|
updateFilter(id, field, value) {
|
||||||
const filter = { ...this.muteFiltersDraftObject[id] }
|
const filter = { ...this.muteFiltersDraftObject[id] }
|
||||||
if (field === 'expires-never') {
|
if (field === 'expires-never') {
|
||||||
|
|
|
||||||
|
|
@ -63,8 +63,18 @@
|
||||||
justify-content: end;
|
justify-content: end;
|
||||||
}
|
}
|
||||||
|
|
||||||
.total {
|
.muteFiltersActions,
|
||||||
text-align: center;
|
.muteFiltersActionsBottom {
|
||||||
|
display: grid;
|
||||||
|
align-items: baseline;
|
||||||
|
grid-auto-flow: column;
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
grid-gap: 0.5em;
|
||||||
|
margin: 0.5em 0;
|
||||||
|
|
||||||
|
.total {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -119,182 +119,11 @@
|
||||||
{{ $t('settings.mute_sensitive_posts') }}
|
{{ $t('settings.mute_sensitive_posts') }}
|
||||||
</BooleanSetting>
|
</BooleanSetting>
|
||||||
</li>
|
</li>
|
||||||
<div class="muteFilterContainer">
|
<li>
|
||||||
<div
|
<h3>{{ $t('settings.filter.custom_filters') }}</h3>
|
||||||
v-for="filter in muteFiltersDraft"
|
<p class="muteFiltersActions">
|
||||||
:key="filter[0]"
|
|
||||||
class="mute-filter"
|
|
||||||
:style="{ order: filter[1].order }"
|
|
||||||
>
|
|
||||||
<div class="filter-name">
|
|
||||||
<label
|
|
||||||
:for="'filterName' + filter[0]"
|
|
||||||
>
|
|
||||||
{{ $t('settings.filter.name') }}
|
|
||||||
</label>
|
|
||||||
{{ ' ' }}
|
|
||||||
<input
|
|
||||||
:id="'filterName' + filter[0]"
|
|
||||||
class="input"
|
|
||||||
:value="filter[1].name"
|
|
||||||
@input="updateFilter(filter[0], 'name', $event.target.value)"
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
<div class="filter-enabled">
|
|
||||||
<Checkbox
|
|
||||||
:id="'filterHide' + filter[0]"
|
|
||||||
:model-value="filter[1].hide"
|
|
||||||
:name="'filterHide' + filter[0]"
|
|
||||||
@update:model-value="updateFilter(filter[0], 'hide', $event)"
|
|
||||||
>
|
|
||||||
{{ $t('settings.filter.hide') }}
|
|
||||||
</Checkbox>
|
|
||||||
{{ ' ' }}
|
|
||||||
<Checkbox
|
|
||||||
:id="'filterEnabled' + filter[0]"
|
|
||||||
:model-value="filter[1].enabled"
|
|
||||||
:name="'filterEnabled' + filter[0]"
|
|
||||||
@update:model-value="updateFilter(filter[0], 'enabled', $event)"
|
|
||||||
>
|
|
||||||
{{ $t('settings.enabled') }}
|
|
||||||
</Checkbox>
|
|
||||||
</div>
|
|
||||||
<div class="filter-type filter-field">
|
|
||||||
<label :for="'filterType' + filter[0]">
|
|
||||||
<HelpIndicator>
|
|
||||||
<p>
|
|
||||||
{{ $t('settings.filter.help.word') }}
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
{{ $t('settings.filter.help.user') }}
|
|
||||||
</p>
|
|
||||||
<i18n-t
|
|
||||||
keypath="settings.filter.help.regexp"
|
|
||||||
tag="p"
|
|
||||||
>
|
|
||||||
<template #link>
|
|
||||||
<a
|
|
||||||
:href="$t('settings.filter.help.regexp_url')"
|
|
||||||
target="_blank"
|
|
||||||
>
|
|
||||||
{{ $t('settings.filter.help.regexp_link') }}
|
|
||||||
</a>
|
|
||||||
</template>
|
|
||||||
</i18n-t>
|
|
||||||
</HelpIndicator>
|
|
||||||
{{ $t('settings.filter.type') }}
|
|
||||||
</label>
|
|
||||||
<Select
|
|
||||||
:id="'filterType' + filter[0]"
|
|
||||||
class="filter-field-value"
|
|
||||||
:model-value="filter[1].type"
|
|
||||||
@update:model-value="updateFilter(filter[0], 'type', $event)"
|
|
||||||
>
|
|
||||||
<option value="word">
|
|
||||||
{{ $t('settings.filter.plain') }}
|
|
||||||
</option>
|
|
||||||
<option value="regexp">
|
|
||||||
{{ $t('settings.filter.regexp') }}
|
|
||||||
</option>
|
|
||||||
<option value="user">
|
|
||||||
{{ $t('settings.filter.user') }}
|
|
||||||
</option>
|
|
||||||
<option value="user_regexp">
|
|
||||||
{{ $t('settings.filter.user_regexp') }}
|
|
||||||
</option>
|
|
||||||
</Select>
|
|
||||||
</div>
|
|
||||||
<div class="filter-value filter-field">
|
|
||||||
<label
|
|
||||||
:for="'filterValue' + filter[0]"
|
|
||||||
>
|
|
||||||
{{ $t('settings.filter.value') }}
|
|
||||||
</label>
|
|
||||||
{{ ' ' }}
|
|
||||||
<input
|
|
||||||
:id="'filterValue' + filter[0]"
|
|
||||||
class="input filter-field-value"
|
|
||||||
:value="filter[1].value"
|
|
||||||
@input="updateFilter(filter[0], 'value', $event.target.value)"
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
<div class="filter-expires filter-field">
|
|
||||||
<label
|
|
||||||
:for="'filterExpires' + filter[0]"
|
|
||||||
>
|
|
||||||
{{ $t('settings.filter.expires') }}
|
|
||||||
</label>
|
|
||||||
{{ ' ' }}
|
|
||||||
<div class="filter-field-value">
|
|
||||||
<input
|
|
||||||
:id="'filterExpires' + filter[0]"
|
|
||||||
class="input"
|
|
||||||
:class="{ disabled: filter[1].expires === null }"
|
|
||||||
type="datetime-local"
|
|
||||||
:disabled="filter[1].expires === null"
|
|
||||||
:value="filter[1].expires ? getDatetimeLocal(filter[1].expires) : null"
|
|
||||||
@input="updateFilter(filter[0], 'expires', $event.target.value)"
|
|
||||||
>
|
|
||||||
{{ ' ' }}
|
|
||||||
<Checkbox
|
|
||||||
:id="'filterExpiresNever' + filter[0]"
|
|
||||||
:model-value="filter[1].expires === null"
|
|
||||||
:name="'filterExpiresNever' + filter[0]"
|
|
||||||
class="input-inset input-boolean"
|
|
||||||
@update:model-value="updateFilter(filter[0], 'expires-never', $event)"
|
|
||||||
>
|
|
||||||
{{ $t('settings.filter.never_expires') }}
|
|
||||||
</Checkbox>
|
|
||||||
<span
|
|
||||||
v-if="filter[1].expires !== null && Date.now() > filter[1].expires"
|
|
||||||
class="alert neutral"
|
|
||||||
>
|
|
||||||
{{ $t('settings.filter.expired') }}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
v-if="!checkRegexValid(filter[0])"
|
|
||||||
class="alert error"
|
|
||||||
>
|
|
||||||
{{ $t('settings.filter.regexp_error') }}
|
|
||||||
</div>
|
|
||||||
<div class="filter-buttons">
|
|
||||||
<button
|
|
||||||
class="delete-button button-default -danger"
|
|
||||||
type="button"
|
|
||||||
@click="deleteFilter(filter[0])"
|
|
||||||
>
|
|
||||||
{{ $t('settings.filter.delete') }}
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
class="export-button button-default"
|
|
||||||
type="button"
|
|
||||||
@click="exportFilter(filter[0])"
|
|
||||||
>
|
|
||||||
{{ $t('settings.filter.export') }}
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
class="copy-button button-default"
|
|
||||||
type="button"
|
|
||||||
@click="copyFilter(filter[0])"
|
|
||||||
>
|
|
||||||
{{ $t('settings.filter.copy') }}
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
class="save-button button-default"
|
|
||||||
:class="{ disabled: !muteFiltersDraftDirty[filter[0]] }"
|
|
||||||
:disabled="!muteFiltersDraftDirty[filter[0]]"
|
|
||||||
type="button"
|
|
||||||
@click="saveFilter(filter[0])"
|
|
||||||
>
|
|
||||||
{{ $t('settings.filter.save') }}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="mute-filter new-filter">
|
|
||||||
<span class="total">
|
<span class="total">
|
||||||
{{ $t('settings.filter.count', { count: muteFiltersDraft.length }) }}
|
{{ $t('settings.filter.total_count', { count: muteFiltersDraft.length }) }}
|
||||||
</span>
|
</span>
|
||||||
<button
|
<button
|
||||||
class="add-button button-default"
|
class="add-button button-default"
|
||||||
|
|
@ -310,8 +139,196 @@
|
||||||
>
|
>
|
||||||
{{ $t('settings.filter.import') }}
|
{{ $t('settings.filter.import') }}
|
||||||
</button>
|
</button>
|
||||||
|
</p>
|
||||||
|
<div class="muteFilterContainer">
|
||||||
|
<div
|
||||||
|
v-for="filter in muteFiltersDraft"
|
||||||
|
:key="filter[0]"
|
||||||
|
class="mute-filter"
|
||||||
|
:style="{ order: filter[1].order }"
|
||||||
|
>
|
||||||
|
<div class="filter-name">
|
||||||
|
<label
|
||||||
|
:for="'filterName' + filter[0]"
|
||||||
|
>
|
||||||
|
{{ $t('settings.filter.name') }}
|
||||||
|
</label>
|
||||||
|
{{ ' ' }}
|
||||||
|
<input
|
||||||
|
:id="'filterName' + filter[0]"
|
||||||
|
class="input"
|
||||||
|
:value="filter[1].name"
|
||||||
|
@input="updateFilter(filter[0], 'name', $event.target.value)"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
v-if="filter[1].expires !== null && Date.now() > filter[1].expires"
|
||||||
|
class="alert neutral"
|
||||||
|
>
|
||||||
|
{{ $t('settings.filter.expired') }}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div class="filter-enabled">
|
||||||
|
<Checkbox
|
||||||
|
:id="'filterHide' + filter[0]"
|
||||||
|
:model-value="filter[1].hide"
|
||||||
|
:name="'filterHide' + filter[0]"
|
||||||
|
@update:model-value="updateFilter(filter[0], 'hide', $event)"
|
||||||
|
>
|
||||||
|
{{ $t('settings.filter.hide') }}
|
||||||
|
</Checkbox>
|
||||||
|
{{ ' ' }}
|
||||||
|
<Checkbox
|
||||||
|
:id="'filterEnabled' + filter[0]"
|
||||||
|
:model-value="filter[1].enabled"
|
||||||
|
:name="'filterEnabled' + filter[0]"
|
||||||
|
@update:model-value="updateFilter(filter[0], 'enabled', $event)"
|
||||||
|
>
|
||||||
|
{{ $t('settings.enabled') }}
|
||||||
|
</Checkbox>
|
||||||
|
</div>
|
||||||
|
<div class="filter-type filter-field">
|
||||||
|
<label :for="'filterType' + filter[0]">
|
||||||
|
<HelpIndicator>
|
||||||
|
<p>
|
||||||
|
{{ $t('settings.filter.help.word') }}
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
{{ $t('settings.filter.help.user') }}
|
||||||
|
</p>
|
||||||
|
<i18n-t
|
||||||
|
keypath="settings.filter.help.regexp"
|
||||||
|
tag="p"
|
||||||
|
>
|
||||||
|
<template #link>
|
||||||
|
<a
|
||||||
|
:href="$t('settings.filter.help.regexp_url')"
|
||||||
|
target="_blank"
|
||||||
|
>
|
||||||
|
{{ $t('settings.filter.help.regexp_link') }}
|
||||||
|
</a>
|
||||||
|
</template>
|
||||||
|
</i18n-t>
|
||||||
|
</HelpIndicator>
|
||||||
|
{{ $t('settings.filter.type') }}
|
||||||
|
</label>
|
||||||
|
<Select
|
||||||
|
:id="'filterType' + filter[0]"
|
||||||
|
class="filter-field-value"
|
||||||
|
:model-value="filter[1].type"
|
||||||
|
@update:model-value="updateFilter(filter[0], 'type', $event)"
|
||||||
|
>
|
||||||
|
<option value="word">
|
||||||
|
{{ $t('settings.filter.plain') }}
|
||||||
|
</option>
|
||||||
|
<option value="regexp">
|
||||||
|
{{ $t('settings.filter.regexp') }}
|
||||||
|
</option>
|
||||||
|
<option value="user">
|
||||||
|
{{ $t('settings.filter.user') }}
|
||||||
|
</option>
|
||||||
|
<option value="user_regexp">
|
||||||
|
{{ $t('settings.filter.user_regexp') }}
|
||||||
|
</option>
|
||||||
|
</Select>
|
||||||
|
</div>
|
||||||
|
<div class="filter-value filter-field">
|
||||||
|
<label
|
||||||
|
:for="'filterValue' + filter[0]"
|
||||||
|
>
|
||||||
|
{{ $t('settings.filter.value') }}
|
||||||
|
</label>
|
||||||
|
{{ ' ' }}
|
||||||
|
<input
|
||||||
|
:id="'filterValue' + filter[0]"
|
||||||
|
class="input filter-field-value"
|
||||||
|
:value="filter[1].value"
|
||||||
|
@input="updateFilter(filter[0], 'value', $event.target.value)"
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<div class="filter-expires filter-field">
|
||||||
|
<label
|
||||||
|
:for="'filterExpires' + filter[0]"
|
||||||
|
>
|
||||||
|
{{ $t('settings.filter.expires') }}
|
||||||
|
</label>
|
||||||
|
{{ ' ' }}
|
||||||
|
<div class="filter-field-value">
|
||||||
|
<input
|
||||||
|
:id="'filterExpires' + filter[0]"
|
||||||
|
class="input"
|
||||||
|
:class="{ disabled: filter[1].expires === null }"
|
||||||
|
type="datetime-local"
|
||||||
|
:disabled="filter[1].expires === null"
|
||||||
|
:value="filter[1].expires ? getDatetimeLocal(filter[1].expires) : null"
|
||||||
|
@input="updateFilter(filter[0], 'expires', $event.target.value)"
|
||||||
|
>
|
||||||
|
{{ ' ' }}
|
||||||
|
<Checkbox
|
||||||
|
:id="'filterExpiresNever' + filter[0]"
|
||||||
|
:model-value="filter[1].expires === null"
|
||||||
|
:name="'filterExpiresNever' + filter[0]"
|
||||||
|
class="input-inset input-boolean"
|
||||||
|
@update:model-value="updateFilter(filter[0], 'expires-never', $event)"
|
||||||
|
>
|
||||||
|
{{ $t('settings.filter.never_expires') }}
|
||||||
|
</Checkbox>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
v-if="!checkRegexValid(filter[0])"
|
||||||
|
class="alert error"
|
||||||
|
>
|
||||||
|
{{ $t('settings.filter.regexp_error') }}
|
||||||
|
</div>
|
||||||
|
<div class="filter-buttons">
|
||||||
|
<button
|
||||||
|
class="delete-button button-default -danger"
|
||||||
|
type="button"
|
||||||
|
@click="deleteFilter(filter[0])"
|
||||||
|
>
|
||||||
|
{{ $t('settings.filter.delete') }}
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
class="export-button button-default"
|
||||||
|
type="button"
|
||||||
|
@click="exportFilter(filter[0])"
|
||||||
|
>
|
||||||
|
{{ $t('settings.filter.export') }}
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
class="copy-button button-default"
|
||||||
|
type="button"
|
||||||
|
@click="copyFilter(filter[0])"
|
||||||
|
>
|
||||||
|
{{ $t('settings.filter.copy') }}
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
class="save-button button-default"
|
||||||
|
:class="{ disabled: !muteFiltersDraftDirty[filter[0]] }"
|
||||||
|
:disabled="!muteFiltersDraftDirty[filter[0]]"
|
||||||
|
type="button"
|
||||||
|
@click="saveFilter(filter[0])"
|
||||||
|
>
|
||||||
|
{{ $t('settings.filter.save') }}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<p class="muteFiltersActionsBottom">
|
||||||
|
<span class="total">
|
||||||
|
{{ $t('settings.filter.expired_count', { count: muteFiltersExpired.length }) }}
|
||||||
|
</span>
|
||||||
|
<button
|
||||||
|
class="add-button button-default"
|
||||||
|
type="button"
|
||||||
|
:class="{ disabled: muteFiltersExpired.length === 0 }"
|
||||||
|
:disabled="muteFiltersExpired.length === 0"
|
||||||
|
@click="purgeExpiredFilters()"
|
||||||
|
>
|
||||||
|
{{ $t('settings.filter.purge_expired') }}
|
||||||
|
</button>
|
||||||
|
</p>
|
||||||
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -432,7 +432,10 @@
|
||||||
"export": "Export",
|
"export": "Export",
|
||||||
"regexp_error": "Invalid Regular Expression",
|
"regexp_error": "Invalid Regular Expression",
|
||||||
"never_expires": "Never",
|
"never_expires": "Never",
|
||||||
"count": "{count} filter|{count} filters",
|
"total_count": "Total {count} custom filter|Total {count} custom filters",
|
||||||
|
"expired_count": "{count} expired filter|{count} expired filters",
|
||||||
|
"custom_filters": "Custom filters",
|
||||||
|
"purge_expired": "Remove expired filters",
|
||||||
"import_failure": "The selected file is not a supported Pleroma filter.",
|
"import_failure": "The selected file is not a supported Pleroma filter.",
|
||||||
"help": {
|
"help": {
|
||||||
"word": "Simple and RegExp filters test against post's content and subject.",
|
"word": "Simple and RegExp filters test against post's content and subject.",
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue