From 7da9c296eb84765faba1ac8721f85a5730173740 Mon Sep 17 00:00:00 2001
From: YOGRAJ TANDEL <yta@odoo.com>
Date: Fri, 30 Oct 2020 10:13:09 +0000
Subject: [PATCH] [ADD] calendar,lunch,web: weekly recurrent widget

with this commit we adding weekly recurrent widget, currently proeject and
calendar shows boolean for each day vertically but with this widget we displays
week days and its boolean horizontally.

Here widget will display first day as per language's week_start field, also we
adds FieldDependencies on custom widget and consider those FieldDependencies
while processing view node in basic_view.js

We add support of registry to contain owl custom widgets and add support
of rendering owl custom widgets.

Also with this commit we removes fields like sun, mon, tue etc. from view and
instead use "web_weekly_recurrence" custom widget to display boolean for each
week day.

Co-authored-by: Mohammed Shekha <msh@odoo.com>
---
 addons/calendar/views/calendar_views.xml      |  25 +--
 addons/lunch/views/lunch_alert_views.xml      |  16 +-
 addons/lunch/views/lunch_supplier_views.xml   |  15 +-
 .../project/tests/test_project_recurrence.py  |  32 ++--
 addons/project/views/project_views.xml        |  25 +--
 addons/web/__manifest__.py                    |   1 +
 addons/web/static/src/js/widgets/week_days.js |  90 ++++++++++
 addons/web/static/src/scss/form_view.scss     |  22 +++
 addons/web/static/src/xml/week_days.xml       |  25 +++
 .../static/tests/widgets/week_days_tests.js   | 157 ++++++++++++++++++
 addons/web/views/webclient_templates.xml      |   2 +
 doc/reference/javascript_reference.rst        |   9 +
 12 files changed, 361 insertions(+), 58 deletions(-)
 create mode 100644 addons/web/static/src/js/widgets/week_days.js
 create mode 100644 addons/web/static/src/xml/week_days.xml
 create mode 100644 addons/web/static/tests/widgets/week_days_tests.js

diff --git a/addons/calendar/views/calendar_views.xml b/addons/calendar/views/calendar_views.xml
index d02418f5f37..9b1fff5b28e 100644
--- a/addons/calendar/views/calendar_views.xml
+++ b/addons/calendar/views/calendar_views.xml
@@ -168,9 +168,12 @@
                                     <div attrs="{'invisible': [('recurrency', '=', False)]}">
                                         <group>
                                             <label for="interval"/>
-                                            <div class="o_row">
-                                                <field name="interval" attrs="{'required': [('recurrency', '=', True)]}"/>
-                                                <field name="rrule_type" attrs="{'required': [('recurrency', '=', True)]}"/>
+                                            <div class="o_col">
+                                                <div class="o_row">
+                                                    <field name="interval" attrs="{'required': [('recurrency', '=', True)]}"/>
+                                                    <field name="rrule_type" attrs="{'required': [('recurrency', '=', True)]}"/>
+                                                </div>
+                                                <widget name="week_days" attrs="{'invisible': [('rrule_type', '!=', 'weekly')]}"/>
                                             </div>
                                             <label string="Until" for="end_type"/>
                                             <div class="o_row">
@@ -179,15 +182,13 @@
                                                 <field name="until" attrs="{'invisible': [('end_type', '!=', 'end_date')], 'required': [('end_type', '=', 'end_date'), ('recurrency', '=', True)]}"/>
                                             </div>
                                         </group>
-                                        <group attrs="{'invisible': [('rrule_type', '!=', 'weekly')]}" name="weekdays">
-                                            <field name="mon"/>
-                                            <field name="tue"/>
-                                            <field name="wed"/>
-                                            <field name="thu"/>
-                                            <field name="fri"/>
-                                            <field name="sat"/>
-                                            <field name="sun"/>
-                                        </group>
+                                        <field name="mon" invisible="1"/>
+                                        <field name="tue" invisible="1"/>
+                                        <field name="wed" invisible="1"/>
+                                        <field name="thu" invisible="1"/>
+                                        <field name="fri" invisible="1"/>
+                                        <field name="sat" invisible="1"/>
+                                        <field name="sun" invisible="1"/>
                                         <group attrs="{'invisible': [('rrule_type', '!=', 'monthly')]}">
                                             <label string="Day of Month" for="month_by"/>
                                             <div class="o_row">
