@myparcel-dev/pdk-admin 1.13.0

package/src/forms/form-builder/builders/buildFormStateWatcher.spec.ts

@@ -0,0 +1,206 @@
+import {ref} from 'vue';
+import {describe, expect, it} from 'vitest';
+import {type FormInstance, type InteractiveElementInstance} from '@myparcel-dev/vue-form-builder';
+import {type OperationArguments} from '../types';
+import {buildFormStateWatcher} from './buildFormStateWatcher';
+
+const createFakeElementInstance = (): InteractiveElementInstance => {
+  const createFakeField = (name: string, value: unknown) => {
+    return {
+      name,
+      ref: ref(value),
+      component: 'input',
+      form: fakeForm,
+    } as InteractiveElementInstance;
+  };
+
+  const createFakeFields = () => {
+    return [createFakeField('field1', 'hi'), createFakeField('field2', false), createFakeField('field3', 12)];
+  };
+
+  const fields: InteractiveElementInstance[] = [];
+
+  const fakeForm = {
+    name: 'fake',
+    getValue(name: string) {
+      return fields.find((field) => field.name === name)?.ref.value;
+    },
+  } as unknown as FormInstance;
+
+  fields.push(...createFakeFields());
+
+  return fields[0];
+};
+
+describe('buildFormStateWatcher', () => {
+  it('should return a function', () => {
+    const result = buildFormStateWatcher({}, '');
+
+    expect(result).toBeInstanceOf(Function);
+  });
+
+  it.each([
+    {
+      $if: [
+        {
+          $target: 'field3',
+          $gt: 2,
+        },
+      ],
+    },
+    {
+      $if: [
+        {
+          $target: 'field1',
+          $in: ['hi', 'ciao'],
+        },
+      ],
+    },
+    {
+      $if: [
+        {
+          $target: 'field2',
+          $eq: false,
+        },
+      ],
+    },
+    {
+      $if: [
+        {
+          $target: 'field2',
+          $eq: false,
+        },
+        {
+          $target: 'field1',
+          $in: ['hi', 'ciao'],
+        },
+      ],
+    },
+    {
+      $if: [
+        {
+          $and: [
+            {
+              $target: 'field2',
+              $eq: false,
+            },
+            {
+              $target: 'field1',
+              $nin: ['bye', 'hello'],
+            },
+          ],
+        },
+      ],
+    },
+    {
+      $if: [
+        {
+          $or: [
+            {
+              $target: 'field2',
+              $eq: true,
+            },
+            {
+              $target: 'field3',
+              $gt: 10,
+            },
+          ],
+        },
+      ],
+    },
+    {
+      $if: [
+        {
+          $and: [{$target: 'field1'}, {$target: 'field3'}],
+        },
+      ],
+    },
+  ] satisfies OperationArguments[])('should return true if the condition is true', (input) => {
+    const result = buildFormStateWatcher(input, '')(createFakeElementInstance());
+
+    expect(result).toBe(true);
+  });
+
+  it.each([
+    {
+      $if: [
+        {
+          $target: 'field3',
+          $lt: 2,
+        },
+      ],
+    },
+    {
+      $if: [
+        {
+          $target: 'field1',
+          $in: ['bye', 'hello'],
+        },
+      ],
+    },
+    {
+      $if: [
+        {
+          $target: 'field2',
+          $eq: true,
+        },
+      ],
+    },
+    {
+      $if: [
+        {
+          $target: 'field2',
+          $eq: true,
+        },
+        {
+          $target: 'field1',
+          $in: ['hi', 'ciao'],
+        },
+      ],
+    },
+    {
+      $if: [
+        {
+          $and: [
+            {
+              $target: 'field2',
+              $eq: true,
+            },
+            {
+              $target: 'field1',
+              $nin: ['hi', 'ciao'],
+            },
+          ],
+        },
+      ],
+    },
+
+    {
+      $if: [
+        {
+          $or: [
+            {
+              $target: 'field2',
+              $eq: true,
+            },
+            {
+              $target: 'field3',
+              $lt: 10,
+            },
+          ],
+        },
+      ],
+    },
+    {
+      $if: [
+        {
+          $and: [{$target: 'field1'}, {$target: 'field2'}],
+        },
+      ],
+    },
+  ] satisfies OperationArguments[])('should return false if the condition is false', (input) => {
+    const result = buildFormStateWatcher(input, '')(createFakeElementInstance());
+
+    expect(result).toBe(false);
+  });
+});

package/src/forms/form-builder/builders/buildFormStateWatcher.ts

