Page History

...

1. Install angular-cli
   

   1. Code Block
      language text theme FadeToGrey
      npm i -g @angular/cli

2. Cd to saga-server/src/main/resources/webapp/projects/saga-plugin/src/lib
   1. Cd to either the processors or the recognizers folder, denpending of the type of component you want to build
      1. Recognizers for tags
      2. Processors for pipelines
3. Create a component

   1. Code Block
      language text theme FadeToGrey
      ng generate component --style=scss --skipTests=true --skipImport=true

4. Cd to <component-name> folder
5. Create a component
   1. The name must contain config-dialog at the end of the name

   2. Code Block
      language text theme FadeToGrey
      ng generate component --style=scss --skipTests=true --skipImport=true

   3. Info
      For implementation of the config dialog check out this page

6. Next open the file <component-name>-config-dialog.component.ts  
7. Extend the component with ConfigDialogBase (the implementation is explain further in further explained in the document)

   1. Code Block
      language text theme FadeToGrey
      export class ComponentNameConfigDialogComponent extends ConfigDialogBase implements OnInit {

8. Next go up one level and open the file <component-name>.component.ts  
9. Extend the component with the right abstract class (each type implementation is specified further in the document)
   
   1. PluginComponent
   2. PatternComponent
10. Open to projects/saga-plugin/src/lib/plugin.module.ts
    1. Import the components

    2. Code Block
       language js theme Eclipse
       import {<component-name>Component} from './<processors or recognizers>/<component-name>/<component-name>.component'; import {<component-name>ConfigDialogComponent} from './<processors or recognizers>/<component-name>/<component-name>-config-dialog/<component-name>-config-dialog.component';

    3. Add the main component into the array called components 

    4. Code Block
       language js theme Eclipse
       const components = [ RegexComponent, . . . <component-name>Component ];

    5. Add the config dialog component into the array called entryComponents 

    6. Code Block
       language js theme Eclipse
       const entryComponents = [ PatternActionsDialogComponent, EntityActionsDialogComponent, . . . <component-name>ConfigDialogComponent ];

...