From c7cc3dcdfd2c0962a39e7186852a17dbd09b6a5b Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sat, 18 May 2019 20:36:33 +0900
Subject: ユーザーグループ
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Resolve #3218
---
 src/client/app/desktop/script.ts                   | 18 +++++-
 .../views/components/messaging-room-window.vue     | 12 ++--
 .../desktop/views/components/messaging-window.vue  |  7 ++-
 .../components/received-follow-requests-window.vue | 70 ----------------------
 .../desktop/views/components/ui.header.account.vue | 33 +++++-----
 .../app/desktop/views/components/ui.sidebar.vue    |  2 -
 .../desktop/views/components/user-list-window.vue  | 24 --------
 .../desktop/views/components/user-lists-window.vue | 36 -----------
 .../app/desktop/views/pages/messaging-room.vue     | 28 ++++++---
 src/client/app/desktop/views/widgets/messaging.vue |  7 ++-
 10 files changed, 70 insertions(+), 167 deletions(-)
 delete mode 100644 src/client/app/desktop/views/components/received-follow-requests-window.vue
 delete mode 100644 src/client/app/desktop/views/components/user-list-window.vue
 delete mode 100644 src/client/app/desktop/views/components/user-lists-window.vue

(limited to 'src/client/app/desktop')

diff --git a/src/client/app/desktop/script.ts b/src/client/app/desktop/script.ts
index 464f7d3ce9..c6479f477c 100644
--- a/src/client/app/desktop/script.ts
+++ b/src/client/app/desktop/script.ts
@@ -22,6 +22,7 @@ import MkShare from '../common/views/pages/share.vue';
 import MkFollow from '../common/views/pages/follow.vue';
 import MkNotFound from '../common/views/pages/not-found.vue';
 import MkSettings from './views/pages/settings.vue';
+import DeckColumn from '../common/views/deck/deck.column-template.vue';
 
 import Ctx from './views/components/context-menu.vue';
 import PostFormWindow from './views/components/post-form-window.vue';
