[MIG] account_statement_import_online_gocardless: Migration to 17.0

account_statement_import_online_gocardless/__manifest__.py

@@ -3,7 +3,7 @@
 # License AGPL-3.0 or later (https://www.gnu.org/licenses/agpl).
 {
     "name": "Online Bank Statements: GoCardless",
-    "version": "16.0.1.2.4",
+    "version": "17.0.1.0.0",
     "category": "Account",
     "website": "https://github.com/OCA/bank-statement-import",
     "author": "ForgeFlow, Tecnativa, Odoo Community Association (OCA)",
@@ -22,7 +22,7 @@
             "account_statement_import_online_gocardless/static/src/"
             "lib/gocardless-ui/selector.css",
             "account_statement_import_online_gocardless/static/src/"
-            "js/select_bank_widget.js",
+            "js/select_bank_widget.esm.js",
             "account_statement_import_online_gocardless/static/src/"
             "xml/select_bank_widget.xml",
         ],

account_statement_import_online_gocardless/static/src/js/select_bank_widget.esm.js

@@ -0,0 +1,87 @@
+/** @odoo-module **/
+import {Component, useState} from "@odoo/owl";
+import {Dialog} from "@web/core/dialog/dialog";
+import {_t} from "@web/core/l10n/translation";
+import {registry} from "@web/core/registry";
+
+export class GocardlessDialog extends Component {
+    setup() {
+        this.state = useState({
+            searchString: "",
+            country: false,
+            institutions: this.props.context.institutions,
+        });
+    }
+    onChangeCountry(event) {
+        var country = false;
+        if (
+            event.target.selectedOptions.length &&
+            event.target.selectedOptions[0].attributes.length
+        ) {
+            country = event.target.selectedOptions[0].value;
+        }
+        this.state.country = country;
+        this.state.institutions = this.get_institutions(
+            country,
+            this.state.searchString
+        );
+    }
+    onInstitutionSearch(event) {
+        var searchString = event.target.value;
+        this.state.searchString = searchString;
+        this.state.institutions = this.get_institutions(
+            this.state.country,
+            searchString
+        );
+    }
+    get_institutions(country, searchString) {
+        var institutions = this.props.context.institutions;
+        if (country) {
+            institutions.filter((institution) =>
+                institution.countries.includes(country)
+            );
+        }
+        return institutions.filter((institution) =>
+            institution.name.toUpperCase().includes(searchString.toUpperCase())
+        );
+    }
+
+    get country_names() {
+        return this.props.context.country_names;
+    }
+}
+GocardlessDialog.template =
+    "account_statement_import_online_gocardless.OnlineSyncSearchBankGoCardless";
+GocardlessDialog.components = {Dialog};
+
+async function OnlineSyncAccountInstitutionSelector(env, action) {
+    env.services.dialog.add(GocardlessDialog, {
+        title: _t("Gocardless selection"),
+        context: action.context,
+        onClickInstitution: async function (institutionId) {
+            if (!institutionId) {
+                return;
+            }
+            await env.services.orm.write(
+                "online.bank.statement.provider",
+                [action.context.provider_id],
+                {gocardless_institution_id: institutionId}
+            );
+            var redirect_url = await env.services.orm.call(
+                "online.bank.statement.provider",
+                "action_check_gocardless_agreement",
+                [[action.context.provider_id]]
+            );
+            if (redirect_url !== undefined) {
+                window.location.replace(redirect_url);
+            }
+        },
+    });
+}
+
+registry
+    .category("actions")
+    .add(
+        "online_sync_institution_selector_gocardless",
+        OnlineSyncAccountInstitutionSelector
+    );

account_statement_import_online_gocardless/static/src/js/select_bank_widget.js

