Project

General

Profile

« Previous | Next » 

Revision 60202

[Library | Trunk]

Dashboard - Admin tool pages:
- add tabs components
- add rout module (without guards)
- put tabs and page-content in pages, classes, entities pages

Stakeholder:
initial try to add filters for country and organization fields (doesn't work properly)

View differences:

pages.component.html
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>
1
<div page-content>
2
  <admin-tabs tab = "page" [portal]="selectedCommunityPid" header></admin-tabs>
3
  <div inner class="admin-pages">
4
    <div *ngIf="!errorMessage && !showLoading" class="filters" uk-sticky="offset:150">
5
      <div class="show-options uk-float-right">
6
        <button class="uk-button uk-button-primary " type="button">Bulk Actions</button>
7
        <div uk-dropdown="mode: click">
8
          <ul class="uk-nav  uk-margin-left"
9
              [attr.uk-tooltip]="getSelectedPages().length == 0 ? 'pos:left; cls: uk-active' : 'cls: uk-invisible'"
10
              title="Select at least one page">
11
            <li *ngIf="!isPortalAdministrator"><a [class]="getSelectedPages().length == 0 ? 'uk-disabled' : ''"
12
                                                  (click)="togglePages(true, getSelectedPages())"> Activate
13
            </a></li>
14
            <li *ngIf="!isPortalAdministrator"><a [class]="getSelectedPages().length == 0 ? 'uk-disabled' : ''"
15
                                                  (click)="togglePages(false, getSelectedPages())">  Deactivate
16
            </a></li>
17
            <li *ngIf="isPortalAdministrator"><a (click)="confirmDeleteSelectedPages()"> Delete </a></li>
18
          </ul>
19
        </div>
8 20
      </div>
9

  
21
      <div class="uk-inline uk-width-medium uk-float-right uk-margin-right">
22
        <div dashboard-input [formInput]="filterForm.controls.keyword" placeholder="search page" ></div>
23
      </div>
24
      <ul     class="uk-subnav uk-subnav-pill subCategoriesTabs ignore admin  " >
25
        <li [class.uk-active]="filterForm.get('type').value === 'all'"><a
26
          (click)="filterForm.get('type').setValue('all')"><span
27
          class="title">All pages</span></a></li>
28
        <li  *ngFor="let type of typeOptions; let i=index"
29
             [class.uk-active]="filterForm.get('type').value === type.value"><a
30
          (click)="filterForm.get('type').setValue(type.value)"><span
31
          class="title">{{type.label}}</span></a></li>
32
      </ul>
33
<!--      <input    class="uk-width-1-1  "-->
34
<!--               placeholder="SEARCH FOR A COUNTRY" type="text" autocomplete="off" role="combobox" aria-autocomplete="list" aria-expanded="false" aria-haspopup="true">-->
10 35
    </div>
11
  </div>
12 36

  
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-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())"> Activate
24
              </a></li>
25
              <li *ngIf="!isPortalAdministrator"><a [class]="getSelectedPages().length == 0 ? 'uk-disabled' : ''"
26
                                                    (click)="togglePages(false, getSelectedPages())">  Deactivate
27
              </a></li>
28
              <li *ngIf="isPortalAdministrator"><a (click)="confirmDeleteSelectedPages()"> Delete </a></li>
29
            </ul>
30
          </div>
37
    <div class="content-wrapper uk-margin-top" id="contentWrapper">
38
      <a  *ngIf="!showLoading && isPortalAdministrator && !errorMessage" (click)="newPage()"
39
          class="uk-flex uk-flex-right uk-flex-middle uk-margin-small-bottom uk-width-1-1">
40
        <div class="uk-button-default large uk-icon-button uk-margin-small-right"  uk-icon="plus">
31 41
        </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

  
42
        Add page
43
      </a>
44
      <div class="contentPanel ">
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.
54 49
          </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>
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>
107 53

  
108
                    <td *ngIf="isPortalAdministrator">
109
                      <div class="actions" href="#">
