diff options
Diffstat (limited to 'app/assets/javascripts/members/components/table/members_table.vue')
-rw-r--r-- | app/assets/javascripts/members/components/table/members_table.vue | 43 |
1 files changed, 33 insertions, 10 deletions
diff --git a/app/assets/javascripts/members/components/table/members_table.vue b/app/assets/javascripts/members/components/table/members_table.vue index da77e5caad2..16e0cd5ad4e 100644 --- a/app/assets/javascripts/members/components/table/members_table.vue +++ b/app/assets/javascripts/members/components/table/members_table.vue @@ -34,7 +34,16 @@ export default { computed: { ...mapState(['members', 'tableFields', 'tableAttrs', 'currentUserId', 'sourceId']), filteredFields() { - return FIELDS.filter(field => this.tableFields.includes(field.key) && this.showField(field)); + return FIELDS.filter( + (field) => this.tableFields.includes(field.key) && this.showField(field), + ).map((field) => { + const tdClassFunction = this[field.tdClassFunction]; + + return { + ...field, + ...(tdClassFunction && { tdClass: tdClassFunction }), + }; + }); }, userIsLoggedIn() { return this.currentUserId !== null; @@ -44,6 +53,14 @@ export default { initUserPopovers(this.$el.querySelectorAll('.js-user-link')); }, methods: { + hasActionButtons(member) { + return ( + canRemove(member, this.sourceId) || + canResend(member) || + canUpdate(member, this.currentUserId, this.sourceId) || + canOverride(member) + ); + }, showField(field) { if (!Object.prototype.hasOwnProperty.call(field, 'showFunction')) { return true; @@ -56,14 +73,20 @@ export default { return false; } - return this.members.some(member => { - return ( - canRemove(member, this.sourceId) || - canResend(member) || - canUpdate(member, this.currentUserId, this.sourceId) || - canOverride(member) - ); - }); + return this.members.some((member) => this.hasActionButtons(member)); + }, + tdClassActions(value, key, member) { + if (this.hasActionButtons(member)) { + return 'col-actions'; + } + + return ['col-actions', 'gl-display-none!', 'gl-display-lg-table-cell!']; + }, + tbodyTrAttr(member) { + return { + ...this.tableAttrs.tr, + ...(member?.id && { 'data-testid': `members-table-row-${member.id}` }), + }; }, }, }; @@ -83,7 +106,7 @@ export default { thead-class="border-bottom" :empty-text="__('No members found')" show-empty - :tbody-tr-attr="tableAttrs.tr" + :tbody-tr-attr="tbodyTrAttr" > <template #cell(account)="{ item: member }"> <members-table-cell #default="{ memberType, isCurrentUser }" :member="member"> |