@@ -1,121 +0,0 @@
-odoo.define(
-    "account_bank_statement_import_online_gocardless.acc_config_widget_gocardless",
-    function (require) {
-        "use strict";
-
-        require("web.dom_ready");
-        var core = require("web.core");
-        var AbstractAction = require("web.AbstractAction");
-        var QWeb = core.qweb;
-        var framework = require("web.framework");
-
-        var OnlineSyncAccountInstitutionSelector = AbstractAction.extend({
-            template: "OnlineSyncSearchBankGoCardless",
-            init: function (parent, action, options) {
-                this._super(parent, action, options);
-                this.context = action.context;
-                this.results = action.context.institutions;
-                this.country_names = action.context.country_names;
-                this.country_selected = action.context.country;
-            },
-
-            start: function () {
-                const self = this;
-                const $selectCountries = this.$el.find(".country_select");
-                const $countryOptions = $(
-                    QWeb.render("OnlineSyncSearchBankGoCardlessCountries", {
-                        country_names: this.country_names,
-                    })
-                );
-                $countryOptions.appendTo($selectCountries);
-                if (
-                    $selectCountries.find("option[value=" + this.country_selected + "]")
-                        .length !== 0
-                ) {
-                    $selectCountries.val(this.country_selected);
-                    $selectCountries.change();
-                }
-                $selectCountries.change(function () {
-                    self.country_selected = this.selectedOptions[0].value;
-                    return self.renderSearchResult();
-                });
-                this.displayState();
-                self.$el.find("#bank_search_input").on("keyup", function () {
-                    const input = $(".institution-search-input");
-                    const filter = input[0].value.toUpperCase();
-                    const institutionList = $(".list-institution");
-
-                    for (let i = 0; i < institutionList.length; i++) {
-                        const txtValue = institutionList[i].textContent;
-                        if (txtValue.toUpperCase().indexOf(filter) > -1) {
-                            institutionList[i].style.display = "";
-                        } else {
-                            institutionList[i].style.display = "none";
-                        }
-                    }
-                });
-            },
-
-            displayState: function () {
-                if (this.results.length > 0) {
-                    this.renderSearchResult();
-                }
-            },
-
-            renderElement: function () {
-                this._super.apply(this, arguments);
-            },
-
-            renderSearchResult: function () {
-                var self = this;
-                this.$(".institution-container").html("");
-                const filteredInstitutions = this.results.filter(function (
-                    institution
-                ) {
-                    return institution.countries.includes(self.country_selected);
-                });
-                var $searchResults = $(
-                    QWeb.render("OnlineSyncSearchBankGoCardlessList", {
-                        institutions: filteredInstitutions,
-                    })
-                );
-                $searchResults.find("a").click(function () {
-                    framework.blockUI();
-                    const id = this.getAttribute("data-institution");
-                    if (id) {
-                        return self
-                            ._rpc({
-                                model: "online.bank.statement.provider",
-                                method: "write",
-                                args: [
-                                    [self.context.provider_id],
-                                    {gocardless_institution_id: id},
-                                ],
-                            })
-                            .then(function () {
-                                return self
-                                    ._rpc({
-                                        model: "online.bank.statement.provider",
-                                        method: "action_check_gocardless_agreement",
-                                        args: [[self.context.active_id]],
-                                    })
-                                    .then(function (redirect_url) {
-                                        if (redirect_url !== undefined) {
-                                            window.location.replace(redirect_url);
-                                        }
-                                    });
-                            });
-                    }
-                });
-                $searchResults.appendTo(self.$(".institution-container"));
-            },
-        });
-        core.action_registry.add(
-            "online_sync_institution_selector_gocardless",
-            OnlineSyncAccountInstitutionSelector
-        );
-        return {
-            OnlineSyncAccountInstitutionSelector: OnlineSyncAccountInstitutionSelector,
-        };
-    }
-);

account_statement_import_online_gocardless/static/src/xml/select_bank_widget.xml

@@ -1,58 +1,75 @@
 <templates xml:space="preserve">
