EZP-29948: Improved dates select on the search content site #1261

lucasOsti · 2020-02-26T12:38:54Z

Question	Answer
Tickets	https://jira.ez.no/browse/EZP-29948
Bug fix?	no
New feature?	yes
BC breaks?	no
Tests pass?	yes
Doc needed?	no
License	GPL-2.0

Checklist:

Coding standards ($ composer fix-cs)
Ready for Code Review

src/bundle/Controller/SearchController.php

src/bundle/Resources/public/js/scripts/admin.search.filters.js

webhdx

Why exactly do you need to add anything to SearchData? It looks like both lastModified and created properties are arrays containing start_date and end_date so you should use those instead of creating new properties. Please map value from your new input type to existing start_date and end_date fields.

Also you need to use proper form types in PHP instead of packing everything to the general form template.

src/bundle/Controller/SearchController.php

dew326 · 2020-02-27T09:46:57Z

src/bundle/Resources/views/themes/admin/ui/search/form.html.twig

-        </div>
-    </div>
-</div>
+


Suggested change

dew326 · 2020-02-27T09:47:15Z

src/bundle/Resources/public/js/scripts/admin.search.filters.js

+        },
+        formatDate: (date) => eZ.helpers.timezone.formatShortDateTime(date, null),
+    };
+


Suggested change

dew326 · 2020-02-27T09:48:10Z

src/bundle/Resources/public/js/scripts/admin.search.filters.js

-            return;
+            doc.querySelector(dateRange.dataset.periodSelector).value = `P0Y0M${days}D`;
+            doc.querySelector(dateRange.dataset.endSelector).value = endDate;
+            applyBtn.removeAttribute('disabled', false);


You should use toggleDisabledStateOnApplyBtn not making it manually.

dew326 · 2020-02-27T09:49:46Z

src/bundle/Resources/public/js/scripts/admin.search.filters.js

