@projectcaluma/ember-form-builder 11.0.0-beta.3 → 11.0.0-beta.30

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

@@ -113,26 +113,11 @@
       {{/if}}
 
       {{#if (has-question-type f.model "static")}}
-        <div class="uk-margin">
-          <f.input
-            @label={{t "caluma.form-builder.question.staticContent"}}
-            @name="staticContent"
-            @renderComponent={{component
-              "cfb-code-editor"
-              language="markdown"
-              className="uk-margin-remove-bottom"
-            }}
-            class="uk-margin-remove-bottom"
-          />
-          <small class="uk-text-muted">
-            {{t "caluma.form-builder.question.supportsMarkdownPrefix"}}
-            <a
-              target="_blank"
-              rel="noopener noreferrer"
-              href="https://www.markdownguide.org/basic-syntax"
-            >{{t "caluma.form-builder.question.markdown"}}</a>
-          </small>
-        </div>
+        <f.input
+          @label={{t "caluma.form-builder.question.staticContent"}}
+          @name="staticContent"
+          @renderComponent={{component "cfb-code-editor" language="markdown"}}
+        />
       {{/if}}
 
       {{#if (has-question-type f.model "action-button")}}
@@ -140,27 +125,21 @@
           @label={{t "caluma.form-builder.question.confirmationText"}}
           @name="infoText"
           @type="textarea"
+          {{autoresize mode="height"}}
         />
       {{else}}
-        <div class="uk-margin">
-          <f.input
-            @label={{t "caluma.form-builder.question.infoText"}}
-            @name="infoText"
-            @renderComponent={{component
-              "cfb-code-editor"
-              language="markdown"
-              className="uk-margin-remove-bottom"
-            }}
-          />
-          <small class="uk-text-muted">
-            {{t "caluma.form-builder.question.supportsMarkdownPrefix"}}
-            <a
-              target="_blank"
-              rel="noopener noreferrer"
-              href="https://www.markdownguide.org/basic-syntax"
-            >{{t "caluma.form-builder.question.markdown"}}</a>
-          </small>
-        </div>
+        <f.input
+          @label={{t "caluma.form-builder.question.infoText"}}
+          @name="infoText"
+          @renderComponent={{component "cfb-code-editor" language="markdown"}}
+        />
+      {{/if}}
+
+      {{#if (not (has-question-type f.model "action-button" "static" "form"))}}
+        <f.input
+          @name="hintText"
+          @label={{t "caluma.form-builder.question.hintText"}}
+        />
       {{/if}}
 
       {{#if (has-question-type f.model "text" "textarea" "integer" "float")}}
@@ -207,13 +186,13 @@
         />
 
         <f.input
-          @name="meta.formatValidators"
+          @name="formatValidators"
           @label={{t "caluma.form-builder.question.formatValidators"}}
-          @placeholder={{t "caluma.form-builder.question.choose"}}
+          @placeholder={{t "caluma.form-builder.question.no-selection"}}
           @required={{false}}
           @renderComponent={{component "cfb-form-editor/question/validation"}}
-          @on-update={{changeset-set f.model "meta.formatValidators"}}
-          @value={{changeset-get f.model "meta.formatValidators"}}
+          @on-update={{changeset-set f.model "formatValidators"}}
+          @value={{changeset-get f.model "formatValidators"}}
         />
       {{/if}}
 
@@ -242,17 +221,18 @@
         <div uk-grid class="uk-grid-small uk-child-width-1-2 uk-margin">
           <div>
             <f.input
+              @type="number"
               @name="floatMinValue"
               @label={{t "caluma.form-builder.question.min-value"}}
-              @renderComponent={{component "cfb-float-input"}}
+              step="any"
             />
           </div>
-
           <div>
             <f.input
+              @type="number"
               @name="floatMaxValue"
               @label={{t "caluma.form-builder.question.max-value"}}
-              @renderComponent={{component "cfb-float-input"}}
+              step="any"
             />
           </div>
         </div>
@@ -295,10 +275,10 @@
           @type="select"
           @required={{true}}
           @label={{t "caluma.form-builder.question.dataSource"}}
-          @options={{or this.availableDataSources.lastSuccessful.value array}}
+          @options={{or this.availableDataSources.lastSuccessful.value (array)}}
           @optionTargetPath="name"
           @optionLabelPath="info"
-          @includeBlank={{t "caluma.form-builder.question.choose"}}
+          @prompt={{t "caluma.form-builder.question.no-selection"}}
         />
       {{/if}}
 
@@ -328,9 +308,9 @@
             as |fi|
           >
             <PowerSelect
-              @options={{or this.availableForms.lastSuccessful.value array}}
+              @options={{or this.availableForms.lastSuccessful.value (array)}}
               @selected={{fi.value}}
-              @placeholder={{t "caluma.form-builder.question.choose"}}
+              @placeholder={{t "caluma.form-builder.question.no-selection"}}
               @onBlur={{fi.setDirty}}
               @onChange={{fi.update}}
               @searchField="slug"
@@ -359,33 +339,12 @@
         </div>
 
         {{#if @slug}}
-          <div class="uk-margin">
-            <f.input
-              @name="meta.columnsToDisplay"
-              @label={{t "caluma.form-builder.question.columnsToDisplay"}}
-            >
-              {{#each this.model.rowForm.questions.edges as |rowEdge|}}
-                {{#let rowEdge.node as |row|}}
-                  <label class="cf-checkbox_label">
-                    <input
-                      type="checkbox"
-                      value={{row.slug}}
-                      checked={{includes
-                        row.slug
-                        this.model.meta.columnsToDisplay
-                      }}
-                      class="uk-checkbox uk-margin-small-right"
-                      {{on
-                        "change"
-                        (fn this.toggleColumnToDisplay row.slug f.model)
-                      }}
-                    />
-                    {{row.label}}
-                  </label>
-                {{/let}}
-              {{/each}}
-            </f.input>
-          </div>
+          <f.input
+            @type="checkbox-group"
+            @name="meta.columnsToDisplay"
+            @label={{t "caluma.form-builder.question.columnsToDisplay"}}
+            @options={{this.columnsToDisplayOptions}}
+          />
         {{/if}}
       {{/if}}
 
@@ -403,9 +362,9 @@
           as |fi|
         >
           <PowerSelect
-            @options={{or this.availableForms.lastSuccessful.value array}}
+            @options={{or this.availableForms.lastSuccessful.value (array)}}
             @selected={{fi.value}}
-            @placeholder={{t "caluma.form-builder.question.choose"}}
+            @placeholder={{t "caluma.form-builder.question.no-selection"}}
             @onBlur={{fi.setDirty}}
             @onChange={{fi.update}}
             @searchField="slug"
@@ -437,7 +396,7 @@
         @optionTargetPath="component"
         @optionLabelPath="label"
         @options={{this.availableOverrides}}
-        class="uk-flex uk-flex-between uk-flex-column"
+        @prompt={{t "caluma.form-builder.question.no-selection"}}
       />
 
       <f.input
@@ -445,7 +404,6 @@
         @label={{t "caluma.form-builder.question.isArchived"}}
         @required={{true}}
         @renderComponent={{component "cfb-toggle-switch" size="small"}}
-        class="uk-flex uk-flex-between uk-flex-column"
       />
 
       <UkButton
@@ -468,17 +426,14 @@
             @required={{true}}
             @label={{t "caluma.form-builder.question.validateOnEnter"}}
             @renderComponent={{component "cfb-toggle-switch" size="small"}}
-            class="uk-flex uk-flex-between uk-flex-column"
           />
         {{/if}}
 
-        <div class="uk-margin">
-          <f.input
-            @label={{t "caluma.form-builder.question.isHidden"}}
-            @name="isHidden"
-            @renderComponent={{component "cfb-code-editor" language="jexl"}}
-          />
-        </div>
+        <f.input
+          @label={{t "caluma.form-builder.question.isHidden"}}
+          @name="isHidden"
+          @renderComponent={{component "cfb-code-editor" language="jexl"}}
+        />
 
         {{#if
           (not
@@ -487,14 +442,18 @@
             )
           )
         }}
-          <div class="uk-margin">
-            <f.input
-              @label={{t "caluma.form-builder.question.isRequired"}}
-              @name="isRequired"
-              @renderComponent={{component "cfb-code-editor" language="jexl"}}
-            />
-          </div>
+          <f.input
+            @label={{t "caluma.form-builder.question.isRequired"}}
+            @name="isRequired"
+            @renderComponent={{component "cfb-code-editor" language="jexl"}}
+          />
         {{/if}}
+
+        <f.input
+          @label={{t "caluma.form-builder.question.meta"}}
+          @name="meta"
+          @renderComponent={{component "cfb-code-editor" language="json"}}
+        />
       {{/if}}
 
       <div class="uk-text-right">

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

@@ -1,15 +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 { 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";
@@ -27,7 +26,7 @@ import saveDefaultStringAnswerMutation from "@projectcaluma/ember-form-builder/g
 import saveDefaultTableAnswerMutation from "@projectcaluma/ember-form-builder/gql/mutations/save-default-table-answer.graphql";
 import saveDynamicChoiceQuestionMutation from "@projectcaluma/ember-form-builder/gql/mutations/save-dynamic-choice-question.graphql";
 import saveDynamicMultipleChoiceQuestionMutation from "@projectcaluma/ember-form-builder/gql/mutations/save-dynamic-multiple-choice-question.graphql";
-import saveFileQuestionMutation from "@projectcaluma/ember-form-builder/gql/mutations/save-file-question.graphql";
+import saveFilesQuestionMutation from "@projectcaluma/ember-form-builder/gql/mutations/save-files-question.graphql";
 import saveFloatQuestionMutation from "@projectcaluma/ember-form-builder/gql/mutations/save-float-question.graphql";
 import saveFormQuestionMutation from "@projectcaluma/ember-form-builder/gql/mutations/save-form-question.graphql";
 import saveIntegerQuestionMutation from "@projectcaluma/ember-form-builder/gql/mutations/save-integer-question.graphql";
@@ -54,7 +53,7 @@ export const TYPES = {
   DynamicChoiceQuestion: saveDynamicChoiceQuestionMutation,
   TableQuestion: saveTableQuestionMutation,
   FormQuestion: saveFormQuestionMutation,
-  FileQuestion: saveFileQuestionMutation,
+  FilesQuestion: saveFilesQuestionMutation,
   StaticQuestion: saveStaticQuestionMutation,
   DateQuestion: saveDateQuestionMutation,
   CalculatedFloatQuestion: saveCalculatedFloatQuestionMutation,
@@ -106,6 +105,7 @@ export default class CfbFormEditorQuestion extends Component {
             subForm: {},
             meta: {},
             dataSource: "",
+            formatValidators: null,
             // action button
             action: ACTIONS[0],
             color: COLORS[0],
@@ -142,7 +142,9 @@ export default class CfbFormEditorQuestion extends Component {
     if (!forms.map) {
       return [];
     }
-    return forms.mapBy("node").filter((form) => form.slug !== this.args.form);
+    return forms
+      .filter((edge) => edge.node.slug !== this.args.form)
+      .map((edge) => edge.node);
   }
 
   @restartableTask
@@ -182,20 +184,14 @@ 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() {
-    return this.data.lastSuccessful?.value?.firstObject?.node;
+    return this.data.lastSuccessful?.value?.[0]?.node;
   }
 
   get changeset() {
@@ -208,20 +204,31 @@ export default class CfbFormEditorQuestion extends Component {
       : "";
   }
 
+  get columnsToDisplayOptions() {
+    return this.model.rowForm?.questions.edges.map((edge) => ({
+      key: edge.node.slug,
+      label: edge.node.label,
+    }));
+  }
+
   getInput(changeset) {
     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"),
       });
@@ -240,6 +247,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"),
     };
   }
 
@@ -248,6 +256,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"),
     };
   }
 
@@ -256,6 +265,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"),
     };
   }
 
@@ -264,36 +277,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"),
     };
   }
 
@@ -312,6 +340,13 @@ export default class CfbFormEditorQuestion extends Component {
   _getCalculatedFloatQuestionInput(changeset) {
     return {
       calcExpression: changeset.get("calcExpression"),
+      hintText: changeset.get("hintText"),
+    };
+  }
+
+  _getFilesQuestionInput(changeset) {
+    return {
+      hintText: changeset.get("hintText"),
     };
   }
 
@@ -325,7 +360,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;
 
@@ -418,10 +453,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);
     }
 
@@ -469,19 +503,6 @@ export default class CfbFormEditorQuestion extends Component {
     this.validateSlug.perform(this.prefix + value, changeset);
   }
 
-  /*
-   * This function adds the selected slugs to the columns to display
-   * list if it isnt present, otherwise it will remove the slug.
-   */
-  @action
-  toggleColumnToDisplay(value, changeset) {
-    const displayed = new Set(changeset.get("meta.columnsToDisplay"));
-
-    displayed.delete(value) || displayed.add(value);
-
-    changeset.set("meta.columnsToDisplay", [...displayed]);
-  }
-
   @action
   updateSubForm(value, changeset) {
     changeset.set("subForm.slug", value.slug);

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

@@ -1,11 +1,11 @@
 <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}}
-        @onClick={{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>
@@ -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>
 

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/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

@@ -11,7 +11,7 @@ export default class FormBuilderEngine extends Engine {
   Resolver = Resolver;
 
   dependencies = {
-    services: ["apollo", "notification", "intl", "caluma-options", "validator"],
+    services: ["apollo", "notification", "intl", "caluma-options"],
   };
 }