openaire-library/dashboard/page/pages.component.html

<div page-content (stickyEmitter)="stickyPageHeader = $event">
  <div header>
		<div class="uk-flex uk-flex-middle uk-margin-top info" [class.uk-active]="stickyPageHeader">
			<img *ngIf="logo" [src]="logo" class="uk-width-small uk-margin-right">
			<div class="uk-width-expand">
				<div class="uk-margin-remove uk-text-primary-gradient uk-text-bold uk-h6">Admin Dashboard</div>
				<h1 class="uk-h4 uk-margin-remove">{{name}}</h1>
			</div>
		</div>
		<div class="uk-margin uk-margin-remove-bottom">
			<admin-tabs tab="page" [portal]="portal"></admin-tabs>
		</div>
  </div>
  <div inner>
    <div *ngIf="showLoading" class="uk-position-center">
      <loading></loading>
    </div>
		<div *ngIf="!showLoading">
			<div class="uk-grid uk-margin-medium-bottom" uk-grid>
				<div class="uk-width-expand">
					<ul class="uk-subnav uk-subnav-pill">
						<li [class.uk-active]="filterForm.get('type').value === 'all'"><a
								(click)="filterForm.get('type').setValue('all')"><span>All pages</span></a></li>
						<li *ngFor="let type of typeOptions; let i=index"
								[class.uk-active]="filterForm.get('type').value === type.value"><a
								(click)="filterForm.get('type').setValue(type.value)"><span>{{type.label}}</span></a></li>
					</ul>
				</div>
				<div
						class="uk-flex uk-flex-center uk-flex-wrap uk-flex-middle uk-grid"
						uk-grid>
					<div #searchInputComponent search-input [control]="filterForm.controls.keyword" [showSearch]="false"
							placeholder="Search page"
							[selected]="selectedKeyword" (closeEmitter)="onSearchClose()" (resetEmitter)="reset()"
							[bordered]="true" colorClass="uk-text-secondary"
							class="uk-width-1-3@xl uk-width-2-5@l uk-width-1-2@m uk-width-1-1"></div>
	
					<div *ngIf="isPortalAdministrator">
						<a (click)="newPage()"
							class="uk-flex uk-flex-middle uk-text-uppercase">
							<button class="large uk-icon-button uk-button-secondary">
								<icon name="add"></icon>
							</button>
							<button class="uk-button uk-button-link uk-margin-small-left uk-text-secondary">Add page</button>
						</a>
					</div>
				</div>
			</div>
    </div>
		<div *ngIf="!showLoading && checkboxes.length > 0" class="uk-padding uk-padding-remove-top">
			<div 
					class="uk-display-inline"
					[attr.uk-tooltip]="getSelectedPages().length == 0 ? 'pos:left; cls: uk-active' : null"
					title="Select at least one page"><input id="checkAll" type="checkbox" (click)="selectAll()"
																									[ngModel]="getSelectedPages().length ==checkboxes.length"/>
				<span *ngIf="getSelectedPages().length > 0" class="uk-margin-left uk-text-muted">
													{{getSelectedPages().length}} pages selected </span>
				<a class="uk-margin-left">Actions</a>
				<div uk-dropdown="mode: click">
					<ul class="uk-nav uk-dropdown-nav"
							[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> Enable
						</a></li>
						<li *ngIf="!isPortalAdministrator"><a [class]="getSelectedPages().length == 0 ? 'uk-disabled' : ''"
																									(click)="togglePages(false,getSelectedPages())"><i></i> Disable
						</a>
						</li>
						<li *ngIf="isPortalAdministrator"><a [class]="getSelectedPages().length == 0 ? 'uk-disabled' : ''"
																								(click)="confirmDeleteSelectedPages()"><i></i> Delete </a></li>
					</ul>
				</div>
			</div>
		</div>
    <div *ngIf="!showLoading">
      <ul *ngIf="checkboxes.length > 0" class="uk-list pages">
        <li *ngFor="let check of checkboxes; let i=index" class="uk-card uk-card-default uk-margin-bottom">
          <div class="uk-grid uk-grid-divider uk-padding" uk-grid>
            <div class="uk-grid uk-width-expand" uk-grid>
              <div class=""><input id="{{check.page._id}}" class="checkBox" type="checkbox"
																	name="pagescb[]" value="{{check.page._id}}" [(ngModel)]="check.checked">
              </div>
              <div class="uk-width-expand">
                <div class="title uk-margin-medium-bottom">Name</div>
                <div class="name uk-margin-medium-bottom" href="#">{{check.page.name}}</div>
                <div *ngIf="check.page.entities && check.page.entities.length > 0"><span
                    class="title">Entities: </span>
                  {{getEntitiesAsString(check.page)}}</div>
                <div class=" uk-margin-small-bottom"><span class="title">Route: </span> {{check.page.route}}</div>
                <div *ngIf="!pagesType" class=" uk-margin-small-bottom"><span
                    class="title">Type: </span> {{check.page.type}}</div>
                <div *ngIf="!portal" class=" uk-margin-small-bottom">
                  <span class="title">Portal type: </span>{{check.page.portalType}}
                </div>
                <div *ngIf="!portal && check.page.portalPid" class=" uk-margin-small-bottom">
                  <span class="title">Portal PID: </span>{{check.page.portalPid}}
                </div>
              </div>
              <div *ngIf="!isPortalAdministrator && ((check.page.top || check.page.bottom || check.page.left ||
                  check.page.right) || pageWithDivIds.includes(check.page._id) )" class="uk-width-1-4">
                <div class="title uk-margin-medium-bottom">Help texts</div>
                <div class=" uk-margin-small-bottom">
                  <a *ngIf="check.page.top || check.page.bottom || check.page.left || check.page.right"
										class="helpContents"
										[queryParams]="{pageId: check.page._id}"
										routerLink="../helptexts">
                    Manage page help texts
                    <span *ngIf="pageHelpContentsCount[check.page._id]">({{pageHelpContentsCount[check.page._id]}})</span>
                  </a>
                </div>
                <div>
                  <a *ngIf="pageWithDivIds.includes(check.page._id)"
										[queryParams]="{ pageId: check.page._id}"
										routerLink="../classContents">Manage class help texts
                    <span *ngIf="pageClassContentsCount[check.page._id]">({{pageClassContentsCount[check.page._id]}})</span>
                  </a>
                </div>
              </div>
              <div *ngIf="!isPortalAdministrator" class="uk-width-1-4">
                <div class="title uk-margin-medium-bottom">Enable/disable</div>
                <mat-slide-toggle [checked]="check.page.isEnabled"
                                  (change)="($event.source.checked = check.page.isEnabled);togglePages(!check.page.isEnabled,[check.page._id])"
                                  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>">
                </mat-slide-toggle>
              </div>
            </div>
            <div *ngIf="isPortalAdministrator || (check.page.portalType == properties.adminToolsPortalType && check.page.portalPid == portal)" class="uk-width-1-5">
              <div class="uk-flex uk-flex-center uk-flex-column uk-height-1-1">
                <div class="uk-flex uk-flex-center">
                  <div class="actions">
                    <button [disabled]="!portal && check.page.portalPid" [attr.uk-tooltip]="((!portal && check.page.portalPid)?'This page belongs to ' + check.page.portalPid:null)"
                            class="uk-button action uk-margin-top uk-flex uk-flex-middle" (click)="editPage(i)">
                      <icon name="edit"></icon>
                      <span class="uk-margin-small-left"> Edit</span>
                    </button>
                    <button class="uk-button action uk-margin-top uk-flex uk-flex-middle" (click)="confirmDeletePage(check.page._id)">
                      <icon name="remove"></icon>
                      <span class="uk-margin-small-left"> Delete</span>
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </li>

      </ul>
      <div *ngIf="checkboxes.length == 0"
					class="uk-card uk-card-default uk-padding-large uk-text-center uk-margin-top uk-margin-bottom uk-text-bold">
        <div>No pages found</div>
      </div>
    </div>
  </div>
