@myparcel-dev/pdk-admin 1.13.0

package/src/forms/form-builder/operations/executeOperations.spec.ts

@@ -0,0 +1,63 @@
+import {ref} from 'vue';
+import {afterEach, describe, expect, it, vi} from 'vitest';
+import {mount} from '@vue/test-utils';
+import MagicForm, {defineForm, useFormBuilder} from '@myparcel-dev/vue-form-builder';
+import {buildAfterUpdate} from '../builders';
+
+describe('executeOperations', () => {
+  afterEach(() => {
+    useFormBuilder().forms.value = {};
+  });
+
+  it('executes custom operations', async () => {
+    expect.assertions(3);
+    const method = vi.fn();
+
+    const form = defineForm('test', {});
+
+    await form.addElement({
+      name: 'test',
+      component: 'input',
+      ref: ref(''),
+      afterUpdate: buildAfterUpdate(
+        [
+          {
+            $custom: {$value: 'hello'},
+          },
+          {
+            $custom: {
+              $value: 'hello',
+              $if: [
+                {
+                  $eq: '123',
+                },
+              ],
+            },
+          },
+        ],
+        '',
+        [
+          {
+            name: '$custom',
+            callback: (operation) => {
+              method(operation);
+            },
+          },
+        ],
+      ),
+    });
+
+    const wrapper = mount(MagicForm, {props: {form}});
+
+    expect(method).not.toHaveBeenCalled();
+
+    const testField = form.getField('test');
+    // Trigger afterUpdate via hooks manager (new vue-form-builder API)
+    await testField?.hooks.execute('afterUpdate', testField, 'test', '');
+
+    await wrapper.vm.$nextTick();
+
+    expect(method).toHaveBeenCalledTimes(1);
+    expect(method).toHaveBeenCalledWith({$value: 'hello'});
+  });
+});

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

@@ -0,0 +1,10 @@
+import {type FormOperation, type FormOperationMethods, type HandlerDefinition} from '../types';
+import {executeOperation} from './executeOperation';
+
+export const executeOperations = (
+  operations: FormOperation[],
+  methods: FormOperationMethods,
+  customHandlers: HandlerDefinition[] = [],
+): void => {
+  operations.forEach((operation) => executeOperation(operation, methods, customHandlers));
+};

package/src/forms/form-builder/operations/executeSetPropOperation.spec.ts

@@ -0,0 +1,164 @@
+import {ref} from 'vue';
+import {afterEach, describe, expect, it} from 'vitest';
+import {mount} from '@vue/test-utils';
+import MagicForm, {defineForm, useFormBuilder} from '@myparcel-dev/vue-form-builder';
+import {type FormSetPropOperation, type PropVal} from '../types';
+import {buildAfterUpdate} from '../builders';
+
+interface TestInput {
+  name: string;
+  input: FormSetPropOperation[];
+  result: Record<string, Record<string, PropVal>>;
+}
+
+const datasets = [
+  {
+    name: 'set prop',
+    input: [
+      {
+        $setProp: {
+          $prop: 'options',
+          $value: 'hello',
+        },
+      },
+    ],
+    result: {
+      aardbei: {
+        options: 'hello',
+      },
+      banaan: {
+        subtext: 'world',
+      },
+      appel: {},
+    },
+  },
+  {
+    name: 'set prop on target',
+    input: [
+      {
+        $setProp: {
+          $target: 'banaan',
+          $prop: 'subtext',
+          $value: 'hello',
+        },
+      },
+    ],
+    result: {
+      aardbei: {},
+      banaan: {
+        subtext: 'hello',
+      },
+      appel: {},
+    },
+  },
+  {
+    name: 'set prop on target with condition',
+    input: [
+      {
+        $setProp: {
+          $target: 'appel',
+          $prop: 'options',
+          $value: [
+            {
+              value: 'hello',
+              label: 'Hello',
+            },
+          ],
+          $if: [
+            {
+              $target: 'banaan',
+              $ne: 'hi',
+            },
+          ],
+        },
+      },
+    ],
+    result: {
+      aardbei: {},
+      banaan: {
+        subtext: 'world',
+      },
+      appel: {
+        options: [
+          {
+            value: 'hello',
+            label: 'Hello',
+          },
+        ],
+      },
+    },
+  },
+  {
+    name: 'set prop on target with failing condition',
+    input: [
+      {
+        $setProp: {
+          $target: 'banaan',
+          $prop: 'subtext',
+          $value: 'hi',
+          $if: [
+            {
+              $target: 'aardbei',
+              $in: ['hi', 'hello'],
+            },
+          ],
+        },
+      },
+    ],
+    result: {
+      aardbei: {},
+      banaan: {
+        subtext: 'world',
+      },
+      appel: {},
+    },
+  },
+] satisfies TestInput[];
+
+describe('executeSetPropOperation', () => {
+  afterEach(() => {
+    useFormBuilder().forms.value = {};
+  });
+
+  it.each(datasets)('should set value with $name', async ({input, result}) => {
+    expect.assertions(1);
+
+    const form = defineForm('test', {});
+
+    await form.addElement({
+      name: 'aardbei',
+      component: 'input',
+      ref: ref(''),
+      afterUpdate: buildAfterUpdate(input, ''),
+    });
+    await form.addElement({
+      name: 'banaan',
+      component: 'input',
+      ref: ref(''),
+      props: {
+        subtext: 'world',
+      },
+    });
+    await form.addElement({
+      name: 'appel',
+      component: 'input',
+      ref: ref(''),
+    });
+
+    const wrapper = mount(MagicForm, {props: {form}});
+
+    form.setValue('aardbei', 'test');
+
+    const testField = form.getField('aardbei');
+    // Trigger afterUpdate via hooks manager (new vue-form-builder API)
+    await testField?.hooks.execute('afterUpdate', testField, 'test', '');
+
+    await wrapper.vm.$nextTick();
+
+    expect({
+      aardbei: form.getField('aardbei')?.props,
+      banaan: form.getField('banaan')?.props,
+      appel: form.getField('appel')?.props,
+    }).toEqual(result);
+  });
+});

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

