openaire-library/dashboard/plugins/plugins.component.html

  <div page-content class="uk-width-1-1">
    <div header>
      <div class="uk-section-xsmall uk-margin-top">
        <div class="uk-flex-middle uk-grid" uk-grid>
          <ng-container>
            <div  class="uk-width-expand">
              <a routerLink="../pages" class="uk-flex uk-flex-middle uk-h5 uk-link-reset">
            <span class="uk-margin-right">
              <icon name="west" ratio="1.7" [flex]="true"></icon>
            </span>
                <h1 *ngIf="page" class="uk-h5 uk-margin-remove">{{page.name}}</h1>
              </a>
              <ul *ngIf="!sinlgePlacementAvailable" class="uk-subnav uk-subnav-pill uk-margin-medium-top">
                <li [class.uk-active]="selectedPlacementView === 'all'" class="uk-margin-small-bottom"><a
                    (click)="selectedPlacementView = 'all'"><span
                    class="title">All placements</span></a></li>
                <li *ngFor="let position of  pluginUtils.placementsOptions; let i=index"
                    [class.uk-active]="selectedPlacementView === position.value" class="uk-margin-small-bottom"><a
                    (click)="selectedPlacementView = position.value"><span
                    class="title">{{position.label}}</span></a></li>
              </ul>

            </div>
            <!--<div *ngIf="templateView" class="uk-width-expand">
              <a routerLink="../.." class="uk-flex uk-flex-middle uk-h5 uk-link-reset">
          <span class="uk-margin-right">
            <icon name="west" ratio="1.7" [flex]="true"></icon>
          </span>
                <h1 *ngIf="template" class="uk-h5 uk-margin-remove">{{template.name}}</h1>
              </a>
            </div>-->

          </ng-container>
        </div>
      </div>
    </div>
    <div inner>
        <div *ngIf="showLoading" class="uk-position-center">
          <loading></loading>
        </div>
        <ng-container *ngIf="!showLoading">
          <div *ngIf="pluginTemplates.length> 0" class="uk-padding-xsmall uk-grid uk-flex uk-flex-middle">
            <!--              filters-->
            <div class="uk-width-expand">
              <input  [ngModel]="filterActive" [checked]="filterActive" (ngModelChange)="filterActive = !filterActive"   type="checkbox"   class="uk-checkbox"> Show active
            </div>
            <div class="uk-padding-small uk-padding-remove-horizontal uk-width-auto">
              <a class="uk-button uk-button-link uk-flex uk-flex-middle">
                <icon name="add" [flex]="true"></icon>
                <span class="uk-margin-small-left">
                        Add custom plugin
                      </span>
              </a>
              <div uk-dropdown="mode:click">
                <ul class="uk-nav uk-dropdown-nav">

                  <ng-container *ngFor="let template of pluginTemplates">
                    <li *ngIf="template.custom"><a (click)="addNewCustomPlugin(template)"> {{template.name}}</a></li>
                  </ng-container>


                </ul>
              </div>
            </div>
          </div>
          <div *ngIf="pluginTemplates.length == 0"
               class="uk-card uk-card-default uk-padding-large uk-text-center uk-margin-bottom uk-text-bold">
            <div>No plugins found</div>
          </div>
          <ng-container *ngFor="let placement of pluginUtils.placementsOptions">

            <ng-container *ngIf="selectedPlacementView == placement.value || selectedPlacementView == 'all'">
              <div *ngIf="pluginsByPlacement.get(placement.value).length >0 && page && !sinlgePlacementAvailable"
                   class="uk-heading-divider uk-h6 uk-margin-left uk-padding-remove-left uk-text-capitalize ">{{placement.value}}</div>
              <div class="uk-animation-toggle">
              <ng-container *ngFor="let pluginGroup of pluginsByPlacement.get(placement.value) ; let i=index">
                <ng-container *ngIf="(pluginGroup.template.portalSpecific.length == 0 || pluginGroup.template.portalSpecific.indexOf(communityInfo.communityId) != -1 ) &&
               (pluginGroup.template.plan == 'Standard' || pluginGroup.template.plan == 'Default' || pluginGroup.template.plan == communityInfo.plan )
