openaire-library/dashboard/page/pages.component.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-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>
        </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="!selectedCommunityPid">Portal Type</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="!selectedCommunityPid">
                      <div class="portalType" href="#">{{check.page.portalType}}</div>
                    </td>

                    <td *ngIf="isPortalAdministrator">
                      <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>
                    </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-button uk-button-default" (click)="newPage()">
                    <i class="" uk-icon="plus"></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>-->

    <div [ngClass]="{'has-error':!myForm.controls.portalType.valid && myForm.controls.portalType.dirty}" class="form-group" >
      <div class="uk-width-1-1 uk-margin-small-bottom">
        Page exists in:
      </div>
      <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 #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>