Project

General

Profile

1
<div page-content class="admin-pages">
2
  <div header>
3
    <admin-tabs tab="page" [portal]="selectedCommunityPid"></admin-tabs>
4
    <div *ngIf="!errorMessage && !showLoading" class="uk-grid filters" 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
9
              class="title">All pages</span></a></li>
10
          <li *ngFor="let type of typeOptions; let i=index"
11
              [class.uk-active]="filterForm.get('type').value === type.value"><a
12
              (click)="filterForm.get('type').setValue(type.value)"><span
13
              class="title">{{type.label}}</span></a></li>
14
        </ul>
15
      </div>
16
      <div class="uk-width-1-1 uk-flex uk-flex-right@m uk-flex-center uk-flex-wrap uk-flex-middle uk-grid" uk-grid>
17
        <div search-input [control]="filterForm.controls.keyword" [showSearch]="false" placeholder="Search page"
18
             [bordered]="true" colorClass="uk-text-secondary"></div>
19
        <div class="show-options">
20
          <button class="uk-button uk-button-secondary">Bulk Actions</button>
21
          <div uk-dropdown="mode: click">
22
            <ul class="uk-nav  uk-dropdown-nav"
23
                [attr.uk-tooltip]="getSelectedPages().length == 0 ? 'pos:left; cls: uk-active' : 'cls: uk-invisible'"
24
                title="Select at least one page">
25
              <li *ngIf="!isPortalAdministrator"><a [class]="getSelectedPages().length == 0 ? 'uk-disabled' : ''"
26
                                                    (click)="togglePages(true, getSelectedPages())"> Activate
27
              </a></li>
28
              <li *ngIf="!isPortalAdministrator"><a [class]="getSelectedPages().length == 0 ? 'uk-disabled' : ''"
29
                                                    (click)="togglePages(false, getSelectedPages())"> Deactivate
30
              </a></li>
31
              <li *ngIf="isPortalAdministrator"><a (click)="confirmDeleteSelectedPages()"> Delete </a></li>
32
            </ul>
33
          </div>
34
        </div>
35
        <div *ngIf="isPortalAdministrator">
36
          <a (click)="newPage()"
37
             class="uk-flex uk-flex-middle uk-text-uppercase">
38
            <button class="large uk-icon-button uk-button-secondary">
39
              <icon name="add"></icon>
40
            </button>
41
            <button class="uk-button uk-button-link uk-margin-small-left uk-text-secondary">Add page</button>
42
          </a>
43
        </div>
44
      </div>
45
    </div>
46
  </div>
47
  <div inner>
48
    <div class="contentPanel ">
49
      <div *ngIf="!isPortalAdministrator" class="uk-alert uk-alert-primary uk-margin-top-large">
50
        <div>
51
          <span class="uk-margin-small-right uk-icon" uk-icon="warning"></span>
52
          Disable a page to hide it from community dashboard portal.
53
        </div>
54
        <div
55
            class="uk-text-small">If the page is disabled, a message "Can't find that page" will appear in case the url
56
          of that page is loaded. If the disabled page belongs to the menu, the link will be removed from menu, too.
57
        </div>
58

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

    
123
            </ul>
124

    
125
            <div *ngIf="checkboxes.length==0" class="col-md-12">
126
              <div class="uk-alert-warning" uk-alert>No pages found</div>
127
            </div>
128
            <div *ngIf="isPortalAdministrator" class="uk-width-1-1 uk-flex uk-flex-center ">
129
              <div class="uk-width-small uk-button uk-button-default" (click)="newPage()">
130
                <i class="" uk-icon="plus"></i>
131
              </div>
132
            </div>
133
          </div>
134
        </div>
135
      </div>
136
    </div>
137
  </div>
138
</div>
139

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

    
145
    <div dashboard-input class="uk-margin-small-left" [formInput]="myForm.get('route')"
146
         type="text"
147
         label="Page route">
148
    </div>
149

    
150
    <div dashboard-input class="uk-margin-small-left" [formInput]="myForm.get('name')"
151
         type="text"
152
         label="Page Name">
153
    </div>
154

    
155
    <div dashboard-input class="uk-margin-small-left" [formInput]="myForm.get('type')"
156
         type="select"
157
         label="Type" [options]="typeOptions">
158
    </div>
159
    <mat-form-field class="example-chip-list uk-width-1-1  uk-margin-small-left">
160
      <mat-chip-list #chipList aria-label="Page selection">
161
        <mat-chip
162
            *ngFor="let entity of selectedEntities"
163
            [selectable]="true"
164
            [removable]="true">
165
          {{entity.name}}
166
          <span (click)="remove(entity)"
167
                class=" notranslate mat-chip-remove mat-chip-trailing-icon " uk-icon="trash"></span>
168
        </mat-chip>
169
        <input placeholder="Add in  pages..." #PageInput
170
               [formControl]="entitiesSearchCtrl" [matAutocomplete]="auto" [matChipInputFor]="chipList">
171
      </mat-chip-list>
172
      <mat-autocomplete #auto="matAutocomplete" (optionSelected)="selected($event)">
173
        <mat-option *ngFor="let entity of  filteredEntities| async" [value]="entity">
174
          {{entity.name}}
175
        </mat-option>
176
      </mat-autocomplete>
177
    </mat-form-field>
178

    
179
    <div class="form-group">
180
      <label class="uk-text-danger uk-margin-small-bottom">
181
        By disabling a position, all contents in this position will be deleted.
182
      </label>
183
      <div class="title"> Select if this page exists in:</div>
184
      <div class=" uk-grid">
185
        <span dashboard-input class="" [formInput]="myForm.get('top')"
186
              type="checkbox"
187
              label="Top">
188
        </span>
189
        <span dashboard-input class="uk-margin-small-left" [formInput]="myForm.get('right')"
190
              type="checkbox"
191
              label="Right">
192
        </span>
193
        <span dashboard-input class="uk-margin-small-left" [formInput]="myForm.get('bottom')"
194
              type="checkbox"
195
              label="Bottom">
196
        </span>
197
        <span dashboard-input class="uk-margin-small-left" [formInput]="myForm.get('left')"
198
              type="checkbox"
199
              label="Left">
200
        </span>
201
      </div>
202
    </div>
203
    <div [ngClass]="{'has-error':!myForm.controls.portalType.valid && myForm.controls.portalType.dirty}"
204
         class="form-group">
205
      <div class="uk-width-1-1 uk-margin-small-bottom uk-text-bold uk-form-label">
206
        Page exists in:
207
      </div>
208
      <div class="uk-child-width-1-2 uk-grid">
209
        <span *ngFor="let option of portalUtils.portalTypes" class="radio ">
210
          <span class="uk-margin-small-right" style="font-weight: normal;">{{option.label}}</span>
211
          <input type="radio" [value]="option.value" formControlName="portalType">
212
        </span>
213
      </div>
214
    </div>
215

    
216
    <input type="hidden" formControlName="_id">
217
  </form>
218

    
219
</modal-alert>
220

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