[FIX] website: handle disabled and preselected modules

- The selection of cards corresponding to already installed modules
is disabled. A disabled style has been applied to these cards and an
info icon added. On hover on this icon the user is informed that the
module is already installed on its DB.

- Modules that were preselected based on website type can now be
unselected by the user.

- Correct typo in description of feature_module_career.

task-2518565

closes odoo/odoo#72688

X-original-commit: ab364b06dbb20cce90c7caa8ca15d034e2dcb25e
Signed-off-by: Jérémy Kersten (jke) <jke@openerp.com>
Signed-off-by: Sébastien Mottet <smottet@users.noreply.github.com>

addons/website/__manifest__.py

@@ -5,7 +5,7 @@
     'name': 'Website',
     'category': 'Website/Website',
     'sequence': 20,
-    'summary': 'Enterprise website builder',
+    'summary': 'Website builder',
     'website': 'https://www.odoo.com/page/website-builder',
     'version': '1.0',
     'description': "",

addons/website/data/website_data.xml

@@ -308,7 +308,7 @@
     </record>
     <record id="feature_module_career" model="website.configurator.feature">
         <field name="name">Career</field>
-        <field name="description">Publish jobs offer and let people apply</field>
+        <field name="description">Publish job offers and let people apply</field>
         <field name="sequence">8</field>
         <field name="module_id" ref="base.module_website_hr_recruitment"/>
         <field name="icon">fa-address-card</field>

addons/website/i18n/website.pot

@@ -1354,6 +1354,13 @@ msgstr ""
 msgid "Allow to specify for one page of the website to be trackable or not"
 msgstr ""
 
+#. module: website
+#. openerp-web
+#: code:addons/website/static/src/components/configurator/configurator.xml:0
+#, python-format
+msgid "Already installed"
+msgstr ""
+
 #. module: website
 #: model_terms:ir.ui.view,arch_db:website.s_faq_collapse
 msgid ""
@@ -5899,7 +5906,7 @@ msgstr ""
 
 #. module: website
 #: model:website.configurator.feature,description:website.feature_module_career
-msgid "Publish jobs offer and let people apply"
+msgid "Publish job offers and let people apply"
 msgstr ""
 
 #. module: website

addons/website/models/website.py

@@ -291,7 +291,16 @@ class Website(models.Model):
     def configurator_init(self):
         r = dict()
         company_id = self.get_current_website().company_id
-        r['features'] = self.env['website.configurator.feature'].search_read([], ['name', 'description', 'type', 'icon', 'website_types_preselection'])
+        configurator_features = self.env['website.configurator.feature'].search([])
+        r['features'] = [{
+            'id': feature.id,
+            'name': feature.name,
+            'description': feature.description,
+            'type': feature.type,
+            'icon': feature.icon,
+            'website_types_preselection': feature.website_types_preselection,
+            'module_state': feature.module_id.state,
+        } for feature in configurator_features]
         r['logo'] = False
         if company_id.logo and company_id.logo != company_id._get_logo():
             r['logo'] = company_id.logo.decode('utf-8')

addons/website/static/src/components/configurator/configurator.js

@@ -348,7 +348,7 @@ const getters = {
 
 const actions = {
     selectWebsiteType({state}, id) {
-        Object.values(state.features).forEach((feature) => {
+        Object.values(state.features).filter((feature) => feature.module_state !== 'installed').forEach((feature) => {
             feature.selected = feature.website_types_preselection.includes(WEBSITE_TYPES[id].name);
         });
         state.selectedType = id;
@@ -371,9 +371,8 @@ const actions = {
     },
     toggleFeature({state}, featureId) {
         const feature = state.features[featureId];
-        const websiteType = WEBSITE_TYPES[state.selectedType];
-        const forceFeatureActive = websiteType && feature.website_types_preselection.includes(websiteType.name);
-        feature.selected = !feature.selected || forceFeatureActive;
+        const isModuleInstalled = feature.module_state === 'installed';
+        feature.selected = !feature.selected || isModuleInstalled;
     },
     setRecommendedPalette({state}, color1, color2) {
         if (color1 && color2) {
@@ -409,7 +408,7 @@ async function getInitialState() {
         logo: results.logo ? 'data:image/png;base64,' + results.logo : false,
     };
     results.features.forEach(feature => {
-        r.features[feature.id] = Object.assign({}, feature, {selected: false});
+        r.features[feature.id] = Object.assign({}, feature, {selected: feature.module_state === 'installed'});
         const wtp = r.features[feature.id].website_types_preselection;
         r.features[feature.id].website_types_preselection = wtp ? wtp.split(',') : [];
     });

addons/website/static/src/components/configurator/configurator.xml

@@ -165,12 +165,18 @@
                 <div class="page_feature_selection o_configurator_show">
                     <div class="w-100 page_feature_selection container d-flex flex-wrap py2 py-lg-3">
                         <t t-foreach="getters.getFeatures()" t-as="feature" t-key="feature_index">
+                            <t t-set='isInstalled' t-value="feature.module_state == 'installed'"/>
                             <div class="p-2 w-100 w-md-50 w-lg-25" t-if="feature.type != 'empty'">
-                                <div t-attf-class="card h-100 {{feature.selected ? 'border-success' : ''}}" t-on-click="dispatch('toggleFeature', feature.id)">
+                                <div t-attf-class="card h-100 {{isInstalled ? 'card_installed' : (feature.selected ? 'border-success' : '')}}" t-on-click="dispatch('toggleFeature', feature.id)">
                                     <div class="card-body py-2">
-                                        <i t-attf-class="o_configurator_feature_status fa {{feature.selected ? 'fa-check-circle text-success' : 'fa-circle-o text-300'}}" />
-                                        <h5 class="card-title d-flex align-items-center">
-                                            <i t-attf-class="mr-2 small fa {{feature.icon}} {{feature.type == 'page' ? 'text-info' : 'text-warning' }}"/>
+                                        <t t-if="isInstalled">
+                                            <i t-attf-class="o_configurator_feature_status fa fa-info-circle text-muted" title="Already installed"/>
+                                        </t>
+                                        <t t-else="">
+                                            <i t-attf-class="o_configurator_feature_status fa {{feature.selected ? 'fa-check-circle text-success' : 'fa-circle-o text-300'}}" />
+                                        </t>
+                                        <h5 t-attf-class="card-title d-flex align-items-center {{isInstalled ? 'text-muted' : ''}}">
+                                            <i t-attf-class="mr-2 small fa {{feature.icon}} {{isInstalled ? 'text-muted' : (feature.type == 'page' ? 'text-info' : 'text-warning')}}"/>
                                             <t t-esc="feature.name"/>
                                         </h5>
                                         <p class="card-text small text-muted" t-esc="feature.description"/>

addons/website/static/src/scss/configurator.scss

@@ -229,6 +229,11 @@
         &.o_feature_selection_screen {
             .card {
                 cursor: pointer;
+
+                &.card_installed {
+                    cursor: default;
+                    opacity: 0.75;
+                }
             }
             .o_configurator_feature_status {
                 @include o-position-absolute($card-spacer-y * 0.5 , $card-spacer-x * 0.5);