Add multiple date ranges

locales/default.pot

@@ -1886,6 +1886,30 @@ msgstr ""
 msgid "Create new for"
 msgstr ""
 
+msgid "Add multiple date ranges"
+msgstr ""
+
+msgid "Day"
+msgstr ""
+
+msgid "Month"
+msgstr ""
+
+msgid "Repeat times"
+msgstr ""
+
+msgid "Repeat type"
+msgstr ""
+
+msgid "Required"
+msgstr ""
+
+msgid "Year"
+msgstr ""
+
+msgid "Add multiple"
+msgstr ""
+
 msgid "Insert date(s)"
 msgstr ""
 

locales/en_US/default.po

@@ -1889,6 +1889,30 @@ msgstr ""
 msgid "Create new for"
 msgstr ""
 
+msgid "Add multiple date ranges"
+msgstr ""
+
+msgid "Day"
+msgstr ""
+
+msgid "Month"
+msgstr ""
+
+msgid "Repeat times"
+msgstr ""
+
+msgid "Repeat type"
+msgstr ""
+
+msgid "Required"
+msgstr ""
+
+msgid "Year"
+msgstr ""
+
+msgid "Add multiple"
+msgstr ""
+
 msgid "Insert date(s)"
 msgstr ""
 

locales/it_IT/default.po

@@ -1914,6 +1914,30 @@ msgstr "Selezionare un tipo"
 msgid "Create new for"
 msgstr "Crea nuovo per"
 
+msgid "Add multiple date ranges"
+msgstr "Aggiungi intervalli multipli di date"
+
+msgid "Day"
+msgstr "Giorno"
+
+msgid "Month"
+msgstr "Mese"
+
+msgid "Repeat times"
+msgstr "Numero di ripetizioni"
+
+msgid "Repeat type"
+msgstr "Tipo di ripetizione"
+
+msgid "Required"
+msgstr "Obbligatorio"
+
+msgid "Year"
+msgstr "Anno"
+
+msgid "Add multiple"
+msgstr "Aggiungi multiplo"
+
 msgid "Insert date(s)"
 msgstr "Inserire data(e)"
 

resources/js/app/components/date-input.js