&& ( !filterActive || (filterActive && pluginGroup.plugin.active))">
                  <div class="uk-card uk-card-default uk-margin-bottom uk-animation-fade" >
                    <div class="uk-card-body uk-flex">
                      <div class="uk-width-expand uk-text-small">
                        <ng-container *ngIf="pluginGroup.template && !templateView">
                          <h6 *ngIf="!(pluginGroup.plugin.custom && pluginGroup.template.custom)">{{pluginGroup.template.name}}</h6>
                          <h6 *ngIf="pluginGroup.plugin.custom && pluginGroup.template.custom">{{pluginGroup.plugin.object && pluginGroup.plugin.object.title?pluginGroup.plugin.object.title:pluginGroup.template.name}}</h6>

                          <div class="uk-margin-small-bottom">
                            {{pluginGroup.template.description}}
                          </div>

                        </ng-container>
                        <div *ngIf="!sinlgePlacementAvailable" class="uk-margin-small-bottom">
                          <span class="uk-text-meta">Placement: </span>{{pluginGroup.plugin.placement}}
                        </div>
                        <!--<div class="uk-margin-small-bottom">
                          <span class="uk-text-meta">Order: </span>{{pluginGroup.plugin.order}}
                        </div>-->
                        <ul uk-accordion>
                          <li>
                            <a (click)="pluginGroup.openPreview = !pluginGroup.openPreview" class="uk-accordion-title">Preview</a>
                            <div class="uk-accordion-content">
                              <ng-container *ngIf="pluginGroup.openPreview">
                                <plugin-wrapper [pluginTemplate]="pluginGroup.template" [plugin]="pluginGroup.plugin"
                                              [pluginObject]="pluginGroup.plugin.object" [previewInAdmin]="true"></plugin-wrapper>
                              </ng-container>
                            </div>
                          </li>
                        </ul>


                      </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>
                        <div>
                          <div class="uk-padding-small uk-padding-remove-horizontal">
                            <a
                                class="uk-button uk-button-link uk-flex uk-flex-middle"
                                routerLink="./edit" [queryParams]=" {  'pageId': page._id, pluginId: pluginGroup.plugin._id, templateId:pluginGroup.template._id  }"
                                [class.uk-disabled]="!pluginGroup.template">
                              <icon name="edit" [flex]="true"></icon>
                              <span class="uk-margin-xsmall-left"> Edit</span>
                            </a>
                          </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)="edit(pluginGroup.plugin, pluginGroup.template, placement, i)"
                                [class.uk-disabled]="!pluginGroup.template">
                              <icon name="edit" [flex]="true"></icon>
                              <span class="uk-margin-xsmall-left"> Edit</span>
                            </button>
                          </div>
                        </div>-->
                        <div *ngIf="pluginGroup.plugin.custom && pluginGroup.template.custom">
                          <div class="uk-padding-small uk-padding-remove-horizontal">
                            <button
                                class="uk-button uk-button-link uk-flex uk-flex-middle uk-text-danger"
                                (click)="promtToDelete(i, placement.value)">
                              <icon name="delete"  [flex]="true"></icon>
                              <span class="uk-margin-xsmall-left">Delete</span>
                            </button>
                          </div>
                        </div>
                        <!--                  Maybe change delete to reset to default values ? -->
                        <!--<div>
                          <div class="uk-padding-small uk-padding-remove-horizontal">
                            <button class="uk-button uk-button-link uk-flex uk-flex-middle"
                                    (click)="confirmDelete(check.plugin._id)">
                              <icon name="delete" [flex]="true"></icon>
                              <span class="uk-margin-xsmall-left"> Delete</span>
                            </button>
                          </div>
                        </div>-->
                        <div *ngIf="i >0">
                          <div class="uk-padding-small uk-padding-remove-horizontal">
                            <button
                                class="uk-button uk-button-link uk-flex uk-flex-middle" [class.uk-disabled]="filterActive" [title]="filterActive?'Move is disabled when plugins are filtered':''"
                                (click)="swap(i, i-1, placement.value)">
                              <icon name="arrow_upward"  [flex]="true"></icon>
                              <span class="uk-margin-xsmall-left"> Up</span>
                            </button>
                          </div>
                        </div>
                        <div *ngIf="i < pluginsByPlacement.get(placement.value).length -1 ">
                          <div class="uk-padding-small uk-padding-remove-horizontal">
                            <button
                                class="uk-button uk-button-link uk-flex uk-flex-middle"  [class.uk-disabled]="filterActive" [title]="filterActive?'Move is disabled when plugins are filtered':''"
                                (click)="swap(i+1, i, placement.value)">
                              <icon name="arrow_downward"  [flex]="true"></icon>
                              <span class="uk-margin-xsmall-left">Down</span>
                            </button>
                          </div>
                        </div>
                        <div>
                          <div class="uk-padding-small uk-padding-remove-horizontal">
                            <mat-slide-toggle [checked]="pluginGroup.plugin.active"
                                              (change)="($event.source.checked = pluginGroup.plugin.active);togglePlugin(!pluginGroup.plugin.active,pluginGroup.plugin._id,i, placement.value)"
                            >
                              <span class="uk-text-small">Enable</span>
                            </mat-slide-toggle>
                          </div>
                        </div>
                      </div>

                    </div>
                  </div>
                </ng-container>
              </ng-container>
              </div>
            </ng-container>

          </ng-container>
        </ng-container>
      </div>
    </div>
<!--</div>-->
  <modal-alert #deleteModal [overflowBody]="false" (alertOutput)="confirmDelete()"
               classTitle="uk-background-primary uk-light"></modal-alert>