feat(vue,php):Display the groups we're looking for

Signed-off-by: Baptiste Fotia <[email protected]>

lib/Service/Group/GroupFormatter.php

@@ -51,7 +51,7 @@ public static function formatGroups(array $groups): array {
                 $isLdap = true;
             }
 
-			$groupsFormat[$group->getGID()] = [
+			$groupsFormat[] = [
 				'gid' => $group->getGID(),
 				'displayName' => $group->getDisplayName(),
                 'types' => $group->getBackendNames(),

src/SelectConnectedGroups.vue

@@ -1,13 +1,19 @@
 <template>
-	<div>
-		<h1>Connect a group</h1>
+	<div class="container-select-groups">
+		<header class="header-select-groups">
+			<h1>Connect a group</h1>
+		</header>
 
-		<NcSelect
-			label="Start typing to lookup groups"
-			limit="10"
-			:options="groupsSelectable"
-			@search="lookupGroups"
-			@close="groupsSelectable=[]" />
+		<div class="body-select-groups">
+			<NcSelect
+				class="searchbar-groups"
+				track-by="gid"
+				label="displayName"
+				limit="10"
+				:options="groupsSelectable"
+				@search="lookupGroups"
+				@close="groupsSelectable=[]" />
+		</div>
 	</div>
 </template>
 
@@ -45,6 +51,7 @@ export default {
 			axios.get(generateUrl('/apps/workspace/groups'), {
 				params: {
 					pattern: term,
+					ignoreSpaces: true,
 				},
 			})
 				.then(response => {
@@ -61,4 +68,32 @@ export default {
 </script>
 
 <style>
+.container-select-groups {
+	display: flex;
+	flex-direction: column;
+	width: 100%;
+	justify-content: center;
+	align-items: center;
+}
+
+.header-select-groups {
+	display: flex;
+	align-items: start;
+	width: 100%;
+	padding: 10px;
+}
+
+.header-select-groups h1 {
+	margin: 10px;
+	font-size: 24px;
+}
+
+.body-select-groups {
+	display: flex;
+}
+
+.searchbar-groups {
+	width: 400px;
+}
+
 </style>

src/SelectUsers.vue

@@ -358,7 +358,6 @@ export default {
 }
 
 .modal-container {
-	display: flex !important;
 	min-height: 520px !important;
 	max-height: 520px !important;
 	width: 640px !important;