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

<div class="uk-flex">
  <aside id="sidebar_main" class="uk-sticky" uk-sticky="start: 0; end: .sidebar_main_swipe">
    <div sidebar-content>
      <div *ngIf="editView" class="back">
        <a *ngIf="!editSubmenuOpen" (click)="editView = false; selectedTemplate = null; selectedPlugin = null;"
           class="uk-flex uk-flex-middle uk-flex-center">
          <div class="uk-width-auto">
            <icon name="west" ratio="1.3"
                  [flex]="true"></icon>
          </div>
          <span class="uk-text-small">Plugins list</span>
        </a>
        <div *ngIf="editSubmenuOpen" class="back uk-margin-bottom">
          <a (click)="editSubmenuOpen = false" class="uk-flex uk-flex-middle uk-flex-center">
            <div class="uk-width-auto">
              <icon name="west" ratio="1.3"
                    [flex]="true"></icon>
            </div>
            <span class="uk-text-small">Plugin Options</span>
          </a>

        </div>
        <div *ngIf="templateForm" class="uk-width-auto uk-margin-top uk-margin-left">
          <button class="uk-button uk-button-default uk-margin-right"
                  (click)="reset()" [class.uk-disabled]="!templateForm.dirty"
                  [disabled]="!templateForm.dirty || showLoading">Reset
          </button>
          <button class="uk-button uk-button-primary"
                  [class.uk-disabled]="templateForm.invalid || !templateForm.dirty || templateForm.disabled"
                  (click)="saveConfirmed(index)"
                  [disabled]="templateForm.invalid ||!templateForm.dirty || templateForm.disabled || showLoading">Save
          </button>
        </div>
      </div>
      <div class="menu_section uk-margin-top uk-margin-left">
        <div *ngIf="!editView">Select a plugin to edit</div>
        <ng-container *ngIf="editView">

          <form *ngIf="!selectTemplateView" [formGroup]="templateForm" >
            <div *ngIf="!editSubmenuOpen" class="uk-text-small uk-margin-small-left">Enable
              <mat-slide-toggle [checked]="templateForm.get('active').value"
                                (change)="templateForm.get('active').setValue($event.checked); templateForm.markAsDirty()"></mat-slide-toggle>
            </div>
            <plugin-wrapper-form [pluginTemplate]="selectedTemplate" [plugin]="this.templateForm.getRawValue()"
                                 (changed)="pluginFieldChanged($event)"
                                 [pluginObject]="this.selectedPlugin.object"
                                 [editSubmenuOpen]="editSubmenuOpen" ></plugin-wrapper-form>
            <ng-container *ngIf="selectedTemplate || selectedPlugin">
              <div *ngIf="attrFormArray.controls.length > 0"
                   class="uk-heading-divider  uk-text-small uk-width-1-1 uk-margin-bottom uk-text-meta">
                <div class="uk-grid">
                  <div>Plugin settings</div>
                </div>
              </div>
              <div *ngFor="let attrForm of attrFormArray.controls; let i=index"
                   class="uk-width-1-1 uk-grid uk-child-width-1-2 uk-margin-top" uk-grid>
                <div *ngIf="this.selectedTemplate.settings[attrForm.get('key').value].type == 'text'" input
                     [formInput]="attrForm.get('value')"
                     [placeholder]="selectedTemplate.settings[attrForm.get('key').value].name" type="text"></div>
                <div *ngIf="this.selectedTemplate.settings[attrForm.get('key').value].type == 'URL'" input
                     [formInput]="attrForm.get('value')"
                     [placeholder]="selectedTemplate.settings[attrForm.get('key').value].name" type="URL"
                     [validators]="urlValidator"></div>
                <div *ngIf="this.selectedTemplate.settings[attrForm.get('key').value].type == 'boolean'" input
                     [formInput]="attrForm.get('value')"
                     [placeholder]="selectedTemplate.settings[attrForm.get('key').value].name" type="select"
                     [options]="[{label: 'yes', value:true}, {label: 'no', value:false}]"></div>
                <div *ngIf="this.selectedTemplate.settings[attrForm.get('key').value].type == 'HTML'"
                     class="uk-width-1-1">
                  <label>
                    {{selectedTemplate.settings[attrForm.get('key').value].name}}:
                  </label>
                  <ckeditor [readonly]="false"
                            debounce="500"
                            [formControl]="attrForm.get('value')"
                            [config]="{ extraAllowedContent: '* [uk-*](*) ; span', disallowedContent: 'script; *[on*]',
                                        removeButtons:  'Save,NewPage,DocProps,Preview,Print,' +
                                                        'Form,Checkbox,Radio,TextField,Textarea,Select,Button,ImageButton,HiddenField,' +
                                                        'CreateDiv,Flash,PageBreak,' +
                                                        'Subscript,Superscript,Anchor,Smiley,Iframe,Styles,Font,About,Language',
                                        extraPlugins: 'divarea'}">
                  </ckeditor>
                </div>
              </div>

            </ng-container>
          </form>
        </ng-container>
      </div>
    </div>
  </aside>

  <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 *ngIf="!templateView && !editView" 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 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> <!--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 && !editView">
          <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"
                   class="uk-heading-divider uk-h6 uk-margin-left uk-padding-remove-left uk-text-capitalize ">{{placement.value}}</div>
              <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 == 'starter'|| pluginGroup.template.plan == communityInfo.plan )">
                  <div class="uk-card uk-card-default uk-margin-bottom">
                    <div class="uk-card-body uk-flex">
                      <div class="uk-width-expand uk-text-small">
                        <ng-container *ngIf="pluginGroup.template && !templateView">
                          <h6>{{pluginGroup.template.name}}</h6>
                          <div class="uk-margin-small-bottom">
                            {{pluginGroup.template.description}}
                          </div>

                        </ng-container>
                        <div 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 class="uk-accordion-title">Preview</a>
                            <div class="uk-accordion-content">
                              <plugin-wrapper [pluginTemplate]="pluginGroup.template" [plugin]="pluginGroup.plugin"
                                              [pluginObject]="pluginGroup.plugin.object"></plugin-wrapper>
                            </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">
                            <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>
                        <!--                  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="pluginGroup.plugin.order>0">
                          <div class="uk-padding-small uk-padding-remove-horizontal">
                            <button
                                class="uk-button uk-button-link uk-flex uk-flex-middle"
                                (click)="swap(i, i-1, placement.value)">
                              <!--                        <icon name="" [flex]="true"></icon>-->
                              <span class="uk-margin-xsmall-left"> Up</span>
                            </button>
                          </div>
                        </div>
                        <div *ngIf="pluginGroup.plugin.order < 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"
                                (click)="swap(i+1, i, placement.value)">
                              <!--                        <icon name="" [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>
            </ng-container>

          </ng-container>
        </ng-container>
        <ng-container *ngIf="editView">
          <plugin-wrapper *ngIf="this.templateForm" [pluginTemplate]="selectedTemplate"
                          [plugin]="this.templateForm.getRawValue()"
                          [pluginObject]="this.selectedPlugin.object"
                          class="uk-width-1-1"></plugin-wrapper>
        </ng-container>
      </div>
    </div>
  </div>
</div>