[FIX] hr_holidays: Accrual UX

The selection field of days in the accrual plan milestones was always showing 31 days in the options regardless the month. A new JavaScript Class was created that extends the "SelecionField" to dynamically change the options and show the number of days depending on the month by accessing the month from props.

Task: 6199932

Author: raame-odoo

addons/hr_holidays/static/src/components/accrual_day_selection/accrual_day_selection.js

@@ -0,0 +1,41 @@
+import { SelectionField, selectionField } from "@web/views/fields/selection/selection_field";
+import { registry } from "@web/core/registry";
+
+export class AccrualDaySelection extends SelectionField {
+    static props = {
+        ...SelectionField.props,
+    };
+    
+    get options() {
+        const allOptions = super.options;
+        
+        const monthFieldName = this.props.monthFieldName;
+        
+        if (!monthFieldName) return allOptions;
+        
+        const monthValue = this.props.record.data[monthFieldName];
+
+        if (!monthValue) return allOptions;
+
+        const month = parseInt(monthValue);
+        let maxDays = 31;
+        if ([4, 6, 9, 11].includes(month)) {
+            maxDays = 30;
+        } else if (month === 2) {
+            maxDays = 29;
+        }
+
+        return allOptions.filter((opt) => parseInt(opt[0]) <= maxDays);
+    }
+}
+
+
+registry.category("fields").add("accrual_day_dropdown", {
+    ...selectionField,
+    component: AccrualDaySelection,
+    extractProps: (fieldInfo, dynamicInfo) => {
+    const props = selectionField.extractProps(fieldInfo,dynamicInfo);
+    props.monthFieldName = fieldInfo.options.month_field;
+    return props;
+},
+});

addons/hr_holidays/views/hr_leave_accrual_views.xml

@@ -36,17 +36,17 @@
                                 </span>
                                 <span name="biyearly" invisible="frequency != 'biyearly'">
                                     on the
-                                    <field nolabel="1" name="first_month_day" class="o_field_accrual" placeholder="select a day" required="frequency == 'biyearly'"/>
+                                    <field nolabel="1" name="first_month_day" class="o_field_accrual" placeholder="select a day" required="frequency == 'biyearly'" widget="accrual_day_dropdown" options="{'month_field': 'first_month'}"/>
                                     of
                                     <field name="first_month" class="o_field_accrual" placeholder="select a month" required="frequency == 'biyearly'"/>
                                     and the
-                                    <field nolabel="1" name="second_month_day" class="o_field_accrual" placeholder="select a day" required="frequency == 'biyearly'"/>
+                                    <field nolabel="1" name="second_month_day" class="o_field_accrual" placeholder="select a day" required="frequency == 'biyearly'" widget="accrual_day_dropdown" options="{'month_field': 'second_month'}"/>
                                     of
                                     <field nolabel="1" name="second_month" class="o_field_accrual" placeholder="select a month" required="frequency == 'biyearly'"/>
                                 </span>
                                 <span name="yearly" invisible="frequency != 'yearly'">
                                     on the
-                                    <field nolabel="1" name="yearly_day" class="o_field_accrual" required="frequency == 'yearly'" placeholder="select a day"/>
+                                    <field nolabel="1" name="yearly_day" class="o_field_accrual" required="frequency == 'yearly'" placeholder="select a day" widget="accrual_day_dropdown" options="{'month_field': 'yearly_month'}"/>
                                     of
                                     <field nolabel="1" name="yearly_month" class="o_field_accrual" required="frequency == 'yearly'" placeholder="select a month"/>
                                 </span>
@@ -196,7 +196,7 @@
                                         <span id="carryover_custom_date">
                                             : the
                                             <field name="carryover_day" placeholder="select a day"
-                                                   required="carryover_date == 'other'"/>
+                                                   required="carryover_date == 'other'" widget="accrual_day_dropdown" options="{'month_field': 'carryover_month'}"/>
                                             of
                                             <field name="carryover_month" placeholder="select a month"
                                                    required="carryover_date == 'other'"/>