[FIX] web: add close button in daterange picker

Current behaviour
- when we access the daterange picker it was observed that the apply button
  appeared flatter and was not vertically centered.

Expected behaviour
 - add h-100 on buttons container to ensure they are vertically centered and no
   longer appear flatter
 - add close button in which  action is similar to pressing ESC or clicking
   outside the popover

Task-3624556

closes odoo/odoo#148812

Signed-off-by: Aaron Bohy (aab) <aab@odoo.com>

addons/web/static/src/core/datetime/datetime_picker.js

@@ -315,7 +315,10 @@ export class DateTimePicker extends Component {
         rounding: { type: Number, optional: true },
         slots: {
             type: Object,
-            shape: { buttons: { type: Object, optional: true } },
+            shape: {
+                bottom_left: { type: Object, optional: true },
+                buttons: { type: Object, optional: true },
+            },
             optional: true,
         },
         type: { type: [{ value: "date" }, { value: "datetime" }], optional: true },

addons/web/static/src/core/datetime/datetime_picker.xml

@@ -86,7 +86,10 @@
                 </t>
             </div>
 
-            <div t-attf-class="o_datetime_buttons {{ props.type === 'datetime' ? 'position-md-absolute end-0' : '' }}">
+            <div t-attf-class="o_datetime_buttons {{ props.type === 'datetime' ? 'position-md-absolute h-100 start-0' : '' }}">
+                <t t-slot="bottom_left" />
+            </div>
+            <div t-attf-class="o_datetime_buttons {{ props.type === 'datetime' ? 'position-md-absolute h-100 end-0' : '' }}">
                 <t t-slot="buttons" />
             </div>
         </div>

addons/web/static/src/core/datetime/datetime_picker_popover.js

@@ -23,6 +23,13 @@ export class DateTimePickerPopover extends Component {
 
     static template = "web.DateTimePickerPopover";
 
+    get isDateTimeRange() {
+        return (
+            this.props.pickerProps.type === "datetime" ||
+            Array.isArray(this.props.pickerProps.value)
+        );
+    }
+
     //-------------------------------------------------------------------------
     // Lifecycle
     //-------------------------------------------------------------------------

addons/web/static/src/core/datetime/datetime_picker_popover.xml

@@ -3,9 +3,9 @@
     <t t-name="web.DateTimePickerPopover">
         <DateTimePicker t-props="props.pickerProps">
             <t t-set-slot="buttons">
-                <t t-if="props.pickerProps.type === 'datetime' or Array.isArray(props.pickerProps.value)">
+                <t t-if="isDateTimeRange">
                     <button
-                        class="o_apply btn btn-primary btn-sm w-100 w-md-auto d-flex align-items-center justify-content-center gap-1"
+                        class="o_apply btn btn-primary btn-sm h-100 w-100 w-md-auto d-flex align-items-center justify-content-center gap-1"
                         tabindex="-1"
                         t-on-click="props.close"
                     >
@@ -14,6 +14,17 @@
                     </button>
                 </t>
             </t>
+            <t t-set-slot="bottom_left">
+                <t t-if="isDateTimeRange">
+                    <button
+                        class="btn btn-secondary btn-sm h-100 w-100 w-md-auto d-flex align-items-center justify-content-center"
+                        tabindex="-1"
+                        t-on-click="props.close"
+                    >
+                        <span>Close</span>
+                    </button>
+                </t>
+            </t>
         </DateTimePicker>
     </t>
 </templates>

addons/web/static/tests/core/datetime/datetime_input_tests.js

@@ -484,6 +484,22 @@ QUnit.module("Components", ({ beforeEach }) => {
         assert.strictEqual(input.value, "08/02/1997 15:45:05");
     });
 
+    QUnit.test("Clicking close button closes datetime picker", async function (assert) {
+        const input = await mountInput({
+            value: DateTime.fromFormat("09/01/1997 12:30:01", "dd/MM/yyyy HH:mm:ss"),
+            type: "datetime",
+            format: "dd MMM, yyyy HH:mm:ss",
+        });
+        await click(input);
+        await click(getFixture(), ".o_datetime_picker .o_datetime_buttons .btn-secondary");
+
+        assert.strictEqual(
+            getFixture().querySelector(".o_datetime_picker"),
+            null,
+            "Datetime picker is closed"
+        );
+    });
+
     QUnit.test("arab locale, latin numbering system as input", async (assert) => {
         patchWithCleanup(localization, {
             dateFormat: "dd MMM, yyyy",