Merge pull request #7324 from wenzhixin/fix/toolbar

Fixed toolbar bugs

src/extensions/toolbar/bootstrap-table-toolbar.js

@@ -16,22 +16,18 @@ const theme = {
     classes: {},
     html: {
       modal: `
-        <div id="avdSearchModal_%s"  class="modal fade" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
+        <div id="avdSearchModal_%s" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
           <div class="modal-dialog modal-xs">
             <div class="modal-content">
               <div class="modal-header">
-                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                <button class="close toolbar-modal-close" data-dismiss="modal" aria-label="Close">
                   <span aria-hidden="true">&times;</span>
                 </button>
-                <h4 class="modal-title">%s</h4>
+                <h4 class="modal-title toolbar-modal-title"></h4>
               </div>
-              <div class="modal-body modal-body-custom">
-                <div class="container-fluid" id="avdSearchModalContent_%s"
-                  style="padding-right: 0px; padding-left: 0px;" >
-                </div>
-              </div>
-              <div class="modal-footer">
-                <button type="button" id="btnCloseAvd_%s" class="btn btn-%s">%s</button>
+              <div class="modal-body toolbar-modal-body"></div>
+              <div class="modal-footer toolbar-modal-footer">
+                <button class="btn btn-%s toolbar-modal-close"></button>
               </div>
             </div>
           </div>
@@ -46,22 +42,18 @@ const theme = {
     classes: {},
     html: {
       modal: `
-        <div id="avdSearchModal_%s"  class="modal fade" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
+        <div id="avdSearchModal_%s" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
           <div class="modal-dialog modal-xs">
             <div class="modal-content">
               <div class="modal-header">
-                <h4 class="modal-title">%s</h4>
-                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                <h4 class="modal-title toolbar-modal-title"></h4>
+                <button class="close toolbar-modal-close" data-dismiss="modal" aria-label="Close">
                   <span aria-hidden="true">&times;</span>
                 </button>
               </div>
-              <div class="modal-body modal-body-custom">
-                <div class="container-fluid" id="avdSearchModalContent_%s"
-                  style="padding-right: 0; padding-left: 0;" >
-                </div>
-              </div>
-              <div class="modal-footer">
-                <button type="button" id="btnCloseAvd_%s" class="btn btn-%s">%s</button>
+              <div class="modal-body toolbar-modal-body"></div>
+              <div class="modal-footer toolbar-modal-footer">
+                <button class="btn btn-%s toolbar-modal-close"></button>
               </div>
             </div>
           </div>
@@ -78,20 +70,16 @@ const theme = {
     },
     html: {
       modal: `
-        <div id="avdSearchModal_%s" class="modal fade" tabindex="-1" aria-labelledby="mySmallModalLabel" aria-hidden="true">
+        <div id="avdSearchModal_%s" class="modal fade" tabindex="-1" aria-hidden="true">
           <div class="modal-dialog modal-xs">
             <div class="modal-content">
               <div class="modal-header">
-                <h5 class="modal-title">%s</h5>
-                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
-              </div>
-              <div class="modal-body modal-body-custom">
-                <div class="container-fluid" id="avdSearchModalContent_%s"
-                  style="padding-right: 0; padding-left: 0;" >
-                </div>
+                <h5 class="modal-title toolbar-modal-title"></h5>
+                <button class="btn-close toolbar-modal-close" data-bs-dismiss="modal" aria-label="Close"></button>
               </div>
-              <div class="modal-footer">
-                <button type="button" id="btnCloseAvd_%s" class="btn btn-%s">%s</button>
+              <div class="modal-body toolbar-modal-body"></div>
+              <div class="modal-footer toolbar-modal-footer">
+                <button class="btn btn-%s toolbar-modal-close"></button>
               </div>
             </div>
           </div>
@@ -110,12 +98,12 @@ const theme = {
           <div class="modal-background"></div>
           <div class="modal-card">
             <header class="modal-card-head">
-              <p class="modal-card-title">%s</p>
-              <button class="delete" aria-label="close"></button>
+              <p class="modal-card-title toolbar-modal-title"></p>
+              <button class="delete toolbar-modal-close"></button>
             </header>
-            <section class="modal-card-body" id="avdSearchModalContent_%s"></section>
-            <footer class="modal-card-foot">
-              <button class="button" id="btnCloseAvd_%s" data-close="btn btn-%s">%s</button>
+            <section class="modal-card-body toolbar-modal-body"></section>
+            <footer class="modal-card-foot toolbar-modal-footer">
+              <button class="button button-%s toolbar-modal-close"></button>
             </footer>
           </div>
         </div>
@@ -130,15 +118,14 @@ const theme = {
     html: {
       modal: `
         <div class="reveal" id="avdSearchModal_%s" data-reveal>
-          <h1>%s</h1>
-          <div id="avdSearchModalContent_%s">
-
-          </div>
-          <button class="close-button" data-close aria-label="Close modal" type="button">
+          <h1 class="toolbar-modal-title"></h1>
+          <div class="toolbar-modal-body"></div>
+          <button class="close-button toolbar-modal-close" data-close aria-label="Close modal">
             <span aria-hidden="true">&times;</span>
           </button>
-
-          <button id="btnCloseAvd_%s" class="%s" type="button">%s</button>
+          <div class="toolbar-modal-footer">
+            <button class="button button-%s toolbar-modal-close"></button>
+          </div>
         </div>
       `
     }
@@ -152,13 +139,11 @@ const theme = {
       modal: `
         <div id="avdSearchModal_%s" class="modal">
           <div class="modal-content">
-            <h4>%s</h4>
-            <div id="avdSearchModalContent_%s">
-
-            </div>
+            <h4 class="toolbar-modal-title"></h4>
+            <div class="toolbar-modal-body"></div>
           </div>
-          <div class="modal-footer">
-            <a href="javascript:void(0)"" id="btnCloseAvd_%s" class="modal-close waves-effect waves-green btn-flat %s">%s</a>
+          <div class="modal-footer toolbar-modal-footer">
+            <a href="javascript:void(0)" class="modal-close waves-effect waves-green btn-flat btn-%s toolbar-modal-close"></a>
           </div>
         </div>
       `
@@ -172,13 +157,11 @@ const theme = {
     html: {
       modal: `
         <div class="ui modal" id="avdSearchModal_%s">
-          <i class="close icon"></i>
-          <div class="header">
-            %s
-          </div>
-          <div class="image content ui form" id="avdSearchModalContent_%s"></div>
-          <div class="actions">
-            <div id="btnCloseAvd_%s" class="ui black deny button %s">%s</div>
+          <i class="close icon toolbar-modal-close"></i>
+          <div class="header toolbar-modal-title""></div>
+          <div class="image content ui form toolbar-modal-body"></div>
+          <div class="actions toolbar-modal-footer">
+            <div class="ui black deny button button-%s toolbar-modal-close"></div>
           </div>
         </div>
       `
@@ -223,104 +206,97 @@ $.BootstrapTable = class extends $.BootstrapTable {
       this.options.advancedSearch &&
       this.options.idTable
 
-    if (this.options.search && this.options.advancedSearch && this.options.idTable) {
+    if (this.showToolbar) {
       this.buttons = Object.assign(this.buttons, {
         advancedSearch: {
           text: this.options.formatAdvancedSearch(),
           icon: this.options.icons.advancedSearchIcon,
-          event: this.showAvdSearch,
+          event: this.showAdvancedSearch,
           attributes: {
             'aria-label': this.options.formatAdvancedSearch(),
             title: this.options.formatAdvancedSearch()
           }
         }
       })
+
+      if (Utils.isEmptyObject(this.filterColumnsPartial)) {
+        this.filterColumnsPartial = {}
+      }
     }
 
     super.initToolbar()
   }
 
-  showAvdSearch () {
-    const modalSelector = `#avdSearchModal_${this.options.idTable}`
+  showAdvancedSearch () {
+    this.$toolbarModal = $(`#avdSearchModal_${this.options.idTable}`)
 
-    if ($(modalSelector).length <= 0) {
+    if (this.$toolbarModal.length <= 0) {
       $('body').append(Utils.sprintf(theme.html.modal,
-        this.options.idTable, this.options.formatAdvancedSearch(),
-        this.options.idTable, this.options.idTable, this.options.buttonsClass,
-        this.options.formatAdvancedCloseButton()))
-
-      let timeoutId = 0
-
-      $(`#avdSearchModalContent_${this.options.idTable}`).append(this.createFormAvd().join(''))
-
-      $(`#${this.options.idForm}`).off('keyup blur', 'input').on('keyup blur', 'input', e => {
-        if (this.options.sidePagination === 'server') {
-          this.onColumnAdvancedSearch(e)
-        } else {
-          clearTimeout(timeoutId)
-          timeoutId = setTimeout(() => {
-            this.onColumnAdvancedSearch(e)
-          }, this.options.searchTimeOut)
-        }
-      })
+        this.options.idTable, this.options.buttonsClass))
 
-      $(`#btnCloseAvd_${this.options.idTable}`).click(() => this.hideModal())
+      this.$toolbarModal = $(`#avdSearchModal_${this.options.idTable}`)
+      this.$toolbarModal.find('.toolbar-modal-close')
+        .off('click')
+        .on('click', () => this.hideToolbarModal())
+    }
 
-      if ($.fn.bootstrapTable.theme === 'bulma') {
-        $(modalSelector).find('.delete').off('click').on('click', () => this.hideModal())
-      }
+    this.initToolbarModalBody()
+    this.showToolbarModal()
+  }
 
-      this.showModal()
-    } else {
-      this.showModal()
-    }
+  initToolbarModalBody () {
+    this.$toolbarModal.find('.toolbar-modal-title')
+      .html(this.options.formatAdvancedSearch())
+    this.$toolbarModal.find('.toolbar-modal-footer .toolbar-modal-close')
+      .html(this.options.formatAdvancedCloseButton())
+
+    this.$toolbarModal.find('.toolbar-modal-body')
+      .html(this.createToolbarForm())
+      .off('keyup blur', 'input').on('keyup blur', 'input', e => {
+        this.onColumnAdvancedSearch(e)
+      })
   }
 
-  showModal () {
-    const modalSelector = `#avdSearchModal_${this.options.idTable}`
+  showToolbarModal () {
+    const theme = $.fn.bootstrapTable.theme
 
-    if ($.inArray($.fn.bootstrapTable.theme, ['bootstrap3', 'bootstrap4']) !== -1) {
-      $(modalSelector).modal()
-    } else if ($.fn.bootstrapTable.theme === 'bootstrap5') {
+    if (['bootstrap3', 'bootstrap4'].includes(theme)) {
+      this.$toolbarModal.modal()
+    } else if (theme === 'bootstrap5') {
       if (!this.toolbarModal) {
-      //   eslint-disable-next-line no-undef
-        this.toolbarModal = new bootstrap.Modal(document.getElementById(`avdSearchModal_${this.options.idTable}`), {})
+        this.toolbarModal = new window.bootstrap.Modal(this.$toolbarModal[0], {})
       }
       this.toolbarModal.show()
-    } else if ($.fn.bootstrapTable.theme === 'bulma') {
-      $(modalSelector).toggleClass('is-active')
-    } else if ($.fn.bootstrapTable.theme === 'foundation') {
+    } else if (theme === 'bulma') {
+      this.$toolbarModal.toggleClass('is-active')
+    } else if (theme === 'foundation') {
       if (!this.toolbarModal) {
-        // eslint-disable-next-line no-undef
-        this.toolbarModal = new Foundation.Reveal($(modalSelector))
+        this.toolbarModal = new window.Foundation.Reveal(this.$toolbarModal)
       }
       this.toolbarModal.open()
-    } else if ($.fn.bootstrapTable.theme === 'materialize') {
-      $(modalSelector).modal()
-      $(modalSelector).modal('open')
-    } else if ($.fn.bootstrapTable.theme === 'semantic') {
-      $(modalSelector).modal('show')
+    } else if (theme === 'materialize') {
+      this.$toolbarModal.modal().modal('open')
+    } else if (theme === 'semantic') {
+      this.$toolbarModal.modal('show')
     }
-
   }
 
-  hideModal () {
-    const $closeModalButton = $(`#avdSearchModal_${this.options.idTable}`)
-    const modalSelector = `#avdSearchModal_${this.options.idTable}`
+  hideToolbarModal () {
+    const theme = $.fn.bootstrapTable.theme
 
-    if ($.inArray($.fn.bootstrapTable.theme, ['bootstrap3', 'bootstrap4']) !== -1) {
-      $closeModalButton.modal('hide')
-    } else if ($.fn.bootstrapTable.theme === 'bootstrap5') {
+    if (['bootstrap3', 'bootstrap4'].includes(theme)) {
+      this.$toolbarModal.modal('hide')
+    } else if (theme === 'bootstrap5') {
       this.toolbarModal.hide()
-    } else if ($.fn.bootstrapTable.theme === 'bulma') {
+    } else if (theme === 'bulma') {
       $('html').toggleClass('is-clipped')
-      $(modalSelector).toggleClass('is-active')
-    } else if ($.fn.bootstrapTable.theme === 'foundation') {
+      this.$toolbarModal.toggleClass('is-active')
+    } else if (theme === 'foundation') {
       this.toolbarModal.close()
-    } else if ($.fn.bootstrapTable.theme === 'materialize') {
-      $(modalSelector).modal('open')
-    } else if ($.fn.bootstrapTable.theme === 'semantic') {
-      $(modalSelector).modal('close')
+    } else if (theme === 'materialize') {
+      this.$toolbarModal.modal('open')
+    } else if (theme === 'semantic') {
+      this.$toolbarModal.modal('close')
     }
 
     if (this.options.sidePagination === 'server') {
@@ -330,19 +306,22 @@ $.BootstrapTable = class extends $.BootstrapTable {
     }
   }
 
-  createFormAvd () {
-    const html = [`<form class="form-horizontal" id="${this.options.idForm}" action="${this.options.actionForm}">`]
+  createToolbarForm () {
+    const html = [
+      `<form class="form-horizontal toolbar-model-form" action="${this.options.actionForm}">`
+    ]
 
     for (const column of this.columns) {
       if (!column.checkbox && column.visible && column.searchable) {
-        const title = $('<div/>').html(column.title).text()
+        const title = $('<div/>').html(column.title).text().trim()
+        const value = this.filterColumnsPartial[column.field] || ''
 
         html.push(`
           <div class="form-group row ${theme.classes.formGroup || ''}">
             <label class="col-sm-4 control-label">${title}</label>
             <div class="col-sm-6">
               <input type="text" class="form-control ${this.constants.classes.input}"
-                name="${column.field}" placeholder="${title}" id="${column.field}">
+                name="${column.field}" placeholder="${title}" value="${value}">
             </div>
           </div>
         `)
@@ -351,7 +330,7 @@ $.BootstrapTable = class extends $.BootstrapTable {
 
     html.push('</form>')
 
-    return html
+    return html.join('')
   }
 
   initSearch () {
@@ -387,22 +366,19 @@ $.BootstrapTable = class extends $.BootstrapTable {
 
   onColumnAdvancedSearch (e) {
     const text = $(e.currentTarget).val().trim()
-    const $field = $(e.currentTarget)[0].id
+    const field = $(e.currentTarget).attr('name')
 
-    if (Utils.isEmptyObject(this.filterColumnsPartial)) {
-      this.filterColumnsPartial = {}
-    }
     if (text) {
-      this.filterColumnsPartial[$field] = text
+      this.filterColumnsPartial[field] = text
     } else {
-      delete this.filterColumnsPartial[$field]
+      delete this.filterColumnsPartial[field]
     }
 
     if (this.options.sidePagination !== 'server') {
       this.options.pageNumber = 1
       this.initSearch()
       this.updatePagination()
-      this.trigger('column-advanced-search', $field, text)
+      this.trigger('column-advanced-search', field, text)
     }
   }
 }