@@ -45,7 +45,7 @@ export default {
     },
     watch: {
         attrs: function(val) {
-            if (val.time != this.instance.config.enableTime) {
+            if (val?.['data-min-date'] || val.time != this.instance.config.enableTime) {
                 // flatpickr doesn't allow dynamic config change. we must destroy and re-create it.
                 /// see https://github.com/flatpickr/flatpickr/issues/1546
                 const date = this.instance.latestSelectedDateObj;

resources/js/app/components/date-range/date-range.vue

@@ -21,23 +21,24 @@
         <div :class="dateRangeClass()">
             <span>{{ msgTo }}</span>
             <div>
-                <template v-if="start_date">
+                <template v-if="start_date && ready">
                     <input
                         type="text"
                         date="true"
                         :time="!all_day"
+                        :data-min-date="end_date ? false : start_date"
                         daterange="true"
                         v-model="end_date"
                         v-datepicker="true"
                         @change="onDateChanged(false, $event)"
-                        v-if="ready"
                     >
                 </template>
-                <input
-                    type="text"
-                    disabled="disabled"
-                    v-else
-                >
+                <template v-else>
+                    <input
+                        type="text"
+                        disabled="disabled"
+                    >
+                </template>
             </div>
         </div>
         <div v-show="!optionIsSet('all_day')">
@@ -142,7 +143,7 @@
         </div>
         <div
             class="icon-error"
-            v-show="!compact && validate() === false"
+            v-show="!compact && start_date && validate() === false"
         >
             {{ msgInvalidDateRange }}
         </div>

resources/js/app/components/date-ranges-view/date-range-panel.vue

@@ -0,0 +1,212 @@
+<template>
+    <div class="date-range-panel">
+        <template v-if="showPanel">
+            <div
+                class="backdrop"
+                style="display: block; z-index: 9998;"
+                @click="closePanel()"
+            />
+            <aside
+                class="main-panel-container on"
+                custom-footer="true"
+                custom-header="true"
+            >
+                <div class="main-panel fieldset">
+                    <header class="mx-1 mt-1 tab tab-static unselectable">
+                        <h2>{{ msgAddMultipleDateRanges }}</h2>
+                        <button
+                            class="button button-outlined close"
+                            v-title="msgClose"
+                            @click.prevent.stop="closePanel()"
+                        >
+                            <app-icon icon="carbon:close" />
+                        </button>
+                    </header>
+                    <div class="pcontainer">
+                        <div class="form-field">
+                            <div class="fields">
+                                <label><span>{{ msgDate }}</span> <span class="required">*</span></label>
+                                <label><span>{{ msgFrom }}</span> <span class="required">*</span></label>
+                                <label><span>{{ msgTo }}</span> <span class="required">*</span></label>
+                                <label>{{ msgRepeatType }} <span class="required">*</span></label>
+                                <label>{{ msgRepeatTimes }} <span class="required">*</span></label>
+                                <input
+                                    type="date"
+                                    v-model="start"
+                                >
+                                <input
+                                    type="time"
+                                    v-model="from"
+                                >
+                                <input
+                                    type="time"
+                                    v-model="to"
+                                >
+                                <select
+                                    required
+                                    v-model="rangeType"
+                                >
+                                    <option value="daily">{{ msgDay }}</option>
+                                    <option value="weekly">{{ msgWeek }}</option>
+                                    <option value="monthly">{{ msgMonth }}</option>
+                                    <option value="yearly">{{ msgYear }}</option>
+                                </select>
+                                <input
+                                    type="number"
+                                    min="1"
+                                    max="100"
+                                    class="input input-text input-range-number"
+                                    required
+                                    v-model="numberOfRanges"
+                                >
+                            </div>
+                        </div>
+                        <div class="buttons">
+                            <button
+                                class="button button-primary"
+                                :disabled="addDisabled"
+                                @click="add"
+                            >
+                                <app-icon icon="carbon:save" />
+                                <span class="ml-05">
+                                    {{ msgAdd }}
+                                </span>
+                            </button>
+                            <button
+                                class="button button-primary"
+                                @click.prevent.stop="closePanel()"
+                            >
+                                <app-icon icon="carbon:close" />
+                                <span class="ml-05">
+                                    {{ msgClose }}
+                                </span>
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </aside>
+        </template>
+    </div>
+</template>
+<script>
+import { t } from 'ttag';
+export default {
+    name: 'DateRangePanel',
+    props: {
+        showPanel: {
+            type: Boolean,
+            default: false
+        },
+    },
+    data() {
+        return {
+            from: '',
+            to: '',
+            msgAdd: t`Add`,
+            msgAddMultipleDateRanges: t`Add multiple date ranges`,
+            msgClose: t`Close`,
+            msgDate: t`Date`,
+            msgDay: t`Day`,
+            msgFrom: t`From`,
+            msgMonth: t`Month`,
+            msgTo: t`To`,
+            msgRepeatTimes: t`Repeat times`,
+            msgRepeatType: t`Repeat type`,
+            msgRequired: t`Required`,
+            msgWeek: t`Week`,
+            msgYear: t`Year`,
+            numberOfRanges: 1,
+            rangeType: 'daily', // default to daily
+            start: '', // Start date for the range
+        }
+    },
+    computed: {
+        addDisabled() {
+            return !this.start || !this.from || !this.to || !this.rangeType || this.numberOfRanges < 1 || this.numberOfRanges > 100;
+        },
+    },
+    methods: {
+        add() {
+            for (let i = 0; i < this.numberOfRanges; i++) {
+                const startDate = new Date(this.start + 'T' + this.from);
+                const endDate = new Date(this.start + 'T' + this.to);
+                switch (this.rangeType) {
+                    case 'daily':
+                        startDate.setDate(startDate.getDate() + i);
+                        endDate.setDate(endDate.getDate() + i);
+                        break;
+                    case 'weekly':
+                        startDate.setDate(startDate.getDate() + (i * 7));
+                        endDate.setDate(endDate.getDate() + (i * 7));
+                        break;
+                    case 'monthly':
+                        startDate.setMonth(startDate.getMonth() + i);
+                        endDate.setMonth(endDate.getMonth() + i);
+                        break;
+                    case 'yearly':
+                        startDate.setFullYear(startDate.getFullYear() + i);
+                        endDate.setFullYear(endDate.getFullYear() + i);
+                        break;
+                }
+                this.$emit('add-range', { start: startDate, end: endDate });
+            }
+            this.closePanel();
+        },
+        closePanel() {
+            this.$emit('update:showPanel', false);
+        },
+    },
+}
+</script>
+<style scoped>
+div.date-range-panel aside.main-panel-container {
+    z-index: 9999;
+}
+div.date-range-panel aside.main-panel {
+    margin: 1rem;
+    padding: 1rem;
+}
+div.date-range-panel button.close {
+    border: solid transparent 0px;
+    min-width: 36px;
+    max-width: 36px;
+}
+div.date-range-panel .pcontainer {
+    padding: 1rem;
+    margin: auto;
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+}
+div.date-range-panel .pcontainer > div {
+    display: flex;
+    flex-direction: column;
+}
+div.date-range-panel div.buttons {
+    display: flex;
+    flex-direction: row;
+    gap: 1rem;
+}
+div.date-range-panel span.required {
+    color: red;
+}
+div.date-range-panel div.root > label {
+    display:flex;
+    align-items:center;
+    direction:column;
+    cursor: pointer;
+}
+div.date-range-panel div.root > label > span {
+    display: flex;
+    align-self: center;
+    cursor: pointer;
+}
+div.date-range-panel input.input-range-number {
+    max-width: 120px;
+}
+div.date-range-panel .fields {
+    display: grid;
+    grid-template-columns: 150px 100px 100px 200px 200px;
+    column-gap: 0.5rem;
+}
+</style>