From fc19a07a400fb3fc8456a32eb8ccf5d54af3c70c Mon Sep 17 00:00:00 2001
From: zak39 <fotia.baptiste@hotmai.com>
Date: Wed, 13 Nov 2024 16:03:15 +0100
Subject: [PATCH] style(js,vue): Fix linter errors

---
 src/AlertRemoveGroup.vue                   | 102 ++++++------
 src/GroupDetails.vue                       |  64 ++++----
 src/GroupMenuItem.vue                      |  23 ++-
 src/LoadingUsers.vue                       |  64 ++++----
 src/RemoveSpace.vue                        |  84 +++++-----
 src/SelectConnectedGroups.vue              | 137 ++++++++--------
 src/SelectUsers.vue                        | 173 ++++++++++-----------
 src/SpaceDetails.vue                       |   2 -
 src/SpaceMenuItem.vue                      |   3 +-
 src/SpaceTable.vue                         |   1 -
 src/services/groupfoldersService.js        |   2 +-
 src/services/spaceService.js               |  16 +-
 src/store/actions.js                       |  56 ++++---
 src/store/getters.js                       |  16 +-
 src/store/index.js                         |   4 +-
 src/store/mutations.js                     |  26 ++--
 src/tests/unit/groupfoldersService.test.js |   3 +-
 17 files changed, 381 insertions(+), 395 deletions(-)

diff --git a/src/AlertRemoveGroup.vue b/src/AlertRemoveGroup.vue
index 2dd32fbe..6c582cb5 100644
--- a/src/AlertRemoveGroup.vue
+++ b/src/AlertRemoveGroup.vue
@@ -1,30 +1,30 @@
 <template>
-  <NcModal
-    size="small">
-    <div class="container-modal-remove">
-      <NcNoteCard type="warning">
-        <p>{{ message }}</p>
-      </NcNoteCard>
-      <div class="container-buttons-remove">
-        <NcButton
-          aria-label="cancel"
-          type="secondary"
-          @click="cancel()" >
-          <template>
-            {{ t('workspace', 'Cancel') }}
-          </template>
-        </NcButton>
-        <NcButton
-          aria-label="confirm"
-          type="primary"
-          @click="removeGroup()" >
-          <template>
-            {{ t('workspace', 'Confirm') }}
-          </template>
-        </NcButton>
-      </div>
-    </div>
-  </NcModal>
+	<NcModal
+		size="small">
+		<div class="container-modal-remove">
+			<NcNoteCard type="warning">
+				<p>{{ message }}</p>
+			</NcNoteCard>
+			<div class="container-buttons-remove">
+				<NcButton
+					aria-label="cancel"
+					type="secondary"
+					@click="cancel()" >
+					<template>
+						{{ t('workspace', 'Cancel') }}
+					</template>
+				</NcButton>
+				<NcButton
+					aria-label="confirm"
+					type="primary"
+					@click="removeGroup()" >
+					<template>
+						{{ t('workspace', 'Confirm') }}
+					</template>
+				</NcButton>
+			</div>
+		</div>
+	</NcModal>
 </template>
 
 <script>
@@ -33,39 +33,39 @@ import NcModal from '@nextcloud/vue/dist/Components/NcModal.js'
 import NcNoteCard from '@nextcloud/vue/dist/Components/NcNoteCard.js'
 
 export default {
-  name: 'AlertRemoveGroup',
-  components: {
-    NcButton,
-    NcNoteCard,
-    NcModal
-  },
-  props: {
-    message: {
-      type: String,
-      required: true,
-    },
-  },
-  methods: {
-    cancel() {
-      this.$emit('cancel')
-    },
-    removeGroup() {
-      this.$emit('remove-group')
-    }
-  }
+	name: 'AlertRemoveGroup',
+	components: {
+		NcButton,
+		NcNoteCard,
+		NcModal
+	},
+	props: {
+		message: {
+			type: String,
+			required: true,
+		},
+	},
+	methods: {
+		cancel() {
+			this.$emit('cancel')
+		},
+		removeGroup() {
+			this.$emit('remove-group')
+		}
+	}
 }
 </script>
 
 <style scoped>
 .container-buttons-remove {
-  display: flex;
-  justify-content: space-between;
-  margin-top: 24px;
+	display: flex;
+	justify-content: space-between;
+	margin-top: 24px;
 }
 
 .container-modal-remove {
-  padding: 24px;
-  margin-top: 20px;
+	padding: 24px;
+	margin-top: 20px;
 }
 
 </style>
diff --git a/src/GroupDetails.vue b/src/GroupDetails.vue
index 1c73dfbe..a1c13a1b 100644
--- a/src/GroupDetails.vue
+++ b/src/GroupDetails.vue
@@ -67,15 +67,15 @@
 			</div>
 		</div>
 		<UserTable :space-name="decodeURIComponent(decodeURIComponent($route.params.slug))" :editable="!isAddedGroup" />
