refactoring

Resolve #7779

packages/client/src/pages/my-antennas/create.vue

@@ -0,0 +1,51 @@
+<template>
+<div class="geegznzt">
+	<XAntenna :antenna="draft" @created="onAntennaCreated"/>
+</div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import MkButton from '@/components/ui/button.vue';
+import XAntenna from './editor.vue';
+import * as symbols from '@/symbols';
+
+export default defineComponent({
+	components: {
+		MkButton,
+		XAntenna,
+	},
+
+	data() {
+		return {
+			[symbols.PAGE_INFO]: {
+				title: this.$ts.manageAntennas,
+				icon: 'fas fa-satellite',
+			},
+			draft: {
+				name: '',
+				src: 'all',
+				userListId: null,
+				userGroupId: null,
+				users: [],
+				keywords: [],
+				excludeKeywords: [],
+				withReplies: false,
+				caseSensitive: false,
+				withFile: false,
+				notify: false
+			},
+		};
+	},
+
+	methods: {
+		onAntennaCreated() {
+			this.$router.push('/my/antennas');
+		},
+	}
+});
+</script>
+
+<style lang="scss" scoped>
+
+</style>

packages/client/src/pages/my-antennas/edit.vue

@@ -0,0 +1,56 @@
+<template>
+<div class="">
+	<XAntenna v-if="antenna" :antenna="antenna" @updated="onAntennaUpdated"/>
+</div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import MkButton from '@/components/ui/button.vue';
+import XAntenna from './editor.vue';
+import * as symbols from '@/symbols';
+import * as os from '@/os';
+
+export default defineComponent({
+	components: {
+		MkButton,
+		XAntenna,
+	},
+
+	props: {
+		antennaId: {
+			type: String,
+			required: true,
+		}
+	},
+
+	data() {
+		return {
+			[symbols.PAGE_INFO]: {
+				title: this.$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>
+
+<style lang="scss" scoped>
+
+</style>

packages/client/src/pages/my-antennas/editor.vue

@@ -0,0 +1,190 @@
+<template>
+<div class="shaynizk">
+	<div class="form">
+		<MkInput v-model="name" class="_formBlock">
+			<template #label>{{ $ts.name }}</template>
+		</MkInput>
+		<MkSelect v-model="src" class="_formBlock">
+			<template #label>{{ $ts.antennaSource }}</template>
+			<option value="all">{{ $ts._antennaSources.all }}</option>
+			<option value="home">{{ $ts._antennaSources.homeTimeline }}</option>
+			<option value="users">{{ $ts._antennaSources.users }}</option>
+			<option value="list">{{ $ts._antennaSources.userList }}</option>
+			<option value="group">{{ $ts._antennaSources.userGroup }}</option>
+		</MkSelect>
+		<MkSelect v-model="userListId" v-if="src === 'list'" class="_formBlock">
+			<template #label>{{ $ts.userList }}</template>
+			<option v-for="list in userLists" :value="list.id" :key="list.id">{{ list.name }}</option>
+		</MkSelect>
+		<MkSelect v-model="userGroupId" v-else-if="src === 'group'" class="_formBlock">
+			<template #label>{{ $ts.userGroup }}</template>
+			<option v-for="group in userGroups" :value="group.id" :key="group.id">{{ group.name }}</option>
+		</MkSelect>
+		<MkTextarea v-model="users" v-else-if="src === 'users'" class="_formBlock">
+			<template #label>{{ $ts.users }}</template>
+			<template #caption>{{ $ts.antennaUsersDescription }} <button class="_textButton" @click="addUser">{{ $ts.addUser }}</button></template>
+		</MkTextarea>
+		<MkSwitch v-model="withReplies" class="_formBlock">{{ $ts.withReplies }}</MkSwitch>
+		<MkTextarea v-model="keywords" class="_formBlock">
+			<template #label>{{ $ts.antennaKeywords }}</template>
+			<template #caption>{{ $ts.antennaKeywordsDescription }}</template>
+		</MkTextarea>
+		<MkTextarea v-model="excludeKeywords" class="_formBlock">
+			<template #label>{{ $ts.antennaExcludeKeywords }}</template>
+			<template #caption>{{ $ts.antennaKeywordsDescription }}</template>
+		</MkTextarea>
+		<MkSwitch v-model="caseSensitive" class="_formBlock">{{ $ts.caseSensitive }}</MkSwitch>
+		<MkSwitch v-model="withFile" class="_formBlock">{{ $ts.withFileAntenna }}</MkSwitch>
+		<MkSwitch v-model="notify" class="_formBlock">{{ $ts.notifyAntenna }}</MkSwitch>
+	</div>
+	<div class="actions">
+		<MkButton inline @click="saveAntenna()" primary><i class="fas fa-save"></i> {{ $ts.save }}</MkButton>
+		<MkButton inline @click="deleteAntenna()" v-if="antenna.id != null" danger><i class="fas fa-trash"></i> {{ $ts.delete }}</MkButton>
+	</div>
+</div>
+</template>
+
+<script lang="ts">
+import { defineComponent } 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';
+
+export default defineComponent({
+	components: {
+		MkButton, MkInput, MkTextarea, MkSelect, MkSwitch
+	},
+
+	props: {
+		antenna: {
+			type: Object,
+			required: true
+		}
+	},
+
+	data() {
+		return {
+			name: '',
+			src: '',
+			userListId: null,
+			userGroupId: null,
+			users: '',
+			keywords: '',
+			excludeKeywords: '',
+			caseSensitive: false,
+			withReplies: false,
+			withFile: false,
+			notify: false,
+			userLists: null,
+			userGroups: null,
+		};
+	},
+
+	watch: {
+		async src() {
+			if (this.src === 'list' && this.userLists === null) {
+				this.userLists = await os.api('users/lists/list');
+			}
+
+			if (this.src === 'group' && this.userGroups === null) {
+				const groups1 = await os.api('users/groups/owned');
+				const groups2 = await os.api('users/groups/joined');
+
+				this.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.dialog({
+				type: 'warning',
+				text: this.$t('removeAreYouSure', { x: this.antenna.name }),
+				showCancelButton: true
+			});
+			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();
+			});
+		}
+	}
+});
+</script>
+
+<style lang="scss" scoped>
+.shaynizk {
+	> .form {
+		padding: 32px;
+	}
+
+	> .actions {
+		padding: 24px 32px;
+		border-top: solid 0.5px var(--divider);
+	}
+}
+</style>

packages/client/src/pages/my-antennas/index.vue

@@ -0,0 +1,71 @@
+<template>
+<div class="ieepwinx _section">
+	<MkButton :link="true" to="/my/antennas/create" primary class="add"><i class="fas fa-plus"></i> {{ $ts.add }}</MkButton>
+
+	<div class="_content">
+		<MkPagination :pagination="pagination" #default="{items}" ref="list">
+			<MkA class="ljoevbzj" v-for="antenna in items" :key="antenna.id" :to="`/my/antennas/${antenna.id}`">
+				<div class="name">{{ antenna.name }}</div>
+			</MkA>
+		</MkPagination>
+	</div>
+</div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import MkPagination from '@/components/ui/pagination.vue';
+import MkButton from '@/components/ui/button.vue';
+import * as symbols from '@/symbols';
+
+export default defineComponent({
+	components: {
+		MkPagination,
+		MkButton,
+	},
+
+	data() {
+		return {
+			[symbols.PAGE_INFO]: {
+				title: this.$ts.manageAntennas,
+				icon: 'fas fa-satellite',
+				action: {
+					icon: 'fas fa-plus',
+					handler: this.create
+				}
+			},
+			pagination: {
+				endpoint: 'antennas/list',
+				limit: 10,
+			},
+		};
+	},
+});
+</script>
+
+<style lang="scss" scoped>
+.ieepwinx {
+	padding: 16px;
+
+	> .add {
+		margin: 0 auto 16px auto;
+	}
+
+	.ljoevbzj {
+		display: block;
+		padding: 16px;
+		margin-bottom: 8px;
+		border: solid 1px var(--divider);
+		border-radius: 6px;
+
+		&:hover {
+			border: solid 1px var(--accent);
+			text-decoration: none;
+		}
+
+		> .name {
+			font-weight: bold;
+		}
+	}
+}
+</style>