Project

General

Profile

1 61381 k.triantaf
<div page-content>
2
  <div header>
3
    <ng-content></ng-content>
4
    <div class="uk-grid uk-flex uk-flex-middle" uk-grid>
5
      <div class="uk-width-expand@m  uk-width-1-1 uk-flex uk-flex-left@m uk-flex-center">
6
        <ul class="uk-subnav uk-subnav-pill">
7
          <li [class.uk-active]="showCurrent" (click)="showCurrent = true">
8
            <a class="uk-text-capitalize">{{role}}s</a>
9
          </li>
10
          <li [class.uk-active]="!showCurrent" (click)="showCurrent = false">
11
            <a>Pending {{role}}s</a>
12
          </li>
13
        </ul>
14
      </div>
15
      <div [class.uk-invisible]="loadActive || loadPending"
16
           class="uk-width-auto@m uk-width-1-1 uk-child-width-auto@m uk-child-width-1-1 uk-grid uk-flex-right@m uk-flex-center" uk-grid>
17
        <div *ngIf="showCurrent" search-input [control]="filterForm.get('active')" [showSearch]="false" [placeholder]="'Search ' + role + 's'"
18
             [bordered]="true" colorClass="uk-text-secondary">
19
        </div>
20
        <div *ngIf="!showCurrent" search-input [control]="filterForm.get('active')"  [showSearch]="false" [placeholder]="'Search invitations'"
21
             [bordered]="true" colorClass="uk-text-secondary">
22
        </div>
23
        <a *ngIf="exists" class="uk-text-uppercase uk-flex uk-flex-middle uk-flex-center" [attr.uk-tooltip]="inviteDisableMessage">
24
          <button class="uk-icon-button large uk-button-secondary" [disabled]="loadPending || !!inviteDisableMessage" (click)="openInviteModal()">
25
            <icon name="person_add"></icon>
26
          </button>
27
          <button class="uk-button uk-button-link uk-margin-small-left" [class.uk-text-secondary]="!loadPending && !inviteDisableMessage"
28
                  [disabled]="loadPending || !!inviteDisableMessage" (click)="openInviteModal()">
29
            Invite {{role}}
30
          </button>
31
        </a>
32
        <a *ngIf="!exists && isPortalAdmin" class="uk-text-uppercase uk-flex uk-flex-middle uk-flex-center">
33
          <button class="uk-icon-button large uk-button-secondary" (click)="openCreateRoleModal()">
34
            <icon name="person_add"></icon>
35
          </button>
36
          <button class="uk-button uk-button-link uk-margin-small-left uk-text-secondary" (click)="openCreateRoleModal()">Create Group</button>
37
        </a>
38
      </div>
39
    </div>
40
  </div>
41
  <div inner>
42
    <div *ngIf="loadActive || loadPending" class="uk-position-center">
43
      <loading></loading>
44
    </div>
45
    <div *ngIf="!loadActive && !loadPending">
46
      <div *ngIf="(showCurrent && showActive.length == 0) || (!showCurrent && showPending.length == 0)"
47
           class="uk-card uk-card-default uk-padding-large uk-text-center uk-margin-bottom uk-text-bold">
48
        <div *ngIf="showCurrent">No {{role}}s found</div>
49
        <div *ngIf="!showCurrent">No pending {{role}} invitations found</div>
50
      </div>
51
      <div *ngIf="(showCurrent && showActive.length > 0) || (!showCurrent && showPending.length > 0)">
52
        <no-load-paging *ngIf="showCurrent" [type]="(showActive.length > 1)?(role + 's'):role"
53
                        (pageChange)="updateActivePage($event)"
54
                        [page]="activePage" [pageSize]="pageSize"
55
                        [totalResults]="showActive.length">
56
        </no-load-paging>
57
        <no-load-paging *ngIf="!showCurrent" [type]="role + ' ' + (showPending.length > 1?'invitations':'invitation')"
58
                        (pageChange)="updatePendingPage($event)"
59
                        [page]="pendingPage" [pageSize]="pageSize"
60
                        [totalResults]="showPending.length">
61
        </no-load-paging>