diff --git a/addons/lunch/views/lunch_alert_views.xml b/addons/lunch/views/lunch_alert_views.xml
index 8745d571f78..e08885050a6 100644
--- a/addons/lunch/views/lunch_alert_views.xml
+++ b/addons/lunch/views/lunch_alert_views.xml
@@ -49,17 +49,13 @@
                             <field name="active" widget="boolean_toggle"/>
                         </group>
                         <group>
-                            <field name="mon"/>
-                            <field name="tue"/>
-                            <field name="wed"/>
-                            <field name="thu"/>
-                            <field name="fri"/>
-                            <field name="sat"/>
-                            <field name="sun"/>
                             <label for="notification_time" attrs="{'invisible': [['mode', '!=', 'chat']]}"/>
-                            <div class="o_row" attrs="{'invisible': [['mode', '!=', 'chat']]}">
-                                <field name="notification_time" attrs="{'required': [('mode', '=', 'chat')]}" widget="float_time"/>
-                                <field name="notification_moment"/>
+                            <div class="o_col">
+                                <widget name="week_days"/>
+                                <div class="o_row" attrs="{'invisible': [['mode', '!=', 'chat']]}">
+                                    <field name="notification_time" attrs="{'required': [('mode', '=', 'chat')]}" widget="float_time"/>
+                                    <field name="notification_moment"/>
+                                </div>
                             </div>
                             <field name="tz" groups="base.group_no_one"/>
                         </group>
diff --git a/addons/lunch/views/lunch_supplier_views.xml b/addons/lunch/views/lunch_supplier_views.xml
index ba0ec6e7228..d07896a12a6 100644
--- a/addons/lunch/views/lunch_supplier_views.xml
+++ b/addons/lunch/views/lunch_supplier_views.xml
@@ -46,14 +46,13 @@
                     </group>
                     <group>
                         <group string="Availability">
-                            <field name="tz" groups="base.group_no_one"/>
-                            <field name="mon"/>
-                            <field name="tue"/>
-                            <field name="wed"/>
-                            <field name="thu"/>
-                            <field name="fri"/>
-                            <field name="sat"/>
-                            <field name="sun"/>
+                            <label for="tz" groups="base.group_no_one"/>
+                            <div class="o_col">
+                                <div class="o_row">
+                                    <field name="tz" groups="base.group_no_one"/>
+                                </div>
+                                <widget name="week_days"/>
+                            </div>
                             <field name="recurrency_end_date" groups="base.group_no_one"/>
                         </group>
                         <group string="Orders">
diff --git a/addons/project/tests/test_project_recurrence.py b/addons/project/tests/test_project_recurrence.py
index b37ebd2ebf1..561bd17447b 100644
--- a/addons/project/tests/test_project_recurrence.py
+++ b/addons/project/tests/test_project_recurrence.py
@@ -309,23 +309,23 @@ class TestProjectrecurrence(TransactionCase):
         self.assertFalse(form.repeat_show_month)
 
     def test_recurrence_week_day(self):
-        form = Form(self.env['project.task'])
-
-        form.name = 'test recurring task'
-        form.project_id = self.project_recurring
-        form.recurring_task = True
-        form.repeat_unit = 'week'
-
-        form.mon = False
-        form.tue = False
-        form.wed = False
-        form.thu = False
-        form.fri = False
-        form.sat = False
-        form.sun = False
-
         with self.assertRaises(ValidationError), self.cr.savepoint():
