Project

General

Profile

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>
20
      </div>
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">-->
35
    </div>
36

    
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">
41
        </div>
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.
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="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">
96
                      <a *ngIf="check.page.top || check.page.bottom || check.page.left || check.page.right"
97
                         class="helpContents"
98
                         [queryParams]="{communityId: selectedCommunityPid, pageId: check.page._id}"
99
                         routerLink="../../helptexts">
100
                        manage help texts
101
                      </a>
102
                    </div>
103
                    <div>
104
                      <a *ngIf="pageWithDivIds.includes(check.page._id)" class="classHelpContents"
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>
118

    
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>
125
                </div>
126
              </div>
127
            </div>
128
          </div>
129
        </div>
130
      </div>
131
    </div>
132
  </div>
133
</div>
134

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

    
139
    <div dashboard-input class="uk-margin-small-left" [formInput]="myForm.get('route')"
140
         type="text"
141
         label="Page route">
142
    </div>
143

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

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

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

    
209
    <input type="hidden" formControlName="_id">
210
  </form>
211

    
212
</modal-alert>
213

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