Merge pull request adfinis#767 from Yelinz/fix-detepicker

open-dynaMIX · web-flow · commit 2e7176faf07d · 2023-02-27T15:19:18.000+01:00
fix(ember): fix membership datepickers
diff --git a/ember/app/ui/components/date-picker/component.js b/ember/app/ui/components/date-picker/component.js
@@ -0,0 +1,39 @@
+import { action } from "@ember/object";
+import { inject as service } from "@ember/service";
+import Component from "@glimmer/component";
+import { tracked } from "@glimmer/tracking";
+import { DateTime } from "luxon";
+
+export default class CfFieldInputDateComponent extends Component {
+  @service intl;
+
+  @tracked flatpickrRef = null;
+
+  get locale() {
+    return this.intl.primaryLocale;
+  }
+
+  @action
+  onReady(_selectedDates, _dateStr, flatpickrRef) {
+    this.flatpickrRef = flatpickrRef;
+  }
+
+  @action
+  clearCalendar(e) {
+    e.stopPropagation();
+    e.preventDefault();
+    this.flatpickrRef.clear();
+  }
+
+  @action
+  onChange([date]) {
+    // Change Javascript date to ISO string if not null.
+    this.args.onChange(date ? DateTime.fromJSDate(date).toISODate() : null);
+  }
+
+  // flatpickr doesnt call onChange after manual input and clicking outside.
+  @action
+  onClose(dates) {
+    this.onChange(dates);
+  }
+}
diff --git a/ember/app/ui/components/date-picker/template.hbs b/ember/app/ui/components/date-picker/template.hbs
@@ -0,0 +1,23 @@
+<div class="uk-inline uk-width-1-1">
+  <a
+    class="uk-form-icon uk-form-icon-flip"
+    uk-tooltip={{t "caluma.form.delete"}}
+    href="#"
+    {{on "click" this.clearCalendar}}
+  >
+    <UkIcon @icon="close" />
+  </a>
+  <EmberFlatpickr
+    class="uk-input {{if @disabled 'uk-disabled'}}"
+    readonly={{@disabled}}
+    @disabled={{@disabled}}
+    @locale={{this.locale}}
+    @date={{or @date null}}
+    @altFormat="d.m.Y"
+    @altInput={{true}}
+    @allowInput={{true}}
+    @onChange={{this.onChange}}
+    @onReady={{this.onReady}}
+    @onClose={{this.onClose}}
+  />
+</div>
diff --git a/ember/app/ui/components/identity-memberships/component.js b/ember/app/ui/components/identity-memberships/component.js
@@ -19,10 +19,6 @@ export default class IdentityMembershipsComponent extends Component {
   @service intl;
   @service notification;
 
-  get locale() {
-    return this.intl.primaryLocale;
-  }
-
   // List
 
   @lastValue("fetchMemberships") memberships;
@@ -41,14 +37,19 @@ export default class IdentityMembershipsComponent extends Component {
     this.fetchRoles.perform(this.args.identity);
   }
 
+  @action updateDateField(fieldName, newValue, changeset) {
+    changeset.rollbackProperty(fieldName);
+    changeset.set(fieldName, newValue);
+  }
+
   @action
   openPowerSelect(select) {
     select.actions.open();
   }
 
   // Add / Edit
 
-  @tracked changeset = null;
+  @tracked changeset;
 
   @action
   edit(membership) {
@@ -72,38 +73,44 @@ export default class IdentityMembershipsComponent extends Component {
     this.changeset = null;
   }
 
+  formatDate(date) {
+    // Flatpickr returns an array of dates.
+    if (Array.isArray(date)) {
+      return DateTime.fromJSDate(date[0]).toISODate();
+    } else if (date) {
+      return date;
+    }
+    return null;
+  }
+
   @dropTask
   *submit(changeset) {
     try {
-      const format = "yyyy-LL-dd";
-      let timeSlot = changeset.get("timeSlot") || {};
-      if (!timeSlot.lower && !timeSlot.upper) {
-        timeSlot = null;
-      } else {
-        timeSlot.lower = timeSlot.lower
-          ? DateTime.fromJSDate(timeSlot.lower[0]).toFormat(format)
-          : undefined;
-        timeSlot.upper = timeSlot.upper
-          ? DateTime.fromJSDate(timeSlot.upper[0]).toFormat(format)
-          : undefined;
+      changeset.execute();
+      const timeSlot = new Map(Object.entries(changeset.data.timeSlot));
+      timeSlot.forEach((slot) => {
+        if (slot) {
+          const [key, value] = slot;
+          timeSlot[key] = this.formatDate(value);
+        }
+      });
+      if (timeSlot.size) {
+        changeset.set("timeSlot", Object.fromEntries(timeSlot));
       }
-      changeset.set("timeSlot", timeSlot);
-
       const election = changeset.get("nextElection");
-      if (election) {
-        changeset.set(
-          "nextElection",
-          DateTime.fromJSDate(election[0]).toFormat(format)
-        );
+      changeset.set("nextElection", this.formatDate(election));
+      changeset.set("timeSlot.bounds", "[)");
+      yield changeset.validate();
+      if (changeset.isValid) {
+        yield changeset.save();
+        yield this.onUpdate();
+        this.changeset = null;
       }
-
-      yield changeset.save();
-      this.changeset = null;
-      yield this.onUpdate();
     } catch (error) {
       console.error(error);
       this.notification.fromError(error);
       applyError(changeset, error);
+      changeset.rollback();
     }
   }
 
diff --git a/ember/app/ui/components/identity-memberships/template.hbs b/ember/app/ui/components/identity-memberships/template.hbs
@@ -79,14 +79,13 @@
 
     {{#if (can "add membership-role")}}
       <p class="uk-text-right">
-        <button
-          class="uk-button uk-button-default"
-          type="button"
-          disabled={{this.changeset}}
-          {{on "click" (fn this.edit null)}}
+        <UkButton
+          @disabled={{this.changeset}}
+          @onClick={{fn this.edit null}}
+          data-test-add
         >
           {{t "components.identity-memberships.add"}}
-        </button>
+        </UkButton>
       </p>
     {{/if}}
   {{/if}}
@@ -121,6 +120,7 @@
             @onChange={{field.update}}
             @onFocus={{this.openPowerSelect}}
             @triggerClass="uk-select"
+            data-test-organisation-select
             as |opt|
           >
             {{opt.organisationName}}
@@ -165,15 +165,12 @@
               <Form.input
                 @label={{t "components.identity-memberships.form.label.timeFrom"}}
                 @name="timeSlot.lower"
+                @errorComponent={{component "validated-form-error"}}
                 as |field|
               >
-                <EmberFlatpickr
-                  class="uk-input"
-                  @date={{if field.value field.value null}}
+                <DatePicker
+                  @date={{field.value}}
                   @onChange={{field.update}}
-                  @dateFormat="d.m.Y"
-                  @locale={{this.locale}}
-                  @allowInput={{true}}
                 />
               </Form.input>
             </div>
@@ -183,15 +180,12 @@
               <Form.input
                 @label={{t "components.identity-memberships.form.label.timeUntil"}}
                 @name="timeSlot.upper"
+                @errorComponent={{component "validated-form-error"}}
                 as |field|
               >
-                <EmberFlatpickr
-                  class="uk-input"
-                  @date={{if field.value field.value null}}
+                <DatePicker
+                  @date={{field.value}}
                   @onChange={{field.update}}
-                  @dateFormat="d.m.Y"
-                  @locale={{this.locale}}
-                  @allowInput={{true}}
                 />
               </Form.input>
             </div>
@@ -205,13 +199,9 @@
           @name="nextElection"
           as |field|
         >
-          <EmberFlatpickr
-            class="uk-input"
-            @date={{if field.value field.value null}}
+          <DatePicker
+            @date={{field.value}}
             @onChange={{field.update}}
-            @dateFormat="d.m.Y"
-            @locale={{this.locale}}
-            @allowInput={{true}}
           />
         </Form.input>
       </div>
diff --git a/ember/app/ui/components/validated-form-error/template.hbs b/ember/app/ui/components/validated-form-error/template.hbs
@@ -0,0 +1,7 @@
+<small class="uk-text-danger">
+  {{yield}}
+  {{#each @errors as |error idx|}}
+    {{if (not (eq idx 0)) ", "}} {{!-- Space out multiple errors --}}
+    {{t error}}
+  {{/each}}
+</small>
diff --git a/ember/app/utils/apply-error.js b/ember/app/utils/apply-error.js
@@ -1,6 +1,6 @@
 export default function applyError(changeset, error) {
   error.errors
-    .filter(
+    ?.filter(
       ({ source: { pointer } }) =>
         pointer.startsWith("/data/attributes") &&
         !pointer.endsWith("non-field-errors")
diff --git a/ember/app/validations/membership.js b/ember/app/validations/membership.js
@@ -1,5 +1,47 @@
 import { validatePresence } from "ember-changeset-validations/validators";
+import { DateTime } from "luxon";
+
+function validateTimeSlotLower() {
+  return (key, newValue, oldValue, changes, content) => {
+    if (
+      newValue &&
+      (changes?.timeSlot?.upper ?? content.get("timeSlot.upper"))
+    ) {
+      if (
+        DateTime.fromISO(newValue) >
+        DateTime.fromISO(
+          changes?.timeSlot?.upper ?? content.get("timeSlot.upper")
+        )
+      ) {
+        return "components.identity-memberships.timeSlotErrorLower";
+      }
+    }
+    return true;
+  };
+}
+
+function validateTimeSlotUpper() {
+  return (key, newValue, oldValue, changes, content) => {
+    if (
+      newValue &&
+      (changes?.timeSlot?.lower ?? content.get("timeSlot.lower"))
+    ) {
+      if (
+        DateTime.fromISO(
+          changes?.timeSlot?.lower ?? content.get("timeSlot.lower")
+        ) > DateTime.fromISO(newValue)
+      ) {
+        return "components.identity-memberships.timeSlotError";
+      }
+    }
+    return true;
+  };
+}
 
 export default {
   organisation: [validatePresence(true)],
+  timeSlot: {
+    lower: [validateTimeSlotLower()],
+    upper: [validateTimeSlotUpper()],
+  },
 };
diff --git a/ember/config/environment.js b/ember/config/environment.js
@@ -27,6 +27,7 @@ module.exports = function (environment) {
       allowAnyFallback: true,
       fallbacks: ["de", "en"],
     },
+    "changeset-validations": { rawOutput: true },
     apollo: {
       apiURL: "/graphql",
     },
diff --git a/ember/ember-cli-build.js b/ember/ember-cli-build.js
@@ -11,6 +11,9 @@ module.exports = function (defaults) {
     },
     "ember-validated-form": {
       theme: "uikit",
+      defaults: {
+        "types/date": "myapp/components/date-picker",
+      },
     },
     "ember-fetch": {
       preferNative: true,
diff --git a/ember/tests/integration/ui/components/date-picker/component-test.js b/ember/tests/integration/ui/components/date-picker/component-test.js
@@ -0,0 +1,26 @@
+import { click, fillIn, render } from "@ember/test-helpers";
+import { hbs } from "ember-cli-htmlbars";
+import { module, test } from "qunit";
+
+import { setupRenderingTest } from "mysagw/tests/helpers";
+
+module("Integration | Component | date-picker", function (hooks) {
+  setupRenderingTest(hooks);
+
+  test("it renders", async function (assert) {
+    this.onChange = () => {
+      assert.step("onChange");
+    };
+
+    await render(hbs`<DatePicker @onChange={{this.onChange}}/>`);
+
+    await fillIn('input[type="text"]', "03.04.2020");
+
+    assert.dom('input[type="text"]').hasValue("03.04.2020");
+
+    await click("a");
+
+    assert.dom("input").hasValue("");
+    assert.verifySteps(["onChange", "onChange"]);
+  });
+});
diff --git a/ember/tests/integration/ui/components/validated-form-error/component-test.js b/ember/tests/integration/ui/components/validated-form-error/component-test.js
@@ -0,0 +1,18 @@
+import { render } from "@ember/test-helpers";
+import { hbs } from "ember-cli-htmlbars";
+import { setupIntl } from "ember-intl/test-support";
+import { module, test } from "qunit";
+
+import { setupRenderingTest } from "mysagw/tests/helpers";
+
+module("Integration | Component | validated-form-error", function (hooks) {
+  setupRenderingTest(hooks);
+  setupIntl(hooks);
+
+  test("it renders", async function (assert) {
+    this.errors = ["error1", "error2"];
+    await render(hbs`<ValidatedFormError @errors={{this.errors}}/>`);
+
+    assert.dom(this.element).hasText("t:error1:() , t:error2:()");
+  });
+});
diff --git a/ember/translations/components/identity-memberships/de.yaml b/ember/translations/components/identity-memberships/de.yaml
@@ -4,6 +4,8 @@ components:
     add: "Mitgliedschaft hinzufügen"
     timeSlotLower: "Von"
     timeSlotUpper: "Bis"
+    timeSlotError: "Das Bis-Datum kann nicht vor dem Von-Datum liegen."
+    timeSlotErrorLower: "Das Von-Datum kann nicht nach dem Bis-Datum liegen."
 
     list:
       nextElection: "Nächste Wiederwahl {date}"
diff --git a/ember/translations/components/identity-memberships/en.yaml b/ember/translations/components/identity-memberships/en.yaml
@@ -4,6 +4,8 @@ components:
     add: "Add membership"
     timeSlotLower: "From"
     timeSlotUpper: "Until"
+    timeSlotError: "Until date can't be before From date."
+    timeSlotErrorLower: "From date can't be after Until date."
 
     list:
       nextElection: "Next election {date}"
diff --git a/ember/translations/components/identity-memberships/fr.yaml b/ember/translations/components/identity-memberships/fr.yaml
