@projectcaluma/ember-form 10.0.2 → 11.0.0-beta.3

package/addon/lib/navigation.js

@@ -1,9 +1,13 @@
 import { getOwner } from "@ember/application";
 import { assert } from "@ember/debug";
-import { computed, observer, defineProperty } from "@ember/object";
-import { reads } from "@ember/object/computed";
-import { later, once } from "@ember/runloop";
+import {
+  associateDestroyableChild,
+  registerDestructor,
+} from "@ember/destroyable";
+import { action } from "@ember/object";
+import { next, cancel, once } from "@ember/runloop";
 import { inject as service } from "@ember/service";
+import { cached } from "tracked-toolbox";
 
 import Base from "@projectcaluma/ember-form/lib/base";
 
@@ -19,87 +23,112 @@ const STATES = {
  *
  * @class NavigationItem
  */
-export const NavigationItem = Base.extend({
-  router: service(),
+export class NavigationItem extends Base {
+  @service router;
 
-  init(...args) {
-    assert("A fieldset `fieldset` must be passed", this.fieldset);
-    assert("A navigation `navigation` must be passed", this.navigation);
+  constructor({ fieldset, navigation, ...args }) {
+    assert("`fieldset` must be passed as an argument", fieldset);
+    assert("`navigation` must be passed as an argument", navigation);
 
-    defineProperty(this, "pk", {
-      writable: false,
-      value: `NavigationItem:${this.fieldset.pk}`,
-    });
+    super({ ...args });
+
+    this.fieldset = fieldset;
+    this.navigation = navigation;
+
+    this.pushIntoStore();
+  }
+
+  /**
+   * The fieldset to build the navigation item for
+   *
+   * @property {Fieldset} fieldset
+   */
+  fieldset = null;
 
-    this._super(...args);
-  },
+  /**
+   * The navigation object this item originates from. This is used to determine
+   * the items child and parent items.
+   *
+   * @property {Navigation} navigation
+   */
+  navigation = null;
+
+  /**
+   * The primary key of the navigation item.
+   *
+   * @property {String} pk
+   */
+  @cached
+  get pk() {
+    return `NavigationItem:${this.fieldset.pk}`;
+  }
 
   /**
    * The parent navigation item
    *
    * @property {NavigationItem} parent
-   * @accessor
    */
-  parent: computed("_parentSlug", "navigation.items.@each.slug", function () {
+  @cached
+  get parent() {
     return this.navigation.items.find((item) => item.slug === this._parentSlug);
-  }),
+  }
 
   /**
    * The children of this navigation item
    *
    * @property {NavigationItem[]} children
-   * @accessor
    */
-  children: computed("slug", "navigation.items.@each._parentSlug", function () {
+  @cached
+  get children() {
     return this.navigation.items.filter(
       (item) => item._parentSlug === this.slug
     );
-  }),
+  }
 
   /**
    * The visible children of this navigation item
    *
    * @property {NavigationItem[]} visibleChildren
-   * @accessor
    */
-  visibleChildren: computed("children.@each.visible", function () {
+  @cached
+  get visibleChildren() {
     return this.children.filter((child) => child.visible);
-  }),
-
-  /**
-   * The fieldset to build the navigation item for
-   *
-   * @property {Fieldset} fieldset
-   */
-  fieldset: null,
+  }
 
   /**
    * The label displayed in the navigation
    *
    * @property {String} label
-   * @accessor
    */
-  label: computed.or("fieldset.field.question.label", "fieldset.form.name"),
+  @cached
+  get label() {
+    return (
+      this.fieldset.field?.question.raw.label ?? this.fieldset.form.raw.name
+    );
+  }
 
   /**
    * The slug of the items form
    *
    * @property {String} slug
-   * @accessor
    */
-  slug: computed.or(
-    "fieldset.field.question.subForm.slug",
-    "fieldset.form.slug"
-  ),
+  @cached
+  get slug() {
+    return (
+      this.fieldset.field?.question.raw.subForm.slug ?? this.fieldset.form.slug
+    );
+  }
 
   /**
    * The slug of the parent items form
    *
    * @property {String} _parentSlug
-   * @accessor
    * @private
    */
-  _parentSlug: reads("fieldset.field.fieldset.field.question.subForm.slug"),
+  @cached
+  get _parentSlug() {
+    return this.fieldset.field?.fieldset.field?.question.raw.subForm.slug;
+  }
 
   /**
    * The item is active if the query param `displayedForm` is equal to the
@@ -107,24 +136,20 @@ export const NavigationItem = Base.extend({
    *
    * @property {Boolean} active
    */
-  active: computed(
-    "router.currentRoute.queryParams.displayedForm",
-    "slug",
-    function () {
-      return (
-        this.slug === this.get("router.currentRoute.queryParams.displayedForm")
-      );
-    }
-  ),
+  @cached
+  get active() {
+    return this.slug === this.router.currentRoute?.queryParams.displayedForm;
+  }
 
   /**
    * Whether the item has active children
    *
    * @property {Boolean} childrenActive
    */
-  childrenActive: computed("children.@each.active", function () {
+  @cached
+  get childrenActive() {
     return this.children.some((child) => child.active);
-  }),
+  }
 
   /**
    * The item is navigable if it is not hidden and its fieldset contains at
@@ -132,27 +157,25 @@ export const NavigationItem = Base.extend({
    *
    * @property {Boolean} navigable
    */
-  navigable: computed(
-    "fieldset.field.hidden",
-    "fieldset.fields.@each.{hidden,questionType}",
-    function () {
-      return (
-        (this.fieldset.field === undefined || !this.fieldset.field.hidden) &&
-        this.fieldset.fields.some(
-          (field) => field.questionType !== "FormQuestion" && !field.hidden
-        )
-      );
-    }
-  ),
+  @cached
+  get navigable() {
+    return (
+      (this.fieldset.field === undefined || !this.fieldset.field.hidden) &&
+      this.fieldset.fields.some(
+        (field) => field.questionType !== "FormQuestion" && !field.hidden
+      )
+    );
+  }
 
   /**
    * The item is visible if it is navigable or has at least one child item.
    *
    * @property {Boolean} visible
    */
-  visible: computed("navigable", "visibleChildren.length", function () {
+  @cached
+  get visible() {
     return this.navigable || Boolean(this.visibleChildren.length);
-  }),
+  }
 
   /**
    * The current state consisting of the items and the childrens fieldset
@@ -165,64 +188,53 @@ export const NavigationItem = Base.extend({
    * - `valid` if every fieldset is `valid`
    *
    * @property {String} state
-   * @accessor
    */
-  state: computed(
-    "fieldsetState",
-    "visibleChildren.@each.fieldsetState",
-    function () {
-      const states = [
-        this.fieldsetState,
-        ...this.visibleChildren.map((child) => child.fieldsetState),
-      ].filter(Boolean);
-
-      if (states.every((state) => state === STATES.EMPTY)) {
-        return STATES.EMPTY;
-      }
-
-      if (states.some((state) => state === STATES.INVALID)) {
-        return STATES.INVALID;
-      }
-
-      return states.every((state) => state === STATES.VALID)
-        ? STATES.VALID
-        : STATES.IN_PROGRESS;
+  @cached
+  get state() {
+    const states = [
+      this.fieldsetState,
+      ...this.visibleChildren.map((child) => child.fieldsetState),
+    ].filter(Boolean);
+
+    if (states.every((state) => state === STATES.EMPTY)) {
+      return STATES.EMPTY;
+    }
+
+    if (states.some((state) => state === STATES.INVALID)) {
+      return STATES.INVALID;
     }
-  ),
+
+    return states.every((state) => state === STATES.VALID)
+      ? STATES.VALID
+      : STATES.IN_PROGRESS;
+  }
 
   /**
    * The dirty state of the navigation item. This will be true if at least one
    * of the children or the navigation fieldset itself is dirty.
    *
    * @property {Boolean} fieldsetDirty
-   * @accessor
    */
-  dirty: computed(
-    "fieldsetDirty",
-    "visibleChildren.@each.fieldsetDirty",
-    function () {
-      return [
-        this.fieldsetDirty,
-        ...this.visibleChildren.map((child) => child.fieldsetDirty),
-      ].some(Boolean);
-    }
-  ),
+  @cached
+  get dirty() {
+    return [
+      this.fieldsetDirty,
+      ...this.visibleChildren.map((child) => child.fieldsetDirty),
+    ].some(Boolean);
+  }
 
   /**
    * All visible fields (excluding form question fields) of the fieldset that
    * are visible.
    *
    * @property {Field[]} visibleFields
-   * @accessor
    */
-  visibleFields: computed(
-    "fieldset.fields.@each.{questionType,hidden}",
-    function () {
-      return this.fieldset.fields.filter(
-        (f) => f.questionType !== "FormQuestion" && !f.hidden
-      );
-    }
-  ),
+  @cached
+  get visibleFields() {
+    return this.fieldset.fields.filter(
+      (f) => f.questionType !== "FormQuestion" && !f.hidden
+    );
+  }
 
   /**
    * The current state of the item's fieldset. This does not consider the state
@@ -235,137 +247,147 @@ export const NavigationItem = Base.extend({
    * - `valid` if every field is valid
    *
    * @property {String} fieldsetState
-   * @accessor
    */
-  fieldsetState: computed(
-    "visibleFields.@each.{isNew,isValid,optional}",
-    function () {
-      if (!this.visibleFields.length) {
-        return null;
-      }
-
-      if (this.visibleFields.some((f) => !f.isValid && f.isDirty)) {
-        return STATES.INVALID;
-      }
-
-      if (this.visibleFields.every((f) => f.isNew)) {
-        return STATES.EMPTY;
-      }
-
-      if (
-        this.visibleFields
-          .filter((f) => !f.optional)
-          .every((f) => f.isValid && !f.isNew)
-      ) {
-        return STATES.VALID;
-      }
-
-      return STATES.IN_PROGRESS;
+  @cached
+  get fieldsetState() {
+    if (!this.visibleFields.length) {
+      return null;
+    }
+
+    if (this.visibleFields.some((f) => !f.isValid && f.isDirty)) {
+      return STATES.INVALID;
     }
-  ),
+
+    if (this.visibleFields.every((f) => f.isNew)) {
+      return STATES.EMPTY;
+    }
+
+    if (
+      this.visibleFields
+        .filter((f) => !f.optional)
+        .every((f) => f.isValid && !f.isNew)
+    ) {
+      return STATES.VALID;
+    }
+
+    return STATES.IN_PROGRESS;
+  }
 
   /**
    * The dirty state of the current fieldset. This will be true if at least one
    * field in the fieldset is dirty.
    *
    * @property {Boolean} fieldsetDirty
-   * @accessor
    */
-  fieldsetDirty: computed("visibleFields.@each.isDirty", function () {
+  @cached
+  get fieldsetDirty() {
     return this.visibleFields.some((f) => f.isDirty);
-  }),
-});
+  }
+}
 
 /**
  * Object to represent a navigation state for a certain document.
  *
  * @class Navigation
  */
-export const Navigation = Base.extend({
-  router: service(),
-  calumaStore: service(),
+export class Navigation extends Base {
+  @service router;
 
-  init(...args) {
-    assert("A document `document` must be passed", this.document);
+  constructor({ document, ...args }) {
+    assert("`document` must be passed as an argument", document);
 
-    defineProperty(this, "pk", {
-      writable: false,
-      value: `Navigation:${this.document.pk}`,
-    });
+    super({ ...args });
 
-    this._super(...args);
+    this.document = document;
 
-    this.set("items", []);
+    this.pushIntoStore();
 
     this._createItems();
-  },
 
-  willDestroy(...args) {
-    this._super(...args);
+    const transitionHandler = () => {
+      this._timer = next(this, "goToNextItemIfNonNavigable");
+    };
 
-    const items = this.items;
-    this.set("items", []);
-    items.forEach((item) => item.destroy());
-  },
+    // go to next item in next run loop, this is necessary when the user clicks
+    // on a non navigable item in the navigation
+    this.router.on("routeDidChange", this, transitionHandler);
+
+    registerDestructor(this, () => {
+      cancel(this._timer);
+      this.router.off("routeDidChange", this, transitionHandler);
+    });
+  }
+
+  /**
+   * The primary key of the navigation
+   *
+   * @property {String} pk
+   */
+  @cached
+  get pk() {
+    return `Navigation:${this.document.pk}`;
+  }
 
   _createItems() {
+    const owner = getOwner(this);
+
     const items = this.document.fieldsets.map((fieldset) => {
       const pk = `NavigationItem:${fieldset.pk}`;
 
-      return (
+      return associateDestroyableChild(
+        this,
         this.calumaStore.find(pk) ||
-        getOwner(this)
-          .factoryFor("caluma-model:navigation-item")
-          .create({ fieldset, navigation: this })
+          new (owner.factoryFor("caluma-model:navigation-item").class)({
+            fieldset,
+            navigation: this,
+            owner,
+          })
       );
     });
 
-    this.set("items", items);
-  },
+    this.items = items;
+  }
 
   /**
    * The document to build the navigation for
    *
    * @property {Document} document
    */
-  document: null,
+  document = null;
 
   /**
    * The navigation items for the given document
    *
    * @property {NavigationItem[]} items
-   * @accessor
    */
-  items: null,
+  items = [];
 
   /**
    * The top level navigation items. Those are items without a parent item that
    * are visible.
    *
    * @property {NavigationItem[]} rootItems
-   * @accessor
    */
-  rootItems: computed("items.@each.{parent,visible}", function () {
+  @cached
+  get rootItems() {
     return this.items.filter((i) => !i.parent && i.visible);
-  }),
+  }
 
   /**
    * The currently active navigation item
    *
    * @property {NavigationItem} currentItem
-   * @accessor
    */
-  currentItem: computed("items.@each.active", function () {
+  get currentItem() {
     return this.items.find((item) => item.active);
-  }),
+  }
 
   /**
    * The next navigable item in the navigation tree
    *
    * @property {NavigationItem} nextItem
-   * @accessor
    */
-  nextItem: computed("currentItem", "items.@each.navigable", function () {
+  get nextItem() {
     if (!this.currentItem)
       return this.items.filter((item) => item.navigable)[0];
 
@@ -374,15 +396,14 @@ export const Navigation = Base.extend({
       .filter((item) => item.navigable);
 
     return items.length ? items[0] : null;
-  }),
+  }
 
   /**
    * The previous navigable item in the navigation tree
    *
    * @property {NavigationItem} previousItem
-   * @accessor
    */
-  previousItem: computed("currentItem", "items.@each.navigable", function () {
+  get previousItem() {
     if (!this.currentItem) return null;
 
     const items = this.items
@@ -390,36 +411,34 @@ export const Navigation = Base.extend({
       .filter((item) => item.navigable);
 
     return items.length ? items[items.length - 1] : null;
-  }),
+  }
 
   /**
-   * Observer which transitions to the next navigable item if the current item
-   * is not navigable.
+   * Replace the current item with the next navigable item if the current item
+   * is not navigable. This makes sure that only one transition per runloop
+   * happens.
    *
-   * @method preventNonNavigableItem
+   * @method goToNextItemIfNonNavigable
    */
-  preventNonNavigableItem: observer("currentItem", function () {
-    if (!this.get("nextItem.slug") || this.get("currentItem.navigable")) {
+  @action
+  goToNextItemIfNonNavigable() {
+    if (this.currentItem?.navigable) {
       return;
     }
 
-    later(this, () => once(this, "goToNextItem"));
-  }),
+    once(this, "_transitionToNextItem");
+  }
 
   /**
-   * Replace the current item with the next navigable item
+   * Transition to next item or start (empty displayed form).
    *
-   * @method goToNextItem
+   * @method _transitionToNextItem
    */
-  goToNextItem() {
-    if (!this.get("nextItem.slug") || this.get("currentItem.navigable")) {
-      return;
-    }
-
+  _transitionToNextItem() {
     this.router.replaceWith({
-      queryParams: { displayedForm: this.nextItem.slug },
+      queryParams: { displayedForm: this.nextItem?.slug ?? "" },
     });
-  },
-});
+  }
+}
 
 export default Navigation;