Merge pull request #708 from eea/develop

CLMS-279774 (feat): Improved calendar selection
eea · Feb 10, 2025 · 75b800c · 75b800c
2 parents 869668e + f034474
commit 75b800c
Show file tree

Hide file tree

Showing 4 changed files with 124 additions and 17 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,6 +4,11 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
+### [1.1.210](https://github.com/eea/volto-clms-theme/compare/1.1.209...1.1.210) - 10 February 2025
+
+#### :hammer_and_wrench: Others
+
+- CLMS-279774 (feat): Improved calendar selection [Urkorue - [`ab4c043`](https://github.com/eea/volto-clms-theme/commit/ab4c043e4a81c90bdcbdbdd0bf707da17037c34e)]
 ### [1.1.209](https://github.com/eea/volto-clms-theme/compare/1.1.208...1.1.209) - 30 January 2025
 
 #### :rocket: New Features

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-clms-theme",
-  "version": "1.1.209",
+  "version": "1.1.210",
   "description": "volto-clms-theme: Volto theme for CLMS site",
   "main": "src/index.js",
   "author": "CodeSyntax for the European Environment Agency",

diff --git a/src/components/CLMSDownloadCartView/Fields/TimeseriesPicker.jsx b/src/components/CLMSDownloadCartView/Fields/TimeseriesPicker.jsx
@@ -79,22 +79,46 @@ export const TimeseriesPicker = (props) => {
             <DatePicker
               id="start_date"
               inline
-              selectsRange
+              selectsRange={download_limit_temporal_extent < 360 ? true : false}
               className="datepicker"
               minDate={new Date(start)}
               maxDate={new Date(end)}
               startDate={item?.TemporalFilter?.StartDate}
               endDate={item?.TemporalFilter?.EndDate}
               // selectsStart
               onChange={(e) => {
-                item.TemporalFilter = {
-                  StartDate: e[0],
-                  EndDate: e[1],
-                };
-                setStartValue(e[0]);
-                setEndValue(e[1]);
+                if (download_limit_temporal_extent < 360) {
+                  if (download_limit_temporal_extent > 180 && e[1]) {
+                    e[1].setMonth(e[1].getMonth() + 1);
+                    e[1].setDate(e[1].getDate() - 1);
+                  }
+                  item.TemporalFilter = {
+                    StartDate: e[0],
+                    EndDate: e[1],
+                  };
+                  setStartValue(e[0]);
+                  setEndValue(e[1]);
+                } else {
+                  let e2 = new Date(e);
+                  e2.setDate(e2.getDate() + 364);
+                  item.TemporalFilter = {
+                    StartDate: e,
+                    EndDate: e2,
+                  };
+                  setStartValue(e);
+                  setEndValue(e2);
+                }
               }}
               dateFormat="dd.MM.yyyy"
+              showMonthYearPicker={
+                download_limit_temporal_extent > 180 &&
+                download_limit_temporal_extent < 360
+                  ? true
+                  : false
+              }
+              showYearPicker={
+                download_limit_temporal_extent >= 360 ? true : false
+              }
               calendarStartDay={1}
               popperPlacement="top"
               dropdownMode="select"
@@ -114,21 +138,52 @@ export const TimeseriesPicker = (props) => {
                 </span>
               )}
               <br />
-              Click the start and end dates, and then apply.
+              {download_limit_temporal_extent < 180 && (
+                <span>Click the start and end dates, and then apply.</span>
+              )}
+              {download_limit_temporal_extent > 180 &&
+                download_limit_temporal_extent < 360 && (
+                  <span>Click the start and end months, and then apply.</span>
+                )}
+              {download_limit_temporal_extent > 360 && (
+                <span>Click the year, and then apply.</span>
+              )}
               {(!startValue ||
                 !endValue ||
                 !isValidDateRange({
                   start: startValue,
                   end: endValue,
                   limit: download_limit_temporal_extent,
-                })) && (
-                <span>
-                  {' '}
-                  Allowed time range of {
-                    download_limit_temporal_extent
-                  } days.{' '}
-                </span>
-              )}
+                })) &&
+                download_limit_temporal_extent < 180 && (
+                  <span>
+                    {' '}
+                    Allowed time range of {
+                      download_limit_temporal_extent
+                    } days.{' '}
+                  </span>
+                )}
+              {(!startValue ||
+                !endValue ||
+                !isValidDateRange({
+                  start: startValue,
+                  end: endValue,
+                  limit: download_limit_temporal_extent,
+                })) &&
+                download_limit_temporal_extent > 180 &&
+                download_limit_temporal_extent < 360 && (
+                  <span> Allowed time range of 6 months. </span>
+                )}
+              {(!startValue ||
+                !endValue ||
+                !isValidDateRange({
+                  start: startValue,
+                  end: endValue,
+                  limit: download_limit_temporal_extent,
+                })) &&
+                download_limit_temporal_extent > 360 && (
+                  <span> Allowed time range of 1 year. </span>
+                )}
               <CclButton
                 isButton={true}
                 mode={'filled'}

diff --git a/src/components/CLMSDownloadCartView/cart-table.less b/src/components/CLMSDownloadCartView/cart-table.less
@@ -121,3 +121,50 @@ div.mb-2 {
   margin-bottom: 1rem !important;
   margin-inline: 2rem !important;
 }
+
+// .react-datepicker__month{
+//   display: none;
+// }
+
+// .react-datepicker__day-names{
+//   display: none;
+// }
+
+// .react-datepicker__month-container{
+//   width: 100%;
+// }
+
+.react-datepicker__month-text--in-range {
+  background-color: #7c8921 !important;
+}
+
+.react-datepicker__month-text--in-selecting-range {
+  background-color: #7c8921 !important;
+}
+
+.react-datepicker__month-text--range-start {
+  background-color: rgba(160, 177, 40, 0.2) !important;
+  color: black;
+}
+
+.react-datepicker__month-text--range-end {
+  background-color: rgba(160, 177, 40, 0.2) !important;
+  color: black;
+}
+
+.react-datepicker__year-text--in-range {
+  background-color: #7c8921 !important;
+}
+
+.react-datepicker-year-header {
+  width: 100%;
+  color: white;
+}
+
+.react-datepicker__year-wrapper {
+  max-width: 260px;
+}
+
+.react-datepicker__month-container {
+  width: 100%;
+}