Enh/Enhance group information display

Signed-off-by: Grigory V <[email protected]>
nextcloud · Dec 20, 2023 · 619cb2c · 619cb2c
1 parent 72b0ea3
commit 619cb2c
Showing 1 changed file with 17 additions and 5 deletions.
diff --git 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"
@@ -55,9 +54,15 @@
 						{{ t('contacts', 'No results') }}
 					</span>
 				</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 class="group__list">
+						<span v-for="(group, index) in localValue">
+						{{ group }}{{ index === (localValue.length - 1)  ? '' : ',&nbsp;' }}
+						</span>
+					</div>
+				</div>
 			</div>
 
 			<!-- empty actions to keep the layout -->
@@ -159,3 +164,10 @@ export default {
 	},
 }
 </script>
+
+<style lang="scss" scoped>
+.group__list {
+	display: flex;
+	flex-wrap: wrap;
+}
+</style>