</div>
<modal-alert #editModal (alertOutput)="pageSaveConfirmed($event)"
            [okDisabled]="pageForm && (pageForm.invalid || !pageForm.dirty)">
  <form *ngIf="pageForm" [formGroup]="pageForm" class="uk-grid uk-child-width-1-1" uk-grid>
    <div input placeholder="Route" [formInput]="pageForm.get('route')"></div>
    <div input placeholder="Name" [formInput]="pageForm.get('name')"></div>
		<ng-container *ngIf="isPortalAdministrator">
			<div input placeholder="Type" [formInput]="pageForm.get('type')"
				type="select" [options]="typeOptions"></div>
			<div input placeholder="Add an entity" [formInput]="pageForm.get('entities')"
				type="chips" [options]="allEntities"></div>
			<div input placeholder="Choose a type" [formInput]="pageForm.get('portalType')"
				type="select" [options]="portalUtils.portalTypes"></div>
			<div class="form-group">
				<div class="uk-form-label uk-text-bold uk-margin-small-bottom"> Select if this page have helptext at:</div>
				<div class="uk-grid uk-grid-small uk-child-width-1-4" uk-grid>
					<div>
						<label class="uk-margin-small-right">Top</label>
						<input type="checkbox" class="uk-checkbox" formControlName="top">
					</div>
					<div>
						<label class="uk-margin-small-right">Right</label>
						<input type="checkbox" class="uk-checkbox" formControlName="right">
					</div>
					<div>
						<label class="uk-margin-small-right">Bottom</label>
						<input type="checkbox" class="uk-checkbox" formControlName="bottom">
					</div>
					<div>
						<label class="uk-margin-small-right">Left</label>
						<input type="checkbox" class="uk-checkbox" formControlName="left">
					</div>
				</div>
				<label class="uk-text-danger">
					By disabling a position, all contents in this position will be deleted.
				</label>
			</div>
		</ng-container>
  </form>

</modal-alert>

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