Project

General

Profile

1
<div id="page_content">
2

    
3
  <div class="repositoryAdminMenu">
4

    
5
    <div class="uk-margin-medium-left uk-margin-medium-right">
6
      <div class="uk-padding-small">
7
        <h3 class="heading_b">
8
          Metrics Admin
9
        </h3>
10
      </div>
11

    
12
      <div id="top_bar">
13
        <div class="md-top-bar">
14
          <div class="uk-width-1-2@l uk-margin-auto">
15
            <form [formGroup]="dataForm" (ngSubmit)="handleChangeAndResetPage()" class="uk-search uk-search-default uk-width-1-1@m">
16
              <div class="md-input-wrapper">
17
                <label for="repository_name_search">Search...</label>
18
                <input class="md-input" type="search" id="repository_name_search" formControlName="searchField">
19
                <span class="md-input-bar"></span>
20
              </div>
21

    
22
            </form>
23
          </div>
24
        </div>
25
      </div>
26
    </div>
27

    
28
  </div>
29

    
30
  <div id="page_content_inner" class="whiteBackground uk-padding-remove-left uk-padding-remove-right">
31

    
32
    <div class="uk-section uk-background-norepeat uk-background-cover uk-background-top-center"
33
         style="background-image: url('../../../assets/imgs/landing/abstract2.svg'); !important; min-height: calc(80vh);" uk-height-viewport="offset-top: true; offset-bottom: 20;">
34

    
35
      <!-- TOP HELP CONTENT -->
36
      <help-content #topHelperContent [position]="'top'"
37
                    [ngClass]="topHelperContent.isPresent()?'uk-margin-medium-top uk-margin-medium-bottom':'clear-style'">
38
      </help-content>
39

    
40
      <div class="uk-grid">
41

    
42
        <!-- LEFT HELP CONTENT -->
43
        <aside-help-content #leftHelperContent [position]="'left'"
44
                            [ngClass]="leftHelperContent.isPresent()?'tm-sidebar uk-width-1-4@m uk-first-column':'clear-style'">
45
        </aside-help-content>
46

    
47
        <!-- MIDDLE -->
48
        <div class="uk-width-expand@m">
49

    
50
          <div *ngIf="errorMessage" class="uk-alert uk-alert-danger">{{ errorMessage }}</div>
51
          <div *ngIf="successMessage" class="uk-alert uk-alert-success">{{ successMessage }}</div>
52

    
53
          <div *ngIf="!errorMessage" class="uk-container">
54

    
55
            <div class="">
56
              <div class="">
57

    
58
                <div class="uk-margin-medium uk-margin-top repositoryAdminActions">
59

    
60
                  <form [formGroup]="dataForm" class="uk-form-horizontal uk-flex">
61

    
62
                    <div class="uk-margin-right">
63
                      <div class="">
64
                        <label class="" for="quantity">Results per page </label>
65
                        <div class="uk-inline">
66
                          <select class="uk-select" id="quantity" (change)="handleChangeAndResetPage()" formControlName="quantity">
67
                            <option value="10">10</option>
68
                            <option value="25" selected>25</option>
69
                            <option value="50">50</option>
70
                            <option value="100">100</option>
71
                          </select>
72
                        </div>
73
                      </div>
74
                    </div>
75

    
76
                    <div class="uk-margin-right">
77

    
78
                      <div class="uk-inline uk-margin-right">
79
                        <label class="" for="orderBy">Order by </label>
80
                        <div class="uk-inline">
81
                          <select class="uk-select" id="orderBy" (change)="handleChangeAndResetPage()" formControlName="order">
82
                            <option value="DSC" selected>Descending</option>
83
                            <option value="ASC">Ascending</option>
84
                          </select>
85
                        </div>
86
                      </div>
87

    
88
                      <div class="uk-inline">
89
                        <label class="" for="orderField">Sort by </label>
90
                        <div class="uk-inline">
91
                          <select class="uk-select" id="orderField" (change)="handleChangeAndResetPage()" formControlName="orderField">
92
                            <option value="CREATION_DATE" selected>Date</option>
93
                            <option value="REPOSITORY_NAME">Name</option>
94
                          </select>
95
                        </div>
96
                      </div>
97

    
98
                    </div>
99

    
100
                    <div class="" style="margin-left:auto; margin-right:0;">
101
                      <button class="uk-button uk-button-link" (click)="downloadCSV()">
102
                        <i class="fas fa-download uk-margin-small-right"></i>Export to CSV
103
                      </button>
104
                    </div>
105

    
106
                  </form>
107

    
108

    
109
                </div>
110

    
111
                <div class="uk-width-1-1@m">
112

    
113
                  <div style="display: flex;justify-content: space-between;">
114

    
115
                    <div *ngIf="piwiks" class="resultsInfo" style="margin-top: auto;">
116
                      <span class="number">{{piwiks.total}}</span> RESULTS, PAGE <span class="number">{{(dataForm.get('page').value)*1 + 1}}</span> OF <span class="number">{{pages.length}}</span>
117
                    </div>
