From db04f1692dbcc900082bb282be655ddde6c0fc17 Mon Sep 17 00:00:00 2001
From: Leandro Roberto <leandroroberto.br@gmail.com>
Date: Sun, 27 Jan 2019 21:23:58 -0200
Subject: [PATCH] altera chamada a jQuery e resolve conflito com bootstrap

---
 sapl-frontend/package.json                    |   1 +
 .../src/apps/compilacao/js/old/compilacao.js  | 128 +++++++++---------
 .../compilacao/js/old/compilacao_notas.js     |  82 +++++------
 .../apps/compilacao/js/old/compilacao_view.js |  69 +++++-----
 sapl-frontend/src/global/main.js              |   2 +-
 sapl-frontend/vue.config.js                   |   5 +-
 .../compilacao/dispositivo_form_search.html   |   2 +-
 7 files changed, 149 insertions(+), 140 deletions(-)

diff --git a/sapl-frontend/package.json b/sapl-frontend/package.json
index 3c8e61a1a..746cede17 100644
--- a/sapl-frontend/package.json
+++ b/sapl-frontend/package.json
@@ -12,6 +12,7 @@
     "bootstrap": "^4.2.1",
     "diff": "^4.0.1",
     "dotenv": "^6.2.0",
+    "exports-loader": "^0.7.0",
     "imports-loader": "^0.8.0",
     "jquery": "^3.3.1",
     "jquery-mask-plugin": "^1.14.15",
