Project

General

Profile

1
<div id="page_content" click-outside-or-esc targetId="page_content">
2
  <div class="uk-padding-small md-bg-white" uk-grid>
3

    
4
    <div class="uk-width-expand@m uk-width-1-1 uk-flex uk-flex-middle uk-flex-right">
5
      <div class="uk-inline uk-width-medium">
6
        <span class="uk-position-center-right"><i class="material-icons">search</i></span>
7
        <div dashboard-input [formInput]="filterForm" label="Find page"></div>
8
      </div>
9

    
10
    </div>
11
  </div>
12

    
13
  <div id="page_content_inner">
14
    <div *ngIf="!errorMessage && !showLoading" class="page-controls">
15
      <div class="  filters ">
16
        <div class="show-options uk-float-right">
17
          <button class="uk-button uk-button-primary" type="button">Bulk Actions</button>
18
          <div uk-dropdown="mode: click">
19
            <ul class="uk-nav uk-navbar-dropdown-nav uk-margin-left"
20
                [attr.uk-tooltip]="getSelectedPages().length == 0 ? 'pos:left; cls: uk-active' : 'cls: uk-invisible'"
21
                title="Select at least one page">
22
              <li *ngIf="!isPortalAdministrator"><a [class]="getSelectedPages().length == 0 ? 'uk-disabled' : ''"
23
                                                    (click)="togglePages(true, getSelectedPages())"><i></i> Activate
24
              </a></li>
25
              <li *ngIf="!isPortalAdministrator"><a [class]="getSelectedPages().length == 0 ? 'uk-disabled' : ''"
26
                                                    (click)="togglePages(false, getSelectedPages())"><i></i> Deactivate
27
              </a></li>
28
              <li *ngIf="isPortalAdministrator"><a (click)="confirmDeleteSelectedPages()"><i></i> Delete </a></li>
29
            </ul>
30
          </div>
31
        </div>
32
      </div>
33
    </div>
34
    <h4 class="uk-text-bold uk-text-upper">{{pagesType}} Pages</h4>
35
    <div *ngIf="updateErrorMessage" class="uk-alert-danger" uk-alert>
36
      <a class="uk-alert-close" uk-close></a>
37
      {{updateErrorMessage}}
38
    </div>
39

    
40
    <div class="content-wrapper" id="contentWrapper">
41
      <div>
42
        <div class="contentPanel uk-margin-top">
43

    
44

    
45
          <div *ngIf="!isPortalAdministrator" class="uk-alert uk-alert-primary uk-margin-top-large">
46
            <div>
47
              <span class="uk-margin-small-right uk-icon" uk-icon="warning"></span>
48
              Disable a page to hide it from community dashboard portal.
49
            </div>
50
            <div
51
              class="uk-text-small">If the page is disabled, a message "Can't find that page" will appear in case the url of that page is loaded. If the disabled page belongs to the menu, the link will be removed from menu, too.
52
            </div>
53

    
54
          </div>
55
          <div *ngIf="errorMessage" class="uk-alert uk-alert-danger  uk-margin-large-top"
56
               role="alert">{{errorMessage}}</div>
57
          <div [style.display]="showLoading ? 'inline' : 'none'"
58
               class="uk-animation-fade uk-margin-large-top  uk-width-1-1" role="alert"><img
59
            class="uk-align-center loading-gif"></div>
60
          <div class="md-card uk-margin-medium-bottom" *ngIf="!errorMessage && !showLoading">
61
            <div class="md-card-content">
62
              <div class="uk-overflow-container">
63
                <table class="uk-table uk-table-striped">
64
                  <thead>
65
                  <tr>
66
                    <th><input id="allPageCheckbox" type="checkbox" (change)="toggleCheckBoxes($event)"></th>
67
                    <th>Name</th>
68
                    <th *ngIf="!isPortalAdministrator">Change status</th>
69
                    <th *ngIf="!pagesType">Type</th>
70
                    <th *ngIf="!isPortalAdministrator">Related Entities</th>
71
                    <th>Route</th>
72
                    <th *ngIf="!selectedCommunityPid">Portal Type</th>
73
                    <th *ngIf="isPortalAdministrator">Actions</th>
74
                    <th *ngIf="!isPortalAdministrator" class="uk-text-center">Page help texts</th>
