From fafd1b4e73c68134cd04c98bb9ca668787821f97 Mon Sep 17 00:00:00 2001
From: Leandro Roberto <leandroroberto.br@gmail.com>
Date: Fri, 18 Jan 2019 21:55:11 -0200
Subject: [PATCH] =?UTF-8?q?cria=20entr=20compila=C3=A7=C3=A3o=20p=20sapl-f?=
 =?UTF-8?q?rontend=20e=20migra=20jsdiff?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 sapl-frontend/package.json                    |   1 +
 .../src/apps/compilacao/js/compilacao.js      | 284 ++++++++++++++++++
 .../apps/compilacao}/js/compilacao_edit.js    |   6 +-
 .../apps/compilacao}/js/compilacao_notas.js   |   2 +-
 .../apps/compilacao}/js/compilacao_view.js    |  42 +--
 sapl-frontend/src/apps/compilacao/main.js     |  56 ++++
 sapl-frontend/vue.config.js                   |   4 +
 sapl/templates/base.html                      |  12 +-
 .../templates/compilacao/base_compilacao.html |  15 +
 .../dispositivo_form_alteracao.html           |   2 +-
 .../dispositivo_form_definidor_vigencia.html  |   2 +-
 .../compilacao/dispositivo_form_vigencia.html |   2 +-
 sapl/templates/compilacao/text_list.html      |  20 --
 .../compilacao/text_notificacoes.html         |   8 +-
 .../compilacao/textoarticulado_detail.html    |   2 +-
 .../tipotextoarticulado_detail.html           |   4 +-
 16 files changed, 387 insertions(+), 75 deletions(-)
 create mode 100644 sapl-frontend/src/apps/compilacao/js/compilacao.js
 rename {sapl/static => sapl-frontend/src/apps/compilacao}/js/compilacao_edit.js (99%)
 rename {sapl/static => sapl-frontend/src/apps/compilacao}/js/compilacao_notas.js (99%)
 rename {sapl/static => sapl-frontend/src/apps/compilacao}/js/compilacao_view.js (81%)
 create mode 100644 sapl-frontend/src/apps/compilacao/main.js
 create mode 100644 sapl/templates/compilacao/base_compilacao.html

