@projectcaluma/ember-form 9.2.0 → 10.0.2

package/addon/components/cf-field/input/action-button.hbs

@@ -0,0 +1,19 @@
+{{#unless @disabled}}
+  <DocumentValidity
+    @document={{@field.document}}
+    @validateOnEnter={{this.validateOnEnter}}
+    as |isValid validate|
+  >
+    <WorkItemButton
+      @workItemId={{this.workItem}}
+      @mutation={{this.action}}
+      @label={{@field.question.label}}
+      @disabled={{and (not-eq isValid null) (not isValid)}}
+      @color={{this.color}}
+      @beforeMutate={{fn this.beforeMutate validate}}
+      @onSuccess={{this.onSuccess}}
+      @onError={{this.onError}}
+      @type={{this.type}}
+    />
+  </DocumentValidity>
+{{/unless}}

package/addon/components/cf-field/input/action-button.js

@@ -0,0 +1,75 @@
+import { assert } from "@ember/debug";
+import { action } from "@ember/object";
+import Component from "@glimmer/component";
+import UIkit from "uikit";
+
+async function confirm(text) {
+  try {
+    await UIkit.modal.confirm(text);
+
+    return true;
+  } catch (error) {
+    return false;
+  }
+}
+
+export default class CfFieldInputActionButtonComponent extends Component {
+  constructor(...args) {
+    super(...args);
+
+    assert(
+      "The document must have a `workItemUuid` for `<CfField::Input::ActionButton />` to work.",
+      this.args.field.document.workItemUuid
+    );
+  }
+
+  get workItem() {
+    return (
+      this.args.context?.actionButtonWorkItemId ||
+      this.args.field.document.workItemUuid
+    );
+  }
+
+  get action() {
+    return this.args.field.question.action.toLowerCase();
+  }
+
+  get color() {
+    return this.args.field.question.color.toLowerCase();
+  }
+
+  get type() {
+    return this.args.field.question.action === "COMPLETE" ? "submit" : "button";
+  }
+
+  get validateOnEnter() {
+    return (
+      this.args.field.question.action === "COMPLETE" &&
+      this.args.field.question.validateOnEnter
+    );
+  }
+
+  @action
+  async beforeMutate(validateFn) {
+    if (
+      this.args.field.question.action === "COMPLETE" &&
+      !(await validateFn())
+    ) {
+      return false;
+    }
+
+    const confirmText = this.args.field.question.infoText;
+
+    return !confirmText || confirm(confirmText);
+  }
+
+  @action
+  onSuccess() {
+    return this.args.context?.actionButtonOnSuccess?.();
+  }
+
+  @action
+  onError(error) {
+    return this.args.context?.actionButtonOnError?.(error);
+  }
+}

package/addon/components/cf-field/input/file.hbs

@@ -1,34 +1,32 @@
-{{#unless @disabled}}
-  <div uk-grid>
-    <div class="uk-width-expand" uk-form-custom="target: true">
+<div class="uk-flex-middle uk-grid-divider uk-grid-column-small" uk-grid>
+  <div uk-form-custom="target: true">
 
-      <input
-        type="file"
-        name={{@field.pk}}
-        id={{@field.pk}}
-        {{on "change" this.save}}
-      />
-
-      {{! label is in another component }}
-      {{! template-lint-disable require-input-label }}
-      <input
-        class="uk-input"
-        type="text"
-        placeholder={{this.placeholder}}
-        disabled
+    <input
+      type="file"
+      name={{@field.pk}}
+      id={{@field.pk}}
+      disabled={{@disabled}}
+      {{on "change" this.save}}
+    />
+    <UkButton @color="primary" @disabled={{@disabled}}>
+      {{t "caluma.form.selectFile"}}
+    </UkButton>
+  </div>
+  {{#if (and this.downloadUrl this.downloadName)}}
+    <div>
+      <UkButton
+        data-test-download-link
+        @color="link"
+        @on-click={{this.download}}
+      >
+        {{this.downloadName}}
+      </UkButton>
+      <UkIcon
+        class="uk-icon-button uk-margin-small-left"
+        role="button"
+        @icon="trash"
+        {{on "click" this.delete}}
       />
     </div>
-
-    {{#if this.downloadName}}
-      <div class="uk-flex uk-flex-middle uk-width-auto">
-        <UkIcon @icon="trash" role="button" {{on "click" this.delete}} />
-      </div>
-    {{/if}}
-  </div>
-{{/unless}}
-
-{{#if (and this.downloadUrl this.downloadName)}}
-  <UkButton @color="link" @on-click={{this.download}}>
-    {{this.downloadName}}
-  </UkButton>
-{{/if}}
+  {{/if}}
+</div>

package/addon/components/cf-field/input/file.js

@@ -19,14 +19,6 @@ export default class CfFieldInputFileComponent extends Component {
     return this.args.field?.answer?.value?.name;
   }
 
-  get placeholder() {
-    return this.intl.t(
-      this.args.field?.answer?.value
-        ? "caluma.form.changeFile"
-        : "caluma.form.selectFile"
-    );
-  }
-
   @action
   async download() {
     const { downloadUrl } = await this.apollo.watchQuery(
@@ -75,7 +67,6 @@ export default class CfFieldInputFileComponent extends Component {
     } finally {
       // eslint-disable-next-line require-atomic-updates
       target.value = "";
-      target.parentNode.querySelector("[type=text]").value = "";
     }
   }
 

package/addon/components/cf-field/input/table.hbs

@@ -1,125 +1,124 @@
-{{#with field.question.rowForm.questions.edges as |questions|}}
-  <table class="uk-table">
-    <thead>
+<table class="uk-table uk-table-divider">
+  <thead>
+    <tr>
+      {{#each this.columns as |column|}}
+        <th>{{column.label}}</th>
+      {{/each}}
+      <th></th>
+    </tr>
+  </thead>
+  <tbody>
+    {{#each @field.answer.value as |document|}}
       <tr>
-        {{#each columnHeaders as |edge|}}
-          <th>{{edge.node.label}}</th>
+        {{#each this.columns as |column|}}
+          <td>
+            <CfFieldValue
+              @field={{find-by "question.slug" column.slug document.fields}}
+            />
+          </td>
         {{/each}}
-        <th></th>
-      </tr>
-    </thead>
-    <tbody>
-      {{#each field.answer.value as |document|}}
-        <tr>
-          {{#if field.question.meta.columnsToDisplay.length}}
-            {{#each document.fields as |answerField|}}
-              {{#if
-                (includes
-                  answerField.answer.question.slug
-                  field.question.meta.columnsToDisplay
-                )
-              }}
-                <td>{{cf-field-value field=answerField}}</td>
-              {{/if}}
-            {{/each}}
-          {{else}}
-            {{#each (take 4 document.fields) as |field|}}
-              <td>{{cf-field-value field=field}}</td>
-            {{/each}}
-          {{/if}}
-          <td class="uk-text-right">
+        <td class="uk-table-middle">
+          <div class="uk-flex uk-flex-middle uk-flex-right">
+            {{#if (includes false (map-by "isValid" document.fields))}}
+              <UkIcon
+                @icon="warning"
+                class="uk-animation-fade uk-text-danger"
+              />
+            {{/if}}
             <button
               data-test-edit-row
               type="button"
-              class="uk-icon-button"
-              uk-icon="pencil"
+              class="uk-button-link uk-flex-inline uk-margin-small-left"
               title={{t "caluma.form.edit"}}
-              {{action "editRow" document}}
+              {{on "click" (fn this.edit document)}}
             >
+              <UkIcon @icon="pencil" />
               <span class="uk-hidden">{{t "caluma.form.edit"}}</span>
             </button>
-            {{#unless disabled}}
+            {{#unless @disabled}}
               <button
                 data-test-delete-row
                 type="button"
-                class="uk-icon-button"
-                uk-icon="trash"
+                class="uk-button-link uk-flex-inline uk-margin-small-left"
                 title={{t "caluma.form.delete"}}
-                {{action "deleteRow" document}}
+                {{on "click" (fn (perform this.delete) document)}}
               >
+                <UkIcon @icon="trash" />
                 <span class="uk-hidden">{{t "caluma.form.delete"}}</span>
               </button>
             {{/unless}}
-          </td>
-        </tr>
-      {{/each}}
-    </tbody>
+          </div>
+        </td>
+      </tr>
+    {{/each}}
+  </tbody>
+  {{#unless @disabled}}
     <tfoot>
-      {{#unless disabled}}
-        <tr>
-          <td colspan={{add (count-keys questions) 1}} class="uk-text-center">
-            <button
-              type="button"
-              class="uk-button uk-button-default uk-button-small"
-              title={{t "caluma.form.addRow"}}
-              {{on "click" (perform addRow)}}
-            >
-              <UkIcon @icon="plus" />
-              <span class="uk-hidden">{{t "caluma.form.addRow"}}</span>
-            </button>
-          </td>
-        </tr>
-      {{/unless}}
+      <tr>
+        <td colspan={{add this.columns.length 1}} class="uk-text-center">
+          <UkButton
+            @size="small"
+            @color="default"
+            @on-click={{perform this.add}}
+            data-test-add-row
+          >
+            <UkIcon @icon="plus" />
+            <span class="uk-hidden">{{t "caluma.form.addRow"}}</span>
+          </UkButton>
+        </td>
+      </tr>
     </tfoot>
-  </table>
-
-  <UkModal
-    @visible={{and showAddModal documentToEdit}}
-    @on-hide={{action "closeModal" "showAddModal"}}
-    @btnClose={{true}}
-    @bgClose={{false}}
-    as |modal|
-  >
-    <modal.body>
-      {{#if documentToEdit}}
-        {{cf-form-wrapper
-          document=documentToEdit
-          fieldset=(object-at 0 documentToEdit.fieldsets)
-          disabled=disabled
-        }}
-      {{/if}}
-    </modal.body>
-
-    {{#unless disabled}}
-      <modal.footer @class="uk-text-right">
-        {{uk-button
-          label=(t "caluma.form.save")
-          disabled=save.isRunning
-          loading=save.isRunning
-          on-click=(perform save)
-        }}
-      </modal.footer>
-    {{/unless}}
-  </UkModal>
+  {{/unless}}
+</table>
 
+{{#if this.documentToEdit}}
   <UkModal
-    @visible={{and showDeleteModal documentToDelete}}
-    @on-hide={{action "closeModal" "showDeleteModal"}}
-    @btnClose={{true}}
+    @visible={{this.showAddModal}}
+    @on-hide={{perform this.closeModal}}
     @bgClose={{false}}
     as |modal|
   >
     <modal.body>
-      {{t "caluma.form.deleteRow"}}
+      <CfFormWrapper
+        @document={{this.documentToEdit}}
+        @fieldset={{object-at 0 this.documentToEdit.fieldsets}}
+        @disabled={{@disabled}}
+      />
     </modal.body>
 
     <modal.footer @class="uk-text-right">
-      {{uk-button
-        label=(t "caluma.form.delete")
-        disabled=deleteRow.isRunning
-        loading=deleteRow.isRunning
-        on-click=(perform deleteRow documentToDelete)
-      }}
+      {{#if @disabled}}
+        <UkButton
+          @label={{t "caluma.form.close"}}
+          @color="primary"
+          @on-click={{perform this.close}}
+          @disabled={{this.close.isRunning}}
+          @loading={{this.close.isRunning}}
+          data-test-close
+        />
+      {{else}}
+        <UkButton
+          @label={{t "caluma.form.cancel"}}
+          @on-click={{perform this.close}}
+          @disabled={{this.close.isRunning}}
+          @loading={{this.close.isRunning}}
+          data-test-cancel
+        />
+        <DocumentValidity
+          @document={{this.documentToEdit}}
+          as |isValid validate|
+        >
+          <UkButton
+            @label={{t "caluma.form.save"}}
+            @color="primary"
+            @type="submit"
+            @disabled={{or this.save.isRunning (not isValid)}}
+            @loading={{this.save.isRunning}}
+            @on-click={{fn (perform this.save) validate}}
+            data-test-save
+          />
+        </DocumentValidity>
+      {{/if}}
     </modal.footer>
   </UkModal>
-{{/with}}
+{{/if}}

package/addon/components/cf-field/input/table.js

@@ -1,49 +1,65 @@
 import { getOwner } from "@ember/application";
-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 { tracked } from "@glimmer/tracking";
 import { queryManager } from "ember-apollo-client";
-import { task, all } from "ember-concurrency";
+import { dropTask } from "ember-concurrency-decorators";
+import UIkit from "uikit";
 
 import removeDocumentMutation from "@projectcaluma/ember-form/gql/mutations/remove-document.graphql";
 import saveDocumentMutation from "@projectcaluma/ember-form/gql/mutations/save-document.graphql";
 import { parseDocument } from "@projectcaluma/ember-form/lib/parsers";
 
-export default Component.extend({
-  notification: service(),
-  intl: service(),
-  calumaStore: service(),
+async function confirm(text) {
+  try {
+    await UIkit.modal.confirm(text);
 
-  apollo: queryManager(),
+    return true;
+  } catch (error) {
+    return false;
+  }
+}
 
-  showAddModal: false,
-  showDeleteModal: false,
-  documentToEdit: null,
-  documentToDelete: null,
+export default class CfFieldInputTableComponent extends Component {
+  @service notification;
+  @service intl;
+  @service calumaStore;
+
+  @queryManager apollo;
+
+  @tracked showAddModal = false;
+  @tracked documentToEdit = null;
+  @tracked documentToEditIsNew = false;
 
   parseDocument(raw) {
     return parseDocument(raw);
-  },
-
-  columnHeaders: computed(
-    "field.question.{rowForm.questions.edges.@each,meta.columnsToDisplay.[]}",
-    function () {
-      if (this.get("field.question.meta.columnsToDisplay.length")) {
-        return this.get("field.question.rowForm.questions.edges").filter((n) =>
-          this.get("field.question.meta.columnsToDisplay").includes(n.node.slug)
-        );
-      }
-      return this.get("field.question.rowForm.questions.edges").slice(0, 4);
+  }
+
+  get questions() {
+    return this.args.field.question.rowForm.questions.edges.map(
+      (edge) => edge.node
+    );
+  }
+
+  get columns() {
+    const config = this.args.field.question.meta.columnsToDisplay;
+
+    if (config?.length) {
+      return this.questions.filter((question) =>
+        config.includes(question.slug)
+      );
     }
-  ),
 
-  addRow: task(function* () {
+    return this.questions.slice(0, 4);
+  }
+
+  @dropTask
+  *add() {
     const raw = yield this.apollo.mutate(
       {
         mutation: saveDocumentMutation,
-        variables: {
-          input: { form: this.get("field.question.rowForm.slug") },
-        },
+        variables: { input: { form: this.args.field.question.rowForm.slug } },
       },
       "saveDocument.document"
     );
@@ -52,89 +68,90 @@ export default Component.extend({
       .factoryFor("caluma-model:document")
       .create({
         raw: this.parseDocument(raw),
-        parentDocument: this.field.document,
+        parentDocument: this.args.field.document,
       });
 
-    this.setProperties({
-      documentToEdit: newDocument,
-      showAddModal: true,
-    });
-  }).drop(),
+    this.documentToEditIsNew = true;
+    this.documentToEdit = newDocument;
+    this.showAddModal = true;
+  }
 
-  deleteRow: task(function* (document) {
-    if (!this.field.answer.value) return;
+  @dropTask
+  *delete(document) {
+    if (!(yield confirm(this.intl.t("caluma.form.deleteRow")))) {
+      return;
+    }
 
-    const remainingDocuments = this.field.answer.value.filter(
+    const remainingDocuments = this.args.field.answer.value.filter(
       (doc) => doc.pk !== document.pk
     );
 
-    yield this.onSave(remainingDocuments);
-
-    // Remove orphaned document from database.
-    yield this.apollo.mutate({
-      mutation: removeDocumentMutation,
-      variables: { input: { document: document.uuid } },
-    });
-
-    // Remove orphand document from Caluma store.
-    this.calumaStore.delete(document.pk);
+    yield this.args.onSave(remainingDocuments);
+    yield this.removeOrphan(document);
+  }
 
-    this.closeModal("showDeleteModal");
-  }),
-
-  save: task(function* () {
+  @dropTask
+  *save(validate) {
     try {
+      if (!(yield validate())) {
+        return;
+      }
+
       const newDocument = this.documentToEdit;
-      yield all(newDocument.fields.map((f) => f.validate.perform()));
+
+      yield Promise.all(newDocument.fields.map((f) => f.validate.perform()));
 
       if (newDocument.fields.some((field) => field.isInvalid)) {
         return;
       }
 
-      const rows = this.get("field.answer.value") || [];
+      const rows = this.args.field.answer.value ?? [];
 
       if (!rows.find((doc) => doc.pk === newDocument.pk)) {
         // add document to table
-        yield this.onSave([...rows, newDocument]);
+        yield this.args.onSave([...rows, newDocument]);
 
         this.notification.success(
           this.intl.t("caluma.form.notification.table.add.success")
         );
       }
 
-      this.closeModal("showAddModal");
+      this.documentToEditIsNew = false;
+
+      yield this.close.perform();
     } catch (e) {
-      // eslint-disable-next-line no-console
-      console.error(e);
       this.notification.danger(
         this.intl.t("caluma.form.notification.table.add.error")
       );
     }
-  }),
+  }
 
-  closeModal(propertyName) {
-    this.set(propertyName, false);
+  @dropTask
+  *close() {
+    if (this.documentToEditIsNew) {
+      yield this.removeOrphan(this.documentToEdit);
 
-    this.field.validate.perform();
-  },
+      this.documentToEditIsNew = false;
+    }
 
-  actions: {
-    closeModal(propertyName) {
-      this.closeModal(propertyName);
-    },
+    this.showAddModal = false;
+    this.documentToEdit = null;
+  }
 
-    editRow(document) {
-      this.setProperties({
-        documentToEdit: document,
-        showAddModal: true,
-      });
-    },
+  async removeOrphan(calumaDocument) {
+    // Remove orphaned document from database.
+    await this.apollo.mutate({
+      mutation: removeDocumentMutation,
+      variables: { input: { document: calumaDocument.uuid } },
+    });
 
-    deleteRow(document) {
-      this.setProperties({
-        documentToDelete: document,
-        showDeleteModal: true,
-      });
-    },
-  },
-});
+    // Remove orphaned document from Caluma store.
+    this.calumaStore.delete(calumaDocument.pk);
+  }
+
+  @action
+  edit(document) {
+    this.documentToEdit = document;
+    this.showAddModal = true;
+  }
+}

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

@@ -5,6 +5,7 @@
         @field={{@field}}
         @disabled={{@disabled}}
         @onSave={{@onSave}}
+        @context={{@context}}
       />
     </div>
   {{/let}}

package/addon/components/cf-field/input.js

@@ -1,3 +1,4 @@
+import { dasherize } from "@ember/string";
 import Component from "@glimmer/component";
 
 const mapping = {
@@ -25,7 +26,7 @@ export default class CfFieldInputComponent extends Component {
 
     return (
       typename &&
-      (mapping[typename] || typename.replace(/Question$/, "").toLowerCase())
+      (mapping[typename] || dasherize(typename.replace(/Question$/, "")))
     );
   }
 }

package/addon/components/cf-field.hbs

@@ -16,21 +16,23 @@
         {{/let}}
       </div>
 
-      {{#if @field.question.infoText}}
+      {{#if (and @field.question.infoText this.infoTextVisible)}}
         <CfField::info @text={{@field.question.infoText}} />
       {{/if}}
 
-      <div
-        class="cf-field__icon uk-padding-remove-vertical uk-flex uk-flex-middle uk-flex-center"
-      >
-        {{#if @field.save.isRunning}}
-          <UkSpinner class="uk-animation-fade" />
-        {{else if (or @field.save.last.isError @field.isInvalid)}}
-          <UkIcon @icon="warning" class="uk-animation-fade uk-text-danger" />
-        {{else if @field.save.last.isSuccessful}}
-          <UkIcon @icon="check" class="uk-animation-fade uk-text-success" />
-        {{/if}}
-      </div>
+      {{#if this.saveIndicatorVisible}}
+        <div
+          class="cf-field__icon uk-padding-remove-vertical uk-flex uk-flex-middle uk-flex-center"
+        >
+          {{#if @field.save.isRunning}}
+            <UkSpinner class="uk-animation-fade" />
+          {{else if (or @field.save.last.isError @field.isInvalid)}}
+            <UkIcon @icon="warning" class="uk-animation-fade uk-text-danger" />
+          {{else if @field.save.last.isSuccessful}}
+            <UkIcon @icon="check" class="uk-animation-fade uk-text-success" />
+          {{/if}}
+        </div>
+      {{/if}}
     </div>
 
     {{#if @field.errors.length}}

package/addon/components/cf-field.js

@@ -29,10 +29,18 @@ export default class CfFieldComponent extends Component {
   get labelVisible() {
     return (
       !this.args.field?.question.meta.hideLabel &&
-      !hasQuestionType(this.args.field?.question, "static")
+      !hasQuestionType(this.args.field?.question, "static", "action-button")
     );
   }
 
+  get infoTextVisible() {
+    return !hasQuestionType(this.args.field?.question, "action-button");
+  }
+
+  get saveIndicatorVisible() {
+    return !hasQuestionType(this.args.field?.question, "action-button");
+  }
+
   /**
    * Task to save a field. This will set the passed value to the answer and
    * save the field to the API after a timeout off 500 milliseconds.

package/addon/components/document-validity.js

@@ -37,11 +37,9 @@ export default class DocumentValidity extends Component {
 
   @restartableTask
   *_validate() {
-    yield Promise.all(
-      this.args.document.fields.map((field) =>
-        field.validate.linked().perform()
-      )
-    );
+    for (const field of this.args.document.fields) {
+      yield field.validate.linked().perform();
+    }
 
     if (this.isValid) {
       this.args.onValid?.();

package/addon/gql/fragments/{field-question.graphql → field.graphql}

@@ -1,3 +1,8 @@
+# We can not symlink this file so an exact copy exists in another package:
+# packages/form-builder/addon/gql/fragments/field.graphql
+#
+# When changing this file the other must also receive the same changes.
+
 fragment SimpleQuestion on Question {
   slug
   label
@@ -76,6 +81,11 @@ fragment SimpleQuestion on Question {
   ... on CalculatedFloatQuestion {
     calcExpression
   }
+  ... on ActionButtonQuestion {
+    action
+    color
+    validateOnEnter
+  }
 }
 
 fragment FieldTableQuestion on Question {
@@ -157,3 +167,59 @@ fragment FieldQuestion on Question {
     }
   }
 }
+
+fragment SimpleAnswer on Answer {
+  id
+  question {
+    slug
+  }
+  ... on StringAnswer {
+    stringValue: value
+  }
+  ... on IntegerAnswer {
+    integerValue: value
+  }
+  ... on FloatAnswer {
+    floatValue: value
+  }
+  ... on ListAnswer {
+    listValue: value
+  }
+  ... on FileAnswer {
+    fileValue: value {
+      uploadUrl
+      downloadUrl
+      metadata
+      name
+    }
+  }
+  ... on DateAnswer {
+    dateValue: value
+  }
+}
+
+fragment FieldAnswer on Answer {
+  ...SimpleAnswer
+  ... on TableAnswer {
+    tableValue: value {
+      id
+      form {
+        slug
+        questions {
+          edges {
+            node {
+              ...FieldQuestion
+            }
+          }
+        }
+      }
+      answers {
+        edges {
+          node {
+            ...SimpleAnswer
+          }
+        }
+      }
+    }
+  }
+}

package/addon/gql/mutations/save-document-date-answer.graphql

@@ -1,6 +1,6 @@
-# import * from '@projectcaluma/ember-form/gql/fragments/field-answer.graphql'
+#import * from '../fragments/field.graphql'
 
-mutation ($input: SaveDocumentDateAnswerInput!) {
+mutation SaveDocumentDateAnswer($input: SaveDocumentDateAnswerInput!) {
   saveDocumentDateAnswer(input: $input) {
     answer {
       ...FieldAnswer

package/addon/gql/mutations/save-document-file-answer.graphql

@@ -1,6 +1,6 @@
-# import * from '@projectcaluma/ember-form/gql/fragments/field-answer.graphql'
+#import * from '../fragments/field.graphql'
 
-mutation ($input: SaveDocumentFileAnswerInput!) {
+mutation SaveDocumentFileAnswer($input: SaveDocumentFileAnswerInput!) {
   saveDocumentFileAnswer(input: $input) {
     answer {
       ...FieldAnswer

package/addon/gql/mutations/save-document-float-answer.graphql

@@ -1,6 +1,6 @@
-# import * from '@projectcaluma/ember-form/gql/fragments/field-answer.graphql'
+#import * from '../fragments/field.graphql'
 
-mutation ($input: SaveDocumentFloatAnswerInput!) {
+mutation SaveDocumentFloatAnswer($input: SaveDocumentFloatAnswerInput!) {
   saveDocumentFloatAnswer(input: $input) {
     answer {
       ...FieldAnswer

package/addon/gql/mutations/save-document-integer-answer.graphql

@@ -1,6 +1,6 @@
-# import * from '@projectcaluma/ember-form/gql/fragments/field-answer.graphql'
+#import * from '../fragments/field.graphql'
 
-mutation ($input: SaveDocumentIntegerAnswerInput!) {
+mutation SaveDocumentIntegerAnswer($input: SaveDocumentIntegerAnswerInput!) {
   saveDocumentIntegerAnswer(input: $input) {
     answer {
       ...FieldAnswer

package/addon/gql/mutations/save-document-list-answer.graphql

@@ -1,6 +1,6 @@
-# import * from '@projectcaluma/ember-form/gql/fragments/field-answer.graphql'
+#import * from '../fragments/field.graphql'
 
-mutation ($input: SaveDocumentListAnswerInput!) {
+mutation SaveDocumentListAnswer($input: SaveDocumentListAnswerInput!) {
   saveDocumentListAnswer(input: $input) {
     answer {
       ...FieldAnswer

package/addon/gql/mutations/save-document-string-answer.graphql

@@ -1,6 +1,6 @@
-# import * from '@projectcaluma/ember-form/gql/fragments/field-answer.graphql'
+#import * from '../fragments/field.graphql'
 
-mutation ($input: SaveDocumentStringAnswerInput!) {
+mutation SaveDocumentStringAnswer($input: SaveDocumentStringAnswerInput!) {
   saveDocumentStringAnswer(input: $input) {
     answer {
       ...FieldAnswer

package/addon/gql/mutations/save-document-table-answer.graphql

@@ -1,6 +1,6 @@
-# import * from '@projectcaluma/ember-form/gql/fragments/field-answer.graphql'
+#import * from '../fragments/field.graphql'
 
-mutation ($input: SaveDocumentTableAnswerInput!) {
+mutation saveDocumentTableAnswer($input: SaveDocumentTableAnswerInput!) {
   saveDocumentTableAnswer(input: $input) {
     answer {
       ...FieldAnswer

package/addon/gql/mutations/save-document.graphql

@@ -1,6 +1,6 @@
-# import * from '@projectcaluma/ember-form/gql/fragments/field-answer.graphql'
+#import * from '../fragments/field.graphql'
 
-mutation ($input: SaveDocumentInput!) {
+mutation SaveDocument($input: SaveDocumentInput!) {
   saveDocument(input: $input) {
     document {
       id

package/addon/gql/queries/get-document-answers.graphql

@@ -1,6 +1,6 @@
-# import * from '@projectcaluma/ember-form/gql/fragments/field-answer.graphql'
+#import * from '../fragments/field.graphql'
 
-query ($id: ID!) {
+query GetDocumentAnswers($id: ID!) {
   allDocuments(filter: [{ id: $id }]) {
     edges {
       node {
@@ -8,6 +8,22 @@ query ($id: ID!) {
         form {
           slug
         }
+        workItem {
+          id
+        }
+        case {
+          id
+          workItems {
+            edges {
+              node {
+                id
+                task {
+                  id
+                }
+              }
+            }
+          }
+        }
         answers {
           edges {
             node {

package/addon/gql/queries/get-document-forms.graphql

@@ -1,6 +1,6 @@
-# import * from '@projectcaluma/ember-form/gql/fragments/field-question.graphql'
+#import FieldQuestion, FieldTableQuestion, SimpleQuestion from '../fragments/field.graphql'
 
-query ($slug: String!) {
+query GetDocumentForms($slug: String!) {
   allForms(filter: [{ slug: $slug }]) {
     edges {
       node {

package/addon/gql/queries/get-dynamic-options.graphql

@@ -1,4 +1,4 @@
-query ($question: String!) {
+query GetDynamicOptions($question: String!) {
   allQuestions(filter: [{ slug: $question }], first: 1) {
     edges {
       node {

package/addon/gql/queries/get-fileanswer-info.graphql

@@ -1,4 +1,4 @@
-query getFileAnswerInfo($id: ID!) {
+query GetFileAnswerInfo($id: ID!) {
   node(id: $id) {
     id
     ... on FileAnswer {

package/addon/lib/document.js

@@ -83,6 +83,22 @@ export default Base.extend({
     return decodeId(this.raw.id);
   }),
 
+  workItemUuid: computed(
+    "raw.{workItem.id,case.workItems.edges.[]}",
+    function () {
+      // The document is either directly attached to a work item (via
+      // CompleteTaskFormTask) or it's the case document and therefore
+      // indirectly attached to a work item (via CompleteWorkflowFormTask)
+      const rawId =
+        this.raw.workItem?.id ||
+        this.raw.case?.workItems.edges.find(
+          (edge) => edge.node.task.__typename === "CompleteWorkflowFormTask"
+        )?.node.id;
+
+      return rawId ? decodeId(rawId) : null;
+    }
+  ),
+
   /**
    * The root form of this document
    *
@@ -230,7 +246,7 @@ export default Base.extend({
     }
 
     if (field.hidden || [undefined, null].includes(field.value)) {
-      return field.question.isMultipleChoice ? [] : null;
+      return defaultValue ?? field.question.isMultipleChoice ? [] : null;
     }
 
     if (field.question.__typename === "TableQuestion") {

package/addon/lib/field.js

@@ -564,7 +564,7 @@ export default Base.extend({
     "fieldset.field.hidden",
     "jexlContext",
     "optionalDependencies.@each.{hidden,value}",
-    "question.isRequired",
+    "question.{__typename,isRequired}",
     "pk",
     function () {
       if (
@@ -936,4 +936,15 @@ export default Base.extend({
   _validateCalculatedFloatQuestion() {
     return resolve(true);
   },
+
+  /**
+   * Dummy method for the validation of work item button fields
+   *
+   * @method _validateActionButtonQuestion
+   * @return {RSVP.Promise}
+   * @private
+   */
+  _validateActionButtonQuestion() {
+    return resolve(true);
+  },
 });

package/app/components/cf-field/input/action-button.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@projectcaluma/ember-form",
-  "version": "9.2.0",
+  "version": "10.0.2",
   "description": "Ember addon for rendering Caluma forms.",
   "keywords": [
     "ember-addon"
@@ -16,7 +16,7 @@
   "dependencies": {
     "@glimmer/component": "^1.0.4",
     "@glimmer/tracking": "^1.0.4",
-    "@projectcaluma/ember-core": "9.1.0",
+    "@projectcaluma/ember-core": "^10.0.2",
     "ember-apollo-client": "^3.2.0",
     "ember-auto-import": "^2.2.3",
     "ember-cli-babel": "^7.26.6",
@@ -26,9 +26,9 @@
     "ember-fetch": "^8.0.4",
     "ember-in-viewport": "^3.10.3",
     "ember-intl": "^5.7.0",
-    "ember-math-helpers": "^2.17.3",
+    "ember-math-helpers": "^2.18.0",
     "ember-pikaday": "^3.0.0",
-    "ember-power-select": "^4.1.6",
+    "ember-power-select": "^4.1.7",
     "ember-uikit": "^4.0.0",
     "graphql": "^15.6.1",
     "jexl": "^2.3.0",
@@ -39,10 +39,11 @@
   "devDependencies": {
     "@ember/optional-features": "2.0.0",
     "@ember/test-helpers": "2.6.0",
-    "@embroider/test-setup": "0.47.1",
-    "@projectcaluma/ember-testing": "9.0.0",
+    "@embroider/test-setup": "0.47.2",
+    "@projectcaluma/ember-testing": "10.0.0",
+    "@projectcaluma/ember-workflow": "10.0.1",
     "broccoli-asset-rev": "3.0.0",
-    "ember-cli": "3.28.3",
+    "ember-cli": "3.28.4",
     "ember-cli-code-coverage": "1.0.3",
     "ember-cli-dependency-checker": "3.2.0",
     "ember-cli-inject-live-reload": "2.1.0",
@@ -57,17 +58,17 @@
     "ember-resolver": "8.0.3",
     "ember-source": "3.28.6",
     "ember-source-channel-url": "3.0.0",
-    "ember-try": "1.4.0",
+    "ember-try": "2.0.0",
     "faker": "5.5.3",
     "loader.js": "4.7.0",
     "npm-run-all": "4.1.5",
     "qunit": "2.17.2",
     "qunit-dom": "2.0.0",
     "uuid": "8.3.2",
-    "webpack": "5.61.0"
+    "webpack": "5.64.1"
   },
   "engines": {
-    "node": "10.* || >= 12"
+    "node": "12.* || 14.* || >= 16"
   },
   "ember": {
     "edition": "octane"

package/translations/de.yaml

@@ -1,24 +1,12 @@
 caluma:
-  caluma-query:
-    work-item:
-      status:
-        READY: "Offen"
-        COMPLETED: "Erledigt"
-        CANCELED: "Abgebrochen"
-        SKIPPED: "Übersprungen"
-
-    case:
-      status:
-        RUNNING: "In Bearbeitung"
-        COMPLETED: "Abgeschlossen"
-        CANCELED: "Abgebrochen"
   form:
     optional: "Optional"
     save: "Speichern"
     delete: "Löschen"
     edit: "Bearbeiten"
-    selectFile: "Klicken um Datei hochzuladen"
-    changeFile: "Klicken um andere Datei hochzuladen"
+    cancel: "Abbrechen"
+    close: "Schliessen"
+    selectFile: "Durchsuchen..."
     deleteRow: "Möchten Sie diese Zeile wirklich löschen?"
     addRow: "Zeile hinzufügen"
     optionNotAvailable: "Diese Option ist nicht mehr verfügbar"

package/translations/en.yaml

@@ -1,24 +1,12 @@
 caluma:
-  caluma-query:
-    work-item:
-      status:
-        READY: "Pending"
-        COMPLETED: "Completed"
-        CANCELED: "Canceled"
-        SKIPPED: "Skipped"
-    case:
-      status:
-        RUNNING: "Pending"
-        COMPLETED: "Completed"
-        CANCELED: "Canceled"
-
   form:
     optional: "Optional"
     save: "Save"
     delete: "Delete"
     edit: "Edit"
-    selectFile: "Click to upload a file"
-    changeFile: "Click to upload a different file"
+    cancel: "Cancel"
+    close: "Close"
+    selectFile: "Browse..."
     deleteRow: "Do you really want to delete this row?"
     addRow: "Add row"
     optionNotAvailable: "This option is not available anymore"

package/translations/fr.yaml

@@ -1,25 +1,12 @@
 caluma:
-  caluma-query:
-    work-item:
-      status:
-        READY: "En attente"
-        COMPLETED: "Terminé"
-        CANCELED: "Annulé"
-        SKIPPED: "Sauté"
-
-    case:
-      status:
-        RUNNING: "En cours"
-        COMPLETED: "Terminé"
-        CANCELED: "Annulé"
-
   form:
     optional: "optional"
     save: "sauvegarder"
     delete: "supprimer"
     edit: "modifier"
-    selectFile: "cliquez pour télécharger le ficher"
-    changeFile: "cliquez pour télécharger un autre fichier"
+    cancel: "annuler"
+    close: "fermer"
+    selectFile: "Sélectionner..."
     deleteRow: "Voulez-vous supprimer cette ligne?"
     addRow: "Ajouter une ligne"
     optionNotAvailable: "Cette option n'est plus disponible"

package/addon/gql/fragments/field-answer.graphql

@@ -1,57 +0,0 @@
-# import * from '@projectcaluma/ember-form/gql/fragments/field-question.graphql'
-
-fragment SimpleAnswer on Answer {
-  id
-  question {
-    slug
-  }
-  ... on StringAnswer {
-    stringValue: value
-  }
-  ... on IntegerAnswer {
-    integerValue: value
-  }
-  ... on FloatAnswer {
-    floatValue: value
-  }
-  ... on ListAnswer {
-    listValue: value
-  }
-  ... on FileAnswer {
-    fileValue: value {
-      uploadUrl
-      downloadUrl
-      metadata
-      name
-    }
-  }
-  ... on DateAnswer {
-    dateValue: value
-  }
-}
-
-fragment FieldAnswer on Answer {
-  ...SimpleAnswer
-  ... on TableAnswer {
-    tableValue: value {
-      id
-      form {
-        slug
-        questions {
-          edges {
-            node {
-              ...FieldQuestion
-            }
-          }
-        }
-      }
-      answers {
-        edges {
-          node {
-            ...SimpleAnswer
-          }
-        }
-      }
-    }
-  }
-}