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 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

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,
required: true,
}
},
data() { const props = defineProps<{
return { antennaId: string
[symbols.PAGE_INFO]: { }>();
title: this.$ts.manageAntennas,
icon: 'fas fa-satellite',
},
antenna: null,
};
},
watch: { function onAntennaUpdated() {
antennaId: { nav.push('/my/antennas');
async handler() { }
this.antenna = await os.api('antennas/show', { antennaId: this.antennaId });
},
immediate: true,
}
},
methods: { os.api('antennas/show', { antennaId: props.antennaId }).then((antennaResponse) => {
onAntennaUpdated() { antenna = antennaResponse;
this.$router.push('/my/antennas'); });
},
defineExpose({
[symbols.PAGE_INFO]: {
title: i18n.ts.manageAntennas,
icon: 'fas fa-satellite',
} }
}); });
</script> </script>

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');
} 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');
}
},
async deleteAntenna() {
const { canceled } = await os.confirm({
type: 'warning',
text: this.$t('removeAreYouSure', { x: this.antenna.name }),
});
if (canceled) return;
await os.api('antennas/delete', {
antennaId: this.antenna.id,
});
os.success();
this.$emit('deleted');
},
addUser() {
os.selectUser().then(user => {
this.users = this.users.trim();
this.users += '\n@' + Acct.toString(user);
this.users = this.users.trim();
});
}
} }
}); });
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 {
antennaData['antennaId'] = props.antenna.id;
await os.apiWithDialog('antennas/update', antennaData);
emit('updated');
}
}
async function deleteAntenna() {
const { canceled } = await os.confirm({
type: 'warning',
text: i18n.t('removeAreYouSure', { x: props.antenna.name }),
});
if (canceled) return;
await os.api('antennas/delete', {
antennaId: props.antenna.id,
});
os.success();
emit('deleted');
}
function addUser() {
os.selectUser().then(user => {
users = users.trim();
users += '\n@' + Acct.toString(user as any);
users = users.trim();
});
}
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>