@@ -0,0 +1,15 @@
+import {type InteractiveElementInstance} from '@myparcel-dev/vue-form-builder';
+import {createValueGetter} from '../utils';
+import {type WhenArguments} from '../types';
+import {validateIfConditions} from '../conditions';
+
+export const buildFormStateWatcher = (
+  input: WhenArguments,
+  prefix: string,
+): ((instance: InteractiveElementInstance) => boolean) => {
+  return (instance: InteractiveElementInstance): boolean => {
+    const getValue = createValueGetter(instance, prefix);
+
+    return validateIfConditions(input, getValue);
+  };
+};

package/src/forms/form-builder/builders/index.ts

@@ -0,0 +1,2 @@
+export * from './buildAfterUpdate';
+export * from './buildFormStateWatcher';

package/src/forms/form-builder/conditions/index.ts

@@ -0,0 +1,3 @@
+export * from './validateIfCondition';
+export * from './validateIfConditions';
+export * from './validateIsTruthy';

package/src/forms/form-builder/conditions/validateIfCondition.spec.ts

@@ -0,0 +1,69 @@
+import {describe, expect, it} from 'vitest';
+import {validateIfCondition} from './validateIfCondition';
+
+describe('validateIfCondition', () => {
+  it.each([
+    ['hi', 'hi', true],
+    ['hi', 'ciao', false],
+  ])('should return %s === %s', (value, $eq, expected) => {
+    expect(validateIfCondition({$eq}, () => value)).toBe(expected);
+  });
+
+  it.each([
+    [10, 5, true],
+    [10, 10, false],
+  ])('should return %s > %s', (value, $gt, expected) => {
+    expect(validateIfCondition({$gt}, () => value)).toBe(expected);
+  });
+
+  it.each([
+    [10, 5, true],
+    [10, 10, true],
+    [10, 15, false],
+  ])('should return %s >= %s', (value, $gte, expected) => {
+    expect(validateIfCondition({$gte}, () => value)).toBe(expected);
+  });
+
+  it.each([
+    ['hi', ['hi', 'ciao'], true],
+    ['hi', ['ciao', 'bye'], false],
+  ])('should return %s in %s', (value, $in, expected) => {
+    expect(validateIfCondition({$in}, () => value)).toBe(expected);
+  });
+
+  it.each([
+    [5, 10, true],
+    [10, 10, false],
+  ])('should return %s < %s', (value, $lt, expected) => {
+    expect(validateIfCondition({$lt}, () => value)).toBe(expected);
+  });
+
+  it.each([
+    [5, 10, true],
+    [10, 10, true],
+    [15, 10, false],
+  ])('should return %s <= %s', (value, $lte, expected) => {
+    expect(validateIfCondition({$lte}, () => value)).toBe(expected);
+  });
+
+  it.each([
+    ['hi', 'ciao', true],
+    ['hi', 'hi', false],
+  ])('should return %s !== %s', (value, $ne, expected) => {
+    expect(validateIfCondition({$ne}, () => value)).toBe(expected);
+  });
+
+  it.each([
+    ['hi', ['ciao', 'bye'], true],
+    ['hi', ['hi', 'bye'], false],
+  ])('should return %s not in %s', (value, $nin, expected) => {
+    expect(validateIfCondition({$nin}, () => value)).toBe(expected);
+  });
+
+  it.each([
+    ['hi', 'ciao', true],
+    ['hi', 'hi', false],
+  ])('should return %s !== %s', (value, $ne, expected) => {
+    expect(validateIfCondition({$ne}, () => value)).toBe(expected);
+  });
+});

package/src/forms/form-builder/conditions/validateIfCondition.ts

@@ -0,0 +1,43 @@
+import {isOfType} from '@myparcel-dev/ts-utils';
+import {
+  type AnyVal,
+  type EqualMatcher,
+  type GreaterThanMatcher,
+  type GreaterThanOrEqualMatcher,
+  type InMatcher,
+  type LessThanMatcher,
+  type LessThanOrEqualMatcher,
+  type NotEqualMatcher,
+  type NotInMatcher,
+  type SingleIfMatcher,
+  type WithTarget,
+} from '../types';
+import {validateIsTruthy} from './validateIsTruthy';
+
+export const validateIfCondition = ($if: SingleIfMatcher, getValue: (target?: string) => AnyVal): boolean => {
+  const value = getValue($if.$target);
+
+  let matches = false;
+
+  if (isOfType<EqualMatcher>($if, '$eq')) {
+    matches = value === $if.$eq;
+  } else if (isOfType<GreaterThanMatcher>($if, '$gt')) {
+    matches = Number(value) > $if.$gt;
+  } else if (isOfType<GreaterThanOrEqualMatcher>($if, '$gte')) {
+    matches = Number(value) >= $if.$gte;
+  } else if (isOfType<InMatcher>($if, '$in')) {
+    matches = $if.$in.includes(value);
+  } else if (isOfType<LessThanMatcher>($if, '$lt')) {
+    matches = Number(value) < $if.$lt;
+  } else if (isOfType<LessThanOrEqualMatcher>($if, '$lte')) {
+    matches = Number(value) <= $if.$lte;
+  } else if (isOfType<NotEqualMatcher>($if, '$ne')) {
+    matches = value !== $if.$ne;
+  } else if (isOfType<NotInMatcher>($if, '$nin')) {
+    matches = !$if.$nin.includes(value);
+  } else if (isOfType<WithTarget>($if, '$target')) {
+    matches = validateIsTruthy($if, getValue);
+  }
+
+  return matches;
+};

