iss-ctrl 0.0.4 → 0.0.6

package/projects/iss/src/components/controls/toggle-button/toggle-button.field.ts

@@ -0,0 +1,40 @@
+import { Component } from "@angular/core";
+import { ReactiveFormsModule } from "@angular/forms";
+import { MatLabel } from "@angular/material/form-field";
+import { VIEW_PROVIDER } from "../../../shared/constants/view-provider.const";
+import { FieldBase } from "../base/field-base";
+import { ToggleButtonControl } from "./toggle-button.control";
+import { ToggleButtonViewer } from "./toggle-button.viewer";
+
+@Component({
+  selector: "iss-field-toggle-button",
+  viewProviders: [VIEW_PROVIDER],
+  imports: [
+    ReactiveFormsModule,
+    MatLabel,
+    ToggleButtonControl,
+    ToggleButtonViewer
+  ],
+  template: `
+    @if (field.visible()) {
+      @if (!(field.config.hideLabel)) {
+        <mat-label>{{ field.label() }}</mat-label>
+      }
+      @if (field.mode() === "edit") {
+        <iss-ctrl-toggle-button
+          [formControlName]="field.name"
+          [options]="field.options()"
+          [multiple]="field.config.multiple()"
+          (onChange)="onChange($event)"
+        />
+      } @else {
+        <iss-viewer-toggle-button [field]="field" />
+      }
+    }
+  `
+})
+export class ToggleButtonField extends FieldBase {
+  onChange($event: any) {
+    this.field.ctrlJsonValue.set($event);
+  }
+}

package/projects/iss/src/components/controls/toggle-button/toggle-button.viewer.ts

@@ -0,0 +1,14 @@
+import { Component } from "@angular/core";
+import { ViewerBase } from "../base/viewer-base";
+
+@Component({
+  selector: "iss-viewer-toggle-button",
+  template: `
+    <p>
+      @for (item of field().ctrlJsonValue(); track item?.value; let last = $last) {
+        <span>{{ item.label }} {{ last ? '' : ', ' }}</span>
+      }
+    </p>
+  `,
+})
+export class ToggleButtonViewer extends ViewerBase {}

package/projects/iss/src/components/controls/user-picker/employee.ts

@@ -0,0 +1,73 @@
+import { HttpClient } from "@angular/common/http";
+import { inject, Injectable } from "@angular/core";
+import { map, Observable, tap } from "rxjs";
+import { PLACEHOLDER_REGEX } from "../../../shared/constants/placeholder-regex.const";
+import { USER_SEARCH_API } from "../../../shared/tokens/user-search-api.token";
+
+@Injectable({providedIn: "root"})
+export class Employee {
+  loggedInUserProfile: any;
+  USER_SEARCH_URL: string = inject(USER_SEARCH_API);
+  userImageHost = "https://igateapp.stc.com.sa";
+  #http: HttpClient = inject(HttpClient);
+
+  getProfile(email: string): Observable<any> {
+    const url = this.replacePlaceholders(this.USER_SEARCH_URL, {email: email});
+
+    return this.#http.get(url).pipe(
+      map((dto: any) => {
+        dto.data.profileImageUrl = this.getProfileImageUrl(dto.data);
+        return dto.data;
+      }),
+      tap((user: any) => {
+        localStorage.setItem("user", JSON.stringify(user));
+        this.loggedInUserProfile = user;
+      })
+    );
+  }
+
+  search(username: string, endpoint?: string): Observable<any[]> {
+    let url = this.replacePlaceholders(this.USER_SEARCH_URL, {username});
+    if (endpoint) {
+      if (!endpoint.includes("{username}")) {
+        throw "endpoint should have this string {username} as a placeholder to be able to replace it";
+      }
+    }
+
+    if (endpoint) {
+      url = this.replacePlaceholders(endpoint, {username});
+    }
+
+    return this.#http.get<any>(url).pipe(
+      map((employees: any) => {
+        employees.data = employees.data.map((emp: any) => {
+          emp.image = this.getProfileImageUrl(emp);
+          return emp;
+        });
+        return employees.data;
+      })
+    );
+  }
+
+  getProfileImageUrl(user: any): string {
+    if (user.image && this.#checkIfImageHasValue(user.image)) {
+      return this.userImageHost + user.image;
+    }
+    return "";
+  }
+
+  replacePlaceholders(str: string, values: any) {
+    /*TODO check if placeholders passed in values object*/
+    if (!str) {
+      return "";
+    }
+    return str.replace(PLACEHOLDER_REGEX, (match: any) => {
+      return values[match.replace("{", "").replace("}", "")] ?? match;
+    });
+  }
+
+  #checkIfImageHasValue(imageUri: any) {
+    const splitResult = imageUri.split("/");
+    return !!(splitResult[splitResult.length - 1] && splitResult[splitResult.length - 1] !== ".jpg");
+  }
+}