@@ -138,9 +139,14 @@ init(async (launch, os) => {
 					{ path: '/search', component: () => import('../common/views/deck/deck.search-column.vue').then(m => m.default) },
 					{ path: '/tags/:tag', name: 'tag', component: () => import('../common/views/deck/deck.hashtag-column.vue').then(m => m.default) },
 					{ path: '/featured', name: 'featured', component: () => import('../common/views/deck/deck.featured-column.vue').then(m => m.default) },
-					{ path: '/explore', name: 'explore', component: () => import('../common/views/deck/deck.explore-column.vue').then(m => m.default) },
-					{ path: '/explore/tags/:tag', name: 'explore-tag', props: true, component: () => import('../common/views/deck/deck.explore-column.vue').then(m => m.default) },
-					{ path: '/i/favorites', component: () => import('../common/views/deck/deck.favorites-column.vue').then(m => m.default) }
+					{ path: '/explore', name: 'explore', component: DeckColumn, props: route => ({ component: () => import('../common/views/pages/explore.vue').then(m => m.default) }) },
+					{ path: '/explore/tags/:tag', name: 'explore-tag', component: DeckColumn, props: route => ({ component: () => import('../common/views/pages/explore.vue').then(m => m.default), tag: route.params.tag }) },
+					{ path: '/i/favorites', component: () => import('../common/views/deck/deck.favorites-column.vue').then(m => m.default) },
+					{ path: '/i/pages', component: DeckColumn, props: route => ({ component: () => import('../common/views/pages/pages.vue').then(m => m.default) }) },
+					{ path: '/i/lists', component: DeckColumn, props: route => ({ component: () => import('../common/views/pages/user-lists.vue').then(m => m.default) }) },
+					{ path: '/i/lists/:listId', component: DeckColumn, props: route => ({ component: () => import('../common/views/pages/user-list-editor.vue').then(m => m.default), listId: route.params.listId }) },
+					{ path: '/i/groups', component: DeckColumn, props: route => ({ component: () => import('../common/views/pages/user-groups.vue').then(m => m.default) }) },
+					{ path: '/i/groups/:groupId', component: DeckColumn, props: route => ({ component: () => import('../common/views/pages/user-group-editor.vue').then(m => m.default), groupId: route.params.groupId }) },
 				]}
 				: { path: '/', component: MkHome, children: [
 					{ path: '', name: 'index', component: MkHomeTimeline },
@@ -157,11 +163,17 @@ init(async (launch, os) => {
 					{ path: '/explore/tags/:tag', name: 'explore-tag', props: true, component: () => import('../common/views/pages/explore.vue').then(m => m.default) },
 					{ path: '/i/favorites', component: () => import('./views/home/favorites.vue').then(m => m.default) },
 					{ path: '/i/pages', component: () => import('../common/views/pages/pages.vue').then(m => m.default) },
+					{ path: '/i/lists', component: () => import('../common/views/pages/user-lists.vue').then(m => m.default) },
+					{ path: '/i/lists/:listId', props: true, component: () => import('../common/views/pages/user-list-editor.vue').then(m => m.default) },
+					{ path: '/i/groups', component: () => import('../common/views/pages/user-groups.vue').then(m => m.default) },
+					{ path: '/i/groups/:groupId', props: true, component: () => import('../common/views/pages/user-group-editor.vue').then(m => m.default) },
+					{ path: '/i/follow-requests', component: () => import('../common/views/pages/follow-requests.vue').then(m => m.default) },
 				]},
 			{ path: '/@:user/pages/:page', props: true, component: () => import('./views/pages/page.vue').then(m => m.default) },
 			{ path: '/@:user/pages/:pageName/view-source', props: true, component: () => import('./views/pages/page-editor.vue').then(m => m.default) },
 			{ path: '/i/pages/new', component: () => import('./views/pages/page-editor.vue').then(m => m.default) },
 			{ path: '/i/pages/edit/:pageId', props: true, component: () => import('./views/pages/page-editor.vue').then(m => m.default) },
+			{ path: '/i/messaging/group/:group', component: MkMessagingRoom },
 			{ path: '/i/messaging/:user', component: MkMessagingRoom },
 			{ path: '/i/drive', component: MkDrive },
 			{ path: '/i/drive/folder/:folder', component: MkDrive },
diff --git a/src/client/app/desktop/views/components/messaging-room-window.vue b/src/client/app/desktop/views/components/messaging-room-window.vue
index 00cd423cd2..6c1708b59f 100644
--- a/src/client/app/desktop/views/components/messaging-room-window.vue
+++ b/src/client/app/desktop/views/components/messaging-room-window.vue
@@ -1,7 +1,7 @@
 <template>
 <mk-window ref="window" width="500px" height="560px" :popout-url="popout" @closed="destroyDom">
-	<template #header><fa icon="comments"/> {{ $t('@.messaging') }}: <mk-user-name :user="user"/></template>
-	<x-messaging-room :user="user" :class="$style.content"/>
+	<template #header><fa icon="comments"/> {{ $t('@.messaging') }}: <mk-user-name v-if="user" :user="user"/><span v-else>{{ group.name }}</span></template>
+	<x-messaging-room :user="user" :group="group" :class="$style.content"/>
 </mk-window>
 </template>
 
@@ -16,10 +16,14 @@ export default Vue.extend({
 	components: {
 		XMessagingRoom: () => import('../../../common/views/components/messaging-room.vue').then(m => m.default)
 	},
-	props: ['user'],
+	props: ['user', 'group'],
 	computed: {
 		popout(): string {
-			return `${url}/i/messaging/${getAcct(this.user)}`;
+			if (this.user) {
+				return `${url}/i/messaging/${getAcct(this.user)}`;
+			} else if (this.group) {
+				return `${url}/i/messaging/group/${this.group.id}`;
+			}
 		}
 	}
 });
diff --git a/src/client/app/desktop/views/components/messaging-window.vue b/src/client/app/desktop/views/components/messaging-window.vue
index 1572c40669..7cec9484d6 100644
--- a/src/client/app/desktop/views/components/messaging-window.vue
+++ b/src/client/app/desktop/views/components/messaging-window.vue
@@ -1,7 +1,7 @@
 <template>
 <mk-window ref="window" width="500px" height="560px" @closed="destroyDom">
 	<template #header :class="$style.header"><fa icon="comments"/>{{ $t('@.messaging') }}</template>
-	<x-messaging :class="$style.content" @navigate="navigate"/>
+	<x-messaging :class="$style.content" @navigate="navigate" @navigateGroup="navigateGroup"/>
 </mk-window>
 </template>
 
@@ -20,6 +20,11 @@ export default Vue.extend({
 			this.$root.new(MkMessagingRoomWindow, {
 				user: user
 			});
+		},
+		navigateGroup(group) {
+			this.$root.new(MkMessagingRoomWindow, {
+				group: group
+			});
 		}
 	}
 });