package/src/forms/form-builder/conditions/validateIfConditions.spec.ts

@@ -0,0 +1,238 @@
+import {describe, expect, it} from 'vitest';
+import {type IfAndMatcher} from '../types';
+import {validateIfConditions} from './validateIfConditions';
+
+describe('validateIfConditions', () => {
+  it('should return true if no conditions are passed', () => {
+    const result = validateIfConditions({}, () => '');
+
+    expect(result).toBe(true);
+  });
+
+  it('should return true if the condition is true', () => {
+    const result = validateIfConditions(
+      {
+        $if: [
+          {
+            $target: 'field1',
+            $eq: true,
+          },
+        ],
+      },
+      () => true,
+    );
+
+    expect(result).toBe(true);
+  });
+
+  it('should return false if the condition is false', () => {
+    const result = validateIfConditions(
+      {
+        $if: [
+          {
+            $target: 'field1',
+            $eq: true,
+          },
+        ],
+      },
+      () => false,
+    );
+
+    expect(result).toBe(false);
+  });
+
+  it.each([[true], [1], ['hello']])(
+    'should return true if only a target is passed and its value is truthy (%s)',
+    (value) => {
+      const result = validateIfConditions({$target: 'field1'}, () => value);
+
+      expect(result).toBe(true);
+    },
+  );
+
+  it.each([
+    {
+      $and: [
+        {
+          $target: 'field1',
+          $eq: true,
+        },
+        {
+          $target: 'field2',
+          $eq: true,
+        },
+      ],
+    },
+    {
+      $and: [
+        {
+          $target: 'field1',
+          $ne: false,
+        },
+        {
+          $target: 'field2',
+          $eq: true,
+        },
+      ],
+    },
+    {
+      $and: [{$target: 'field1'}, {$target: 'field3'}],
+    },
+  ] satisfies IfAndMatcher[])('should return true if all and conditions are true', ($and) => {
+    const result = validateIfConditions({$if: [$and]}, () => true);
+
+    expect(result).toBe(true);
+  });
+
+  it.each([
+    {
+      $and: [
+        {
+          $target: 'field1',
+          $eq: true,
+        },
+        {
+          $target: 'field2',
+          $eq: false,
+        },
+      ],
+    },
+    {
+      $and: [
+        {
+          $target: 'field1',
+          $eq: true,
+        },
+        {$target: 'field2'},
+      ],
+    },
+    {
+      $and: [
+        {
+          $target: 'field1',
+          $ne: false,
+        },
+        {
+          $target: 'field3',
+          $ne: false,
+        },
+      ],
+    },
+  ] satisfies IfAndMatcher[])('should return false if any and condition is false', ($and) => {
+    const result = validateIfConditions({$if: [$and]}, () => false);
+
+    expect(result).toBe(false);
+  });
+
+  it('should return true if one or condition is true', () => {
+    const result = validateIfConditions(
+      {
+        $if: [
+          {
+            $or: [
+              {
+                $target: 'field1',
+                $eq: true,
+              },
+              {
+                $target: 'field2',
+                $eq: true,
+              },
+            ],
+          },
+        ],
+      },
+      () => true,
+    );
+
+    expect(result).toBe(true);
+  });
+
+  it('should return false if all or conditions are false', () => {
+    const result = validateIfConditions(
+      {
+        $if: [
+          {
+            $or: [
+              {
+                $target: 'field1',
+                $eq: true,
+              },
+              {
+                $target: 'field2',
+                $eq: true,
+              },
+            ],
+          },
+        ],
+      },
+      () => false,
+    );
+
+    expect(result).toBe(false);
+  });
+
+  it('should return true if all and and or conditions are true', () => {
+    const result = validateIfConditions(
+      {
+        $if: [
+          {
+            $and: [
+              {
+                $target: 'field1',
+                $eq: true,
+              },
+            ],
+          },
+          {
+            $or: [
+              {
+                $target: 'field2',
+                $eq: true,
+              },
+              {
+                $target: 'field3',
+                $eq: true,
+              },
+            ],
+          },
+        ],
+      },
+      () => true,
+    );
+
+    expect(result).toBe(true);
+  });
+
+  it('should return false if one and and or condition is false', () => {
+    const result = validateIfConditions(
+      {
+        $if: [
+          {
+            $and: [
+              {
+                $target: 'field1',
+                $eq: true,
+              },
+            ],
+          },
+          {
+            $or: [
+              {
+                $target: 'field2',
+                $eq: true,
+              },
+              {
+                $target: 'field3',
+                $eq: true,
+              },
+            ],
+          },
+        ],
+      },
+      () => false,
+    );
+
+    expect(result).toBe(false);
+  });
+});

