Merge pull request #1254 from nextcloud/fix/user-bubble

nextcloud · Aug 2, 2024 · 6621729 · 6621729
2 parents 6e1b266 + 546c9f4
commit 6621729
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 30 deletions.
diff --git a/cypress/e2e/column-usergroup.cy.js b/cypress/e2e/column-usergroup.cy.js
@@ -30,8 +30,8 @@ describe('Test column ' + columnTitle, () => {
         cy.createUsergroupColumn(columnTitle, true, true, true, [localUser.userId, nonLocalUser.userId], true)
         cy.get('button').contains('Create row').click()
         cy.get('[data-cy="createRowSaveButton"]').click()
-        cy.get('[data-cy="ncTable"] table tr td .userInfo').contains(localUser.userId).should('be.visible')
-        cy.get('[data-cy="ncTable"] table tr td .userInfo').contains(nonLocalUser.userId).should('be.visible')
+        cy.get('[data-cy="ncTable"] table tr td .user-bubble__name').contains(localUser.userId).should('be.visible')
+        cy.get('[data-cy="ncTable"] table tr td .user-bubble__name').contains(nonLocalUser.userId).should('be.visible')
 	})
 
     it('Create column and rows without default values', () => {
@@ -43,7 +43,7 @@ describe('Test column ' + columnTitle, () => {
         cy.get('[data-cy="usergroupRowSelect"] input').type(nonLocalUser.userId)
         cy.get(`.vs__dropdown-menu [id="${nonLocalUser.userId}"]`).click()
         cy.get('[data-cy="createRowSaveButton"]').click()
-        cy.get('[data-cy="ncTable"] table tr td .userInfo').contains(nonLocalUser.userId).should('be.visible')
+        cy.get('[data-cy="ncTable"] table tr td .user-bubble__name').contains(nonLocalUser.userId).should('be.visible')
 	})
 
     it('Create and edit rows', () => {
@@ -52,14 +52,14 @@ describe('Test column ' + columnTitle, () => {
         cy.createUsergroupColumn(columnTitle, true, true, true, [localUser.userId], true)
         cy.get('button').contains('Create row').click()
         cy.get('[data-cy="createRowSaveButton"]').click()
-        cy.get('[data-cy="ncTable"] table tr td .userInfo').contains(localUser.userId).should('be.visible')
+        cy.get('[data-cy="ncTable"] table tr td .user-bubble__name').contains(localUser.userId).should('be.visible')
 
         cy.get('[data-cy="ncTable"] [data-cy="editRowBtn"]').click()
         cy.get('[data-cy="usergroupRowSelect"] input').clear().type(nonLocalUser.userId)
         cy.get(`.vs__dropdown-menu [id="${nonLocalUser.userId}"]`).click()
         cy.get('[data-cy="editRowSaveButton"]').click()
-        cy.get('[data-cy="ncTable"] table tr td .userInfo').contains(localUser.userId).should('not.exist')
-        cy.get('[data-cy="ncTable"] table tr td .userInfo').contains(nonLocalUser.userId).should('be.visible')
+        cy.get('[data-cy="ncTable"] table tr td .user-bubble__name').contains(localUser.userId).should('not.exist')
+        cy.get('[data-cy="ncTable"] table tr td .user-bubble__name').contains(nonLocalUser.userId).should('be.visible')
 	})
 
 

diff --git a/src/shared/components/ncTable/partials/TableCellUsergroup.vue b/src/shared/components/ncTable/partials/TableCellUsergroup.vue
@@ -1,28 +1,22 @@
 <template>
 	<!-- eslint-disable-next-line vue/no-v-html -->
 	<div v-if="value">
-		<div v-for="item in value" :key="item.id" class="inline">
-			<div class="fix-col-2">
-				<div style="display:flex; align-items: center;">
-					<NcAvatar :display-name="item.id" :user="item.id" :is-no-user="item.type !== 0"
-						:show-user-status="column.showUserStatus" />
-				</div>
-				<div class="userInfo">
-					<div class="high-line-height">
-						{{ item.id }}
-					</div>
-				</div>
-			</div>
+		<div v-for="item in value" :key="item.id" class="inline usergroup-entry">
+			<NcUserBubble :user="item.id" :avatar-image="item.type === 1 ? 'icon-group' : undefined" :is-no-user="item.type !== 0" :display-name="item.displayName ?? item.id" :show-user-status="isUser(item) && column.showUserStatus" :size="column.showUserStatus ? 34 : 20" :primary="isCurrentUser(item)" />
 		</div>
 	</div>
 </template>
 
 <script>
-import { NcAvatar } from '@nextcloud/vue'
+import { getCurrentUser } from '@nextcloud/auth'
+import { NcUserBubble } from '@nextcloud/vue'
+
+const currentUser = getCurrentUser()
+
 export default {
 	name: 'TableCellUsergroup',
 	components: {
-		NcAvatar,
+		NcUserBubble,
 	},
 	props: {
 		column: {
@@ -38,19 +32,19 @@ export default {
 			default: () => [],
 		},
 	},
+	computed: {
+		isCurrentUser() {
+			return (item) => this.isUser(item) && item.id === currentUser?.uid
+		},
+		isUser() {
+			return (item) => item.type === 0
+		},
+	},
 }
 </script>
 
 <style lang="scss" scoped>
-	.userInfo {
-		padding-left: 5px;
+	.usergroup-entry {
 		padding-right: 10px;
-		font-size: 100%;
-		display: flex;
-		flex-direction: column;
-	}
-
-	.high-line-height {
-		line-height: 35px;
 	}
 </style>
diff --git a/src/shared/components/ncTable/partials/rowTypePartials/UsergroupForm.vue b/src/shared/components/ncTable/partials/rowTypePartials/UsergroupForm.vue
@@ -2,7 +2,7 @@
 	<RowFormWrapper :title="column.title" :mandatory="column.mandatory" :description="column.description" :width="2">
 		<NcSelect v-model="localValue" style="width: 100%;" :loading="loading" :options="options"
 			:placeholder="getPlaceholder()" :searchable="true" :get-option-key="(option) => option.key"
-			label="id" :aria-label-combobox="getPlaceholder()"
+			label="displayName" :aria-label-combobox="getPlaceholder()"
 			:user-select="true"
 			:close-on-select="false" :multiple="column.usergroupMultipleItems" data-cy="usergroupRowSelect"
 			@search="asyncFind" @input="addItem">
@@ -75,6 +75,7 @@ export default {
 				id: autocompleteResult.id,
 				type: autocompleteResult.source.startsWith('users') ? 0 : 1,
 				key: autocompleteResult.id,
+				displayName: autocompleteResult.label,
 			}
 		},