@projectcaluma/ember-form-builder 11.0.0-beta.2 → 11.0.0-beta.26

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

@@ -140,6 +140,7 @@
           @label={{t "caluma.form-builder.question.confirmationText"}}
           @name="infoText"
           @type="textarea"
+          {{autoresize mode="height"}}
         />
       {{else}}
         <div class="uk-margin">
@@ -163,6 +164,13 @@
         </div>
       {{/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")}}
         <f.input
           @name="placeholder"
@@ -207,13 +215,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}}
 
@@ -295,10 +303,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 +336,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"
@@ -366,7 +374,7 @@
             >
               {{#each this.model.rowForm.questions.edges as |rowEdge|}}
                 {{#let rowEdge.node as |row|}}
-                  <label class="cf-checkbox_label">
+                  <label>
                     <input
                       type="checkbox"
                       value={{row.slug}}
@@ -403,9 +411,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 +445,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,12 +453,11 @@
         @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
         @color="link"
-        @on-click={{toggle-action "showAdvanced" this}}
+        @onClick={{toggle-action "showAdvanced" this}}
         class="uk-flex uk-flex-middle uk-margin"
       >
         {{#if this.showAdvanced}}
@@ -468,7 +475,6 @@
             @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}}
 
@@ -495,6 +501,14 @@
             />
           </div>
         {{/if}}
+
+        <div class="uk-margin">
+          <f.input
+            @label={{t "caluma.form-builder.question.meta"}}
+            @name="meta"
+            @renderComponent={{component "cfb-code-editor" language="json"}}
+          />
+        </div>
       {{/if}}
 
       <div class="uk-text-right">

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";
@@ -28,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";
@@ -55,7 +53,7 @@ export const TYPES = {
   DynamicChoiceQuestion: saveDynamicChoiceQuestionMutation,
   TableQuestion: saveTableQuestionMutation,
   FormQuestion: saveFormQuestionMutation,
-  FileQuestion: saveFileQuestionMutation,
+  FilesQuestion: saveFilesQuestionMutation,
   StaticQuestion: saveStaticQuestionMutation,
   DateQuestion: saveDateQuestionMutation,
   CalculatedFloatQuestion: saveCalculatedFloatQuestionMutation,
@@ -107,6 +105,7 @@ export default class CfbFormEditorQuestion extends Component {
             subForm: {},
             meta: {},
             dataSource: "",
+            formatValidators: null,
             // action button
             action: ACTIONS[0],
             color: COLORS[0],
@@ -143,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
@@ -183,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() {
@@ -213,16 +208,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 +240,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 +249,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 +258,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 +270,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 +333,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"),
     };
   }
 
@@ -326,7 +353,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 +433,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 +446,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

@@ -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"],
   };
 }
 

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 FilesQuestion {
+    hintText
   }
   ... on ActionButtonQuestion {
     action
@@ -112,6 +123,7 @@ fragment FieldTableQuestion on Question {
         }
       }
     }
+    hintText
     tableDefaultAnswer: defaultAnswer {
       id
       value {
@@ -204,8 +216,8 @@ fragment SimpleAnswer on Answer {
   ... on ListAnswer {
     listValue: value
   }
-  ... on FileAnswer {
-    fileValue: value {
+  ... on FilesAnswer {
+    filesValue: value {
       id
       uploadUrl
       downloadUrl

package/addon/gql/mutations/add-form-question.graphql

@@ -6,7 +6,7 @@ mutation AddFormQuestion($input: AddFormQuestionInput!, $search: String) {
     form {
       id
       ...FormInfo
-      questions(search: $search) {
+      questions(filter: [{ search: $search }]) {
         edges {
           node {
             id

package/addon/gql/mutations/remove-form-question.graphql

@@ -6,7 +6,7 @@ mutation RemoveFormQuestion($input: RemoveFormQuestionInput!, $search: String) {
     form {
       id
       ...FormInfo
-      questions(search: $search) {
+      questions(filter: [{ search: $search }]) {
         edges {
           node {
             id

package/addon/gql/mutations/reorder-form-questions.graphql

@@ -9,7 +9,7 @@ mutation ReorderFormQuestions(
     form {
       id
       ...FormInfo
-      questions(search: $search) {
+      questions(filter: [{ search: $search }]) {
         edges {
           node {
             id

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