@projectcaluma/ember-form 9.1.1 → 10.0.0

package/CHANGELOG.md

@@ -0,0 +1,21 @@
+# [@projectcaluma/ember-form-v10.0.0](https://github.com/projectcaluma/ember-caluma/compare/@projectcaluma/ember-form-v9.3.0...@projectcaluma/ember-form-v10.0.0) (2021-11-25)
+
+
+### Bug Fixes
+
+* **form:** return default value for answer transform if empty ([ed703bc](https://github.com/projectcaluma/ember-caluma/commit/ed703bc2505e0ec59ec5b5ed6df4e0bb4f93db12))
+
+
+### chore
+
+* **deps:** update dependencies and drop support for node 10 ([51d6dee](https://github.com/projectcaluma/ember-caluma/commit/51d6deeda9811518622ba0cefd8d3876651dab4f))
+
+
+### Features
+
+* **action-button:** improve detection of work item for action button ([f00b7b0](https://github.com/projectcaluma/ember-caluma/commit/f00b7b06ac114c5bee2267132518c13ee1502ad0))
+
+
+### BREAKING CHANGES
+
+* **deps:** Remove support for node v10

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,21 +1,32 @@
-{{#unless @disabled}}
-  <div class="uk-width-1-1" 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}}
+      disabled={{@disabled}}
       {{on "change" this.save}}
     />
-
-    {{! label is in another component }}
-    {{! template-lint-disable require-input-label }}
-    <input class="uk-input" type="text" placeholder={{@placeholder}} readonly />
+    <UkButton @color="primary" @disabled={{@disabled}}>
+      {{t "caluma.form.selectFile"}}
+    </UkButton>
   </div>
-{{/unless}}
-
-{{#if (and this.downloadUrl this.downloadName)}}
-  <UkButton @color="link" @on-click={{this.download}}>
-    {{this.downloadName}}
-  </UkButton>
-{{/if}}
+  {{#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}}
+</div>

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

@@ -3,6 +3,7 @@ import { inject as service } from "@ember/service";
 import Component from "@glimmer/component";
 import { queryManager } from "ember-apollo-client";
 
+import removeAnswerMutation from "@projectcaluma/ember-form/gql/mutations/remove-answer.graphql";
 import getFileAnswerInfoQuery from "@projectcaluma/ember-form/gql/queries/get-fileanswer-info.graphql";
 
 export default class CfFieldInputFileComponent extends Component {
@@ -18,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(
@@ -74,7 +67,24 @@ export default class CfFieldInputFileComponent extends Component {
     } finally {
       // eslint-disable-next-line require-atomic-updates
       target.value = "";
-      target.parentNode.querySelector("[type=text]").value = "";
+    }
+  }
+
+  @action
+  async delete() {
+    try {
+      await this.apollo.mutate({
+        mutation: removeAnswerMutation,
+        variables: {
+          input: {
+            answer: this.args.field.answer.uuid,
+          },
+        },
+      });
+
+      await this.args.onSave(null);
+    } catch (error) {
+      set(this.args.field, "_errors", [{ type: "deleteFailed" }]);
     }
   }
 }

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