-            form.save()
+            self.env['project.task'].create({
+                'name': 'test recurring task',
+                'project_id': self.project_recurring.id,
+                'recurring_task': True,
+                'repeat_interval': 1,
+                'repeat_unit': 'week',
+                'repeat_type': 'after',
+                'repeat_number': 2,
+                'mon': False,
+                'tue': False,
+                'wed': False,
+                'thu': False,
+                'fri': False,
+                'sat': False,
+                'sun': False,
+            })
 
     def test_recurrence_next_dates_week(self):
         dates = self.env['project.task.recurrence']._get_next_recurring_dates(
diff --git a/addons/project/views/project_views.xml b/addons/project/views/project_views.xml
index 9befe1fba42..d26291524c9 100644
--- a/addons/project/views/project_views.xml
+++ b/addons/project/views/project_views.xml
@@ -731,9 +731,12 @@
                             <group>
                                 <group>
                                     <label for="repeat_interval" />
-                                    <div class="o_row">
-                                        <field name="repeat_interval" attrs="{'required': [('recurring_task', '=', True)]}" />
-                                        <field name="repeat_unit" attrs="{'required': [('recurring_task', '=', True)]}" />
+                                    <div class="o_col">
+                                        <div class="o_row">
+                                            <field name="repeat_interval" attrs="{'required': [('recurring_task', '=', True)]}" />
+                                            <field name="repeat_unit" attrs="{'required': [('recurring_task', '=', True)]}" />
+                                        </div>
+                                        <widget name="week_days" attrs="{'invisible': [('repeat_show_dow', '=', False)]}"/>
                                     </div>
 
                                     <label for="repeat_on_month" string="Repeat On" attrs="{'invisible': [('repeat_unit', 'not in', ('month', 'year'))]}" />
@@ -747,15 +750,13 @@
                                         <span attrs="{'invisible': ['|', ('repeat_show_week', '=', False), ('repeat_show_month', '=', False)]}">of</span>
                                         <field name="repeat_month" attrs="{'invisible': [('repeat_show_month', '=', False)], 'required': [('repeat_show_month', '=', True)]}" />
                                     </div>
-
-
-                                    <field name="mon" attrs="{'invisible': [('repeat_show_dow', '=', False)]}" />
-                                    <field name="tue" attrs="{'invisible': [('repeat_show_dow', '=', False)]}" />
-                                    <field name="wed" attrs="{'invisible': [('repeat_show_dow', '=', False)]}" />
-                                    <field name="thu" attrs="{'invisible': [('repeat_show_dow', '=', False)]}" />
-                                    <field name="fri" attrs="{'invisible': [('repeat_show_dow', '=', False)]}" />
-                                    <field name="sat" attrs="{'invisible': [('repeat_show_dow', '=', False)]}" />
-                                    <field name="sun" attrs="{'invisible': [('repeat_show_dow', '=', False)]}" />
+                                    <field name="mon" invisible="1"/>
+                                    <field name="tue" invisible="1"/>
+                                    <field name="wed" invisible="1"/>
+                                    <field name="thu" invisible="1"/>
+                                    <field name="fri" invisible="1"/>
+                                    <field name="sat" invisible="1"/>
+                                    <field name="sun" invisible="1"/>
 
                                     <label for="repeat_type" />
                                     <div class="o_row">
diff --git a/addons/web/__manifest__.py b/addons/web/__manifest__.py
index 110ba18354d..986e5835b8b 100644
--- a/addons/web/__manifest__.py
+++ b/addons/web/__manifest__.py
@@ -36,6 +36,7 @@ This module provides the core of the Odoo Web Client.
         "static/src/xml/search_panel.xml",
         "static/src/xml/web_calendar.xml",
         "static/src/xml/graph.xml",
+        "static/src/xml/week_days.xml",
     ],
     'bootstrap': True,  # load translations for login screen
 }
