mstate-angular 0.2.1

package/src/lib/input-selector/input-selector.component.html

@@ -0,0 +1,23 @@
+@switch (config.fieldType) {
+  @case (FieldType.INPUT_FIELD) {
+    <mobi-office-input-field [config]="config" [mstateModel]="mstateModel" />
+  }
+  @case (FieldType.TEXT_AREA) {
+    <mobi-office-input-field [config]="config" [mstateModel]="mstateModel" />
+  }
+
+  @case (FieldType.DROP_DOWN) {
+    <mobi-office-dropdown [config]="config" [mstateModel]="mstateModel" />
+  }
+  @case (FieldType.RADIO_LIST) {
+    <mobi-office-dropdown [config]="config" [mstateModel]="mstateModel" />
+  }
+
+  @case (FieldType.CHECKBOX) {
+    <mobi-office-select [config]="config" [mstateModel]="mstateModel" />
+  }
+
+  @default {
+    <p>Step Left to handle</p>
+  }
+}

package/src/lib/input-selector/input-selector.component.spec.ts

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

package/src/lib/input-selector/input-selector.component.ts

@@ -0,0 +1,38 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { Step, UserInput } from '../interfaces/interface';
+import { MstateAngularHelper } from '../mstate-angular.helper';
+import { MstateAngularService } from '../mstate-angular.service';
+import { FieldType } from '../common/enum';
+import { InputFieldComponent } from '../components/input-field/input-field.component';
+import { SelectComponent } from '../components/select/select.component';
+import { DropdownComponent } from '../components/dropdown/dropdown.component';
+
+@Component({
+  selector: 'mobi-office-input-selector',
+  standalone: true,
+  imports: [
+    CommonModule,
+    InputFieldComponent,
+    SelectComponent,
+    DropdownComponent,
+  ],
+  providers: [MstateAngularHelper, MstateAngularService],
+  templateUrl: './input-selector.component.html',
+  styleUrl: './input-selector.component.scss',
+})
+export class InputSelectorComponent implements OnInit {
+  @Input({ required: true }) step!: UserInput | Step;
+  @Input({ required: true }) mstateModel!: any;
+
+  constructor(private mstateHelper: MstateAngularHelper) {}
+
+  protected config!: UserInput;
+  protected FieldType = FieldType;
+
+  ngOnInit(): void {
+    this.config = this.mstateHelper.checkIsStep(this.step)
+      ? this.step?.config?.data
+      : this.step;
+  }
+}

package/src/lib/interfaces/api.interface.ts

@@ -0,0 +1,51 @@
+import { ActionConfig, UserInput, Workflow } from './interface';
+
+export interface GetWorkflowRequest {
+  workflow: string;
+  token: string;
+}
+
+export interface GetCurrentActionsWithoutInstanceIDRequest {
+  workflow: string;
+  token: string;
+}
+
+export interface GetCurrentActionsWithInstanceIDRequest {
+  instanceID: string;
+  token: string;
+}
+
+export interface PostExecuteActionRequest<T> {
+  instanceID?: string;
+  token: string;
+  workflow: string;
+  action: {
+    name: string;
+    payload: T;
+  };
+}
+
+export interface GetWorkflowResponse {
+  data: Workflow;
+}
+
+export interface GetCurrentActionsWithoutInstanceIDResponse {
+  [actionName: string]: ActionConfig;
+}
+
+export interface EvaluatedAction extends ActionConfig {
+  steps: UserInput[];
+}
+
+export interface GetCurrentActionsWithInstanceIDResponse {
+  [actionName: string]: EvaluatedAction;
+}
+
+export interface PostExecuteActionResponse {}
+
+export interface MstateResponse<T = any> {
+  data: T;
+  path: string;
+  statusCode: number;
+  timestamp: Date;
+}

package/src/lib/interfaces/interface.ts

