mstate-angular 0.2.1

package/README.md

@@ -0,0 +1,24 @@
+# MstateAngular
+
+This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 17.3.0.
+
+## Code scaffolding
+
+Run `ng generate component component-name --project mstate-angular` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project mstate-angular`.
+> Note: Don't forget to add `--project mstate-angular` or else it will be added to the default project in your `angular.json` file. 
+
+## Build
+
+Run `ng build mstate-angular` to build the project. The build artifacts will be stored in the `dist/` directory.
+
+## Publishing
+
+After building your library with `ng build mstate-angular`, go to the dist folder `cd dist/mstate-angular` and run `npm publish`.
+
+## Running unit tests
+
+Run `ng test mstate-angular` to execute the unit tests via [Karma](https://karma-runner.github.io).
+
+## Further help
+
+To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.

package/ng-package.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/mstate-angular",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  }
+}

package/package.json

@@ -0,0 +1,14 @@
+{
+  "name": "mstate-angular",
+  "version": "0.2.1",
+  "peerDependencies": {
+    "@angular/common": "^17.3.0",
+    "@angular/core": "^17.3.0",
+    "@ng-select/ng-select": "^14.1.0",
+    "axios": "^1.7.9"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "sideEffects": false
+}

package/src/lib/action-form/action-form.component.html

@@ -0,0 +1,13 @@
+<div>
+  <h4>{{ config.meta?.title ?? config.name }}</h4>
+
+  <form #userForm="ngForm">
+    @for (step of config.steps; track $index) {
+      <mobi-office-input-selector [step]="step" [mstateModel]="mstateModel" />
+    }
+  </form>
+
+  <mobi-office-button (click)="handleExecuteAction()"
+    >Submit</mobi-office-button
+  >
+</div>

package/src/lib/action-form/action-form.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ActionFormComponent } from './action-form.component';
+
+describe('ActionFormComponent', () => {
+  let component: ActionFormComponent;
+  let fixture: ComponentFixture<ActionFormComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ActionFormComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(ActionFormComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/action-form/action-form.component.ts

@@ -0,0 +1,124 @@
+import {
+  Component,
+  Input,
+  OnChanges,
+  OnInit,
+  SimpleChanges,
+} from '@angular/core';
+import { MstateAngularService } from '../mstate-angular.service';
+import { catchError, finalize } from 'rxjs';
+import { ActionConfig, UserInput } from '../interfaces/interface';
+import { EvaluatedAction } from '../interfaces/api.interface';
+import { ActionType, ManualStepModule } from '../common/enum';
+import { InputSelectorComponent } from '../input-selector/input-selector.component';
+import { ButtonComponent } from '../components/button/button.component';
+import { FormsModule } from '@angular/forms';
+import { MstateAngularHelper } from '../mstate-angular.helper';
+
+@Component({
+  selector: 'lib-action-form',
+  standalone: true,
+  imports: [FormsModule, InputSelectorComponent, ButtonComponent],
+  providers: [MstateAngularService, MstateAngularHelper],
+  templateUrl: './action-form.component.html',
+  styleUrl: './action-form.component.scss',
+})
+export class ActionFormComponent implements OnInit, OnChanges {
+  @Input({ required: true }) token: string = '';
+  @Input({ required: true }) workflow: string = '';
+  @Input({ required: true }) config: ActionConfig | EvaluatedAction = {
+    name: '',
+    type: ActionType.MANUAL,
+    steps: [],
+  };
+  @Input({ required: true }) onExecuteAction: (
+    response: any,
+    errors?: string[]
+  ) => void = () => {};
+  @Input() updateCustomFieldValue?: (key: string) => unknown;
+
+  @Input() instanceID?: string;
+  @Input() onSuccess?: (actionName: string) => void;
+
+  //#region Custom Declaration
+  protected isLoading = true;
+  protected mstateModel: any = {};
+
+  constructor(
+    private mstateAngularService: MstateAngularService,
+    private mstateAngularHelper: MstateAngularHelper
+  ) {}
+
+  ngOnInit(): void {
+    if (Boolean(this.config?.steps?.length) === false) {
+      this.handleExecuteAction();
+      return;
+    }
+
+    this.handleStepConfigFilter();
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    console.log({ changes });
+    if (this.mstateAngularHelper.detectChange(changes, ['mstateModel'])) {
+    }
+  }
+
+  //#region handlers
+
+  protected handleExecuteAction() {
+    this.isLoading = true;
+    console.log(this.mstateModel);
+    // this.mstateAngularService
+    //   .executeAction({
+    //     action: {
+    //       name: this.config.name,
+    //       payload: this.mstateModel,
+    //     },
+    //     token: this.token,
+    //     workflow: this.workflow,
+    //   })
+    //   .pipe(
+    //     catchError(e => {
+    //       throw e;
+    //     }),
+    //     finalize(() => {
+    //       this.isLoading = false;
+    //     })
+    //   )
+    //   .subscribe(data => {
+    //     this.onExecuteAction(data.data);
+    //   });
+  }
+
+  private handleStepConfigFilter = () => {
+    const keyForAPISet = new Set();
+
+    this.config.steps = this.config?.steps?.filter(stepConfig => {
+      const step = stepConfig as UserInput;
+
+      switch (step?.module) {
+        case ManualStepModule.CUSTOM_FIELD: {
+          if (this.updateCustomFieldValue) {
+            this.mstateModel[step?.context?.as] = this.updateCustomFieldValue(
+              step?.context?.key
+            );
+          }
+          return true;
+        }
+
+        case ManualStepModule.CONTEXT_FIELD:
+          this.mstateModel[step?.context?.as] = step?.context?.value;
+          return true;
+
+        default: {
+          const isDuplicate = keyForAPISet.has(step?.field?.keyForAPI);
+          keyForAPISet.add(step?.field?.keyForAPI);
+          return isDuplicate === false;
+        }
+      }
+    }) as UserInput[];
+  };
+
+  //#endregion
+}

package/src/lib/common/constant.ts

@@ -0,0 +1,4 @@
+// export const MSTATE_URL = 'https://dev.mstate.mobioffice.io/api';
+// export const MSTATE_URL = 'http://localhost:3000/api';
+export const MSTATE_URL = 'https://api.mstate.mobioffice.io/api';
+export const TOKEN_KEY = 'secret-key';

package/src/lib/common/enum.ts

@@ -0,0 +1,46 @@
+export enum Route {
+  EXECUTE_ACTION = 'workflow/v2/execute',
+  GET_WORKFLOW_CONFIG = 'workflow/config',
+  GET_CURRENT_ACTIONS_WITHOUT_INSTANCE = 'workflow/v2/actions',
+  GET_CURRENT_ACTIONS_WITH_INSTANCE = 'workflow/actions',
+}
+
+export enum FieldType {
+  DATE_PICKER = 'datePicker',
+  TIME_PICKER = 'timePicker',
+  INPUT_FIELD = 'inputField',
+  TEXT_AREA = 'textArea',
+  CHECKBOX = 'checkBox',
+  RADIO_LIST = 'radioList',
+  DROP_DOWN = 'dropDown',
+  SUMMARY = 'summary',
+  CONTEXT_FIELD = 'CONTEXT_FIELD',
+  CUSTOM_FIELD = 'CUSTOM_FIELD',
+}
+
+export enum ManualStepModule {
+  CONTEXT_FIELD = 'CONTEXT_FIELD',
+  CUSTOM_FIELD = 'CUSTOM_FIELD',
+  USER_INPUT = 'USER_INPUT',
+}
+
+export enum Theme {
+  DARK = 'dark',
+  LIGHT = 'light',
+  SYSTEM = 'system',
+}
+
+export enum Variable {
+  WORKFLOW = 'workflow',
+  TOKEN = 'token',
+  INSTANCE_ID = 'instanceID',
+  START = 'start',
+  TRIGGER_AGAIN = 'triggerAgain',
+  ERRORS = 'errors',
+}
+
+export enum ActionType {
+  MANUAL = 'MANUAL',
+  AUTO = 'AUTO',
+  CHAINED = 'CHAINED',
+}

package/src/lib/components/action-card/action-card.component.html

@@ -0,0 +1 @@
+<p>action-card works!</p>

package/src/lib/components/action-card/action-card.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ActionCardComponent } from './action-card.component';
+
+describe('ActionCardComponent', () => {
+  let component: ActionCardComponent;
+  let fixture: ComponentFixture<ActionCardComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ActionCardComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(ActionCardComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/components/action-card/action-card.component.ts

@@ -0,0 +1,21 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { EvaluatedAction } from '../../interfaces/api.interface';
+import { ActionConfig } from '../../interfaces/interface';
+
+@Component({
+  selector: 'mobi-office-action-card',
+  standalone: true,
+  imports: [CommonModule],
+  templateUrl: './action-card.component.html',
+  styleUrl: './action-card.component.scss',
+})
+export class ActionCardComponent {
+  @Input({ required: true }) error?: EvaluatedAction | ActionConfig;
+
+  @Output() retryEmitter = new EventEmitter<EvaluatedAction | ActionConfig>();
+
+  handleRetry() {
+    this.retryEmitter.emit(this.error);
+  }
+}

package/src/lib/components/button/button.component.html

@@ -0,0 +1,3 @@
+<button>
+  <ng-content></ng-content>
+</button>

package/src/lib/components/button/button.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ButtonComponent } from './button.component';
+
+describe('ButtonComponent', () => {
+  let component: ButtonComponent;
+  let fixture: ComponentFixture<ButtonComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ButtonComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(ButtonComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/components/button/button.component.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'mobi-office-button',
+  standalone: true,
+  imports: [CommonModule],
+  templateUrl: './button.component.html',
+  styleUrl: './button.component.scss',
+})
+export class ButtonComponent {}

package/src/lib/components/dropdown/dropdown.component.html

@@ -0,0 +1,10 @@
+<div class="form-group">
+  <ng-select
+    [items]="list"
+    [multiple]="config.field.placeholder"
+    [bindLabel]="this.config.field.mapper?.label ?? 'label'"
+    [placeholder]="config.field.placeholder"
+    [(ngModel)]="mstateModel[config.field.keyForAPI]"
+  >
+  </ng-select>
+</div>

package/src/lib/components/dropdown/dropdown.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { DropdownComponent } from './dropdown.component';
+
+describe('DropdownComponent', () => {
+  let component: DropdownComponent;
+  let fixture: ComponentFixture<DropdownComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [DropdownComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(DropdownComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/components/dropdown/dropdown.component.ts

@@ -0,0 +1,46 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { UserInput } from '../../interfaces/interface';
+import { FormsModule } from '@angular/forms';
+import { MstateAngularService } from '../../mstate-angular.service';
+import { MstateAngularHelper } from '../../mstate-angular.helper';
+import { NgSelectModule } from '@ng-select/ng-select';
+
+@Component({
+  selector: 'mobi-office-dropdown',
+  standalone: true,
+  imports: [FormsModule, NgSelectModule, CommonModule],
+  providers: [MstateAngularService],
+  templateUrl: './dropdown.component.html',
+  styleUrl: './dropdown.component.scss',
+})
+export class DropdownComponent implements OnInit {
+  @Input({ required: true }) config!: UserInput;
+  @Input({ required: true }) mstateModel!: any;
+
+  constructor(
+    private mstateService: MstateAngularService,
+    private mstateHelper: MstateAngularHelper
+  ) {}
+
+  protected list: any[] = [];
+
+  ngOnInit(): void {
+    const field = this.config.field ?? {};
+
+    if (field.request) {
+      this.mstateService
+        .handleDropdownAPI(field.request, field?.mapper?.target ?? '')
+        .then((data) => {
+          this.list = data;
+        })
+        .catch((e) => console.log(e));
+    } else {
+      this.list = field.itemList ?? [];
+    }
+  }
+
+  getObjectValue(obj: any, target: string) {
+    return this.mstateHelper.getObjectValue(obj, target);
+  }
+}

package/src/lib/components/input-field/input-field.component.html

@@ -0,0 +1,9 @@
+<div class="form-group">
+  <label>{{ config.label }}</label>
+  <input
+    [type]="config.inputType"
+    [name]="config.field.keyForAPI"
+    [placeholder]="config.field.placeholder"
+    [(ngModel)]="mstateModel[config.field.keyForAPI]"
+    class="form-control" />
+</div>

package/src/lib/components/input-field/input-field.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { InputFieldComponent } from './input-field.component';
+
+describe('InputFieldComponent', () => {
+  let component: InputFieldComponent;
+  let fixture: ComponentFixture<InputFieldComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [InputFieldComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(InputFieldComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/components/input-field/input-field.component.ts

@@ -0,0 +1,16 @@
+import { Component, Input } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { UserInput } from '../../interfaces/interface';
+import { FormsModule } from '@angular/forms';
+
+@Component({
+  selector: 'mobi-office-input-field',
+  standalone: true,
+  imports: [CommonModule, FormsModule],
+  templateUrl: './input-field.component.html',
+  styleUrl: './input-field.component.scss',
+})
+export class InputFieldComponent {
+  @Input({ required: true }) config!: UserInput;
+  @Input({ required: true }) mstateModel!: any;
+}

package/src/lib/components/loader/loader.component.html

@@ -0,0 +1 @@
+<p>Loading...</p>

package/src/lib/components/loader/loader.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { LoaderComponent } from './loader.component';
+
+describe('LoaderComponent', () => {
+  let component: LoaderComponent;
+  let fixture: ComponentFixture<LoaderComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [LoaderComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(LoaderComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/components/loader/loader.component.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'mobi-office-loader',
+  standalone: true,
+  imports: [CommonModule],
+  templateUrl: './loader.component.html',
+  styleUrl: './loader.component.scss',
+})
+export class LoaderComponent {}

package/src/lib/components/select/select.component.html

@@ -0,0 +1,10 @@
+<div class="form-group">
+  <ng-select
+    [items]="list"
+    [multiple]="config.field.placeholder"
+    [bindLabel]="this.config.field.mapper?.label ?? 'label'"
+    [placeholder]="config.field.placeholder"
+    [(ngModel)]="mstateModel[config.field.keyForAPI]"
+  >
+  </ng-select>
+</div>

package/src/lib/components/select/select.component.scss

@@ -0,0 +1,43 @@
+.dropdown {
+  position: relative;
+  width: 300px;
+}
+
+.search-input {
+  width: 100%;
+  padding: 8px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+}
+
+.dropdown-menu {
+  position: absolute;
+  width: 100%;
+  max-height: 150px;
+  overflow-y: auto;
+  background: white;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  margin-top: 5px;
+  z-index: 10;
+}
+
+.dropdown-item {
+  padding: 8px;
+  cursor: pointer;
+}
+
+.dropdown-item:hover {
+  background-color: #f0f0f0;
+}
+
+.no-results {
+  padding: 8px;
+  color: #888;
+  text-align: center;
+}
+
+.selected-option {
+  margin-top: 10px;
+  font-weight: bold;
+}

package/src/lib/components/select/select.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { SelectComponent } from './select.component';
+
+describe('SelectComponent', () => {
+  let component: SelectComponent;
+  let fixture: ComponentFixture<SelectComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [SelectComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(SelectComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/components/select/select.component.ts

@@ -0,0 +1,46 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { UserInput } from '../../interfaces/interface';
+import { FormsModule } from '@angular/forms';
+import { MstateAngularService } from '../../mstate-angular.service';
+import { MstateAngularHelper } from '../../mstate-angular.helper';
+import { NgSelectModule } from '@ng-select/ng-select';
+
+@Component({
+  selector: 'mobi-office-select',
+  standalone: true,
+  imports: [FormsModule, NgSelectModule, CommonModule],
+  providers: [MstateAngularService],
+  templateUrl: './select.component.html',
+  styleUrl: './select.component.scss',
+})
+export class SelectComponent implements OnInit {
+  @Input({ required: true }) config!: UserInput;
+  @Input({ required: true }) mstateModel!: any;
+
+  constructor(
+    private mstateService: MstateAngularService,
+    private mstateHelper: MstateAngularHelper
+  ) {}
+
+  protected list: any[] = [];
+
+  ngOnInit(): void {
+    const field = this.config.field ?? {};
+
+    if (field.request) {
+      this.mstateService
+        .handleDropdownAPI(field.request, field?.mapper?.target ?? '')
+        .then((data) => {
+          this.list = data;
+        })
+        .catch((e) => console.log(e));
+    } else {
+      this.list = field.itemList ?? [];
+    }
+  }
+
+  getObjectValue(obj: any, target: string) {
+    return this.mstateHelper.getObjectValue(obj, target);
+  }
+}