75
                    <th *ngIf="!isPortalAdministrator && (pageWithDivIds && pageWithDivIds.length > 0)"
76
                        class="uk-text-center">Class help texts
77
                    </th>
78
                  </tr>
79
                  </thead>
80
                  <tbody>
81
                  <tr *ngFor="let check of checkboxes; let i=index">
82
                    <td><input id="{{check.page._id}}" class="checkBox" type="checkbox"
83
                               name="pagescb[]" value="{{check.page._id}}" [(ngModel)]="check.checked">
84
                    </td>
85
                    <td>
86
                      <div class="name" href="#">{{check.page.name}}</div>
87
                    </td>
88
                    <td *ngIf="!isPortalAdministrator">
89
                      <mat-slide-toggle [checked]="check.page.isEnabled"
90
                                        (change)="($event.source.checked = check.page.isEnabled);togglePages(!check.page.isEnabled,[check.page._id])"></mat-slide-toggle>
91
                    </td>
92
                    <td *ngIf="!pagesType">
93
                      <div class="type" href="#">{{check.page.type}}</div>
94
                    </td>
95
                    <td *ngIf="!isPortalAdministrator">
96
                      <div class="entities" href="#">
97
                        <span *ngFor="let entity of check.page.entities let i=index">{{entity.name}}<span
98
                          *ngIf="i<(check.page.entities.length-1)">, </span></span>
99
                      </div>
100
                    </td>
101
                    <td>
102
                      <div class="route" href="#">{{check.page.route}}</div>
103
                    </td>
104
                    <td *ngIf="!selectedCommunityPid">
105
                      <div class="portalType" href="#">{{check.page.portalType}}</div>
106
                    </td>
107

    
108
                    <td *ngIf="isPortalAdministrator">
109
                      <div class="actions" href="#">
110
                        <i class="md-icon material-icons" (click)="editPage(i)"></i>
111
                        <i class="material-icons md-icon"
112
                           (click)="confirmDeletePage(check.page._id)">delete</i>
113
                      </div>
114
                    </td>
115
                    <td *ngIf="!isPortalAdministrator" class="uk-text-center">
116
                      <a *ngIf="check.page.top || check.page.bottom || check.page.left || check.page.right"
117
                         class="helpContents"
118
                         [queryParams]="{communityId: selectedCommunityPid, pageId: check.page._id}"
119
                         routerLink="/helptexts">
120
                        add help texts
121
                      </a>
122
                      <span
123
                        *ngIf="!check.page.top && !check.page.bottom && !check.page.left && !check.page.right">-</span>
124
                    </td>
125
                    <td *ngIf="!isPortalAdministrator && (pageWithDivIds && pageWithDivIds.length > 0)"
126
                        class="uk-text-center">
127
                      <a *ngIf="pageWithDivIds.includes(check.page._id)" class="classHelpContents"
128
                         [queryParams]="{communityId: selectedCommunityPid, pageId: check.page._id}"
129
                         routerLink="/classContents">add class contents</a>
130
                      <span *ngIf="!pageWithDivIds.includes(check.page._id)">-</span>
131
                    </td>
132
                  </tr>
133
                  </tbody>
134
                </table>
135

    
136
                <div *ngIf="checkboxes.length==0" class="col-md-12">
137
                  <div class="uk-alert-warning" uk-alert>No pages found</div>
138
                </div>
139
                <div class="uk-width-1-1 uk-flex uk-flex-center ">
140
                  <div class="uk-width-small uk-flex uk-flex-center uk-button" (click)="newPage()">
141
                    <i class="material-icons md-48">add</i>
142
                  </div>
143
                </div>
144
              </div>
145
            </div>
146
          </div>
147
        </div>
148
      </div>
149
    </div>
150
  </div>
151
</div>
152

    
153

    
154
<modal-alert #AlertModalSavePage (alertOutput)="pageSaveConfirmed($event)" [okDisabled]="myForm && (myForm.invalid || !myForm.dirty)">
155
  <div *ngIf="modalErrorMessage" class="uk-alert-danger" uk-alert aria-hidden="true">{{ modalErrorMessage }}</div>
156
  <form [formGroup]="myForm">
157

    
158
    <div dashboard-input class="uk-margin-small-left" [formInput]="myForm.get('route')"