package/projects/iss/src/components/controls/user-picker/user-picker.field.ts

@@ -0,0 +1,124 @@
+import { Component, CUSTOM_ELEMENTS_SCHEMA, inject, signal } from "@angular/core";
+import { MatSidenav, MatSidenavContainer } from "@angular/material/sidenav";
+import { map, tap } from "rxjs";
+import { ValidationMessageComponent } from "../../shared/validation-message.component";
+import { FieldBase } from "../base/field-base";
+import { SelectControl } from "../select/select.control";
+import { Employee } from "./employee";
+
+@Component({
+  selector: "iss-user-picker",
+  imports: [
+    SelectControl,
+    ValidationMessageComponent,
+    MatSidenav,
+    MatSidenavContainer,
+  ],
+  template: `
+    @if (field.visible()) {
+      @if (field.mode() === "edit") {
+        <iss-ctrl-select
+          [formControlName]="field.name"
+          [min]="field.config.min() ?? null"
+          [max]="field.config.max() ?? null"
+          [options]="options()"
+          [multiple]="true"
+          (onQueryChange)="search($event)"
+          (onChange)="updateField($event)"
+        >
+          <label>{{ field.label() }}</label>
+          <ng-template let-item #optionTemplate>
+            <div class="d-flex align-items-center gap-2">
+              <ds-avatar size="x-small" [attr.image]="item.image"></ds-avatar>
+              <span class="fs-14 fw-medium fc-black">{{ item.name }}</span>
+            </div>
+          </ng-template>
+          <ng-template let-item #cardViewerTemplate>
+            <div (click)="showUserData(item);drawer.open()">
+              {{ item.name }}
+            </div>
+          </ng-template>
+        </iss-ctrl-select>
+        <iss-validation-message-viewer [errors]="ctrl.errors" [showMessage]="!ctrl.untouched" />
+      } @else {
+        <p>{{ field.value }}</p>
+      }
+    }
+    <mat-sidenav-container [hasBackdrop]="true">
+      <mat-sidenav #drawer [mode]="'over'" [position]="'start'" [autoFocus]="false">
+        <div class="main-sidenav">
+          <div class="sidenav-title bc-white">
+            <h3> Employee Information </h3>
+            <ds-icon icon="close" class="fc-black fs-20 p-3 cursor-pointer" (click)="drawer.close()"></ds-icon>
+          </div>
+          <div class="sidenav-body p-0">
+            <div class="d-flex flex-column align-items-center gap-3 sidenav-user bc-off-white text-center">
+              <ds-avatar [attr.image]="userImageHost + userData?.profileImage || userData?.profileImageUrl" [attr.label]="userData?.name"></ds-avatar>
+              @if (userData?.employeeNumber) {
+                <div class="d-flex flex-column gap-1">
+                  <h4 class="fs-16 fc-black fw-medium mb-0">{{ userData?.name }}</h4>
+                  @if (!userData?.job?.name) {
+                    <h6 class="fs-12 fc-dark-gray fw-normal mb-0">{{ userData?.position?.name }}</h6>
+                  }
+                  @if (!userData?.position?.name) {
+                    <h6 class="fs-12 fc-dark-gray fw-normal mb-0">{{ userData?.job?.name }}</h6>
+                  }
+                </div>
+              }
+              <div class="d-flex flex-wrap gap-2">
+                <div class="fs-12 fc-black d-flex align-items-center gap-2 box-shadow bc-white radius-4 p-2 profile-box">
+                  <ds-icon icon="mail-o" class="fc-coral fs-20"></ds-icon>
+                  <a [href]="'mailTo:' + userData?.email" class="fc-black">{{ userData?.email }}</a>
+                </div>
+                @if (userData?.contact?.mobile) {
+                  <div class="fs-12 fc-black d-flex align-items-center gap-2 box-shadow bc-white radius-4 p-2 profile-box">
+                    <ds-icon icon="phone" class="fc-coral fs-20"></ds-icon>
+                    <a [href]="'tel:' + userData?.contact?.mobile" class="fc-black">
+                      <bdi>{{ userData?.contact?.mobile }}</bdi>
+                    </a>
+                  </div>
+                }
+              </div>
+            </div>
+          </div>
+        </div>
+      </mat-sidenav>
+    </mat-sidenav-container>
+  `,
+  styles: `
+    .mat-drawer {
+      position: fixed;
+      left: 0;
+    }`,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA]
+})
+export class UserPickerField extends FieldBase {
+  userImageHost = "https://igateapp.stc.com.sa";
+  employeeService = inject(Employee);
+  options: any = signal([]);
+  userData: any;
+
+  search(event: string) {
+    this.employeeService.search(event)
+      .pipe(
+        map((res: any) => {
+          return res.map((user: any) => {
+            user.value = user.email;
+            user.label = user.name;
+            return user;
+          });
+        }),
+        tap((res: any) => {
+          this.options.set(res);
+        })
+      ).subscribe();
+  }
+
+  updateField($event: string | FormData) {
+    this.options.set([]);
+  }
+
+  showUserData(item: any) {
+    this.userData = item;
+  }
+}