diff --git a/addons/web/static/src/js/widgets/week_days.js b/addons/web/static/src/js/widgets/week_days.js
new file mode 100644
index 00000000000..0ba69c9227f
--- /dev/null
+++ b/addons/web/static/src/js/widgets/week_days.js
@@ -0,0 +1,90 @@
+odoo.define('web.WeekDays', function (require) {
+    'use strict';
+
+    const CustomCheckbox = require('web.CustomCheckbox');
+    const Registry = require('web.widgetRegistry');
+    const utils = require('web.utils');
+    const { useState } = owl.hooks;
+
+
+    class WeekDays extends owl.Component {
+        constructor(parent) {
+            super(...arguments);
+            this.parent = parent;
+            this.weekdaysShort = [];
+            this._sortWeekdays();
+            this.state = useState({ days: this._prepareData(this.props.record.data) });
+            this.mode = this.props.options.mode;
+        }
+
+        /**
+         * @override
+         */
+        updateState(state) {
+            this.state.days = this._prepareData(state.data);
+        }
+
+        //--------------------------------------------------------------------------
+        // Private
+        //--------------------------------------------------------------------------
+
+        /**
+         * Prepares weekdays data for state
+         * @private
+         * @param {Object} data
+         */
+        _prepareData(data) {
+            const weekdays = {};
+            this.weekdaysShort.forEach((day) => {
+                weekdays[day] = {
+                    id: `${day}-${utils.generateID()}`,
+                    value: data[day],
+                };
+            });
+            return weekdays;
+        }
+        /**
+         * Generates short week days as per start of the week of language
+         * @private
+         */
+        _sortWeekdays() {
+            const weekStart = this.env._t.database.parameters.week_start;
+            const weekdaysShort = ['mon', 'tue', 'wed', 'thu', 'fri', 'sat', 'sun'];
+            const slicedArray1 = weekdaysShort.slice(weekStart - 1, weekdaysShort.length);
+            const slicedArray2 = weekdaysShort.slice(0, weekStart - 1);
+            this.weekdaysShort = slicedArray1.concat(slicedArray2);
+        }
+
+        //--------------------------------------------------------------------------
+        // Handlers
+        //--------------------------------------------------------------------------
+
+        /**
+         * @private
+         * @param {MouseEvent} ev
+         */
+        _onChange(ev) {
+            const field = ev.target.id.split("-")[0];
+            this.trigger('field-changed', {
+                dataPointID: this.props.record.id,
+                changes: { [field]: ev.target.checked },
+            });
+        }
+    }
+
+    WeekDays.components = { CustomCheckbox };
+    WeekDays.template = "web.RecurrentTask";
+    WeekDays.fieldDependencies = {
+        sun: {type: 'boolean'},
+        mon: {type: 'boolean'},
+        tue: {type: 'boolean'},
+        wed: {type: 'boolean'},
+        thu: {type: 'boolean'},
+        fri: {type: 'boolean'},
+        sat: {type: 'boolean'},
+    };
+
+    Registry.add('week_days', WeekDays);
+
+    return WeekDays;
+});
diff --git a/addons/web/static/src/scss/form_view.scss b/addons/web/static/src/scss/form_view.scss
index b0419de7b29..c87a5d505a7 100644
--- a/addons/web/static/src/scss/form_view.scss
+++ b/addons/web/static/src/scss/form_view.scss
@@ -825,6 +825,27 @@ $o-form-label-margin-right: 0px;
         margin-top: 5px;
     }
 
+    // for weekly recurrent
+    .o_recurrent_weekdays {
+        > table {
+            width: 100%;
+            table-layout: fixed;
+            display: table;
+            td {
+                border: 1px solid #dee2e6;
+            }
+            th, td {
+                padding: 0.75rem 0 0.75rem 0;
+            }
+            .o_recurrent_weekday_label {
+                @include o-text-overflow;
+            }
+            .custom-control-label {
+                left: 25%;
+            }
+        }
+    }
+
     // One2Many Kanban views
     .o_field_widget .o_kanban_view.o_kanban_ungrouped {
         padding: 0;
@@ -1051,3 +1072,4 @@ $o-form-label-margin-right: 0px;
         }
     }
 }
