openaire-library/dashboard/entity/entities.component.html

<div page-content class="admin-pages" (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">
			<admin-tabs tab="entity" [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-grid-medium-bottom" uk-grid>
				<div class="uk-width-expand">
					<ul *ngIf="!isPortalAdministrator" class="uk-subnav uk-subnav-pill">
						<li [class.uk-active]="filterForm.get('status').value === 'all'"><a
								(click)="filterForm.get('status').setValue('all')"><span
								class="title">All entities</span></a></li>
						<li [class.uk-active]="filterForm.get('status').value === 'enabled'"><a
								(click)="filterForm.get('status').setValue('enabled')"><span class="title">Enabled</span></a></li>
						<li [class.uk-active]="filterForm.get('status').value === 'disabled'"><a
								(click)="filterForm.get('status').setValue('disabled')"><span class="title">Disabled</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 entity"
							[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)="newEntity()"
							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 entity</button>
						</a>
					</div>
				</div>
			</div>
		</div>
		<div *ngIf="!showLoading && checkboxes.length > 0" class="uk-padding">
			<div
					class="uk-display-inline"
					[attr.uk-tooltip]="getSelectedEntities().length == 0 ? 'pos:left; cls: uk-active' : null"
					title="Select at least one entity"><input id="checkAll" type="checkbox" (click)="selectAll()"
																										[ngModel]="getSelectedEntities().length ==checkboxes.length"/>
				<span *ngIf="getSelectedEntities().length > 0" class="uk-margin-left uk-text-muted">
													{{getSelectedEntities().length}} entities selected </span>
				<a class="uk-margin-left ">Actions </a>
				<div uk-dropdown="mode: click">
					<ul class="uk-nav uk-dropdown-nav"
							[attr.uk-tooltip]="getSelectedEntities().length == 0 ? 'pos:left; cls: uk-active' : 'cls: uk-invisible'"
							title="Select at least one entity">
						<li *ngIf="!isPortalAdministrator"><a [class]="getSelectedEntities().length == 0 ? 'uk-disabled' : ''"
																									(click)="toggleEntities(true,getSelectedEntities())"><i></i> Enable
						</a></li>
						<li *ngIf="!isPortalAdministrator"><a [class]="getSelectedEntities().length == 0 ? 'uk-disabled' : ''"
																									(click)="toggleEntities(false,getSelectedEntities())"><i></i> Disable
						</a>
						</li>
						<li *ngIf="isPortalAdministrator"><a [class]="getSelectedEntities().length == 0 ? 'uk-disabled' : ''"
																								(click)="confirmDeleteSelectedEntities()"><i></i> Delete </a></li>
					</ul>
				</div>
			</div>
		</div>
    <div *ngIf="!showLoading">
      <table *ngIf="checkboxes.length > 0 " class="uk-table uk-table-striped uk-table-hover uk-table-large">
        <thead class="uk-card-header">
        <tr>
          <th class="uk-width-small"></th>
          <th>Name</th>
          <th *ngIf="!isPortalAdministrator">Status</th>
          <th *ngIf="!isPortalAdministrator">Enable/Disable</th>
          <th *ngIf="isPortalAdministrator">Actions</th>
        </tr>
        </thead>
        <tbody>
        <tr *ngFor="let check of checkboxes; let i=index">
          <td><input id="{{check.entity._id}}" class="checkBox" type="checkbox"
                     name="entitiescb[]" value="{{check.entity._id}}" [(ngModel)]="check.checked">
          </td>
          <td>
            <div class="name" href="#">{{check.entity.name}}</div>
          </td>
          <td *ngIf="!isPortalAdministrator">
            <div class="name" href="#">{{check.entity.isEnabled ? "Enabled" : "Disabled"}}</div>
          </td>
          <td *ngIf="!isPortalAdministrator">
            <mat-slide-toggle [checked]="check.entity.isEnabled"
                              (change)="($event.source.checked = check.entity.isEnabled);toggleEntities(!check.entity.isEnabled,[check.entity._id])"
                              uk-tooltip="title:<div class='uk-padding-small uk-width-large'><div class='uk-text-bold '>Disable an entity to hide it from community dashboard portal.</div><div class=' uk-margin-top'>If an entity is disabled, all related search and advanced search pages will be hidden from the community dashborad and a message 'Can't find that page' will appear in case the url of  that page is loaded. If the related page belongs to the menu the link will be removed from menu, too.</div></div>"
            ></mat-slide-toggle>
          </td>

          <td *ngIf="isPortalAdministrator">
            <div class="actions" href="#">
              <icon class="clickable" name="edit" (click)="editEntity(i)"></icon>
              <icon class="clickable uk-margin-small-left" [customClass]="'uk-text-danger'" name="remove" (click)="confirmDeleteEntity(check.entity._id)"></icon>
            </div>
          </td>
        </tr>
        </tbody>
      </table>
      <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 entities found</div>
      </div>
    </div>
  </div>
</div>
<modal-alert #editModal (alertOutput)="entitySaveConfirmed($event)"
             [okDisabled]="entityForm && (entityForm.invalid || !entityForm.dirty)">
  <form *ngIf="entityForm" [formGroup]="entityForm" class="uk-grid uk-child-width-1-1" uk-grid>
    <div dashboard-input [formInput]="entityForm.get('name')"
         type="text" placeholder="Write a name"
         label="Entity Name">
    </div>
    <div dashboard-input [formInput]="entityForm.get('pid')"
         type="text" placeholder="Write a pid"
         label="Entity Pid">
    </div>
  </form>
</modal-alert>
<modal-alert #relatedPages (alertOutput)="continueToggling($event)"></modal-alert>

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