Merge pull request #29 from OpenSPP/feat/cr-wizard-ux-improvements

feat(spp_change_request_v2): improve CR creation wizard UX

Author: gonzalesedwin1123

spp_change_request_v2/__manifest__.py

@@ -60,8 +60,13 @@
     "assets": {
         "web.assets_backend": [
             "spp_change_request_v2/static/src/components/**/*",
+            "spp_change_request_v2/static/src/css/cr_search_results.css",
             "spp_change_request_v2/static/src/js/create_change_request.js",
+            "spp_change_request_v2/static/src/js/search_delay_field.js",
+            "spp_change_request_v2/static/src/js/cr_search_results_field.js",
             "spp_change_request_v2/static/src/xml/create_change_request_template.xml",
+            "spp_change_request_v2/static/src/xml/search_delay_field.xml",
+            "spp_change_request_v2/static/src/xml/cr_search_results_field.xml",
         ],
     },
     "installable": True,

spp_change_request_v2/models/change_request_conflict.py

@@ -12,6 +12,10 @@ class SPPChangeRequestConflict(models.Model):
     _name = "spp.change.request"
     _inherit = ["spp.change.request", "spp.cr.conflict.mixin"]
 
+    is_conflict_detection_enabled = fields.Boolean(
+        related="request_type_id.enable_conflict_detection",
+    )
+
     # ══════════════════════════════════════════════════════════════════════════
     # OVERRIDE CRUD TO INTEGRATE CONFLICT DETECTION
     # ══════════════════════════════════════════════════════════════════════════

spp_change_request_v2/models/change_request_detail_base.py

@@ -1,4 +1,5 @@
-from odoo import fields, models
+from odoo import _, api, fields, models
+from odoo.exceptions import UserError
 
 
 class SPPCRDetailBase(models.AbstractModel):
@@ -11,6 +12,14 @@ class SPPCRDetailBase(models.AbstractModel):
     _name = "spp.cr.detail.base"
     _description = "Change Request Detail Base"
 
+    @api.depends("change_request_id.name")
+    def _compute_display_name(self):
+        for rec in self:
+            if rec.change_request_id and rec.change_request_id.name:
+                rec.display_name = rec.change_request_id.name
+            else:
+                super(SPPCRDetailBase, rec)._compute_display_name()
+
     change_request_id = fields.Many2one(
         "spp.change.request",
         string="Change Request",
@@ -33,6 +42,23 @@ class SPPCRDetailBase(models.AbstractModel):
         related="change_request_id.is_applied",
     )
 
+    def action_proceed_to_cr(self):
+        """Navigate to the parent Change Request form if there are proposed changes."""
+        self.ensure_one()
+        cr = self.change_request_id
+        if not cr.has_proposed_changes:
+            raise UserError(
+                _("No proposed changes detected. Please make changes before proceeding.")
+            )
+        return {
+            "type": "ir.actions.act_window",
+            "name": cr.name,
+            "res_model": "spp.change.request",
+            "res_id": cr.id,
+            "view_mode": "form",
+            "target": "current",
+        }
+
     def action_submit_for_approval(self):
         """Submit the parent CR for approval."""
         self.ensure_one()

spp_change_request_v2/models/res_partner.py

@@ -1,14 +1,32 @@
 # Part of OpenSPP. See LICENSE file for full copyright and licensing details.
 """Extend res.partner for better registrant display in CR wizard."""
 
-from odoo import api, models
+from odoo import api, fields, models
 
 
 class ResPartner(models.Model):
     """Extend res.partner to show more info when searching for registrants."""
 
     _inherit = "res.partner"
 
+    reg_id_display = fields.Char(
+        string="Registrant ID",
+        compute="_compute_reg_id_display",
+    )
+
+    @api.depends("reg_ids.value", "reg_ids.id_type_id")
+    def _compute_reg_id_display(self):
+        for rec in self:
+            if rec.reg_ids:
+                parts = []
+                for rid in rec.reg_ids:
+                    if rid.value:
+                        label = rid.id_type_as_str or "ID"
+                        parts.append(f"{label} ({rid.value})")
+                rec.reg_id_display = ", ".join(parts) if parts else ""
+            else:
+                rec.reg_id_display = ""
+
     def _compute_display_name(self):
         """Add registrant ID to display name when in CR wizard context."""
         super()._compute_display_name()

spp_change_request_v2/static/src/css/cr_search_results.css

@@ -0,0 +1,7 @@
+/* Force the search results widget to take full width in the form */
+.o_field_cr_search_results,
+.o_field_widget:has(.o_field_cr_search_results) {
+    width: 100% !important;
+    max-width: 100% !important;
+    display: block !important;
+}

spp_change_request_v2/static/src/js/cr_search_results_field.js

