@projectcaluma/ember-form-builder 11.0.0-beta.1 → 11.0.0-beta.12

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

@@ -1,16 +1,14 @@
-import { getOwner } from "@ember/application";
 import { A } from "@ember/array";
 import { action } from "@ember/object";
 import { inject as service } from "@ember/service";
 import { camelize } from "@ember/string";
+import { macroCondition, isTesting } from "@embroider/macros";
 import Component from "@glimmer/component";
 import { tracked } from "@glimmer/tracking";
 import { queryManager } from "ember-apollo-client";
 import Changeset from "ember-changeset";
 import lookupValidator from "ember-changeset-validations";
-import { optional } from "ember-composable-helpers/helpers/optional";
 import { dropTask, restartableTask, task, timeout } from "ember-concurrency";
-import { all } from "rsvp";
 
 import { hasQuestionType } from "@projectcaluma/ember-core/helpers/has-question-type";
 import slugify from "@projectcaluma/ember-core/utils/slugify";
@@ -107,6 +105,7 @@ export default class CfbFormEditorQuestion extends Component {
             subForm: {},
             meta: {},
             dataSource: "",
+            formatValidators: null,
             // action button
             action: ACTIONS[0],
             color: COLORS[0],
@@ -183,16 +182,10 @@ export default class CfbFormEditorQuestion extends Component {
 
   get availableOverrides() {
     const type = this.changeset.get("__typename");
-    const overrides = this.calumaOptions
-      .getComponentOverrides()
-      .filter((override) => {
-        return !override.types || override.types.includes(type);
-      });
 
-    return [
-      { label: this.intl.t("caluma.form.power-select.null"), component: "" },
-      ...overrides,
-    ];
+    return this.calumaOptions.getComponentOverrides().filter((override) => {
+      return !override.types || override.types.includes(type);
+    });
   }
 
   get model() {
@@ -213,16 +206,20 @@ export default class CfbFormEditorQuestion extends Component {
     const slug =
       ((!this.args.slug && this.prefix) || "") + changeset.get("slug");
 
+    const rawMeta = changeset.get("meta");
+
     const input = {
       slug,
       label: changeset.get("label"),
       isHidden: changeset.get("isHidden"),
       infoText: changeset.get("infoText"),
-      meta: JSON.stringify(changeset.get("meta").unwrap()),
+      meta: JSON.stringify(rawMeta?.unwrap?.() ?? rawMeta),
       isArchived: changeset.get("isArchived"),
     };
 
-    if (!hasQuestionType(changeset, "static", "calculated-float")) {
+    if (
+      !hasQuestionType(changeset, "static", "calculated-float", "action-button")
+    ) {
       Object.assign(input, {
         isRequired: changeset.get("isRequired"),
       });
@@ -241,6 +238,7 @@ export default class CfbFormEditorQuestion extends Component {
       minValue: parseInt(changeset.get("integerMinValue")),
       maxValue: parseInt(changeset.get("integerMaxValue")),
       placeholder: changeset.get("placeholder"),
+      hintText: changeset.get("hintText"),
     };
   }
 
@@ -249,6 +247,7 @@ export default class CfbFormEditorQuestion extends Component {
       minValue: parseFloat(changeset.get("floatMinValue")),
       maxValue: parseFloat(changeset.get("floatMaxValue")),
       placeholder: changeset.get("placeholder"),
+      hintText: changeset.get("hintText"),
     };
   }
 
@@ -257,6 +256,10 @@ export default class CfbFormEditorQuestion extends Component {
       minLength: parseInt(changeset.get("minLength")),
       maxLength: parseInt(changeset.get("maxLength")),
       placeholder: changeset.get("placeholder"),
+      formatValidators: changeset
+        .get("formatValidators")
+        ?.edges.map((edge) => edge.node.slug),
+      hintText: changeset.get("hintText"),
     };
   }
 
@@ -265,36 +268,51 @@ export default class CfbFormEditorQuestion extends Component {
       minLength: parseInt(changeset.get("minLength")),
       maxLength: parseInt(changeset.get("maxLength")),
       placeholder: changeset.get("placeholder"),
+      formatValidators: changeset
+        .get("formatValidators")
+        ?.edges.map((edge) => edge.node.slug),
+      hintText: changeset.get("hintText"),
+    };
+  }
+
+  _getDateQuestionInput(changeset) {
+    return {
+      hintText: changeset.get("hintText"),
     };
   }
 
   _getMultipleChoiceQuestionInput(changeset) {
     return {
       options: changeset.get("options.edges").map(({ node: { slug } }) => slug),
+      hintText: changeset.get("hintText"),
     };
   }
 
   _getChoiceQuestionInput(changeset) {
     return {
       options: changeset.get("options.edges").map(({ node: { slug } }) => slug),
+      hintText: changeset.get("hintText"),
     };
   }
 
   _getDynamicMultipleChoiceQuestionInput(changeset) {
     return {
       dataSource: changeset.get("dataSource"),
+      hintText: changeset.get("hintText"),
     };
   }
 
   _getDynamicChoiceQuestionInput(changeset) {
     return {
       dataSource: changeset.get("dataSource"),
+      hintText: changeset.get("hintText"),
     };
   }
 
   _getTableQuestionInput(changeset) {
     return {
       rowForm: changeset.get("rowForm.slug"),
+      hintText: changeset.get("hintText"),
     };
   }
 
@@ -313,6 +331,13 @@ export default class CfbFormEditorQuestion extends Component {
   _getCalculatedFloatQuestionInput(changeset) {
     return {
       calcExpression: changeset.get("calcExpression"),
+      hintText: changeset.get("hintText"),
+    };
+  }
+
+  _getFileQuestionInput(changeset) {
+    return {
+      hintText: changeset.get("hintText"),
     };
   }
 
@@ -326,7 +351,7 @@ export default class CfbFormEditorQuestion extends Component {
 
   @task
   *saveOptions(changeset) {
-    yield all(
+    yield Promise.all(
       (changeset.get("options.edges") || []).map(async ({ node: option }) => {
         const { label, slug, isArchived } = option;
 
@@ -406,7 +431,7 @@ export default class CfbFormEditorQuestion extends Component {
         this.intl.t("caluma.form-builder.notification.question.save.success")
       );
 
-      optional([this.args["on-after-submit"]])(question);
+      this.args.onAfterSubmit?.(question);
     } catch (e) {
       // eslint-disable-next-line no-console
       console.error(e);
@@ -419,10 +444,9 @@ export default class CfbFormEditorQuestion extends Component {
   @restartableTask
   *validateSlug(slug, changeset) {
     /* istanbul ignore next */
-    if (
-      getOwner(this).resolveRegistration("config:environment").environment !==
-      "test"
-    ) {
+    if (macroCondition(isTesting())) {
+      // no timeout
+    } else {
       yield timeout(500);
     }
 

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

@@ -12,11 +12,11 @@
       {{else}}
         <CfbFormEditor::QuestionList
           @form={{@slug}}
-          @on-edit-question={{@on-edit-question}}
-          @on-create-question={{@on-create-question}}
-          @on-after-add-question={{@on-after-add-question}}
-          @on-after-remove-question={{@on-after-remove-question}}
-          @on-click-form={{@on-click-form}}
+          @onEditQuestion={{@onEditQuestion}}
+          @onCreateQuestion={{@onCreateQuestion}}
+          @onAfterAddQuestion={{@onAfterAddQuestion}}
+          @onAfterRemoveQuestion={{@onAfterRemoveQuestion}}
+          @onClickForm={{@onClickForm}}
         />
       {{/if}}
     </div>

package/addon/components/cfb-form-list/item.hbs

@@ -12,7 +12,7 @@
       type="button"
       uk-icon="pencil"
       class="uk-icon-button"
-      {{on "click" (fn (optional @on-edit-form) @item)}}
+      {{on "click" (fn (optional @onEditForm) @item)}}
     >
     </button>
   </span>

package/addon/components/cfb-form-list.hbs

@@ -1,18 +1,18 @@
 <div class="uk-flex uk-flex-between">
   <div class="uk-button-group">
-    {{#each (array "active" "archived" "all") as |category|}}
+    {{#each this.categories as |category|}}
       <UkButton
-        data-test-filter={{category}}
-        @on-click={{fn (perform this.setFilter) "category" category}}
-        @label={{t (concat "caluma.form-builder.form." category)}}
-        @class={{if (eq this.category category) "uk-button-primary" ""}}
+        data-test-filter={{category.value}}
+        @onClick={{fn @onUpdateCategory category.value}}
+        @label={{category.label}}
+        @color={{if (eq @category category.value) "primary"}}
       />
     {{/each}}
   </div>
   <div>
     <UkButton
       data-test-new-form
-      @on-click={{optional @on-new-form}}
+      @onClick={{optional @onNewForm}}
       @label={{t "caluma.form-builder.form.new"}}
     />
   </div>
@@ -26,8 +26,8 @@
     type="search"
     placeholder="{{t 'caluma.form-builder.global.search'}}..."
     aria-label="{{t 'caluma.form-builder.global.search'}}"
-    value={{this.search}}
-    {{on "input" (fn (perform this.setFilter) "search")}}
+    value={{@search}}
+    {{on "input" (perform this.search)}}
   />
 </div>
 
@@ -37,7 +37,7 @@
       <CfbFormList::Item
         data-test-form-list-item={{item.slug}}
         @item={{item}}
-        @on-edit-form={{@on-edit-form}}
+        @onEditForm={{@onEditForm}}
       />
     {{/each}}
     {{#if this.formsQuery.isLoading}}

package/addon/components/cfb-form-list.js

@@ -1,38 +1,71 @@
+import { inject as service } from "@ember/service";
+import { macroCondition, isTesting } from "@embroider/macros";
 import Component from "@glimmer/component";
-import { tracked } from "@glimmer/tracking";
 import { timeout, restartableTask } from "ember-concurrency";
 
 import { useCalumaQuery } from "@projectcaluma/ember-core/caluma-query";
 import { allForms } from "@projectcaluma/ember-core/caluma-query/queries";
 
 export default class ComponentsCfbFormListComponent extends Component {
+  @service intl;
+
   formsQuery = useCalumaQuery(this, allForms, () => ({
     options: { pageSize: 20 },
     filter: this.filter,
     order: [{ attribute: "NAME", direction: "ASC" }],
   }));
 
-  @tracked category = "active";
-  @tracked search = "";
+  get categories() {
+    return [
+      {
+        value: "active",
+        label: this.intl.t("caluma.form-builder.form.active"),
+      },
+      {
+        value: "archived",
+        label: this.intl.t("caluma.form-builder.form.isArchived"),
+      },
+      {
+        value: "published",
+        label: this.intl.t("caluma.form-builder.form.isPublished"),
+      },
+      {
+        value: "unpublished",
+        label: this.intl.t("caluma.form-builder.form.draft"),
+      },
+      { value: "all", label: this.intl.t("caluma.form-builder.form.all") },
+    ];
+  }
 
   get filter() {
     const isArchived =
-      this.category === "active"
+      this.args.category === "active"
         ? { isArchived: false }
-        : this.category === "archived"
+        : this.args.category === "archived"
         ? { isArchived: true }
         : null;
 
-    const search = this.search ? { search: this.search } : null;
+    const search = this.args.search ? { search: this.args.search } : null;
+
+    const isPublished =
+      this.args.category === "unpublished"
+        ? { isPublished: false }
+        : this.args.category === "published"
+        ? { isPublished: true }
+        : null;
 
-    return [isArchived, search].filter(Boolean) || null;
+    return [isArchived, isPublished, search].filter(Boolean) || null;
   }
 
   @restartableTask
-  *setFilter(name, eventOrValue) {
-    yield timeout(500);
+  *search(event) {
+    /* istanbul ignore next */
+    if (macroCondition(isTesting())) {
+      // no timeout
+    } else {
+      yield timeout(500);
+    }
 
-    this[name] =
-      eventOrValue instanceof Event ? eventOrValue.target.value : eventOrValue;
+    this.args.onUpdateSearch(event.target.value);
   }
 }

package/addon/components/cfb-toggle-switch.hbs

@@ -7,7 +7,7 @@
       @size={{@size}}
       @name={{@name}}
       @disabled={{@disabled}}
-      @on-toggle={{@update}}
+      @onToggle={{@update}}
     />
   </div>
 

package/addon/controllers/index.js

@@ -1,10 +1,16 @@
 import Controller from "@ember/controller";
 import { action } from "@ember/object";
 import { inject as service } from "@ember/service";
+import { tracked } from "@glimmer/tracking";
 
 export default class IndexController extends Controller {
   @service router;
 
+  queryParams = ["search", "category"];
+
+  @tracked search = "";
+  @tracked category = "active";
+
   @action
   newForm() {
     this.router.transitionTo("new");

package/addon/engine.js

@@ -6,16 +6,13 @@ import config from "./config/environment";
 
 const { modulePrefix } = config;
 
-/* eslint-disable ember/avoid-leaking-state-in-ember-objects */
-const Eng = Engine.extend({
-  modulePrefix,
-  Resolver,
+export default class FormBuilderEngine extends Engine {
+  modulePrefix = modulePrefix;
+  Resolver = Resolver;
 
-  dependencies: {
-    services: ["apollo", "notification", "intl", "caluma-options", "validator"],
-  },
-});
+  dependencies = {
+    services: ["apollo", "notification", "intl", "caluma-options"],
+  };
+}
 
-loadInitializers(Eng, modulePrefix);
-
-export default Eng;
+loadInitializers(FormBuilderEngine, modulePrefix);

package/addon/gql/fragments/field.graphql

@@ -19,6 +19,7 @@ fragment SimpleQuestion on Question {
       value
     }
     placeholder
+    hintText
   }
   ... on TextareaQuestion {
     textareaMinLength: minLength
@@ -28,6 +29,7 @@ fragment SimpleQuestion on Question {
       value
     }
     placeholder
+    hintText
   }
   ... on IntegerQuestion {
     integerMinValue: minValue
@@ -37,6 +39,7 @@ fragment SimpleQuestion on Question {
       value
     }
     placeholder
+    hintText
   }
   ... on FloatQuestion {
     floatMinValue: minValue
@@ -46,6 +49,7 @@ fragment SimpleQuestion on Question {
       value
     }
     placeholder
+    hintText
   }
   ... on ChoiceQuestion {
     choiceOptions: options {
@@ -62,6 +66,7 @@ fragment SimpleQuestion on Question {
       id
       value
     }
+    hintText
   }
   ... on MultipleChoiceQuestion {
     multipleChoiceOptions: options {
@@ -78,18 +83,24 @@ fragment SimpleQuestion on Question {
       id
       value
     }
+    hintText
   }
   ... on DateQuestion {
     dateDefaultAnswer: defaultAnswer {
       id
       value
     }
+    hintText
   }
   ... on StaticQuestion {
     staticContent
   }
   ... on CalculatedFloatQuestion {
     calcExpression
+    hintText
+  }
+  ... on FileQuestion {
+    hintText
   }
   ... on ActionButtonQuestion {
     action
@@ -112,6 +123,7 @@ fragment FieldTableQuestion on Question {
         }
       }
     }
+    hintText
     tableDefaultAnswer: defaultAnswer {
       id
       value {

package/addon/gql/mutations/save-calculated-float-question.graphql

@@ -9,6 +9,7 @@ mutation SaveCalculatedFloatQuestion(
       ...QuestionInfo
       ... on CalculatedFloatQuestion {
         calcExpression
+        hintText
       }
     }
     clientMutationId

package/addon/gql/mutations/save-choice-question.graphql

@@ -15,6 +15,7 @@ mutation SaveChoiceQuestion($input: SaveChoiceQuestionInput!) {
             }
           }
         }
+        hintText
       }
     }
     clientMutationId

package/addon/gql/mutations/save-date-question.graphql

@@ -5,6 +5,9 @@ mutation SaveDateQuestion($input: SaveDateQuestionInput!) {
     question {
       id
       ...QuestionInfo
+      ... on DateQuestion {
+        hintText
+      }
     }
     clientMutationId
   }

package/addon/gql/mutations/save-dynamic-choice-question.graphql

@@ -7,6 +7,7 @@ mutation SaveDynamicChoiceQuestion($input: SaveDynamicChoiceQuestionInput!) {
       ...QuestionInfo
       ... on DynamicChoiceQuestion {
         dataSource
+        hintText
       }
     }
     clientMutationId

package/addon/gql/mutations/save-dynamic-multiple-choice-question.graphql

@@ -9,6 +9,7 @@ mutation SaveDynamicMultipleChoiceQuestion(
       ...QuestionInfo
       ... on DynamicMultipleChoiceQuestion {
         dataSource
+        hintText
       }
     }
     clientMutationId

package/addon/gql/mutations/save-file-question.graphql

@@ -5,6 +5,9 @@ mutation SaveFileQuestion($input: SaveFileQuestionInput!) {
     question {
       id
       ...QuestionInfo
+      ... on FileQuestion {
+        hintText
+      }
     }
     clientMutationId
   }

package/addon/gql/mutations/save-float-question.graphql

@@ -8,6 +8,7 @@ mutation SaveFloatQuestion($input: SaveFloatQuestionInput!) {
       ... on FloatQuestion {
         floatMinValue: minValue
         floatMaxValue: maxValue
+        hintText
       }
     }
     clientMutationId

package/addon/gql/mutations/save-integer-question.graphql

@@ -8,6 +8,7 @@ mutation SaveIntegerQuestion($input: SaveIntegerQuestionInput!) {
       ... on IntegerQuestion {
         integerMinValue: minValue
         integerMaxValue: maxValue
+        hintText
       }
     }
     clientMutationId

package/addon/gql/mutations/save-multiple-choice-question.graphql

@@ -15,6 +15,7 @@ mutation SaveMultipleChoiceQuestion($input: SaveMultipleChoiceQuestionInput!) {
             }
           }
         }
+        hintText
       }
     }
     clientMutationId

package/addon/gql/mutations/save-table-question.graphql

@@ -10,6 +10,7 @@ mutation SaveTableQuestion($input: SaveTableQuestionInput!) {
           id
           slug
         }
+        hintText
       }
     }
     clientMutationId

package/addon/gql/mutations/save-text-question.graphql

@@ -8,6 +8,7 @@ mutation SaveTextQuestion($input: SaveTextQuestionInput!) {
       ... on TextQuestion {
         minLength
         maxLength
+        hintText
       }
     }
     clientMutationId

package/addon/gql/mutations/save-textarea-question.graphql

@@ -8,6 +8,7 @@ mutation SaveTextareaQuestion($input: SaveTextareaQuestionInput!) {
       ... on TextareaQuestion {
         minLength
         maxLength
+        hintText
       }
     }
     clientMutationId

package/addon/gql/queries/all-format-validators.graphql

@@ -0,0 +1,10 @@
+query AllFormatValidators {
+  allFormatValidators {
+    edges {
+      node {
+        slug
+        name
+      }
+    }
+  }
+}