@@ -0,0 +1,15 @@
+import {type FormOperationMethods, type FormSetPropOperation} from '../types';
+import {validateIfConditions} from '../conditions';
+
+export const executeSetPropOperation = (
+  operation: FormSetPropOperation,
+  {getValue, setProp}: FormOperationMethods,
+): void => {
+  if (!validateIfConditions(operation.$setProp, getValue)) {
+    return;
+  }
+
+  const {$prop, $value, $target} = operation.$setProp;
+
+  setProp($prop, $value, $target);
+};

package/src/forms/form-builder/operations/executeSetValueOperation.spec.ts

@@ -0,0 +1,203 @@
+import {ref} from 'vue';
+import {afterEach, describe, expect, it} from 'vitest';
+import {flushPromises, mount} from '@vue/test-utils';
+import MagicForm, {defineForm, useFormBuilder} from '@myparcel-dev/vue-form-builder';
+import {type AnyVal, type FormSetValueOperation} from '../types';
+import {buildAfterUpdate} from '../builders';
+
+interface TestInput {
+  name: string;
+  input: FormSetValueOperation[];
+  result: Record<string, AnyVal>;
+}
+
+const datasets = [
+  {
+    name: 'simple set',
+    input: [
+      {
+        $setValue: {
+          $value: 'hello',
+        },
+      },
+    ],
+    result: {
+      test: 'hello',
+      test2: '',
+      test3: '',
+    },
+  },
+  {
+    name: 'simple set with target',
+    input: [
+      {
+        $setValue: {
+          $value: 'hello',
+        },
+      },
+      {
+        $setValue: {
+          $value: 'world',
+          $target: 'test2',
+        },
+      },
+    ],
+    result: {
+      test: 'hello',
+      test2: 'world',
+      test3: '',
+    },
+  },
+  {
+    name: 'simple set with target and if',
+    input: [
+      {
+        $setValue: {
+          $value: 'bye',
+        },
+      },
+      {
+        $setValue: {
+          $value: 'see ya',
+          $target: 'test2',
+          $if: [{$eq: 'hello'}],
+        },
+      },
+      {
+        $setValue: {
+          $value: 'hello',
+          $target: 'test2',
+          $if: [{$eq: 'bye'}],
+        },
+      },
+    ],
+    result: {
+      test: 'bye',
+      test2: 'hello',
+      test3: '',
+    },
+  },
+  {
+    name: 'simple set with target and if not',
+    input: [
+      {
+        $setValue: {
+          $value: 10,
+        },
+      },
+      {
+        $setValue: {
+          $value: 20,
+          $target: 'test2',
+          $if: [
+            {
+              $target: 'test',
+              $in: [10, 20, 30],
+            },
+          ],
+        },
+      },
+    ],
+    result: {
+      test: 10,
+      test2: 20,
+      test3: '',
+    },
+  },
+  {
+    name: 'complex and/or conditions',
+    input: [
+      {
+        $setValue: {
+          $value: 10,
+        },
+      },
+      {
+        $setValue: {
+          $value: 20,
+          $target: 'test2',
+          $if: [
+            {
+              $and: [
+                {
+                  $target: 'test',
+                  $gt: 5,
+                },
+                {
+                  $target: 'test',
+                  $lt: 30,
+                },
+              ],
+            },
+          ],
+        },
+      },
+      {
+        $setValue: {
+          $value: 45,
+          $target: 'test3',
+          $if: [
+            {
+              $or: [
+                {
+                  $target: 'test2',
+                  $gt: 50,
+                },
+                {
+                  $target: 'test2',
+                  $lt: 30,
+                },
+              ],
+            },
+          ],
+        },
+      },
+    ],
+    result: {
+      test: 10,
+      test2: 20,
+      test3: 45,
+    },
+  },
+] satisfies TestInput[];
+
+describe('executeSetValueOperation', () => {
+  afterEach(() => {
+    useFormBuilder().forms.value = {};
+  });
+
+  it.each(datasets)('should set value with $name', async ({input, result}) => {
+    expect.assertions(1);
+
+    const form = defineForm('test', {});
+
+    await form.addElement({
+      name: 'test',
+      component: 'input',
+      ref: ref(''),
+      afterUpdate: buildAfterUpdate(input, ''),
+    });
+    await form.addElement({
+      name: 'test2',
+      component: 'input',
+      ref: ref(''),
+    });
+    await form.addElement({
+      name: 'test3',
+      component: 'input',
+      ref: ref(''),
+    });
+
+    const wrapper = mount(MagicForm, {props: {form}});
+
+    form.setValue('test', 'test');
+
+    const testField = form.getField('test');
+    // Trigger afterUpdate via hooks manager (new vue-form-builder API)
+    await testField?.hooks.execute('afterUpdate', testField, 'test', '');
+
+    await wrapper.vm.$nextTick();
+
+    expect(form.values).toEqual(result);
+  });
+});

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