-    <SelectUsers v-if="showSelectUsersModal" :space-name="decodeURIComponent(decodeURIComponent($route.params.slug))" @close="toggleShowSelectUsersModal" />
-    <AlertRemoveGroup v-if="showRemoveConnectedGroupModal"
-      :message="t('workspace', 'Please, note that once {groupname} group has been removed, its users will lose access to the {spacename} workspace', { groupname: decodeURIComponent(decodeURIComponent($route.params.slug)), spacename: this.$route.params.space })"
-      @cancel="closeConnectedGroupModal"
-      @remove-group="removeConnectedGroup" />
-    <AlertRemoveGroup v-if="showRemoveGroupModal"
-      :message="t('workspace', 'Attention, après la suppression du groupe {groupname}, ses utilisateurs conserveront l\'accès à l\'espace de travail {spacename}', { groupname: decodeURIComponent(decodeURIComponent($route.params.slug)), spacename: this.$route.params.space })"
-      @cancel="closeRemoveGroupModal"
-      @remove-group="deleteGroup" />
+		<SelectUsers v-if="showSelectUsersModal" :space-name="decodeURIComponent(decodeURIComponent($route.params.slug))" @close="toggleShowSelectUsersModal" />
+		<AlertRemoveGroup v-if="showRemoveConnectedGroupModal"
+			:message="t('workspace', 'Please, note that once {groupname} group has been removed, its users will lose access to the {spacename} workspace', { groupname: decodeURIComponent(decodeURIComponent($route.params.slug)), spacename: this.$route.params.space })"
+			@cancel="closeConnectedGroupModal"
+			@remove-group="removeConnectedGroup" />
+		<AlertRemoveGroup v-if="showRemoveGroupModal"
+			:message="t('workspace', 'Attention, après la suppression du groupe {groupname}, ses utilisateurs conserveront l\'accès à l\'espace de travail {spacename}', { groupname: decodeURIComponent(decodeURIComponent($route.params.slug)), spacename: this.$route.params.space })"
+			@cancel="closeRemoveGroupModal"
+			@remove-group="deleteGroup" />
 	</div>
 </template>
 
@@ -85,7 +85,6 @@ import AlertRemoveGroup from './AlertRemoveGroup.vue'
 import NcActions from '@nextcloud/vue/dist/Components/NcActions.js'
 import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
 import NcActionInput from '@nextcloud/vue/dist/Components/NcActionInput.js'
-import NcModal from '@nextcloud/vue/dist/Components/NcModal.js'
 import SelectUsers from './SelectUsers.vue'
 import UserGroup from './services/Groups/UserGroup.js'
 import UserTable from './UserTable.vue'
@@ -93,11 +92,10 @@ import UserTable from './UserTable.vue'
 export default {
 	name: 'GroupDetails',
 	components: {
-    AlertRemoveGroup,
+		AlertRemoveGroup,
 		NcActions,
 		NcActionButton,
 		NcActionInput,
-		NcModal,
 		SelectUsers,
 		UserTable,
 	},
@@ -115,10 +113,10 @@ export default {
 			return this.$store.getters.isSpaceAddedGroup(this.$route.params.space, decodeURIComponent(this.$route.params.slug))
 		},
 	},
