From d361d4948150edc675c2c2cd1cd2565b625ea2db Mon Sep 17 00:00:00 2001
From: ijas ahammed <ija@odoo.com>
Date: Wed, 3 Mar 2021 06:35:50 +0000
Subject: [PATCH] [IMP] website_crm_partner_assign: improve opportunity
 front-end page

This commit improves the following:
 - Hides the icons under the 'Contact' section if the related
   information is not available.
 - Moves the 'Next Activity Date' next to 'Next Activity' on
   opportunity edition dialog, and opens the date-picker to
   schedule next activity below the input instead of above it.
 - Increased the height of 'Details Next Activity' textarea so
   that 'Next Activity Date' picker can be shown within the modal
   without introducing scroll-bar.
 - This commit renames the label 'Title' to 'Opportunity' to avoid
   confusion, and auto-fills it based on the 'Contact Name' for the
   modal that is used for creating opportunities from front-end.

   Apart from that, this commit also improves string of the button
   responsible to create new opportunity from front-end.

TaskID-2443894
closes https://github.com/odoo/odoo/pull/67524

Part-of: odoo/odoo#67524
---
 .../static/src/js/crm_partner_assign.js       | 19 +++--
 .../website_crm_partner_assign_templates.xml  | 71 ++++++++++---------
 2 files changed, 51 insertions(+), 39 deletions(-)