159
         type="text"
160
         label="Page route">
161
    </div>
162

    
163
    <div dashboard-input class="uk-margin-small-left" [formInput]="myForm.get('name')"
164
         type="text"
165
         label="Page Name">
166
    </div>
167

    
168
    <div dashboard-input class="uk-margin-small-left" [formInput]="myForm.get('type')"
169
         type="select"
170
         label="Type" [options]="typeOptions">
171
    </div>
172
    <mat-form-field class="example-chip-list uk-width-1-1  uk-margin-small-left">
173
      <mat-chip-list #chipList aria-label="Page selection">
174
        <mat-chip
175
          *ngFor="let entity of selectedEntities"
176
          [selectable]="true"
177
          [removable]="true">
178
          {{entity.name}}
179
          <span (click)="remove(entity)"
180
                class="mat-icon notranslate mat-chip-remove mat-chip-trailing-icon material-icons mat-icon-no-color ng-star-inserted">cancel</span>
181
        </mat-chip>
182
        <input placeholder="Add in  pages..." #PageInput
183
               [formControl]="entitiesSearchCtrl" [matAutocomplete]="auto" [matChipInputFor]="chipList">
184
      </mat-chip-list>
185
      <mat-autocomplete #auto="matAutocomplete" (optionSelected)="selected($event)">
186
        <mat-option *ngFor="let entity of  filteredEntities| async" [value]="entity">
187
          {{entity.name}}
188
        </mat-option>
189
      </mat-autocomplete>
190
    </mat-form-field>
191
    <!--<div formArrayName="entities" class="form-group">
192
      <label for="entityNameTag">Entity Name</label>
193
      <div id="entityNameTag">
194
        <pre class="card card-block card-header"><span *ngFor="let entity of myForm.value.entities; let i=index">{{entity.name}}<span *ngIf="i<(myForm.value.entities.length-1)">, </span></span></pre>
195

    
196
        <button type="button" (click)="toggle()">Add / Remove entities</button>
197

    
198
        <ng-container *ngIf="!myForm.value.isCollapsed">
199
          <div *ngIf="errorMessage" class="uk-alert uk-alert-danger" role="alert">{{errorMessage}}</div>
200
          <div [style.display]="showLoading ? 'inline' : 'none'" class="uk-animation-fade uk-width-1-1" role="alert"><img class="uk-align-center loading-gif"></div>
201

    
202
          <div *ngFor="let entity of getKeys(allEntities)">
203
              <span>
204
                <span *ngIf="allEntities.get(entity)" class="activated" >
205
                    <input (click)="toggleEntity(false,[entity._id], entity)" class="deactivate" src="assets/imgs/delete-icon.png" title="Disable" width="20" type="image" height="20">
206
                </span>
207
                <span *ngIf="!allEntities.get(entity)" class="deactivated" >
208
                    <input (click)="toggleEntity(true,[entity._id], entity)" class="deactivate" src="assets/imgs/add-icon.png" title="Enable" width="20" type="image" height="20">
209
                </span>
210
                {{entity.name}}
211
              </span>
212
          </div>
213
        </ng-container>
214
      </div>
215
    </div>-->
216

    
217
<!--    <div class="form-group" uk-grid>-->
218
<!--      <label class="uk-width-1-1 uk-margin-small-bottom">-->
219
<!--        Select positions of help contents for this page.-->
220
<!--      </label>-->
221
<!--      <label class="uk-text-danger uk-margin-small-bottom">-->
222
<!--        By disabling a position, all contents in this position will be deleted.-->
223
<!--      </label>-->
224
<!--      <label class="uk-width-1-4 checkbox">-->
225
<!--        <span class="uk-margin-small-right" style="font-weight: normal;">Top</span>-->
226
<!--        <input tabindex="0" type="checkbox" formControlName="top">-->
227
<!--      </label>-->
228
<!--      <label class="uk-width-1-4 checkbox">-->
229
<!--        <span class="uk-margin-small-right" style="font-weight: normal;">Bottom</span>-->
230
<!--        <input tabindex="0" type="checkbox" formControlName="bottom">-->
231
<!--      </label>-->
232
<!--      <label class="uk-width-1-4 checkbox">-->
233
<!--        <span class="uk-margin-small-right" style="font-weight: normal;">Left</span>-->
234
<!--        <input tabindex="0" type="checkbox" formControlName="left">-->
235
<!--      </label>-->
236
<!--      <label class="uk-width-1-4 checkbox">-->
237
<!--        <span class="uk-margin-small-right" style="font-weight: normal;">Right</span>-->
238
<!--        <input tabindex="0" type="checkbox" formControlName="right">-->
239
<!--      </label>-->
240
<!--    </div>-->
241
    <div class="form-group" >