+
diff --git a/addons/web/static/src/xml/week_days.xml b/addons/web/static/src/xml/week_days.xml
new file mode 100644
index 00000000000..9d4b2870364
--- /dev/null
+++ b/addons/web/static/src/xml/week_days.xml
@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<template>
+    <t t-name="web.RecurrentTask" owl="1">
+        <div class="o_recurrent_weekdays border mt-2 mb-2">
+            <table class="table table-responsive mb-0">
+                <tr>
+                    <th t-foreach="weekdaysShort" t-as="day" class="text-center border font-weight-bold">
+                        <div class="o_recurrent_weekday_label" t-att-title="props.record.fields[day].string">
+                            <t t-esc="props.record.fields[day].string"/>
+                        </div>
+                    </th>
+                </tr>
+                <tr>
+                    <td t-foreach="weekdaysShort" t-as="day">
+                        <CustomCheckbox disabled="mode === 'readonly'"
+                            value="state.days[day].value"
+                            id="state.days[day].id"
+                            class="o_recurrent_weekday_checkbox text-center"
+                            t-on-change="_onChange"/>
+                    </td>
+                </tr>
+            </table>
+        </div>
+    </t>
+</template>
diff --git a/addons/web/static/tests/widgets/week_days_tests.js b/addons/web/static/tests/widgets/week_days_tests.js
new file mode 100644
index 00000000000..fdda354a949
--- /dev/null
+++ b/addons/web/static/tests/widgets/week_days_tests.js
@@ -0,0 +1,157 @@
+odoo.define('web.week_days_tests', function (require) {
+    "use strict";
+
+    const FormView = require('web.FormView');
+    const testUtils = require('web.test_utils');
+    const { _t } = require('web.core');
+
+    QUnit.module('WeeklyRecurrence', {
+        beforeEach() {
+            this.data = {
+                partner: {
+                    fields: {
+                        id: {strin: "id", type:"integer"},
+                        mon: {string: "Mon", type: "boolean"},
+                        tue: {string: "Tue", type: "boolean"},
+                        wed: {string: "Wed", type: "boolean"},
+                        thu: {string: "Thu", type: "boolean"},
+                        fri: {string: "Fri", type: "boolean"},
+                        sat: {string: "Sat", type: "boolean"},
+                        sun: {string: "Sun", type: "boolean"},
+
+                    },
+                    records: [
+                        {
+                            id: 1,
+                            mon: false,
+                            tue: false,
+                            wed: false,
+                            thu: false,
+                            fri: false,
+                            sat: false,
+                            sun: false,
+                        },
+                    ],
+                },
+            };
+        },
+    }, function () {
+        QUnit.module('WeeklyRecurrenceWidget');
+
+        QUnit.test('simple week recurrence widget', async function (assert) {
+            assert.expect(14);
+
+            let writeCall = 0;
+            const form = await testUtils.createView({
+                View: FormView,
+                model: 'partner',
+                data: this.data,
+                res_id: 1,
+                arch:
+                `<form string="Partners">
+                    <sheet>
+                        <group>
+                            <widget name="week_days"/>
+                        </group>
+                    </sheet>
+                </form>`,
+                mockRPC: function (route, args) {
+                    if (args.method === 'write') {
+                        writeCall++;
+                        if (writeCall === 1) {
+                            assert.ok(args.args[1].sun,
+                                "value of sunday should be true");
+                            this.data.partner.records[0].sun = args.args[1].sun;
+                        }
+                        if (writeCall === 2) {
+                            assert.notOk(args.args[1].sun,
+                                "value of sunday should be false");
+                            assert.ok(args.args[1].mon,
+                                "value of monday should be true");
+                            assert.ok(args.args[1].tue,
+                                "value of tuesday should be true");
+                            this.data.partner.records[0].sun = args.args[1].sun;
+                            this.data.partner.records[0].mon = args.args[1].mon;
+                            this.data.partner.records[0].tue = args.args[1].tue;
+                        }
+                        return Promise.resolve();
+                    }
+                    return this._super.apply(this, arguments);
+                },
+            });
+
+            assert.containsN(form, '.custom-control input:disabled', 7,
+                "all inputs should be disabled in readonly mode");
+            const labelsTexts = [...form.el.querySelectorAll('.o_recurrent_weekday_label')].map(el => el.innerText.trim());
+            assert.deepEqual(labelsTexts, ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+                "labels should be short week names");
+
+            await testUtils.form.clickEdit(form);
+            assert.containsNone(form, '.custom-control input:disabled', 7,
+                "all inputs should be enabled in readonly mode");
+
+            await testUtils.dom.click(form.el.querySelector('input[id^="sun"'));
+            assert.ok(form.el.querySelector('input[id^="sun"').checked,
+                "sunday checkbox should be checked");
+            await testUtils.form.clickSave(form);
+
+            await testUtils.form.clickEdit(form);
+            await testUtils.dom.click(form.el.querySelector('input[id^="mon"'));
+            assert.ok(form.el.querySelector('input[id^="mon"').checked,
+                "monday checkbox should be checked");
+
+            await testUtils.dom.click(form.el.querySelector('input[id^="tue"'));
+            assert.ok(form.el.querySelector('input[id^="tue"').checked,
+                "tuesday checkbox should be checked");
+
+            // uncheck Sunday checkbox and check write call
+            await testUtils.dom.click(form.el.querySelector('input[id^="sun"'));
+            assert.notOk(form.el.querySelector('input[id^="sun"').checked,
+                "sunday checkbox should be unchecked");
+
+            await testUtils.form.clickSave(form);
+            assert.notOk(form.el.querySelector('input[id^="sun"').checked,
+                "sunday checkbox should be unchecked");
+            assert.ok(form.el.querySelector('input[id^="mon"').checked,
+                "monday checkbox should be checked");
+            assert.ok(form.el.querySelector('input[id^="tue"').checked,
+                "tuesday checkbox should be checked");
+
+            form.destroy();
+        });
+
+        QUnit.test('week recurrence widget show week start as per language configuration', async function (assert) {
+            assert.expect(1);
+
+            const form = await testUtils.createView({
+                View: FormView,
+                model: 'partner',
+                data: this.data,
+                res_id: 1,
+                arch:
+                `<form string="Partners">
+                    <sheet>
+                        <group>
+                            <widget name="week_days"/>
+                        </group>
+                    </sheet>
+                </form>`,
+                env: {
+                    _t: {
+                        database: {
+                            parameters: Object.assign(_t.database.parameters,{
+                                week_start: 5,
+                            }),
+                        }
+                    }
+                },
+            });
+
+            const labelsTexts = [...form.el.querySelectorAll('.o_recurrent_weekday_label')].map(el => el.innerText.trim());
+            assert.deepEqual(labelsTexts, ['Fri', 'Sat', 'Sun', 'Mon', 'Tue', 'Wed', 'Thu'],
+                "labels should be short week names");
+
+            form.destroy();
+        });
+    });
+});
diff --git a/addons/web/views/webclient_templates.xml b/addons/web/views/webclient_templates.xml
index a7b0487ad5a..ed3433ebefa 100644
--- a/addons/web/views/webclient_templates.xml
+++ b/addons/web/views/webclient_templates.xml
@@ -289,6 +289,7 @@
 
         <script type="text/javascript" src="/web/static/src/js/widgets/pie_chart.js"></script>
         <script type="text/javascript" src="/web/static/src/js/widgets/ribbon.js"></script>
