@libriciel/ls-workflow v1.0.1

Documentation - "ls-workflow-lib"

Components

WorkflowEditor

html

<ls-workflow-editor
      [(workflow)]="workflow"
      [options]="options"
      [selectedStepEvent]="selectedStepEvent"
      [stepToColorClassFunction]="stepToColorClassFunction"
      [stepToValidationModeIconFunction]="stepToValidationModeIconFunction"
      [stepToActionIconClassFunction]="stepToActionIconClassFunction"
      [stepToTooltipFunction]="stepToTooltipFunction"
      (selectedStepEventChange)="manageSteps($event)">
</ls-workflow-editor>

<form *ngIf="selectedStepEvent">
    "your form"
</form>

typescript

    stepToColorClassFunction(step: WorkflowStep): WorkflowStepColor {
        switch (step.type) {
            // A simple type to color switch/case mapping
        }
    }

    stepToActionIconClassFunction(step: WorkflowStep): string {
        switch (step.type) {
            // A simple type to icon class (ex: "fa ls-icon-signature-externe")
        }
    }

    stepToValidationModeIconFunction(step: WorkflowStep): string {
        switch (step.type) {
            // A simple type to validation mode icon
        }
    }

    stepToTooltipFunction(step: WorkflowStep): string {
        switch (step.type) {
            // your mapping
        }
    }

    manageSteps(event: WorkflowStepEvent | null) {
        // Here, you can instanciate your form  based on the event type :
        // EDITION / CREATION
    }

WorkflowInstanceViewer

Models

WorkflowDefinition

class WorkflowDefinition {
  id?: string;
  key?: string
  name?: string;
  steps: WorkflowStep[] = [];
}

WorkflowStep

class WorkflowStep {
  id?: string;
  name?: string;
  type?: any;
  state?: WorkflowStepState;
  date?: string;
  validationMode?: string;
  validators: WorkflowActor[] = [];
  notifiedValidators: WorkflowActor [] = []
  validationMetadata: WorkflowMetadata[] = [];
  rejectionMetadata: WorkflowMetadata[] = [];
}

WorkflowStepEvent

class WorkflowStepEvent {
  action!: StepEventAction;
  index!: number;
  step?: WorkflowStep;
}

enum StepEventAction {
  CREATION = 'CREATION',
  EDITION = 'EDITION'
}

WorkflowStepState

enum WorkflowStepState {
  PENDING = 'pending',
  CURRENT = 'current',
  VALIDATED = 'approve',
  SKIPPED = 'skipped',
  REJECTED = 'rejected'
}

WorkflowStepColor

enum WorkflowStepColor {
  GREEN = 'green',
  BLUE = 'blue',
  ORANGE = 'orange',
  RED = 'red',
  LIGHT_BLUE = 'light-blue',
  WHITE = 'white'
}

WorkflowActor

class WorkflowActor {
  id?: number | string;
  lastname?: string;
  firstname?: string;
  name?: string;
}

WorkflowMetadata

class WorkflowMetadata {
  id?: string;
  key?: string;
  name?: string;
}

WorkflowEditorOptions

class WorkflowEditorOptions {
  workflow: WorkflowOptions = new WorkflowOptions();
  classes: ClassesOptions = new ClassesOptions();
  messages: MessagesOptions = new MessagesOptions();
}

class WorkflowOptions {
  hideStart: boolean = false;
  hideEnd: boolean = false;
  lockFirstStep: boolean = false;
  lockLastStep: boolean = false;
  useValidatorName: boolean = true;
  editable: boolean = true;
}

class ClassesOptions {
  addStepIcon: string = 'fa fa-plus-circle';
  startIcon: string = 'fa fa-flag';
  endIcon: string = 'fa fa-flag-checkered';
  editorIdentifier: string = 'ls-workflow-editor-default-layout';
}

class MessagesOptions {
  addStepButtonTitle: string = 'Ajouter une étape';
  validatorListTitle: PluralizedString = {singular: 'Bureau', plural: 'Bureaux'};
  notifiedValidatorListTitle: string = 'Bureaux notifiés';
  validationMetadataListTitle: string = 'Métadonnées obligatoires';
  rejectionMetadataListTitle: string = 'Métadonnées de rejet obligatoires';
}

class PluralizedString {
  singular!: string;
  plural!: string;
}