Page Comparison

Table of Contents

include	^Example.*

Example 1: Finalize

Description

In this example, we create our own implementation of the already existing 'finalizeFinalize' action.

Implementation

Use a CLI command to generate a plug-in component with the name finalize-object-action.
Code Block
language bash
linenumbers true
eo g action finalize-object-action

Update finalize-object-action.component.ts to extend DmsObjectTarget and implement SimpleAction interface.

Code Block

language	js
title	finalize-object-action.component.ts
linenumbers	true

import {of as observableOf} from 'rxjs';
import {Component} from '@angular/core';
import {SimpleAction} from '@eo-sdk/client';
import {DmsObjectTarget, SelectionRange} from '@eo-sdk/client';
import {DmsService, TranslateService, DmsObject} from '@eo-sdk/core';

@Component({
  selector: 'eo-finalize-object-action',
  template: ``
})
export class FinalizeObjectActionComponent extends DmsObjectTarget implements SimpleAction {
  label: string;
  description: string;
  priority = 0;
  iconSrc = 'assets/_default/svg/ic_finalized.svg';
  group = 'common';
  range = SelectionRange.MULTI_SELECT;

  constructor(private translate: TranslateService, private dmsService: DmsService) {
    super();
    this.label = this.translate.instant('eo.custom.action.finalize-object-action.label');
    this.description = this.translate.instant('eo.custom.action.finalize-object-action.description');
  }

  isExecutable(item: DmsObject) {
    return observableOf((item.rights && item.rights.finalize) && !item.lock && !item.isFinalized);
  };

  run(selection: DmsObject[]) {
    selection.forEach(item => {
      this.dmsService.finalize(item).subscribe();
    });
  }
}

Use a CLI command to generate labels/translations.

Code Block

language	bash
linenumbers	true

eo g label eo.custom.action.finalize-object-action.label --en "Finalize (new)" --de "Finalisieren (neu)"

Code Block

language	bash
linenumbers	true

eo g label eo.custom.action.finalize-object-action.description --en "Finalizes the selected objects." --de "Finalisiert die markierten Objekte."

Example 2: Paint

Description

In this example, we utilize an already existing angular component to open and edit images. The changes will be saved back to the object.

Image ModifiedImage Modified

Implementation

Use a CLI command to generate a plug-in component with name paint-action.
Code Block
language bash
linenumbers true
eo g action paint-action

Update paint-action.component.ts to extend DmsObjectTarget and implement ExternalComponentAction interface.

Code Block

language	js
title	paint-action.component.ts
linenumbers	true

import {Component} from '@angular/core';
import {of as observableOf} from 'rxjs';
import {DmsObjectTarget} from '@eo-sdk/client';
import {DmsObject} from '@eo-sdk/core';
import {SelectionRange} from '@eo-sdk/client';
import {ExternalComponentAction} from '@eo-sdk/client';
import {PaintComponent} from './paint/paint.component';
import {TranslateService} from '@eo-sdk/core';

@Component({
  selector: 'eo-paint-action',
  template: ``
})
export class PaintActionComponent extends DmsObjectTarget implements ExternalComponentAction {
  extComponents = PaintComponent;
  // component = PaintComponent;
  label: string;
  description: string;
  priority = 0;
  iconSrc = 'assets/_default/svg/ic_edit.svg';
  group = 'common';
  range = SelectionRange.SINGLE_SELECT;
  api: any;

  constructor(private translate: TranslateService) {
    super();
    this.label = this.translate.instant('eo.custom.action.menu.edit.picture.label');
    this.description = this.translate.instant('eo.custom.action.menu.edit.picture.description');
  }

  isExecutable(element: DmsObject) {
    // enable action only if DmsObject can be edited
    return observableOf(!!element.content && !element.isFinalized && element.rights.edit);
  }
}

Use a CLI command to install the canvas package.
Code Block
language bash
linenumbers true
npm install -P ng2-canvas-whiteboard

Import CanvasWhiteboardModule module to CustomActionsModule.

Code Block

language	js
title	custom-actions.module.ts
linenumbers	true

import {NgModule} from '@angular/core';
import {CommonModule} from '@angular/common';
import {EoFrameworkModule} from '@eo-sdk/client';
import {ActionModule} from '@eo-sdk/client';
import {BaseAction} from '@eo-sdk/client';
import {PaintActionComponent} from './paint-action/paint-action.component';
import {CanvasWhiteboardModule} from 'ng2-canvas-whiteboard';

export const entryComponents: BaseAction[] = [
  PaintActionComponent,
];