110
                        <i class="clickable " (click)="editPage(i)" uk-icon="pencil"></i>
111
                        <i class="clickable uk-text-danger"
112
                           (click)="confirmDeletePage(check.page._id)" uk-icon="trash"></i>
113
                      </div>
114
                    </td>
115
                    <td *ngIf="!isPortalAdministrator" class="uk-text-center">
54
        </div>
55
        <div *ngIf="updateErrorMessage" class="uk-alert-danger" uk-alert>
56
          <a class="uk-alert-close" uk-close></a>
57
          {{updateErrorMessage}}
58
        </div>
59
        <div *ngIf="errorMessage" class="uk-alert uk-alert-danger  uk-margin-large-top"
60
             role="alert">{{errorMessage}}</div>
61
        <div [style.display]="showLoading ? 'inline' : 'none'"
62
             class="uk-animation-fade uk-margin-large-top  uk-width-1-1" role="alert"><img
63
          class="uk-align-center loading-gif"></div>
64
        <div class="md-card uk-margin-medium-bottom" *ngIf="!errorMessage && !showLoading">
65
          <div class="md-card-content">
66
            <div class="uk-overflow-container">
67
              <ul class="uk-list pages">
68
                <li *ngFor="let check of checkboxes; let i=index" class="uk-card uk-card-default uk-margin-bottom">
69
                  <div class="uk-grid uk-padding">
70
                  <div class=""><input id="{{check.page._id}}" class="checkBox" type="checkbox"
71
                             name="pagescb[]" value="{{check.page._id}}" [(ngModel)]="check.checked">
72
                  </div>
73
                  <div  class="uk-width-expand">
74
                    <div class="title uk-margin-medium-bottom">Name</div>
75
                    <div class="name uk-margin-medium-bottom" href="#">{{check.page.name}}</div>
76
                    <div *ngIf="check.page.entities && check.page.entities.length > 0"><span
77
                      class="title">Entities: </span>
78
                      {{check.page.entities.join(", ")}}</div>
79
                    <div class=" uk-margin-small-bottom"><span class="title">Route: </span> {{check.page.route}}</div>
80
                    <div *ngIf="!pagesType" class=" uk-margin-small-bottom"><span class="title">Type: </span> {{check.page.type}}</div>
81
                    <div *ngIf="!selectedCommunityPid" class=" uk-margin-small-bottom">
82
                      <span class="title" >Portal type: </span>{{check.page.portalType}}
83
                    </div>
84
                  </div>
85
                  <div *ngIf="isPortalAdministrator" class="uk-width-1-4">
86
                    <div class="title uk-margin-medium-bottom">Actions</div>
87
                    <div class="actions" href="#">
88
                      <i class="clickable " (click)="editPage(i)" uk-icon="pencil"></i>
89
                      <i class="clickable uk-text-danger"
90
                         (click)="confirmDeletePage(check.page._id)" uk-icon="trash"></i>
91
                    </div>
92
                  </div>
93
                  <div *ngIf="!isPortalAdministrator" class="uk-width-1-4">
94
                    <div class="title uk-margin-medium-bottom">Helptexts</div>
95
                    <div class=" uk-margin-small-bottom">
116 96
                      <a *ngIf="check.page.top || check.page.bottom || check.page.left || check.page.right"
117 97
                         class="helpContents"
118 98
                         [queryParams]="{communityId: selectedCommunityPid, pageId: check.page._id}"
119 99
                         routerLink="../../helptexts">
120
                        add help texts
100
                        manage help texts
121 101
                      </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">
102
                    </div>
103
                    <div>
127 104
                      <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>
105
                       [queryParams]="{communityId: selectedCommunityPid, pageId: check.page._id}"
106
                       routerLink="../../classContents">manage class contents</a>
107
                    </div>
108
                  </div>
109
                  <div *ngIf="!isPortalAdministrator" class="uk-width-1-4">
110
                    <div class="title uk-margin-medium-bottom">Enable/disable</div>
