mstate-angular 0.2.1

package/src/lib/mstate-angular/mstate-angular.component.scss

@@ -0,0 +1,36 @@
+@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
+
+.mstate-angular {
+  * {
+    font-family: "Poppins", serif;
+  }
+
+  @import ".././material.scss";
+
+  .logo {
+    width: 70%;
+    margin: auto;
+    max-width: 300px;
+    margin-block: 12px;
+  }
+
+  .form-control {
+    display: block;
+    width: 100%;
+    height: calc(1.5em + 0.75rem + 2px);
+    padding: 0.375rem 0.75rem;
+    font-size: 1rem;
+    font-weight: 400;
+    line-height: 1.5;
+    color: #495057;
+    background-color: #fff;
+    background-clip: padding-box;
+    border: 1px solid #ced4da;
+    border-radius: 0.25rem;
+    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+  }
+
+  .form-group {
+    margin-bottom: 1rem;
+  }
+}

package/src/lib/mstate-angular/mstate-angular.component.spec.ts

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

package/src/lib/mstate-angular/mstate-angular.component.ts

@@ -0,0 +1,186 @@
+import {
+  Component,
+  Input,
+  OnChanges,
+  OnInit,
+  SimpleChanges,
+} from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { Theme, Variable } from '../common/enum';
+import { ActionFormComponent } from '../action-form/action-form.component';
+import { MstateAngularHelper } from '../mstate-angular.helper';
+import { MstateAngularService } from '../mstate-angular.service';
+import { catchError, finalize } from 'rxjs';
+import { EvaluatedAction } from '../interfaces/api.interface';
+import { ActionConfig } from '../interfaces/interface';
+import { ActionCardComponent } from '../components/action-card/action-card.component';
+import { LoaderComponent } from '../components/loader/loader.component';
+
+@Component({
+  selector: 'mstate-angular',
+  standalone: true,
+  imports: [
+    CommonModule,
+    ActionFormComponent,
+    ActionCardComponent,
+    LoaderComponent,
+  ],
+  providers: [MstateAngularHelper, MstateAngularService],
+  templateUrl: './mstate-angular.component.html',
+  styleUrl: './mstate-angular.component.scss',
+})
+export class MstateAngularComponent implements OnChanges, OnInit {
+  @Input({ required: true }) token: string = '';
+  @Input({ required: true }) workflow: string = '';
+  @Input() instanceID?: string;
+  /**
+   * @type {boolean}
+   * @default true
+   * @description Trigger if to start workflow.
+   */
+  @Input() start: boolean = true;
+  /**
+   * @type {'dark' | 'light' | 'system'}
+   * @default 'light'
+   * @description To change the color theme of mstate.
+   */
+  @Input() theme?: Theme;
+  /**
+   * @type {string}
+   * @description To Validate who are allowed to perform or see action.
+   */
+  @Input() who?: string;
+  /**
+   * Triggers whenever your current workflow moved to other.
+   * @param {string} newInstanceID - The new instance ID on which your current workflow moved.
+   * @returns {void}.
+   */
+  @Input() onInstanceChange?: (newInstanceID: string) => void;
+  /**
+   * Triggers when The Action execution is completed.
+   * @param {string} actionName - action name which you have executed at this moment.
+   * @returns {void}.
+   */
+  @Input() onSuccess?: (actionName: string) => void;
+  /**
+   * Triggers when Error occurs while performing any action.
+   * @param {unknown[]} errors - Error response from the api call done by Mstate.
+   * @returns {void}.
+   */
+  @Input() onError?: (errors: unknown[]) => void;
+  /**
+   * Handles your steps which contain Custom field module.
+   * @param {string} key - Which key you expect for getting the value.
+   * @returns {unknown} - whatever value you want to save in that custom field.
+   */
+  @Input() handleCustomField?: (key: string) => unknown;
+
+  //#region Variables & Events
+
+  protected isLoading = true;
+  protected triggerAgain = false;
+  protected errors: any[] = [];
+  protected errorMessages: string[] = [];
+  protected allowedActions: (EvaluatedAction | ActionConfig)[] = [];
+
+  constructor(
+    private mstateAngularHelper: MstateAngularHelper,
+    private mstateAngularService: MstateAngularService
+  ) {}
+
+  ngOnInit(): void {
+    if (this.start) this.setAllowedActions();
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (
+      this.mstateAngularHelper.detectChange(changes, [
+        Variable.START,
+        Variable.TRIGGER_AGAIN,
+      ])
+    ) {
+      if (this.start) this.setAllowedActions();
+    }
+
+    if (this.mstateAngularHelper.detectChange(changes, [Variable.ERRORS])) {
+      console.log({ mstateErrors: this.errors });
+      this.errorMessages = this.errors.filter((e) => typeof e === 'string');
+    }
+  }
+
+  //#endregion
+
+  //#region Handlers
+
+  private setAllowedActions() {
+    this.isLoading = true;
+
+    if (this.instanceID) {
+      this.mstateAngularService
+        .getCurrentActionsWithInstanceID({
+          instanceID: this.instanceID,
+          token: this.token,
+        })
+        .pipe(
+          catchError((err: any) => {
+            console.log(err);
+            throw err;
+          }),
+          finalize(() => {
+            this.isLoading = false;
+          })
+        )
+        .subscribe((data) => {
+          this.allowedActions = Object.values(data.data);
+        });
+    } else {
+      this.mstateAngularService
+        .getCurrentActionsWithoutInstanceID({
+          workflow: this.workflow,
+          token: this.token,
+        })
+        .pipe(
+          catchError((err: any) => {
+            console.log(err);
+            throw err;
+          }),
+          finalize(() => {
+            this.isLoading = false;
+          })
+        )
+        .subscribe((data) => {
+          this.allowedActions = Object.values(data.data);
+        });
+    }
+  }
+
+  handleExecuteAction(value: any, errors?: string[]) {
+    if (errors?.length) {
+      this.errors = errors;
+      value.instanceID = errors[0]
+        ?.split("instanceID='")
+        ?.pop()
+        ?.replace("'", '');
+    } else {
+      this.allowedActions = value.actions;
+    }
+
+    if (
+      value?.instanceID &&
+      value?.instanceID !== this.instanceID &&
+      !errors?.length
+    ) {
+      this.instanceID = value?.instanceID;
+
+      if (this.onInstanceChange) {
+        this.onInstanceChange(value?.instanceID);
+      }
+    }
+  }
+
+  handleError(config: ActionConfig) {
+    this.allowedActions = [config];
+  }
+
+  //#endregion
+}

