Add maalgruppe and combined component

Author: enstulen

packages/shared-components/src/components/nav-form/NavForm.jsx

@@ -151,7 +151,7 @@ const NavForm = (props) => {
         }
       });
     }
-    if (formio && !props.submission?.data && prefillData) {
+    if (formio && prefillData) {
       formio.form = navFormUtils.prefillForm(formio.form, prefillData);
     }
   }, [props.submission, formio, prefillData]);

packages/shared-components/src/formio/components/core/activities/Activities.tsx

@@ -20,7 +20,7 @@ class Activities extends BaseComponent {
     return BaseComponent.schema({
       label: 'Aktiviteter',
       type: 'activities',
-      key: 'activities',
+      key: 'aktivitet',
       input: true,
       hideLabel: true,
     });
@@ -41,7 +41,7 @@ class Activities extends BaseComponent {
     } else {
       const activity = this.activities?.find((x) => x.aktivitetId === value);
       if (activity) {
-        super.updateValue(activity, opts);
+        super.updateValue(this.mapActivity(activity), opts);
       }
     }
     this.rerender();

packages/shared-components/src/formio/components/extensions/maalgruppe/Maalgruppe.builder.ts

@@ -0,0 +1,16 @@
+import Maalgruppe from './Maalgruppe';
+
+const maalgruppeBuilder = () => {
+  const schema = Maalgruppe.schema();
+  return {
+    title: schema.label,
+    schema: {
+      ...schema,
+      validateOn: 'blur',
+      calculateValue: 'value = instance.calculateMaalgruppeValue()',
+      prefillKey: 'sokerMaalgruppe',
+    },
+  };
+};
+
+export default maalgruppeBuilder;

packages/shared-components/src/formio/components/extensions/maalgruppe/Maalgruppe.form.ts

@@ -0,0 +1,24 @@
+import editFormApi from '../../base/editForm/api';
+import editFormConditional from '../../base/editForm/conditional';
+import editFormData from '../../base/editForm/data';
+import editFormTabs from '../../base/editForm/editFormTabs';
+
+const maalgruppeForm = () => {
+  const { api, conditional, createTabs, data } = editFormTabs;
+
+  // prettier-ignore
+  return createTabs(
+    api([
+      editFormApi.key(),
+    ]),
+    data([
+      editFormData.calculateValue()
+    ]),
+    conditional([
+      editFormConditional.simpleConditional(),
+      editFormConditional.advancedConditional(),
+    ]),
+  );
+};
+
+export default maalgruppeForm;

packages/shared-components/src/formio/components/extensions/maalgruppe/Maalgruppe.test.ts

@@ -0,0 +1,48 @@
+import Maalgruppe from './Maalgruppe';
+
+describe('calculateMaalgruppeValue function', () => {
+  let maalgruppe;
+
+  beforeEach(() => {
+    maalgruppe = new Maalgruppe();
+  });
+
+  it('should return maalgruppe if it exists and is not empty', () => {
+    const testData = {
+      data: {
+        aktivitet: {
+          maalgruppe: 'someValue',
+        },
+      },
+      component: {
+        defaultValue: 'defaultValue',
+      },
+    };
+    const result = maalgruppe.calculateMaalgruppeValue.call(testData);
+    expect(result).toEqual('someValue');
+  });
+
+  it('should return defaultValue if maalgruppe is not set', () => {
+    const testData = {
+      data: {
+        aktivitet: {},
+      },
+      component: {
+        defaultValue: 'defaultValue',
+      },
+    };
+    const result = maalgruppe.calculateMaalgruppeValue.call(testData);
+    expect(result).toEqual('defaultValue');
+  });
+
+  it('should return ANNET if neither maalgruppe nor defaultValue is set', () => {
+    const testData = {
+      data: {
+        aktivitet: {},
+      },
+      component: {},
+    };
+    const result = maalgruppe.calculateMaalgruppeValue.call(testData);
+    expect(result).toEqual('ANNET');
+  });
+});

packages/shared-components/src/formio/components/extensions/maalgruppe/Maalgruppe.ts

@@ -0,0 +1,41 @@
+import FormioTextfield from 'formiojs/components/textfield/TextField';
+import maalgruppeBuilder from './Maalgruppe.builder';
+import maalgruppeForm from './Maalgruppe.form';
+
+class Maalgruppe extends FormioTextfield {
+  data: any;
+  component: any;
+
+  static schema() {
+    return FormioTextfield.schema({
+      label: 'Målgruppe',
+      type: 'maalgruppe',
+      key: 'maalgruppe',
+      input: true,
+      hideLabel: true,
+      customConditional: 'show = false',
+      clearOnHide: false,
+    });
+  }
+
+  static editForm() {
+    return maalgruppeForm();
+  }
+
+  static get builderInfo() {
+    return maalgruppeBuilder();
+  }
+
+  calculateMaalgruppeValue() {
+    if (!!this.data.aktivitet?.maalgruppe && this.data.aktivitet.maalgruppe !== '') {
+      return this.data.aktivitet?.maalgruppe;
+    } else if (!!this.component.defaultValue && this.component.defaultValue !== '') {
+      return this.component.defaultValue;
+    } else {
+      // PR: Should this return empty string or ANNET?
+      return 'ANNET';
+    }
+  }
+}
+
+export default Maalgruppe;

packages/shared-components/src/formio/components/groups/activitiesWithMaalgruppe/activitiesWithMaalgruppe.builder.ts

@@ -0,0 +1,15 @@
+import activitiesBuilder from '../../core/activities/Activities.builder';
+import maalgruppeBuilder from '../../extensions/maalgruppe/Maalgruppe.builder';
+
+const activitiesWithMaalgruppeBuilder = () => {
+  return {
+    title: 'Aktiviteter og målgruppe',
+    schema: {
+      components: [activitiesBuilder().schema, maalgruppeBuilder().schema],
+      type: 'container',
+      hideLabel: true,
+    },
+  };
+};
+
+export default activitiesWithMaalgruppeBuilder;

packages/shared-components/src/formio/components/index.ts

@@ -22,6 +22,7 @@ import CurrencySelect from './extensions/currency-select/CurrencySelect';
 import Currency from './extensions/currency/Currency';
 import Email from './extensions/email/Email';
 import IBAN from './extensions/iban/IBAN';
+import Maalgruppe from './extensions/maalgruppe/Maalgruppe';
 import NationalIdentityNumber from './extensions/national-identity-number/NationalIdentityNumber';
 import Number from './extensions/number/Number';
 import OrganizationNumber from './extensions/organization-number/OrganizationNumber';
@@ -30,6 +31,7 @@ import PhoneNumber from './extensions/phone-number/PhoneNumber';
 const customComponents = {
   container: Container,
   activities: Activities,
+  maalgruppe: Maalgruppe,
   alertstripe: Alert,
   fnrfield: NationalIdentityNumber,
   orgNr: OrganizationNumber,

packages/shared-components/src/formio/menu-group/otherGroup.ts

@@ -1,9 +1,9 @@
-import activitiesBuilder from '../components/core/activities/Activities.builder';
+import activitiesWithMaalgruppeBuilder from '../components/groups/activitiesWithMaalgruppe/activitiesWithMaalgruppe.builder';
 
 const panelsGroup = {
   title: 'Andre',
   components: {
-    activities: activitiesBuilder(),
+    activitiesWithMaalgruppe: activitiesWithMaalgruppeBuilder(),
   },
 };