refactor(client): refactor settings/word-mute to use Composition API (#8597)
This commit is contained in:
parent
e5a8773bfe
commit
f3628946af
|
@ -1,35 +1,35 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="_formRoot">
|
<div class="_formRoot">
|
||||||
<MkTab v-model="tab" class="_formBlock">
|
<MkTab v-model="tab" class="_formBlock">
|
||||||
<option value="soft">{{ $ts._wordMute.soft }}</option>
|
<option value="soft">{{ i18n.ts._wordMute.soft }}</option>
|
||||||
<option value="hard">{{ $ts._wordMute.hard }}</option>
|
<option value="hard">{{ i18n.ts._wordMute.hard }}</option>
|
||||||
</MkTab>
|
</MkTab>
|
||||||
<div class="_formBlock">
|
<div class="_formBlock">
|
||||||
<div v-show="tab === 'soft'">
|
<div v-show="tab === 'soft'">
|
||||||
<MkInfo class="_formBlock">{{ $ts._wordMute.softDescription }}</MkInfo>
|
<MkInfo class="_formBlock">{{ i18n.ts._wordMute.softDescription }}</MkInfo>
|
||||||
<FormTextarea v-model="softMutedWords" class="_formBlock">
|
<FormTextarea v-model="softMutedWords" class="_formBlock">
|
||||||
<span>{{ $ts._wordMute.muteWords }}</span>
|
<span>{{ i18n.ts._wordMute.muteWords }}</span>
|
||||||
<template #caption>{{ $ts._wordMute.muteWordsDescription }}<br>{{ $ts._wordMute.muteWordsDescription2 }}</template>
|
<template #caption>{{ i18n.ts._wordMute.muteWordsDescription }}<br>{{ i18n.ts._wordMute.muteWordsDescription2 }}</template>
|
||||||
</FormTextarea>
|
</FormTextarea>
|
||||||
</div>
|
</div>
|
||||||
<div v-show="tab === 'hard'">
|
<div v-show="tab === 'hard'">
|
||||||
<MkInfo class="_formBlock">{{ $ts._wordMute.hardDescription }} {{ $ts.reflectMayTakeTime }}</MkInfo>
|
<MkInfo class="_formBlock">{{ i18n.ts._wordMute.hardDescription }} {{ i18n.ts.reflectMayTakeTime }}</MkInfo>
|
||||||
<FormTextarea v-model="hardMutedWords" class="_formBlock">
|
<FormTextarea v-model="hardMutedWords" class="_formBlock">
|
||||||
<span>{{ $ts._wordMute.muteWords }}</span>
|
<span>{{ i18n.ts._wordMute.muteWords }}</span>
|
||||||
<template #caption>{{ $ts._wordMute.muteWordsDescription }}<br>{{ $ts._wordMute.muteWordsDescription2 }}</template>
|
<template #caption>{{ i18n.ts._wordMute.muteWordsDescription }}<br>{{ i18n.ts._wordMute.muteWordsDescription2 }}</template>
|
||||||
</FormTextarea>
|
</FormTextarea>
|
||||||
<MkKeyValue v-if="hardWordMutedNotesCount != null" class="_formBlock">
|
<MkKeyValue v-if="hardWordMutedNotesCount != null" class="_formBlock">
|
||||||
<template #key>{{ $ts._wordMute.mutedNotes }}</template>
|
<template #key>{{ i18n.ts._wordMute.mutedNotes }}</template>
|
||||||
<template #value>{{ number(hardWordMutedNotesCount) }}</template>
|
<template #value>{{ number(hardWordMutedNotesCount) }}</template>
|
||||||
</MkKeyValue>
|
</MkKeyValue>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<MkButton primary inline :disabled="!changed" @click="save()"><i class="fas fa-save"></i> {{ $ts.save }}</MkButton>
|
<MkButton primary inline :disabled="!changed" @click="save()"><i class="fas fa-save"></i> {{ i18n.ts.save }}</MkButton>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts" setup>
|
||||||
import { defineComponent } from 'vue';
|
import { defineExpose, ref, watch } from 'vue';
|
||||||
import FormTextarea from '@/components/form/textarea.vue';
|
import FormTextarea from '@/components/form/textarea.vue';
|
||||||
import MkKeyValue from '@/components/key-value.vue';
|
import MkKeyValue from '@/components/key-value.vue';
|
||||||
import MkButton from '@/components/ui/button.vue';
|
import MkButton from '@/components/ui/button.vue';
|
||||||
|
@ -38,114 +38,90 @@ import MkTab from '@/components/tab.vue';
|
||||||
import * as os from '@/os';
|
import * as os from '@/os';
|
||||||
import number from '@/filters/number';
|
import number from '@/filters/number';
|
||||||
import * as symbols from '@/symbols';
|
import * as symbols from '@/symbols';
|
||||||
|
import { defaultStore } from '@/store';
|
||||||
|
import { $i } from '@/account';
|
||||||
|
import { i18n } from '@/i18n';
|
||||||
|
|
||||||
export default defineComponent({
|
const render = (mutedWords) => mutedWords.map(x => {
|
||||||
components: {
|
if (Array.isArray(x)) {
|
||||||
MkButton,
|
return x.join(' ');
|
||||||
FormTextarea,
|
} else {
|
||||||
MkKeyValue,
|
return x;
|
||||||
MkTab,
|
}
|
||||||
MkInfo,
|
}).join('\n');
|
||||||
},
|
|
||||||
|
|
||||||
emits: ['info'],
|
const tab = ref('soft');
|
||||||
|
const softMutedWords = ref(render(defaultStore.state.mutedWords));
|
||||||
data() {
|
const hardMutedWords = ref(render($i!.mutedWords));
|
||||||
return {
|
const hardWordMutedNotesCount = ref(null);
|
||||||
[symbols.PAGE_INFO]: {
|
const changed = ref(false);
|
||||||
title: this.$ts.wordMute,
|
|
||||||
icon: 'fas fa-comment-slash',
|
|
||||||
bg: 'var(--bg)',
|
|
||||||
},
|
|
||||||
tab: 'soft',
|
|
||||||
softMutedWords: '',
|
|
||||||
hardMutedWords: '',
|
|
||||||
hardWordMutedNotesCount: null,
|
|
||||||
changed: false,
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
watch: {
|
os.api('i/get-word-muted-notes-count', {}).then(response => {
|
||||||
softMutedWords: {
|
hardWordMutedNotesCount.value = response?.count;
|
||||||
handler() {
|
});
|
||||||
this.changed = true;
|
|
||||||
},
|
|
||||||
deep: true
|
|
||||||
},
|
|
||||||
hardMutedWords: {
|
|
||||||
handler() {
|
|
||||||
this.changed = true;
|
|
||||||
},
|
|
||||||
deep: true
|
|
||||||
},
|
|
||||||
},
|
|
||||||
|
|
||||||
async created() {
|
watch(softMutedWords, () => {
|
||||||
const render = (mutedWords) => mutedWords.map(x => {
|
changed.value = true;
|
||||||
if (Array.isArray(x)) {
|
});
|
||||||
return x.join(' ');
|
|
||||||
} else {
|
|
||||||
return x;
|
|
||||||
}
|
|
||||||
}).join('\n');
|
|
||||||
|
|
||||||
this.softMutedWords = render(this.$store.state.mutedWords);
|
watch(hardMutedWords, () => {
|
||||||
this.hardMutedWords = render(this.$i.mutedWords);
|
changed.value = true;
|
||||||
|
});
|
||||||
|
|
||||||
this.hardWordMutedNotesCount = (await os.api('i/get-word-muted-notes-count', {})).count;
|
async function save() {
|
||||||
},
|
const parseMutes = (mutes, tab) => {
|
||||||
|
// split into lines, remove empty lines and unnecessary whitespace
|
||||||
|
let lines = mutes.trim().split('\n').map(line => line.trim()).filter(line => line != '');
|
||||||
|
|
||||||
methods: {
|
// check each line if it is a RegExp or not
|
||||||
async save() {
|
for (let i = 0; i < lines.length; i++) {
|
||||||
const parseMutes = (mutes, tab) => {
|
const line = lines[i]
|
||||||
// split into lines, remove empty lines and unnecessary whitespace
|
const regexp = line.match(/^\/(.+)\/(.*)$/);
|
||||||
let lines = mutes.trim().split('\n').map(line => line.trim()).filter(line => line != '');
|
if (regexp) {
|
||||||
|
// check that the RegExp is valid
|
||||||
// check each line if it is a RegExp or not
|
try {
|
||||||
for (let i = 0; i < lines.length; i++) {
|
new RegExp(regexp[1], regexp[2]);
|
||||||
const line = lines[i]
|
// note that regex lines will not be split by spaces!
|
||||||
const regexp = line.match(/^\/(.+)\/(.*)$/);
|
} catch (err: any) {
|
||||||
if (regexp) {
|
// invalid syntax: do not save, do not reset changed flag
|
||||||
// check that the RegExp is valid
|
os.alert({
|
||||||
try {
|
type: 'error',
|
||||||
new RegExp(regexp[1], regexp[2]);
|
title: i18n.ts.regexpError,
|
||||||
// note that regex lines will not be split by spaces!
|
text: i18n.t('regexpErrorDescription', { tab, line: i + 1 }) + "\n" + err.toString()
|
||||||
} catch (err) {
|
});
|
||||||
// invalid syntax: do not save, do not reset changed flag
|
// re-throw error so these invalid settings are not saved
|
||||||
os.alert({
|
throw err;
|
||||||
type: 'error',
|
|
||||||
title: this.$ts.regexpError,
|
|
||||||
text: this.$t('regexpErrorDescription', { tab, line: i + 1 }) + "\n" + err.toString()
|
|
||||||
});
|
|
||||||
// re-throw error so these invalid settings are not saved
|
|
||||||
throw err;
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
lines[i] = line.split(' ');
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
} else {
|
||||||
return lines;
|
lines[i] = line.split(' ');
|
||||||
};
|
|
||||||
|
|
||||||
let softMutes, hardMutes;
|
|
||||||
try {
|
|
||||||
softMutes = parseMutes(this.softMutedWords, this.$ts._wordMute.soft);
|
|
||||||
hardMutes = parseMutes(this.hardMutedWords, this.$ts._wordMute.hard);
|
|
||||||
} catch (err) {
|
|
||||||
// already displayed error message in parseMutes
|
|
||||||
return;
|
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
this.$store.set('mutedWords', softMutes);
|
return lines;
|
||||||
await os.api('i/update', {
|
};
|
||||||
mutedWords: hardMutes,
|
|
||||||
});
|
|
||||||
|
|
||||||
this.changed = false;
|
let softMutes, hardMutes;
|
||||||
},
|
try {
|
||||||
|
softMutes = parseMutes(softMutedWords.value, i18n.ts._wordMute.soft);
|
||||||
|
hardMutes = parseMutes(hardMutedWords.value, i18n.ts._wordMute.hard);
|
||||||
|
} catch (err) {
|
||||||
|
// already displayed error message in parseMutes
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
number
|
defaultStore.set('mutedWords', softMutes);
|
||||||
|
await os.api('i/update', {
|
||||||
|
mutedWords: hardMutes,
|
||||||
|
});
|
||||||
|
|
||||||
|
changed.value = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
defineExpose({
|
||||||
|
[symbols.PAGE_INFO]: {
|
||||||
|
title: i18n.ts.wordMute,
|
||||||
|
icon: 'fas fa-comment-slash',
|
||||||
|
bg: 'var(--bg)',
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
Loading…
Reference in New Issue