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

<div page-content>
  <div header>
    <div class="uk-flex uk-flex-middle uk-margin-medium-top info">
      <div>
        <div class="uk-text-background uk-text-bold uk-text-small">Manage Pages</div>
        <h1 class="uk-h6 uk-margin-remove">{{name ? name : 'Super Admin'}}</h1>
      </div>
    </div>
    <admin-tabs tab="page" [portal]="portal" [type]="type"></admin-tabs>
    <ul class="uk-subnav uk-subnav-pill uk-margin-medium-top">
      <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 actions>
    <div class="uk-section-xsmall">
      <div class="uk-flex uk-flex-right@m uk-flex-center uk-flex-wrap uk-flex-middle uk-grid" uk-grid>
        <div search-input [expandable]="true" [searchControl]="filterForm.get('keyword')" searchInputClass="outer"
             placeholder="Search page" [disabled]="showLoading"
             class="uk-width-1-3@xl uk-width-2-5@l uk-width-1-2@m uk-width-1-1"></div>
        <div *ngIf="isPortalAdministrator">
          <button class="uk-button uk-button-default uk-flex uk-flex-middle" (click)="newPage()"
                  [disabled]="showLoading" [class.uk-disabled]="showLoading">
            <icon name="add" [flex]="true"></icon>
            <span class="uk-margin-small-left uk-text-bold uk-text-uppercase">Add page</span>
          </button>
        </div>
      </div>
    </div>
  </div>
  <div inner>
    <div class="uk-section uk-section-small uk-position-relative" style="min-height: 60vh">
      <div *ngIf="showLoading" class="uk-position-center">
        <loading></loading>
      </div>
      <ng-container *ngIf="!showLoading">
        <div *ngIf="checkboxes.length > 0 && !portal" class="uk-flex uk-flex-middle uk-padding uk-padding-remove-top">
          <label>
            <input id="checkAll" type="checkbox" (click)="selectAll()" class="uk-checkbox"
                   [ngModel]="getSelectedPages().length ==checkboxes.length"/>
          </label>
          <div class="uk-margin-left">
            <button class="uk-button uk-button-link" [class.uk-disabled]="getSelectedPages().length == 0"
                    [disabled]="getSelectedPages().length == 0">
              Bulk Actions ({{getSelectedPages().length}})
            </button>
            <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 (click)="confirmDeleteSelectedPages()"><i></i>
                    Delete
                  </a>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <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 *ngIf="checkboxes.length > 0" class="uk-grid uk-child-width-1-1" uk-height-match=".uk-card-body" uk-grid>
          <div *ngFor="let check of checkboxes; let i=index">
            <div class="uk-card uk-card-default">
              <div class="uk-card-body uk-flex">
                <div *ngIf="!portal" class="uk-margin-right">
                  <input [id]="check.page._id" class="uk-checkbox" type="checkbox"
                         name="pagescb[]" value="{{check.page._id}}" [(ngModel)]="check.checked">
                </div>
                <div class="uk-width-expand uk-text-small">
                  <h6>{{check.page.name}}</h6>
                  <div *ngIf="check.page.entities && check.page.entities.length > 0" class="uk-margin-small-bottom">
                    <span class="uk-text-meta">Entities: </span>{{getEntitiesAsString(check.page)}}
                  </div>
                  <div class="uk-margin-small-bottom">
                    <span class="uk-text-meta">Route: </span>{{check.page.route}}
                  </div>
                  <div *ngIf="!pagesType" class="uk-margin-small-bottom">
                    <span class="uk-text-meta">Type: </span>{{check.page.type}}
                  </div>
                  <div *ngIf="!portal" class="uk-margin-small-bottom">
                    <span class="uk-text-meta">Portal type: </span>{{check.page.portalType}}
                  </div>
                  <div *ngIf="!portal && check.page.portalPid" class="uk-margin-small-bottom">
                    <span class="uk-text-meta">Portal PID: </span>{{check.page.portalPid}}
                  </div>
                </div>
              </div>
              <div class="uk-card-footer uk-padding-remove-vertical">
                <div class="uk-grid uk-grid-small uk-flex-nowrap uk-grid-divider uk-flex-right" uk-grid>
                  <ng-container *ngIf="!isPortalAdministrator">
                    <div *ngIf="check.page.top || check.page.bottom || check.page.left || check.page.right">
                      <div class="uk-padding-small uk-padding-remove-horizontal">
                        <a class="uk-button uk-button-link uk-text-truncate"
                           [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>
                    <div *ngIf="pageWithDivIds.includes(check.page._id)">
                      <div class="uk-padding-small uk-padding-remove-horizontal">
                        <a class="uk-button uk-button-link"
                           [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>
                      <div class="uk-padding-small uk-padding-remove-horizontal">
                        <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><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>">
                          <span class="uk-text-small">Enable</span>
                        </mat-slide-toggle>
                      </div>
                    </div>
                  </ng-container>
                  <ng-container
                      *ngIf="isPortalAdministrator || (check.page.portalType == properties.adminToolsPortalType && check.page.portalPid == portal)">
                    <div>
                      <div class="uk-padding-small uk-padding-remove-horizontal">
                        <button [disabled]="!portal && check.page.portalPid"
                                [attr.uk-tooltip]="((!portal && check.page.portalPid)?'This page belongs to ' + check.page.portalPid:null)"
                                class="uk-button uk-button-link uk-flex uk-flex-middle" (click)="editPage(i)">
                          <icon name="edit" [flex]="true"></icon>
                          <span class="uk-margin-xsmall-left"> Edit</span>
                        </button>
                      </div>
                    </div>
                    <div>
                      <div class="uk-padding-small uk-padding-remove-horizontal">
                        <button class="uk-button uk-button-link uk-flex uk-flex-middle"
                                (click)="confirmDeletePage(check.page._id)">
                          <icon name="delete" [flex]="true"></icon>
                          <span class="uk-margin-xsmall-left"> Delete</span>
                        </button>
                      </div>
                    </div>
                  </ng-container>
                </div>
              </div>
            </div>
          </div>
        </div>
      </ng-container>
    </div>
  </div>
</div>
<modal-alert #editModal (alertOutput)="pageSaveConfirmed($event)"
             [okDisabled]="pageForm && (pageForm.invalid || !pageForm.dirty)"
             classTitle="uk-background-primary uk-light">
  <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>
        <div class="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>
              <input type="checkbox" class="uk-checkbox" formControlName="top">
              <span class="uk-margin-small-left">Top</span>
            </label>
          </div>
          <div>
            <label>
              <input type="checkbox" class="uk-checkbox" formControlName="right">
              <span class="uk-margin-small-left">Right</span>
            </label>
          </div>
          <div>
            <label>
              <input type="checkbox" class="uk-checkbox" formControlName="bottom">
              <span class="uk-margin-small-left">Bottom</span>
            </label>
          </div>
          <div>
            <label>
              <input type="checkbox" class="uk-checkbox" formControlName="left">
              <span class="uk-margin-small-left">Left</span>
            </label>
          </div>
        </div>
        <div class="uk-text-danger uk-margin-top">
          By disabling a position, all contents in this position will be deleted.
        </div>
      </div>
    </ng-container>
  </form>

</modal-alert>
<modal-alert #deleteModal [overflowBody]="false" (alertOutput)="confirmedDeletePages()"
             classTitle="uk-background-primary uk-light"></modal-alert>