package/src/lib/mstate-angular.helper.ts

@@ -0,0 +1,35 @@
+import { Injectable, SimpleChanges } from '@angular/core';
+import { Step, UserInput } from './interfaces/interface';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class MstateAngularHelper {
+  detectChange(change: SimpleChanges, keys: string[]) {
+    for (const key of keys) {
+      if (change[key] && change[key].currentValue !== change[key].previousValue)
+        return true;
+    }
+
+    return false;
+  }
+
+  formatString(str: string = '') {
+    return str.toUpperCase().replace(/_/gi, ' ');
+  }
+
+  getObjectValue<T>(obj: any, target: string) {
+    const keys = target ? target.split('.') : [];
+
+    let cur: any = obj;
+    for (const key of keys) {
+      cur = cur?.[key];
+    }
+
+    return cur as T | undefined;
+  }
+
+  checkIsStep(step: Step | UserInput): step is Step {
+    return (step as Step)?.config !== undefined;
+  }
+}

package/src/lib/mstate-angular.module.ts

@@ -0,0 +1,9 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MstateAngularComponent } from './mstate-angular/mstate-angular.component';
+
+@NgModule({
+  imports: [CommonModule, MstateAngularComponent], // Import other necessary modules like CommonModule
+  exports: [MstateAngularComponent], // Export the pipe so it can be used externally
+})
+export class MstateAngularModule {}

