@projectcaluma/ember-form 10.0.1 → 11.0.0-beta.2

package/addon/lib/question.js

@@ -1,11 +1,10 @@
 import { assert } from "@ember/debug";
-import { defineProperty, computed } from "@ember/object";
-import { reads, equal } from "@ember/object/computed";
 import { camelize } from "@ember/string";
 import { queryManager } from "ember-apollo-client";
-import { task } from "ember-concurrency";
+import { dropTask, lastValue } from "ember-concurrency";
+import { cached } from "tracked-toolbox";
 
-import getDynamicOptions from "@projectcaluma/ember-form/gql/queries/get-dynamic-options.graphql";
+import getDynamicOptions from "@projectcaluma/ember-form/gql/queries/dynamic-options.graphql";
 import Base from "@projectcaluma/ember-form/lib/base";
 
 const getValue = (answer) => {
@@ -17,24 +16,39 @@ const getValue = (answer) => {
  *
  * @class Question
  */
-export default Base.extend({
-  apollo: queryManager(),
+export default class Question extends Base {
+  @queryManager apollo;
 
-  init(...args) {
+  constructor({ raw, ...args }) {
     assert(
       "A graphql question `raw` must be passed",
-      this.raw && /Question$/.test(this.raw.__typename)
+      /Question$/.test(raw?.__typename)
     );
 
-    defineProperty(this, "pk", {
-      writable: false,
-      value: `Question:${this.raw.slug}`,
-    });
+    super({ raw, ...args });
 
-    this._super(...args);
+    this.pushIntoStore();
+  }
 
-    this.setProperties(this.raw);
-  },
+  /**
+   * The primary key of the question.
+   *
+   * @property {String} pk
+   */
+  @cached
+  get pk() {
+    return `Question:${this.slug}`;
+  }
+
+  /**
+   * The slug of the question.
+   *
+   * @property {String} slug
+   */
+  @cached
+  get slug() {
+    return this.raw.slug;
+  }
 
   /**
    * Load all dynamic options for this question
@@ -43,7 +57,8 @@ export default Base.extend({
    * @return {Object[]} The dynamic options
    * @public
    */
-  loadDynamicOptions: task(function* () {
+  @dropTask
+  *loadDynamicOptions() {
     if (!this.isDynamic) return;
 
     const [question] = yield this.apollo.query(
@@ -59,108 +74,102 @@ export default Base.extend({
       question.node.dynamicChoiceOptions ||
       question.node.dynamicMultipleChoiceOptions
     );
-  }),
+  }
 
-  dynamicChoiceOptions: reads("loadDynamicOptions.lastSuccessful.value"),
-  dynamicMultipleChoiceOptions: reads(
-    "loadDynamicOptions.lastSuccessful.value"
-  ),
+  @lastValue("loadDynamicOptions") dynamicChoiceOptions;
+  @lastValue("loadDynamicOptions") dynamicMultipleChoiceOptions;
 
   /**
    * Whether the question is a single choice question
    *
    * @property {Boolean} isChoice
-   * @accessor
    */
-  isChoice: computed("__typename", function () {
-    return /(Dynamic)?ChoiceQuestion/.test(this.__typename);
-  }),
+  get isChoice() {
+    return /(Dynamic)?ChoiceQuestion/.test(this.raw.__typename);
+  }
 
   /**
    * Whether the question is a multiple choice question
    *
    * @property {Boolean} isMultipleChoice
-   * @accessor
    */
-  isMultipleChoice: computed("__typename", function () {
-    return /(Dynamic)?MultipleChoiceQuestion/.test(this.__typename);
-  }),
+  get isMultipleChoice() {
+    return /(Dynamic)?MultipleChoiceQuestion/.test(this.raw.__typename);
+  }
 
   /**
    * Whether the question is a dynamic single or multiple choice question
    *
    * @property {Boolean} isDynamic
-   * @accessor
    */
-  isDynamic: computed("__typename", function () {
-    return /Dynamic(Multiple)?ChoiceQuestion/.test(this.__typename);
-  }),
+  get isDynamic() {
+    return /Dynamic(Multiple)?ChoiceQuestion/.test(this.raw.__typename);
+  }
+
+  /**
+   * Whether the question is a table question
+   *
+   * @property {Boolean} isTable
+   */
+  get isTable() {
+    return this.raw.__typename === "TableQuestion";
+  }
 
-  isTable: equal("__typename", "TableQuestion"),
-  isCalculated: equal("__typename", "CalculatedFloatQuestion"),
+  /**
+   * Whether the question is a calculated question
+   *
+   * @property {Boolean} isCalculated
+   */
+  get isCalculated() {
+    return this.raw.__typename === "CalculatedFloatQuestion";
+  }
 
   /**
    * All valid options for this question
    *
    * @property {Object[]} options
-   * @accessor
    */
-  options: computed(
-    "__typename",
-    "choiceOptions.edges.[]",
-    "dynamicChoiceOptions.edges.[]",
-    "dynamicMultipleChoiceOptions.edges.[]",
-    "isChoice",
-    "isMultipleChoice",
-    "multipleChoiceOptions.edges.[]",
-    function () {
-      if (!this.isChoice && !this.isMultipleChoice) return null;
-
-      const key = camelize(this.__typename.replace(/Question$/, "Options"));
-
-      return (this.get(`${key}.edges`) || []).map(
-        ({ node: { label, slug, isArchived } }) => ({
-          label,
-          slug,
-          disabled: isArchived || false,
-        })
-      );
-    }
-  ),
-
-  defaultValue: computed(
-    "__typename",
-    "isTable",
-    "textDefaultAnswer",
-    "textareaDefaultAnswer",
-    "integerDefaultAnswer",
-    "floatDefaultAnswer",
-    "choiceDefaultAnswer",
-    "multipleChoiceDefaultAnswer.[]",
-    "dateDefaultAnswer",
-    "tableDefaultAnswer.[]",
-    function () {
-      const key = camelize(
-        this.__typename.replace(/Question$/, "DefaultAnswer")
-      );
-
-      const value = this[key] && this[key].value;
-
-      if (this.isTable && value) {
-        return value.map((defaultDocument) => {
-          return defaultDocument.answers.edges.reduce(
-            (defaultMap, { node: answer }) => {
-              return {
-                ...defaultMap,
-                [answer.question.slug]: getValue(answer),
-              };
-            },
-            {}
-          );
-        });
-      }
-
-      return value;
+  @cached
+  get options() {
+    if (!this.isChoice && !this.isMultipleChoice) return null;
+
+    const key = camelize(this.raw.__typename.replace(/Question$/, "Options"));
+    const raw = this.isDynamic ? this[key] : this.raw[key];
+
+    return (raw?.edges || []).map(({ node: { label, slug, isArchived } }) => ({
+      label,
+      slug,
+      disabled: isArchived || false,
+    }));
+  }
+
+  /**
+   * The default value of the question
+   *
+   * @property {String|Number|String[]|Object[]} defaultValue
+   */
+  @cached
+  get defaultValue() {
+    const key = camelize(
+      this.raw.__typename.replace(/Question$/, "DefaultAnswer")
+    );
+
+    const value = this.raw[key]?.value;
+
+    if (this.isTable && value) {
+      return value.map((defaultDocument) => {
+        return defaultDocument.answers.edges.reduce(
+          (defaultMap, { node: answer }) => {
+            return {
+              ...defaultMap,
+              [answer.question.slug]: getValue(answer),
+            };
+          },
+          {}
+        );
+      });
     }
-  ),
-});
+
+    return value;
+  }
+}

package/addon/services/caluma-store.js

@@ -3,7 +3,11 @@ import { set } from "@ember/object";
 import Service from "@ember/service";
 
 export default class CalumaStoreService extends Service {
-  _store = [];
+  constructor(...args) {
+    super(...args);
+
+    this._store = new Map();
+  }
 
   push(obj) {
     assert(
@@ -11,7 +15,7 @@ export default class CalumaStoreService extends Service {
       obj.pk
     );
 
-    const existing = this._store.find((i) => i.pk === obj.pk);
+    const existing = this._store.get(obj.pk);
 
     if (existing) {
       debug(
@@ -23,22 +27,22 @@ export default class CalumaStoreService extends Service {
       return existing;
     }
 
-    this._store = [...this._store.filter((i) => i.pk !== obj.pk), obj];
+    this._store.set(obj.pk, obj);
 
     return obj;
   }
 
   find(pk) {
-    return this._store.find((i) => i.pk === pk) || null;
+    return this._store.get(pk) || null;
   }
 
   delete(pk) {
-    this._store = this._store.filter((i) => i.pk !== pk);
+    this._store.delete(pk);
   }
 
   clear() {
     this._store.forEach((obj) => obj.destroy());
 
-    this._store = [];
+    this._store.clear();
   }
 }

package/app/helpers/get-widget.js

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

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

@@ -12,6 +12,7 @@ module.exports = {
         { name: "ember-math-helpers" },
         { name: "ember-pikaday" },
         { name: "ember-power-select" },
+        { name: "ember-autoresize-modifier" },
       ],
     });
   },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@projectcaluma/ember-form",
-  "version": "10.0.1",
+  "version": "11.0.0-beta.2",
   "description": "Ember addon for rendering Caluma forms.",
   "keywords": [
     "ember-addon"
@@ -16,38 +16,42 @@
   "dependencies": {
     "@glimmer/component": "^1.0.4",
     "@glimmer/tracking": "^1.0.4",
-    "@projectcaluma/ember-core": "^10.0.1",
+    "@projectcaluma/ember-core": "^11.0.0-beta.2",
     "ember-apollo-client": "^3.2.0",
-    "ember-auto-import": "^2.2.3",
-    "ember-cli-babel": "^7.26.6",
-    "ember-cli-htmlbars": "^6.0.0",
-    "ember-cli-showdown": "^6.0.0",
-    "ember-composable-helpers": "^4.5.0",
-    "ember-fetch": "^8.0.4",
-    "ember-in-viewport": "^3.10.3",
-    "ember-intl": "^5.7.0",
+    "ember-auto-import": "^2.3.0",
+    "ember-autoresize-modifier": "^0.5.0",
+    "ember-cli-babel": "^7.26.11",
+    "ember-cli-htmlbars": "^6.0.1",
+    "ember-cli-showdown": "^6.0.1",
+    "ember-composable-helpers": "^5.0.0",
+    "ember-fetch": "^8.1.1",
+    "ember-in-viewport": "^4.0.0",
+    "ember-intl": "^5.7.2",
     "ember-math-helpers": "^2.18.0",
     "ember-pikaday": "^3.0.0",
-    "ember-power-select": "^4.1.7",
+    "ember-power-select": "^5.0.3",
+    "ember-resources": "^4.1.3",
     "ember-uikit": "^4.0.0",
-    "graphql": "^15.6.1",
+    "ember-validators": "^4.0.1",
+    "graphql": "^15.8.0",
     "jexl": "^2.3.0",
-    "lodash.clonedeep": "^4.5.0",
     "lodash.isequal": "^4.5.0",
-    "moment": "^2.29.1"
+    "moment": "^2.29.1",
+    "tracked-toolbox": "^1.2.3"
   },
   "devDependencies": {
     "@ember/optional-features": "2.0.0",
     "@ember/test-helpers": "2.6.0",
-    "@embroider/test-setup": "0.47.2",
-    "@projectcaluma/ember-testing": "9.1.0",
-    "@projectcaluma/ember-workflow": "10.0.0",
+    "@embroider/test-setup": "0.50.2",
+    "@faker-js/faker": "6.0.0-alpha.3",
+    "@projectcaluma/ember-testing": "10.2.0-beta.1",
+    "@projectcaluma/ember-workflow": "11.0.0-beta.1",
     "broccoli-asset-rev": "3.0.0",
-    "ember-cli": "3.28.4",
+    "ember-cli": "3.28.5",
     "ember-cli-code-coverage": "1.0.3",
     "ember-cli-dependency-checker": "3.2.0",
     "ember-cli-inject-live-reload": "2.1.0",
-    "ember-cli-mirage": "2.2.0",
+    "ember-cli-mirage": "2.3.1",
     "ember-cli-sri": "2.1.1",
     "ember-cli-terser": "4.0.2",
     "ember-disable-prototype-extensions": "1.1.3",
@@ -56,16 +60,16 @@
     "ember-maybe-import-regenerator": "1.0.0",
     "ember-qunit": "5.1.5",
     "ember-resolver": "8.0.3",
-    "ember-source": "3.28.6",
+    "ember-source": "3.28.8",
     "ember-source-channel-url": "3.0.0",
     "ember-try": "2.0.0",
-    "faker": "5.5.3",
     "loader.js": "4.7.0",
+    "miragejs": "0.1.43",
     "npm-run-all": "4.1.5",
     "qunit": "2.17.2",
     "qunit-dom": "2.0.0",
     "uuid": "8.3.2",
-    "webpack": "5.64.1"
+    "webpack": "5.66.0"
   },
   "engines": {
     "node": "12.* || 14.* || >= 16"

package/addon/components/cf-navigation.js

@@ -1,9 +0,0 @@
-import { action } from "@ember/object";
-import Component from "@glimmer/component";
-
-export default class CfNavigationComponent extends Component {
-  @action
-  goToNextItem() {
-    this.args.navigation.goToNextItem();
-  }
-}