refactor form add/edit account in profile

project/customer/forms.py

@@ -175,10 +175,11 @@ class UserProfileAdminForm(UserProfileForm):
 
 class BankAccountForm(forms.ModelForm):
     """Форма редактирования расчетных счетов."""
-    search_bank = forms.CharField(label=u'Поиск банка', required=False)
+    # search_bank = forms.CharField(label=u'Поиск банка', required=False, initial='')
     class Meta:
         model = models.BankAccount
-        fields = ('search_bank', 'bik', 'name', 'short_name', 'korr_account', 'account', 'is_main', 'company')
+        # fields = ('search_bank', 'bik', 'name', 'short_name', 'korr_account', 'account', 'is_main', 'company')
+        fields = ('bik', 'name', 'short_name', 'korr_account', 'account', 'is_main', 'company')
         _textarea = forms.Textarea(attrs={'cols': 80, 'rows': 3})
         widgets = {
             'bik': forms.HiddenInput(),
@@ -193,7 +194,7 @@ class BankAccountForm(forms.ModelForm):
         # self.fields['bik'].widget.attrs.update(_numeric(self.fields['bik']))
         # self.fields['korr_account'].widget.attrs.update(_numeric(self.fields['korr_account']))
         self.fields['account'].widget.attrs.update(_numeric(self.fields['account']))
-        self.fields['search_bank'].widget.attrs['class'] = 'my_class'
+        # self.fields['search_bank'].widget.attrs['class'] = 'search-bank'
 
 
 class BankAccountAdminForm(BankAccountForm):

project/static/css/style.css

@@ -690,4 +690,46 @@ a.popup-unreg {background:url(../img/popup-trash.png) no-repeat 3px center;}
 .search-property {
     padding: 15px;
     background: rgba(128, 128, 128, 0.1);
+}
+
+.form__label {
+    font-style: italic;
+}
+
+.form__label_search {
+    width: 110px;
+    display: inline-block;
+}
+
+.form__input {
+    padding-left: 10px;
+    margin-left: 2px;
+}
+
+.form__input_search {
+    width: 450px;
+}
+
+.search__container {
+    margin: 0 -13px;
+    padding: 15px 0;
+    background: rgba(128, 128, 128, 0.1);
+}
+
+.form__label_search {
+    padding-left:15px;
+}
+
+.form__bank label {
+    display: inline-block;
+    width: 110px;
+}
+
+.bank-short-name {
+    font-size: 10px;
+    color: grey;
+}
+
+.bank-account-label {
+    padding: 0 15px 0 40px;
 }

project/static/js/customer/profile.edit.js

@@ -12,11 +12,13 @@ $(document).ready(function() {
 
     bank_form.dialog({
         modal: true,
-        autoOpen: false
+        autoOpen: false,
+        width: 600
     });
 
     $('button[name=close-form]', bank_form).click(function() {
         bank_form.dialog('close');
+        clearResultSearchDiv($("#searchBankResult"));
         return false;
     });
 
@@ -51,11 +53,18 @@ function setup_bank_account_edit_links(form) {
             form.clearForm();
             clear_form_errors(form);
 
+            // console.log("----",'edit');
+
             var get_url = link.attr('href').replace('edit/', 'get/ajax/'); // url to fetch account fields
+            // console.log("----",get_url);
             var obj_values = fetch_data(get_url);
 
+            // console.log("----",obj_values);
+
             update_form_fields(form, obj_values);
 
+            fillResultSearchBankTemplate(obj_values);
+
             form.one('dialogbeforeclose', update_bank_acoounts_list);
 
             form.dialog('open');

project/static/js/dialogs.js

@@ -34,6 +34,9 @@ $(document).ready(function() {
                     }
                     form.dialog('close');
                     form.clearForm();
+
+                    clearResultSearchDiv($("#searchBankResult"));
+
                     if (data.message) {
                         if (dlg_msg) {
                             dlg_msg.dialog({title: data.message['title']}).html(data.message['msg']);
@@ -139,10 +142,21 @@ function update_form_fields(form, obj_values) {
             var input = $(':input[name="' + key + '"]', form);
             if (input) {
                 var input_type = input.attr('type');
-                if (input_type == 'checkbox' || input_type == 'radio')
+
-                    input.attr('checked', value);
+                if (input_type == 'checkbox' || input_type == 'radio') {
-                else
+                    // console.log("---- value", value);
+                    input.prop('checked', value);
+                } else {
                     input.val(value);
+                }
+
             }
         }
 }
+
+function clearResultSearchDiv(div) {
+
+    if ($(div).html().trim() !== '') {
+        div.html('');
+    }
+}

project/templates/base.html

@@ -158,6 +158,7 @@
     <script src="{{ STATIC_URL }}js/lib/jquery.blockUI.js"></script>
     <script src="{{ STATIC_URL }}js/lib/entertotab.js"></script>
     <script src="{{ STATIC_URL }}js/lib/jquery.cookie.js"></script>
+    <script src="{{ STATIC_URL }}js/lib/handlebars-v4.0.5.js"></script>
 
     <script src="{{ STATIC_URL }}js/csrf.js"></script>
 

project/templates/customer/clients/list.html

@@ -87,7 +87,6 @@
                 if (data.address)
                     clientAddress.val(data.address.value);
             } else {
-{#                console.log("----",suggestion);#}
                 if (data.name && data.name.full || "") {
                      bankFullName.val(data.name && data.name.full || "");
                 }

project/templates/customer/profile/edit.html

@@ -452,13 +452,22 @@
 {% endblock %}
 
 {% block dialogs %}
-<form id="bank-account-edit-form" action="" method="post" title="Добавить / редактировать расчётный счёт">
+    <form id="bank-account-edit-form" class="form__bank" action="" method="post" title="Добавить / редактировать расчётный счёт">
-    {% csrf_token %}
+        {% csrf_token %}
-    <div class="errors-layout"></div>
+        <div class="search-bank">
-    {{ bank_account_form.as_p }}
+            <div class="search__container">
-    <button type="submit" role="button" name="submit">Сохранить</button>
+                <label class="form__label form__label_search" for="searchBankAPI">Поиск банка:</label>
-    <button class="close-form" type="button" role="close" name="close-form">Отмена</button>
+                <input class="form__input form__input_search" id="searchBankAPI" placeholder="Введите название, БИК или SWIFT">
-</form>
+            </div>
+            <div id="searchBankResult"></div>
+        </div>
+
+        <div class="errors-layout"></div>
+        {{ bank_account_form.as_p }}
+        <button type="submit" role="button" name="submit">Сохранить</button>
+        <button class="close-form" type="button" role="close" name="close-form">Отмена</button>
+    </form>
+
 
 <form id="bank-account-delete-form" action="" method="post" title="Удалить расчётный счёт">
     {% csrf_token %}
@@ -470,6 +479,7 @@
 {% endblock %}
 
 {% block js %}
+
     <script type="text/javascript">
         var BANK_ACCOUNT = {
             'list_url': "{% url 'customer_bank_accounts_list_ajax' %}",
@@ -505,7 +515,7 @@
                     }
                 }).html('Нажмите "Да", чтобы удалить изображение');
                 dlg_msg.dialog('open');
-            })
+            });
 
             var getPic = function(data){
                 var elm_id = '#' + data['elm_id'].substring(3);
@@ -513,12 +523,12 @@
                 $(elm_id + ' img').attr('src', data['pic'])
                 $(tmb_id).val(data['full_pic']);
                 $(elm_id + ' .del_image').show();
-            }
+            };
 
             $('.img_load input[type=file]').on('change', function(e){
                 e.preventDefault();
                 var this_id = $(this).attr('id').substring(3);
-                console.log($('#' + this_id + ' img'));
+               // console.log($('#' + this_id + ' img'));
                 $('#' + this_id + ' img').attr('src', '{{ STATIC_URL }}/img/spinner.gif');
                 var formData = new FormData();
                 formData.append($(this).val(), $(this)[0].files[0]);
@@ -541,7 +551,11 @@
 
     <script src="{{ STATIC_URL }}js/lib/jquery.suggestions.min.js"></script>
 
+
+
     <script>
+    $(document).ready(function() {
+
         var paramsType,
             profileForm = $("#profile-form"),
             profileSearch = $("#searchAPI"),
@@ -614,7 +628,6 @@
             profileSearch.val('');
         }
 
-
         function changeDataInInputs(data) {
 
             if (paramsType ==="LEGAL") {
@@ -714,36 +727,100 @@
              onSelect: showSuggestion
         });
 
+    });
+
     </script>
 
     <script>
 
+    $(document).ready(function() {
         var bankForm = $("#bank-account-edit-form"),
+            bankSearch = $("#searchBankAPI"),
             bankBic = $("#id_bik", bankForm),
             bankShortName = $("#id_short_name", bankForm),
             bankFullName = $("#id_name", bankForm),
-            bankCorrespondentAccount = $("#id_korr_account", bankForm),
+            bankCorrespondentAccount = $("#id_korr_account", bankForm);
-            formInputs = [bankBic, bankShortName, bankFullName, bankCorrespondentAccount];
 
         function showSuggestion(suggestion) {
             var data = suggestion.data;
             if (!data) return;
+
+            //console.log("----",data);
+
             bankShortName.val(data.name && data.name.payment || "");
-            bankFullName.val(data.name && data.name.full || "");
+            bankFullName.val(data.name && data.name.full && data.name.payment || "");
             bankBic.val(data.bic);
             bankCorrespondentAccount.val(data.correspondent_account);
-        }
 
-        for (var index = formInputs.length - 1; index >= 0; --index) {
+            fillResultSearchBankTemplate(data);
 
-            formInputs[index].suggestions({
-                token: "{{ dadata_api_key }}",
-                type: "BANK",
-                count: 5,
-                onSelect: showSuggestion
-            });
         }
 
+        bankSearch.suggestions({
+            token: "{{ dadata_api_key }}",
+            type: "BANK",
+            count: 2,
+            onSelect: showSuggestion
+        });
+
+        bankSearch.on('keyup',(function () {
+            if (bankSearch.val().length === 0) {
+                clearResultSearchDiv($("#searchBankResult"));
+            }
+        }));
+
+    });
+
+    function fillResultSearchBankTemplate(obj) {
+
+        var bankResultDiv = $("#searchBankResult");
+        var templateBank = $("#resultSearchBankTemplate").html();
+        var template = Handlebars.compile(templateBank);
+
+         if (obj.bik) {
+             var newObj = {};
+             newObj["bic"] = obj.bik;
+             newObj['name'] = {};
+             newObj["name"]["full"] = obj.name;
+             newObj["name"]["payment"] = obj.short_name;
+             newObj["correspondent_account"] = obj.korr_account;
+             obj = newObj;
+         }
+        //console.log("----", obj);
+        bankResultDiv.html(template(obj));
+    }
+
     </script>
 
-{% endblock %}
+
+{% verbatim %}
+    <script id="resultSearchBankTemplate" type="text/x-handlebars-template">
+        <table>
+            <tbody>
+                <tr>
+                    <td width="110">Наименование:</td>
+                    {{#if name.full}}
+                        <td>{{ name.full }}</td>
+                        {{else}}
+                        <td>{{ name.payment }}</td>
+                    {{/if}}
+                </tr>
+                <tr>
+                    <td></td>
+                    <td><span class="bank-short-name">{{ name.payment }}</span></td>
+                </tr>
+                <tr>
+                    <td>БИК:</td>
+                    <td>
+                        <span class="bank-bic">{{ bic }}</span>
+                        <span class="bank-account-label">К/сч:</span>
+                        <span class="bank-account">{{ correspondent_account }}</span>
+                    </td>
+                </tr>
+            </tbody>
+        </table>
+    </script>
+{% endverbatim %}
+
+
+{% endblock js %}