From b42f71a39af1b310cd256fafabae862159910448 Mon Sep 17 00:00:00 2001
From: kolaente <konrad@kola-entertainments.de>
Date: Tue, 18 Sep 2018 18:49:44 +0200
Subject: [PATCH] Moved handling of user sharing to a component

---
 src/components/lists/EditList.vue | 148 ++----------------------
 src/components/sharing/user.vue   | 184 ++++++++++++++++++++++++++++++
 2 files changed, 192 insertions(+), 140 deletions(-)
 create mode 100644 src/components/sharing/user.vue

diff --git a/src/components/lists/EditList.vue b/src/components/lists/EditList.vue
index 7ff6134e2..d6af8e99d 100644
--- a/src/components/lists/EditList.vue
+++ b/src/components/lists/EditList.vue
@@ -41,82 +41,7 @@
 			</div>
 		</div>
 
-		<div class="card">
-
-			<header class="card-header">
-				<p class="card-header-title">
-					Users with access to this list
-				</p>
-			</header>
-			<div class="card-content content users-list">
-				<form @submit.prevent="addUser()" class="add-user-form" v-if="userIsAdmin">
-					<div class="field is-grouped">
-						<p class="control has-icons-left is-expanded" v-bind:class="{ 'is-loading': loading}">
-							<input class="input" v-bind:class="{ 'disabled': loading}" v-model.number="newUser.user_id" type="text" placeholder="Add a new user...">
-							<span class="icon is-small is-left">
-								<icon icon="user"/>
-							</span>
-						</p>
-						<p class="control">
-							<button type="submit" class="button is-success">
-								<span class="icon is-small">
-									<icon icon="plus"/>
-								</span>
-								Add
-							</button>
-						</p>
-					</div>
-				</form>
-				<table class="table is-striped is-hoverable is-fullwidth">
-					<tbody>
-					<tr v-for="u in listUsers" :key="u.id">
-						<td>{{u.username}}</td>
-						<td>
-							<template v-if="u.id === user.infos.id">
-								<b class="is-success">You</b>
-							</template>
-						</td>
-						<td class="type">
-							<template v-if="u.right === 2">
-									<span class="icon is-small">
-										<icon icon="lock"/>
-									</span>
-								Admin
-							</template>
-							<template v-else-if="u.right === 1">
-									<span class="icon is-small">
-										<icon icon="pen"/>
-									</span>
-								Write
-							</template>
-							<template v-else>
-									<span class="icon is-small">
-										<icon icon="users"/>
-									</span>
-								Read-only
-							</template>
-						</td>
-						<td class="actions" v-if="userIsAdmin">
-							<button @click="toggleUserType(u.id, (u.right === 2))" class="button buttonright is-primary" v-if="u.id !== user.infos.id">
-								Make
-								<template v-if="u.right === 2">
-									Member
-								</template>
-								<template v-else>
-									Admin
-								</template>
-							</button>
-							<button @click="userToDelete = u.id; showUserDeleteModal = true" class="button is-danger" v-if="u.id !== user.infos.id">
-									<span class="icon is-small">
-										<icon icon="trash-alt"/>
-									</span>
-							</button>
-						</td>
-					</tr>
-					</tbody>
-				</table>
-			</div>
-		</div>
+		<manageusers :id="list.id" type="list" :userIsAdmin="userIsAdmin" />
 
 		<div class="card">
 
@@ -202,16 +127,6 @@
 				<br/>This includes all tasks and <b>CANNOT BE UNDONE!</b></p>
 		</modal>
 
-		<!-- User delete modal -->
-		<modal
-				v-if="showUserDeleteModal"
-				@close="showUserDeleteModal = false"
-				v-on:submit="deleteUser()">
-			<span slot="header">Remove a user from the list</span>
-			<p slot="text">Are you sure you want to remove this user from the list?<br/>
-				<b>This CANNOT BE UNDONE!</b></p>
-		</modal>
-
 		<!-- Team delete modal -->
 		<modal
 				v-if="showTeamDeleteModal"
@@ -228,7 +143,8 @@
     import auth from '../../auth'
     import router from '../../router'
     import {HTTP} from '../../http-common'