package/src/lib/mstate-angular.service.ts

@@ -0,0 +1,77 @@
+import { HttpClient, HttpHeaders } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { MSTATE_URL, TOKEN_KEY } from './common/constant';
+import { Route } from './common/enum';
+
+import {
+  GetCurrentActionsWithInstanceIDRequest,
+  GetCurrentActionsWithoutInstanceIDRequest,
+  GetCurrentActionsWithoutInstanceIDResponse,
+  MstateResponse,
+  PostExecuteActionRequest,
+  PostExecuteActionResponse,
+} from './interfaces/api.interface';
+import axios, { AxiosRequestConfig } from 'axios';
+import { ListMapper } from './interfaces/interface';
+import { MstateAngularHelper } from './mstate-angular.helper';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class MstateAngularService {
+  private getHeaders(token: string) {
+    return new HttpHeaders({
+      'Content-Type': 'application/json',
+      [TOKEN_KEY]: token,
+    });
+  }
+
+  constructor(
+    private http: HttpClient,
+    private mstateHelper: MstateAngularHelper
+  ) {}
+
+  executeAction<T>(payload: PostExecuteActionRequest<T>) {
+    return this.http.post<MstateResponse<PostExecuteActionResponse>>(
+      `${MSTATE_URL}/${Route.EXECUTE_ACTION}`,
+      {
+        instanceID: payload.instanceID ?? '',
+        name: payload.workflow,
+        action: payload.action,
+      },
+      { headers: this.getHeaders(payload.token) }
+    );
+  }
+
+  getCurrentActionsWithInstanceID(
+    payload: GetCurrentActionsWithInstanceIDRequest
+  ) {
+    return this.http.get<
+      MstateResponse<GetCurrentActionsWithoutInstanceIDResponse>
+    >(
+      `${MSTATE_URL}/${Route.GET_CURRENT_ACTIONS_WITH_INSTANCE}/${payload.instanceID}`,
+      {
+        headers: this.getHeaders(payload.token),
+      }
+    );
+  }
+
+  getCurrentActionsWithoutInstanceID(
+    payload: GetCurrentActionsWithoutInstanceIDRequest
+  ) {
+    return this.http.get<
+      MstateResponse<GetCurrentActionsWithoutInstanceIDResponse>
+    >(
+      `${MSTATE_URL}/${Route.GET_CURRENT_ACTIONS_WITHOUT_INSTANCE}?name=${payload.workflow}`,
+      {
+        headers: this.getHeaders(payload.token),
+      }
+    );
+  }
+
+  async handleDropdownAPI(request: AxiosRequestConfig, target: string) {
+    const { data } = await axios(request);
+
+    return this.mstateHelper.getObjectValue<any>(data, target) ?? [];
+  }
+}

package/src/public-api.ts

@@ -0,0 +1,6 @@
+/*
+ * Public API Surface of mstate-angular
+ */
+
+export * from './lib/mstate-angular/mstate-angular.component';
+export * from './lib/mstate-angular.module';

package/tsconfig.lib.json

@@ -0,0 +1,14 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/lib",
+    "declaration": true,
+    "declarationMap": true,
+    "inlineSources": true,
+    "types": []
+  },
+  "exclude": [
+    "**/*.spec.ts"
+  ]
+}

package/tsconfig.lib.prod.json

@@ -0,0 +1,10 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "./tsconfig.lib.json",
+  "compilerOptions": {
+    "declarationMap": false
+  },
+  "angularCompilerOptions": {
+    "compilationMode": "partial"
+  }
+}

package/tsconfig.spec.json

@@ -0,0 +1,14 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/spec",
+    "types": [
+      "jasmine"
+    ]
+  },
+  "include": [
+    "**/*.spec.ts",
+    "**/*.d.ts"
+  ]
+}