package/projects/iss/src/components/outlet/component-outlet.ts

@@ -0,0 +1,8 @@
+import { Type } from "@angular/core";
+import { Observable } from "rxjs";
+import { IssField } from "../../shared/classes/iss-field";
+
+export interface ComponentOutlet {
+  self$: Observable<Type<any> | null>;
+  data: IssField;
+}

package/projects/iss/src/components/outlet/field-data-injector.ts

@@ -0,0 +1,20 @@
+import { inject, Injector, Pipe, PipeTransform } from "@angular/core";
+import { IssField } from "../../shared/classes/iss-field";
+import { FIELD_DATA } from "../../shared/tokens/field.token";
+
+@Pipe({name: "FieldDataInjector"})
+export class FieldDataInjector implements PipeTransform {
+  injector: Injector = inject(Injector);
+
+  transform(field: IssField | null): Injector {
+    return Injector.create({
+      parent: this.injector,
+      providers: [
+        {
+          provide: FIELD_DATA,
+          useValue: field,
+        },
+      ],
+    });
+  }
+}

package/projects/iss/src/components/outlet/iss-form-group.ts

@@ -0,0 +1,5 @@
+import { FormGroup } from "@angular/forms";
+
+export interface IssFormGroup extends FormGroup {
+  id?: string;
+}

package/projects/iss/src/components/outlet/outlet.ts

