D-Net

<div page-content class="admin-pages">

  <div header>

    <admin-tabs tab="page" [portal]="selectedCommunityPid"></admin-tabs>

    <div *ngIf="!errorMessage && !showLoading" class="uk-grid filters" uk-grid>

      <div class="uk-width-1-1">

        <ul class="uk-subnav uk-subnav-pill">

          <li [class.uk-active]="filterForm.get('type').value === 'all'"><a

              (click)="filterForm.get('type').setValue('all')"><span

              class="title">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

              class="title">{{type.label}}</span></a></li>

        </ul>

      </div>

      <div class="uk-width-1-1 uk-flex uk-flex-right uk-flex-middle">

        <div search-input [control]="filterForm.controls.keyword" [showSearch]="false" placeholder="Search page"

             [bordered]="true" colorClass="uk-text-secondary"></div>

        <div class="uk-margin-left show-options">

          <button class="uk-button uk-button-secondary">Bulk Actions</button>

          <div uk-dropdown="mode: click">

            <ul class="uk-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())"> Activate

              </a></li>

              <li *ngIf="!isPortalAdministrator"><a [class]="getSelectedPages().length == 0 ? 'uk-disabled' : ''"

                                                    (click)="togglePages(false, getSelectedPages())"> Deactivate

              </a></li>

              <li *ngIf="isPortalAdministrator"><a (click)="confirmDeleteSelectedPages()"> Delete </a></li>

            </ul>

          </div>

          <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 inner>

    <div class="contentPanel ">

      <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.

            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 *ngIf="updateErrorMessage" class="uk-alert-danger" uk-alert>

        <a class="uk-alert-close" uk-close></a>

        {{updateErrorMessage}}

      </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

        <div class="md-card-content">

          <div class="uk-overflow-container">

            <ul 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-padding">

                    <div class="name uk-margin-medium-bottom" href="#">{{check.page.name}}</div>

                    <div *ngIf="check.page.entities && check.page.entities.length > 0"><span

                    <div class=" uk-margin-small-bottom"><span class="title">Route: </span> {{check.page.route}}</div>

                        class="title">Type: </span> {{check.page.type}}</div>

                  </div>

                  <div *ngIf="isPortalAdministrator" class="uk-width-1-4">

                    <div class="title uk-margin-medium-bottom">Actions</div>

                    <div class="actions" href="#">

                      <i class="clickable " (click)="editPage(i)" uk-icon="pencil"></i>

                      <i class="clickable uk-text-danger"

                         (click)="confirmDeletePage(check.page._id)" uk-icon="trash"></i>

                    </div>

                  </div>

                  <div *ngIf="!isPortalAdministrator" class="uk-width-1-4">

                    <div class="title uk-margin-medium-bottom">Helptexts</div>

                    <div class=" uk-margin-small-bottom">

                         class="helpContents"

                         [queryParams]="{communityId: selectedCommunityPid, pageId: check.page._id}"

                    <div>

                         routerLink="../../classContents">manage class contents</a>

                  </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])"></mat-slide-toggle>

                  </div>

              </li>

            <div *ngIf="checkboxes.length==0" class="col-md-12">

              <div class="uk-alert-warning" uk-alert>No pages found</div>

            </div>

            <div *ngIf="isPortalAdministrator" class="uk-width-1-1 uk-flex uk-flex-center ">

              <div class="uk-width-small uk-button uk-button-default" (click)="newPage()">

                <i class="" uk-icon="plus"></i>

          </div>

        </div>

      </div>

    </div>

  </div>

</div>

             [okDisabled]="myForm && (myForm.invalid || !myForm.dirty)">

  <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

            [selectable]="true"

            [removable]="true">

          <span (click)="remove(entity)"

        <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>

        By disabling a position, all contents in this position will be deleted.

      </label>

        <span dashboard-input class="" [formInput]="myForm.get('top')"

              type="checkbox"

        <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>

         class="form-group">

        <span *ngFor="let option of portalUtils.portalTypes" class="radio ">

          <span class="uk-margin-small-right" style="font-weight: normal;">{{option.label}}</span>

          <input type="radio" [value]="option.value" formControlName="portalType">

        </span>

      </div>

    <input type="hidden" formControlName="_id">

  </form>

</modal-alert>

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