diff options
Diffstat (limited to 'app/assets/javascripts/pages/projects/project_members/index.js')
-rw-r--r-- | app/assets/javascripts/pages/projects/project_members/index.js | 92 |
1 files changed, 77 insertions, 15 deletions
diff --git a/app/assets/javascripts/pages/projects/project_members/index.js b/app/assets/javascripts/pages/projects/project_members/index.js index 3e0a48ee6a2..ed11b07be4a 100644 --- a/app/assets/javascripts/pages/projects/project_members/index.js +++ b/app/assets/javascripts/pages/projects/project_members/index.js @@ -1,11 +1,13 @@ import Vue from 'vue'; -import Members from '~/members'; -import memberExpirationDate from '~/member_expiration_date'; -import UsersSelect from '~/users_select'; +import { deprecatedCreateFlash as flash } from '~/flash'; import groupsSelect from '~/groups_select'; -import RemoveMemberModal from '~/vue_shared/components/remove_member_modal.vue'; import initInviteMembersModal from '~/invite_members/init_invite_members_modal'; import initInviteMembersTrigger from '~/invite_members/init_invite_members_trigger'; +import { __ } from '~/locale'; +import memberExpirationDate from '~/member_expiration_date'; +import Members from '~/members'; +import UsersSelect from '~/users_select'; +import RemoveMemberModal from '~/vue_shared/components/remove_member_modal.vue'; function mountRemoveMemberModal() { const el = document.querySelector('.js-remove-member-modal'); @@ -21,14 +23,74 @@ function mountRemoveMemberModal() { }); } -document.addEventListener('DOMContentLoaded', () => { - groupsSelect(); - memberExpirationDate(); - memberExpirationDate('.js-access-expiration-date-groups'); - mountRemoveMemberModal(); - initInviteMembersModal(); - initInviteMembersTrigger(); - - new Members(); // eslint-disable-line no-new - new UsersSelect(); // eslint-disable-line no-new -}); +groupsSelect(); +memberExpirationDate(); +memberExpirationDate('.js-access-expiration-date-groups'); +mountRemoveMemberModal(); +initInviteMembersModal(); +initInviteMembersTrigger(); + +new Members(); // eslint-disable-line no-new +new UsersSelect(); // eslint-disable-line no-new + +if (window.gon.features.vueProjectMembersList) { + const SHARED_FIELDS = ['account', 'expires', 'maxRole', 'expiration', 'actions']; + + Promise.all([ + import('~/members/index'), + import('~/members/utils'), + import('~/projects/members/utils'), + import('~/locale'), + ]) + .then( + ([ + { initMembersApp }, + { groupLinkRequestFormatter }, + { projectMemberRequestFormatter }, + { s__ }, + ]) => { + initMembersApp(document.querySelector('.js-project-members-list'), { + tableFields: SHARED_FIELDS.concat(['source', 'granted']), + tableAttrs: { tr: { 'data-qa-selector': 'member_row' } }, + tableSortableFields: ['account', 'granted', 'maxRole', 'lastSignIn'], + requestFormatter: projectMemberRequestFormatter, + filteredSearchBar: { + show: true, + tokens: ['with_inherited_permissions'], + searchParam: 'search', + placeholder: s__('Members|Filter members'), + recentSearchesStorageKey: 'project_members', + }, + }); + + initMembersApp(document.querySelector('.js-project-group-links-list'), { + tableFields: SHARED_FIELDS.concat('granted'), + tableAttrs: { + table: { 'data-qa-selector': 'groups_list' }, + tr: { 'data-qa-selector': 'group_row' }, + }, + requestFormatter: groupLinkRequestFormatter, + filteredSearchBar: { + show: true, + tokens: [], + searchParam: 'search_groups', + placeholder: s__('Members|Search groups'), + recentSearchesStorageKey: 'project_group_links', + }, + }); + + initMembersApp(document.querySelector('.js-project-invited-members-list'), { + tableFields: SHARED_FIELDS.concat('invited'), + requestFormatter: projectMemberRequestFormatter, + }); + + initMembersApp(document.querySelector('.js-project-access-requests-list'), { + tableFields: SHARED_FIELDS.concat('requested'), + requestFormatter: projectMemberRequestFormatter, + }); + }, + ) + .catch(() => { + flash(__('An error occurred while loading the members, please try again.')); + }); +} |