package/src/forms/form-builder/conditions/validateIfConditions.ts

@@ -0,0 +1,31 @@
+import {isOfType} from '@myparcel-dev/ts-utils';
+import {type AnyVal, type IfAndMatcher, type IfOrMatcher, type WithCondition, type WithTarget} from '../types';
+import {validateIsTruthy} from './validateIsTruthy';
+import {validateIfCondition} from './validateIfCondition';
+
+export const validateIfConditions = (
+  input: Partial<WithCondition | WithTarget>,
+  getValue: (target?: string) => AnyVal,
+): boolean => {
+  if (!isOfType<WithCondition>(input, '$if')) {
+    if (isOfType<WithTarget>(input, '$target')) {
+      return validateIsTruthy(input, getValue);
+    }
+
+    return true;
+  }
+
+  return input.$if.every((condition) => {
+    let matches = true;
+
+    if (isOfType<IfOrMatcher>(condition, '$or')) {
+      matches = matches && condition.$or.some((condition) => validateIfCondition(condition, getValue));
+    } else if (isOfType<IfAndMatcher>(condition, '$and')) {
+      matches = matches && condition.$and.every((condition) => validateIfCondition(condition, getValue));
+    } else {
+      matches = validateIfCondition(condition, getValue);
+    }
+
+    return matches;
+  });
+};

package/src/forms/form-builder/conditions/validateIsTruthy.ts

@@ -0,0 +1,15 @@
+import {type AnyVal, type WithCondition, type WithTarget} from '../types';
+import {validateIfCondition} from './validateIfCondition';
+
+export const validateIsTruthy = (
+  $if: Partial<WithCondition> & WithTarget,
+  getValue: (target?: string) => AnyVal,
+): boolean => {
+  return validateIfCondition(
+    {
+      ...$if,
+      $nin: [false, 0],
+    },
+    getValue,
+  );
+};

package/src/forms/form-builder/index.ts

@@ -0,0 +1,5 @@
+export * from './builders';
+export * from './conditions';
+export * from './operations';
+export * from './types';
+export * from './utils';

package/src/forms/form-builder/operations/executeCustomOperationHandlers.ts

@@ -0,0 +1,18 @@
+import {type FormOperation, type FormOperationMethods, type HandlerDefinition} from '../types';
+import {validateIfConditions} from '../conditions';
+
+export const executeCustomOperationHandlers = (
+  operation: FormOperation,
+  methods: FormOperationMethods,
+  customHandlers: HandlerDefinition[] = [],
+): void => {
+  customHandlers.forEach((handler) => {
+    const matchingOperation = operation[handler.name] as FormOperation | undefined;
+
+    if (!matchingOperation || !validateIfConditions(matchingOperation, methods.getValue)) {
+      return;
+    }
+
+    handler.callback(matchingOperation, methods);
+  });
+};

package/src/forms/form-builder/operations/executeOperation.ts

@@ -0,0 +1,27 @@
+import {isOfType} from '@myparcel-dev/ts-utils';
+import {
+  type FormOperation,
+  type FormOperationMethods,
+  type FormSetPropOperation,
+  type FormSetValueOperation,
+  type HandlerDefinition,
+} from '../types';
+import {executeSetValueOperation} from './executeSetValueOperation';
+import {executeSetPropOperation} from './executeSetPropOperation';
+import {executeCustomOperationHandlers} from './executeCustomOperationHandlers';
+
+export const executeOperation = (
+  operation: FormOperation,
+  methods: FormOperationMethods,
+  customHandlers: HandlerDefinition[] = [],
+): void => {
+  if (isOfType<FormSetValueOperation>(operation, '$setValue')) {
+    executeSetValueOperation(operation, methods);
+  }
+
+  if (isOfType<FormSetPropOperation>(operation, '$setProp')) {
+    executeSetPropOperation(operation, methods);
+  }
+
+  executeCustomOperationHandlers(operation, methods, customHandlers);
+};