diff --git a/src/client/app/desktop/views/components/received-follow-requests-window.vue b/src/client/app/desktop/views/components/received-follow-requests-window.vue
deleted file mode 100644
index f86b6b0d59..0000000000
--- a/src/client/app/desktop/views/components/received-follow-requests-window.vue
+++ /dev/null
@@ -1,70 +0,0 @@
-<template>
-<mk-window ref="window" is-modal width="450px" height="500px" @closed="destroyDom">
-	<template #header><fa :icon="['far', 'envelope']"/> {{ $t('title') }}</template>
-
-	<div class="slpqaxdoxhvglersgjukmvizkqbmbokc">
-		<div v-for="req in requests">
-			<router-link :key="req.id" :to="req.follower | userPage">
-				<mk-user-name :user="req.follower"/>
-			</router-link>
-			<span>
-				<a @click="accept(req.follower)">{{ $t('accept') }}</a>|<a @click="reject(req.follower)">{{ $t('reject') }}</a>
-			</span>
-		</div>
-	</div>
-</mk-window>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-import i18n from '../../../i18n';
-
-export default Vue.extend({
-	i18n: i18n('desktop/views/components/received-follow-requests-window.vue'),
-	data() {
-		return {
-			fetching: true,
-			requests: []
-		};
-	},
-	mounted() {
-		this.$root.api('following/requests/list').then(requests => {
-			this.fetching = false;
-			this.requests = requests;
-		});
-	},
-	methods: {
-		accept(user) {
-			this.$root.api('following/requests/accept', { userId: user.id }).then(() => {
-				this.requests = this.requests.filter(r => r.follower.id != user.id);
-			});
-		},
-		reject(user) {
-			this.$root.api('following/requests/reject', { userId: user.id }).then(() => {
-				this.requests = this.requests.filter(r => r.follower.id != user.id);
-			});
-		},
-		close() {
-			(this as any).$refs.window.close();
-		}
-	}
-});
-</script>
-
-<style lang="stylus" scoped>
-.slpqaxdoxhvglersgjukmvizkqbmbokc
-	padding 16px
-
-	> button
-		margin-bottom 16px
-
-	> div
-		display flex
-		padding 16px
-		border solid 1px var(--faceDivider)
-		border-radius 4px
-
-		> span
-			margin 0 0 0 auto
-
-</style>
diff --git a/src/client/app/desktop/views/components/ui.header.account.vue b/src/client/app/desktop/views/components/ui.header.account.vue
index 9b87e0c29f..c00c6b9c64 100644
--- a/src/client/app/desktop/views/components/ui.header.account.vue
+++ b/src/client/app/desktop/views/components/ui.header.account.vue
@@ -28,12 +28,19 @@
 						<i><fa icon="angle-right"/></i>
 					</router-link>
 				</li>
-				<li @click="list">
-					<p>
+				<li>
+					<router-link to="/i/lists">
 						<i><fa icon="list" fixed-width/></i>
 						<span>{{ $t('lists') }}</span>
 						<i><fa icon="angle-right"/></i>
-					</p>
+					</router-link>
+				</li>
+				<li>
+					<router-link to="/i/groups">
+						<i><fa :icon="faUsers" fixed-width/></i>
+						<span>{{ $t('groups') }}</span>
+						<i><fa icon="angle-right"/></i>
+					</router-link>
 				</li>
 				<li>
 					<router-link to="/i/pages">
