@projectcaluma/ember-form 11.0.0-beta.9 → 11.0.0

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
@@ -28,6 +23,7 @@ fragment SimpleQuestion on Question {
         }
       }
     }
+    hintText
   }
   ... on TextareaQuestion {
     textareaMinLength: minLength
@@ -46,6 +42,7 @@ fragment SimpleQuestion on Question {
         }
       }
     }
+    hintText
   }
   ... on IntegerQuestion {
     integerMinValue: minValue
@@ -55,6 +52,7 @@ fragment SimpleQuestion on Question {
       value
     }
     placeholder
+    hintText
   }
   ... on FloatQuestion {
     floatMinValue: minValue
@@ -64,6 +62,7 @@ fragment SimpleQuestion on Question {
       value
     }
     placeholder
+    hintText
   }
   ... on ChoiceQuestion {
     choiceOptions: options {
@@ -80,6 +79,7 @@ fragment SimpleQuestion on Question {
       id
       value
     }
+    hintText
   }
   ... on MultipleChoiceQuestion {
     multipleChoiceOptions: options {
@@ -96,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
@@ -130,6 +136,7 @@ fragment FieldTableQuestion on Question {
         }
       }
     }
+    hintText
     tableDefaultAnswer: defaultAnswer {
       id
       value {
@@ -222,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.
    *

package/addon/lib/field.js

@@ -13,7 +13,7 @@ import { cached } from "tracked-toolbox";
 
 import { decodeId } from "@projectcaluma/ember-core/helpers/decode-id";
 import saveDocumentDateAnswerMutation from "@projectcaluma/ember-form/gql/mutations/save-document-date-answer.graphql";
-import saveDocumentFileAnswerMutation from "@projectcaluma/ember-form/gql/mutations/save-document-file-answer.graphql";
+import saveDocumentFilesAnswerMutation from "@projectcaluma/ember-form/gql/mutations/save-document-files-answer.graphql";
 import saveDocumentFloatAnswerMutation from "@projectcaluma/ember-form/gql/mutations/save-document-float-answer.graphql";
 import saveDocumentIntegerAnswerMutation from "@projectcaluma/ember-form/gql/mutations/save-document-integer-answer.graphql";
 import saveDocumentListAnswerMutation from "@projectcaluma/ember-form/gql/mutations/save-document-list-answer.graphql";
@@ -34,7 +34,7 @@ export const TYPE_MAP = {
   DynamicChoiceQuestion: "StringAnswer",
   TableQuestion: "TableAnswer",
   FormQuestion: null,
-  FileQuestion: "FileAnswer",
+  FilesQuestion: "FilesAnswer",
   StaticQuestion: null,
   DateQuestion: "DateAnswer",
 };
@@ -44,7 +44,7 @@ const MUTATION_MAP = {
   IntegerAnswer: saveDocumentIntegerAnswerMutation,
   StringAnswer: saveDocumentStringAnswerMutation,
   ListAnswer: saveDocumentListAnswerMutation,
-  FileAnswer: saveDocumentFileAnswerMutation,
+  FilesAnswer: saveDocumentFilesAnswerMutation,
   DateAnswer: saveDocumentDateAnswerMutation,
   TableAnswer: saveDocumentTableAnswerMutation,
 };
@@ -83,18 +83,14 @@ export default class Field extends Base {
   _createQuestion() {
     const owner = getOwner(this);
 
-    const question =
+    this.question =
       this.calumaStore.find(`Question:${this.raw.question.slug}`) ||
       new (owner.factoryFor("caluma-model:question").class)({
         raw: this.raw.question,
         owner,
       });
 
-    if (question.isDynamic) {
-      question.loadDynamicOptions.perform();
-    }
-
-    this.question = question;
+    this.question.dataSourceContext = this.document.dataSourceContext;
   }
 
   _createAnswer() {
@@ -551,18 +547,24 @@ export default class Field extends Base {
 
     const type = this.answer.raw.__typename;
 
+    const value = this.answer.serializedValue;
+    const input = {
+      question: this.question.slug,
+      document: this.document.uuid,
+    };
+
+    if (value !== null) {
+      input.value = value;
+    }
+
+    if (this.document.dataSourceContext) {
+      input.dataSourceContext = JSON.stringify(this.document.dataSourceContext);
+    }
+
     const response = yield this.apollo.mutate(
       {
         mutation: MUTATION_MAP[type],
-        variables: {
-          input: {
-            question: this.question.slug,
-            document: this.document.uuid,
-            ...(this.answer.serializedValue !== null
-              ? { value: this.answer.serializedValue }
-              : {}),
-          },
-        },
+        variables: { input },
       },
       `saveDocument${type}.answer`
     );
@@ -588,10 +590,10 @@ export default class Field extends Base {
   @cached
   get errors() {
     return this._errors.map(({ type, context, value }) => {
-      return this.intl.t(
-        `caluma.form.validation.${type}`,
-        Object.assign({}, context, { value })
-      );
+      return this.intl.t(`caluma.form.validation.${type}`, {
+        ...context,
+        value,
+      });
     });
   }
 
@@ -748,10 +750,7 @@ export default class Field extends Base {
    * @private
    */
   _validateChoiceQuestion() {
-    return validate("inclusion", this.answer.value, {
-      allowBlank: true,
-      in: (this.options || []).map(({ slug }) => slug),
-    });
+    return this._validateOption(this.answer.value, true);
   }
 
   /**
@@ -763,15 +762,9 @@ export default class Field extends Base {
    * @private
    */
   _validateMultipleChoiceQuestion() {
-    const value = this.answer.value;
-    if (!value) {
-      return true;
-    }
-    return value.map((value) =>
-      validate("inclusion", value, {
-        in: (this.options || []).map(({ slug }) => slug),
-      })
-    );
+    return this.answer.value
+      ? this.answer.value.map((value) => this._validateOption(value))
+      : true;
   }
 
   /**
@@ -783,11 +776,9 @@ export default class Field extends Base {
    * @private
    */
   async _validateDynamicChoiceQuestion() {
-    await this.question.loadDynamicOptions.perform();
+    await this.question.dynamicOptions;
 
-    return validate("inclusion", this.answer.value, {
-      in: (this.options || []).map(({ slug }) => slug),
-    });
+    return this._validateOption(this.answer.value, true);
   }
 
   /**
@@ -805,23 +796,35 @@ export default class Field extends Base {
       return true;
     }
 
-    await this.question.loadDynamicOptions.perform();
+    await this.question.dynamicOptions;
 
-    return value.map((value) => {
-      return validate("inclusion", value, {
-        in: (this.options || []).map(({ slug }) => slug),
-      });
+    return this.answer.value
+      ? value.map((value) => this._validateOption(value))
+      : true;
+  }
+
+  _validateOption(value, allowBlank = false) {
+    const label = Array.isArray(this.selected)
+      ? this.selected.find((selected) => selected.slug === value)?.label
+      : this.selected?.label;
+
+    return validate("inclusion", value, {
+      in: (this.options || [])
+        .filter((option) => !option.disabled)
+        .map(({ slug }) => slug),
+      allowBlank,
+      label: label ?? value,
     });
   }
 
   /**
    * Dummy method for the validation of file uploads.
    *
-   * @method _validateFileQuestion
+   * @method _validateFilesQuestion
    * @return {Boolean} Always returns true
    * @private
    */
-  _validateFileQuestion() {
+  _validateFilesQuestion() {
     return true;
   }
 

package/addon/lib/navigation.js

@@ -232,7 +232,9 @@ export class NavigationItem extends Base {
   @cached
   get visibleFields() {
     return this.fieldset.fields.filter(
-      (f) => f.questionType !== "FormQuestion" && !f.hidden
+      (f) =>
+        !["FormQuestion", "StaticQuestion"].includes(f.questionType) &&
+        !f.hidden
     );
   }
 

package/addon/lib/question.js

@@ -1,7 +1,8 @@
 import { assert } from "@ember/debug";
 import { camelize } from "@ember/string";
 import { queryManager } from "ember-apollo-client";
-import { dropTask, lastValue } from "ember-concurrency";
+import { dropTask } from "ember-concurrency";
+import { trackedTask } from "ember-resources/util/ember-concurrency";
 import { cached } from "tracked-toolbox";
 
 import getDynamicOptions from "@projectcaluma/ember-form/gql/queries/dynamic-options.graphql";
@@ -65,19 +66,31 @@ export default class Question extends Base {
       {
         query: getDynamicOptions,
         fetchPolicy: "network-only",
-        variables: { question: this.slug },
+        variables: {
+          question: this.slug,
+          context: this.dataSourceContext
+            ? JSON.stringify(this.dataSourceContext)
+            : null,
+        },
       },
       "allQuestions.edges"
     );
 
     return (
-      question.node.dynamicChoiceOptions ||
+      question.node.dynamicChoiceOptions ??
       question.node.dynamicMultipleChoiceOptions
     );
   }
 
-  @lastValue("loadDynamicOptions") dynamicChoiceOptions;
-  @lastValue("loadDynamicOptions") dynamicMultipleChoiceOptions;
+  dynamicOptions = trackedTask(this, this.loadDynamicOptions, () => []);
+
+  get dynamicChoiceOptions() {
+    return this.dynamicOptions.value ?? [];
+  }
+
+  get dynamicMultipleChoiceOptions() {
+    return this.dynamicOptions.value ?? [];
+  }
 
   /**
    * Whether the question is a single choice question

package/addon/modifiers/autoresize.js

@@ -0,0 +1,14 @@
+import { registerDestructor } from "@ember/destroyable";
+import { inject as service } from "@ember/service";
+import AutoresizeModifier from "ember-autoresize-modifier/modifiers/autoresize";
+
+export default class CustomAutoresizeModifier extends AutoresizeModifier {
+  @service inViewport;
+
+  modify(...args) {
+    super.modify(...args);
+
+    this.inViewport.watchElement(this.el).onEnter(this.resize);
+    registerDestructor(this, () => this.inViewport.stopWatching(this.el));
+  }
+}

package/addon/services/caluma-store.js

@@ -43,6 +43,8 @@ export default class CalumaStoreService extends Service {
   clear() {
     this._store.forEach((obj) => obj.destroy());
 
+    // `this._store` is not an ember array but a native map
+    // eslint-disable-next-line ember/no-array-prototype-extensions
     this._store.clear();
   }
 }

package/app/components/cf-field/{input/file.js → hint.js}

@@ -1 +1 @@
-export { default } from "@projectcaluma/ember-form/components/cf-field/input/file";
+export { default } from "@projectcaluma/ember-form/components/cf-field/hint";

package/app/components/cf-field/input/files.js

@@ -0,0 +1 @@
+export { default } from "@projectcaluma/ember-form/components/cf-field/input/files";

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

@@ -0,0 +1 @@
+export { default } from "@projectcaluma/ember-form/helpers/format-graphql-error";

package/app/helpers/get-widget.js

@@ -1,4 +1 @@
-export {
-  default,
-  getWidget,
-} from "@projectcaluma/ember-form/helpers/get-widget";
+export { default } from "@projectcaluma/ember-form/helpers/get-widget";

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

@@ -0,0 +1,4 @@
+export {
+  default,
+  initialize,
+} from "@projectcaluma/ember-form/instance-initializers/form-widget-overrides";

package/app/modifiers/autoresize.js

@@ -0,0 +1 @@
+export { default } from "@projectcaluma/ember-form/modifiers/autoresize";

package/app/styles/@projectcaluma/ember-form.scss

@@ -3,21 +3,11 @@
 @import "../cf-field";
 @import "../cf-navigation";
 
-@import "../uikit-overwrites";
-
-.cf-checkbox_label {
-  display: block;
-  position: relative;
-  padding-left: 26px;
+@import "../flatpickr";
 
-  .uk-checkbox {
-    position: absolute;
-    top: 0.25em;
-    left: 0;
-    margin: 0;
-  }
+@import "../uikit-overwrites";
 
-  & + br {
-    display: none;
-  }
+.table-controls > .uk-icon {
+  min-height: 20px;
+  min-width: 20px;
 }

package/app/styles/_flatpickr.scss

@@ -0,0 +1,47 @@
+$flatpickr-today-color: $global-warning-background;
+$flatpickr-selected-color: $global-primary-background;
+
+span.flatpickr-day {
+  font-weight: $base-body-font-weight;
+
+  &.today:not(.selected) {
+    border-bottom-color: $flatpickr-today-color;
+
+    &:hover {
+      background: $flatpickr-today-color;
+      border-color: $flatpickr-today-color;
+    }
+  }
+
+  &.selected {
+    background: $flatpickr-selected-color;
+    border-color: $flatpickr-selected-color;
+    font-weight: 700;
+
+    &:hover {
+      background: darken($flatpickr-selected-color, 10%);
+      border-color: darken($flatpickr-selected-color, 10%);
+    }
+  }
+}
+
+.flatpickr-months {
+  .flatpickr-prev-month:hover,
+  .flatpickr-next-month:hover {
+    color: $flatpickr-today-color;
+  }
+}
+
+span.flatpickr-weekday {
+  font-size: $global-small-font-size;
+  font-weight: $base-body-font-weight;
+}
+
+.flatpickr-current-month {
+  font-size: $global-font-size;
+  font-weight: $base-body-font-weight;
+
+  .flatpickr-monthDropdown-months {
+    font-weight: $base-body-font-weight;
+  }
+}

package/blueprints/@projectcaluma/ember-form/index.js

@@ -10,7 +10,7 @@ module.exports = {
         { name: "ember-cli-showdown" },
         { name: "ember-composable-helpers" },
         { name: "ember-math-helpers" },
-        { name: "ember-pikaday" },
+        { name: "ember-flatpickr" },
         { name: "ember-power-select" },
         { name: "ember-autoresize-modifier" },
       ],

package/index.js

@@ -2,4 +2,16 @@
 
 module.exports = {
   name: require("./package").name,
+
+  included(...args) {
+    const app = this._findHost(this);
+
+    app.options.flatpickr = {
+      locales: ["de", "fr"],
+      theme: "airbnb",
+      ...(app.options.flatpickr ?? {}),
+    };
+
+    this._super.included.apply(this, args);
+  },
 };