118

    
119
                    <div class="uk-inline">
120
                      <ul class="uk-pagination" uk-margin>
121
                        <li><a (click)="previousPage()" class="pagination_arrow"><span uk-pagination-previous></span></a></li>
122
                        <li [ngClass]="{'uk-active': (this.dataForm.get('page').value == page) }" *ngFor="let page of pages">
123
                          <a (click)="selectPage(page)">{{page+1}}</a>
124
                        </li>
125
                        <li><a (click)="nextPage()" class="pagination_arrow"><span uk-pagination-next></span></a></li>
126
                      </ul>
127
                    </div>
128

    
129
                  </div>
130

    
131

    
132
                  <hr class="adminResultsHeader">
133

    
134
                  <div *ngIf="loadingMessage" class="loading-big">
135
                    <div class="loader-big" style="text-align: center; padding-top: 170px; color: rgb(47, 64, 80); font-weight: bold;">
136
                      {{ loadingMessage }}
137

    
138
                    </div>
139
                    <div class="transparentFilm"></div>
140
                  </div>
141

    
142

    
143
                  <!-- REPOSITORY CARD -->
144
                  <ng-container *ngIf="piwiks && piwiks.results.length>0">
145
                    <div *ngFor="let piwik of piwiks.results" class="md-card repositoryCard">
146
                      <div class="md-card-content large-padding">
147
                        <div class="uk-text-meta">
148
                          Requested on: {{ piwik.creationDate | date : "yyyy-MM-dd" }}
149
                          <ng-container *ngIf="piwik.validated">
150
                            . Validated on: {{ piwik.validationDate | date : "yyyy-MM-dd" }}
151
                          </ng-container>
152
                        </div>
153
                        <div>
154
                          <div class="repositoryCardHeader uk-margin-bottom uk-margin-small-top uk-inline">
155
                            <a *ngIf="piwik.validated" [routerLink]="['/repositoryAdmin/' + piwik.repositoryId + '/getImpact/show']">{{ piwik.repositoryName }}</a>
156
                            <a *ngIf="!piwik.validated" [routerLink]="['/repositoryAdmin/' + piwik.repositoryId + '/getImpact/instructions']">{{ piwik.repositoryName }}</a>
157
                          </div>
158
                          <ng-container *ngIf="!piwik.validated">
159
                            <button class="uk-button uk-button-primary validate uk-inline uk-float-right" (click)="confirmApproval(piwik.repositoryId)">Validate</button>
160
                          </ng-container>
161
                        </div>
162

    
163
                        <div class="uk-margin-small-bottom"><span class="uk-badge uk-badge-primary uk-badge-notification uk-margin-small-right">ID</span>{{ piwik.repositoryId }}</div>
164
                        <div class="uk-margin-small-bottom"><span class="mute-title">Requestor: </span><span class="small-content">{{ piwik.requestorName }} - {{ piwik.requestorEmail }}</span></div>
165
                        <div class="uk-margin-small-bottom"><span class="mute-title">Matomo ID: </span><span class="small-content">{{ piwik.siteId }}</span></div>
166
                        <div class=""><span class="mute-title">Authentication Token: </span><span class="small-content">{{ piwik.authenticationToken }}</span></div>
167
                      </div>
168
                    </div>
169
                  </ng-container>
170

    
171

    
172
                  <ul class="uk-pagination uk-margin-top uk-flex-right" uk-margin>
173
                    <li><a (click)="previousPage()" class="pagination_arrow"><span uk-pagination-previous></span></a></li>
174
                    <li [ngClass]="{'uk-active': (this.dataForm.get('page').value == page) }" *ngFor="let page of pages">
175
                      <a (click)="selectPage(page)">{{page+1}}</a>
176
                    </li>
177
                    <li><a (click)="nextPage()" class="pagination_arrow"><span uk-pagination-next></span></a></li>
178
                  </ul>
179

    
180
                </div>
181

    
182
              </div>
183
            </div>
184
          </div>
185

    
186
        </div>
187

    
188
        <!-- RIGHT HELP CONTENT -->
189
        <aside-help-content #rightHelperContent [position]="'right'"
190
                            [ngClass]="rightHelperContent.isPresent()?'tm-sidebar uk-width-1-4@m uk-first-column':'clear-style'">
191
        </aside-help-content>
192

    
193
      </div>
194

    
195
      <!-- BOTTOM HELP CONTENT -->
196
      <help-content #bottomHelperContent [position]="'bottom'"
197
                    [ngClass]="bottomHelperContent.isPresent()?'uk-margin-medium-top uk-margin-medium-bottom':'clear-style'">
198
      </help-content>
199

    
200
    </div>
201

    
202

    
203
  </div>
204
</div>
205

    
206
<confirmation-dialog #confirmApprovalModal [title]="modalTitle" [isModalShown]="isModalShown"
207
                     [confirmActionButton]="modalButton" (emitObject)="confirmedApproval($event)">
208
  Are you sure you want to validate the selected piwik site(s)?
209
</confirmation-dialog>
(1-1/8)