@@ -0,0 +1,154 @@
+import { AsyncPipe, NgComponentOutlet } from "@angular/common";
+import { ChangeDetectionStrategy, Component, effect, EffectRef, inject, input, InputSignal, OnDestroy, OnInit, output, OutputEmitterRef, signal, WritableSignal } from "@angular/core";
+import { ControlContainer } from "@angular/forms";
+import { debounceTime, first, map } from "rxjs";
+import { IssField } from "../../shared/classes/iss-field";
+import { VALIDATORS } from "../../shared/indexes/validators.index";
+import { FormEngine } from "../../shared/services/form-engine";
+import { Loader } from "../../shared/services/loader";
+import { ComponentOutlet } from "./component-outlet";
+import { FieldDataInjector } from "./field-data-injector";
+import { IssFormGroup } from "./iss-form-group";
+
+const outletRegistry = new Map();
+
+@Component({
+  selector: "iss-form-outlet",
+  imports: [
+    NgComponentOutlet,
+    FieldDataInjector,
+    AsyncPipe,
+  ],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    @if (components() && components()?.length) {
+      @for (component of components(); track $index) {
+        <ng-container
+          [ngComponentOutlet]="component.self$ | async"
+          [ngComponentOutletInjector]="component.data | FieldDataInjector"
+          [ngComponentOutletInputs]="{formReady: formReady(), issField: component.data | FieldDataInjector}"
+        />
+      }
+    }
+  `
+})
+export class Outlet implements OnInit, OnDestroy {
+  ready: OutputEmitterRef<boolean> = output();
+  formReady: WritableSignal<boolean> = signal(false);
+  fields: InputSignal<IssField[]> = input.required<IssField[]>();
+  components: WritableSignal<ComponentOutlet[] | null> = signal(null);
+  #controlContainer: ControlContainer = inject(ControlContainer);
+  #formEngine: FormEngine = inject(FormEngine);
+  #loader: Loader = inject(Loader);
+  #effectRef: EffectRef = effect(async () => {
+    const components = await this.#componentsFactory(this.fields());
+    this.components.set(components);
+    if (components) {
+      this.#formEngine.fields = components.map((component: ComponentOutlet) => component.data);
+    }
+  });
+
+  get hostFormGroup(): IssFormGroup {
+    return this.#controlContainer.control as IssFormGroup;
+  }
+
+  ngOnInit() {
+    if (!this.hostFormGroup.id) {
+      this.hostFormGroup.id = Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15);
+    }
+
+    const existingFields = outletRegistry.get(this.hostFormGroup.id) || [];
+    const newFieldNames = this.fields().filter((f) => f.mode() === "edit" || (f.mode() === "view" && f.value)).map((f) => f.name);
+    outletRegistry.set(this.hostFormGroup.id, Array.from(new Set([...existingFields, ...newFieldNames])));
+
+    this.#listenToHostFormGroupChanges().subscribe((isReady) => {
+      if (isReady) {
+        this.formReady.set(true);
+        this.ready.emit(true);
+      }
+    });
+  }
+
+  ngOnDestroy() {
+    this.#effectRef.destroy();
+  }
+
+  async #componentsFactory(fields: IssField[]): Promise<ComponentOutlet[]> {
+    const fieldsComponentPromise = fields.map(async (field: IssField): Promise<ComponentOutlet> => {
+      return {
+        self$: this.#loader.loadComponent(field),
+        data: await this.#initField(field)
+      };
+    });
+    return await Promise.all(fieldsComponentPromise);
+  }
+
+  /*todo needs refactoring to be in the issField class*/
+
+  async #initField(field: any): Promise<IssField> {
+    const f: IssField = new IssField(field, this.#loader);
+
+    await Promise.all([
+      this.#loadFieldEvents(f),
+      this.#loadFieldValidation(f)
+    ]);
+
+    return f;
+  }
+
+  async #loadFieldEvents(f: IssField): Promise<void> {
+    if (!f.events?.length) return;
+
+    await Promise.all(
+      f.events.map(async (action) => {
+        const [fn, triggerFn, configFn] = await Promise.all([
+          action.fnPromise,
+          action.config.triggerFnPromise,
+          action.config.fnPromise
+        ]);
+
+        action.fn = fn;
+        if (triggerFn) {
+          action.config.triggerFn = triggerFn;
+        }
+        action.config.fn = configFn;
+      })
+    );
+  }
+
+  async #loadFieldValidation(f: IssField): Promise<void> {
+    if (!f.validation) return;
+
+    const validationEntries = Object.entries(f.validation).filter(
+      ([key, validation]) => {
+        if (VALIDATORS[key] === undefined) {
+          console.error(`${key} not found`);
+          return false;
+        }
+        return validation !== undefined && !validation?.hasOwnProperty("fn");
+      }
+    );
+
+    await Promise.all(
+      validationEntries.map(async ([key, validation]) => {
+        f.validation[key] = {
+          fn: await VALIDATORS[key](),
+          value: validation
+        };
+      })
+    );
+  }
+
+  #listenToHostFormGroupChanges() {
+    return this.hostFormGroup.valueChanges.pipe(
+      debounceTime(500),
+      map(() => {
+        const controlNames = Object.keys(this.hostFormGroup.getRawValue());
+        const fieldNames = outletRegistry.get(this.hostFormGroup.id);
+        const diff = fieldNames.filter((x: string) => !controlNames.includes(x));
+        return diff.length === 0;
+      }),
+      first((v) => v)
+    );
+  }
+}

package/projects/iss/src/components/shared/hints.component.ts

@@ -0,0 +1,38 @@
+import { Component, CUSTOM_ELEMENTS_SCHEMA, input, InputSignal } from "@angular/core";
+import { MatHint } from "@angular/material/form-field";
+import { Hint } from "../../shared/interfaces/hint";
+
+@Component({
+  selector: "iss-ctrl-hints",
+  imports: [MatHint,],
+  template: `
+    @if (hints().length) {
+      <div class="d-flex align-items-center flex-wrap gap-2 mb-3">
+        @for (hint of hints(); track $index) {
+          @if (hint) {
+            <mat-hint [align]="hint.align" class="d-flex align-items-center gap-1 fs-12">
+              @if (hint.valid === undefined) {
+                <ds-icon icon="info" class="fs-24 fc-dark-gray"></ds-icon>
+                <span class="fc-dark-gray text-break">{{ hint.label }}</span>
+              } @else {
+                <ds-icon
+                  icon="{{ touched() ? (hint.valid ? 'check-circle-f' : 'close-circle') : 'check-circle-o' }}"
+                  class="fs-24 {{ touched() ? (hint.valid ? 'fc-green' : 'fc-red') : 'fc-dark-gray' }}"
+                >
+                </ds-icon>
+                <span
+                  class="{{ touched() ? (hint.valid ? 'fc-green' : 'fc-red') : 'fc-dark-gray' }} text-break"
+                >{{ hint.label }}</span>
+              }
+            </mat-hint>
+          }
+        }
+      </div>
+    }
+  `,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA]
+})
+export class HintsComponent {
+  hints: InputSignal<Hint[]> = input<Hint[]>([]);
+  touched: InputSignal<boolean> = input(false);
+}

package/projects/iss/src/components/shared/validation-message.component.ts

@@ -0,0 +1,36 @@
+import {KeyValuePipe} from "@angular/common";
+import {Component, input, InputSignal} from "@angular/core";
+import {ValidationErrors} from "@angular/forms";
+import {MatError} from "@angular/material/form-field";
+import {VALIDATION_MESSAGES} from "../../shared/constants/validation.const";
+import {TranslatePipe} from "../../shared/pipes/translate.pipe";
+
+@Component({
+  selector: "iss-validation-message-viewer",
+  imports: [
+    KeyValuePipe,
+    TranslatePipe,
+    MatError
+  ],
+  template: `
+    @if (errors() !== null && showMessage()) {
+      @for (error of errors() ?? {} | keyvalue; track error) {
+        <p>
+          <mat-error>{{ getValidationMessage(error) | translate }}</mat-error>
+        </p>
+      }
+    }
+  `,
+})
+export class ValidationMessageComponent {
+  errors: InputSignal<ValidationErrors | null> = input.required();
+  showMessage: InputSignal<boolean> = input.required();
+
+  getValidationMessage(error: { key: string, value: any }): any {
+    const errorMessageGenerator = VALIDATION_MESSAGES[error.key];
+    if (!errorMessageGenerator) {
+      throw new Error(`THERE IS NO VALIDATION MESSAGE FOR KEY "${error.key}"`);
+    }
+    return errorMessageGenerator(error.value);
+  }
+}

package/projects/iss/src/events/event-handler.ts

@@ -0,0 +1,47 @@
+import { inject, Injectable } from "@angular/core";
+import { AbstractControl, FormGroup } from "@angular/forms";
+import { FieldEvent } from "../shared/classes/field-event";
+import { IssField } from "../shared/classes/iss-field";
+import { EventArgument, EventStrategy, FieldChange } from "../shared/interfaces/event-strategy";
+import { EventTriggerManager } from "./triggers/event-trigger-manager";
+
+@Injectable({providedIn: "root"})
+export class EventHandler {
+  #actionTriggerManager: EventTriggerManager = inject(EventTriggerManager);
+
+  async fire(control: AbstractControl, form: FormGroup, field: IssField, change: FieldChange) {
+    let actions: FieldEvent[] = await this.#actionTriggerManager.getActionsToBeTriggered(field, change);
+    /* todo need to follow up on actions on this field (self) */
+    for (let i = 0; i < actions.length; i++) {
+      let evt: EventStrategy | undefined = actions[i].fn;
+      if (!evt) {
+        /* todo remove await from array and use allSettle instead or any other solution */
+        evt = await actions[i].fnPromise;
+      }
+      const args: EventArgument = this.#fieldEventArgumentFactory(control, form, field, change, actions[i]);
+      evt?.fire(args);
+    }
+  }
+
+  async revert(control: AbstractControl, form: FormGroup, field: IssField, change: FieldChange) {
+    const actions: FieldEvent[] = await this.#actionTriggerManager.getActionsToBeReverted(field, change);
+    for (let i = 0; i < actions.length; i++) {
+      let evt: EventStrategy | undefined = actions[i].fn;
+      if (!evt) {
+        evt = await actions[i].fnPromise;
+      }
+      const args: EventArgument = this.#fieldEventArgumentFactory(control, form, field, change, actions[i]);
+      evt?.revert(args);
+    }
+  }
+
+  #fieldEventArgumentFactory(control: AbstractControl, form: FormGroup, field: IssField, change: FieldChange, action: FieldEvent): EventArgument {
+    return {
+      action,
+      change,
+      control,
+      field,
+      form
+    };
+  }
+}

package/projects/iss/src/events/load/after-fetch.ts

@@ -0,0 +1,29 @@
+import { Injectable } from "@angular/core";
+import { EventArgument, EventConfigFn } from "../../shared/interfaces/event-strategy";
+import { getPropertyByPath } from "../../shared/utilities/get-property-by-path.util";
+
+@Injectable({providedIn: "root"})
+export class AfterFetch implements EventConfigFn {
+  execute(args: EventArgument) {
+    // set options from response in case of selectable fields
+    if (args.field.base === "select") {
+      args.field.options.set(args.field.response());
+    }
+
+    args.control.setValue(getPropertyByPath(args.field.response(), args.action.config.setValueFromApiResponse) || args.field.response());
+
+    // if (args.action?.config?.setValueFromApiResponse) {
+    //   // setValue using specific property from response
+    // } else {
+    //   if (args.field.base === "input") {
+    //     args.control.setValue(args.field.response.data);
+    //   }
+    // }
+
+    if (args.action.config.disableAfterFetching) {
+      args.control.disable();
+    }
+
+    args.field.loading.set(false);
+  }
+}

package/projects/iss/src/events/load/load-event.ts

@@ -0,0 +1,26 @@
+import { inject, Injectable } from "@angular/core";
+import { EventArgument } from "../../shared/interfaces/event-strategy";
+import { HOST } from "../../shared/tokens/host.token";
+import { ReplaceApiKeys } from "./replace-api-keys";
+
+@Injectable({providedIn: "root"})
+export class LoadEvent {
+  #replaceApiKeysService = inject(ReplaceApiKeys);
+  #host: string = inject(HOST);
+
+  getApi(args: EventArgument) {
+    let api;
+    if (args.action.config.fn) {
+      api = args.action.config.fn.execute(args);
+    } else {
+      api = this.#replaceApiKeysService.execute(args);
+    }
+
+    return `${this.#host}${api}`;
+  }
+
+  fetchErrorHandler(args: EventArgument, err: any) {
+    console.error(err);
+    args.field.loading.set(false);
+  }
+}

package/projects/iss/src/events/load/load-options-event.ts

@@ -0,0 +1,49 @@
+import { inject, Injectable } from "@angular/core";
+import { Dto } from "../../shared/interfaces/dto";
+import { EventArgument, EventStrategy } from "../../shared/interfaces/event-strategy";
+import { getPropertyByPath } from "../../shared/utilities/get-property-by-path.util";
+import { IssHttp } from "../../shared/utilities/http.util.service";
+import { LoadEvent } from "./load-event";
+
+@Injectable({providedIn: "root"})
+export class LoadOptionsEvent implements EventStrategy {
+  loadEvent = inject(LoadEvent);
+  #http: IssHttp = inject(IssHttp);
+
+  fire(args: EventArgument) {
+    console.log(`${args.field.name} listens to ${args.action.trackedFieldName} =>` + "%c Load Event Fired", "color: green");
+    const api = this.loadEvent.getApi(args);
+
+    args.field.loading.set(true);
+    this.#http.get(api).subscribe({
+      next: (response: Dto) => {
+        args.field.response.set(response.data);
+        args.field.apiResponse.next(response.data);
+
+        if (args.action.config.afterFetchFn) {
+          args.action.config.afterFetchFn?.execute(args);
+        } else {
+          args.field.options.set(args.field.response());
+
+          if (args.action.config.setValueFromApiResponse) {
+            args.control.setValue(getPropertyByPath(args.field.response(), args.action.config.setValueFromApiResponse));
+          }
+
+          if (args.action.config.disableAfterFetching) {
+            args.control.disable();
+          }
+        }
+        args.field.loading.set(false);
+      },
+      error: (err) => {
+        // todo handle errors
+        this.loadEvent.fetchErrorHandler(args, err);
+      },
+    });
+    args.action.triggered = true;
+  }
+
+  revert(args: EventArgument) {
+    console.log(`${args.field.name} listens to ${args.action.trackedFieldName} =>` + "%c Load Event Reverted", "color: red");
+  }
+}