From 18f777c1bdce08147a4a1f3242ce737ff5879ac4 Mon Sep 17 00:00:00 2001
From: Greta Doci <gretadoci@gmail.com>
Date: Fri, 8 Nov 2019 16:23:54 +0100
Subject: [PATCH] add readmode rows

Signed-off-by: Greta Doci <gretadoci@gmail.com>
---
 apps/settings/css/settings.scss               |   5 +-
 .../src/components/UserList/UserRow.vue       |  88 ++++++----
 .../src/components/UserList/UserRowSimple.vue | 164 ++++++++++++++++++
 3 files changed, 224 insertions(+), 33 deletions(-)
 create mode 100644 apps/settings/src/components/UserList/UserRowSimple.vue

diff --git a/apps/settings/css/settings.scss b/apps/settings/css/settings.scss
index 9de2ec8cbde77..526384e8f43ed 100644
--- a/apps/settings/css/settings.scss
+++ b/apps/settings/css/settings.scss
@@ -1343,7 +1343,7 @@ doesnotexist:-o-prefocus, .strengthify-wrapper {
 /* USERS LIST -------------------------------------------------------------- */
 #body-settings {
 	$grid-row-height: 60px;
-	$grid-col-min-width: 210px;
+	$grid-col-min-width: 150px;
 	#app-content.user-list-grid {
 		display: grid;
 		grid-auto-columns: 1fr;
@@ -1463,7 +1463,7 @@ doesnotexist:-o-prefocus, .strengthify-wrapper {
 			> div,
 			> form {
 				grid-row: 1;
-				display: block;
+				display: inline-flex;
 				align-items: center;
 				color: var(--color-text-lighter);
 				position: relative;
@@ -1538,6 +1538,7 @@ doesnotexist:-o-prefocus, .strengthify-wrapper {
 					}
 					.toggleUserActions {
 						position: relative;
+						display: flex;
 						.icon-more {
 							width: 44px;
 							height: 44px;
diff --git a/apps/settings/src/components/UserList/UserRow.vue b/apps/settings/src/components/UserList/UserRow.vue
index fdc3312b086c4..23ddb5cf064bd 100644
--- a/apps/settings/src/components/UserList/UserRow.vue
+++ b/apps/settings/src/components/UserList/UserRow.vue
@@ -42,6 +42,26 @@
 	</div>
 
 	<!-- User full data -->
+	<UserRowSimple
+		v-else-if="!editing"
+		:generate-avatar="generateAvatar"
+		:loading="loading"
+		:show-config="showConfig"
+		:user="user"
+		:user-groups="userGroups"
+		:user-sub-admins-groups="userSubAdminsGroups"
+		:used-quota="usedQuota"
+		:user-language="userLanguage"
+		:user-backend="userBackend"
+		:user-last-login="userLastLogin"
+		:user-actions="userActions"
+		:opened-menu="openedMenu"
+		:feedback-message="feedbackMessage"
+		:sub-admins-groups="subAdminsGroups"
+		:settings="settings"
+		@hideMenu="hideMenu"
+		@toggleMenu="toggleMenu"
+		@edit="editing = true" />
 	<div v-else
 		class="row"
 		:class="{'disabled': loading.delete || loading.disable}"
@@ -55,33 +75,29 @@
 				:srcset="generateAvatar(user.id, 64)+' 2x, '+generateAvatar(user.id, 128)+' 4x'">
 		</div>
 		<!-- dirty hack to ellipsis on two lines -->
-		<div class="name">
-			{{ user.id }}
-			<div class="displayName">
-				<form v-if="false"
-					class="displayName"
-					:class="{'icon-loading-small': loading.displayName}"
-					@submit.prevent="updateDisplayName">
-					<template v-if="user.backendCapabilities.setDisplayName">
-						<input
-							:id="'displayName'+user.id+rand"
-							ref="displayName"
-							type="text"
-							:disabled="loading.displayName||loading.all"
-							:value="user.displayname"
-							autocomplete="new-password"
-							autocorrect="off"
-							autocapitalize="off"
-							spellcheck="false">
-						<input
-							type="submit"
-							class="icon-confirm"
-							value="">
-					</template>
-					<div v-else v-tooltip.auto="t('settings', 'The backend does not support changing the display name')" class="name" />
-				</form>
-				{{ user.displayname }}
-			</div>
+		<div class="displayName">
+			<form
+				class="displayName"
+				:class="{'icon-loading-small': loading.displayName}"
+				@submit.prevent="updateDisplayName">
+				<template v-if="user.backendCapabilities.setDisplayName">
+					<input v-if="user.backendCapabilities.setDisplayName"
+						:id="'displayName'+user.id+rand"
+						ref="displayName"
+						type="text"
+						:disabled="loading.displayName||loading.all"
+						:value="user.displayname"
+						autocomplete="new-password"
+						autocorrect="off"
+						autocapitalize="off"
+						spellcheck="false">
+					<input v-if="user.backendCapabilities.setDisplayName"
+						type="submit"
+						class="icon-confirm"
+						value="">
+				</template>
+				<div v-else v-tooltip.auto="t('settings', 'The backend does not support changing the display name')" class="name" />
+			</form>
 		</div>
 		<form v-if="settings.canChangePassword && user.backendCapabilities.setPassword"
 			class="password"
@@ -197,6 +213,11 @@
 		</div>
 		<div class="userActions">
 			<div v-if="OC.currentUser !== user.id && user.id !== 'admin' && !loading.all" class="toggleUserActions">
+				<Actions>
+					<ActionButton icon="icon-checkmark" @click="editing = false">
+						{{ t('settings', 'Done') }}
+					</ActionButton>
+				</Actions>
 				<div v-click-outside="hideMenu" class="icon-more" @click="toggleMenu" />
 				<div class="popovermenu" :class="{ 'open': openedMenu }">
 					<PopoverMenu :menu="userActions" />
@@ -214,14 +235,18 @@
 import ClickOutside from 'vue-click-outside'
 import Vue from 'vue'
 import VTooltip from 'v-tooltip'
-import { PopoverMenu, Multiselect } from 'nextcloud-vue'
+import { PopoverMenu, Multiselect, Actions, ActionButton } from 'nextcloud-vue'
+import UserRowSimple from './UserRowSimple'
 
 Vue.use(VTooltip)
 
 export default {
 	name: 'UserRow',
 	components: {
+		UserRowSimple,
 		PopoverMenu,
+		Actions,
+		ActionButton,
 		Multiselect
 	},
 	directives: {
@@ -266,6 +291,7 @@ export default {
 			rand: parseInt(Math.random() * 1000),
 			openedMenu: false,
 			feedbackMessage: '',
+			editing: false,
 			loading: {
 				all: false,
 				displayName: false,
@@ -552,9 +578,9 @@ export default {
 		},
 
 		/**
-		* Create a new group and add user to it
-		*
-		* @param {string} gid Group id
+		 * Create a new group and add user to it
+		 *
+		 * @param {string} gid Group id
 		*/
 		async createGroup(gid) {
 			this.loading = { groups: true, subadmins: true }
diff --git a/apps/settings/src/components/UserList/UserRowSimple.vue b/apps/settings/src/components/UserList/UserRowSimple.vue
new file mode 100644
index 0000000000000..87c3b0f49246d
--- /dev/null
+++ b/apps/settings/src/components/UserList/UserRowSimple.vue
@@ -0,0 +1,164 @@
+<template>
+	<div
+		class="row"
+		:class="{'disabled': loading.delete || loading.disable}"
+		:data-id="user.id">
+		<div class="avatar" :class="{'icon-loading-small': loading.delete || loading.disable || loading.wipe}">
+			<img v-if="!loading.delete && !loading.disable && !loading.wipe"
+				alt=""
+				width="32"
+				height="32"
+				:src="generateAvatar(user.id, 32)"
+				:srcset="generateAvatar(user.id, 64)+' 2x, '+generateAvatar(user.id, 128)+' 4x'">
+		</div>
+		<!-- dirty hack to ellipsis on two lines -->
+		<div class="name">
+			{{ user.id }}
+			<div class="displayName">
+				{{ user.displayname }}
+			</div>
+		</div>
+		<div />
+		<div class="mailAddress">
+			{{ user.email }}
+		</div>
+		<div class="groups">
+			{{ userGroupsLabels }}
+		</div>
+		<div v-if="subAdminsGroups.length>0 && settings.isAdmin" class="subAdminsGroups">
+			{{ userSubAdminsGroupsLabels }}
+		</div>
+		<div class="quota">
+			<progress class="quota-user-progress"
+				:class="{'warn':usedQuota>80}"
+				:value="usedQuota"
+				max="100" />
+		</div>
+		<div v-if="showConfig.showLanguages" class="languages">
+			{{ userLanguage.name }}
+		</div>
+		<div v-if="showConfig.showStoragePath" class="storageLocation">
+			{{ user.storageLocation }}
+		</div>
+		<div v-if="showConfig.showUserBackend" class="userBackend">
+			{{ user.backend }}
+		</div>
+		<div v-if="showConfig.showLastLogin" class="userLastLogin">
+			{{ user.lastLogin>0 ? OC.Util.relativeModifiedDate(user.lastLogin) : t('settings','Never') }}
+		</div>
+		<div class="userActions">
+			<div v-if="OC.currentUser !== user.id && user.id !== 'admin' && !loading.all" class="toggleUserActions">
+				<Actions>
+					<ActionButton icon="icon-rename" @click="$emit('edit')">
+						{{ t('settings', 'Edit User') }}
+					</ActionButton>
+				</Actions>
+				<div v-click-outside="hideMenu" class="icon-more" @click="$emit('toggleMenu')" />
+				<div class="popovermenu" :class="{ 'open': openedMenu }">
+					<PopoverMenu :menu="userActions" />
+				</div>
+			</div>
+			<div class="feedback" :style="{opacity: feedbackMessage !== '' ? 1 : 0}">
+				<div class="icon-checkmark" />
+				{{ feedbackMessage }}
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+import { PopoverMenu, Actions, ActionButton } from 'nextcloud-vue'
+import ClickOutside from 'vue-click-outside'
+
+export default {
+	name: 'UserRowSimple',
+	components: {
+		PopoverMenu,
+		ActionButton,
+		Actions
+	},
+	directives: {
+		ClickOutside
+	},
+	props: {
+		user: {
+			type: Object,
+			required: true
+		},
+		loading: {
+			type: Object,
+			required: true
+		},
+		generateAvatar: {
+			type: Function,
+			required: true
+		},
+		showConfig: {
+			type: Object,
+			required: true
+		},
+		userGroups: {
+			type: Array,
+			required: true
+		},
+		userSubAdminsGroups: {
+			type: Array,
+			required: true
+		},
+		userLanguage: {
+			type: Object,
+			required: true
+		},
+		usedQuota: {
+			type: Number,
+			required: true
+		},
+		userLastLogin: {
+			type: Object,
+			required: true
+		},
+		userActions: {
+			type: Array,
+			required: true
+		},
+		openedMenu: {
+			type: Boolean,
+			required: true
+		},
+		feedbackMessage: {
+			type: String,
+			required: true
+		},
+		subAdminsGroups: {
+			type: Array,
+			required: true
+		},
+		settings: {
+			type: Object,
+			required: true
+		}
+	},
+	computed: {
+		userGroupsLabels() {
+			return this.userGroups
+				.map((groupObject) => groupObject.name)
+				.join(', ')
+		},
+		userSubAdminsGroupsLabels() {
+			return this.userSubAdminsGroups
+				.map((groupObject) => groupObject.name)
+				.join(', ')
+		}
+
+	},
+	methods: {
+		hideMenu() {
+			this.$emit('hideMenu')
+		}
+	}
+}
+</script>
+
+<style scoped>
+
+</style>