@@ -42,12 +49,12 @@
 						<i><fa icon="angle-right"/></i>
 					</router-link>
 				</li>
-				<li @click="followRequests" v-if="($store.state.i.isLocked || $store.state.i.carefulBot)">
-					<p>
+				<li v-if="($store.state.i.isLocked || $store.state.i.carefulBot)">
+					<router-link to="/i/follow-requests">
 						<i><fa :icon="['far', 'envelope']" fixed-width/></i>
 						<span>{{ $t('follow-requests') }}<i v-if="$store.state.i.pendingReceivedFollowRequestsCount">{{ $store.state.i.pendingReceivedFollowRequestsCount }}</i></span>
 						<i><fa icon="angle-right"/></i>
-					</p>
+					</router-link>
 				</li>
 			</ul>
 			<ul>
@@ -96,12 +103,10 @@
 <script lang="ts">
 import Vue from 'vue';
 import i18n from '../../../i18n';
-import MkUserListsWindow from './user-lists-window.vue';
-import MkFollowRequestsWindow from './received-follow-requests-window.vue';
 // import MkSettingsWindow from './settings-window.vue';
 import MkDriveWindow from './drive-window.vue';
 import contains from '../../../common/scripts/contains';
-import { faHome, faColumns } from '@fortawesome/free-solid-svg-icons';
+import { faHome, faColumns, faUsers } from '@fortawesome/free-solid-svg-icons';
 import { faMoon, faSun, faStickyNote } from '@fortawesome/free-regular-svg-icons';
 
 export default Vue.extend({
@@ -109,7 +114,7 @@ export default Vue.extend({
 	data() {
 		return {
 			isOpen: false,
-			faHome, faColumns, faMoon, faSun, faStickyNote
+			faHome, faColumns, faMoon, faSun, faStickyNote, faUsers
 		};
 	},
 	computed: {
@@ -147,14 +152,6 @@ export default Vue.extend({
 			this.close();
 			this.$root.new(MkDriveWindow);
 		},
-		list() {
-			this.close();
-			this.$root.new(MkUserListsWindow);
-		},
-		followRequests() {
-			this.close();
-			this.$root.new(MkFollowRequestsWindow);
-		},
 		signout() {
 			this.$root.signout();
 		},
diff --git a/src/client/app/desktop/views/components/ui.sidebar.vue b/src/client/app/desktop/views/components/ui.sidebar.vue
index 1c01f127b9..d1ceec5198 100644
--- a/src/client/app/desktop/views/components/ui.sidebar.vue
+++ b/src/client/app/desktop/views/components/ui.sidebar.vue
@@ -72,8 +72,6 @@
 <script lang="ts">
 import Vue from 'vue';
 import i18n from '../../../i18n';
-import MkUserListsWindow from './user-lists-window.vue';
-import MkFollowRequestsWindow from './received-follow-requests-window.vue';
 import MkSettingsWindow from './settings-window.vue';
 import MkDriveWindow from './drive-window.vue';
 import MkMessagingWindow from './messaging-window.vue';
diff --git a/src/client/app/desktop/views/components/user-list-window.vue b/src/client/app/desktop/views/components/user-list-window.vue
deleted file mode 100644
index 6764579b20..0000000000
--- a/src/client/app/desktop/views/components/user-list-window.vue
+++ /dev/null
@@ -1,24 +0,0 @@
-<template>
-<mk-window ref="window" width="450px" height="500px" @closed="destroyDom">
-	<template #header><fa icon="list"/> {{ list.name }}</template>
-
-	<x-editor :list="list"/>
-</mk-window>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-import XEditor from '../../../common/views/components/user-list-editor.vue';
-
-export default Vue.extend({
-	components: {
-		XEditor
-	},
-
-	props: {
-		list: {
-			required: true
-		}
-	}
-});
-</script>
diff --git a/src/client/app/desktop/views/components/user-lists-window.vue b/src/client/app/desktop/views/components/user-lists-window.vue
deleted file mode 100644
index afea01d4a1..0000000000
--- a/src/client/app/desktop/views/components/user-lists-window.vue
+++ /dev/null
@@ -1,36 +0,0 @@
-<template>
-<mk-window ref="window" width="450px" height="500px" @closed="destroyDom">
-	<template #header><fa icon="list"/> {{ $t('title') }}</template>
-	<x-lists :class="$style.content" @choosen="choosen"/>
-</mk-window>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-import i18n from '../../../i18n';
-import MkUserListWindow from './user-list-window.vue';
-
-export default Vue.extend({
-	i18n: i18n('desktop/views/components/user-lists-window.vue'),
-	components: {
-		XLists: () => import('../../../common/views/components/user-lists.vue').then(m => m.default)
-	},
-	methods: {
-		close() {
-			(this as any).$refs.window.close();
-		},
-		choosen(list) {
-			this.$root.new(MkUserListWindow, {
-				list
-			});
-		}
-	}
-});
-</script>
-
-<style lang="stylus" module>
-.content
-	height 100%
-	overflow auto
-
-</style>
diff --git a/src/client/app/desktop/views/pages/messaging-room.vue b/src/client/app/desktop/views/pages/messaging-room.vue
index 376b402d30..c725074b7d 100644
--- a/src/client/app/desktop/views/pages/messaging-room.vue
+++ b/src/client/app/desktop/views/pages/messaging-room.vue
@@ -1,6 +1,6 @@
 <template>
 <div class="mk-messaging-room-page">
-	<x-messaging-room v-if="user" :user="user" :is-naked="true"/>
+	<x-messaging-room v-if="user || group" :user="user" :group="group" :is-naked="true"/>
 </div>
 </template>
 
@@ -19,7 +19,8 @@ export default Vue.extend({
 	data() {
 		return {
 			fetching: true,
-			user: null
+			user: null,
+			group: null
 		};
 	},
 	watch: {
@@ -47,14 +48,25 @@ export default Vue.extend({
 			Progress.start();
 			this.fetching = true;
 
-			this.$root.api('users/show', parseAcct(this.$route.params.user)).then(user => {
-				this.user = user;
-				this.fetching = false;
+			if (this.$route.params.user) {
+				this.$root.api('users/show', parseAcct(this.$route.params.user)).then(user => {
+					this.user = user;
+					this.fetching = false;
 
-				document.title = this.$t('@.messaging') + ': ' + getUserName(this.user);
+					document.title = this.$t('@.messaging') + ': ' + getUserName(this.user);
 
-				Progress.done();
-			});
+					Progress.done();
+				});
+			} else {
+				this.$root.api('users/groups/show', { groupId: this.$route.params.group }).then(group => {
+					this.group = group;
+					this.fetching = false;
+
+					document.title = this.$t('@.messaging') + ': ' + this.group.name;
+
+					Progress.done();
+				});
+			}
 		}
 	}
 });
diff --git a/src/client/app/desktop/views/widgets/messaging.vue b/src/client/app/desktop/views/widgets/messaging.vue
index 1e82ae3d3a..e94e745c19 100644
--- a/src/client/app/desktop/views/widgets/messaging.vue
+++ b/src/client/app/desktop/views/widgets/messaging.vue
@@ -4,7 +4,7 @@
 		<template #header><fa icon="comments"/>{{ $t('@.messaging') }}</template>
 		<template #func><button @click="add"><fa icon="plus"/></button></template>
 
-		<x-messaging ref="index" compact @navigate="navigate"/>
+		<x-messaging ref="index" compact @navigate="navigate" @navigateGroup="navigateGroup"/>
 	</ui-container>
 </div>
 </template>
@@ -31,6 +31,11 @@ export default define({
 				user: user
 			});
 		},
+		navigateGroup(group) {
+			this.$root.new(MkMessagingRoomWindow, {
+				group: group
+			});
+		},
 		add() {
 			this.$root.new(MkMessagingWindow);
 		},
-- 
cgit v1.2.3-freya