@NgModule({
  imports: [
    CommonModule,
    EoFrameworkModule,
    CanvasWhiteboardModule,
    ActionModule.forRoot(entryComponents)
  ],
  declarations: [PaintActionComponent],
  exports: [ActionModule]
})
export class CustomActionsModule {
}

Use a CLI command to generate a plug-in component with name paint inside of paint-action.
Code Block
language bash
linenumbers true
eo g action paint-action/paint

Update paint.component.ts to implement ActionComponent inteface, plus create dialog with canvas.

Code Block

language	js
title	paint.component.ts
linenumbers	true

import {Component, EventEmitter, OnInit, ViewChild} from '@angular/core';
import {CanvasWhiteboardComponent, CanvasWhiteboardOptions} from 'ng2-canvas-whiteboard';
import {ActionComponent} from '@eo-sdk/client';
import {EnaioEvent} from '@eo-sdk/core';
import {PluginsService} from '@eo-sdk/client';
import {HttpClient} from '@angular/common/http';

// temporary fix: rxjs not compatible
CanvasWhiteboardComponent.prototype['_initCanvasEventListeners'] = function () {};

@Component({
  selector: 'eo-paint',
  template: `
    <eo-dialog [title]="'Paint'"
           [visible]="true"
           [minWidth]="1000"
           [minHeight]="630"
           #dialog>
      <section>
        <div class="canvas-container" [style.minWidth.px]="700" [style.height.px]="1000">
          <canvas-whiteboard #canvasWhiteboard
                             [options]="canvasOptions"
                             [imageUrl]="imgUrl"
                             (onSave)="onCanvasSave($event)">
          </canvas-whiteboard>
        </div>
      </section>
    </eo-dialog>
  `,
  viewProviders: [CanvasWhiteboardComponent],
  styles: [`
  ::ng-deep .canvas_whiteboard_buttons,
  ::ng-deep .canvas_whiteboard_button
  { background: rgba(255,255,255,0.2); color:#000; }`
  ]
})
export class PaintComponent implements OnInit, ActionComponent {

  @ViewChild('canvasWhiteboard') canvasWhiteboard: CanvasWhiteboardComponent;

  selection: any[];
  finished: EventEmitter<any> = new EventEmitter();
  canceled: EventEmitter<any> = new EventEmitter();
  canvasOptions: CanvasWhiteboardOptions;
  imgUrl: string;
  api: any;
  static isSubAction = true;

  constructor(private pluginService: PluginsService, private http: HttpClient) {
    this.api = pluginService.getApi();
  }

  ngOnInit() {
    this.canvasOptions = {
      drawButtonEnabled: true,
      drawButtonClass: 'drawButtonClass',
      drawButtonText: 'Draw',
      clearButtonEnabled: true,
      clearButtonClass: 'clearButtonClass',
      clearButtonText: 'Clear',
      undoButtonText: 'Undo',
      undoButtonEnabled: true,
      redoButtonText: 'Redo',
      redoButtonEnabled: true,
      colorPickerEnabled: true,
      saveDataButtonEnabled: true,
      saveDataButtonText: 'Save',
      lineWidth: 4,
      scaleFactor: 1,
      shouldDownloadDrawing: false
    };
    this.imgUrl = `${this.api.config.get().serviceBase}/dms/${this.selection[0].id}/content?type=${this.selection[0].typeName}`;
  }

  onCanvasSave(e) {
    let uri = this.imgUrl.replace('content?', 'contents?');
    this.canvasWhiteboard.generateCanvasBlob((blob: any) => {
      blob.name = 'Bild';
      let files = [blob];
      this.upload(uri, files)
        .then(() => {
          return this.api.dms.getObject(this.selection[0].id, this.selection[0].typeName);
        })
        .then(dmsObject => {
          this.api.events.trigger(EnaioEvent.DMS_OBJECT_UPDATED, dmsObject);
          this.finished.emit();
        });
    }, 'image/png');
  }

  upload(uri: string, files: File[]) {
    let formData = new FormData();
    for (let file of files) {
      formData.append('files[]', file, this.api.util.encodeFileName(file.name));
    }
    return this.http.post(uri, formData).toPromise();
  }

}

Use a CLI command to generate labels/translations.

Code Block

language	bash
linenumbers	true

eo g label eo.custom.action.menu.edit.picture.label --en "Edit picture" --de "Bild bearbeiten"

Code Block

language	bash
linenumbers	true

eo g label eo.custom.action.menu.edit.picture.description --en "Edit picture of the selected object." --de "Bild des markierten Objekts bearbeiten."

...

Versions Compared

Old Version 7

New Version 8

Key

Example 1: Finalize

Description

Implementation

Example 2: Paint

Description

Image ModifiedImage Modified

Implementation