diff --git a/packages/-ember-caluma/mirage/scenarios/default.js b/packages/-ember-caluma/mirage/scenarios/default.js index c4cca77f8..2062ba5b8 100644 --- a/packages/-ember-caluma/mirage/scenarios/default.js +++ b/packages/-ember-caluma/mirage/scenarios/default.js @@ -96,6 +96,8 @@ export default function (server) { label: "When?", formIds: [form.id], type: "DATE", + minDate: "2023-09-01", + maxDate: null, hintText: null, }); server.create("question", { diff --git a/packages/form-builder/addon/components/cfb-form-editor/question.hbs b/packages/form-builder/addon/components/cfb-form-editor/question.hbs index 600b7a7a2..54f965618 100644 --- a/packages/form-builder/addon/components/cfb-form-editor/question.hbs +++ b/packages/form-builder/addon/components/cfb-form-editor/question.hbs @@ -235,6 +235,63 @@ {{/if}} + {{#if (has-question-type f.model "date")}} +
+
+ +
+ + + + +
+
+
+ +
+ + + + +
+
+
+ {{/if}} + {{#if (has-question-type f.model "choice" "multiple-choice")}} ({ value, @@ -281,6 +316,8 @@ export default class CfbFormEditorQuestion extends Component { _getDateQuestionInput(changeset) { return { hintText: changeset.get("hintText"), + maxDate: changeset.get("maxDate"), + minDate: changeset.get("minDate"), }; } @@ -506,4 +543,26 @@ export default class CfbFormEditorQuestion extends Component { updateRowForm(value, changeset) { changeset.set("rowForm.slug", value.slug); } + + @action + onMinDateReady(_selectedDates, _dateStr, flatpickrRef) { + this.minDateFlatpickrRef = flatpickrRef; + } + + @action + onMaxDateReady(_selectedDates, _dateStr, flatpickrRef) { + this.maxDateFlatpickrRef = flatpickrRef; + } + + @action + clearMinDateCalendar(e) { + e.stopPropagation(); + this.minDateFlatpickrRef.clear(); + } + + @action + clearMaxDateCalendar(e) { + e.stopPropagation(); + this.maxDateFlatpickrRef.clear(); + } } diff --git a/packages/form-builder/addon/gql/mutations/save-date-question.graphql b/packages/form-builder/addon/gql/mutations/save-date-question.graphql index 3324620f0..7ed0f6b14 100644 --- a/packages/form-builder/addon/gql/mutations/save-date-question.graphql +++ b/packages/form-builder/addon/gql/mutations/save-date-question.graphql @@ -7,6 +7,8 @@ mutation SaveDateQuestion($input: SaveDateQuestionInput!) { ...QuestionInfo ... on DateQuestion { hintText + minDate + maxDate } } clientMutationId diff --git a/packages/form-builder/addon/gql/queries/form-editor-question.graphql b/packages/form-builder/addon/gql/queries/form-editor-question.graphql index 1c1ecaa93..eca1a9773 100644 --- a/packages/form-builder/addon/gql/queries/form-editor-question.graphql +++ b/packages/form-builder/addon/gql/queries/form-editor-question.graphql @@ -63,6 +63,8 @@ query FormEditorQuestion($slug: String!) { } ... on DateQuestion { hintText + minDate + maxDate defaultAnswer { id dateValue: value diff --git a/packages/form-builder/translations/de.yaml b/packages/form-builder/translations/de.yaml index 27fab506c..43e255e6b 100644 --- a/packages/form-builder/translations/de.yaml +++ b/packages/form-builder/translations/de.yaml @@ -70,6 +70,8 @@ caluma: min-value: "Minimaler Wert" max-value: "Maximaler Wert" + min-date: "Mindestdatum" + max-date: "Maximales Datum" min-length: "Minimale Länge" max-length: "Maximale Länge" rowForm: "Formular für Tabelleneinträge" diff --git a/packages/form-builder/translations/en.yaml b/packages/form-builder/translations/en.yaml index c589ad23a..14532b6c7 100644 --- a/packages/form-builder/translations/en.yaml +++ b/packages/form-builder/translations/en.yaml @@ -70,6 +70,8 @@ caluma: min-value: "Minimum value" max-value: "Maximum value" + min-date: "Minimum date" + max-date: "Maximum date" min-length: "Minimum length" max-length: "Maximum length" rowForm: "Form to use for rows" diff --git a/packages/form-builder/translations/fr.yaml b/packages/form-builder/translations/fr.yaml index 81fa3630f..54fc9a5ad 100644 --- a/packages/form-builder/translations/fr.yaml +++ b/packages/form-builder/translations/fr.yaml @@ -70,6 +70,8 @@ caluma: min-value: "Valeur minimale" max-value: "Valeur maximale" + min-date: "Date minimale" + max-date: "Date maximale" min-length: "Longueur minimale" max-length: "Longueur maximale" rowForm: "Formulaire pour les entrées de tableau" diff --git a/packages/form/addon/components/cf-field/input/date.hbs b/packages/form/addon/components/cf-field/input/date.hbs index 42f47b893..c319dc5e2 100644 --- a/packages/form/addon/components/cf-field/input/date.hbs +++ b/packages/form/addon/components/cf-field/input/date.hbs @@ -19,6 +19,8 @@ @date={{or @field.answer.value null}} @altFormat={{this.dateFormat}} @altInput={{true}} + @maxDate={{this.maxDate}} + @minDate={{this.minDate}} @allowInput={{true}} @onChange={{this.onChange}} @onReady={{this.onReady}} diff --git a/packages/form/addon/components/cf-field/input/date.js b/packages/form/addon/components/cf-field/input/date.js index eda90aa3c..30f5759b8 100644 --- a/packages/form/addon/components/cf-field/input/date.js +++ b/packages/form/addon/components/cf-field/input/date.js @@ -10,6 +10,14 @@ export default class CfFieldInputDateComponent extends Component { @tracked flatpickrRef = null; + get maxDate() { + return this.args.field?.question?.raw?.maxDate || null; + } + + get minDate() { + return this.args.field?.question?.raw?.minDate || null; + } + get locale() { return this.intl.primaryLocale.split("-")[0]; } diff --git a/packages/form/addon/gql/fragments/field.graphql b/packages/form/addon/gql/fragments/field.graphql index 39090dc1a..da490ccef 100644 --- a/packages/form/addon/gql/fragments/field.graphql +++ b/packages/form/addon/gql/fragments/field.graphql @@ -104,6 +104,8 @@ fragment SimpleQuestion on Question { value } hintText + minDate + maxDate } ... on StaticQuestion { staticContent diff --git a/packages/form/tests/integration/components/cf-content-test.js b/packages/form/tests/integration/components/cf-content-test.js index f04ab369e..4bc7c5280 100644 --- a/packages/form/tests/integration/components/cf-content-test.js +++ b/packages/form/tests/integration/components/cf-content-test.js @@ -46,6 +46,8 @@ module("Integration | Component | cf-content", function (hooks) { this.server.create("question", { formIds: [form.id], type: "DATE", + minDate: "2023-01-01", + maxDate: "2030-12-31", }), this.server.create("question", { formIds: [form.id], @@ -181,6 +183,8 @@ module("Integration | Component | cf-content", function (hooks) { formIds: [form.id], slug: "date-question", type: "DATE", + minDate: "2023-01-01", + maxDate: null, }); this.server.create("question", { formIds: [form.id], @@ -229,7 +233,7 @@ module("Integration | Component | cf-content", function (hooks) { ); await setFlatpickrDate( `[name="Document:${document.id}:Question:date-question"]`, - new Date(2019, 2, 25), // month is zero based + new Date(2023, 2, 25), // month is zero based ); await triggerEvent( @@ -272,7 +276,7 @@ module("Integration | Component | cf-content", function (hooks) { }, { slug: "date-question", - value: "2019-03-25", + value: "2023-03-25", }, { slug: "files-question", diff --git a/packages/form/tests/integration/components/cf-field/input/date-test.js b/packages/form/tests/integration/components/cf-field/input/date-test.js index 407782068..9e79f21ef 100644 --- a/packages/form/tests/integration/components/cf-field/input/date-test.js +++ b/packages/form/tests/integration/components/cf-field/input/date-test.js @@ -101,4 +101,40 @@ module("Integration | Component | cf-field/input/date", function (hooks) { .hasValue("25.03.2021"); assert.dom(".ember-flatpickr-input[type='hidden']").hasValue("2021-03-25"); }); + + test("the date accept min date and max date", async function (assert) { + this.value = null; + this.field = { + question: { + raw: { + minDate: "2023-01-01", + maxDate: "2024-01-01", + }, + }, + }; + + await render( + hbs``, + ); + + await setLocale("en-us"); + await setFlatpickrDate("input", new Date(2023, 6, 10)); // month is zero based + assert.strictEqual(this.value, "2023-07-10"); + assert + .dom(".ember-flatpickr-input:not([type='hidden'])") + .hasValue("07/10/2023"); + assert.dom(".ember-flatpickr-input[type='hidden']").hasValue("2023-07-10"); + + // the date here is less then the min dafined date + await setFlatpickrDate("input", new Date(2022, 6, 10)); // month is zero based + assert.strictEqual(this.value, null); + assert.dom(".ember-flatpickr-input:not([type='hidden'])").hasValue(""); + assert.dom(".ember-flatpickr-input[type='hidden']").hasValue(""); + + // the date here is more then the max defined date + await setFlatpickrDate("input", new Date(2024, 6, 10)); // month is zero based + assert.strictEqual(this.value, null); + assert.dom(".ember-flatpickr-input:not([type='hidden'])").hasValue(""); + assert.dom(".ember-flatpickr-input[type='hidden']").hasValue(""); + }); }); diff --git a/packages/testing/addon/mirage-graphql/schema.graphql b/packages/testing/addon/mirage-graphql/schema.graphql index 09938c799..b16cc2c11 100644 --- a/packages/testing/addon/mirage-graphql/schema.graphql +++ b/packages/testing/addon/mirage-graphql/schema.graphql @@ -989,6 +989,8 @@ type DateQuestion implements Question & Node { modifiedByGroup: String slug: String! label: String! + minDate: Date + maxDate: Date """ Required expression is only evaluated when question is not hidden. @@ -2831,6 +2833,8 @@ input SaveDateQuestionInput { isArchived: Boolean hintText: String clientMutationId: String + minDate: Date + maxDate: Date } type SaveDateQuestionPayload { diff --git a/packages/testing/addon/scenarios/distribution.js b/packages/testing/addon/scenarios/distribution.js index 8efb633b7..a7db92e58 100644 --- a/packages/testing/addon/scenarios/distribution.js +++ b/packages/testing/addon/scenarios/distribution.js @@ -27,6 +27,8 @@ export function createBlueprint(server) { label: "Deadline", isRequired: "true", formIds: [inquiryForm.id], + minDate: null, + maxDate: null, type: "DATE", });