Allow external actions to users list

+ Created fix

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>

settings/src/components/userList.vue

@@ -119,7 +119,8 @@
 		</form>
 
 		<user-row v-for="(user, key) in filteredUsers" :user="user" :key="key" :settings="settings" :showConfig="showConfig"
-				  :groups="groups" :subAdminsGroups="subAdminsGroups" :quotaOptions="quotaOptions" :languages="languages" />
+				  :groups="groups" :subAdminsGroups="subAdminsGroups" :quotaOptions="quotaOptions" :languages="languages"
+				  :externalActions="externalActions" />
 		<infinite-loading @infinite="infiniteHandler" ref="infiniteLoading">
 			<div slot="spinner"><div class="users-icon-loading icon-loading"></div></div>
 			<div slot="no-more"><div class="users-list-end"></div></div>
@@ -141,7 +142,7 @@ import Vue from 'vue';
 
 export default {
 	name: 'userList',
-	props: ['users', 'showConfig', 'selectedGroup'],
+	props: ['users', 'showConfig', 'selectedGroup', 'externalActions'],
 	components: {
 		userRow,
 		Multiselect,

settings/src/components/userList/userRow.vue

@@ -22,7 +22,7 @@
 
 <template>
 	<!-- Obfuscated user: Logged in user does not have permissions to see all of the data -->
-	<div class="row" v-if="Object.keys(user).length ===1">
+	<div class="row" v-if="Object.keys(user).length ===1" :data-id="user.id">
 		<div class="avatar" :class="{'icon-loading-small': loading.delete || loading.disable}">
 			<img alt="" width="32" height="32" :src="generateAvatar(user.id, 32)"
 				 :srcset="generateAvatar(user.id, 64)+' 2x, '+generateAvatar(user.id, 128)+' 4x'"
@@ -33,7 +33,7 @@
 	</div>
 
 	<!-- User full data -->
-	<div class="row" v-else :class="{'disabled': loading.delete || loading.disable}">
+	<div class="row" v-else :class="{'disabled': loading.delete || loading.disable}" :data-id="user.id">
 		<div class="avatar" :class="{'icon-loading-small': loading.delete || loading.disable}">
 			<img alt="" width="32" height="32" :src="generateAvatar(user.id, 32)"
 				 :srcset="generateAvatar(user.id, 64)+' 2x, '+generateAvatar(user.id, 128)+' 4x'"
@@ -133,7 +133,7 @@ Vue.use(VTooltip)
 
 export default {
 	name: 'userRow',
-	props: ['user', 'settings', 'groups', 'subAdminsGroups', 'quotaOptions', 'showConfig', 'languages'],
+	props: ['user', 'settings', 'groups', 'subAdminsGroups', 'quotaOptions', 'showConfig', 'languages', 'externalActions'],
 	components: {
 		popoverMenu,
 		Multiselect
@@ -184,7 +184,7 @@ export default {
 					action: this.sendWelcomeMail
 				})
 			}
-			return actions;
+			return actions.concat(this.externalActions);
 		},
 
 		/* GROUPS MANAGEMENT */
@@ -538,6 +538,7 @@ export default {
 					this.loading.all = false;
 				});
 		}
+
 	}
 }
 </script>

settings/src/views/Users.vue

@@ -52,7 +52,7 @@
 				</div>
 			</template>
 		</app-navigation>
-		<user-list :users="users" :showConfig="showConfig" :selectedGroup="selectedGroup" />
+		<user-list :users="users" :showConfig="showConfig" :selectedGroup="selectedGroup" :externalActions="externalActions" />
 	</div>
 </template>
 
@@ -83,12 +83,24 @@ export default {
 		});
 		this.$store.dispatch('getPasswordPolicyMinLength');
 	},
+	created() {
+		// init the OCA.Settings.UserList object
+		// and add the registerAction method
+		Object.assign(OCA, {
+			Settings: {
+				UserList: {
+					registerAction: this.registerAction
+				}
+			}
+		});
+	},
 	data() {
 		return {
 			// default quota is set to unlimited
 			unlimitedQuota: {id: 'none', label: t('settings', 'Unlimited')},
 			// temporary value used for multiselect change
 			selectedQuota: false,
+			externalActions: [],
 			showConfig: {
 				showStoragePath: false,
 				showUserBackend: false,
@@ -171,6 +183,22 @@ export default {
 			// if no valid do not change
 			return false;
 		},
+
+		/**
+		 * Register a new action for the user menu
+		 * 
+		 * @param {string} icon the icon class
+		 * @param {string} text the text to display
+		 * @param {function} action the function to run
+		 */
+		registerAction(icon, text, action) {
+			this.externalActions.push({
+				icon: icon,
+				text: text,
+				action: action
+			});
+			return this.externalActions;
+		}
 	},
 	computed: {
 		users() {