-        if (sourceInput.value) {
-            defaultDate = new Date(sourceInput.value * 1000);
-        }
+    const parseDateUTC = (dateString) => {


this is more like getUnixTimestapUTC, also I think it's not dateString it is date object.

dew326 · 2020-02-27T09:55:23Z

src/bundle/Resources/public/js/scripts/admin.search.filters.js

+        if (selectedDates.length === 2) {
+            const startDate = parseDateUTC(selectedDates[0]);
+            const endDate = parseDateUTC(selectedDates[1]);
+            const days = (endDate - startDate) / 86400;


const secondsInDay = 60 * 60 * 24; was very good way to show what the number is.

dew326 · 2020-02-27T10:08:25Z

src/bundle/Resources/views/themes/admin/ui/search/form.html.twig

@@ -97,6 +98,24 @@
            </svg>
            <ul class="ez-filters__user-list ez-filters__user-list--hidden"></ul>
        </div>
+        <div class="ez-date-range ez-date-range--select-modified-range {% if form.last_modified_select.vars.data == "custom_range" %}ez-date-range--visible{% endif %}" data-period-selector="#search_last_modified_date_interval" data-end-selector="#search_last_modified_end_date">


I think this should be inside the div ez-filters__item ez-filters__item--modified because it's related to this select.

Also, I would not introduce a new component so this should be named ez-filters__range-wrapper

dew326 · 2020-02-27T10:09:00Z

src/bundle/Resources/views/themes/admin/ui/search/form.html.twig

+        <div class="ez-date-range ez-date-range--select-modified-range {% if form.last_modified_select.vars.data == "custom_range" %}ez-date-range--visible{% endif %}" data-period-selector="#search_last_modified_date_interval" data-end-selector="#search_last_modified_end_date">
+            <input 
+                type="text"
+                class="form-control ez-date-select"


ez-filters__range-select

dew326 · 2020-02-27T10:09:40Z

src/bundle/Resources/views/themes/admin/ui/search/form.html.twig

+                data-end="{{ formData.lastModified.end_date is defined ? formData.lastModified.end_date|date("Y-m-d") : '' }}"
+            />
+        </div>
+        <div class="ez-date-range ez-date-range--select-created-range {% if form.created_select.vars.data == "custom_range" %}ez-date-range--visible{% endif %}" data-period-selector="#search_created_date_interval" data-end-selector="#search_created_end_date">


This line is very long, can you make it multiline?

dew326 · 2020-02-27T10:13:57Z

src/bundle/Resources/public/js/scripts/admin.search.filters.js

+        } else {
+            doc.querySelector(dateRange.dataset.periodSelector).value = '';
+            doc.querySelector(dateRange.dataset.endSelector).value = 0;
+            applyBtn.setAttribute('disabled', true);


You can't do that here.

dew326 · 2020-02-27T10:15:35Z

src/bundle/Resources/public/js/scripts/admin.search.filters.js

+            applyBtn.removeAttribute('disabled', false);
+        } else {
+            doc.querySelector(dateRange.dataset.periodSelector).value = '';
+            doc.querySelector(dateRange.dataset.endSelector).value = 0;


Why do you have to do that if this should be set by the toggleDatesSelectVisibility function?

dew326 · 2020-02-28T07:07:04Z

src/bundle/Resources/public/js/scripts/admin.search.filters.js

-        const sourceInput = doc.querySelector(field.dataset.targetSelector);
-        const flatPickrInput = field;
-        let defaultDate;
+    const getUnixTimestapUTC = (dateObject) => {


I think I did a typo getUnixTimestampUTC, sorry

dew326 · 2020-02-28T07:11:07Z

src/bundle/Resources/public/js/scripts/admin.search.filters.js

+                isCreatedSelected ||
+                isCreatorSelected ||
+                isSubtreeSelected) &&
+            isLastModifiedRangeSelected &&


I think it shouldn't be && it should be enabled if isLastModifiedRangeSelected or isCreatedRangeSelected is filled.

dew326 · 2020-02-28T07:14:15Z

src/bundle/Resources/public/js/scripts/admin.search.filters.js

        const contentTypeOption = contentTypeSelect.querySelector('option');
        const isContentTypeSelected = contentTypeOption.innerHTML !== contentTypeOption.dataset.default;
        const isSectionSelected = sectionSelect ? !!sectionSelect.value : false;
        const isModifiedSelected = !!lastModifiedSelect.value;
        const isCreatedSelected = !!lastCreatedSelect.value;
        const isCreatorSelected = !!searchCreatorInput.value;
        const isSubtreeSelected = !!subtreeInput.value.trim().length;
+
+        if (lastModifiedSelect.value === 'custom_range') {
+            const flatPickrInstance = lastModifiedDateRange._flatpickr;


Do we have to rely on the flatpickr instance? Cannot we just check if periodSelector and endSelector have values? I think we could replace the isModifiedSelected and isCreatedSelected with this check.

katarzynazawada

As discussed with Supriya, date picker should display only the date not date&time.

dew326 · 2020-03-04T08:29:44Z

src/bundle/Resources/public/js/scripts/admin.search.filters.js

+        locale: {
+            rangeSeparator: ' - ',
+        },
+        formatDate: (date) => eZ.helpers.timezone.formatShortDateTime(date, null),


Suggested change

formatDate: (date) => eZ.helpers.timezone.formatShortDateTime(date, null),

formatDate: (date) => eZ.helpers.timezone.formatShortDateTime(date, null, eZ.adminUiConfig.dateFormat.shortDate),

To achieve what @katarzynazawada meant we have to add the dateFormat to the formatShortDateTime helper.

katarzynazawada

🎉

lucasOsti added the Ready for review label Feb 26, 2020

lucasOsti requested review from GrabowskiM, dew326, adamwojs and mikadamczyk February 26, 2020 12:38

dew326 requested review from webhdx, michal-myszka, Nattfarinn and ViniTou February 26, 2020 13:37

michal-myszka previously approved these changes Feb 26, 2020

View reviewed changes

src/bundle/Controller/SearchController.php Outdated Show resolved Hide resolved

src/bundle/Resources/public/js/scripts/admin.search.filters.js Outdated Show resolved Hide resolved

michal-myszka self-requested a review February 26, 2020 13:55

webhdx suggested changes Feb 26, 2020

View reviewed changes

webhdx requested a review from alongosz February 26, 2020 13:58

michal-myszka reviewed Feb 26, 2020

View reviewed changes

src/bundle/Controller/SearchController.php Outdated Show resolved Hide resolved

lucasOsti requested review from michal-myszka and removed request for adamwojs, mikadamczyk, Nattfarinn, alongosz, ViniTou and michal-myszka February 26, 2020 14:23

michal-myszka approved these changes Feb 26, 2020

View reviewed changes

dew326 requested changes Feb 27, 2020

View reviewed changes

lucasOsti requested a review from dew326 February 27, 2020 13:50

dew326 requested changes Feb 28, 2020

View reviewed changes

lucasOsti requested a review from dew326 February 28, 2020 09:23

dew326 approved these changes Feb 28, 2020

View reviewed changes

GrabowskiM approved these changes Feb 28, 2020

View reviewed changes

lucasOsti requested a review from webhdx February 28, 2020 10:33

lucasOsti requested review from webhdx and removed request for webhdx February 28, 2020 10:33

lucasOsti added Ready for QA and removed Ready for review Ready for QA labels Feb 28, 2020

lucasOsti requested a review from dew326 February 28, 2020 12:13

webhdx approved these changes Feb 28, 2020

View reviewed changes

dew326 approved these changes Feb 28, 2020

View reviewed changes

lucasOsti added the Ready for QA label Feb 28, 2020

katarzynazawada self-assigned this Feb 28, 2020

EZP-29948: Improved date range select for search screen

8667dbb

lucasOsti force-pushed the EZP-29948-Add-date-picker-when-selected-custome-range branch from 2515fa4 to 8667dbb Compare March 3, 2020 08:56

katarzynazawada requested changes Mar 4, 2020

View reviewed changes

dew326 requested changes Mar 4, 2020

View reviewed changes

Added only date format to date range picker on search content

49e8349

lucasOsti requested review from dew326 and katarzynazawada March 4, 2020 08:36

dew326 approved these changes Mar 4, 2020

View reviewed changes

katarzynazawada approved these changes Mar 4, 2020

View reviewed changes

katarzynazawada added QA approved and removed Ready for QA labels Mar 4, 2020

lserwatka merged commit b63d259 into ezsystems:master Mar 4, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

EZP-29948: Improved dates select on the search content site #1261

EZP-29948: Improved dates select on the search content site #1261

lucasOsti commented Feb 26, 2020

webhdx left a comment •

edited

Loading

dew326 Feb 27, 2020

dew326 Feb 27, 2020

dew326 Feb 27, 2020

dew326 Feb 27, 2020

dew326 Feb 27, 2020

dew326 Feb 27, 2020

dew326 Feb 27, 2020

dew326 Feb 27, 2020

dew326 Feb 27, 2020

dew326 Feb 27, 2020

dew326 Feb 28, 2020

dew326 Feb 28, 2020

dew326 Feb 28, 2020

katarzynazawada left a comment

dew326 Mar 4, 2020

katarzynazawada left a comment

	formatDate: (date) => eZ.helpers.timezone.formatShortDateTime(date, null),
	formatDate: (date) => eZ.helpers.timezone.formatShortDateTime(date, null, eZ.adminUiConfig.dateFormat.shortDate),

EZP-29948: Improved dates select on the search content site #1261

EZP-29948: Improved dates select on the search content site #1261

Conversation

lucasOsti commented Feb 26, 2020

Checklist:

webhdx left a comment • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

katarzynazawada left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

katarzynazawada left a comment

Choose a reason for hiding this comment

webhdx left a comment •

edited

Loading