feat: define the date range of date questions

packages/-ember-caluma/mirage/scenarios/default.js

@@ -95,6 +95,8 @@ export default function (server) {
     slug: "date",
     label: "When?",
     formIds: [form.id],
+    minDate: "2023-09-01",
+    maxDate: "2023-10-30",
     type: "DATE",
     hintText: null,
   });

packages/distribution/addon/gql/fragments/inquiry-request.graphql

@@ -5,6 +5,8 @@ fragment InquiryRequestDeadline on Document {
         id
         ... on DateAnswer {
           value
+          minDate
+          maxDate
         }
       }
     }

packages/form-builder/addon/components/cfb-form-editor/question.hbs

@@ -235,6 +235,41 @@
         </div>
       {{/if}}
 
+      {{#if (has-question-type f.model "date")}}
+        <div uk-grid class="uk-grid-small uk-child-width-1-2 uk-margin">
+          <div class="">
+            <label for="" class="uk-form-label">
+              {{t "caluma.form-builder.question.min-date"}}
+            </label>
+            <EmberFlatpickr
+              @altFormat={{this.dateFormat}}
+              class="uk-input form-control input"
+              @date={{changeset-get f.model "minDate"}}
+              @onChange={{fn this.onDateMinMaxChange "minDate"}}
+              @maxDate={{changeset-get f.model "maxDate"}}
+              @altInput={{true}}
+              @allowInput={{true}}
+              @locale={{this.locale}}
+            />
+          </div>
+          <div class="">
+            <label for="" class="uk-form-label">
+              {{t "caluma.form-builder.question.max-date"}}
+            </label>
+            <EmberFlatpickr
+              @altFormat={{this.dateFormat}}
+              class="uk-input form-control input"
+              @date={{changeset-get f.model "maxDate"}}
+              @onChange={{fn this.onDateMinMaxChange "maxDate"}}
+              @minDate={{changeset-get f.model "minDate"}}
+              @altInput={{true}}
+              @allowInput={{true}}
+              @locale={{this.locale}}
+            />
+          </div>
+        </div>
+      {{/if}}
+
       {{#if (has-question-type f.model "choice" "multiple-choice")}}
         <f.input
           @name="options"

packages/form-builder/addon/components/cfb-form-editor/question.js

@@ -1,3 +1,4 @@
+import { getOwner } from "@ember/application";
 import { A } from "@ember/array";
 import { action } from "@ember/object";
 import { inject as service } from "@ember/service";
@@ -8,6 +9,7 @@ import { queryManager } from "ember-apollo-client";
 import Changeset from "ember-changeset";
 import lookupValidator from "ember-changeset-validations";
 import { dropTask, restartableTask, task } from "ember-concurrency";
+import { DateTime } from "luxon";
 
 import { hasQuestionType } from "@projectcaluma/ember-core/helpers/has-question-type";
 import slugify from "@projectcaluma/ember-core/utils/slugify";
@@ -162,6 +164,36 @@ export default class CfbFormEditorQuestion extends Component {
     });
   }
 
+  get locale() {
+    return this.intl.primaryLocale.split("-")[0];
+  }
+
+  get config() {
+    return getOwner(this).resolveRegistration("config:environment");
+  }
+
+  get dateFormat() {
+    const {
+      FLATPICKR_DATE_FORMAT = {
+        de: "d.m.Y",
+        fr: "d.m.Y",
+        en: "m/d/Y",
+      },
+      FLATPICKR_DATE_FORMAT_DEFAULT = "m/d/Y",
+    } = this.config["ember-caluma"] || {};
+
+    return FLATPICKR_DATE_FORMAT[this.locale] ?? FLATPICKR_DATE_FORMAT_DEFAULT;
+  }
+
+  @action
+  onDateMinMaxChange(key, [date]) {
+    // Change Javascript date to ISO string if not null.
+    this.changeset.set(
+      key,
+      date ? DateTime.fromJSDate(date).toISODate() : null,
+    );
+  }
+
   get possibleTypes() {
     return Object.keys(TYPES).map((value) => ({
       value,
@@ -281,6 +313,8 @@ export default class CfbFormEditorQuestion extends Component {
   _getDateQuestionInput(changeset) {
     return {
       hintText: changeset.get("hintText"),
+      maxDate: changeset.get("maxDate"),
+      minDate: changeset.get("minDate"),
     };
   }
 

packages/form-builder/addon/gql/mutations/save-date-question.graphql

@@ -7,6 +7,8 @@ mutation SaveDateQuestion($input: SaveDateQuestionInput!) {
       ...QuestionInfo
       ... on DateQuestion {
         hintText
+        dateMinValue: minDate
+        dateMaxValue: maxDate
       }
     }
     clientMutationId

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

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"

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"

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"

packages/form/addon/components/cf-field/input/date.hbs

@@ -20,6 +20,8 @@
     @altFormat={{this.dateFormat}}
     @altInput={{true}}
     @allowInput={{true}}
+    @maxDate={{@field.question.raw.maxDate}}
+    @minDate={{@field.question.raw.minDate}}
     @onChange={{this.onChange}}
     @onReady={{this.onReady}}
     @onClose={{this.onClose}}

packages/form/addon/gql/fragments/field.graphql

@@ -104,6 +104,8 @@ fragment SimpleQuestion on Question {
       value
     }
     hintText
+    minDate
+    maxDate
   }
   ... on StaticQuestion {
     staticContent
@@ -164,6 +166,8 @@ fragment FieldTableQuestion on Question {
               }
               ... on DateAnswer {
                 dateValue: value
+                minDate
+                maxDate
               }
             }
           }

packages/testing/addon/mirage-graphql/schema.graphql

@@ -976,6 +976,8 @@ type DateAnswer implements Answer & Node {
   id: ID!
   question: Question!
   value: Date
+  minDate: Date
+  maxDate: Date
   meta: GenericScalar!
   date: Date
 }
@@ -987,6 +989,8 @@ type DateQuestion implements Question & Node {
   createdByGroup: String
   modifiedByUser: String
   modifiedByGroup: String
+  minDate: Date
+  maxDate: Date
   slug: String!
   label: String!
 
@@ -2831,6 +2835,8 @@ input SaveDateQuestionInput {
   isArchived: Boolean
   hintText: String
   clientMutationId: String
+  minDate: Date
+  maxDate: Date
 }
 
 type SaveDateQuestionPayload {