Refactor my-antennas/edit to use Composition API (#8680)
* refactor(client): refactor my-antennas/edit to use Composition API * fix(client): apply review suggestions
This commit is contained in:
Andreas Nedbal
GitHub
parent
6b44fe165b
commit
83b831d975
2 changed files with 100 additions and 150 deletions
|
|
@ -4,49 +4,34 @@
|
|||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue';
|
||||
import MkButton from '@/components/ui/button.vue';
|
||||
<script lang="ts" setup>
|
||||
import { watch } from 'vue';
|
||||
import XAntenna from './editor.vue';
|
||||
import * as symbols from '@/symbols';
|
||||
import * as os from '@/os';
|
||||
import { MisskeyNavigator } from '@/scripts/navigate';
|
||||
import { i18n } from '@/i18n';
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
MkButton,
|
||||
XAntenna,
|
||||
},
|
||||
const nav = new MisskeyNavigator();
|
||||
|
||||
props: {
|
||||
antennaId: {
|
||||
type: String,
|
||||
required: true,
|
||||
let antenna: any = $ref(null);
|
||||
|
||||
const props = defineProps<{
|
||||
antennaId: string
|
||||
}>();
|
||||
|
||||
function onAntennaUpdated() {
|
||||
nav.push('/my/antennas');
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
os.api('antennas/show', { antennaId: props.antennaId }).then((antennaResponse) => {
|
||||
antenna = antennaResponse;
|
||||
});
|
||||
|
||||
defineExpose({
|
||||
[symbols.PAGE_INFO]: {
|
||||
title: this.$ts.manageAntennas,
|
||||
title: i18n.ts.manageAntennas,
|
||||
icon: 'fas fa-satellite',
|
||||
},
|
||||
antenna: null,
|
||||
};
|
||||
},
|
||||
|
||||
watch: {
|
||||
antennaId: {
|
||||
async handler() {
|
||||
this.antenna = await os.api('antennas/show', { antennaId: this.antennaId });
|
||||
},
|
||||
immediate: true,
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
onAntennaUpdated() {
|
||||
this.$router.push('/my/antennas');
|
||||
},
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -44,135 +44,100 @@
|
|||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue';
|
||||
<script lang="ts" setup>
|
||||
import { watch } from 'vue';
|
||||
import MkButton from '@/components/ui/button.vue';
|
||||
import MkInput from '@/components/form/input.vue';
|
||||
import MkTextarea from '@/components/form/textarea.vue';
|
||||
import MkSelect from '@/components/form/select.vue';
|
||||
import MkSwitch from '@/components/form/switch.vue';
|
||||
import * as Acct from 'misskey-js/built/acct';
|
||||
import * as os from '@/os';
|
||||
import { i18n } from '@/i18n';
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
MkButton, MkInput, MkTextarea, MkSelect, MkSwitch
|
||||
},
|
||||
const props = defineProps<{
|
||||
antenna: any
|
||||
}>();
|
||||
|
||||
props: {
|
||||
antenna: {
|
||||
type: Object,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
const emit = defineEmits<{
|
||||
(ev: 'created'): void,
|
||||
(ev: 'updated'): void,
|
||||
(ev: 'deleted'): void,
|
||||
}>();
|
||||
|
||||
data() {
|
||||
return {
|
||||
name: '',
|
||||
src: '',
|
||||
userListId: null,
|
||||
userGroupId: null,
|
||||
users: '',
|
||||
keywords: '',
|
||||
excludeKeywords: '',
|
||||
caseSensitive: false,
|
||||
withReplies: false,
|
||||
withFile: false,
|
||||
notify: false,
|
||||
userLists: null,
|
||||
userGroups: null,
|
||||
};
|
||||
},
|
||||
let name: string = $ref(props.antenna.name);
|
||||
let src: string = $ref(props.antenna.src);
|
||||
let userListId: any = $ref(props.antenna.userListId);
|
||||
let userGroupId: any = $ref(props.antenna.userGroupId);
|
||||
let users: string = $ref(props.antenna.users.join('\n'));
|
||||
let keywords: string = $ref(props.antenna.keywords.map(x => x.join(' ')).join('\n'));
|
||||
let excludeKeywords: string = $ref(props.antenna.excludeKeywords.map(x => x.join(' ')).join('\n'));
|
||||
let caseSensitive: boolean = $ref(props.antenna.caseSensitive);
|
||||
let withReplies: boolean = $ref(props.antenna.withReplies);
|
||||
let withFile: boolean = $ref(props.antenna.withFile);
|
||||
let notify: boolean = $ref(props.antenna.notify);
|
||||
let userLists: any = $ref(null);
|
||||
let userGroups: any = $ref(null);
|
||||
|
||||
watch: {
|
||||
async src() {
|
||||
if (this.src === 'list' && this.userLists === null) {
|
||||
this.userLists = await os.api('users/lists/list');
|
||||
watch(() => src, async () => {
|
||||
if (src === 'list' && userLists === null) {
|
||||
userLists = await os.api('users/lists/list');
|
||||
}
|
||||
|
||||
if (this.src === 'group' && this.userGroups === null) {
|
||||
if (src === 'group' && userGroups === null) {
|
||||
const groups1 = await os.api('users/groups/owned');
|
||||
const groups2 = await os.api('users/groups/joined');
|
||||
|
||||
this.userGroups = [...groups1, ...groups2];
|
||||
userGroups = [...groups1, ...groups2];
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
created() {
|
||||
this.name = this.antenna.name;
|
||||
this.src = this.antenna.src;
|
||||
this.userListId = this.antenna.userListId;
|
||||
this.userGroupId = this.antenna.userGroupId;
|
||||
this.users = this.antenna.users.join('\n');
|
||||
this.keywords = this.antenna.keywords.map(x => x.join(' ')).join('\n');
|
||||
this.excludeKeywords = this.antenna.excludeKeywords.map(x => x.join(' ')).join('\n');
|
||||
this.caseSensitive = this.antenna.caseSensitive;
|
||||
this.withReplies = this.antenna.withReplies;
|
||||
this.withFile = this.antenna.withFile;
|
||||
this.notify = this.antenna.notify;
|
||||
},
|
||||
|
||||
methods: {
|
||||
async saveAntenna() {
|
||||
if (this.antenna.id == null) {
|
||||
await os.apiWithDialog('antennas/create', {
|
||||
name: this.name,
|
||||
src: this.src,
|
||||
userListId: this.userListId,
|
||||
userGroupId: this.userGroupId,
|
||||
withReplies: this.withReplies,
|
||||
withFile: this.withFile,
|
||||
notify: this.notify,
|
||||
caseSensitive: this.caseSensitive,
|
||||
users: this.users.trim().split('\n').map(x => x.trim()),
|
||||
keywords: this.keywords.trim().split('\n').map(x => x.trim().split(' ')),
|
||||
excludeKeywords: this.excludeKeywords.trim().split('\n').map(x => x.trim().split(' ')),
|
||||
});
|
||||
this.$emit('created');
|
||||
|
||||
async function saveAntenna() {
|
||||
const antennaData = {
|
||||
name,
|
||||
src,
|
||||
userListId,
|
||||
userGroupId,
|
||||
withReplies,
|
||||
withFile,
|
||||
notify,
|
||||
caseSensitive,
|
||||
users: users.trim().split('\n').map(x => x.trim()),
|
||||
keywords: keywords.trim().split('\n').map(x => x.trim().split(' ')),
|
||||
excludeKeywords: excludeKeywords.trim().split('\n').map(x => x.trim().split(' ')),
|
||||
};
|
||||
|
||||
if (props.antenna.id == null) {
|
||||
await os.apiWithDialog('antennas/create', antennaData);
|
||||
emit('created');
|
||||
} else {
|
||||
await os.apiWithDialog('antennas/update', {
|
||||
antennaId: this.antenna.id,
|
||||
name: this.name,
|
||||
src: this.src,
|
||||
userListId: this.userListId,
|
||||
userGroupId: this.userGroupId,
|
||||
withReplies: this.withReplies,
|
||||
withFile: this.withFile,
|
||||
notify: this.notify,
|
||||
caseSensitive: this.caseSensitive,
|
||||
users: this.users.trim().split('\n').map(x => x.trim()),
|
||||
keywords: this.keywords.trim().split('\n').map(x => x.trim().split(' ')),
|
||||
excludeKeywords: this.excludeKeywords.trim().split('\n').map(x => x.trim().split(' ')),
|
||||
});
|
||||
this.$emit('updated');
|
||||
antennaData['antennaId'] = props.antenna.id;
|
||||
await os.apiWithDialog('antennas/update', antennaData);
|
||||
emit('updated');
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
async deleteAntenna() {
|
||||
async function deleteAntenna() {
|
||||
const { canceled } = await os.confirm({
|
||||
type: 'warning',
|
||||
text: this.$t('removeAreYouSure', { x: this.antenna.name }),
|
||||
text: i18n.t('removeAreYouSure', { x: props.antenna.name }),
|
||||
});
|
||||
if (canceled) return;
|
||||
|
||||
await os.api('antennas/delete', {
|
||||
antennaId: this.antenna.id,
|
||||
antennaId: props.antenna.id,
|
||||
});
|
||||
|
||||
os.success();
|
||||
this.$emit('deleted');
|
||||
},
|
||||
emit('deleted');
|
||||
}
|
||||
|
||||
addUser() {
|
||||
function addUser() {
|
||||
os.selectUser().then(user => {
|
||||
this.users = this.users.trim();
|
||||
this.users += '\n@' + Acct.toString(user);
|
||||
this.users = this.users.trim();
|
||||
users = users.trim();
|
||||
users += '\n@' + Acct.toString(user as any);
|
||||
users = users.trim();
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
|
|
|||
Loading…
Reference in a new issue