@projectcaluma/ember-form 11.0.0-beta.4 → 11.0.0-beta.40

package/addon/components/cf-field.js

@@ -1,5 +1,5 @@
-import { getOwner } from "@ember/application";
-import { set } from "@ember/object";
+import { action } from "@ember/object";
+import { macroCondition, isTesting } from "@embroider/macros";
 import Component from "@glimmer/component";
 import { timeout, restartableTask } from "ember-concurrency";
 
@@ -9,7 +9,7 @@ import { hasQuestionType } from "@projectcaluma/ember-core/helpers/has-question-
  * Component to display a label and input for a certain field of a document.
  *
  * ```hbs
- * {{cf-field field=someField}}
+ * <CfField @field={{this.someField}} />
  * ```
  *
  * You can disable the field by passing `disabled=true`.
@@ -18,6 +18,16 @@ import { hasQuestionType } from "@projectcaluma/ember-core/helpers/has-question-
  * @argument {Field} field The field data model to render
  */
 export default class CfFieldComponent extends Component {
+  @action
+  registerComponent() {
+    this.args.field._components.add(this);
+  }
+
+  @action
+  unregisterComponent() {
+    this.args.field._components.delete(this);
+  }
+
   get visible() {
     return (
       !this.args.field?.hidden &&
@@ -36,35 +46,49 @@ export default class CfFieldComponent extends Component {
     return !hasQuestionType(this.args.field?.question, "action-button");
   }
 
+  get hintTextVisible() {
+    return !hasQuestionType(
+      this.args.field?.question,
+      "action-button",
+      "static",
+      "form"
+    );
+  }
+
   get saveIndicatorVisible() {
     return !hasQuestionType(this.args.field?.question, "action-button");
   }
 
   /**
-   * Task to save a field. This will set the passed value to the answer and
-   * save the field to the API after a timeout off 500 milliseconds.
+   * Task to save a field. This will set the passed value to the answer and save
+   * the field to the API after a timeout of 500 milliseconds which intends to
+   * reduce the amount of saved values when changed rapidly.
    *
    * @method save
-   * @param {String|Number|String[]} value
+   * @param {String|Number|String[]} value The new value to save to the field
+   * @param {Boolean} bypassTimeout Whether to bypass the timeout
    */
   @restartableTask
-  *save(value) {
-    const { environment } =
-      getOwner(this).resolveRegistration("config:environment");
+  *save(value, bypassTimeout = false) {
+    if (typeof this.args.onSave === "function") {
+      return yield this.args.onSave(this.args.field, value);
+    }
 
     /* istanbul ignore next */
-    if (environment !== "test") {
-      yield timeout(500);
+    if (macroCondition(isTesting())) {
+      // no timeout
+    } else {
+      if (!bypassTimeout) {
+        yield timeout(500);
+      }
     }
 
-    set(this.args.field.answer, "value", value);
+    if (this.args.field.answer) {
+      this.args.field.answer.value = value;
+    }
 
     yield this.args.field.validate.perform();
 
-    try {
-      return yield this.args.field.save.unlinked().perform();
-    } catch (e) {
-      // that's ok
-    }
+    return yield this.args.field.save.unlinked().perform();
   }
 }

package/addon/components/cf-form-wrapper.hbs

@@ -1,6 +1,8 @@
 {{#let
   (component
-    (get-widget @fieldset.field.question @fieldset.form default="cf-form")
+    (ensure-safe-component
+      (get-widget @fieldset.field.question @fieldset.form default="cf-form")
+    )
   )
   as |FormComponent|
 }}
@@ -9,5 +11,6 @@
     @fieldset={{@fieldset}}
     @context={{@context}}
     @disabled={{@disabled}}
+    @onSave={{@onSave}}
   />
 {{/let}}

package/addon/components/cf-form.hbs

@@ -3,7 +3,12 @@
     {{#if (has-block)}}
       {{yield field}}
     {{else}}
-      <CfField @field={{field}} @disabled={{@disabled}} @context={{@context}} />
+      <CfField
+        @field={{field}}
+        @disabled={{@disabled}}
+        @context={{@context}}
+        @onSave={{@onSave}}
+      />
     {{/if}}
   {{/each}}
 </form>

package/addon/components/document-validity.js

@@ -1,6 +1,7 @@
 import { action } from "@ember/object";
 import Component from "@glimmer/component";
 import { restartableTask } from "ember-concurrency";
+import { cached } from "tracked-toolbox";
 
 /**
  * Component to check the validity of a document
@@ -31,12 +32,26 @@ export default class DocumentValidity extends Component {
    * @argument {Boolean} validateOnEnter
    */
 
+  @cached
   get isValid() {
-    return this.args.document.fields.every((f) => f.isValid);
+    return this.args.document.fields
+      .filter((f) => !f.hidden)
+      .every((f) => f.isValid);
   }
 
   @restartableTask
   *_validate() {
+    const saveTasks = this.args.document.fields
+      .flatMap((field) => [
+        ...[...(field._components ?? [])].map((c) => c.save.last),
+        field.save?.last,
+      ])
+      .filter(Boolean);
+
+    // Wait until all currently running save tasks in the UI and in the field
+    // itself are finished
+    yield Promise.all(saveTasks);
+
     for (const field of this.args.document.fields) {
       yield field.validate.linked().perform();
     }

package/addon/gql/fragments/field.graphql

@@ -1,8 +1,3 @@
-# We can not symlink this file so an exact copy exists in another package:
-# packages/form-builder/addon/gql/fragments/field.graphql
-#
-# When changing this file the other must also receive the same changes.
-
 fragment SimpleQuestion on Question {
   id
   slug
@@ -19,6 +14,16 @@ fragment SimpleQuestion on Question {
       value
     }
     placeholder
+    formatValidators {
+      edges {
+        node {
+          slug
+          regex
+          errorMsg
+        }
+      }
+    }
+    hintText
   }
   ... on TextareaQuestion {
     textareaMinLength: minLength
@@ -28,6 +33,16 @@ fragment SimpleQuestion on Question {
       value
     }
     placeholder
+    formatValidators {
+      edges {
+        node {
+          slug
+          regex
+          errorMsg
+        }
+      }
+    }
+    hintText
   }
   ... on IntegerQuestion {
     integerMinValue: minValue
@@ -37,6 +52,7 @@ fragment SimpleQuestion on Question {
       value
     }
     placeholder
+    hintText
   }
   ... on FloatQuestion {
     floatMinValue: minValue
@@ -46,6 +62,7 @@ fragment SimpleQuestion on Question {
       value
     }
     placeholder
+    hintText
   }
   ... on ChoiceQuestion {
     choiceOptions: options {
@@ -62,6 +79,7 @@ fragment SimpleQuestion on Question {
       id
       value
     }
+    hintText
   }
   ... on MultipleChoiceQuestion {
     multipleChoiceOptions: options {
@@ -78,18 +96,24 @@ fragment SimpleQuestion on Question {
       id
       value
     }
+    hintText
   }
   ... on DateQuestion {
     dateDefaultAnswer: defaultAnswer {
       id
       value
     }
+    hintText
   }
   ... on StaticQuestion {
     staticContent
   }
   ... on CalculatedFloatQuestion {
     calcExpression
+    hintText
+  }
+  ... on FilesQuestion {
+    hintText
   }
   ... on ActionButtonQuestion {
     action
@@ -112,6 +136,7 @@ fragment FieldTableQuestion on Question {
         }
       }
     }
+    hintText
     tableDefaultAnswer: defaultAnswer {
       id
       value {
@@ -204,8 +229,8 @@ fragment SimpleAnswer on Answer {
   ... on ListAnswer {
     listValue: value
   }
-  ... on FileAnswer {
-    fileValue: value {
+  ... on FilesAnswer {
+    filesValue: value {
       id
       uploadUrl
       downloadUrl

package/addon/gql/mutations/save-document-files-answer.graphql

@@ -0,0 +1,9 @@
+#import * from '../fragments/field.graphql'
+
+mutation SaveDocumentFilesAnswer($input: SaveDocumentFilesAnswerInput!) {
+  saveDocumentFilesAnswer(input: $input) {
+    answer {
+      ...FieldAnswer
+    }
+  }
+}

package/addon/gql/queries/document-forms.graphql

@@ -1,7 +1,7 @@
 #import FieldQuestion, FieldTableQuestion, SimpleQuestion from '../fragments/field.graphql'
 
 query DocumentForms($slug: String!) {
-  allForms(filter: [{ slug: $slug }]) {
+  allForms(filter: [{ slugs: [$slug] }]) {
     edges {
       node {
         id

package/addon/gql/queries/dynamic-options.graphql

@@ -1,11 +1,11 @@
-query DynamicOptions($question: String!) {
-  allQuestions(filter: [{ slug: $question }], first: 1) {
+query DynamicOptions($question: String!, $context: JSONString) {
+  allQuestions(filter: [{ slugs: [$question] }], first: 1) {
     edges {
       node {
         id
         slug
         ... on DynamicChoiceQuestion {
-          dynamicChoiceOptions: options {
+          dynamicChoiceOptions: options(context: $context) {
             edges {
               node {
                 slug
@@ -15,7 +15,7 @@ query DynamicOptions($question: String!) {
           }
         }
         ... on DynamicMultipleChoiceQuestion {
-          dynamicMultipleChoiceOptions: options {
+          dynamicMultipleChoiceOptions: options(context: $context) {
             edges {
               node {
                 slug

package/addon/gql/queries/{fileanswer-info.graphql → filesanswer-info.graphql}

@@ -1,8 +1,8 @@
-query FileAnswerInfo($id: ID!) {
+query FilesAnswerInfo($id: ID!) {
   node(id: $id) {
-    id
-    ... on FileAnswer {
-      fileValue: value {
+    ... on FilesAnswer {
+      id
+      value {
         id
         uploadUrl
         downloadUrl

package/addon/helpers/format-graphql-error.js

@@ -0,0 +1,21 @@
+import { helper } from "@ember/component/helper";
+
+export function formatGraphqlErrorObject(error) {
+  try {
+    const path = error.path.join(".");
+    const { line, column } = error.locations[error.locations.length - 1];
+
+    return `${path}:${line}:${column}: ${error.message}`;
+  } catch (e) {
+    return null;
+  }
+}
+
+export function formatGraphqlError(error) {
+  return (
+    error?.errors?.map(formatGraphqlErrorObject).filter(Boolean).join("\n") ??
+    ""
+  );
+}
+
+export default helper(([error]) => formatGraphqlError(error));

package/addon/helpers/get-widget.js

@@ -1,6 +1,15 @@
 import Helper from "@ember/component/helper";
 import { warn } from "@ember/debug";
 import { inject as service } from "@ember/service";
+import { ensureSafeComponent } from "@embroider/util";
+
+import InputComponent from "@projectcaluma/ember-form/components/cf-field/input";
+import FormComponent from "@projectcaluma/ember-form/components/cf-form";
+
+const DEFAULT_WIDGETS = {
+  "cf-field/input": InputComponent,
+  "cf-form": FormComponent,
+};
 
 /**
  * Helper for getting the right widget.
@@ -42,9 +51,14 @@ export default class GetWidgetHelper extends Helper {
         { id: "ember-caluma.unregistered-override" }
       );
 
-      if (override) return widget;
+      if (override) {
+        return ensureSafeComponent(
+          override.componentClass ?? override.component,
+          this
+        );
+      }
     }
 
-    return defaultWidget;
+    return ensureSafeComponent(DEFAULT_WIDGETS[defaultWidget], this);
   }
 }

package/addon/instance-initializers/form-widget-overrides.js

@@ -0,0 +1,52 @@
+import { setOwner } from "@ember/application";
+import { inject as service } from "@ember/service";
+
+import HiddenComponent from "@projectcaluma/ember-form/components/cf-field/input/hidden";
+import PowerSelectComponent from "@projectcaluma/ember-form/components/cf-field/input/powerselect";
+
+class HiddenOverride {
+  @service intl;
+
+  get label() {
+    return this.intl.t("caluma.form-builder.question.widgetOverrides.hidden");
+  }
+
+  component = "cf-field/input/hidden";
+  componentClass = HiddenComponent;
+}
+
+class PowerSelectOverride {
+  @service intl;
+
+  get label() {
+    return this.intl.t(
+      "caluma.form-builder.question.widgetOverrides.powerselect"
+    );
+  }
+
+  component = "cf-field/input/powerselect";
+  componentClass = PowerSelectComponent;
+  types = [
+    "ChoiceQuestion",
+    "MultipleChoiceQuestion",
+    "DynamicChoiceQuestion",
+    "DynamicMultipleChoiceQuestion",
+  ];
+}
+
+export function initialize(appInstance) {
+  const options = appInstance.lookup("service:caluma-options");
+
+  const hiddenOverride = new HiddenOverride();
+  const powerSelectOverride = new PowerSelectOverride();
+
+  setOwner(hiddenOverride, appInstance);
+  setOwner(powerSelectOverride, appInstance);
+
+  options.registerComponentOverride(hiddenOverride);
+  options.registerComponentOverride(powerSelectOverride);
+}
+
+export default {
+  initialize,
+};

package/addon/lib/document.js

@@ -18,7 +18,7 @@ const sum = (nums) => nums.reduce((num, base) => base + num, 0);
  * @class Document
  */
 export default class Document extends Base {
-  constructor({ raw, parentDocument, ...args }) {
+  constructor({ raw, parentDocument, dataSourceContext, ...args }) {
     assert(
       "A graphql document `raw` must be passed",
       raw?.__typename === "Document"
@@ -27,6 +27,7 @@ export default class Document extends Base {
     super({ raw, ...args });
 
     this.parentDocument = parentDocument;
+    this.dataSourceContext = dataSourceContext;
 
     this.pushIntoStore();
 
@@ -83,6 +84,13 @@ export default class Document extends Base {
    */
   fieldsets = [];
 
+  /**
+   * Context object for data sources
+   *
+   * @property {Object} dataSourceContext
+   */
+  dataSourceContext = null;
+
   /**
    * The primary key of the document.
    *