@@ -0,0 +1,81 @@
+import { AxiosRequestConfig } from 'axios';
+import { ActionType, FieldType, ManualStepModule } from '../common/enum';
+
+export interface Workflow {
+  name: string;
+  version: string;
+  meta?: unknown;
+  maxChainCount: number;
+  states: State[];
+}
+
+export interface State {
+  name: string;
+  actions: Action[];
+}
+
+export interface Action {
+  name: string;
+  on: {
+    [key: string]: {
+      name: string;
+      type: 'ACTION' | 'STATE';
+    };
+  };
+}
+
+export interface ActionConfig {
+  name: string;
+  as?: string;
+  who?: string[];
+  type: ActionType;
+  meta?: any;
+  steps: Step[] | UserInput[];
+}
+
+export interface Step {
+  id: string;
+  module: string;
+  config: {
+    data: UserInput;
+  };
+}
+
+export interface SelectOptions {
+  id: string | number;
+  label: string;
+}
+
+export interface ListMapper {
+  id: string;
+  label: string;
+  target: string;
+  page?: number;
+  limit?: number;
+}
+
+export interface UserInput {
+  id: string;
+  module: ManualStepModule;
+  buttonActionText: string;
+  fieldType: FieldType;
+  field: {
+    keyForAPI: string;
+    isRequired: boolean;
+    label: string;
+    value: string;
+    placeholder: string;
+    multiple?: boolean;
+    request?: AxiosRequestConfig;
+    mapper?: ListMapper;
+    itemList?: (SelectOptions | any)[];
+  };
+  label: string;
+  context: any;
+  inputType?: 'text' | 'number' | 'date' | 'time' | 'password';
+  order: number;
+  minLength?: number;
+  maxLength?: number;
+  export?: (value: any) => any;
+  customValidation?: (value: any) => boolean;
+}

package/src/lib/material.scss

