add close button

Signed-off-by: GretaD <gretadoci@gmail.com>

apps/settings/src/components/UserList.vue

@@ -152,6 +152,13 @@
 					class="button primary icon-checkmark-white has-tooltip"
 					type="submit"
 					value="">
+				<div class="closeButton">
+					<Actions>
+						<ActionButton icon="icon-close" @click="onClose">
+							{{ t('settings', 'Close') }}
+						</ActionButton>
+					</Actions>
+				</div>
 			</div>
 		</form>
 		<div id="grid-header"
@@ -235,17 +242,17 @@
 
 <script>
 import userRow from './UserList/UserRow'
-import { Multiselect } from 'nextcloud-vue'
+import { Multiselect, Actions, ActionButton } from 'nextcloud-vue'
 import InfiniteLoading from 'vue-infinite-loading'
 import Vue from 'vue'
 
 const unlimitedQuota = {
 	id: 'none',
-	label: t('settings', 'Unlimited'),
+	label: t('settings', 'Unlimited')
 }
 const defaultQuota = {
 	id: 'default',
-	label: t('settings', 'Default quota'),
+	label: t('settings', 'Default quota')
 }
 const newUser = {
 	id: '',
@@ -257,8 +264,8 @@ const newUser = {
 	quota: defaultQuota,
 	language: {
 		code: 'en',
-		name: t('settings', 'Default language'),
-	},
+		name: t('settings', 'Default language')
+	}
 }
 
 export default {
@@ -267,24 +274,26 @@ export default {
 		userRow,
 		Multiselect,
 		InfiniteLoading,
+		Actions,
+		ActionButton
 	},
 	props: {
 		users: {
 			type: Array,
-			default: () => [],
+			default: () => []
 		},
 		showConfig: {
 			type: Object,
-			required: true,
+			required: true
 		},
 		selectedGroup: {
 			type: String,
-			default: null,
+			default: null
 		},
 		externalActions: {
 			type: Array,
-			default: () => [],
-		},
+			default: () => []
+		}
 	},
 	data() {
 		return {
@@ -292,11 +301,11 @@ export default {
 			defaultQuota,
 			loading: {
 				all: false,
-				groups: false,
+				groups: false
 			},
 			scrolled: false,
 			searchQuery: '',
-			newUser: Object.assign({}, newUser),
+			newUser: Object.assign({}, newUser)
 		}
 	},
 	computed: {
@@ -335,9 +344,9 @@ export default {
 		},
 		quotaOptions() {
 			// convert the preset array into objects
-			const quotaPreset = this.settings.quotaPreset.reduce((acc, cur) => acc.concat({
+			let quotaPreset = this.settings.quotaPreset.reduce((acc, cur) => acc.concat({
 				id: cur,
-				label: cur,
+				label: cur
 			}), [])
 			// add default presets
 			quotaPreset.unshift(this.unlimitedQuota)
@@ -362,14 +371,14 @@ export default {
 			return [
 				{
 					label: t('settings', 'Common languages'),
-					languages: this.settings.languages.commonlanguages,
+					languages: this.settings.languages.commonlanguages
 				},
 				{
 					label: t('settings', 'All languages'),
-					languages: this.settings.languages.languages,
-				},
+					languages: this.settings.languages.languages
+				}
 			]
-		},
+		}
 	},
 	watch: {
 		// watch url change and group select
@@ -393,7 +402,7 @@ export default {
 			} else if (val === 1 && old === 0) {
 				this.$refs.infiniteLoading.stateChanger.loaded()
 			}
-		},
+		}
 	},
 	mounted() {
 		if (!this.settings.canChangePassword) {
@@ -428,7 +437,7 @@ export default {
 		 */
 		validateQuota(quota) {
 			// only used for new presets sent through @Tag
-			const validQuota = OC.Util.computerFileSize(quota)
+			let validQuota = OC.Util.computerFileSize(quota)
 			if (validQuota !== null && validQuota >= 0) {
 				// unify format output
 				quota = OC.Util.humanFileSize(OC.Util.computerFileSize(quota))
@@ -445,7 +454,7 @@ export default {
 				offset: this.usersOffset,
 				limit: this.usersLimit,
 				group: this.selectedGroup !== 'disabled' ? this.selectedGroup : '',
-				search: this.searchQuery,
+				search: this.searchQuery
 			})
 				.then((response) => {
 					response ? $state.loaded() : $state.complete()
@@ -493,7 +502,7 @@ export default {
 				groups: this.newUser.groups.map(group => group.id),
 				subadmin: this.newUser.subAdminsGroups.map(group => group.id),
 				quota: this.newUser.quota.id,
-				language: this.newUser.language.code,
+				language: this.newUser.language.code
 			})
 				.then(() => {
 					this.resetForm()
@@ -516,7 +525,7 @@ export default {
 		setNewUserDefaultGroup(value) {
 			if (value && value.length > 0) {
 				// setting new user default group to the current selected one
-				const currentGroup = this.groups.find(group => group.id === value)
+				let currentGroup = this.groups.find(group => group.id === value)
 				if (currentGroup) {
 					this.newUser.groups = [currentGroup]
 					return
@@ -560,6 +569,9 @@ export default {
 				this.$refs.infiniteLoading.stateChanger.reset()
 			}
 		},
-	},
+		onClose() {
+			this.showConfig.showNewUserForm = false
+		}
+	}
 }
 </script>