@@ -0,0 +1,15 @@
+import {type FormOperationMethods, type FormSetValueOperation} from '../types';
+import {validateIfConditions} from '../conditions';
+
+export const executeSetValueOperation = (
+  operation: FormSetValueOperation,
+  {getValue, setValue}: FormOperationMethods,
+): void => {
+  if (!validateIfConditions(operation.$setValue, getValue)) {
+    return;
+  }
+
+  const {$value, $target} = operation.$setValue;
+
+  setValue($value, $target);
+};

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

@@ -0,0 +1,5 @@
+export * from './executeOperation';
+export * from './executeOperations';
+export * from './executeSetValueOperation';
+export * from './parseBuilders';
+export {executeCustomOperationHandlers} from './executeCustomOperationHandlers';

package/src/forms/form-builder/operations/parseBuilders.spec.ts

@@ -0,0 +1,70 @@
+import {afterEach, describe, expect, it} from 'vitest';
+import {type FieldConfiguration, useFormBuilder} from '@myparcel-dev/vue-form-builder';
+import {type FormBuilder} from '../types';
+import {parseBuilders} from './parseBuilders';
+
+interface TestInput {
+  name: string;
+  input: FormBuilder[];
+  result: Partial<FieldConfiguration>;
+}
+
+const datasets: TestInput[] = [
+  {
+    name: '$afterUpdate',
+    input: [{$afterUpdate: [{}]}],
+    result: {
+      afterUpdate: expect.any(Function),
+    },
+  },
+  {
+    name: '$visibleWhen',
+    input: [{$visibleWhen: {}}],
+    result: {
+      visibleWhen: expect.any(Function),
+    },
+  },
+  {
+    name: '$disabledWhen',
+    input: [{$disabledWhen: {}}],
+    result: {
+      disabledWhen: expect.any(Function),
+    },
+  },
+  {
+    name: '$readOnlyWhen',
+    input: [{$readOnlyWhen: {}}],
+    result: {
+      readOnlyWhen: expect.any(Function),
+    },
+  },
+  {
+    name: 'multiple',
+    input: [
+      {
+        $visibleWhen: {},
+        $afterUpdate: [{}],
+        $disabledWhen: {},
+        $readOnlyWhen: {},
+      },
+    ],
+    result: {
+      afterUpdate: expect.any(Function),
+      disabledWhen: expect.any(Function),
+      readOnlyWhen: expect.any(Function),
+      visibleWhen: expect.any(Function),
+    },
+  },
+];
+
+describe('parseBuilders', () => {
+  afterEach(() => {
+    useFormBuilder().forms.value = {};
+  });
+
+  it.each(datasets)('parses builder $name', ({input, result}) => {
+    const parsed = parseBuilders(input, '');
+
+    expect(parsed).toEqual(result);
+  });
+});

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