-  mounted() {
-    const space = this.$store.state.spaces[this.$route.params.space]
-    this.$store.dispatch('loadUsers', { space })
-  },
+	mounted() {
+		const space = this.$store.state.spaces[this.$route.params.space]
+		this.$store.dispatch('loadUsers', { space })
+	},
 	methods: {
 		deleteGroup() {
 			// Prevents deleting GE- and U- groups
@@ -136,30 +134,30 @@ export default {
 		toggleRemoveConnectedGroupModal() {
 			this.showRemoveConnectedGroupModal = !this.showRemoveConnectedGroupModal
 		},
-    toggleRemoveGroupModal() {
+		toggleRemoveGroupModal() {
 			this.showRemoveGroupModal = !this.showRemoveGroupModal
-    },
+		},
 		closeConnectedGroupModal() {
 			this.showRemoveConnectedGroupModal = false
 		},
-    closeRemoveGroupModal() {
-      this.showRemoveGroupModal = false
-    },
+		closeRemoveGroupModal() {
+			this.showRemoveGroupModal = false
+		},
 		removeConnectedGroup() {
 			const space = this.$store.state.spaces[this.$route.params.space]
 			const gid = decodeURIComponent(decodeURIComponent(this.$route.params.slug))
 
-      this.$store.dispatch('substractionSpaceUserCount', {
-        spaceName: space.name,
-        usersCount: space.added_groups[gid].usersCount
-      })
-
-      this.$store.dispatch('substractionGroupUserCount', {
-        spaceName: space.name,
-        gid: UserGroup.getGid(space),
-        usersCount: space.added_groups[gid].usersCount
-      })
-      
+			this.$store.dispatch('substractionSpaceUserCount', {
+				spaceName: space.name,
+				usersCount: space.added_groups[gid].usersCount
+			})
+
+			this.$store.dispatch('substractionGroupUserCount', {
+				spaceName: space.name,
+				gid: UserGroup.getGid(space),
+				usersCount: space.added_groups[gid].usersCount
+			})
+
 			this.$store.dispatch('removeConnectedGroup', {
 				spaceId: space.id,
 				gid,
@@ -168,7 +166,7 @@ export default {
 
 			Object.keys(space.users).forEach(key => {
 				if (space.users[key].groups.includes(gid)) {
-				this.$store.commit('removeUserFromWorkspace', { name: space.name, user: space.users[key] })
+					this.$store.commit('removeUserFromWorkspace', { name: space.name, user: space.users[key] })
 				}
 			})
 
diff --git a/src/GroupMenuItem.vue b/src/GroupMenuItem.vue
index 071b3b37..78ff58cc 100644
--- a/src/GroupMenuItem.vue
+++ b/src/GroupMenuItem.vue
@@ -4,7 +4,7 @@
 		:to="{path: `/group/${spaceName}/${group.slug}`}"
 		:name="group.displayName">
 		<NcCounterBubble slot="counter" class="user-counter">
-      {{ count }}
+			{{ count }}
 		</NcCounterBubble>
 	</NcAppNavigationItem>
 </template>
@@ -19,9 +19,9 @@ export default {
 		NcAppNavigationItem,
 		NcCounterBubble,
 	},
-  beforeMount() {
-    console.debug('Voici le groupe', this.group)
-  },
+	beforeMount() {
+		console.debug('Voici le groupe', this.group)
+	},
 	props: {
 		group: {
 			type: Object,
@@ -36,16 +36,11 @@ export default {
 			required: false,
 			default: false,
 		},
-		addedGroup: {
-			type: Boolean,
-			required: false,
-			default: false,
-		},
-    count: {
-      type: Number,
-      required: true,
-      default: 0,
-    }
+		count: {
+			type: Number,
+			required: true,
+			default: 0,
+		}
 	},
 }
 </script>
diff --git a/src/LoadingUsers.vue b/src/LoadingUsers.vue
index 842eacdb..ae7e54bf 100644
--- a/src/LoadingUsers.vue
+++ b/src/LoadingUsers.vue
@@ -1,14 +1,14 @@
 <template>
-  <div>
-    <NcEmptyContent>
-      <template #icon>
-        <NcLoadingIcon :size="64" appearance="dark" name="Loading on light background" />
-      </template>
-      <template #description v-if="isLoadingUsers" >
-        <p>{{ message }}</p>
-      </template>
-    </NcEmptyContent>
-  </div>
+	<div>
+		<NcEmptyContent>
+			<template #icon>
+				<NcLoadingIcon :size="64" appearance="dark" name="Loading on light background" />
+			</template>
+			<template #description v-if="isLoadingUsers" >
+				<p>{{ message }}</p>
+			</template>
+		</NcEmptyContent>
+	</div>
 </template>
 
 <script>
@@ -16,28 +16,28 @@ import NcEmptyContent from '@nextcloud/vue/dist/Components/NcEmptyContent.js'
 import NcLoadingIcon from '@nextcloud/vue/dist/Components/NcLoadingIcon.js'
 
 export default {
-  name: 'LoadingUsers',
-  components: {
-    NcEmptyContent,  
-    NcLoadingIcon,
-  },
-  props: {
-    loadUsers: {
-      type: Boolean,
-      required: false,
-      default: false
-    },
-    message: {
-      type: String,
-      required: false,
-      default: 'En attente'
-    }
-  },
-  computed: {
-    isLoadingUsers() {
-      return this.loadUsers
-    }
-  }
+	name: 'LoadingUsers',
+	components: {
+		NcEmptyContent,
+		NcLoadingIcon,
+	},
+	props: {
+		loadUsers: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		message: {
+			type: String,
+			required: false,
+			default: 'En attente'
+		}
+	},
+	computed: {
+		isLoadingUsers() {
+			return this.loadUsers
+		}
+	}
 }
 </script>
 
diff --git a/src/RemoveSpace.vue b/src/RemoveSpace.vue
index 2f20510a..d23a00c1 100644
--- a/src/RemoveSpace.vue
+++ b/src/RemoveSpace.vue
@@ -1,46 +1,46 @@
 <!--
-  @copyright Copyright (c) 2017 Arawa
+	@copyright Copyright (c) 2017 Arawa
 
-  @author 2023 Baptiste Fotia <baptiste.fotia@arawa.fr>
-  @author 2023 Andrei Zheksi <andrei.zheksi@arawa.fr>
+	@author 2023 Baptiste Fotia <baptiste.fotia@arawa.fr>
+	@author 2023 Andrei Zheksi <andrei.zheksi@arawa.fr>
 
-  @license GNU AGPL version 3 or any later version
+	@license GNU AGPL version 3 or any later version
 
-  This program is free software: you can redistribute it and/or modify
-  it under the terms of the GNU Affero General Public License as
-  published by the Free Software Foundation, either version 3 of the
-  License, or (at your option) any later version.
+	This program is free software: you can redistribute it and/or modify
+	it under the terms of the GNU Affero General Public License as
+	published by the Free Software Foundation, either version 3 of the
+	License, or (at your option) any later version.
 
-  This program is distributed in the hope that it will be useful,
-  but WITHOUT ANY WARRANTY; without even the implied warranty of
-  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-  GNU Affero General Public License for more details.
+	This program is distributed in the hope that it will be useful,
+	but WITHOUT ANY WARRANTY; without even the implied warranty of
+	MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+	GNU Affero General Public License for more details.
 
-  You should have received a copy of the GNU Affero General Public License
-  along with this program.  If not, see <http://www.gnu.org/licenses/>.
+	You should have received a copy of the GNU Affero General Public License
+	along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 <template>
-  <NcModal class="remove-modal"
+	<NcModal class="remove-modal"
 			size="small"
 			@close="close()">
-      <div class="modal__content">
-        <h2>
-          {{ t('workspace', 'Are you sure you want to delete the {space} workspace ?', { space }) }}
-        </h2>
-        <div class="remove-space-actions">
-          <NcButton
-            type="secondary"
-            @click="handleCancel()">
-            {{ t('workspace', 'Cancel') }}
-          </NcButton>
-          <NcButton
-            type="error"
-            @click="handleDelete()">
-            {{ t('workspace', 'Delete space') }}
-          </NcButton>
-        </div>
-      </div>
-  </NcModal>
+			<div class="modal__content">
+				<h2>
+					{{ t('workspace', 'Are you sure you want to delete the {space} workspace ?', { space }) }}
+				</h2>
+				<div class="remove-space-actions">
+					<NcButton
+						type="secondary"
+						@click="handleCancel()">
+						{{ t('workspace', 'Cancel') }}
+					</NcButton>
+					<NcButton
+						type="error"
+						@click="handleDelete()">
+						{{ t('workspace', 'Delete space') }}
+					</NcButton>
+				</div>
+			</div>
+	</NcModal>
 </template>
 
 <script>
@@ -51,7 +51,7 @@ export default {
 	name: 'RemoveSpace',
 	components: {
 		NcButton,
-    NcModal,
+		NcModal,
 	},
 	props: {
 		spaceName: { type: String, default: '' },
@@ -68,9 +68,9 @@ export default {
 		handleDelete() {
 			this.$emit('handle-delete')
 		},
-    close() {
-      this.$emit('close')
-    },
+		close() {
+			this.$emit('close')
+		},
 	},
 }
 </script>
@@ -80,13 +80,13 @@ export default {
 	flex-direction: column;
 	align-items: center;
 	justify-content: center;
-  width: 600px;
-  height: 100%;
+	width: 600px;
+	height: 100%;
 }
 
 .remove-modal :deep(.modal-wrapper .modal-container) {
-  height: 200px;
-  min-width: 600px;
+	height: 200px;
+	min-width: 600px;
 }
 
 .remove-modal :deep(.modal-wrapper .modal-container .modal__content h2) {
@@ -96,7 +96,7 @@ export default {
 }
 
 .remove-modal {
-  min-height: 8rem;
+	min-height: 8rem;
 }
 .remove-space-actions {
 	margin-top: 1.5rem;
diff --git a/src/SelectConnectedGroups.vue b/src/SelectConnectedGroups.vue
index 84daf852..083c9851 100644
--- a/src/SelectConnectedGroups.vue
+++ b/src/SelectConnectedGroups.vue
@@ -1,61 +1,62 @@
 <template>
-  <NcModal class="modal-connected-groups"
-    @close="close()">
-    <div class="container-select-groups">
-      <header class="header-select-groups">
-        <h1>
-          {{ t('workspace', 'Add a group') }}
-        </h1>
-      </header>
-      <div class="body-select-groups">
-        <NcSelect
-          class="searchbar-groups"
-          track-by="gid"
-          label="displayName"
-          :limit="10"
-          :options="groupsSelectable"
-          :placeholder="t('workspace', 'Start typing text to search for groups')"
-          :loading="loadingGroups"
-          :appendToBody="false"
-          :userSelect="true"
-          @option:selected="addGroupToBatch"
-          @search="lookupGroups"
-          @close="groupsSelectable=[]" />
-      </div>
-      <div class="content-group-list">
-        <div v-if="groupsSelected.length !== 0"
-          class="select-group-list">
-          <div v-for="group in groupsSelected"
-            class="group-item">
-            <div class="group-avatar">
-              <NcAvatar
-                :display-name="group.displayName"
-                :is-no-user="true" />
-              <div class="groupname">
-                <span>{{ group.displayName }}</span>
-              </div>
-            </div>
-            <div>
-              <NcActions>
-                <NcActionButton icon="icon-delete"
-                  @click="removeGroupFromBatch(group)">
-                  {{ t('workspace', 'remove group from selection') }}
-                </NcActionButton>
-              </NcActions>
-            </div>
-          </div>
-        </div>
-        <NcEmptyContent v-else
-          class="content-group-list-empty"
-          :title="t('workspace', 'No group selected')" />
-      </div>
-      <NcButton type="secondary"
-        class="btn-add-groups"
-        @click="validate">
-        {{ t('workspace', 'Add') }}
-      </NcButton>
-    </div>
-  </NcModal>
+	<NcModal class="modal-connected-groups"
+		@close="close()">
+		<div class="container-select-groups">
+			<header class="header-select-groups">
+				<h1>
+					{{ t('workspace', 'Add a group') }}
+				</h1>
+			</header>
+			<div class="body-select-groups">
+				<NcSelect
+					class="searchbar-groups"
+					track-by="gid"
+					label="displayName"
+					:limit="10"
+					:options="groupsSelectable"
+					:placeholder="t('workspace', 'Start typing text to search for groups')"
+					:loading="loadingGroups"
+					:appendToBody="false"
+					:userSelect="true"
+					@option:selected="addGroupToBatch"
+					@search="lookupGroups"
+					@close="groupsSelectable=[]" />
+			</div>
+			<div class="content-group-list">
+				<div v-if="groupsSelected.length !== 0"
+					class="select-group-list">
+					<div v-for="group in groupsSelected"
+						:key="group.gid"
+						class="group-item">
+						<div class="group-avatar">
+							<NcAvatar
+								:display-name="group.displayName"
+								:is-no-user="true" />
+							<div class="groupname">
+								<span>{{ group.displayName }}</span>
+							</div>
+						</div>
+						<div>
+							<NcActions>
+								<NcActionButton icon="icon-delete"
+									@click="removeGroupFromBatch(group)">
+									{{ t('workspace', 'remove group from selection') }}
+								</NcActionButton>
+							</NcActions>
+						</div>
+					</div>
+				</div>
+				<NcEmptyContent v-else
+					class="content-group-list-empty"
+					:title="t('workspace', 'No group selected')" />
+			</div>
+			<NcButton type="secondary"
+				class="btn-add-groups"
+				@click="validate">
+				{{ t('workspace', 'Add') }}
+			</NcButton>
+		</div>
+	</NcModal>
 </template>
 
 <script>
@@ -77,7 +78,7 @@ export default {
 		NcAvatar,
 		NcButton,
 		NcEmptyContent,
-    NcModal,
+		NcModal,
 		NcSelect,
 	},
 	data() {
@@ -128,25 +129,25 @@ export default {
 					console.error(reason.message)
 				})
 				.finally(() => {
-				  this.loadingGroups = false
+					this.loadingGroups = false
 				})
 		},
 		validate() {
 			this.$emit('close')
 			// todo: Call api
 			this.groupsSelected.forEach(group => {
-        console.log('selectConnectedGroups - validate - group', group)
+				console.info('selectConnectedGroups - validate - group', group)
 				const space = this.$store.state.spaces[this.$route.params.space]
 				this.$store.dispatch('addConnectedGroupToWorkspace', {
-					spaceId: space.id ,
+					spaceId: space.id,
 					group,
 					name: this.$route.params.space,
 				})
 			})
 		},
-    close() {
-      this.$emit('close')
-    }
+		close() {
+			this.$emit('close')
+		}
 	},
 }
 </script>
@@ -154,7 +155,7 @@ export default {
 <style scoped>
 
 .modal-connected-groups :deep(.modal-wrapper .modal-container) {
-  min-height: auto;
+	min-height: auto;
 }
 
 .container-select-groups {
@@ -174,7 +175,7 @@ export default {
 
 .header-select-groups h1 {
 	margin: 10px;
-  margin-bottom: 16px;
+	margin-bottom: 16px;
 	font-size: 20px;
 }
 
@@ -187,14 +188,14 @@ export default {
 }
 
 .searchbar-groups :deep(.vs__dropdown-toggle) {
-  border: 2px solid var(--color-border-dark);
+	border: 2px solid var(--color-border-dark);
 }
 
 .content-group-list {
 	width: 80%;
 	height: 400px;
 	padding: 8px;
-  margin-top: 16px;
+	margin-top: 16px;
 }
 
 .content-group-list-empty {
diff --git a/src/SelectUsers.vue b/src/SelectUsers.vue
index 8546df70..588e8f1a 100644
--- a/src/SelectUsers.vue
+++ b/src/SelectUsers.vue
@@ -21,79 +21,79 @@
 -->
 
 <template>
-  <NcModal class="modal-select-users"
-    @close="close()">
-    <div class="select-users-wrapper">
-      <header class="header-modal">
-        <h1 class="title-add-users-modal">
-          {{ t('workspace', 'Add users') }}
-        </h1>
-      </header>
-      <div class="body-select-users">
-        <NcSelect class="searchbar-users"
-          label="name"
-          track-by="uid"
-          :custom-label="displayForSearching"
-          :loading="isLookingUpUsers"
-          :multiple="false"
-          :options="selectableUsers"
-          :placeholder="t('workspace', 'Start typing to lookup users')"
-          :tag-width="50"
-          :user-select="true"
-          @option:selected="addUserToBatch"
-          @search="lookupUsers"
-          @close="selectableUsers=[]" />
-      </div>
-      <div class="content-users-list">
-        <div v-if="allSelectedUsers.length !== 0"
-          class="select-user-list">
-          <div v-for="user in allSelectedUsers"
-            :key="user.name"
-            class="user-item"
-            :class="$store.getters.isMember($route.params.space, user) || !$route.params.slug ? '' : 'user-not-member'">
-            <div>
-              <div class="icon-member" :class="$store.getters.isMember($route.params.space, user) ? 'is-member' : ''" />
-              <NcAvatar :display-name="user.name" :user="user.uid" />
-              <div class="username">
-                <span>{{ user.name }}</span>
-              </div>
-            </div>
-            <div>
-              <NcCheckboxRadioSwitch v-if="!$store.getters.isGEorUGroup($route.params.space, $route.params.slug)"
-                class="role-toggle"
-                type="checkbox"
-                :checked="user.role === 'admin'"
-                :disabled="$store.getters.isMember($route.params.space, user)"
-                @update:checked="toggleUserRole(user)">
-                {{ t('workspace', 'S.A.') }}
-              </NcCheckboxRadioSwitch>
-              <NcActions>
-                <NcActionButton icon="icon-delete"
-                  @click="removeUserFromBatch(user)">
-                  {{ t('workspace', 'remove users from selection') }}
-                </NcActionButton>
-              </NcActions>
-            </div>
-          </div>
-        </div>
-        <NcEmptyContent v-else
-          class="content-user-list-empty"
-          :title="t('workspace', 'No users selected')" />
-      </div>
-      <NcNoteCard v-if="$route.params.slug && addingUsersToWorkspace"
-        class="note-card"
-        type="warning">
-        <p>
-          {{ t('workspace', 'Caution, users highlighted in red are not yet member of this workspace. They will be automaticaly added.') }}
-        </p>
-      </NcNoteCard>
-      <NcButton type="secondary"
-        class="btn-add-users"
-        @click="addUsersToWorkspaceOrGroup()">
-          {{ t('workspace', 'Add users') }}
-      </NcButton>
-    </div>
-  </NcModal>
+	<NcModal class="modal-select-users"
+		@close="close()">
+		<div class="select-users-wrapper">
+			<header class="header-modal">
+				<h1 class="title-add-users-modal">
+					{{ t('workspace', 'Add users') }}
+				</h1>
+			</header>
+			<div class="body-select-users">
+				<NcSelect class="searchbar-users"
+					label="name"
+					track-by="uid"
+					:custom-label="displayForSearching"
+					:loading="isLookingUpUsers"
+					:multiple="false"
+					:options="selectableUsers"
+					:placeholder="t('workspace', 'Start typing to lookup users')"
+					:tag-width="50"
+					:user-select="true"
+					@option:selected="addUserToBatch"
+					@search="lookupUsers"
+					@close="selectableUsers=[]" />
+			</div>
+			<div class="content-users-list">
+				<div v-if="allSelectedUsers.length !== 0"
+					class="select-user-list">
+					<div v-for="user in allSelectedUsers"
+						:key="user.name"
+						class="user-item"
+						:class="$store.getters.isMember($route.params.space, user) || !$route.params.slug ? '' : 'user-not-member'">
+						<div>
+							<div class="icon-member" :class="$store.getters.isMember($route.params.space, user) ? 'is-member' : ''" />
+							<NcAvatar :display-name="user.name" :user="user.uid" />
+							<div class="username">
+								<span>{{ user.name }}</span>
+							</div>
+						</div>
+						<div>
+							<NcCheckboxRadioSwitch v-if="!$store.getters.isGEorUGroup($route.params.space, $route.params.slug)"
+								class="role-toggle"
+								type="checkbox"
+								:checked="user.role === 'admin'"
+								:disabled="$store.getters.isMember($route.params.space, user)"
+								@update:checked="toggleUserRole(user)">
+								{{ t('workspace', 'S.A.') }}
+							</NcCheckboxRadioSwitch>
+							<NcActions>
+								<NcActionButton icon="icon-delete"
+									@click="removeUserFromBatch(user)">
+									{{ t('workspace', 'remove users from selection') }}
+								</NcActionButton>
+							</NcActions>
+						</div>
+					</div>
+				</div>
+				<NcEmptyContent v-else
+					class="content-user-list-empty"
+					:title="t('workspace', 'No users selected')" />
+			</div>
+			<NcNoteCard v-if="$route.params.slug && addingUsersToWorkspace"
+				class="note-card"
+				type="warning">
+				<p>
+					{{ t('workspace', 'Caution, users highlighted in red are not yet member of this workspace. They will be automaticaly added.') }}
+				</p>
+			</NcNoteCard>
+			<NcButton type="secondary"
+				class="btn-add-users"
+				@click="addUsersToWorkspaceOrGroup()">
+					{{ t('workspace', 'Add users') }}
+			</NcButton>
+		</div>
+	</NcModal>
 </template>
 
 <script>
@@ -126,11 +126,11 @@ export default {
 		NcAvatar,
 		NcActions,
 		NcActionButton,
-    NcCheckboxRadioSwitch,
-    NcButton,
+		NcCheckboxRadioSwitch,
+		NcButton,
 		NcNoteCard,
-    NcEmptyContent,
-    NcModal,
+		NcEmptyContent,
+		NcModal,
 		NcSelect,
 	},
 	data() {
@@ -174,7 +174,6 @@ export default {
 					}
 					if (Object.keys(space.users).includes(user.uid) && decodeURIComponent(this.$route.params.slug).startsWith('SPACE-G-')) {
 						this.addExistingUserFromSubgroup(user)
-						return
 					} else {
 						this.addNewUserFromSubgroup(user, space)
 					}
@@ -290,9 +289,9 @@ export default {
 				spaceName: this.$route.params.space,
 			})
 		},
-    close() {
-      this.$emit('close')
-    },
+		close() {
+			this.$emit('close')
+		},
 		displayForSearching({ name, email, uid }) {
 			return `${name} - ${email} - ${uid}`
 		},
@@ -449,11 +448,11 @@ export default {
 }
 
 .modal-select-users :deep(.modal-wrapper .modal-container) {
-  min-height: auto;
+	min-height: auto;
 }
 
 .body-select-users {
-  display: flex;
+	display: flex;
 }
 
 .is-member {
@@ -473,7 +472,7 @@ export default {
 
 .header-modal h1 {
 	margin: 10px;
-  margin-bottom: 16px;
+	margin-bottom: 16px;
 	font-size: 20px;
 }
 
@@ -482,14 +481,14 @@ export default {
 }
 
 .searchbar-groups :deep(.vs__dropdown-toggle) {
-  border: 2px solid var(--color-border-dark);
+	border: 2px solid var(--color-border-dark);
 }
 
 .content-users-list {
 	width: 90%;
 	height: 400px;
 	padding: 8px;
-  margin-top: 16px;
+	margin-top: 16px;
 }
 
 .select-user-list {
@@ -538,7 +537,7 @@ export default {
 }
 
 .searchbar-users :deep(.vs__dropdown-toggle) {
-  border: 2px solid var(--color-border-dark);
+	border: 2px solid var(--color-border-dark);
 }
 
 .username {
diff --git a/src/SpaceDetails.vue b/src/SpaceDetails.vue
index e28d0be8..e9c7c902 100644
--- a/src/SpaceDetails.vue
+++ b/src/SpaceDetails.vue
@@ -120,8 +120,6 @@ import UserTable from './UserTable.vue'
 import { renameSpace, removeWorkspace } from './services/spaceService.js'
 import showNotificationError from './services/Notifications/NotificationError.js'
 import NcEmptyContent from '@nextcloud/vue/dist/Components/NcEmptyContent.js'
-import { PATTERN_CHECK_NOTHING_SPECIAL_CHARACTER } from './constants.js'
-import BadCreateError from './Errors/BadCreateError.js'
 
 export default {
 	name: 'SpaceDetails',
diff --git a/src/SpaceMenuItem.vue b/src/SpaceMenuItem.vue
index 69b76183..8bd05d63 100644
--- a/src/SpaceMenuItem.vue
+++ b/src/SpaceMenuItem.vue
@@ -80,14 +80,13 @@
 			:key="group.gid"
 			:group="group"
 			:space-name="spaceName"
-	  	:count="group.usersCount"
+			:count="group.usersCount"
 			:added-group="true" />
 	</NcAppNavigationItem>
 </template>
 
 <script>
 import { getLocale } from '@nextcloud/l10n'
-import { getUsers } from './services/spaceService.js'
 import GroupMenuItem from './GroupMenuItem.vue'
 import MenuItemSelector from './MenuItemSelector.vue'
 import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
diff --git a/src/SpaceTable.vue b/src/SpaceTable.vue
index c082b269..c48035b8 100644
--- a/src/SpaceTable.vue
+++ b/src/SpaceTable.vue
@@ -64,7 +64,6 @@
 <script>
 import NcAvatar from '@nextcloud/vue/dist/Components/NcAvatar.js'
 import NcEmptyContent from '@nextcloud/vue/dist/Components/NcEmptyContent.js'
-import { getUsers } from './services/spaceService.js'
 
 export default {
 	name: 'SpaceTable',
diff --git a/src/services/groupfoldersService.js b/src/services/groupfoldersService.js
index b0c0f98b..47a2c656 100644
--- a/src/services/groupfoldersService.js
+++ b/src/services/groupfoldersService.js
@@ -250,7 +250,7 @@ export function createGroupfolder(spaceName) {
 export function destroy(workspace) {
 	// It's possible to send data with the DELETE verb adding `data` key word as
 	// second argument in the `delete` method.
-  const spaceId = workspace.id
+	const spaceId = workspace.id
 	const result = axios.delete(generateUrl(`/apps/workspace/spaces/${spaceId}`),
 		{
 			data: {
diff --git a/src/services/spaceService.js b/src/services/spaceService.js
index 9beb71b6..581a86af 100644
--- a/src/services/spaceService.js
+++ b/src/services/spaceService.js
@@ -59,14 +59,14 @@ export function createSpace(spaceName, vueInstance = undefined) {
 }
 
 export function getUsers(spaceId) {
-  const result = axios.get(generateUrl(`/apps/workspace/spaces/${spaceId}/users`))
-    .then(resp => {
-      return resp.data
-    })
-    .catch(error => {
-      console.error('Impossible to get users from a workspace.', error)
-    })
-  return result
+	const result = axios.get(generateUrl(`/apps/workspace/spaces/${spaceId}/users`))
+		.then(resp => {
+			return resp.data
+		})
+		.catch(error => {
+			console.error('Impossible to get users from a workspace.', error)
+		})
+	return result
 }
 
 /**
diff --git a/src/store/actions.js b/src/store/actions.js
index f6bbf6b2..2abbb648 100644
--- a/src/store/actions.js
+++ b/src/store/actions.js
@@ -21,7 +21,7 @@
  *
  */
 
-import { addGroupToWorkspace } from '../services/spaceService.js'
+import { getUsers, addGroupToWorkspace } from '../services/spaceService.js'
 import { generateUrl } from '@nextcloud/router'
 import { PREFIX_GID_SUBGROUP_SPACE, PREFIX_DISPLAYNAME_SUBGROUP_SPACE } from '../constants.js'
 import axios from '@nextcloud/axios'
@@ -29,7 +29,6 @@ import showNotificationError from '../services/Notifications/NotificationError.j
 import ManagerGroup from '../services/Groups/ManagerGroup.js'
 import router from '../router.js'
 import UserGroup from '../services/Groups/UserGroup.js'
-import { getUsers } from '../services/spaceService.js'
 
 export default {
 	// Adds a user to a group
@@ -86,12 +85,12 @@ export default {
 	decrementSpaceUserCount(context, { spaceName }) {
 		context.commit('DECREMENT_SPACE_USER_COUNT', { spaceName })
 	},
-  substractionSpaceUserCount(context, { spaceName, usersCount }) {
-    context.commit('SUBSTRACTION_SPACE_USER_COUNT', { spaceName, usersCount})
-  },
-  substractionGroupUserCount(context, { spaceName, gid, usersCount }) {
-    context.commit('SUBSTRACTION_GROUP_USER_COUNT', { spaceName, gid, usersCount})
-  },
+	substractionSpaceUserCount(context, { spaceName, usersCount }) {
+		context.commit('SUBSTRACTION_SPACE_USER_COUNT', { spaceName, usersCount })
+	},
+	substractionGroupUserCount(context, { spaceName, gid, usersCount }) {
+		context.commit('SUBSTRACTION_GROUP_USER_COUNT', { spaceName, gid, usersCount })
+	},
 	// Creates a group and navigates to its details page
 	createGroup(context, { name, gid }) {
 		// Groups must be postfixed with the ID of the space they belong
@@ -344,37 +343,35 @@ export default {
 			})
 			.catch((e) => {
 				console.error('Error to remove connected group', e.message)
-        console.error(e)
+				console.error(e)
 			})
-		
+
 		context.commit('removeAddedGroupFromSpace', { name, gid })
 
 		// Naviagte back to home
 		router.push({
 			path: `/workspace/${name}`,
 		})
-
-		
 	},
 	addConnectedGroupToWorkspace(context, { spaceId, group, name }) {
 		const space = context.state.spaces[name]
 		const result = axios.post(generateUrl(`/apps/workspace/spaces/${spaceId}/connected-groups/${group.gid}`))
-		.then(resp => {
-			context.commit('addConnectedGroupToWorkspace', { name, group, slug: resp.data.slug })
-			const users = resp.data.users
-			for (const user in users) {
-				context.commit('addUserToWorkspace', { name, user: users[user] })
-				context.commit('addUserToGroup', { name, gid: group.gid, user: users[user] })
-        context.commit('INCREMENT_ADDED_GROUP_USER_COUNT', { spaceName: name, gid: group.gid })
-        context.commit('INCREMENT_GROUP_USER_COUNT', { spaceName: name, gid: UserGroup.getGid(space) })
-        context.commit('INCREMENT_SPACE_USER_COUNT', { spaceName: name })
-			}
-			return resp.data
-		})
-		.catch(error => {
-			console.error('Error to add connected group', error.message)
-      console.error(error)
-		})
+			.then(resp => {
+				context.commit('addConnectedGroupToWorkspace', { name, group, slug: resp.data.slug })
+				const users = resp.data.users
+				for (const user in users) {
+					context.commit('addUserToWorkspace', { name, user: users[user] })
+					context.commit('addUserToGroup', { name, gid: group.gid, user: users[user] })
+					context.commit('INCREMENT_ADDED_GROUP_USER_COUNT', { spaceName: name, gid: group.gid })
+					context.commit('INCREMENT_GROUP_USER_COUNT', { spaceName: name, gid: UserGroup.getGid(space) })
+					context.commit('INCREMENT_SPACE_USER_COUNT', { spaceName: name })
+				}
+				return resp.data
+			})
+			.catch(error => {
+				console.error('Error to add connected group', error.message)
+				console.error(error)
+			})
 
 		return result
 	},
@@ -450,7 +447,6 @@ export default {
 		context.commit('SET_LOADING_USERS_WAITTING', ({ activated: false }))
 		context.commit('SET_NO_USERS', ({ activated: false }))
 
-		
 		if (Object.keys(space.users).length === space.userCount) {
 			return
 		}
@@ -475,7 +471,7 @@ export default {
 				}
 			})
 			.catch(error => {
-				console.error(`Impossible to get users for the workspace.`)
+				console.error('Impossible to get users for the workspace.')
 				console.error(error)
 			})
 	},
diff --git a/src/store/getters.js b/src/store/getters.js
index 96da06a1..a428c431 100644
--- a/src/store/getters.js
+++ b/src/store/getters.js
@@ -39,12 +39,12 @@ export const getters = {
 		}
 		return '[' + gid + ']'
 	},
-  getGroupUserCount: state => (gid) => {
-    return state.spaces[spaceName].groups[gid].usersCount
-  },
-  getSpaceUserCount: state => (name) => {
-    return state.spaces[name].userCount
-  },
+	getGroupUserCount: state => (spaceName, gid) => {
+		return state.spaces[spaceName].groups[gid].usersCount
+	},
+	getSpaceUserCount: state => (name) => {
+		return state.spaces[name].userCount
+	},
 	// Returns the number of users in a group
 	groupUserCount: state => (spaceName, gid) => {
 		const users = state.spaces[spaceName].users
@@ -68,7 +68,7 @@ export const getters = {
 	// Test if group is from space added groups
 	isSpaceAddedGroup: state => (spaceName, groupName) => {
 		const space = state.spaces[spaceName]
-    const gids = Object.keys(space.added_groups)
+		const gids = Object.keys(space.added_groups)
 		return gids.includes(groupName)
 	},
 	// Tests wheter a group is the GE or U group of a space
@@ -94,7 +94,7 @@ export const getters = {
 			return 0
 		}
 		if (state.spaces[name].userCount !== undefined && state.spaces[name].userCount > 0) {
-			return state.spaces[name].userCount;
+			return state.spaces[name].userCount
 		}
 		const users = state.spaces[name].users
 		if (users === undefined || users.length === 0) {
diff --git a/src/store/index.js b/src/store/index.js
index 1146ad58..60b92093 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -33,8 +33,8 @@ Vue.config.devtools = true // Debug mode
 const store = new Store({
 	state: {
 		loading: true,
-    noUsers: false,
-    loadingUsersWaitting: false,
+		noUsers: false,
+		loadingUsersWaitting: false,
 		spaces: {},
 		groupfolders: {},
 	},
diff --git a/src/store/mutations.js b/src/store/mutations.js
index 7d88035a..2de1638c 100644
--- a/src/store/mutations.js
+++ b/src/store/mutations.js
@@ -89,7 +89,7 @@ export default {
 			gid,
 			displayName,
 			usersCount: 0,
-      slug
+			slug
 		}
 		VueSet(state.spaces, name, space)
 		sortSpaces(state)
@@ -101,7 +101,7 @@ export default {
 	},
 	UPDATE_USERS(state, { space, users }) {
 		space.users = users
-	  VueSet(state.spaces, space.name, space)
+		VueSet(state.spaces, space.name, space)
 	},
 	SET_LOADING_USERS_WAITTING(state, { activated }) {
 		state.loadingUsersWaitting = activated
@@ -114,7 +114,7 @@ export default {
 		space.groups[gid].usersCount++
 		VueSet(state.spaces, spaceName, space)
 	},
-  INCREMENT_ADDED_GROUP_USER_COUNT(state, { spaceName, gid }) {
+	INCREMENT_ADDED_GROUP_USER_COUNT(state, { spaceName, gid }) {
 		const space = state.spaces[spaceName]
 		space.added_groups[gid].usersCount++
 		VueSet(state.spaces, spaceName, space)
@@ -134,16 +134,16 @@ export default {
 		space.userCount--
 		VueSet(state.spaces, spaceName, space)
 	},
-  SUBSTRACTION_SPACE_USER_COUNT(state, { spaceName, usersCount }) {
-    const space = state.spaces[spaceName]
-    space.userCount -= usersCount
-    VueSet(state.spaces, spaceName, space)
-  },
-  SUBSTRACTION_GROUP_USER_COUNT(state, { spaceName, gid, usersCount }) {
-    const space = state.spaces[spaceName]
-    space.groups[gid].usersCount -= usersCount
-    VueSet(state.spaces, spaceName, space)
-  },
+	SUBSTRACTION_SPACE_USER_COUNT(state, { spaceName, usersCount }) {
+		const space = state.spaces[spaceName]
+		space.userCount -= usersCount
+		VueSet(state.spaces, spaceName, space)
+	},
+	SUBSTRACTION_GROUP_USER_COUNT(state, { spaceName, gid, usersCount }) {
+		const space = state.spaces[spaceName]
+		space.groups[gid].usersCount -= usersCount
+		VueSet(state.spaces, spaceName, space)
+	},
 	CHANGE_USER_ROLE(state, { spaceName, user, role }) {
 		const space = state.spaces[spaceName]
 		space.users[user.uid].role = role
diff --git a/src/tests/unit/groupfoldersService.test.js b/src/tests/unit/groupfoldersService.test.js
index df0cadba..ad4c29ba 100644
--- a/src/tests/unit/groupfoldersService.test.js
+++ b/src/tests/unit/groupfoldersService.test.js
@@ -287,8 +287,9 @@ describe('destroy', () => {
 	it('calls axios.delete method with proper parameters', async () => {
 		axios.delete.mockResolvedValue(responseValue)
 		await destroy('foobar')
+		const workspace = { workspace: { id: 1 } }
 		const spaceId = workspace.id
-		
+
 		expect(axios.delete).toHaveBeenCalledWith(`/apps/workspace/space/${spaceId}`, {
 			data: { workspace: 'foobar' },
 		})