Press n or j to go to the next uncovered block, b, p or k for the previous block.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 | 1x 5x 1x | <!-- eslint-disable vue/multi-word-component-names --> <script> import { GlSkeletonLoader, GlTable, GlAvatar } from '@gitlab/ui'; // eslint-disable-next-line no-restricted-imports import { mapState, mapActions } from 'vuex'; import { __, s__ } from '~/locale'; import TablePagination from '~/vue_shared/components/pagination/table_pagination.vue'; export default { components: { GlSkeletonLoader, GlTable, GlAvatar, TablePagination, }, computed: { ...mapState(['isInitialLoadInProgress', 'members', 'pageInfo']), }, fields: [ { key: 'name', label: __('User'), }, { key: 'identity', label: s__('GroupSAML|Identifier'), }, ], mounted() { this.fetchPage(); }, methods: { ...mapActions(['fetchPage']), change(nextPage) { this.fetchPage(nextPage); }, }, }; </script> <template> <div class="gl-mt-3"> <gl-skeleton-loader v-if="isInitialLoadInProgress" /> <gl-table v-else :items="members" :fields="$options.fields"> <template #cell(name)="{ item }"> <span class="d-flex"> <gl-avatar :src="item.avatar_url" :size="48" /> <div class="ml-2"> <div class="font-weight-bold"> <a class="js-user-link" :href="item.web_url" :data-user-id="item.id" :data-username="item.username" > {{ item.name }} </a> </div> <div class="cgray">@{{ item.username }}</div> </div> </span> </template> <template #cell(identity)="{ value }"> <span class="font-weight-bold">{{ value }}</span> </template> </gl-table> <table-pagination :page-info="pageInfo" :change="change" /> </div> </template> |