111
                    <mat-slide-toggle [checked]="check.page.isEnabled"
112
                                      (change)="($event.source.checked = check.page.isEnabled);togglePages(!check.page.isEnabled,[check.page._id])"></mat-slide-toggle>
113
                  </div>
114
                  </div>
115
                </li>
116
                
117
              </ul>
135 118

  
136
                <div *ngIf="checkboxes.length==0" class="col-md-12">
137
                  <div class="uk-alert-warning" uk-alert>No pages found</div>
119
              <div *ngIf="checkboxes.length==0" class="col-md-12">
120
                <div class="uk-alert-warning" uk-alert>No pages found</div>
121
              </div>
122
              <div *ngIf="isPortalAdministrator" class="uk-width-1-1 uk-flex uk-flex-center ">
123
                <div class="uk-width-small uk-button uk-button-default" (click)="newPage()">
124
                  <i class="" uk-icon="plus"></i>
138 125
                </div>
139
                <div *ngIf="isPortalAdministrator" class="uk-width-1-1 uk-flex uk-flex-center ">
140
                  <div class="uk-width-small uk-button uk-button-default" (click)="newPage()">
141
                    <i class="" uk-icon="plus"></i>
142
                  </div>
143
                </div>
144 126
              </div>
145 127
            </div>
146 128
          </div>
......
150 132
  </div>
151 133
</div>
152 134

  
153

  
154 135
<modal-alert #AlertModalSavePage (alertOutput)="pageSaveConfirmed($event)" [okDisabled]="myForm && (myForm.invalid || !myForm.dirty)">
155 136
  <div *ngIf="modalErrorMessage" class="uk-alert-danger" uk-alert aria-hidden="true">{{ modalErrorMessage }}</div>
156 137
  <form [formGroup]="myForm">
......
177 158
          [removable]="true">
178 159
          {{entity.name}}
179 160
          <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>
161
                class=" notranslate mat-chip-remove mat-chip-trailing-icon " uk-icon="trash"></span>
181 162
        </mat-chip>
182 163
        <input placeholder="Add in  pages..." #PageInput
183 164
               [formControl]="entitiesSearchCtrl" [matAutocomplete]="auto" [matChipInputFor]="chipList">
......
188 169
        </mat-option>
189 170
      </mat-autocomplete>
190 171
    </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 172

  
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 173
    <div class="form-group" >
242 174
      <label class="uk-text-danger uk-margin-small-bottom">
243 175
        By disabling a position, all contents in this position will be deleted.
244 176
      </label>
245
      <div class="uk-text-muted"> Select if this page exists in:</div>
177
      <div class="title"> Select if this page exists in:</div>
246 178
      <div class=" uk-grid">
247 179
        <span dashboard-input class="" [formInput]="myForm.get('top')"
248 180
              type="checkbox"
......
262 194
        </span>
263 195
      </div>
264 196
    </div>
265
<!--    <div class="form-group">-->
266

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

  
282 197
    <div [ngClass]="{'has-error':!myForm.controls.portalType.valid && myForm.controls.portalType.dirty}" class="form-group" >
283
      <div class="uk-width-1-1 uk-margin-small-bottom">
198
      <div class="uk-width-1-1 uk-margin-small-bottom uk-text-bold uk-form-label">
284 199
        Page exists in:
285 200
      </div>
286 201
      <div class="uk-child-width-1-2 uk-grid">
......
296 211

  
297 212
</modal-alert>
298 213

  
299
<!--<modal-alert #AlertModalUpdatePage (alertOutput)="pageUpdateConfirmed($event)">-->
300
<!--  <div *ngIf="modalErrorMessage" class="uk-alert-danger" uk-alert aria-hidden="true">{{ modalErrorMessage }}</div>-->
301
<!--  <page-form [group]="myForm"></page-form>-->
302
<!--</modal-alert>-->
303

  
304 214
<modal-alert #AlertModalDeletePages (alertOutput)="confirmedDeletePages($event)"></modal-alert>

Also available in: Unified diff