-    import message from '../../message'
+	import message from '../../message'
+	import manageusers from '../sharing/user'
 
     export default {
         name: "EditList",
@@ -241,22 +157,22 @@
 				user: auth.user,
 				userIsAdmin: false,
 
-				listUsers: [],
-				newUser: {user_id: 0},
-				showUserDeleteModal: false,
-				userToDelete: 0,
-
 				listTeams: [],
 				newTeam: {team_id: 0},
 				showTeamDeleteModal: false,
 				teamToDelete: 0,
             }
         },
+		components: {
+			manageusers
+		},
         beforeMount() {
             // Check if the user is already logged in, if so, redirect him to the homepage
             if (!auth.user.authenticated) {
                 router.push({name: 'home'})
             }
+
+            this.list.id = this.$route.params.id
         },
         created() {
             this.loadList()
@@ -275,7 +191,6 @@
 						if (response.data.owner.id === this.user.infos.id) {
 							this.userIsAdmin = true
 						}
-						this.loadUsers()
 						this.loadTeams()
                         this.loading = false
                     })
@@ -313,53 +228,6 @@
                         this.handleError(e)
                     })
             },
-			loadUsers() {
-				// Get all users with access to the list
-				HTTP.get(`lists/` + this.$route.params.id + `/users`, {headers: {'Authorization': 'Bearer ' + localStorage.getItem('token')}})
-					.then(response => {
-						response.data.push(this.list.owner)
-						this.$set(this, 'listUsers', response.data)
-						this.loading = false
-					})
-					.catch(e => {
-						this.handleError(e)
-					})
-			},
-			deleteUser() {
-				HTTP.delete(`lists/` + this.$route.params.id + `/users/` + this.userToDelete, {headers: {'Authorization': 'Bearer ' + localStorage.getItem('token')}})
-					.then(() => {
-						this.showUserDeleteModal = false;
-						this.handleSuccess({message: 'The user was successfully deleted from the list.'})
-						this.loadUsers()
-					})
-					.catch(e => {
-						this.handleError(e)
-					})
-			},
-			addUser(admin) {
-				if(admin === null) {
-					admin = false
-				}
-				this.newUser.right = 0
-				if (admin) {
-					this.newUser.right = 2
-				}
-
-				HTTP.put(`lists/` + this.$route.params.id + `/users`, this.newUser, {headers: {'Authorization': 'Bearer ' + localStorage.getItem('token')}})
-					.then(() => {
-						this.loadUsers()
-						this.handleSuccess({message: 'The user was successfully added.'})
-					})
-					.catch(e => {
-						this.handleError(e)
-					})
-			},
-			toggleUserType(userid, current) {
-				this.userToDelete = userid
-				this.newUser.user_id = userid
-				this.deleteUser()
-				this.addUser(!current)
-			},
 			loadTeams() {
 				HTTP.get(`lists/` + this.$route.params.id + `/teams`, {headers: {'Authorization': 'Bearer ' + localStorage.getItem('token')}})
 					.then(response => {
diff --git a/src/components/sharing/user.vue b/src/components/sharing/user.vue
new file mode 100644
index 000000000..6f21f1a17
--- /dev/null
+++ b/src/components/sharing/user.vue
@@ -0,0 +1,184 @@
+<template>
+	<div class="card">
+
+		<header class="card-header">
+			<p class="card-header-title">
+				Users with access to this {{type}}
+			</p>
+		</header>
+		<div class="card-content content users-list">
+			<form @submit.prevent="addUser()" class="add-user-form" v-if="userIsAdmin">
+				<div class="field is-grouped">
+					<p class="control has-icons-left is-expanded" v-bind:class="{ 'is-loading': loading}">
+						<input class="input" v-bind:class="{ 'disabled': loading}" v-model.number="newUser.user_id" type="text" placeholder="Add a new user...">
+						<span class="icon is-small is-left">
+								<icon icon="user"/>
+							</span>
+					</p>
+					<p class="control">
+						<button type="submit" class="button is-success">
+								<span class="icon is-small">
+									<icon icon="plus"/>
+								</span>
+							Add
+						</button>
+					</p>
+				</div>
+			</form>
+			<table class="table is-striped is-hoverable is-fullwidth">
+				<tbody>
+				<tr v-for="u in users" :key="u.id">
+					<td>{{u.username}}</td>
+					<td>
+						<template v-if="u.id === currentUser.id">
+							<b class="is-success">You</b>
+						</template>
+					</td>
+					<td class="type">
+						<template v-if="u.right === 2">
+									<span class="icon is-small">
+										<icon icon="lock"/>
+									</span>
+							Admin
+						</template>
+						<template v-else-if="u.right === 1">
+									<span class="icon is-small">
+										<icon icon="pen"/>
+									</span>
+							Write
+						</template>
+						<template v-else>
+									<span class="icon is-small">
+										<icon icon="users"/>
+									</span>
+							Read-only
+						</template>
+					</td>
+					<td class="actions" v-if="userIsAdmin">
+						<button @click="toggleUserType(u.id, (u.right === 2))" class="button buttonright is-primary" v-if="u.id !== currentUser.id">
+							Make
+							<template v-if="u.right === 2">
+								Member
+							</template>
+							<template v-else>
+								Admin
+							</template>
+						</button>
+						<button @click="userToDelete = u.id; showUserDeleteModal = true" class="button is-danger" v-if="u.id !== currentUser.id">
+									<span class="icon is-small">
+										<icon icon="trash-alt"/>
+									</span>
+						</button>
+					</td>
+				</tr>
+				</tbody>
+			</table>
+		</div>
+
+		<modal
+				v-if="showUserDeleteModal"
+				@close="showUserDeleteModal = false"
+				v-on:submit="deleteUser()">
+			<span slot="header">Remove a user from the {{typeString}}</span>
+			<p slot="text">Are you sure you want to remove this user from the {{typeString}}?<br/>
+				<b>This CANNOT BE UNDONE!</b></p>
+		</modal>
+	</div>
+</template>
+
+<script>
+	import {HTTP} from '../../http-common'
+	import auth from '../../auth'
+	import message from '../../message'
+
+	export default {
+		name: 'user',
+		props: {
+			type: '',
+			id: 0,
+			userIsAdmin: false,
+		},
+		data() {
+			return {
+				loading: false,
+				currentUser: auth.user.infos,
+				typeString: '',
+				showUserDeleteModal: false,
+				users: [],
+				newUser: {user_id: 0},
+				userToDelete: 0,
+			}
+		},
+		created() {
+			if (this.type === 'list') {
+				this.typeString = `list`
+			} else if (this.type === 'namespace') {
+				this.typeString = `namespace`
+			} else {
+				throw new Error('Unknown type: ' + this.type)
+			}
+
+			this.loadUsers()
+		},
+		methods: {
+			loadUsers() {
+				HTTP.get(this.typeString + `s/` + this.id + `/users`, {headers: {'Authorization': 'Bearer ' + localStorage.getItem('token')}})
+					.then(response => {
+						//response.data.push(this.list.owner)
+						this.$set(this, 'users', response.data)
+						this.loading = false
+					})
+					.catch(e => {
+						this.handleError(e)
+					})
+			},
+			deleteUser() {
+				HTTP.delete(this.typeString + `s/` + this.id + `/users/` + this.userToDelete, {headers: {'Authorization': 'Bearer ' + localStorage.getItem('token')}})
+					.then(() => {
+						this.showUserDeleteModal = false;
+						this.handleSuccess({message: 'The user was successfully deleted from the ' + this.typeString + '.'})
+						this.loadUsers()
+					})
+					.catch(e => {
+						this.handleError(e)
+					})
+			},
+			addUser(admin) {
+				if(admin === null) {
+					admin = false
+				}
+				this.newUser.right = 0
+				if (admin) {
+					this.newUser.right = 2
+				}
+
+				HTTP.put(this.typeString + `s/` + this.id + `/users`, this.newUser, {headers: {'Authorization': 'Bearer ' + localStorage.getItem('token')}})
+					.then(() => {
+						this.loadUsers()
+						this.handleSuccess({message: 'The user was successfully added.'})
+					})
+					.catch(e => {
+						this.handleError(e)
+					})
+			},
+			toggleUserType(userid, current) {
+				this.userToDelete = userid
+				this.newUser.user_id = userid
+				this.deleteUser()
+				this.addUser(!current)
+			},
+			handleError(e) {
+				this.loading = false
+				message.error(e, this)
+			},
+			handleSuccess(e) {
+				this.loading = false
+				message.success(e, this)
+			}
+		},
+	}
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file