@@ -0,0 +1,62 @@
+/** @odoo-module **/
+
+import {Component, onMounted, onPatched, useRef} from "@odoo/owl";
+import {_t} from "@web/core/l10n/translation";
+import {registry} from "@web/core/registry";
+import {standardFieldProps} from "@web/views/fields/standard_field_props";
+
+/**
+ * Custom widget that renders HTML search results and handles row clicks.
+ * When a row with class "o_cr_search_result" is clicked, it writes the
+ * partner ID to the _selected_partner_id bridge field, which triggers
+ * a server-side onchange to set registrant_id.
+ */
+export class CrSearchResultsField extends Component {
+    static template = "spp_change_request_v2.CrSearchResultsField";
+    static props = {...standardFieldProps};
+
+    setup() {
+        this.containerRef = useRef("container");
+        onMounted(() => this._attachClickHandler());
+        onPatched(() => this._attachClickHandler());
+    }
+
+    get htmlContent() {
+        return this.props.record.data[this.props.name] || "";
+    }
+
+    _attachClickHandler() {
+        const el = this.containerRef.el;
+        if (!el) return;
+        // Row selection
+        el.querySelectorAll(".o_cr_search_result").forEach((row) => {
+            row.onclick = (ev) => {
+                ev.preventDefault();
+                ev.stopPropagation();
+                const partnerId = parseInt(row.dataset.partnerId);
+                if (partnerId) {
+                    this.props.record.update({_selected_partner_id: partnerId});
+                }
+            };
+        });
+        // Pagination
+        el.querySelectorAll(".o_cr_page_prev, .o_cr_page_next").forEach((link) => {
+            link.onclick = (ev) => {
+                ev.preventDefault();
+                ev.stopPropagation();
+                const page = parseInt(link.dataset.page);
+                if (!isNaN(page) && page >= 0) {
+                    this.props.record.update({_search_page: page});
+                }
+            };
+        });
+    }
+}
+
+export const crSearchResultsField = {
+    component: CrSearchResultsField,
+    displayName: _t("CR Search Results"),
+    supportedTypes: ["html"],
+};
+
+registry.category("fields").add("cr_search_results", crSearchResultsField);

spp_change_request_v2/static/src/js/create_change_request.js

@@ -84,5 +84,6 @@ patch(FormController.prototype, {
         if (this.props.resModel === "spp.change.request") {
             this.hideFormCreateButton = true;
         }
+        // Row click handling for CR create wizard is now in cr_search_results_field.js
     },
 });

spp_change_request_v2/static/src/js/search_delay_field.js

@@ -0,0 +1,58 @@
+/** @odoo-module **/
+
+import {Component, useEffect, useRef, onWillUnmount} from "@odoo/owl";
+import {_t} from "@web/core/l10n/translation";
+import {useDebounced} from "@web/core/utils/timing";
+import {registry} from "@web/core/registry";
+import {standardFieldProps} from "@web/views/fields/standard_field_props";
+
+/**
+ * Char field that triggers onchange after a typing delay (500ms).
+ * Used for search fields where we want live results without waiting for blur.
+ */
+export class SearchDelayField extends Component {
+    static template = "spp_change_request_v2.SearchDelayField";
+    static props = {
+        ...standardFieldProps,
+        placeholder: {type: String, optional: true},
+    };
+
+    setup() {
+        this.inputRef = useRef("input");
+
+        this.debouncedCommit = useDebounced((value) => {
+            this.props.record.update({[this.props.name]: value});
+        }, 500);
+
+        // Keep input in sync when record updates externally (e.g. onchange clears it)
+        useEffect(
+            () => {
+                const el = this.inputRef.el;
+                if (el) {
+                    const recordValue = this.props.record.data[this.props.name] || "";
+                    if (el !== document.activeElement || !recordValue) {
+                        el.value = recordValue;
+                    }
+                }
+            },
+            () => [this.props.record.data[this.props.name]]
+        );
+    }
+
+    get value() {
+        return this.props.record.data[this.props.name] || "";
+    }
+
+    onInput(ev) {
+        this.debouncedCommit(ev.target.value);
+    }
+}
+
+export const searchDelayField = {
+    component: SearchDelayField,
+    displayName: _t("Search with Delay"),
+    supportedTypes: ["char"],
+    extractProps: ({placeholder}) => ({placeholder}),
+};
+
+registry.category("fields").add("search_delay", searchDelayField);

spp_change_request_v2/static/src/xml/cr_search_results_field.xml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<templates xml:space="preserve">
+
+    <t t-name="spp_change_request_v2.CrSearchResultsField">
+        <div t-ref="container" class="o_field_cr_search_results" style="width:100%" t-out="htmlContent"/>
+    </t>
+
+</templates>

spp_change_request_v2/static/src/xml/search_delay_field.xml

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<templates xml:space="preserve">
+
+    <t t-name="spp_change_request_v2.SearchDelayField">
+        <input t-ref="input"
+               type="text"
+               class="o_input"
+               t-att-value="value"
+               t-att-placeholder="props.placeholder || ''"
+               t-att-readonly="props.readonly ? 'readonly' : undefined"
+               t-on-input="onInput"/>
+    </t>
+
+</templates>