@projectcaluma/ember-form-builder 9.0.2 → 9.0.6

package/addon/components/cfb-float-input.hbs

@@ -0,0 +1,14 @@
+{{component @labelComponent}}
+
+<input
+  class="uk-input"
+  name={{@name}}
+  ...attributes
+  step="any"
+  type="number"
+  value={{@value}}
+  {{on "change" this.onUpdate}}
+/>
+
+{{component @hintComponent}}
+{{component @errorComponent}}

package/addon/components/cfb-float-input.js

@@ -1,5 +1,11 @@
-import RenderComponent from "ember-validated-form/components/validated-input/-themes/uikit/render";
+import { action } from "@ember/object";
+import Component from "@glimmer/component";
 
-export default RenderComponent.extend({
-  inputComponent: "cfb-float-input/input",
-});
+export default class CfbFloatInput extends Component {
+  @action
+  onUpdate(event) {
+    event.preventDefault();
+    this.args.update(event.target.value);
+    this.args.setDirty();
+  }
+}

package/addon/components/cfb-form-editor/general.hbs

@@ -1,94 +1,98 @@
-{{#if data.isRunning}}
-  <div class="uk-flex uk-flex-center uk-flex-middle uk-height-small">
-    {{uk-spinner ratio=2}}
-  </div>
-{{else}}
-  {{#with data.lastSuccessful.value.firstObject.node as |model|}}
-    <ValidatedForm
-      @model={{changeset model validations}}
-      @on-submit={{perform submit}}
-      as |f|
-    >
-      {{f.input
-        type="text"
-        label=(t "caluma.form-builder.form.name")
-        name="name"
-        required=true
-        on-update=(action "updateName")
-      }}
-
-      {{#if (or slug (not prefix))}}
-        {{f.input
-          type="text"
-          label=(t "caluma.form-builder.form.slug")
-          name="slug"
-          required=true
-          disabled=slug
-          on-update=(action "updateSlug")
-        }}
-      {{else}}
+<div
+  {{did-insert (perform this.data)}}
+  {{did-update (perform this.data) @slug}}
+>
+  {{#if this.data.isRunning}}
+    <div class="uk-flex uk-flex-center uk-flex-middle uk-height-small">
+      <UkSpinner ratio="2" />
+    </div>
+  {{else}}
+    {{#with this.data.lastSuccessful.value.firstObject.node as |model|}}
+      <ValidatedForm
+        @model={{changeset model this.Validations}}
+        @on-submit={{perform this.submit}}
+        as |f|
+      >
         <f.input
-          @name="slug"
+          @type="text"
+          @label={{t "caluma.form-builder.form.name"}}
+          @name="name"
           @required={{true}}
-          @disabled={{slug}}
-          @label={{t "caluma.form-builder.question.slug"}}
-          @on-update={{action "updateSlug" value="target.value"}}
-          as |fi|
-        >
-          <div class="cfb-prefixed">
-            <span class="cfb-prefixed-slug">{{prefix}}</span>
+          @on-update={{this.updateName}}
+        />
 
-            {{validated-input/types/-themes/uikit/input
-              type="text"
-              model=fi.model
-              name=fi.name
-              value=fi.value
-              update=fi.update
-              setDirty=fi.setDirty
-              inputId=fi.inputId
-              isValid=fi.isValid
-              isInvalid=fi.isInvalid
-            }}
-          </div>
-        </f.input>
-      {{/if}}
+        {{#if (or @slug (not this.prefix))}}
+          <f.input
+            @type="text"
+            @name="slug"
+            @label={{t "caluma.form-builder.form.slug"}}
+            @required={{true}}
+            @disabled={{@slug}}
+            @on-update={{this.updateSlug}}
+          />
+        {{else}}
+          <f.input
+            @name="slug"
+            @required={{true}}
+            @disabled={{@slug}}
+            @label={{t "caluma.form-builder.question.slug"}}
+            @on-update={{this.updateSlug value="target.value"}}
+            as |fi|
+          >
+            <div class="cfb-prefixed">
+              <span class="cfb-prefixed-slug">{{this.prefix}}</span>
+              <f.input
+                @type="text"
+                @model={{fi.model}}
+                @name={{fi.name}}
+                @value={{fi.value}}
+                @update={{fi.update}}
+                @setDirty={{fi.setDirty}}
+                @inputId={{fi.inputId}}
+                @isValid={{fi.isValid}}
+                @isInvalid={{fi.isInvalid}}
+              />
+            </div>
+          </f.input>
+        {{/if}}
 
-      {{f.input
-        type="textarea"
-        label=(t "caluma.form-builder.form.description")
-        name="description"
-        rows=4
-      }}
+        <f.input
+          @name="description"
+          @type="textarea"
+          @label={{t "caluma.form-builder.form.description"}}
+          @rows="4"
+        />
 
-      {{f.input
-        name="isArchived"
-        label=(t "caluma.form-builder.form.isArchived")
-        required=true
-        renderComponent=(component "cfb-toggle-switch" size="small")
-        class="uk-flex uk-flex-between uk-flex-column"
-      }}
+        <f.input
+          class="uk-flex uk-flex-between uk-flex-column"
+          @name="isArchived"
+          @label={{t "caluma.form-builder.form.isArchived"}}
+          @required={{true}}
+          @renderComponent={{component "cfb-toggle-switch" size="small"}}
+        />
 
-      {{f.input
-        name="isPublished"
-        label=(t "caluma.form-builder.form.isPublished")
-        required=true
-        renderComponent=(component "cfb-toggle-switch" size="small")
-        class="uk-flex uk-flex-between uk-flex-column"
-      }}
+        <f.input
+          class="uk-flex uk-flex-between uk-flex-column"
+          @name="isPublished"
+          @label={{t "caluma.form-builder.form.isPublished"}}
+          @required={{true}}
+          @renderComponent={{component "cfb-toggle-switch" size="small"}}
+        />
 
-      <div class="uk-text-right">
-        {{f.submit
-          disabled=(or f.loading f.model.isInvalid)
-          label=(t "caluma.form-builder.global.save")
-        }}
+        <div class="uk-text-right">
+          <f.submit
+            @disabled={{or f.loading f.model.isInvalid}}
+            @label={{t "caluma.form-builder.global.save"}}
+          />
+        </div>
+      </ValidatedForm>
+    {{else}}
+      <div
+        class="uk-text-center uk-text-muted uk-padding uk-padding-remove-horizontal"
+      >
+        {{uk-icon "bolt" ratio=5}}
+        <p>{{t "caluma.form-builder.form.not-found" slug=@slug}}</p>
       </div>
-    </ValidatedForm>
-  {{else}}
-    <div
-      class="uk-text-center uk-text-muted uk-padding uk-padding-remove-horizontal"
-    >
-      {{uk-icon "bolt" ratio=5}}
-      <p>{{t "caluma.form-builder.form.not-found" slug=slug}}</p>
-    </div>
-  {{/with}}
-{{/if}}
+    {{/with}}
+  {{/if}}
+</div>

package/addon/components/cfb-form-editor/general.js

@@ -1,35 +1,30 @@
 import { getOwner } from "@ember/application";
 import { A } from "@ember/array";
-import Component from "@ember/component";
-import { computed } from "@ember/object";
+import { action } from "@ember/object";
 import { inject as service } from "@ember/service";
+import Component from "@glimmer/component";
 import { queryManager } from "ember-apollo-client";
 import { optional } from "ember-composable-helpers/helpers/optional";
-import { task, timeout } from "ember-concurrency";
+import { timeout, restartableTask, dropTask } from "ember-concurrency";
 
-import validations from "../../validations/form";
+import FormValidations from "../../validations/form";
 
 import slugify from "@projectcaluma/ember-core/utils/slugify";
 import saveFormMutation from "@projectcaluma/ember-form-builder/gql/mutations/save-form.graphql";
 import checkFormSlugQuery from "@projectcaluma/ember-form-builder/gql/queries/check-form-slug.graphql";
 import formEditorGeneralQuery from "@projectcaluma/ember-form-builder/gql/queries/form-editor-general.graphql";
 
-export default Component.extend({
-  validations,
+export default class CfbFormEditorGeneral extends Component {
+  @service notification;
+  @service intl;
+  @service calumaOptions;
+  @queryManager apollo;
 
-  notification: service(),
-  intl: service(),
-  calumaOptions: service(),
+  Validations = FormValidations;
 
-  apollo: queryManager(),
-
-  didReceiveAttrs() {
-    this._super();
-    this.data.perform();
-  },
-
-  data: task(function* () {
-    if (!this.slug) {
+  @restartableTask
+  *data() {
+    if (!this.args.slug) {
       return A([
         {
           node: {
@@ -45,22 +40,24 @@ export default Component.extend({
     return yield this.apollo.watchQuery(
       {
         query: formEditorGeneralQuery,
-        variables: { slug: this.slug },
+        variables: { slug: this.args.slug },
         fetchPolicy: "cache-and-network",
       },
       "allForms.edges"
     );
-  }).restartable(),
+  }
 
-  prefix: computed("calumaOptions.namespace", function () {
+  get prefix() {
     return this.calumaOptions.namespace
       ? `${this.calumaOptions.namespace}-`
       : "";
-  }),
+  }
 
-  submit: task(function* (changeset) {
+  @dropTask
+  *submit(changeset) {
     try {
-      const slug = ((!this.slug && this.prefix) || "") + changeset.get("slug");
+      const slug =
+        ((!this.args.slug && this.prefix) || "") + changeset.get("slug");
 
       const form = yield this.apollo.mutate(
         {
@@ -81,24 +78,25 @@ export default Component.extend({
       this.notification.success(
         this.intl.t(
           `caluma.form-builder.notification.form.${
-            this.slug ? "save" : "create"
+            this.args.slug ? "save" : "create"
           }.success`
         )
       );
 
-      optional([this.get("on-after-submit")])(form);
+      optional([this.args["on-after-submit"]])(form);
     } catch (e) {
       this.notification.danger(
         this.intl.t(
           `caluma.form-builder.notification.form.${
-            this.slug ? "save" : "create"
+            this.args.slug ? "save" : "create"
           }.error`
         )
       );
     }
-  }).drop(),
+  }
 
-  validateSlug: task(function* (slug, changeset) {
+  @restartableTask
+  *validateSlug(slug, changeset) {
     /* istanbul ignore next */
     if (
       getOwner(this).resolveRegistration("config:environment").environment !==
@@ -121,24 +119,24 @@ export default Component.extend({
         this.intl.t("caluma.form-builder.validations.form.slug")
       );
     }
-  }).restartable(),
+  }
 
-  actions: {
-    updateName(value, changeset) {
-      changeset.set("name", value);
+  @action
+  updateName(value, changeset) {
+    changeset.set("name", value);
 
-      if (!this.slug) {
-        const slug = slugify(value, { locale: this.intl.primaryLocale });
-        changeset.set("slug", slug);
+    if (!this.args.slug) {
+      const slug = slugify(value, { locale: this.intl.primaryLocale });
+      changeset.set("slug", slug);
 
-        this.validateSlug.perform(this.prefix + slug, changeset);
-      }
-    },
+      this.validateSlug.perform(this.prefix + slug, changeset);
+    }
+  }
 
-    updateSlug(value, changeset) {
-      changeset.set("slug", value);
+  @action
+  updateSlug(value, changeset) {
+    changeset.set("slug", value);
 
-      this.validateSlug.perform(this.prefix + value, changeset);
-    },
-  },
-});
+    this.validateSlug.perform(this.prefix + value, changeset);
+  }
+}

package/addon/components/cfb-form-editor/question/default/table.js

@@ -0,0 +1,12 @@
+import TableComponent from "@projectcaluma/ember-form/components/cf-field/input/table";
+import { parseDocument } from "@projectcaluma/ember-form/lib/parsers";
+
+export default class CfbFormEditorQuestionDefaultTableComponent extends TableComponent {
+  parseDocument(raw) {
+    raw.form.questions.edges = raw.form.questions.edges.map((edge) => ({
+      node: { ...edge.node, isHidden: "false", isRequired: "false" },
+    }));
+
+    return parseDocument(raw);
+  }
+}

package/addon/components/cfb-form-editor/question/default.hbs

@@ -1,11 +1,13 @@
-{{component labelComponent}}
+<div class="uk-margin">
+  {{component @labelComponent}}
 
-{{component
-  (get-widget this.field.question)
-  field=this.field
-  disabled=false
-  onSave=this.onUpdate
-}}
+  {{component
+    (get-widget this.field.question)
+    field=this.field
+    disabled=false
+    onSave=this.onUpdate
+  }}
 
-{{component hintComponent}}
-{{component errorComponent}}
+  {{component @hintComponent}}
+  {{component @errorComponent}}
+</div>

package/addon/components/cfb-form-editor/question/default.js

@@ -1,19 +1,17 @@
 import { getOwner } from "@ember/application";
-// eslint-disable-next-line ember/no-computed-properties-in-native-classes
-import { action, computed, get, set } from "@ember/object";
+import { action } from "@ember/object";
 import { inject as service } from "@ember/service";
-import RenderComponent from "ember-validated-form/components/validated-input/-themes/uikit/render";
+import Component from "@glimmer/component";
 
 import { TYPE_MAP } from "@projectcaluma/ember-form/lib/field";
 
-export default class CfbFormEditorQuestionDefault extends RenderComponent {
+export default class CfbFormEditorQuestionDefault extends Component {
   @service router;
 
-  @computed("model.{id,__typename}")
   get question() {
     const raw = {
-      ...this.model.get("data"),
-      ...this.model.get("change"),
+      ...this.args.model.get("data"),
+      ...this.args.model.get("change"),
       // While we want the real value, typename, etc. of the question,
       // the question should never be required or hidden in the form-builder.
       // We need to set a value here as no value will lead to a Jexl error.
@@ -31,13 +29,13 @@ export default class CfbFormEditorQuestionDefault extends RenderComponent {
 
     if (
       ["ChoiceQuestion", "MultipleChoiceQuestion"].includes(
-        this.model.__typename
+        this.args.model.__typename
       )
     ) {
       // Use Power Select for choice questions to save space.
       raw.meta = { widgetOverride: "cf-field/input/powerselect" };
 
-      const key = this.model.__typename
+      const key = this.args.model.__typename
         .replace(/^./, (match) => match.toLowerCase())
         .replace("Question", "Options");
 
@@ -45,42 +43,33 @@ export default class CfbFormEditorQuestionDefault extends RenderComponent {
       delete raw.options;
     }
 
-    if (this.model.__typename === "TableQuestion") {
+    if (this.args.model.__typename === "TableQuestion") {
       raw.meta = { widgetOverride: "cfb-form-editor/question/default/table" };
     }
 
     return raw;
   }
 
-  // This @computed decorator is important. Otherwise, Ember will - under some
-  // circumstances - enter the getter method multiple times and throw an error.
-  @computed(
-    "model.{__typename,slug}",
-    "question",
-    "question.slug",
-    "router.currentRoute.attributes.formSlug",
-    "value.content"
-  )
   get field() {
     const rootForm = {
       slug:
         // There is no currentRoute in the integration tests.
-        get(this, "router.currentRoute.attributes.formSlug") || "dv-form",
+        this.router?.currentRoute?.attributes?.formSlug || "dv-form",
       meta: {},
       questions: [this.question],
       __typename: "Form",
     };
 
     const newAnswer = {
-      id: btoa(`Answer:dv-answer-${this.model.slug}`),
-      __typename: TYPE_MAP[this.model.__typename],
+      id: btoa(`Answer:dv-answer-${this.args.model.slug}`),
+      __typename: TYPE_MAP[this.args.model.__typename],
     };
 
     // The value depends on where it comes from. If there is a default value
     // present on load the `value.content` will be set. After an update through
     // this component the value will be a POJO on `value`.
     const answer = {
-      ...(this.value?.content || this.value || newAnswer),
+      ...(this.args._value?.content || this.args._value || newAnswer),
       question: this.question,
     };
 
@@ -108,7 +97,7 @@ export default class CfbFormEditorQuestionDefault extends RenderComponent {
       .factoryFor("caluma-model:document")
       .create({
         raw: {
-          id: btoa(`Document:dv-document-${this.model.slug}`),
+          id: btoa(`Document:dv-document-${this.args.model.slug}`),
           rootForm,
           forms: [rootForm],
           answers: [answer],
@@ -119,12 +108,13 @@ export default class CfbFormEditorQuestionDefault extends RenderComponent {
     return document.findField(this.question.slug);
   }
 
-  @action async onUpdate(value) {
-    set(this, "field.answer.value", value);
+  @action
+  async onUpdate(value) {
+    this.field.answer.value = value;
 
     await this.field.validate.perform();
 
-    this.update({
+    this.args.update({
       [this.field.answer._valueKey]: this.field.answer.serializedValue,
       __typename: this.field.answer.__typename,
       id: this.field.answer.id,
@@ -132,9 +122,9 @@ export default class CfbFormEditorQuestionDefault extends RenderComponent {
 
     if (this.field.errors.length > 0) {
       // The errors must be pushed after calling update.
-      this.model.pushErrors(this.name, ...this.field.errors);
+      this.args.model.pushErrors(this.args.name, ...this.field.errors);
     }
 
-    this.setDirty();
+    this.args.setDirty();
   }
 }