+        <script type="text/javascript" src="/web/static/src/js/widgets/week_days.js"></script>
         <script type="text/javascript" src="/web/static/src/js/widgets/signature.js"></script>
         <script type="text/javascript" src="/web/static/src/js/components/action_menus.js"></script>
         <script type="text/javascript" src="/web/static/src/js/components/dropdown_menu.js"></script>
@@ -780,6 +781,7 @@
         <script type="text/javascript" src="/web/static/tests/widgets/domain_selector_tests.js"/>
         <script type="text/javascript" src="/web/static/tests/widgets/model_field_selector_tests.js"/>
         <script type="text/javascript" src="/web/static/tests/widgets/rainbow_man_tests.js"/>
+        <script type="text/javascript" src="/web/static/tests/widgets/week_days_tests.js"/>
 
         <script type="text/javascript" src="/web/static/tests/report/client_action_tests.js"/>
 
diff --git a/doc/reference/javascript_reference.rst b/doc/reference/javascript_reference.rst
index 35932910c26..70c4ca5777d 100644
--- a/doc/reference/javascript_reference.rst
+++ b/doc/reference/javascript_reference.rst
@@ -2533,6 +2533,15 @@ reference (FieldReference)
     - model_field: name of a FieldMany2One('ir.model') containing the model of the records that can be selected.
        When this option is set, the select part of the FieldReference isn't displayed.
 
+Widgets
+-------
+week_days (WeekDays)
+  This field displays a list of checkboxes for week days, 1 checkbox for each day
+  and allow the user to select a subset of the choices.
+
+  .. code-block:: xml
+
+      <widget name="week_days">
 
 Client actions
 ==============