Project

General

Profile

1
<div page-content>
2
  <div header>
3
    <admin-tabs tab="page" [portal]="portal"></admin-tabs>
4
    <div *ngIf="!showLoading" class="uk-grid" uk-grid>
5
      <div class="uk-width-1-1">
6
        <ul class="uk-subnav uk-subnav-pill">
7
          <li [class.uk-active]="filterForm.get('type').value === 'all'"><a
8
              (click)="filterForm.get('type').setValue('all')"><span>All pages</span></a></li>
9
          <li *ngFor="let type of typeOptions; let i=index"
10
              [class.uk-active]="filterForm.get('type').value === type.value"><a
11
              (click)="filterForm.get('type').setValue(type.value)"><span>{{type.label}}</span></a></li>
12
        </ul>
13
      </div>
14
      <div
15
          class="uk-width-1-1 uk-flex uk-flex-right@m uk-flex-center uk-flex-wrap uk-flex-middle uk-grid uk-margin-remove-top"
16
          uk-grid>
17
        <div #searchInputComponent search-input [control]="filterForm.controls.keyword" [showSearch]="false"
18
             placeholder="Search page"
19
             [selected]="selectedKeyword" (closeEmitter)="onSearchClose()" (resetEmitter)="reset()"
20
             [bordered]="true" colorClass="uk-text-secondary"
21
             class="uk-width-1-3@xl uk-width-2-5@l uk-width-1-2@m uk-width-1-1"></div>
22

    
23
        <div *ngIf="isPortalAdministrator">
24
          <a (click)="newPage()"
25
             class="uk-flex uk-flex-middle uk-text-uppercase">
26
            <button class="large uk-icon-button uk-button-secondary">
27
              <icon name="add"></icon>
28
            </button>
29
            <button class="uk-button uk-button-link uk-margin-small-left uk-text-secondary">Add page</button>
30
          </a>
31
        </div>
32
      </div>
33
    </div>
34
    <div *ngIf="!showLoading && checkboxes.length > 0"
35
         class="uk-padding uk-padding-remove-bottom uk-padding-remove-top uk-margin-remove-top uk-margin-small-bottom uk-display-inline"
36
         [attr.uk-tooltip]="getSelectedPages().length == 0 ? 'pos:left; cls: uk-active' : null"
37
         title="Select at least one page"><input id="checkAll" type="checkbox" (click)="selectAll()"
38
                                                 [ngModel]="getSelectedPages().length ==checkboxes.length"/>
39
      <span *ngIf="getSelectedPages().length > 0" class="uk-margin-left uk-text-muted">
40
                        {{getSelectedPages().length}} pages selected </span>
41
      <a class="uk-margin-left">Actions</a>
42
      <div uk-dropdown="mode: click">
43
        <ul class="uk-nav uk-dropdown-nav"
44
            [attr.uk-tooltip]="getSelectedPages().length == 0 ? 'pos:left; cls: uk-active' : 'cls: uk-invisible'"
45
            title="Select at least one page">
46
          <li *ngIf="!isPortalAdministrator"><a [class]="getSelectedPages().length == 0 ? 'uk-disabled' : ''"
47
                                                (click)="togglePages(true,getSelectedPages())"><i></i> Enable
48
          </a></li>
49
          <li *ngIf="!isPortalAdministrator"><a [class]="getSelectedPages().length == 0 ? 'uk-disabled' : ''"
50
                                                (click)="togglePages(false,getSelectedPages())"><i></i> Disable
51
          </a>
52
          </li>
53
          <li *ngIf="isPortalAdministrator"><a [class]="getSelectedPages().length == 0 ? 'uk-disabled' : ''"
54
                                               (click)="confirmDeleteSelectedPages()"><i></i> Delete </a></li>
55
        </ul>
56
      </div>
57
    </div>
58
  </div>
59
  <div inner>
60
    <div *ngIf="showLoading" class="uk-position-center">
61
      <loading></loading>
62
    </div>
63
    <div *ngIf="!showLoading">
64
      <ul *ngIf="checkboxes.length > 0" class="uk-list pages">
65
        <li *ngFor="let check of checkboxes; let i=index" class="uk-card uk-card-default uk-margin-bottom">
66
          <div class="uk-grid uk-padding">
67
            <div class=""><input id="{{check.page._id}}" class="checkBox" type="checkbox"
68
                                 name="pagescb[]" value="{{check.page._id}}" [(ngModel)]="check.checked">
69
            </div>
70
            <div class="uk-width-expand">
71
              <div class="title uk-margin-medium-bottom">Name</div>
72
              <div class="name uk-margin-medium-bottom" href="#">{{check.page.name}}</div>
73
              <div *ngIf="check.page.entities && check.page.entities.length > 0"><span
74
                  class="title">Entities: </span>
75
                {{getEntitiesAsString(check.page)}}</div>
76
              <div class=" uk-margin-small-bottom"><span class="title">Route: </span> {{check.page.route}}</div>
77
              <div *ngIf="!pagesType" class=" uk-margin-small-bottom"><span
78
                  class="title">Type: </span> {{check.page.type}}</div>