@@ -0,0 +1,439 @@
+::ng-deep .ng-select {
+  padding-bottom: 1.25em;
+}
+::ng-deep .ng-select.ng-select-disabled .ng-select-container:after {
+  border-bottom-color: rgba(0, 0, 0, 0);
+  background-image: linear-gradient(
+    to right,
+    rgba(0, 0, 0, 0.42) 0%,
+    rgba(0, 0, 0, 0.42) 33%,
+    transparent 0%
+  );
+  background-size: 4px 1px;
+  background-repeat: repeat-x;
+}
+::ng-deep
+  .ng-select.ng-select-disabled
+  .ng-select-container
+  .ng-value-container
+  .ng-value {
+  color: rgba(0, 0, 0, 0.38);
+}
+::ng-deep
+  .ng-select.ng-select-disabled
+  .ng-select-container
+  .ng-value-container
+  .ng-placeholder {
+  color: rgba(0, 0, 0, 0.38);
+}
+::ng-deep .ng-select.ng-select-disabled .ng-arrow-wrapper .ng-arrow,
+.ng-select.ng-select-disabled .ng-clear-wrapper {
+  color: rgba(0, 0, 0, 0.38);
+}
+::ng-deep .ng-select.ng-select-focused .ng-select-container:after {
+  border-color: #3f51b5;
+  border-width: 2px;
+}
+::ng-deep
+  .ng-select.ng-select-focused
+  .ng-select-container.ng-appearance-outline:after,
+.ng-select.ng-select-focused
+  .ng-select-container.ng-appearance-outline:hover:after {
+  border-color: #3f51b5;
+  border-width: 2px;
+}
+::ng-deep
+  .ng-select.ng-select-focused
+  .ng-select-container
+  .ng-value-container
+  .ng-placeholder {
+  transform: translateY(-1.28125em) scale(0.75) perspective(100px)
+    translateZ(0.001px);
+  color: #3f51b5;
+}
+::ng-deep
+  .ng-select.ng-select-focused
+  .ng-select-container
+  .ng-arrow-wrapper
+  .ng-arrow {
+  color: #3f51b5;
+}
+::ng-deep .ng-select .ng-has-value .ng-placeholder,
+.ng-select.ng-select-filtered .ng-select-container .ng-placeholder {
+  display: initial;
+}
+::ng-deep .ng-select .ng-has-value .ng-placeholder,
+.ng-select.ng-select-opened .ng-placeholder {
+  transform: translateY(-1.28125em) scale(0.75) perspective(100px)
+    translateZ(0.001px);
+}
+::ng-deep .ng-select .ng-select-container {
+  color: rgba(0, 0, 0, 0.87);
+  align-items: baseline;
+  min-height: 51.5px;
+}
+::ng-deep .ng-select .ng-select-container:after {
+  border-bottom: thin solid rgba(0, 0, 0, 0.42);
+  content: "";
+  bottom: 0;
+  left: 0;
+  right: 0;
+  position: absolute;
+  transition: border-color 0.3s cubic-bezier(0.55, 0, 0.55, 0.2);
+}
+::ng-deep .ng-select .ng-select-container.ng-appearance-outline {
+  padding: 0 0.5em;
+  min-height: 60px;
+}
+::ng-deep .ng-select .ng-select-container.ng-appearance-outline:after {
+  border: solid 1px rgba(0, 0, 0, 0.12);
+  border-radius: 5px;
+  height: calc(100% - 0.5em);
+  pointer-events: none;
+  transition: border-color 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
+}
+::ng-deep .ng-select .ng-select-container.ng-appearance-outline:hover:after {
+  border-color: rgba(0, 0, 0, 0.87);
+  border-width: 2px;
+}
+::ng-deep
+  .ng-select
+  .ng-select-container.ng-appearance-outline
+  .ng-placeholder {
+  padding: 0 0.25em;
+  background-color: #fff;
+  z-index: 1;
+}
+::ng-deep .ng-select .ng-select-container.ng-appearance-outline .ng-value {
+  padding-left: 0.25em;
+}
+::ng-deep .ng-select .ng-select-container .ng-value-container {
+  align-items: stretch;
+  padding: 0.4375em 0;
+  border-top: 0.84375em solid rgba(0, 0, 0, 0);
+}
+::ng-deep .ng-select .ng-select-container .ng-value-container .ng-placeholder {
+  position: absolute;
+  color: rgba(0, 0, 0, 0.54);
+  transform-origin: left 0;
+  transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1),
+    color 0.4s cubic-bezier(0.25, 0.8, 0.25, 1),
+    width 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
+}
+::ng-deep
+  [dir="rtl"]
+  .ng-select
+  .ng-select-container
+  .ng-value-container
+  .ng-placeholder {
+  transform-origin: right 0;
+}
+::ng-deep .ng-select .ng-select-container .ng-value-container .ng-input {
+  bottom: 0.4375em;
+}
+::ng-deep
+  .ng-select.ng-select-single
+  .ng-select-container.ng-appearance-outline
+  .ng-arrow-wrapper {
+  bottom: 17px;
+}
+::ng-deep
+  .ng-select.ng-select-single
+  .ng-select-container.ng-appearance-outline
+  .ng-clear-wrapper {
+  bottom: 14px;
+}
+::ng-deep .ng-select.ng-select-single .ng-select-container .ng-arrow-wrapper {
+  align-self: flex-end;
+  bottom: 9px;
+}
+::ng-deep .ng-select.ng-select-single .ng-select-container .ng-clear-wrapper {
+  align-self: flex-end;
+  bottom: 7px;
+}
+::ng-deep
+  .ng-select.ng-select-multiple.ng-select-disabled
+  .ng-select-container
+  .ng-value-container
+  .ng-value {
+  background-color: rgba(0, 0, 0, 0.12);
+  color: rgba(0, 0, 0, 0.26);
+}
+::ng-deep
+  .ng-select.ng-select-multiple.ng-select-disabled
+  .ng-appearance-outline:after,
+.ng-select.ng-select-multiple.ng-select-disabled
+  .ng-appearance-outline:hover:after {
+  background-image: none;
+  border: dotted 1px rgba(0, 0, 0, 0.12);
+}
+::ng-deep
+  .ng-select.ng-select-multiple
+  .ng-select-container.ng-appearance-outline.ng-has-value
+  .ng-arrow-wrapper,
+.ng-select.ng-select-multiple
+  .ng-select-container.ng-appearance-outline.ng-has-value
+  .ng-clear-wrapper {
+  border-top: none;
+}
+::ng-deep
+  .ng-select.ng-select-multiple
+  .ng-select-container.ng-appearance-outline
+  .ng-arrow-wrapper {
+  top: 0;
+}
+::ng-deep
+  .ng-select.ng-select-multiple
+  .ng-select-container.ng-appearance-outline
+  .ng-clear-wrapper {
+  top: 4px;
+}
+::ng-deep
+  .ng-select.ng-select-multiple
+  .ng-select-container
+  .ng-value-container
+  .ng-value {
+  background-color: #3f51b5;
+  border-radius: 2px;
+  color: #fff;
+  padding: 2px 5px;
+  margin: 0 0.4375em 0.4375em 0;
+}
+::ng-deep
+  [dir="rtl"]
+  .ng-select.ng-select-multiple
+  .ng-select-container
+  .ng-value-container
+  .ng-value {
+  margin: 0 0 0.4375em 0.4375em;
+}
+::ng-deep
+  .ng-select.ng-select-multiple
+  .ng-select-container
+  .ng-value-container
+  .ng-value.ng-value-disabled {
+  background-color: rgba(0, 0, 0, 0.12);
+  color: rgba(0, 0, 0, 0.26);
+}
+::ng-deep
+  .ng-select.ng-select-multiple
+  .ng-select-container
+  .ng-value-container
+  .ng-value
+  .ng-value-label {
+  font-size: 14px;
+  font-weight: 500;
+}
+::ng-deep
+  .ng-select.ng-select-multiple
+  .ng-select-container
+  .ng-value-container
+  .ng-value
+  .ng-value-icon {
+  color: hsla(0, 0%, 100%, 0.54);
+  padding-right: 5px;
+}
+::ng-deep
+  [dir="rtl"]
+  .ng-select.ng-select-multiple
+  .ng-select-container
+  .ng-value-container
+  .ng-value
+  .ng-value-icon {
+  padding-left: 5px;
+  padding-right: 0;
+}
+::ng-deep
+  .ng-select.ng-select-multiple
+  .ng-select-container
+  .ng-value-container
+  .ng-value
+  .ng-value-icon:hover {
+  color: hsla(0, 0%, 100%, 0.87);
+}
+::ng-deep
+  .ng-select.ng-select-multiple
+  .ng-select-container
+  .ng-value-container
+  .ng-input {
+  line-height: 1.375em;
+}
+::ng-deep .ng-select.ng-select-multiple .ng-select-container.ng-has-value {
+  align-items: center;
+}
+::ng-deep
+  .ng-select.ng-select-multiple
+  .ng-select-container.ng-has-value
+  .ng-value-container {
+  padding-bottom: 0;
+  padding-top: 0.1875em;
+}
+::ng-deep
+  .ng-select.ng-select-multiple
+  .ng-select-container.ng-has-value
+  .ng-clear-wrapper,
+.ng-select.ng-select-multiple
+  .ng-select-container.ng-has-value
+  .ng-arrow-wrapper {
+  border-top: 0.84375em solid rgba(0, 0, 0, 0);
+}
+::ng-deep .ng-select .ng-clear-wrapper {
+  color: rgba(0, 0, 0, 0.54);
+}
+::ng-deep .ng-select .ng-clear-wrapper:hover {
+  color: rgba(0, 0, 0, 0.87);
+}
+::ng-deep .ng-select .ng-clear-wrapper:focus {
+  color: rgba(0, 0, 0, 0.87);
+  outline: none;
+}
+::ng-deep .ng-select .ng-arrow-wrapper {
+  bottom: 2px;
+}
+::ng-deep .ng-select .ng-arrow-wrapper .ng-arrow {
+  border-left: 5px solid rgba(0, 0, 0, 0);
+  border-right: 5px solid rgba(0, 0, 0, 0);
+  border-top: 5px solid;
+  margin: 0 4px;
+  color: rgba(0, 0, 0, 0.54);
+}
+::ng-deep .ng-select .ng-spinner-zone {
+  top: 3px;
+}
+::ng-deep .ng-dropdown-panel {
+  background: #fff;
+  left: 0;
+}
+::ng-deep .ng-dropdown-panel.ng-select-top {
+  bottom: calc(100% - 0.84375em);
+  box-shadow: 0 -5px 5px -3px rgba(0, 0, 0, 0.2),
+    0 -8px 10px 1px rgba(0, 0, 0, 0.14), 0 -3px 14px 2px rgba(0, 0, 0, 0.12);
+}
+::ng-deep .ng-dropdown-panel.ng-select-right {
+  left: 100%;
+  top: calc(0% + 0.84375em);
+  box-shadow: 0 -5px 5px -3px rgba(0, 0, 0, 0.2),
+    0 -8px 10px 1px rgba(0, 0, 0, 0.14), 0 -3px 14px 2px rgba(0, 0, 0, 0.12);
+  margin-left: 4px;
+}
+::ng-deep .ng-dropdown-panel.ng-select-bottom {
+  top: calc(100% - 1.25em);
+  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
+    0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
+}
+::ng-deep .ng-dropdown-panel.ng-select-left {
+  left: calc(-100% - 4px);
+  top: calc(0% + 0.84375em);
+  box-shadow: 0 -5px 5px -3px rgba(0, 0, 0, 0.2),
+    0 -8px 10px 1px rgba(0, 0, 0, 0.14), 0 -3px 14px 2px rgba(0, 0, 0, 0.12);
+}
+::ng-deep .ng-dropdown-panel.multiple .ng-option.selected {
+  background: #fff;
+}
+::ng-deep .ng-dropdown-panel.multiple .ng-option.marked {
+  background: rgba(0, 0, 0, 0.04);
+}
+::ng-deep .ng-dropdown-panel .ng-dropdown-header {
+  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
+  padding: 0 16px;
+  line-height: 3em;
+  min-height: 3em;
+}
+::ng-deep .ng-dropdown-panel .ng-dropdown-footer {
+  border-top: 1px solid rgba(0, 0, 0, 0.12);
+  padding: 0 16px;
+  line-height: 3em;
+  min-height: 3em;
+}
+::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup {
+  user-select: none;
+  cursor: pointer;
+  line-height: 3em;
+  height: 3em;
+  padding: 0 16px;
+  color: rgba(0, 0, 0, 0.54);
+  font-weight: 500;
+}
+::ng-deep
+  .ng-dropdown-panel
+  .ng-dropdown-panel-items
+  .ng-optgroup.ng-option-marked {
+  background: rgba(0, 0, 0, 0.04);
+}
+::ng-deep
+  .ng-dropdown-panel
+  .ng-dropdown-panel-items
+  .ng-optgroup.ng-option-disabled {
+  cursor: default;
+}
+::ng-deep
+  .ng-dropdown-panel
+  .ng-dropdown-panel-items
+  .ng-optgroup.ng-option-selected {
+  background: rgba(0, 0, 0, 0.12);
+  color: #3f51b5;
+}
+::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option {
+  line-height: 3em;
+  min-height: 3em;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  padding: 0 16px;
+  text-decoration: none;
+  position: relative;
+  color: rgba(0, 0, 0, 0.87);
+  text-align: left;
+}
+::ng-deep [dir="rtl"] .ng-dropdown-panel .ng-dropdown-panel-items .ng-option {
+  text-align: right;
+}
+::ng-deep
+  .ng-dropdown-panel
+  .ng-dropdown-panel-items
+  .ng-option.ng-option-marked {
+  background: rgba(0, 0, 0, 0.04);
+  color: rgba(0, 0, 0, 0.87);
+}
+::ng-deep
+  .ng-dropdown-panel
+  .ng-dropdown-panel-items
+  .ng-option.ng-option-selected {
+  background: rgba(0, 0, 0, 0.12);
+  color: #3f51b5;
+}
+::ng-deep
+  .ng-dropdown-panel
+  .ng-dropdown-panel-items
+  .ng-option.ng-option-disabled {
+  color: rgba(0, 0, 0, 0.38);
+}
+::ng-deep
+  .ng-dropdown-panel
+  .ng-dropdown-panel-items
+  .ng-option.ng-option-child {
+  padding-left: 32px;
+}
+::ng-deep
+  [dir="rtl"]
+  .ng-dropdown-panel
+  .ng-dropdown-panel-items
+  .ng-option.ng-option-child {
+  padding-right: 32px;
+  padding-left: 0;
+}
+::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option .ng-tag-label {
+  padding-right: 5px;
+  font-size: 80%;
+  font-weight: 400;
+  color: rgba(0, 0, 0, 0.38);
+}
+::ng-deep
+  [dir="rtl"]
+  .ng-dropdown-panel
+  .ng-dropdown-panel-items
+  .ng-option
+  .ng-tag-label {
+  padding-left: 5px;
+  padding-right: 0;
+}

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

