@projectcaluma/ember-form 11.0.0-beta.16 → 11.0.0-beta.17

package/CHANGELOG.md

@@ -1,3 +1,26 @@
+# [@projectcaluma/ember-form-v11.0.0-beta.17](https://github.com/projectcaluma/ember-caluma/compare/@projectcaluma/ember-form-v11.0.0-beta.16...@projectcaluma/ember-form-v11.0.0-beta.17) (2022-04-07)
+
+
+### Bug Fixes
+
+* **form:** fix error status indicator for backend errors ([03fc27e](https://github.com/projectcaluma/ember-caluma/commit/03fc27e0626edf3a6f774c41d25485158ee6a99d)), closes [#1877](https://github.com/projectcaluma/ember-caluma/issues/1877)
+
+
+### Features
+
+* **cf-field:** add optional hints for form fields ([d847fbf](https://github.com/projectcaluma/ember-caluma/commit/d847fbffa376ea60971fb9e91aff8bf54ce77d50))
+* **form:** show technical details of backend errors in UI ([c34cda6](https://github.com/projectcaluma/ember-caluma/commit/c34cda691f78623f41da1f9d75a39efce7e0ff0f))
+
+
+### BREAKING CHANGES
+
+* **cf-field:** Question hints requires Caluma >= v7.15.0
+
+Add option to create hints for certain question types. These
+are displayed below the input field and can be used to provide
+short, informative messages. Hints are available for all question
+types except for form, static and action button questions.
+
 # [@projectcaluma/ember-form-v11.0.0-beta.16](https://github.com/projectcaluma/ember-caluma/compare/@projectcaluma/ember-form-v11.0.0-beta.15...@projectcaluma/ember-form-v11.0.0-beta.16) (2022-03-23)
 
 

package/addon/components/cf-field/hint.hbs

@@ -0,0 +1,5 @@
+<div data-test-field-hint={{@field.pk}}>
+  <span class="uk-text-small uk-text-muted" ...attributes>
+    {{@field.question.raw.hintText}}
+  </span>
+</div>

package/addon/components/cf-field.hbs

@@ -38,7 +38,25 @@
           {{#if this.save.isRunning}}
             <UkSpinner class="uk-animation-fade" />
           {{else if (or this.save.last.isError @field.isInvalid)}}
-            <UkIcon @icon="warning" class="uk-animation-fade uk-text-danger" />
+            <div class="uk-flex-inline">
+              <UkIcon
+                @icon="warning"
+                class="uk-animation-fade uk-text-danger"
+              />
+              {{#if this.save.last.error}}
+                <div uk-dropdown="pos: bottom-left" class="uk-padding-small">
+                  <div class="uk-alert uk-alert-danger uk-margin-small">
+                    {{t "caluma.form.error.intro"}}
+                  </div>
+                  <p class="uk-text-meta uk-margin-small">
+                    {{t "caluma.form.error.details"}}
+                  </p>
+                  <pre class="uk-margin-remove">
+                    {{~format-graphql-error this.save.last.error~}}
+                  </pre>
+                </div>
+              {{/if}}
+            </div>
           {{else if this.save.last.isSuccessful}}
             <UkIcon @icon="check" class="uk-animation-fade uk-text-success" />
           {{/if}}
@@ -46,6 +64,10 @@
       {{/if}}
     </div>
 
+    {{#if (and @field.question.raw.hintText this.hintTextVisible)}}
+      <CfField::hint @field={{@field}} />
+    {{/if}}
+
     {{#if @field.errors.length}}
       <CfField::errors @field={{@field}} />
     {{/if}}

package/addon/components/cf-field.js

@@ -46,6 +46,15 @@ export default class CfFieldComponent extends Component {
     return !hasQuestionType(this.args.field?.question, "action-button");
   }
 
+  get hintTextVisible() {
+    return !hasQuestionType(
+      this.args.field?.question,
+      "action-button",
+      "static",
+      "form"
+    );
+  }
+
   get saveIndicatorVisible() {
     return !hasQuestionType(this.args.field?.question, "action-button");
   }
@@ -73,12 +82,6 @@ export default class CfFieldComponent extends Component {
 
     yield this.args.field.validate.perform();
 
-    try {
-      // Save the new field value unlinked so the fields save task is not
-      // aborted when this component is destroyed
-      return yield this.args.field.save.unlinked().perform();
-    } catch (e) {
-      // The component was destroyed before the fields save task was finished
-    }
+    return yield this.args.field.save.unlinked().perform();
   }
 }

package/addon/gql/fragments/field.graphql

@@ -28,6 +28,7 @@ fragment SimpleQuestion on Question {
         }
       }
     }
+    hintText
   }
   ... on TextareaQuestion {
     textareaMinLength: minLength
@@ -46,6 +47,7 @@ fragment SimpleQuestion on Question {
         }
       }
     }
+    hintText
   }
   ... on IntegerQuestion {
     integerMinValue: minValue
@@ -55,6 +57,7 @@ fragment SimpleQuestion on Question {
       value
     }
     placeholder
+    hintText
   }
   ... on FloatQuestion {
     floatMinValue: minValue
@@ -64,6 +67,7 @@ fragment SimpleQuestion on Question {
       value
     }
     placeholder
+    hintText
   }
   ... on ChoiceQuestion {
     choiceOptions: options {
@@ -80,6 +84,7 @@ fragment SimpleQuestion on Question {
       id
       value
     }
+    hintText
   }
   ... on MultipleChoiceQuestion {
     multipleChoiceOptions: options {
@@ -96,18 +101,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
@@ -130,6 +141,7 @@ fragment FieldTableQuestion on Question {
         }
       }
     }
+    hintText
     tableDefaultAnswer: defaultAnswer {
       id
       value {

package/addon/helpers/format-graphql-error.js

@@ -0,0 +1,21 @@
+import { helper } from "@ember/component/helper";
+
+export function formatGraphqlErrorObject(error) {
+  try {
+    const path = error.path.join(".");
+    const { line, column } = error.locations.at(-1);
+
+    return `${path}:${line}:${column}: ${error.message}`;
+  } catch (e) {
+    return null;
+  }
+}
+
+export function formatGraphqlError(error) {
+  return (
+    error?.errors?.map(formatGraphqlErrorObject).filter(Boolean).join("\n") ??
+    ""
+  );
+}
+
+export default helper(([error]) => formatGraphqlError(error));

package/app/components/cf-field/hint.js

@@ -0,0 +1 @@
+export { default } from "@projectcaluma/ember-form/components/cf-field/hint";

package/app/helpers/format-graphql-error.js

@@ -0,0 +1 @@
+export { default } from "@projectcaluma/ember-form/helpers/format-graphql-error";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@projectcaluma/ember-form",
-  "version": "11.0.0-beta.16",
+  "version": "11.0.0-beta.17",
   "description": "Ember addon for rendering Caluma forms.",
   "keywords": [
     "ember-addon"
@@ -17,11 +17,11 @@
     "@ember/string": "^3.0.0",
     "@embroider/macros": "^1.5.0",
     "@embroider/util": "^1.5.0",
-    "@glimmer/component": "^1.0.4",
-    "@glimmer/tracking": "^1.0.4",
+    "@glimmer/component": "^1.1.1",
+    "@glimmer/tracking": "^1.1.1",
     "@projectcaluma/ember-core": "^11.0.0-beta.6",
     "ember-apollo-client": "^4.0.2",
-    "ember-auto-import": "^2.4.0",
+    "ember-auto-import": "^2.4.1",
     "ember-autoresize-modifier": "^0.5.0",
     "ember-cli-babel": "^7.26.11",
     "ember-cli-htmlbars": "^6.0.1",
@@ -29,7 +29,7 @@
     "ember-composable-helpers": "^5.0.0",
     "ember-concurrency": "^2.2.1",
     "ember-fetch": "^8.1.1",
-    "ember-in-viewport": "^4.0.0",
+    "ember-in-viewport": "^4.0.2",
     "ember-intl": "^5.7.2",
     "ember-math-helpers": "^2.18.1",
     "ember-pikaday": "^4.0.0",
@@ -45,11 +45,11 @@
   },
   "devDependencies": {
     "@ember/optional-features": "2.0.0",
-    "@ember/test-helpers": "2.6.0",
+    "@ember/test-helpers": "2.7.0",
     "@embroider/test-setup": "1.5.0",
-    "@faker-js/faker": "6.0.0",
-    "@projectcaluma/ember-testing": "11.0.0-beta.5",
-    "@projectcaluma/ember-workflow": "11.0.0-beta.5",
+    "@faker-js/faker": "6.1.2",
+    "@projectcaluma/ember-testing": "11.0.0-beta.6",
+    "@projectcaluma/ember-workflow": "11.0.0-beta.6",
     "broccoli-asset-rev": "3.0.0",
     "ember-cli": "3.28.5",
     "ember-cli-code-coverage": "1.0.3",
@@ -70,13 +70,13 @@
     "loader.js": "4.7.0",
     "miragejs": "0.1.43",
     "npm-run-all": "4.1.5",
-    "qunit": "2.18.0",
+    "qunit": "2.18.1",
     "qunit-dom": "2.0.0",
     "uuid": "8.3.2",
-    "webpack": "5.70.0"
+    "webpack": "5.71.0"
   },
   "peerDependencies": {
-    "@projectcaluma/ember-workflow": "^11.0.0-beta.5"
+    "@projectcaluma/ember-workflow": "^11.0.0-beta.6"
   },
   "peerDependenciesMeta": {
     "@projectcaluma/ember-workflow": {

package/translations/de.yaml

@@ -12,6 +12,10 @@ caluma:
     optionNotAvailable: "Diese Option ist nicht mehr verfügbar"
     info: "Mehr Informationen"
 
+    error:
+      intro: "Oh nein, auf unserer Seite ist etwas schief gelaufen. Ihre Antwort konnte nicht gespeichert werden."
+      details: "Technische Details:"
+
     navigation:
       next: "Weiter"
       previous: "Zurück"

package/translations/en.yaml

@@ -12,6 +12,10 @@ caluma:
     optionNotAvailable: "This option is not available anymore"
     info: "More information"
 
+    error:
+      intro: "Oh no, something went wrong on our side. Your answer could not be saved."
+      details: "Technical details:"
+
     navigation:
       next: "Next"
       previous: "Previous"

package/translations/fr.yaml

@@ -12,6 +12,10 @@ caluma:
     optionNotAvailable: "Cette option n'est plus disponible"
     info: "Plus d'informations"
 
+    error:
+      intro: "Oh non, quelque chose a mal tourné de notre côté. Votre réponse n'a pas pu être sauvegardée."
+      details: "Détails techniques :"
+
     navigation:
       next: "suivante"
       previous: "précédente"