-
+    <t
-  <t t-name="OnlineSyncSearchBankGoCardless">
+        t-name="account_statement_import_online_gocardless.OnlineSyncSearchBankGoCardless"
-    <div class="institution-content-wrapper">
+    >
-      <div id="institution-modal-content">
+    <Dialog title="props.title" contentClass="props.contentClass">
-        <header class="institution-modal-header">
+        <div class="institution-content-wrapper">
-            <div class="institution-search-container">
+            <div id="institution-modal-content">
-                <img
+                <header class="institution-modal-header">
-                            class="institution-search-icon"
+                    <div class="institution-search-container">
-                            url="data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjMDAwMDAwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciICB2aWV3Qm94PSIwIDAgMzAgMzAiIHdpZHRoPSIzMHB4IiBoZWlnaHQ9IjMwcHgiPjxwYXRoIGQ9Ik0gMTMgMyBDIDcuNDg4OTk3MSAzIDMgNy40ODg5OTcxIDMgMTMgQyAzIDE4LjUxMTAwMyA3LjQ4ODk5NzEgMjMgMTMgMjMgQyAxNS4zOTY1MDggMjMgMTcuNTk3Mzg1IDIyLjE0ODk4NiAxOS4zMjIyNjYgMjAuNzM2MzI4IEwgMjUuMjkyOTY5IDI2LjcwNzAzMSBBIDEuMDAwMSAxLjAwMDEgMCAxIDAgMjYuNzA3MDMxIDI1LjI5Mjk2OSBMIDIwLjczNjMyOCAxOS4zMjIyNjYgQyAyMi4xNDg5ODYgMTcuNTk3Mzg1IDIzIDE1LjM5NjUwOCAyMyAxMyBDIDIzIDcuNDg4OTk3MSAxOC41MTEwMDMgMyAxMyAzIHogTSAxMyA1IEMgMTcuNDMwMTIzIDUgMjEgOC41Njk4Nzc0IDIxIDEzIEMgMjEgMTcuNDMwMTIzIDE3LjQzMDEyMyAyMSAxMyAyMSBDIDguNTY5ODc3NCAyMSA1IDE3LjQzMDEyMyA1IDEzIEMgNSA4LjU2OTg3NzQgOC41Njk4Nzc0IDUgMTMgNSB6Ii8+PC9zdmc+"
+                        <img
-                        />
+                                class="institution-search-icon"
-                <div class="row">
+                                url="data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjMDAwMDAwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciICB2aWV3Qm94PSIwIDAgMzAgMzAiIHdpZHRoPSIzMHB4IiBoZWlnaHQ9IjMwcHgiPjxwYXRoIGQ9Ik0gMTMgMyBDIDcuNDg4OTk3MSAzIDMgNy40ODg5OTcxIDMgMTMgQyAzIDE4LjUxMTAwMyA3LjQ4ODk5NzEgMjMgMTMgMjMgQyAxNS4zOTY1MDggMjMgMTcuNTk3Mzg1IDIyLjE0ODk4NiAxOS4zMjIyNjYgMjAuNzM2MzI4IEwgMjUuMjkyOTY5IDI2LjcwNzAzMSBBIDEuMDAwMSAxLjAwMDEgMCAxIDAgMjYuNzA3MDMxIDI1LjI5Mjk2OSBMIDIwLjczNjMyOCAxOS4zMjIyNjYgQyAyMi4xNDg5ODYgMTcuNTk3Mzg1IDIzIDE1LjM5NjUwOCAyMyAxMyBDIDIzIDcuNDg4OTk3MSAxOC41MTEwMDMgMyAxMyAzIHogTSAxMyA1IEMgMTcuNDMwMTIzIDUgMjEgOC41Njk4Nzc0IDIxIDEzIEMgMjEgMTcuNDMwMTIzIDE3LjQzMDEyMyAyMSAxMyAyMSBDIDguNTY5ODc3NCAyMSA1IDE3LjQzMDEyMyA1IDEzIEMgNSA4LjU2OTg3NzQgOC41Njk4Nzc0IDUgMTMgNSB6Ii8+PC9zdmc+"
-                    <label
+                            />
-                                for="country_select"
+                        <div class="row">
-                                class="font-weight-bold"
+                            <label
-                            >Available countries:</label>
+                                    for="country_select"
-                    <select id="country_select" class="country_select o_input" />
+                                    class="font-weight-bold"
+                                >Available countries:</label>
+                            <select
+                                    id="country_select"
+                                    class="country_select o_input"
+                                    t-on-change="onChangeCountry"
+                                >
+                                <option>Select Country to Filter</option>
+                                <t t-if="country_names.length > 0">
+                                    <t
+                                            t-foreach="country_names"
+                                            t-as="country"
+                                            t-key="country.code"
+                                        >
+                                        <option
+                                                t-attf-value="#{country.code}"
+                                                t-esc="country.name"
+                                            />
+                                    </t>
+                                </t>
+                            </select>
+                        </div>
+                        <br />
+                        <input
+                                placeholder="Search..."
+                                class="institution-search-input"
+                                id="bank_search_input"
+                                autofocus="true"
+                                t-on-keydown="onInstitutionSearch"
+                            />
+                    </div>
+                </header>
+                <div class="institution-container institution-search-bx-body">
+                    <t
+                            t-foreach="state.institutions"
+                            t-as="institution"
+                            t-key="institution.id"
+                        >
+                    <div class="list-institution">
+                        <a
+                                    t-attf-class="#{'institution-' + institution.id}"
+                                    t-attf-data-institution="#{institution.id}"
+                                    t-on-click.prevent="() => this.props.onClickInstitution(institution.id)"
+                                    style="cursor:pointer"
+                                >
+                            <img
+                                        class="institution-logo"
+                                        t-attf-src="#{institution.logo}"
+                                    />
+                            <span t-esc="institution.name" />
+                        </a>
+                    </div>
+                </t>
                 </div>
