From 0966750e4ea30412b0ecc6cc93263882ae825c37 Mon Sep 17 00:00:00 2001
From: Grigory Vodyanov <scratchx@gmx.com>
Date: Wed, 20 Dec 2023 19:54:07 +0100
Subject: [PATCH] Enh/Enhance group information display

Signed-off-by: Grigory V <scratchx@gmx.com>

Fix/avoid empty div

Co-authored-by: Hamza <40746210+hamza221@users.noreply.github.com>
Signed-off-by: Grigory V <scratchx@gmx.com>

Fix lint complaints

Signed-off-by: Grigory Vodyanov <scratchx@gmx.com>

Enh/Enhance group information display
---
 src/components/Properties/PropertyGroups.vue | 22 +++++++++++++++-----
 1 file changed, 17 insertions(+), 5 deletions(-)

diff --git a/src/components/Properties/PropertyGroups.vue b/src/components/Properties/PropertyGroups.vue
index 55abd064..d00a9d6b 100644
--- a/src/components/Properties/PropertyGroups.vue
+++ b/src/components/Properties/PropertyGroups.vue
@@ -34,14 +34,13 @@
 
 			<!-- multiselect taggable groups -->
 			<div class="property__value">
-				<NcSelect v-if="!showAsText"
+				<NcSelect v-if="!isReadOnly"
 					v-model="localValue"
 					:options="groups"
 					:no-wrap="true"
 					:placeholder="t('contacts', 'Add contact in group')"
 					:multiple="true"
 					:close-on-select="false"
-					:disabled="isReadOnly"
 					:clearable="true"
 					:deselect-from-dropdown="true"
 					:taggable="true"
@@ -58,9 +57,15 @@
 						<span>{{ t('contacts', 'No results') }}</span>
 					</template>
 				</NcSelect>
-				<p v-else>
-					{{ localValue.length === 0 ? t('contacts','None'): localValue.toString() }}
-				</p>
+				<div v-else>
+					<span v-if="localValue.length === 0">{{ t('contacts','None') }}</span>
+
+					<div v-else class="group__list">
+						<span v-for="(group, index) in localValue" :key="index">
+							{{ group }}{{ index === (localValue.length - 1) ? '' : ',&nbsp;' }}
+						</span>
+					</div>
+				</div>
 			</div>
 
 			<!-- empty actions to keep the layout -->
@@ -162,3 +167,10 @@ export default {
 	},
 }
 </script>
+
+<style lang="scss" scoped>
+.group__list {
+	display: flex;
+	flex-wrap: wrap;
+}
+</style>