62
        <div class="uk-card uk-card-default uk-card-body uk-text-small uk-margin-bottom"
63
             *ngFor="let item of (showCurrent)?(currentActivePage):(currentPendingPage)">
64
          <div class="uk-grid uk-grid-divider uk-flex-middle" uk-grid>
65
            <div class="uk-width-expand@m uk-width-1-1">
66
              <div class="uk-padding-small uk-padding-remove-horizontal">
67
                <span class="uk-text-muted">Email: </span>
68
                <span class="uk-text-bold">{{(showCurrent) ? item.email : item}}</span>
69
              </div>
70
            </div>
71
            <div *ngIf="isCurator || !showCurrent" class="uk-width-auto@m uk-width-1-1">
72
              <div class="uk-width-1-1 uk-flex uk-flex-center">
73
                <div class="uk-padding-small uk-padding-remove-horizontal">
74
                  <button (click)="openDeleteModal(item)" class="uk-button action uk-flex uk-flex-middle"  [disabled]="role === 'member' && item.isManager"
75
                          [attr.uk-tooltip]="(role === 'member' && item.isManager)?'This user is a manager and cannot be removed.':null">
76
                    <icon name="remove_circle_outline" [flex]="true"></icon>
77
                    <span class="uk-margin-small-left">{{showCurrent ? ('Remove ' + role) : 'Cancel invitation'}}</span>
78
                  </button>
79
                </div>
80
              </div>
81
            </div>
82
          </div>
83
        </div>
84
        <no-load-paging *ngIf="showCurrent" [type]="(showActive.length > 1)?(role + 's'):role"
85
                        (pageChange)="updateActivePage($event)"
86
                        [page]="activePage" [pageSize]="pageSize"
87
                        [totalResults]="showActive.length">
88
        </no-load-paging>
89
        <no-load-paging *ngIf="!showCurrent" [type]="role + ' ' + (showPending.length > 1?'invitations':'invitation')"
90
                        (pageChange)="updatePendingPage($event)"
91
                        [page]="pendingPage" [pageSize]="pageSize"
92
                        [totalResults]="showPending.length">
93
        </no-load-paging>
94
      </div>
95
    </div>
96
  </div>
97
</div>
98
<modal-alert #inviteModal (alertOutput)="invite()" [okDisabled]="invited && invited.invalid">
99
  <div class="uk-padding uk-padding-remove-horizontal">
100
    <div *ngIf="message" class="uk-margin-medium-bottom uk-text-small">
101
      <div [innerHTML]="message | safeHtml"></div>
102
    </div>
103
    <div *ngIf="invited" class="uk-text-center">
104
      <div dashboard-input [formInput]="invited"
105
           placeholder="Write an email..."></div>
106
    </div>
107
  </div>
108
</modal-alert>
109
<modal-alert #deleteModal (alertOutput)="deleteActive()">
110
  <div *ngIf="selectedUser" class="uk-padding-small uk-padding-remove-horizontal">
111
    Are you sure you want to remove <span class="uk-text-bold">{{selectedUser}}</span> from {{role}}s?
112
  </div>
113
</modal-alert>
114
<modal-alert #deletePendingModal (alertOutput)="deletePending()">
115
  <div *ngIf="selectedUser" class="uk-padding-small uk-padding-remove-horizontal">
116
    Are you sure you want to cancel {{role}} invitation of <span class="uk-text-bold">{{selectedUser}}</span>?
117
  </div>
118
</modal-alert>
119
<modal-alert #createRoleModal (alertOutput)="createGroup()" [okDisabled]="roleFb && roleFb.invalid">
120
  <div *ngIf="roleFb" class="uk-padding uk-padding-remove-horizontal">
121
    <div class="uk-grid" uk-grid [formGroup]="roleFb">
122
      <div dashboard-input [formInput]="roleFb.get('name')"
123
           label="Name"
124
           placeholder="Write a name..." class="uk-width-1-1"></div>
125
      <div dashboard-input [formInput]="roleFb.get('description')"
126
           label="Description"
127
           type="textarea"
128
           placeholder="Write a description..." class="uk-width-1-1"></div>
129
    </div>
130
  </div>
131
</modal-alert>