@@ -0,0 +1,39 @@
+import {type InteractiveElementConfiguration} from '@myparcel-dev/vue-form-builder';
+import {isOfType} from '@myparcel-dev/ts-utils';
+import {
+  type FormAfterUpdateBuilder,
+  type FormBuilder,
+  type FormDisabledWhenBuilder,
+  type FormReadOnlyWhenBuilder,
+  type FormVisibleWhenBuilder,
+  type HandlerDefinition,
+} from '../types';
+import {buildAfterUpdate, buildFormStateWatcher} from '../builders';
+
+export const parseBuilders = (
+  builders: FormBuilder[],
+  prefix: string,
+  customHandlers: HandlerDefinition[] = [],
+): Partial<InteractiveElementConfiguration> => {
+  const config: Partial<InteractiveElementConfiguration> = {};
+
+  builders?.forEach((builder) => {
+    if (isOfType<FormVisibleWhenBuilder>(builder, '$visibleWhen')) {
+      config.visibleWhen = buildFormStateWatcher(builder.$visibleWhen, prefix);
+    }
+
+    if (isOfType<FormDisabledWhenBuilder>(builder, '$disabledWhen')) {
+      config.disabledWhen = buildFormStateWatcher(builder.$disabledWhen, prefix);
+    }
+
+    if (isOfType<FormReadOnlyWhenBuilder>(builder, '$readOnlyWhen')) {
+      config.readOnlyWhen = buildFormStateWatcher(builder.$readOnlyWhen, prefix);
+    }
+
+    if (isOfType<FormAfterUpdateBuilder>(builder, '$afterUpdate')) {
+      config.afterUpdate = buildAfterUpdate(builder.$afterUpdate, prefix, customHandlers);
+    }
+  });
+
+  return config;
+};

package/src/forms/form-builder/types/FormCondition.types.ts

@@ -0,0 +1,57 @@
+import {type AnyVal, type WithTarget} from './common.types';
+
+export interface EqualMatcher {
+  $eq: AnyVal;
+}
+
+export interface GreaterThanMatcher {
+  $gt: number;
+}
+
+export interface GreaterThanOrEqualMatcher {
+  $gte: number;
+}
+
+export interface InMatcher {
+  $in: AnyVal[];
+}
+
+export interface LessThanMatcher {
+  $lt: number;
+}
+
+export interface LessThanOrEqualMatcher {
+  $lte: number;
+}
+
+export interface NotEqualMatcher {
+  $ne: AnyVal;
+}
+
+export interface NotInMatcher {
+  $nin: AnyVal[];
+}
+
+export type Matcher =
+  | EqualMatcher
+  | GreaterThanMatcher
+  | GreaterThanOrEqualMatcher
+  | InMatcher
+  | LessThanMatcher
+  | LessThanOrEqualMatcher
+  | NotEqualMatcher
+  | NotInMatcher;
+
+export type SingleIfMatcher = Partial<WithTarget> & Partial<Matcher>;
+
+export interface IfOrMatcher {
+  $or: SingleIfMatcher[];
+}
+
+export interface IfAndMatcher {
+  $and: SingleIfMatcher[];
+}
+
+export interface WithCondition {
+  $if: (SingleIfMatcher | IfOrMatcher | IfAndMatcher)[];
+}

package/src/forms/form-builder/types/FormOperations.types.ts

@@ -0,0 +1,21 @@
+import {type FormOperationMethods, type PropVal, type WithTarget, type WithValue} from './common.types';
+import {type WithCondition} from './FormCondition.types';
+
+export type FormSetValueOperation = {
+  $setValue: WithValue & Partial<WithCondition> & Partial<WithTarget>;
+};
+
+export type FormSetPropOperation = {
+  $setProp: {
+    $prop: string;
+  } & WithValue<PropVal> &
+    Partial<WithCondition> &
+    Partial<WithTarget>;
+};
+
+type HandlerCallback<T extends string> = (operation: Record<T, unknown>, methods: FormOperationMethods) => void;
+
+export type HandlerDefinition<T extends string = string> = {
+  name: T;
+  callback: HandlerCallback<T>;
+};

package/src/forms/form-builder/types/SubOperationBuilder.types.ts

@@ -0,0 +1,18 @@
+import {type FormOperation, type WithTarget} from './common.types';
+import {type WithCondition} from './FormCondition.types';
+
+export type WhenArguments = Partial<WithCondition> & Partial<WithTarget>;
+
+type FormWhenBuilder<T extends string = string> = {
+  [K in T]: WhenArguments;
+};
+
+export type FormVisibleWhenBuilder = FormWhenBuilder<'$visibleWhen'>;
+
+export type FormDisabledWhenBuilder = FormWhenBuilder<'$disabledWhen'>;
+
+export type FormReadOnlyWhenBuilder = FormWhenBuilder<'$readOnlyWhen'>;
+
+export interface FormAfterUpdateBuilder {
+  $afterUpdate: FormOperation[];
+}