242
      <label class="uk-text-danger uk-margin-small-bottom">
243
        By disabling a position, all contents in this position will be deleted.
244
      </label>
245
      <div class="uk-text-muted"> Select if this page exists in:</div>
246
      <span dashboard-input class="" [formInput]="myForm.get('top')"
247
            type="checkbox"
248
            label="Top">
249
      </span>
250
      <span dashboard-input class="uk-margin-small-left" [formInput]="myForm.get('right')"
251
            type="checkbox"
252
            label="Right">
253
      </span>
254
      <span dashboard-input class="uk-margin-small-left" [formInput]="myForm.get('bottom')"
255
            type="checkbox"
256
            label="Bottom">
257
      </span>
258
      <span dashboard-input class="uk-margin-small-left" [formInput]="myForm.get('left')"
259
            type="checkbox"
260
            label="Left">
261
      </span>
262

    
263
    </div>
264
<!--    <div class="form-group">-->
265

    
266
<!--      <div class="uk-text-muted"> Select if this page exists in:</div>-->
267
<!--      <span dashboard-input class="" [formInput]="myForm.get('openaire')"-->
268
<!--            type="checkbox"-->
269
<!--            label="Explore Portal">-->
270
<!--      </span>-->
271
<!--      <span dashboard-input class="uk-margin-small-left" [formInput]="myForm.get('connect')"-->
272
<!--            type="checkbox"-->
273
<!--            label="Connect Portal">-->
274
<!--      </span>-->
275
<!--      <span dashboard-input class="uk-margin-small-left" [formInput]="myForm.get('communities')"-->
276
<!--            type="checkbox"-->
277
<!--            label="Communities Dashboards">-->
278
<!--      </span>-->
279
<!--    </div>-->
280

    
281
    <div [ngClass]="{'has-error':!myForm.controls.portalType.valid && myForm.controls.portalType.dirty}" class="form-group" uk-grid>
282
      <label class="uk-width-1-1 uk-margin-small-bottom">
283
        Page exists in:
284
      </label>
285
      <label class="uk-width-1-1 radio uk-margin-large-left">
286
        <span class="uk-margin-small-right" style="font-weight: normal;">OpenAIRE portal</span>
287
        <!--        <input tabindex="0" type="checkbox" formControlName="openaire">-->
288
        <input type="radio" value="explore" formControlName="portalType">
289
      </label>
290
      <label class="uk-width-1-1 radio uk-margin-large-left">
291
        <span class="uk-margin-small-right" style="font-weight: normal;">OpenAIRE Connect portal</span>
292
        <!--        <input tabindex="0" type="checkbox" formControlName="connect">-->
293
        <input type="radio" value="connect" formControlName="portalType">
294
      </label>
295
      <label class="uk-width-1-1 radio uk-margin-large-left">
296
        <span class="uk-margin-small-right" style="font-weight: normal;">Communities' Gateway</span>
297
        <!--        <input tabindex="0" type="checkbox" formControlName="communities">-->
298
        <input type="radio" value="community" formControlName="portalType">
299
      </label>
300
    </div>
301

    
302
    <input type="hidden" formControlName="_id">
303
  </form>
304

    
305
</modal-alert>
306

    
307
<!--<modal-alert #AlertModalUpdatePage (alertOutput)="pageUpdateConfirmed($event)">-->
308
<!--  <div *ngIf="modalErrorMessage" class="uk-alert-danger" uk-alert aria-hidden="true">{{ modalErrorMessage }}</div>-->
309
<!--  <page-form [group]="myForm"></page-form>-->
310
<!--</modal-alert>-->
311

    
312
<modal-alert #AlertModalDeletePages (alertOutput)="confirmedDeletePages($event)"></modal-alert>
(1-1/3)