288 lines
14 KiB
HTML
288 lines
14 KiB
HTML
|
<div id="page_content" click-outside-or-esc targetId="page_content">
|
||
|
|
<div class="uk-padding-small md-bg-white" uk-grid>
|
||
|
|
|
||
|
|
<div class="uk-width-expand@m uk-width-1-1 uk-flex uk-flex-middle uk-flex-right">
|
||
|
|
<div class="uk-inline uk-width-medium">
|
||
|
|
<span class="uk-position-center-right"><i class="material-icons">search</i></span>
|
||
|
|
<div dashboard-input [formInput]="filterForm" label="Find page"></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="page_content_inner">
|
||
|
|
<div *ngIf="!errorMessage && !showLoading" class="page-controls">
|
||
|
|
<div class=" filters ">
|
||
|
|
<div class="show-options uk-float-right">
|
||
|
|
<button class="uk-button uk-button-primary" type="button">Bulk Actions</button>
|
||
|
|
<div uk-dropdown="mode: click">
|
||
|
|
<ul class="uk-nav uk-navbar-dropdown-nav uk-margin-left"
|
||
|
|
[attr.uk-tooltip]="getSelectedPages().length == 0 ? 'pos:left; cls: uk-active' : 'cls: uk-invisible'"
|
||
|
|
title="Select at least one page">
|
||
|
|
<li *ngIf="!isPortalAdministrator"><a [class]="getSelectedPages().length == 0 ? 'uk-disabled' : ''"
|
||
|
|
(click)="togglePages(true, getSelectedPages())"><i></i> Activate
|
||
|
|
</a></li>
|
||
|
|
<li *ngIf="!isPortalAdministrator"><a [class]="getSelectedPages().length == 0 ? 'uk-disabled' : ''"
|
||
|
|
(click)="togglePages(false, getSelectedPages())"><i></i> Deactivate
|
||
|
|
</a></li>
|
||
|
|
<li *ngIf="isPortalAdministrator"><a (click)="confirmDeleteSelectedPages()"><i></i> Delete </a></li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<h4 class="uk-text-bold uk-text-upper">{{pagesType}} Pages</h4>
|
||
|
|
<div *ngIf="updateErrorMessage" class="uk-alert-danger" uk-alert>
|
||
|
|
<a class="uk-alert-close" uk-close></a>
|
||
|
|
{{updateErrorMessage}}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="content-wrapper" id="contentWrapper">
|
||
|
|
<div>
|
||
|
|
<div class="contentPanel uk-margin-top">
|
||
|
|
|
||
|
|
|
||
|
|
<div *ngIf="!isPortalAdministrator" class="uk-alert uk-alert-primary uk-margin-top-large">
|
||
|
|
<div>
|
||
|
|
<span class="uk-margin-small-right uk-icon" uk-icon="warning"></span>
|
||
|
|
Disable a page to hide it from community dashboard portal.
|
||
|
|
</div>
|
||
|
|
<div
|
||
|
|
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.
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<div *ngIf="errorMessage" class="uk-alert uk-alert-danger uk-margin-large-top"
|
||
|
|
role="alert">{{errorMessage}}</div>
|
||
|
|
<div [style.display]="showLoading ? 'inline' : 'none'"
|
||
|
|
class="uk-animation-fade uk-margin-large-top uk-width-1-1" role="alert"><img
|
||
|
|
class="uk-align-center loading-gif"></div>
|
||
|
|
<div class="md-card uk-margin-medium-bottom" *ngIf="!errorMessage && !showLoading">
|
||
|
|
<div class="md-card-content">
|
||
|
|
<div class="uk-overflow-container">
|
||
|
|
<table class="uk-table uk-table-striped">
|
||
|
|
<thead>
|
||
|
|
<tr>
|
||
|
|
<th><input id="allPageCheckbox" type="checkbox" (change)="toggleCheckBoxes($event)"></th>
|
||
|
|
<th>Name</th>
|
||
|
|
<th *ngIf="!isPortalAdministrator">Change status</th>
|
||
|
|
<th *ngIf="!pagesType">Type</th>
|
||
|
|
<th *ngIf="!isPortalAdministrator">Related Entities</th>
|
||
|
|
<th>Route</th>
|
||
|
|
<th *ngIf="isPortalAdministrator">Actions</th>
|
||
|
|
<th *ngIf="!isPortalAdministrator" class="uk-text-center">Page help texts</th>
|
||
|
|
<th *ngIf="!isPortalAdministrator && (pageWithDivIds && pageWithDivIds.length > 0)"
|
||
|
|
class="uk-text-center">Class help texts
|
||
|
|
</th>
|
||
|
|
</tr>
|
||
|
|
</thead>
|
||
|
|
<tbody>
|
||
|
|
<tr *ngFor="let check of checkboxes; let i=index">
|
||
|
|
<td><input id="{{check.page._id}}" class="checkBox" type="checkbox"
|
||
|
|
name="pagescb[]" value="{{check.page._id}}" [(ngModel)]="check.checked">
|
||
|
|
</td>
|
||
|
|
<td>
|
||
|
|
<div class="name" href="#">{{check.page.name}}</div>
|
||
|
|
</td>
|
||
|
|
<td *ngIf="!isPortalAdministrator">
|
||
|
|
<mat-slide-toggle [checked]="check.page.isEnabled"
|
||
|
|
(change)="($event.source.checked = check.page.isEnabled);togglePages(!check.page.isEnabled,[check.page._id])"></mat-slide-toggle>
|
||
|
|
</td>
|
||
|
|
<td *ngIf="!pagesType">
|
||
|
|
<div class="type" href="#">{{check.page.type}}</div>
|
||
|
|
</td>
|
||
|
|
<td *ngIf="!isPortalAdministrator">
|
||
|
|
<div class="entities" href="#">
|
||
|
|
<span *ngFor="let entity of check.page.entities let i=index">{{entity.name}}<span
|
||
|
|
*ngIf="i<(check.page.entities.length-1)">, </span></span>
|
||
|
|
</div>
|
||
|
|
</td>
|
||
|
|
<td>
|
||
|
|
<div class="route" href="#">{{check.page.route}}</div>
|
||
|
|
</td>
|
||
|
|
|
||
|
|
<td *ngIf="isPortalAdministrator">
|
||
|
|
<div class="actions" href="#">
|
||
|
|
<i class="md-icon material-icons" (click)="editPage(i)"></i>
|
||
|
|
<i class="material-icons md-icon"
|
||
|
|
(click)="confirmDeletePage(check.page._id)">delete</i>
|
||
|
|
</div>
|
||
|
|
</td>
|
||
|
|
<td *ngIf="!isPortalAdministrator" class="uk-text-center">
|
||
|
|
<a *ngIf="check.page.top || check.page.bottom || check.page.left || check.page.right"
|
||
|
|
class="helpContents"
|
||
|
|
[queryParams]="{communityId: selectedCommunityPid, pageId: check.page._id}"
|
||
|
|
routerLink="/helptexts">
|
||
|
|
add help texts
|
||
|
|
</a>
|
||
|
|
<span
|
||
|
|
*ngIf="!check.page.top && !check.page.bottom && !check.page.left && !check.page.right">-</span>
|
||
|
|
</td>
|
||
|
|
<td *ngIf="!isPortalAdministrator && (pageWithDivIds && pageWithDivIds.length > 0)"
|
||
|
|
class="uk-text-center">
|
||
|
|
<a *ngIf="pageWithDivIds.includes(check.page._id)" class="classHelpContents"
|
||
|
|
[queryParams]="{communityId: selectedCommunityPid, pageId: check.page._id}"
|
||
|
|
routerLink="/classContents">add class contents</a>
|
||
|
|
<span *ngIf="!pageWithDivIds.includes(check.page._id)">-</span>
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
|
||
|
|
<div *ngIf="checkboxes.length==0" class="col-md-12">
|
||
|
|
<div class="uk-alert-warning" uk-alert>No pages found</div>
|
||
|
|
</div>
|
||
|
|
<div class="uk-width-1-1 uk-flex uk-flex-center ">
|
||
|
|
<div class="uk-width-small uk-flex uk-flex-center uk-button" (click)="newPage()">
|
||
|
|
<i class="material-icons md-48">add</i>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
<modal-alert #AlertModalSavePage (alertOutput)="pageSaveConfirmed($event)" [okDisabled]="myForm && (myForm.invalid || !myForm.dirty)">
|
||
|
|
<div *ngIf="modalErrorMessage" class="uk-alert-danger" uk-alert aria-hidden="true">{{ modalErrorMessage }}</div>
|
||
|
|
<form [formGroup]="myForm">
|
||
|
|
|
||
|
|
<div dashboard-input class="uk-margin-small-left" [formInput]="myForm.get('route')"
|
||
|
|
type="text"
|
||
|
|
label="Page route">
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div dashboard-input class="uk-margin-small-left" [formInput]="myForm.get('name')"
|
||
|
|
type="text"
|
||
|
|
label="Page Name">
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div dashboard-input class="uk-margin-small-left" [formInput]="myForm.get('type')"
|
||
|
|
type="select"
|
||
|
|
label="Type" [options]="typeOptions">
|
||
|
|
</div>
|
||
|
|
<mat-form-field class="example-chip-list uk-width-1-1 uk-margin-small-left">
|
||
|
|
<mat-chip-list #chipList aria-label="Page selection">
|
||
|
|
<mat-chip
|
||
|
|
*ngFor="let entity of selectedEntities"
|
||
|
|
[selectable]="true"
|
||
|
|
[removable]="true">
|
||
|
|
{{entity.name}}
|
||
|
|
<span (click)="remove(entity)"
|
||
|
|
class="mat-icon notranslate mat-chip-remove mat-chip-trailing-icon material-icons mat-icon-no-color ng-star-inserted">cancel</span>
|
||
|
|
</mat-chip>
|
||
|
|
<input placeholder="Add in pages..." #PageInput
|
||
|
|
[formControl]="entitiesSearchCtrl" [matAutocomplete]="auto" [matChipInputFor]="chipList">
|
||
|
|
</mat-chip-list>
|
||
|
|
<mat-autocomplete #auto="matAutocomplete" (optionSelected)="selected($event)">
|
||
|
|
<mat-option *ngFor="let entity of filteredEntities| async" [value]="entity">
|
||
|
|
{{entity.name}}
|
||
|
|
</mat-option>
|
||
|
|
</mat-autocomplete>
|
||
|
|
</mat-form-field>
|
||
|
|
<!--<div formArrayName="entities" class="form-group">
|
||
|
|
<label for="entityNameTag">Entity Name</label>
|
||
|
|
<div id="entityNameTag">
|
||
|
|
<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>
|
||
|
|
|
||
|
|
<button type="button" (click)="toggle()">Add / Remove entities</button>
|
||
|
|
|
||
|
|
<ng-container *ngIf="!myForm.value.isCollapsed">
|
||
|
|
<div *ngIf="errorMessage" class="uk-alert uk-alert-danger" role="alert">{{errorMessage}}</div>
|
||
|
|
<div [style.display]="showLoading ? 'inline' : 'none'" class="uk-animation-fade uk-width-1-1" role="alert"><img class="uk-align-center loading-gif"></div>
|
||
|
|
|
||
|
|
<div *ngFor="let entity of getKeys(allEntities)">
|
||
|
|
<span>
|
||
|
|
<span *ngIf="allEntities.get(entity)" class="activated" >
|
||
|
|
<input (click)="toggleEntity(false,[entity._id], entity)" class="deactivate" src="assets/imgs/delete-icon.png" title="Disable" width="20" type="image" height="20">
|
||
|
|
</span>
|
||
|
|
<span *ngIf="!allEntities.get(entity)" class="deactivated" >
|
||
|
|
<input (click)="toggleEntity(true,[entity._id], entity)" class="deactivate" src="assets/imgs/add-icon.png" title="Enable" width="20" type="image" height="20">
|
||
|
|
</span>
|
||
|
|
{{entity.name}}
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
</ng-container>
|
||
|
|
</div>
|
||
|
|
</div>-->
|
||
|
|
|
||
|
|
<!-- <div class="form-group" uk-grid>-->
|
||
|
|
<!-- <label class="uk-width-1-1 uk-margin-small-bottom">-->
|
||
|
|
<!-- Select positions of help contents for this page.-->
|
||
|
|
<!-- </label>-->
|
||
|
|
<!-- <label class="uk-text-danger uk-margin-small-bottom">-->
|
||
|
|
<!-- By disabling a position, all contents in this position will be deleted.-->
|
||
|
|
<!-- </label>-->
|
||
|
|
<!-- <label class="uk-width-1-4 checkbox">-->
|
||
|
|
<!-- <span class="uk-margin-small-right" style="font-weight: normal;">Top</span>-->
|
||
|
|
<!-- <input tabindex="0" type="checkbox" formControlName="top">-->
|
||
|
|
<!-- </label>-->
|
||
|
|
<!-- <label class="uk-width-1-4 checkbox">-->
|
||
|
|
<!-- <span class="uk-margin-small-right" style="font-weight: normal;">Bottom</span>-->
|
||
|
|
<!-- <input tabindex="0" type="checkbox" formControlName="bottom">-->
|
||
|
|
<!-- </label>-->
|
||
|
|
<!-- <label class="uk-width-1-4 checkbox">-->
|
||
|
|
<!-- <span class="uk-margin-small-right" style="font-weight: normal;">Left</span>-->
|
||
|
|
<!-- <input tabindex="0" type="checkbox" formControlName="left">-->
|
||
|
|
<!-- </label>-->
|
||
|
|
<!-- <label class="uk-width-1-4 checkbox">-->
|
||
|
|
<!-- <span class="uk-margin-small-right" style="font-weight: normal;">Right</span>-->
|
||
|
|
<!-- <input tabindex="0" type="checkbox" formControlName="right">-->
|
||
|
|
<!-- </label>-->
|
||
|
|
<!-- </div>-->
|
||
|
|
<div class="form-group" >
|
||
|
|
<label class="uk-text-danger uk-margin-small-bottom">
|
||
|
|
By disabling a position, all contents in this position will be deleted.
|
||
|
|
</label>
|
||
|
|
<div class="uk-text-muted"> Select if this page exists in:</div>
|
||
|
|
<span dashboard-input class="" [formInput]="myForm.get('top')"
|
||
|
|
type="checkbox"
|
||
|
|
label="Top">
|
||
|
|
</span>
|
||
|
|
<span dashboard-input class="uk-margin-small-left" [formInput]="myForm.get('right')"
|
||
|
|
type="checkbox"
|
||
|
|
label="Right">
|
||
|
|
</span>
|
||
|
|
<span dashboard-input class="uk-margin-small-left" [formInput]="myForm.get('bottom')"
|
||
|
|
type="checkbox"
|
||
|
|
label="Bottom">
|
||
|
|
</span>
|
||
|
|
<span dashboard-input class="uk-margin-small-left" [formInput]="myForm.get('left')"
|
||
|
|
type="checkbox"
|
||
|
|
label="Left">
|
||
|
|
</span>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<div class="form-group">
|
||
|
|
|
||
|
|
<div class="uk-text-muted"> Select if this page exists in:</div>
|
||
|
|
<span dashboard-input class="" [formInput]="myForm.get('openaire')"
|
||
|
|
type="checkbox"
|
||
|
|
label="Explore Portal">
|
||
|
|
</span>
|
||
|
|
<span dashboard-input class="uk-margin-small-left" [formInput]="myForm.get('connect')"
|
||
|
|
type="checkbox"
|
||
|
|
label="Connect Portal">
|
||
|
|
</span>
|
||
|
|
<span dashboard-input class="uk-margin-small-left" [formInput]="myForm.get('communities')"
|
||
|
|
type="checkbox"
|
||
|
|
label="Communities Dashboards">
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<input type="hidden" formControlName="_id">
|
||
|
|
</form>
|
||
|
|
|
||
|
|
</modal-alert>
|
||
|
|
|
||
|
|
<!--<modal-alert #AlertModalUpdatePage (alertOutput)="pageUpdateConfirmed($event)">-->
|
||
|
|
<!-- <div *ngIf="modalErrorMessage" class="uk-alert-danger" uk-alert aria-hidden="true">{{ modalErrorMessage }}</div>-->
|
||
|
|
<!-- <page-form [group]="myForm"></page-form>-->
|
||
|
|
<!--</modal-alert>-->
|
||
|
|
|
||
|
|
<modal-alert #AlertModalDeletePages (alertOutput)="confirmedDeletePages($event)"></modal-alert>
|