79
              <div *ngIf="!portal" class=" uk-margin-small-bottom">
80
                <span class="title">Portal type: </span>{{check.page.portalType}}
81
              </div>
82
            </div>
83
            <div *ngIf="isPortalAdministrator" class="uk-width-1-4">
84
              <div class="title uk-margin-medium-bottom">Actions</div>
85
              <div class="actions" href="#">
86
                <i class="clickable " (click)="editPage(i)" uk-icon="pencil"></i>
87
                <i class="clickable uk-text-danger"
88
                   (click)="confirmDeletePage(check.page._id)" uk-icon="trash"></i>
89
              </div>
90
            </div>
91
            <div *ngIf="!isPortalAdministrator && ((check.page.top || check.page.bottom || check.page.left ||
92
                  check.page.right) || pageWithDivIds.includes(check.page._id) )" class="uk-width-1-4">
93
              <div class="title uk-margin-medium-bottom">Help texts</div>
94
              <div class=" uk-margin-small-bottom">
95
                <a *ngIf="check.page.top || check.page.bottom || check.page.left || check.page.right"
96
                   class="helpContents"
97
                   [queryParams]="{pageId: check.page._id}"
98
                   routerLink="../helptexts">
99
                  Manage page help texts
100
                  <span *ngIf="pageHelpContentsCount[check.page._id]">({{pageHelpContentsCount[check.page._id]}})</span>
101
                </a>
102
              </div>
103
              <div>
104
                <a *ngIf="pageWithDivIds.includes(check.page._id)"
105
                   [queryParams]="{ pageId: check.page._id}"
106
                   routerLink="../classContents">Manage class help texts
107
                  <span *ngIf="pageClassContentsCount[check.page._id]">({{pageClassContentsCount[check.page._id]}})</span>
108
                </a>
109
              </div>
110
            </div>
111
            <div *ngIf="!isPortalAdministrator" class="uk-width-1-4">
112
              <div class="title uk-margin-medium-bottom">Enable/disable</div>
113
              <mat-slide-toggle [checked]="check.page.isEnabled"
114
                                (change)="($event.source.checked = check.page.isEnabled);togglePages(!check.page.isEnabled,[check.page._id])"
115
                                uk-tooltip="title:<div class='uk-padding-small uk-width-large'><div class='uk-text-bold '>Disable a page to hide it from community dashboard portal.</div><div class=' uk-margin-top'>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.</div></div>">
116
              </mat-slide-toggle>
117
            </div>
118
          </div>
119
        </li>
120

    
121
      </ul>
122
      <div *ngIf="checkboxes.length == 0"
123
           class="uk-card uk-card-default uk-padding-large uk-text-center uk-margin-bottom uk-text-bold">
124
        <div>No pages found</div>
125
      </div>
126
    </div>
127
  </div>
128
</div>
129
<modal-alert #editModal (alertOutput)="pageSaveConfirmed($event)"
130
             [okDisabled]="pageForm && (pageForm.invalid || !pageForm.dirty)">
131
  <form *ngIf="pageForm" [formGroup]="pageForm" class="uk-grid uk-child-width-1-1" uk-grid>
132
    <div dashboard-input [formInput]="pageForm.get('route')"
133
         type="text" label="Page route" placeholder="Write a route">
134
    </div>
135
    <div dashboard-input [formInput]="pageForm.get('name')"
136
         type="text" placeholder="Write a name"
137
         label="Page Name">
138
    </div>
139
    <div dashboard-input [formInput]="pageForm.get('type')"
140
         type="select" placeholder="Choose a page Type"
141
         label="Type" [options]="typeOptions">
142
    </div>
143
    <div dashboard-input [formInput]="pageForm.get('entities')" placeholder="Add an entity"
144
         type="chips" [options]="allEntities" label="Entities">
145
    </div>
146
    <div dashboard-input type="select" label="Portal Type" placeholder="Choose a type"
147
         [formInput]="pageForm.get('portalType')" [options]="portalUtils.portalTypes"></div>
148
    <div class="form-group">
149
      <div class="uk-form-label uk-text-bold uk-margin-small-bottom"> Select if this page have helptext at:</div>
150
      <div class="uk-grid uk-grid-small uk-child-width-1-4" uk-grid>
151
        <div dashboard-input [formInput]="pageForm.get('top')"
152
             type="checkbox"
153
             label="Top">
154
        </div>
155
        <div dashboard-input [formInput]="pageForm.get('right')"
156
             type="checkbox"
157
             label="Right">
158
        </div>
159
        <div dashboard-input [formInput]="pageForm.get('bottom')"
160
             type="checkbox"
161
             label="Bottom">
162
        </div>
163
        <div dashboard-input [formInput]="pageForm.get('left')"
164
             type="checkbox"
165
             label="Left">
166
        </div>
167
      </div>
168
      <label class="uk-text-danger">
169
        By disabling a position, all contents in this position will be deleted.
170
      </label>
171
    </div>
172
  </form>
173

    
174
</modal-alert>
175

    
176
<modal-alert #deleteModal (alertOutput)="confirmedDeletePages($event)"></modal-alert>
(2-2/4)