@@ -0,0 +1,40 @@
+<div class="mstate-angular">
+  <img
+    src="https://firebasestorage.googleapis.com/v0/b/mobioffice-dev.appspot.com/o/companies_logo%2Flogo.png?alt=media&token=e5f238f0-c373-4c76-9168-37fbe7da1de0"
+    alt="logo"
+    width="100%"
+    class="logo" />
+
+  @if (isLoading) {
+    <mobi-office-loader></mobi-office-loader>
+  } @else if (errorMessages.length) {
+    @for (message of errorMessages; track message) {
+      <p>
+        {{ message }}
+      </p>
+    }
+  } @else {
+    @switch (allowedActions.length) {
+      @case (0) {
+        <h1>Workflow Ended</h1>
+      }
+      @case (1) {
+        <lib-action-form
+          [workflow]="workflow"
+          [token]="token"
+          [instanceID]="instanceID"
+          [config]="allowedActions[0]"
+          [onExecuteAction]="handleExecuteAction"
+          [updateCustomFieldValue]="handleCustomField"
+          [onSuccess]="onSuccess"></lib-action-form>
+      }
+      @default {
+        @for (item of allowedActions; track $index) {
+          <mobi-office-action-card
+            [error]="item"
+            (retryEmitter)="handleError($event)"></mobi-office-action-card>
+        }
+      }
+    }
+  }
+</div>