mia/FoundKey
1
0
Fork 0
forked from FoundKeyGang/FoundKey
Code Issues Pull requests Projects Releases Packages Wiki Activity

Refactor my-antennas/edit to use Composition API (#8680)

Browse source 
* refactor(client): refactor my-antennas/edit to use Composition API

* fix(client): apply review suggestions
This commit is contained in:
Andy 2022-05-25 09:37:15 +02:00 committed by GitHub
parent 6b44fe165b
commit 83b831d975
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 100 additions and 150 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

53
packages/client/src/pages/my-antennas/edit.vue
View file

@ -4,49 +4,34 @@
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
import { defineComponent } from 'vue'; import { watch } from 'vue';
import MkButton from '@/components/ui/button.vue';
import XAntenna from './editor.vue'; import XAntenna from './editor.vue';
import * as symbols from '@/symbols'; import * as symbols from '@/symbols';
import * as os from '@/os'; import * as os from '@/os';
import { MisskeyNavigator } from '@/scripts/navigate';
import { i18n } from '@/i18n';
export default defineComponent({ const nav = new MisskeyNavigator();
components: {
MkButton,
XAntenna,
},
props: { let antenna: any = $ref(null);
antennaId: {
type: String, const props = defineProps<{
required: true, antennaId: string
}>();
function onAntennaUpdated() {
nav.push('/my/antennas');
} }
},
data() { os.api('antennas/show', { antennaId: props.antennaId }).then((antennaResponse) => {
return { antenna = antennaResponse;
});
defineExpose({
[symbols.PAGE_INFO]: { [symbols.PAGE_INFO]: {
title: this.$ts.manageAntennas, title: i18n.ts.manageAntennas,
icon: 'fas fa-satellite', 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> </script>

157
packages/client/src/pages/my-antennas/editor.vue
View file

@ -44,135 +44,100 @@
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
import { defineComponent } from 'vue'; import { watch } from 'vue';
import MkButton from '@/components/ui/button.vue'; import MkButton from '@/components/ui/button.vue';
import MkInput from '@/components/form/input.vue'; import MkInput from '@/components/form/input.vue';
import MkTextarea from '@/components/form/textarea.vue'; import MkTextarea from '@/components/form/textarea.vue';
import MkSelect from '@/components/form/select.vue'; import MkSelect from '@/components/form/select.vue';
import MkSwitch from '@/components/form/switch.vue'; import MkSwitch from '@/components/form/switch.vue';
import * as Acct from 'misskey-js/built/acct';
import * as os from '@/os'; import * as os from '@/os';
import { i18n } from '@/i18n';
export default defineComponent({ const props = defineProps<{
components: { antenna: any
MkButton, MkInput, MkTextarea, MkSelect, MkSwitch }>();
},
props: { const emit = defineEmits<{
antenna: { (ev: 'created'): void,
type: Object, (ev: 'updated'): void,
required: true (ev: 'deleted'): void,
} }>();
},
data() { let name: string = $ref(props.antenna.name);
return { let src: string = $ref(props.antenna.src);
name: '', let userListId: any = $ref(props.antenna.userListId);
src: '', let userGroupId: any = $ref(props.antenna.userGroupId);
userListId: null, let users: string = $ref(props.antenna.users.join('\n'));
userGroupId: null, let keywords: string = $ref(props.antenna.keywords.map(x => x.join(' ')).join('\n'));
users: '', let excludeKeywords: string = $ref(props.antenna.excludeKeywords.map(x => x.join(' ')).join('\n'));
keywords: '', let caseSensitive: boolean = $ref(props.antenna.caseSensitive);
excludeKeywords: '', let withReplies: boolean = $ref(props.antenna.withReplies);
caseSensitive: false, let withFile: boolean = $ref(props.antenna.withFile);
withReplies: false, let notify: boolean = $ref(props.antenna.notify);
withFile: false, let userLists: any = $ref(null);
notify: false, let userGroups: any = $ref(null);
userLists: null,
userGroups: null,
};
},
watch: { watch(() => src, async () => {
async src() { if (src === 'list' && userLists === null) {
if (this.src === 'list' && this.userLists === null) { userLists = await os.api('users/lists/list');
this.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 groups1 = await os.api('users/groups/owned');
const groups2 = await os.api('users/groups/joined'); 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 { } else {
await os.apiWithDialog('antennas/update', { antennaData['antennaId'] = props.antenna.id;
antennaId: this.antenna.id, await os.apiWithDialog('antennas/update', antennaData);
name: this.name, emit('updated');
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');
} }
},
async deleteAntenna() { async function deleteAntenna() {
const { canceled } = await os.confirm({ const { canceled } = await os.confirm({
type: 'warning', type: 'warning',
text: this.$t('removeAreYouSure', { x: this.antenna.name }), text: i18n.t('removeAreYouSure', { x: props.antenna.name }),
}); });
if (canceled) return; if (canceled) return;
await os.api('antennas/delete', { await os.api('antennas/delete', {
antennaId: this.antenna.id, antennaId: props.antenna.id,
}); });
os.success(); os.success();
this.$emit('deleted'); emit('deleted');
}, }
addUser() { function addUser() {
os.selectUser().then(user => { os.selectUser().then(user => {
this.users = this.users.trim(); users = users.trim();
this.users += '\n@' + Acct.toString(user); users += '\n@' + Acct.toString(user as any);
this.users = this.users.trim(); users = users.trim();
}); });
} }
}
});
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>