diff --git a/sapl-frontend/src/apps/compilacao/js/old/compilacao.js b/sapl-frontend/src/apps/compilacao/js/old/compilacao.js
index c27b54a0f..4ab1ec85e 100644
--- a/sapl-frontend/src/apps/compilacao/js/old/compilacao.js
+++ b/sapl-frontend/src/apps/compilacao/js/old/compilacao.js
@@ -1,3 +1,5 @@
+let _$ = window.$
+
 function SetCookie (cookieName, cookieValue, nDays) {
   let today = new Date()
   let expire = new Date()
@@ -19,22 +21,22 @@ function ReadCookie (cookieName) {
 
 function insertWaitAjax (element) {
   // jQuery(element).append('<div style="text-align:center;'><img src="/static/img/ajax-loader.gif'></div>')
-  jQuery(element).append('<div style="text-align:center;"><i style="font-size: 200%;" class="fa fa-refresh fa-spin"></i></div>')
+  _$(element).append('<div style="text-align:center;"><i style="font-size: 200%;" class="fa fa-refresh fa-spin"></i></div>')
 }
 
 function DispositivoSearch (opts) {
-  $(function () {
+  _$(function () {
     let formData = {}
-    let containerDs = $('body').children('#container_ds')
+    let containerDs = _$('body').children('#container_ds')
     if (containerDs.length > 0) {
-      $(containerDs).remove()
+      _$(containerDs).remove()
     }
-    containerDs = $('<div id="container_ds"/>')
-    $('body').prepend(containerDs)
+    containerDs = _$('<div id="container_ds"/>')
+    _$('body').prepend(containerDs)
 
-    let fields = $('[data-sapl-ta="DispositivoSearch"]')
+    let fields = _$('[data-sapl-ta="DispositivoSearch"]')
     fields.each(function () {
-      let field = $(this)
+      let field = _$(this)
       let dataTypeSelection = field.attr('data-type-selection')
       let dataField = field.attr('data-field')
       let dataFunction = field.attr('data-function')
@@ -45,21 +47,21 @@ function DispositivoSearch (opts) {
           tas.off()
 
           tas.on('change', function (event) {
-            $(this).closest('ul').find('input[name="' + dataField + '"]').prop('checked', this.checked)
-            // $(this).prop('checked', false)
+            _$(this).closest('ul').find('input[name="' + dataField + '"]').prop('checked', this.checked)
+            // _$(this).prop('checked', false)
           })
         } else {
           let dpts = field.find('input')
           dpts.off()
           dpts.attr('type', 'hidden')
-          $('<a class="text-danger">')
+          _$('<a class="text-danger">')
             .insertBefore(dpts)
-            .append($('<span aria-hidden="true">&times;</span>'))
+            .append(_$('<span aria-hidden="true">&times;</span>'))
             .on('click', function () {
-              if ($(this).closest('ul').find('li').length === 2) {
-                $(this).closest('ul').remove()
+              if (_$(this).closest('ul').find('li').length === 2) {
+                _$(this).closest('ul').remove()
               } else {
-                $(this).closest('li').remove()
+                _$(this).closest('li').remove()
               }
             })
         }
@@ -67,30 +69,30 @@ function DispositivoSearch (opts) {
       onChangeFieldSelects()
 
       let onChangeParamTA = function (event) {
-        let tipoTa = $('select[name="tipo_ta"]').val()
-        let tipoModel = $('select[name="tipo_model"]').val()
-        let numTa = $('input[name="num_ta"]').val()
-        let anoTa = $('input[name="ano_ta"]').val()
-        let dispositivosInternos = $('input[name="dispositivos_internos"]:checked').val()
-        let rotuloDispositivo = $('input[name="rotulo_dispositivo"]').val()
-        let textoDispositivo = $('input[name="texto_dispositivo"]').val()
-        let maxResults = $('select[name="max_results"]').val()
+        let tipoTa = _$('select[name="tipo_ta"]').val()
+        let tipoModel = _$('select[name="tipo_model"]').val()
+        let numTa = _$('input[name="num_ta"]').val()
+        let anoTa = _$('input[name="ano_ta"]').val()
+        let dispositivosInternos = _$('input[name="dispositivos_internos"]:checked').val()
+        let rotuloDispositivo = _$('input[name="rotulo_dispositivo"]').val()
+        let textoDispositivo = _$('input[name="texto_dispositivo"]').val()
+        let maxResults = _$('select[name="max_results"]').val()
         let url = ''
 
         if (rotuloDispositivo.length > 0 || textoDispositivo.length > 0) {
-          $('input[name="dispositivos_internos"]').prop('disabled', false)
-          $('input[name="dispositivos_internos"]').each((idx, element) => {
+          _$('input[name="dispositivos_internos"]').prop('disabled', false)
+          _$('input[name="dispositivos_internos"]').each((idx, element) => {
             element.parentElement.classList.remove('disabled')
           })
-          $('input[name="dispositivos_internos"]').closest('#div_id_dispositivos_internos').css('opacity', '1')
+          _$('input[name="dispositivos_internos"]').closest('#div_id_dispositivos_internos').css('opacity', '1')
         } else {
-          $('input[name="dispositivos_internos"]').filter('[value="False"]').prop('checked', true)
-          $('input[name="dispositivos_internos"]').prop('disabled', true)
+          _$('input[name="dispositivos_internos"]').filter('[value="False"]').prop('checked', true)
+          _$('input[name="dispositivos_internos"]').prop('disabled', true)
 
-          $('input[name="dispositivos_internos"]').each((idx, element) => {
+          _$('input[name="dispositivos_internos"]').each((idx, element) => {
             element.parentElement.classList.add('disabled')
           })
-          $('input[name="dispositivos_internos"]').closest('#div_id_dispositivos_internos').css('opacity', '0.3')
+          _$('input[name="dispositivos_internos"]').closest('#div_id_dispositivos_internos').css('opacity', '0.3')
           dispositivosInternos = 'False'
         }
         formData = {
@@ -110,59 +112,59 @@ function DispositivoSearch (opts) {
         window.localStorage.setItem('dispositivo_search_form_data', JSON.stringify(formData))
 
         url = '/ta/search_fragment_form'
-        $('.result-busca-dispositivo').html('')
+        _$('.result-busca-dispositivo').html('')
         insertWaitAjax('.result-busca-dispositivo')
-        $.get(url, formData).done(function (data) {
-          $('.result-busca-dispositivo').html(data)
+        _$.get(url, formData).done(function (data) {
+          _$('.result-busca-dispositivo').html(data)
           // OptionalCustomFrontEnd().init()
           if (dataTypeSelection === 'checkbox') {
-            let tas = $('.result-busca-dispositivo').find('input[name="ta_select_all"]')
+            let tas = _$('.result-busca-dispositivo').find('input[name="ta_select_all"]')
             tas.off()
             tas.on('change', function (event) {
-              $(this).closest('ul').find('input[name="' + dataField + '"]').prop('checked', this.checked)
+              _$(this).closest('ul').find('input[name="' + dataField + '"]').prop('checked', this.checked)
             })
           }
         })
       }
 
       let onKeyPressRotuloBuscaTextual = function (event) {
-        let rotuloDispositivo = $('input[name="rotulo_dispositivo"]').val()
-        let textoDispositivo = $('input[name="texto_dispositivo"]').val()
-        // let dispositivosInternos = $('input[name="dispositivos_internos"]:checked').val()
+        let rotuloDispositivo = _$('input[name="rotulo_dispositivo"]').val()
+        let textoDispositivo = _$('input[name="texto_dispositivo"]').val()
+        // let dispositivosInternos = _$('input[name="dispositivos_internos"]:checked').val()
 
         if (rotuloDispositivo.length > 0 || textoDispositivo.length > 0) {
-          $('input[name="dispositivos_internos"]').prop('disabled', false)
-          $('input[name="dispositivos_internos"]').each((idx, element) => {
+          _$('input[name="dispositivos_internos"]').prop('disabled', false)
+          _$('input[name="dispositivos_internos"]').each((idx, element) => {
             element.parentElement.classList.remove('disabled')
           })
-          $('input[name="dispositivos_internos"]').closest('#div_id_dispositivos_internos').css('opacity', '1')
+          _$('input[name="dispositivos_internos"]').closest('#div_id_dispositivos_internos').css('opacity', '1')
         } else {
-          $('input[name="dispositivos_internos"]').filter('[value="False"]').prop('checked', true)
-          $('input[name="dispositivos_internos"]').prop('disabled', true)
-          $('input[name="dispositivos_internos"]').each((idx, element) => {
+          _$('input[name="dispositivos_internos"]').filter('[value="False"]').prop('checked', true)
+          _$('input[name="dispositivos_internos"]').prop('disabled', true)
+          _$('input[name="dispositivos_internos"]').each((idx, element) => {
             element.parentElement.classList.add('disabled')
           })
-          $('input[name="dispositivos_internos"]').closest('#div_id_dispositivos_internos').css('opacity', '0.3')
+          _$('input[name="dispositivos_internos"]').closest('#div_id_dispositivos_internos').css('opacity', '0.3')
           // dispositivosInternos = 'False'
         }
       }
 
       let buttonDs = field.children('#buttonDs')
       if (buttonDs.length > 0) {
-        $(buttonDs).remove()
+        _$(buttonDs).remove()
       }
-      buttonDs = $('<div id="buttonDs" class="clearfix"/>')
+      buttonDs = _$('<div id="buttonDs" class="clearfix"/>')
       field.prepend(buttonDs)
 
-      let btnOpenSearch = $('<button>')
+      let btnOpenSearch = _$('<button>')
         .text(opts['text_button'])
         .attr('type', 'button')
         .attr('class', 'btn btn-sm btn-success btn-modal-open')
       buttonDs.append(btnOpenSearch)
       btnOpenSearch.on('click', function () {
-        $.get(opts['url_form'], function (data) {
+        _$.get(opts['url_form'], function (data) {
           containerDs.html(data)
-          let modalDs = $('#modal-ds')
+          let modalDs = _$('#modal-ds')
           // OptionalCustomFrontEnd().init()
 
           modalDs.find('select[name="tipo_ta"]').change(function (event) {
@@ -172,17 +174,17 @@ function DispositivoSearch (opts) {
 
             let select = modalDs.find('select[name="tipo_model"]')
             select.empty()
-            $('<option value="">Carregando...</option>').appendTo(select)
+            _$('<option value="">Carregando...</option>').appendTo(select)
 
-            $.get(url).done(function (data) {
+            _$.get(url).done(function (data) {
               select.empty()
               for (let item in data) {
                 for (let i in data[item]) {
-                  select.append($('<option>').attr('value', i).text(data[item][i]))
+                  select.append(_$('<option>').attr('value', i).text(data[item][i]))
                 }
               }
               setTimeout(function () {
-                $('select[name="tipo_model"]').val(formData.tipo_model)
+                _$('select[name="tipo_model"]').val(formData.tipo_model)
               }, 200)
               // select.change(onChangeParamTA)
             })
@@ -222,13 +224,13 @@ function DispositivoSearch (opts) {
               }
 
               // insere os dispositivos não presentes
-              let inputForThis = $(this).find('input')
+              let inputForThis = _$(this).find('input')
 
               inputForThis.each(function () {
                 if (ulLista.find('#' + this.id).length > 0) {
                   return
                 }
-                ulLista.append($(this).closest('li'))
+                ulLista.append(_$(this).closest('li'))
               })
             })
 
@@ -243,19 +245,19 @@ function DispositivoSearch (opts) {
 
           try {
             formData = JSON.parse(window.localStorage.getItem('dispositivo_search_form_data'))
-            $('input[name="num_ta"]').val(formData.num_ta)
-            $('input[name="ano_ta"]').val(formData.ano_ta)
-            $('input[name="rotulo_dispositivo"]').val(formData.rotulo)
-            $('input[name="texto_dispositivo"]').val(formData.texto)
-            $('select[name="max_results"]').val(formData.max_results)
+            _$('input[name="num_ta"]').val(formData.num_ta)
+            _$('input[name="ano_ta"]').val(formData.ano_ta)
+            _$('input[name="rotulo_dispositivo"]').val(formData.rotulo)
+            _$('input[name="texto_dispositivo"]').val(formData.texto)
+            _$('select[name="max_results"]').val(formData.max_results)
           } catch (e) {
             console.log(e)
           }
 
           setTimeout(function () {
             try {
-              $('select[name="tipo_ta"]').val(formData.tipo_ta)
-              $('select[name="tipo_ta"]').trigger('change')
+              _$('select[name="tipo_ta"]').val(formData.tipo_ta)
+              _$('select[name="tipo_ta"]').trigger('change')
               // modalDs.find('.btn-busca').trigger('click')
               // onChangeParamTA()
             } catch (e) {
diff --git a/sapl-frontend/src/apps/compilacao/js/old/compilacao_notas.js b/sapl-frontend/src/apps/compilacao/js/old/compilacao_notas.js
index 908800cf1..5af2ab0ca 100644
--- a/sapl-frontend/src/apps/compilacao/js/old/compilacao_notas.js
+++ b/sapl-frontend/src/apps/compilacao/js/old/compilacao_notas.js
@@ -1,23 +1,25 @@
 
+let _$ = window.$
+
 function onEventsDneExec (pk, model) {
-  $('html, body').animate({
-    scrollTop: $('#dne' + pk).offset().top - window.innerHeight / 5
+  _$('html, body').animate({
+    scrollTop: _$('#dne' + pk).offset().top - window.innerHeight / 5
   }, 300)
 
   window.refreshDatePicker()
 
-  $('#dne' + pk + ' #button-id-submit-form').click(onSubmitEditNVForm)
-  $('#dne' + pk + ' .btn-close-container').click(function () {
-    $(this).closest('.dne-nota').removeClass('dne-nota')
-    $(this).closest('.dne-form').html('')
+  _$('#dne' + pk + ' #button-id-submit-form').click(onSubmitEditNVForm)
+  _$('#dne' + pk + ' .btn-close-container').click(function () {
+    _$(this).closest('.dne-nota').removeClass('dne-nota')
+    _$(this).closest('.dne-form').html('')
   })
 
   if (model === 'nota') {
-    $('#dne' + pk + ' select[name="tipo"]').change(function (event) {
+    _$('#dne' + pk + ' select[name="tipo"]').change(function (event) {
       let url = ''
       url = 'text/' + pk + '/nota/create?action=modelo_nota&id_tipo=' + this.value
-      $.get(url).done(function (data) {
-        $('#dne' + pk + ' textarea[name="texto"]').val(data)
+      _$.get(url).done(function (data) {
+        _$('#dne' + pk + ' textarea[name="texto"]').val(data)
       })
     })
   } else if (model === 'vide') {
@@ -32,15 +34,15 @@ function onSubmitEditNVForm (event) {
   let url = ''
   let model = 'nota'
   let idEdit = null
-  let idDispositivo = $('#id_dispositivo').val()
+  let idDispositivo = _$('#id_dispositivo').val()
 
   if (idDispositivo === undefined) { // trata-se de um vide
-    // $('#idDispositivo_ref').remove()
-    idDispositivo = $('#id_dispositivo_base').val()
+    // _$('#idDispositivo_ref').remove()
+    idDispositivo = _$('#id_dispositivo_base').val()
     model = 'vide'
   }
 
-  idEdit = $('#id_pk').val()
+  idEdit = _$('#id_pk').val()
   url = 'text/' + idDispositivo + '/' + model + '/'
   if (idEdit === null || idEdit === '') {
     url += 'create'
@@ -48,19 +50,19 @@ function onSubmitEditNVForm (event) {
     url += idEdit + '/edit'
   }
 
-  console.log($('#dne' + idDispositivo + ' form').serialize())
+  // console.log(_$('#dne' + idDispositivo + ' form').serialize())
 
-  $.post(url, $('#dne' + idDispositivo + ' form').serialize(), function (data) {
+  _$.post(url, _$('#dne' + idDispositivo + ' form').serialize(), function (data) {
     if (typeof data === 'string') {
       if (data.indexOf('<form') >= 0) {
-        $('#dne' + idDispositivo + ' .dne-form').html(data)
+        _$('#dne' + idDispositivo + ' .dne-form').html(data)
         onEventsDneExec(idDispositivo, model)
       } else {
-        $('#dne' + idDispositivo + ' .dne-form').closest('.dpt').html(data)
+        _$('#dne' + idDispositivo + ' .dne-form').closest('.dpt').html(data)
         onReadyNotasVides()
         try {
-          $('html, body').animate({
-            scrollTop: $('#dne' + idDispositivo).offset().top - window.innerHeight / 3
+          _$('html, body').animate({
+            scrollTop: _$('#dne' + idDispositivo).offset().top - window.innerHeight / 3
           }, 300)
         } catch (err) {
         }
@@ -70,40 +72,40 @@ function onSubmitEditNVForm (event) {
 }
 
 function onDelete (event) {
-  let model = $(event).attr('model')
+  let model = _$(event).attr('model')
 
-  let idDispositivo = $(event).closest('.dn').attr('pk')
-  let idDelete = $(event).attr('pk')
+  let idDispositivo = _$(event).closest('.dn').attr('pk')
+  let idDelete = _$(event).attr('pk')
   let url = 'text/' + idDispositivo + '/' + model + '/' + idDelete + '/delete'
 
-  $.get(url, function (data) {
-    $('#dne' + idDispositivo + ' .dne-form').closest('.dpt').html(data)
+  _$.get(url, function (data) {
+    _$('#dne' + idDispositivo + ' .dne-form').closest('.dpt').html(data)
     onReadyNotasVides()
   })
 }
 
 function getForm (_this) {
   let url = ''
-  let model = $(_this).attr('model')
-  let idDispositivo = $('.dne-nota .dne-form').closest('.dne').attr('pk')
+  let model = _$(_this).attr('model')
+  let idDispositivo = _$('.dne-nota .dne-form').closest('.dne').attr('pk')
   if (idDispositivo != null) {
-    $('#dne' + idDispositivo).removeClass('dne-nota')
-    $('#dne' + idDispositivo + ' .dne-form').html('')
+    _$('#dne' + idDispositivo).removeClass('dne-nota')
+    _$('#dne' + idDispositivo + ' .dne-form').html('')
   }
 
   if (_this.className.indexOf('create') >= 0) {
-    idDispositivo = $(_this).attr('pk')
+    idDispositivo = _$(_this).attr('pk')
     url = 'text/' + idDispositivo + '/' + model + '/create'
   } else if (_this.className.indexOf('edit') >= 0) {
-    let idEdit = $(_this).attr('pk')
-    idDispositivo = $(_this).closest('.dn').attr('pk')
+    let idEdit = _$(_this).attr('pk')
+    idDispositivo = _$(_this).closest('.dn').attr('pk')
     url = 'text/' + idDispositivo + '/' + model + '/' + idEdit + '/edit'
   }
 
-  $('#dne' + idDispositivo).addClass('dne-nota')
+  _$('#dne' + idDispositivo).addClass('dne-nota')
 
-  $.get(url).done(function (data) {
-    $('#dne' + idDispositivo + ' .dne-form').html(data)
+  _$.get(url).done(function (data) {
+    _$('#dne' + idDispositivo + ' .dne-form').html(data)
     onEventsDneExec(idDispositivo, model)
   }).fail(function () {
     onReadyNotasVides()
@@ -111,17 +113,17 @@ function getForm (_this) {
 }
 
 function onReadyNotasVides () {
-  $('.dne-nota').removeClass('dne-nota')
-  $('.dne-form').html('')
+  _$('.dne-nota').removeClass('dne-nota')
+  _$('.dne-form').html('')
 
-  $('.dne .btn-action').off()
-  $('.dn .btn-action').off()
+  _$('.dne .btn-action').off()
+  _$('.dn .btn-action').off()
 
-  $('.dne .btn-action, .dn .btn-action').not('.btn-nota-delete').not('.btn-vide-delete').click(function () {
+  _$('.dne .btn-action, .dn .btn-action').not('.btn-nota-delete').not('.btn-vide-delete').click(function () {
     getForm(this)
   })
 
-  $('.dn .btn-nota-delete, .dn .btn-vide-delete').click(function () {
+  _$('.dn .btn-nota-delete, .dn .btn-vide-delete').click(function () {
     onDelete(this)
   })
 }
diff --git a/sapl-frontend/src/apps/compilacao/js/old/compilacao_view.js b/sapl-frontend/src/apps/compilacao/js/old/compilacao_view.js
index 60dfd8e72..2879012e7 100644
--- a/sapl-frontend/src/apps/compilacao/js/old/compilacao_view.js
+++ b/sapl-frontend/src/apps/compilacao/js/old/compilacao_view.js
@@ -1,3 +1,4 @@
+let _$ = window.$
 let JsDiff = require('diff')
 
 function isElementInViewport (el) {
@@ -18,9 +19,9 @@ function isElementInViewport (el) {
 
 function textoMultiVigente (item, diff) {
   let elv = null
-  let ldpts = $('.dptt')
+  let ldpts = _$('.dptt')
   for (let i = 0; i < ldpts.length; i++) {
-    if ($(ldpts[i]).hasClass('displaynone')) continue
+    if (_$(ldpts[i]).hasClass('displaynone')) continue
     if (isElementInViewport(ldpts[i])) {
       if (i + 1 < ldpts.length) elv = ldpts[i + 1]
       else {
@@ -30,46 +31,46 @@ function textoMultiVigente (item, diff) {
     }
   }
 
-  $('.cp .tipo-vigencias a').removeClass('selected')
-  $(item).addClass('selected')
-  $('.dptt.desativado').removeClass('displaynone')
-  $('.dtxt').removeClass('displaynone')
-  $('.dtxt.diff').remove()
-  $('.nota-alteracao').removeClass('displaynone')
+  _$('.cp .tipo-vigencias a').removeClass('selected')
+  _$(item).addClass('selected')
+  _$('.dptt.desativado').removeClass('displaynone')
+  _$('.dtxt').removeClass('displaynone')
+  _$('.dtxt.diff').remove()
+  _$('.nota-alteracao').removeClass('displaynone')
 
   if (diff) {
-    $('.dtxt[id^="da"').each(function () {
-      if ($(this)
+    _$('.dtxt[id^="da"').each(function () {
+      if (_$(this)
         .html()
         .search(/<\/\w+>/g) > 0) {
         return
       }
 
-      let pk = $(this).attr('pk')
-      let pks = $(this).attr('pks')
+      let pk = _$(this).attr('pk')
+      let pks = _$(this).attr('pks')
 
-      let a = $('#d' + pks)
+      let a = _$('#d' + pks)
         .contents()
         .filter(function () {
           return this.nodeType === Node.TEXT_NODE
         })
-      let b = $('#da' + pk)
+      let b = _$('#da' + pk)
         .contents()
         .filter(function () {
           return this.nodeType === Node.TEXT_NODE
         })
 
-      let diff = JsDiff.diffWordsWithSpace($(a).text(), $(b).text())
+      let diff = JsDiff.diffWordsWithSpace(_$(a).text(), _$(b).text())
 
       if (diff.length > 0) {
-        $('#d' + pks)
+        _$('#d' + pks)
           .closest('.desativado')
           .addClass('displaynone')
 
-        let clone = $('#da' + pk).clone()
-        $('#da' + pk).after(clone)
-        $('#da' + pk).addClass('displaynone')
-        $(clone)
+        let clone = _$('#da' + pk).clone()
+        _$('#da' + pk).after(clone)
+        _$('#da' + pk).addClass('displaynone')
+        _$(clone)
           .addClass('diff')
           .html('')
 
@@ -81,14 +82,14 @@ function textoMultiVigente (item, diff) {
           let value = part.value
 
           if (part.removed) {
-            $(span).addClass('desativado')
+            _$(span).addClass('desativado')
             value += ' '
           } else if (part.added) {
-            $(span).addClass('added')
+            _$(span).addClass('added')
           }
 
           span.appendChild(document.createTextNode(value))
-          $(clone).append(span)
+          _$(clone).append(span)
         })
       }
     })
@@ -97,10 +98,10 @@ function textoMultiVigente (item, diff) {
 
   if (elv) {
     try {
-      $('html, body').animate(
+      _$('html, body').animate(
         {
           scrollTop:
-            $(elv)
+            _$(elv)
               .parent()
               .offset().top - 60
         },
@@ -114,9 +115,9 @@ function textoMultiVigente (item, diff) {
 
 function textoVigente (item, link) {
   let elv = null
-  let ldpts = $('.dptt')
+  let ldpts = _$('.dptt')
   for (let i = 0; i < ldpts.length; i++) {
-    if ($(ldpts[i]).hasClass('displaynone')) continue
+    if (_$(ldpts[i]).hasClass('displaynone')) continue
     if (isElementInViewport(ldpts[i])) {
       if (i + 1 < ldpts.length) elv = ldpts[i + 1]
       else {
@@ -126,19 +127,19 @@ function textoVigente (item, link) {
     }
   }
 
-  $('.cp .tipo-vigencias a').removeClass('selected')
-  $(item).addClass('selected')
+  _$('.cp .tipo-vigencias a').removeClass('selected')
+  _$(item).addClass('selected')
 
-  $('.dptt.desativado').addClass('displaynone')
-  $('.nota-alteracao').removeClass('displaynone')
-  if (!link) $('.nota-alteracao').addClass('displaynone')
+  _$('.dptt.desativado').addClass('displaynone')
+  _$('.nota-alteracao').removeClass('displaynone')
+  if (!link) _$('.nota-alteracao').addClass('displaynone')
 
   if (elv) {
     try {
-      $('html, body').animate(
+      _$('html, body').animate(
         {
           scrollTop:
-            $(elv)
+            _$(elv)
               .parent()
               .offset().top - 60
         },
diff --git a/sapl-frontend/src/global/main.js b/sapl-frontend/src/global/main.js
index bec215af4..4fbed23f4 100644
--- a/sapl-frontend/src/global/main.js
+++ b/sapl-frontend/src/global/main.js
@@ -1,10 +1,10 @@
+import 'bootstrap'
 import 'jquery-mask-plugin'
 
 import 'webpack-jquery-ui/dialog'
 import 'webpack-jquery-ui/sortable'
 
 import './functions'
-import 'bootstrap'
 
 import './image_cropping'
 
diff --git a/sapl-frontend/vue.config.js b/sapl-frontend/vue.config.js
index 1a1696ae0..53410d8f1 100644
--- a/sapl-frontend/vue.config.js
+++ b/sapl-frontend/vue.config.js
@@ -55,6 +55,7 @@ module.exports = {
           })
         return [options]
       })
+
     config
       .plugin('provide')
       .use(require('webpack/lib/ProvidePlugin'), [{
@@ -62,8 +63,10 @@ module.exports = {
         jquery: 'jquery',
         'window.jQuery': 'jquery',
         jQuery: 'jquery',
-        _: 'lodash'
+        _: 'lodash',
+        Modal: 'exports-loader?Modal!bootstrap/js/dist/modal',
       }])
+
     config.entryPoints.delete('app')
 
     config
diff --git a/sapl/templates/compilacao/dispositivo_form_search.html b/sapl/templates/compilacao/dispositivo_form_search.html
index 324c620ee..8f7e3583a 100644
--- a/sapl/templates/compilacao/dispositivo_form_search.html
+++ b/sapl/templates/compilacao/dispositivo_form_search.html
@@ -4,8 +4,8 @@
   <div class="modal-dialog modal-lg" role="document">
     <div class="modal-content">
       <div class="modal-header">
-        <button type="button" class="close" data-dismiss="modal" aria-label="{% trans 'Fechar' %}"><span aria-hidden="true">&times;</span></button>
         <h4 class="modal-title" id="gridSystemModalLabel">{% trans "Seleção de Dispositivo(s)" %}</h4>
+        <button type="button" class="close" data-dismiss="modal" aria-label="{% trans 'Fechar' %}"><span aria-hidden="true">&times;</span></button>
       </div>
       <div class="modal-body">
         {% crispy form form.helper%}