-                <br />
-                <input
-                            placeholder="Search..."
-                            class="institution-search-input"
-                            id="bank_search_input"
-                            autofocus="true"
-                        />
             </div>
-        </header>
+        </div>
-          <div class="institution-container institution-search-bx-body">
+    </Dialog>
-          </div>
-      </div>
-    </div>
   </t>
-
-    <t t-name="OnlineSyncSearchBankGoCardlessList">
-      <t t-if="institutions.length > 0">
-          <t t-foreach="institutions" t-as="institution">
-              <div class="list-institution">
-                  <a
-                        t-attf-class="#{'institution-' + institution.id}"
-                        t-attf-data-institution="#{institution.id}"
-                        style="cursor:pointer"
-                    >
-                      <img class="institution-logo" t-attf-src="#{institution.logo}" />
-                      <span t-esc="institution.name" />
-                  </a>
-              </div>
-          </t>
-      </t>
-  </t>
-    <t t-name="OnlineSyncSearchBankGoCardlessCountries">
-        <option>Select Country to Filter</option>
-        <t t-if="country_names.length > 0">
-            <t t-foreach="country_names" t-as="country">
-                <option t-attf-value="#{country.code}" t-esc="country.name" />
-            </t>
-        </t>
-    </t>
 </templates>

account_statement_import_online_gocardless/view/online_bank_statement_provider.xml

@@ -12,34 +12,35 @@
                 <group
                     name="gocardless"
                     string="GoCardless"
-                    attrs="{'invisible':[('service','!=','gocardless')]}"
+                    invisible="service != 'gocardless'"
                 >
                     <field name="username" string="Secret ID" />
                     <field name="password" string="Secret Key" />
                     <field
                         name="gocardless_requisition_id"
-                        attrs="{'invisible': [('gocardless_requisition_id', '=', False)]}"
+                        invisible="not gocardless_requisition_id"
                         groups="base.group_no_one"
                     />
                     <field
                         name="gocardless_requisition_expiration"
-                        attrs="{'invisible': [('gocardless_requisition_id', '=', False)]}"
+                        invisible="not gocardless_requisition_id"
                         groups="base.group_no_one"
                     />
                     <field
                         name="gocardless_institution_id"
-                        attrs="{'invisible': [('gocardless_institution_id', '=', False)]}"
+                        invisible="not gocardless_institution_id"
                         groups="base.group_no_one"
                     />
                     <field
                         name="gocardless_account_id"
-                        attrs="{'invisible': [('gocardless_account_id', '=', False)]}"
+                        invisible="not gocardless_account_id"
                         groups="base.group_no_one"
                     />
                     <button
                         name="action_select_gocardless_bank"
                         string="Select Bank Account Identifier"
-                        attrs="{'invisible': ['|', ('username', '=', False), ('password', '=', False)]}"
+                        colspan="2"
+                        invisible="not username or not password"
                         type="object"
                     />
                 </group>