diff --git a/sapl-frontend/package.json b/sapl-frontend/package.json
index 016f92c1a..a6929c5f2 100644
--- a/sapl-frontend/package.json
+++ b/sapl-frontend/package.json
@@ -10,6 +10,7 @@
   "dependencies": {
     "@fortawesome/fontawesome-free": "^5.6.3",
     "bootstrap": "^4.2.1",
+    "diff": "^4.0.1",
     "dotenv": "^6.2.0",
     "imports-loader": "^0.8.0",
     "jquery": "^3.3.1",
diff --git a/sapl-frontend/src/apps/compilacao/js/compilacao.js b/sapl-frontend/src/apps/compilacao/js/compilacao.js
new file mode 100644
index 000000000..31c1de7f7
--- /dev/null
+++ b/sapl-frontend/src/apps/compilacao/js/compilacao.js
@@ -0,0 +1,284 @@
+  function SetCookie(cookieName,cookieValue,nDays) {
+    var today = new Date();
+    var expire = new Date();
+    if (nDays==null || nDays==0) nDays=1;
+    expire.setTime(today.getTime() + 3600000*24*nDays);
+    document.cookie = cookieName+"="+escape(cookieValue)
+    + ";expires="+expire.toGMTString();
+  }
+
+  function ReadCookie(cookieName) {
+    var theCookie=" "+document.cookie;
+    var ind=theCookie.indexOf(" "+cookieName+"=");
+    if (ind==-1) ind=theCookie.indexOf(";"+cookieName+"=");
+    if (ind==-1 || cookieName=="") return "";
+    var ind1=theCookie.indexOf(";",ind+1);
+    if (ind1==-1) ind1=theCookie.length;
+    return unescape(theCookie.substring(ind+cookieName.length+2,ind1));
+  }
+
+  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>');
+  }
+
+  function DispositivoSearch(opts) {
+    $(function() {
+      let formData = {}
+      var container_ds = $('body').children("#container_ds");
+      if (container_ds.length > 0)
+        $(container_ds).remove();
+      container_ds = $('<div id="container_ds"/>');
+      $('body').prepend(container_ds);
+
+      var fields = $("[data-sapl-ta='DispositivoSearch']");
+      fields.each(function() {
+        var field = $(this);
+        var data_type_selection = field.attr('data-type-selection');
+        var data_field = field.attr('data-field');
+        var data_function = field.attr('data-function');
+
+        var onChangeFieldSelects = function(event) {
+          if (data_type_selection == 'checkbox') {
+            var tas = field.find('input[name="ta_select_all"]'); //tas - Textos Articulados
+            tas.off();
+
+            tas.on('change', function(event) {
+              $(this).closest('ul').find('input[name="'+data_field+'"]').prop("checked", this.checked);
+              //$(this).prop("checked", false);
+            });
+
+
+          }
+          else {
+            var dpts = field.find('input');
+            dpts.off()
+            dpts.attr('type', 'hidden');
+            $('<a class="text-danger">')
+              .insertBefore(dpts)
+              .append($('<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>'))
+              .on('click', function() {
+                if ($(this).closest('ul').find('li').length == 2)
+                  $(this).closest('ul').remove();
+                else
+                  $(this).closest('li').remove();
+              });
+          }
+        }
+        onChangeFieldSelects();
+
+        var onChangeParamTA = function(event) {
+
+          var tipo_ta = $("select[name='tipo_ta']").val();
+          var tipo_model = $("select[name='tipo_model']").val();
+          var num_ta = $("input[name='num_ta']").val();
+          var ano_ta = $("input[name='ano_ta']").val();
+          var dispositivos_internos = $("input[name='dispositivos_internos']:checked").val();
+          var rotulo_dispositivo = $("input[name='rotulo_dispositivo']").val();
+          var texto_dispositivo = $("input[name='texto_dispositivo']").val();
+          var max_results = $("select[name='max_results']").val();
+          var url = '';
+
+          if (rotulo_dispositivo.length > 0 || texto_dispositivo.length > 0) {
+            $("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');
+          }
+          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) => {
+              element.parentElement.classList.add('disabled')
+            });          
+            $("input[name='dispositivos_internos']").closest('#div_id_dispositivos_internos').css('opacity','0.3');
+            dispositivos_internos = 'False';
+          }
+          formData = {
+            'tipo_ta'         : tipo_ta,
+            'tipo_model'      : tipo_model,
+            'num_ta'        : num_ta,
+            'ano_ta'        : ano_ta,
+            'texto'         : texto_dispositivo,
+            'rotulo'        : rotulo_dispositivo,
+            'dispositivos_internos' : dispositivos_internos,
+            'max_results'       : max_results,
+            'data_type_selection'   : data_type_selection,
+            'data_field'      : data_field,
+            'data_function'     : data_function,
+          };
+
+          window.localStorage.setItem("dispositivo_search_form_data", JSON.stringify(formData))
+
+
+          url = '/ta/search_fragment_form';
+          $('.result-busca-dispositivo').html('');
+          insertWaitAjax('.result-busca-dispositivo')
+          $.get(url, formData).done(function( data ) {
+            $('.result-busca-dispositivo').html(data);
+            //OptionalCustomFrontEnd().init();
+            if (data_type_selection == 'checkbox') {
+              var tas = $('.result-busca-dispositivo').find('input[name="ta_select_all"]');
+              tas.off();
+              tas.on('change', function(event) {
+                $(this).closest('ul').find('input[name="'+data_field+'"]').prop("checked", this.checked);
+              });
+            }
+
+          });
+        }
+
+        var onKeyPressRotuloBuscaTextual = function(event) {
+          var rotulo_dispositivo = $("input[name='rotulo_dispositivo']").val();
+          var texto_dispositivo = $("input[name='texto_dispositivo']").val();
+          var dispositivos_internos = $("input[name='dispositivos_internos']:checked").val();
+
+          if (rotulo_dispositivo.length > 0 || texto_dispositivo.length > 0) {
+            $("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');
+          }
+          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) => {
+              element.parentElement.classList.add('disabled')
+            });    
+            $("input[name='dispositivos_internos']").closest('#div_id_dispositivos_internos').css('opacity','0.3');
+            dispositivos_internos = 'False';
+          }
+        }
+
+        var button_ds = field.children("#button_ds");
+        if (button_ds.length > 0)
+          $(button_ds).remove();
+        button_ds = $('<div id="button_ds" class="clearfix"/>');
+        field.prepend(button_ds);
+
+        var btn_open_search = $('<button>')
+          .text(opts['text_button'])
+          .attr('type','button')
+          .attr('class','btn btn-sm btn-success btn-modal-open');
+        button_ds.append(btn_open_search);
+        btn_open_search.on('click', function() {
+          $.get(opts['url_form'], function(data) {
+            container_ds.html(data);
+            var modal_ds = $('#modal-ds');
+            OptionalCustomFrontEnd().init();
+
+            modal_ds.find("select[name='tipo_ta']").change(function(event) {
+              var url = '';
+              url = '/ta/search_fragment_form?action=get_tipos&tipo_ta='+this.value;
+              modal_ds.find("label[for='id_tipo_model']").html('Tipos de ' + this.children[this.selectedIndex].innerHTML);
+
+              var select = modal_ds.find("select[name='tipo_model']");
+              select.empty();
+              $('<option value="">Carregando...</option>').appendTo(select);
+
+              $.get(url).done(function( data ) {
+                select.empty();
+                for(var item in data) {
+                  for (var i in data[item])
+                    select.append($("<option>").attr('value',i).text(data[item][i]));
+                }
+                setTimeout(function() {
+                  $("select[name='tipo_model']").val(formData.tipo_model);
+                }, 200)
+                //select.change(onChangeParamTA)
+              });
+            });
+
+            /*modal_ds.find("input[name='num_ta'], "
+              +"input[name='ano_ta'], "
+              +"select[name='tipo_model'], "
+              +"input[name='texto_dispositivo'], "
+              +"input[name='dispositivos_internos'], "
+              +"input[name='rotulo_dispositivo']"
+            ).change(onChangeParamTA);*/
+            modal_ds.find("input[name='texto_dispositivo'], "
+              +"input[name='rotulo_dispositivo']")
+              .on('keyup', onKeyPressRotuloBuscaTextual)
+
+            modal_ds.find(".btn-busca").click(onChangeParamTA);
+
+            modal_ds.find("#btn-modal-select").click(function() {
+              // limpar selecionados se o tipo é radio
+              var listas = field.find('ul');
+              if (data_type_selection == 'radio')
+                listas.remove();
+
+              // adicionar itens selecionados na caixa modal
+              var selecionados = modal_ds.find('[name="'+data_field+'"]:checked');
+
+              // com base nos selecionados, limpa seus ta's removendo os não selecionados
+              selecionados.closest('ul').find('input:not(:checked)').filter('[name!="ta_select_all"]').closest('li').remove();
+
+              selecionados.closest('ul').each(function() {
+                //insere na lista de selecionados os ta's não presentes
+                var ul_lista = field.find('#'+this.id);
+                if (ul_lista.length == 0) {
+                  field.append(this);
+                  return;
+                }
+
+                //insere os dispositivos não presentes
+                var inputs_for_this = $(this).find('input');
+
+                inputs_for_this.each(function() {
+                  if (ul_lista.find("#"+this.id).length > 0)
+                    return;
+                  ul_lista.append($(this).closest('li'));
+                });
+              });
+
+              onChangeFieldSelects();
+
+              modal_ds.modal('hide');
+
+              if ('post_selected' in opts)
+                opts['post_selected'](opts['params_post_selected'])
+
+            });
+
+
+            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);
+            } catch (e) {
+
+            }
+
+            setTimeout(function() {
+              try {
+                $("select[name='tipo_ta']").val(formData.tipo_ta);
+                $("select[name='tipo_ta']").trigger('change')
+                //modal_ds.find(".btn-busca").trigger('click')
+                //onChangeParamTA();
+              } catch (e) {
+    
+              }
+    
+            }, 200)
+
+            modal_ds.modal('show');
+          })
+        });
+      });
+    });
+  }
+
+
+  export default {
+      SetCookie,
+      ReadCookie,
+      insertWaitAjax,
+      DispositivoSearch
+  }
\ No newline at end of file
diff --git a/sapl/static/js/compilacao_edit.js b/sapl-frontend/src/apps/compilacao/js/compilacao_edit.js
similarity index 99%
rename from sapl/static/js/compilacao_edit.js
rename to sapl-frontend/src/apps/compilacao/js/compilacao_edit.js
index 825e9d735..dd12b4b7d 100644
--- a/sapl/static/js/compilacao_edit.js
+++ b/sapl-frontend/src/apps/compilacao/js/compilacao_edit.js
@@ -112,7 +112,7 @@ function DispositivoEdit() {
 
         var dpt_form = _this.children().filter('.dpt-form').children().first();
         var url_search = dpt_form[0]['id_dispositivo_search_form'].value;
-        DispostivoSearch({
+        DispositivoSearch({
           'url_form': url_search,
           'text_button': 'Selecionar'
         });
@@ -134,7 +134,7 @@ function DispositivoEdit() {
 
         var dpt_form = _this.children().filter('.dpt-form').children().first();
         var url_search = dpt_form[0]['id_dispositivo_search_form'].value;
-        DispostivoSearch({
+        DispositivoSearch({
           'url_form': url_search,
           'text_button': 'Selecionar',
           'post_selected': instance.allowed_inserts_registro_inclusao,
@@ -159,7 +159,7 @@ function DispositivoEdit() {
 
         var dpt_form = _this.children().filter('.dpt-form').children().first();
         var url_search = dpt_form[0]['id_dispositivo_search_form'].value;
-        DispostivoSearch({
+        DispositivoSearch({
           'url_form': url_search,
           'text_button': 'Selecionar'
         });
diff --git a/sapl/static/js/compilacao_notas.js b/sapl-frontend/src/apps/compilacao/js/compilacao_notas.js
similarity index 99%
rename from sapl/static/js/compilacao_notas.js
rename to sapl-frontend/src/apps/compilacao/js/compilacao_notas.js
index 6171d80e4..70ea8da30 100644
--- a/sapl/static/js/compilacao_notas.js
+++ b/sapl-frontend/src/apps/compilacao/js/compilacao_notas.js
@@ -24,7 +24,7 @@ function onEventsDneExec(pk, model) {
     }
     else if (model == 'vide') {
 
-        DispostivoSearch({
+        DispositivoSearch({
           'url_form': '/ta/search_form',
           'text_button': 'Definir Dispositivo'
         });
diff --git a/sapl/static/js/compilacao_view.js b/sapl-frontend/src/apps/compilacao/js/compilacao_view.js
similarity index 81%
rename from sapl/static/js/compilacao_view.js
rename to sapl-frontend/src/apps/compilacao/js/compilacao_view.js
index e4860bb76..e9dc7a7af 100644
--- a/sapl/static/js/compilacao_view.js
+++ b/sapl-frontend/src/apps/compilacao/js/compilacao_view.js
@@ -1,3 +1,5 @@
+let JsDiff = require('diff');
+
 function isElementInViewport (el) {
 
     //special bonus for those using jQuery
@@ -141,38 +143,8 @@ function textoVigente(item, link) {
     }
 }
 
-$(document).ready(function() {
-
-    setTimeout(function() {
-        var href = location.href.split('#')
-        if (href.length == 2) {
-            try {
-                $('html, body').animate({
-                    scrollTop: $('#dptt' + href[1] ).offset().top - window.innerHeight / 9
-                }, 0);
-            }
-            catch(err) {
-            }
-        }
-    }, 100);
-
-    $("#btn_font_menos").click(function() {
-        $(".dpt").css("font-size", "-=1");
-    });
-    $("#btn_font_mais").click(function() {
-        $(".dpt").css("font-size", "+=1");
-    });
-
-    $(".dpt.bloco_alteracao .dpt").each(function() {
-        var nivel = parseInt($(this).attr('nivel'));
-
-        $(this).css('z-index', 15-nivel)
-
-    });
-
-
-    /*$(".indent").each(function() {
-        $(this).removeClass('indent');
-        $(this.parentElement).addClass('indent');
-    });*/
-});
+export default {
+    isElementInViewport,
+    textoMultiVigente,
+    textoVigente
+}
\ No newline at end of file
diff --git a/sapl-frontend/src/apps/compilacao/main.js b/sapl-frontend/src/apps/compilacao/main.js
new file mode 100644
index 000000000..5f1ef5b9e
--- /dev/null
+++ b/sapl-frontend/src/apps/compilacao/main.js
@@ -0,0 +1,56 @@
+//import JsDiff from "diff/dist/diff";
+
+
+import compilacao from "./js/compilacao";
+import compilacao_view from "./js/compilacao_view";
+import _ from "lodash";
+
+//import "./js/compilacao_notas";
+//import "./js/compilacao_edit";
+
+//require("imports-loader?this=>window!./js/compilacao.js");
+//require("imports-loader?this=>window!./js/compilacao_edit.js");
+//require("imports-loader?this=>window!./js/compilacao_notas.js");
+//require("imports-loader?this=>window!./js/compilacao_view.js");
+
+
+_.forEach(compilacao, function (func, key) {
+  window[key] = func;
+
+});
+_.forEach(compilacao_view, function (func, key) {
+  window[key] = func;
+
+});
+
+
+$(document).ready(function() {
+
+  setTimeout(function() {
+      var href = location.href.split('#')
+      if (href.length == 2) {
+          try {
+              $('html, body').animate({
+                  scrollTop: $('#dptt' + href[1] ).offset().top - window.innerHeight / 9
+              }, 0);
+          }
+          catch(err) {
+          }
+      }
+  }, 100);
+
+  $("#btn_font_menos").click(function() {
+      $(".dpt").css("font-size", "-=1");
+  });
+  $("#btn_font_mais").click(function() {
+      $(".dpt").css("font-size", "+=1");
+  });
+
+  $(".dpt.bloco_alteracao .dpt").each(function() {
+      var nivel = parseInt($(this).attr('nivel'));
+
+      $(this).css('z-index', 15-nivel)
+
+  });
+
+});
diff --git a/sapl-frontend/vue.config.js b/sapl-frontend/vue.config.js
index 6b86d8fd8..34aab8d78 100644
--- a/sapl-frontend/vue.config.js
+++ b/sapl-frontend/vue.config.js
@@ -49,6 +49,10 @@ module.exports = {
       .add('./src/global/main.js')
       .end()
 
+    config.entry('compilacao')
+      .add('./src/apps/compilacao/main.js')
+      .end()
+
     /*config
       .plugin('theme')
       .use(webpack.DefinePlugin, [{
diff --git a/sapl/templates/base.html b/sapl/templates/base.html
index a98d6b1a4..dcc5858e0 100644
--- a/sapl/templates/base.html
+++ b/sapl/templates/base.html
@@ -35,8 +35,10 @@
 
 
       {% endcomment %}
-      {% render_bundle  'global' 'css' %}
-      {% render_bundle THEME_CUSTOM 'css' %}
+      {% block webpack_loader_css %}
+        {% render_bundle  'global' 'css' %}
+        {% render_bundle THEME_CUSTOM 'css' %}
+      {% endblock webpack_loader_css %}
 
     {% endblock %}
   </head>
@@ -239,8 +241,10 @@
     {% endif %}
 
     {% block foot_js %}
-      {% render_bundle  'global' 'js' %}      
-      {% render_bundle THEME_CUSTOM 'js' %}
+      {% block webpack_loader_js %}
+        {% render_bundle  'global' 'js' %}      
+        {% render_bundle THEME_CUSTOM 'js' %}
+      {% endblock webpack_loader_js %}
 
       {% comment "" %}
       
diff --git a/sapl/templates/compilacao/base_compilacao.html b/sapl/templates/compilacao/base_compilacao.html
new file mode 100644
index 000000000..3e3a8e4a2
--- /dev/null
+++ b/sapl/templates/compilacao/base_compilacao.html
@@ -0,0 +1,15 @@
+{% extends "base.html" %}
+{% load i18n %}
+{% load render_bundle from webpack_loader %}
+
+{% block webpack_loader_css %}
+    {% render_bundle 'global' 'css' %}
+    {% render_bundle 'compilacao' 'css' %}
+    {% render_bundle THEME_CUSTOM 'css' %}
+{% endblock %}
+
+{% block webpack_loader_js %}
+    {% render_bundle 'global' 'js' %}
+    {% render_bundle 'compilacao' 'js' %}
+    {% render_bundle THEME_CUSTOM 'js' %}
+{% endblock %}
diff --git a/sapl/templates/compilacao/dispositivo_form_alteracao.html b/sapl/templates/compilacao/dispositivo_form_alteracao.html
index 08f123d57..3af409669 100644
--- a/sapl/templates/compilacao/dispositivo_form_alteracao.html
+++ b/sapl/templates/compilacao/dispositivo_form_alteracao.html
@@ -3,7 +3,7 @@
 
 {% block extra_js %}{{block.super}}
   <script type="text/javascript">
-    DispostivoSearch({
+    DispositivoSearch({
       'url_form': '{% url 'sapl.compilacao:dispositivo_search_form'%}',
       'text_button': '{% trans 'Definir Dispositivo'%}'
     });    
diff --git a/sapl/templates/compilacao/dispositivo_form_definidor_vigencia.html b/sapl/templates/compilacao/dispositivo_form_definidor_vigencia.html
index 868935970..b2cbf797b 100644
--- a/sapl/templates/compilacao/dispositivo_form_definidor_vigencia.html
+++ b/sapl/templates/compilacao/dispositivo_form_definidor_vigencia.html
@@ -3,7 +3,7 @@
 
 {% block extra_js %}{{block.super}}
   <script type="text/javascript">
-    DispostivoSearch({
+    DispositivoSearch({
       'url_form': '{% url 'sapl.compilacao:dispositivo_search_form'%}',
       'text_button': '{% trans 'Adicionar Dispositivos'%}'
     });
diff --git a/sapl/templates/compilacao/dispositivo_form_vigencia.html b/sapl/templates/compilacao/dispositivo_form_vigencia.html
index f5055fd96..f7a9994f2 100644
--- a/sapl/templates/compilacao/dispositivo_form_vigencia.html
+++ b/sapl/templates/compilacao/dispositivo_form_vigencia.html
@@ -19,7 +19,7 @@
     $('[name="inicio_vigencia"]').on('change', change_inconstitucionalidade);
     change_inconstitucionalidade();
 
-    DispostivoSearch({
+    DispositivoSearch({
       'url_form': '{% url 'sapl.compilacao:dispositivo_search_form'%}',
       'text_button': '{% trans 'Selecionar Dispositivo'%}'
     });
diff --git a/sapl/templates/compilacao/text_list.html b/sapl/templates/compilacao/text_list.html
index fa0597dee..05fc62893 100644
--- a/sapl/templates/compilacao/text_list.html
+++ b/sapl/templates/compilacao/text_list.html
@@ -2,13 +2,6 @@
 {% load i18n %}
 {% load compilacao_filters %}
 {% load common_tags %}
-{% load staticfiles %}
-{% load sass_tags %}
-
-{% block head_content %}
-  {{block.super}}
-  <link rel="stylesheet" href="{% sass_src 'styles/compilacao.scss' %}" type="text/css">
-{% endblock %}
 
 {% block title %}
   <h2 class="page-header">{% if object.content_object.title_type %}{{object.content_object.title_type}}{%else%}{{object}}{% endif %}{% comment %}<small><i>{% trans 'Texto Multivigente em Edição' %}</i></small>{% endcomment %}</h2>
@@ -112,16 +105,3 @@
   {% include 'compilacao/text_list_bloco.html'%}
   </div>
 {% endblock base_content %}
-
-{% block extra_js %}
-
-  {{block.super}}
-
-  <script type="text/javascript" src="{% static 'js/compilacao.js' %}"></script>
-  <script type="text/javascript" src="{% static 'js/compilacao_view.js' %}"></script>
-
-  {% if perms.compilacao.add_nota %}
-    <script type="text/javascript" src="{% static 'js/compilacao_notas.js' %}"></script>
-  {% endif %}
-
-{% endblock %}
diff --git a/sapl/templates/compilacao/text_notificacoes.html b/sapl/templates/compilacao/text_notificacoes.html
index 7aa0f96c8..f30709710 100644
--- a/sapl/templates/compilacao/text_notificacoes.html
+++ b/sapl/templates/compilacao/text_notificacoes.html
@@ -1,14 +1,8 @@
 {% extends "compilacao/textoarticulado_detail.html" %}
-{% load i18n crispy_forms_tags compilacao_filters common_tags sass_tags%}
+{% load i18n crispy_forms_tags compilacao_filters common_tags%}
 
 {% block base_content %}
-  {% block head_content %}{{block.super}}
-    <link rel="stylesheet" href="{% sass_src 'styles/compilacao.scss' %}" type="text/css">
-  {% endblock %}
-
   {% crispy form %}
-
-
   <table class="table table-striped table-hover table-notificacoes">
     <thead>
       <tr>
diff --git a/sapl/templates/compilacao/textoarticulado_detail.html b/sapl/templates/compilacao/textoarticulado_detail.html
index cc07c6064..6c54543d3 100644
--- a/sapl/templates/compilacao/textoarticulado_detail.html
+++ b/sapl/templates/compilacao/textoarticulado_detail.html
@@ -1,4 +1,4 @@
-{% extends "base.html" %}
+{% extends "compilacao/base_compilacao.html" %}
 {% load i18n %}
 {% load compilacao_filters %}
 {% load common_tags %}
diff --git a/sapl/templates/compilacao/tipotextoarticulado_detail.html b/sapl/templates/compilacao/tipotextoarticulado_detail.html
index d00415e5a..58a4527a5 100644
--- a/sapl/templates/compilacao/tipotextoarticulado_detail.html
+++ b/sapl/templates/compilacao/tipotextoarticulado_detail.html
@@ -1,4 +1,6 @@
-{% extends "base.html" %} {% load i18n %} {% load compilacao_filters %}
+{% extends "compilacao/base_compilacao.html" %} 
+{% load i18n %}
+{% load compilacao_filters %}
 {% load common_tags %}
 
 {% block base_content %}