diff --git a/addons/website_crm_partner_assign/static/src/js/crm_partner_assign.js b/addons/website_crm_partner_assign/static/src/js/crm_partner_assign.js
index e43d1430579..2f3974807ba 100644
--- a/addons/website_crm_partner_assign/static/src/js/crm_partner_assign.js
+++ b/addons/website_crm_partner_assign/static/src/js/crm_partner_assign.js
@@ -1,6 +1,7 @@
 odoo.define('crm.partner_assign', function (require) {
 'use strict';
 
+const {_t} = require('web.core');
 var publicWidget = require('web.public.widget');
 var time = require('web.time');
 
@@ -15,6 +16,7 @@ publicWidget.registry.crmPartnerAssign = publicWidget.Widget.extend({
         'click .new_opp_confirm': '_onNewOppConfirm',
         'click .edit_opp_confirm': '_onEditOppConfirm',
         'change .edit_opp_form .next_activity': '_onChangeNextActivity',
+        'change #new-opp-dialog .contact_name': '_onChangeContactName',
         'click div.input-group.date[data-target-input="nearest"]': '_onCalendarInputGroupClick',
     },
 
@@ -229,6 +231,17 @@ publicWidget.registry.crmPartnerAssign = publicWidget.Widget.extend({
         ev.stopPropagation();
         this._buttonExec($(ev.currentTarget), this._editOpportunity);
     },
+    /**
+     * @private
+     * @param {Event} ev
+     */
+    _onChangeContactName: function (ev) {
+        const contactName = ev.currentTarget.value.trim();
+        let titleEl = this.el.querySelector('.title');
+        if (!titleEl.value.trim()) {
+            titleEl.value = contactName ? _.str.sprintf(_t("%s's Opportunity"), contactName) : '';
+        }
+    },
     /**
      * @private
      * @param {Event} ev
@@ -259,12 +272,6 @@ publicWidget.registry.crmPartnerAssign = publicWidget.Widget.extend({
                 down: 'fa fa-chevron-down',
             },
         };
-        // in some screen sizes, the automatic position opens the picker below input,
-        // but because #next_activity_div is the last element, we always open the
-        // picker on top the input to prevent extra scroll
-        if ($calendarInputGroup.is('#next_activity_div')) {
-            calendarOptions.widgetPositioning = {vertical: 'top'};
-        }
         $calendarInputGroup.datetimepicker(calendarOptions);
     },
 
diff --git a/addons/website_crm_partner_assign/views/website_crm_partner_assign_templates.xml b/addons/website_crm_partner_assign/views/website_crm_partner_assign_templates.xml
index 796dae42fff..72b4fdbf243 100644
--- a/addons/website_crm_partner_assign/views/website_crm_partner_assign_templates.xml
+++ b/addons/website_crm_partner_assign/views/website_crm_partner_assign_templates.xml
@@ -254,7 +254,7 @@
 
                 <div class="form-inline ml-lg-4" t-if="request.env.user.partner_id.grade_id or request.env.user.commercial_partner_id.grade_id">
                     <button class="btn btn-success btn-sm" name='new_opp' data-toggle="modal" data-target=".modal_new_opp" title="Add an opportunity" aria-label="Add an opportunity">
-                        <i class="fa fa-plus"/> Create New
+                        Create Opportunity
                     </button>
                 </div>
             </t>
@@ -273,7 +273,7 @@
                                 <input type='text' name="contact_name" class="form-control contact_name"/>
                             </div>
                             <div class="form-group">
-                                <label class="col-form-label h4dd" for="title">Title</label>
+                                <label class="col-form-label h4dd" for="title">Opportunity</label>
                                 <input type='text' name="title" class="form-control title"/>
                             </div>
                             <div class="form-group">
@@ -569,31 +569,29 @@
                             <div class="row mb-3" t-if="opportunity.partner_name or opportunity.email_from or opportunity.contact_name">
                                 <strong class="col-12 col-sm-3">Customer</strong>
                                 <div class="col">
-                                    <div>
+                                    <div t-if="opportunity.partner_name or opportunity.contact_name">
                                         <span class="fa fa-user fa-fw" role="img" aria-label="User" title="User"/>
                                         <strong class="font-italic" t-if="opportunity.partner_name" itemprop="name" t-field="opportunity.partner_name" />
                                         <strong class="font-italic" t-else="" itemprop="name" t-field="opportunity.contact_name" />
                                     </div>
-                                    <div>
+                                    <div t-if="opportunity.phone">
                                         <span class="fa fa-phone fa-fw" role="img" aria-label="Phone" title="Phone"/>
-                                        <span t-if="opportunity.phone" itemprop="telephone" t-field="opportunity.phone"/>
-                                        <span t-else="" class="text-muted"> - </span>
+                                        <span itemprop="telephone" t-field="opportunity.phone"/>
                                     </div>
-                                    <div>
+                                    <div t-if="opportunity.mobile">
                                         <span class="fa fa-mobile fa-fw" role="img" aria-label="Mobile" title="Mobile"/>
-                                        <span t-if="opportunity.mobile" itemprop="mobile" t-field="opportunity.mobile"/>
-                                        <span t-else="" class="text-muted"> - </span>
+                                        <span itemprop="mobile" t-field="opportunity.mobile"/>
                                     </div>
-                                    <div>
+                                    <div t-if="opportunity.email_from">
                                         <span class="fa fa-envelope fa-fw" role="img" aria-label="Email" title="Email"/>
-                                        <span t-if="opportunity.email_from" itemprop="email" t-field="opportunity.email_from"/>
-                                        <span t-else="" class="text-muted"> - </span>
+                                        <span itemprop="email" t-field="opportunity.email_from"/>
                                     </div>
                                 </div>
                             </div>
                             <div class="row">
                                 <strong class="col-12 col-sm-3">Address</strong>
-                                <address class="col d-flex align-items-baseline mb-0">
+                                <address t-if="opportunity.street or opportunity.street2 or opportunity.city or opportunity.zip or opportunity.state_id or opportunity.country_id"
+                                    class="col d-flex align-items-baseline mb-0">
                                     <span class="fa fa-map-marker fa-fw" role="img" aria-label="Address" title="Address"/>
                                     <div>
                                         <div t-if="opportunity.street"><span t-field="opportunity.street"/></div>
@@ -602,7 +600,7 @@
                                         <div t-if="opportunity.city or opportunity.zip">
                                             <span t-field="opportunity.city"/> <span t-field="opportunity.zip"/>
                                         </div>
-                                        <div t-if="opportunity.state_id or country_id">
+                                        <div t-if="opportunity.state_id or opportunity.country_id">
                                             <span t-field="opportunity.state_id"/> <span t-field="opportunity.country_id"/>
                                         </div>
                                     </div>
@@ -684,28 +682,35 @@
                                                 </div>
                                             </div>
                                             <div class="form-group">
-                                                <label class="col-form-label" for="next_activity">Next Activity</label>
-                                                <select class="form-control next_activity" name="next_activity">
-                                                    <t t-foreach="activity_types" t-as="activity_type">
-                                                        <option t-att-data="activity_type.id" t-att-selected="activity_type.id == user_activity.activity_type_id.id" t-att-name="activity_type.name" t-att-delay_count="activity_type.delay_count" t-att-delay_unit="activity_type.delay_unit" t-att-summary="activity_type.summary"><t t-esc="activity_type.name"/></option>
-                                                    </t>
-                                                </select>
+                                                <div class="row">
+                                                    <div class="col-md-5">
+                                                        <label class="col-form-label" for="next_activity">Next Activity</label>
+                                                        <select class="form-control next_activity" name="next_activity">
+                                                            <t t-foreach="activity_types" t-as="activity_type">
+                                                                <option t-att-data="activity_type.id" t-att-selected="activity_type.id == user_activity.activity_type_id.id"
+                                                                    t-att-name="activity_type.name" t-att-delay_count="activity_type.delay_count"
+                                                                    t-att-delay_unit="activity_type.delay_unit" t-att-summary="activity_type.summary">
+                                                                <t t-esc="activity_type.name"/></option>
+                                                            </t>
+                                                        </select>
+                                                    </div>
+                                                    <div class="col-md-7">
+                                                        <label class="col-form-label" for="activity_date_deadline">Next Activity Date</label>
+                                                        <div class="input-group date" id="next_activity_div" data-target-input="nearest">
+                                                            <t t-set='date_formatted'><t t-options='{"widget": "date"}' t-esc="user_activity.date_deadline"/></t>
+                                                            <input type="text" name="activity_date_deadline" data-target="#next_activity_div" t-att-value="date_formatted" class="form-control activity_date_deadline datetimepicker-input" t-att-name="prefix"/>
+                                                            <div class="input-group-append" data-target="#next_activity_div" data-toggle="datetimepicker">
+                                                                <span class="input-group-text">
+                                                                    <span class="fa fa-calendar" role="img" aria-label="Calendar" title="Calendar"></span>
+                                                                </span>
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                </div>
                                             </div>
                                             <div class="form-group">
                                                 <label class="col-form-label" for="activity_summary">Details Next Activity</label>
-                                                <textarea rows="3" name="activity_summary" class="form-control activity_summary"><t t-esc="user_activity.summary"/></textarea>
-                                            </div>
-                                            <div class="form-group">
-                                                <label class="col-form-label" for="activity_date_deadline">Next Activity Date</label>
-                                                <div class="input-group date" id="next_activity_div" data-target-input="nearest">
-                                                    <t t-set='date_formatted'><t t-options='{"widget": "date"}' t-esc="user_activity.date_deadline"/></t>
-                                                    <input type="text" name="activity_date_deadline" data-target="#next_activity_div" t-att-value="date_formatted" class="form-control activity_date_deadline datetimepicker-input" t-att-name="prefix"/>
-                                                    <div class="input-group-append" data-target="#next_activity_div" data-toggle="datetimepicker">
-                                                        <span class="input-group-text">
-                                                            <span class="fa fa-calendar" role="img" aria-label="Calendar" title="Calendar"></span>
-                                                        </span>
-                                                    </div>
-                                                </div>
+                                                <textarea rows="6" name="activity_summary" class="form-control activity_summary"><t t-esc="user_activity.summary"/></textarea>
                                             </div>
                                         </main>
                                         <footer class="modal-footer">