Merge tag '3.1.162-RC6' into migracao

4 years ago · 67a48a434e
554 changed files with 40906 additions and 6405 deletions
--- a/.gitignore
+++ b/.gitignore
@ -3,12 +3,14 @@ __pycache__/
 *.py[cod]
 *$py.class

+.pytest_cache/
+.DS_Store
+
 # C extensions
 *.so

 # Nodejs
 node_modules/
-yarn.lock

 # Distribution / packaging
 .Python
@ -101,6 +103,7 @@ solr-4.10.2/
 postgres-data/
 data/
 solr-*/
+dev-webpack-stats.json

 # ignora tudo dentro de media, mas cria a pasta no checkout
 media/*
--- a/.travis.yml
+++ b/.travis.yml
@ -1,7 +1,7 @@
 language: python

 python:
-  - 3.5
+  - 3.7

 services:
  - postgresql
--- a/51
+++ b/51
@ -1,51 +0,0 @@
-FROM alpine:3.10
-
-ENV BUILD_PACKAGES postgresql-dev graphviz-dev graphviz build-base git pkgconfig \
-                   python3-dev libxml2-dev jpeg-dev libressl-dev libffi-dev libxslt-dev \
-                   nodejs py3-lxml py3-magic postgresql-client poppler-utils antiword \
-                   curl jq openssh-client vim bash postgresql-client cairo-dev
-
-RUN apk update --update-cache && apk upgrade
-
-RUN apk --update add fontconfig ttf-dejavu && fc-cache -fv
-
-RUN apk add --no-cache python3 nginx tzdata && \
-    python3 -m ensurepip && \
-    rm -r /usr/lib/python*/ensurepip && \
-    pip3 install --upgrade pip setuptools && \
-    pip3 install wheel && \
-    rm -r /root/.cache && \
-    rm -f /etc/nginx/conf.d/*
-
-RUN mkdir -p /var/interlegis/sapl && \
-    apk add --update --no-cache $BUILD_PACKAGES
-
-WORKDIR /var/interlegis/sapl/
-
-ADD . /var/interlegis/sapl/
-
-COPY start.sh /var/interlegis/sapl/
-COPY config/nginx/sapl.conf /etc/nginx/conf.d
-COPY config/nginx/nginx.conf /etc/nginx/nginx.conf
-
-RUN pip install -r /var/interlegis/sapl/requirements/dev-requirements.txt --upgrade setuptools && \
-    rm -r /root/.cache
-
-COPY config/env_dockerfile /var/interlegis/sapl/sapl/.env
-
-RUN python3 manage.py collectstatic --noinput --clear
-
-# Remove .env(fake) e sapl.db da imagem
-RUN rm -rf /var/interlegis/sapl/sapl/.env && \
-    rm -rf /var/interlegis/sapl/sapl.db
-
-RUN chmod +x /var/interlegis/sapl/start.sh && \
-    chmod +x /var/interlegis/sapl/check_solr.sh && \
-    ln -sf /dev/stdout /var/log/nginx/access.log && \
-    ln -sf /dev/stderr /var/log/nginx/error.log && \
-    mkdir /var/log/sapl/ && touch /var/interlegis/sapl/sapl.log && \
-    ln -s /var/interlegis/sapl/sapl.log /var/log/sapl/sapl.log
-
-VOLUME ["/var/interlegis/sapl/data", "/var/interlegis/sapl/media"]
-
-CMD ["/var/interlegis/sapl/start.sh"]
--- a/README.rst
+++ b/README.rst
@ -15,6 +15,13 @@ Para obter mais informações sobre o projeto como um todo e a versão de trabal
 atual do sistema (2.5), visite a página do `projeto na Interlegis wiki <https://colab.interlegis.leg.br/wiki/ProjetoSapl>`_.


+**IMPORTANTE:** A partir da versão 3.1.162 do SAPL, as funcionalidades de recuperar senha,
+acompanhamento de matéria, e acompanhamento de documento exigirão o uso do `Google reCaptcha <https://www.google.com/recaptcha/>`_. Cada casa legislativa será responsável pela geração
+das chaves do reCaptcha e configuração no SAPL em Sistema -> Tabelas Auxiliares -> Configurações da Aplicação.
+Sem essa configuração não serão habilitados os recursos citados anteriormente.
+Veja mais detalhes sobre o processo de geração de chaves e configuração neste link https://www.youtube.com/watch?v=6ZCCyBjSJ-c
+e no caderno de exercícios do SAPL 3.1 disponível na `Wiki do projeto <https://colab.interlegis.leg.br/wiki/ProjetoSapl3.1>`_
+
 Instalação do Ambiente de Desenvolvimento
 =========================================
   `Instalação do Ambiente de Desenvolvimento <https://github.com/interlegis/sapl/blob/3.1.x/docs/instalacao31.rst>`_
--- a/docker/Dockerfile
+++ b/docker/Dockerfile
@ -0,0 +1,72 @@
+FROM python:3.7-slim-buster
+
+# Setup env
+ENV LANG C.UTF-8
+ENV LC_ALL C.UTF-8
+ENV PYTHONDONTWRITEBYTECODE 1
+
+#ENV PYTHONFAULTHANDLER 1
+
+ENV DEBIAN_FRONTEND noninteractive
+
+ENV BUILD_PACKAGES apt-utils apt-file libpq-dev graphviz-dev build-essential git pkg-config \
+                   python3-dev libxml2-dev libjpeg-dev libssl-dev libffi-dev libxslt1-dev \
+                   libcairo2-dev software-properties-common python3-setuptools python3-pip
+
+ENV RUN_PACKAGES graphviz python3-lxml python3-magic postgresql-client python3-psycopg2 \
+                 poppler-utils curl jq bash python3-venv tzdata nodejs \
+                 fontconfig ttf-dejavu python nginx
+ 
+RUN mkdir -p /var/interlegis/sapl
+
+WORKDIR /var/interlegis/sapl/
+
+ADD . /var/interlegis/sapl/
+
+RUN apt-get update && \
+    apt-get upgrade -y && \
+    apt-get install -y --no-install-recommends $BUILD_PACKAGES $RUN_PACKAGES && \
+    fc-cache -fv && \
+    pip3 install --no-cache-dir --upgrade pip setuptools && \
+    rm -f /etc/nginx/conf.d/* && \
+    pip install --no-cache-dir -r /var/interlegis/sapl/requirements/dev-requirements.txt --upgrade setuptools && \
+    SUDO_FORCE_REMOVE=yes apt-get purge -y --auto-remove $BUILD_PACKAGES && \
+    apt-get autoremove && apt-get clean && rm -rf /var/lib/apt/lists/*
+
+ENV HOME=/var/interlegis/sapl
+
+COPY docker/start.sh $HOME
+COPY docker/check_solr.sh $HOME
+COPY docker/solr_api.py $HOME
+COPY docker/busy-wait.sh $HOME
+COPY docker/create_admin.py $HOME
+COPY docker/genkey.py $HOME
+COPY docker/gunicorn_start.sh $HOME
+
+COPY docker/config/nginx/sapl.conf /etc/nginx/conf.d
+COPY docker/config/nginx/nginx.conf /etc/nginx/nginx.conf
+COPY docker/config/env_dockerfile /var/interlegis/sapl/sapl/.env
+
+RUN python3 manage.py collectstatic --noinput --clear
+
+# Remove .env(fake) e sapl.db da imagem
+RUN rm -rf /var/interlegis/sapl/sapl/.env && \
+    rm -rf /var/interlegis/sapl/sapl.db
+
+RUN chmod +x /var/interlegis/sapl/start.sh && \
+    chmod +x /var/interlegis/sapl/check_solr.sh && \
+    ln -sf /dev/stdout /var/log/nginx/access.log && \
+    ln -sf /dev/stderr /var/log/nginx/error.log && \
+    mkdir /var/log/sapl/ && touch /var/interlegis/sapl/sapl.log && \
+    ln -s /var/interlegis/sapl/sapl.log /var/log/sapl/sapl.log
+
+# Debian não possui usuário 'nginx' necessário para o Debian
+RUN useradd --no-create-home nginx
+
+ENV DEBIAN_FRONTEND teletype
+
+EXPOSE 80/tcp 443/tcp
+
+VOLUME ["/var/interlegis/sapl/data", "/var/interlegis/sapl/media"]
+
+CMD ["/var/interlegis/sapl/start.sh"]
--- a/docker/Dockerfile.dev
+++ b/docker/Dockerfile.dev
@ -1,8 +1,9 @@
-FROM python:3.7
+FROM python:3.6
 ENV PYTHONUNBUFFERED 1
 WORKDIR /sapl-dev
-COPY requirements ./requirements/
+COPY ./requirements ./requirements/
 RUN apt update && \
    apt -y install graphviz-dev && \
+    pip install --upgrade pip && \
    pip install -r ./requirements/dev-requirements.txt
-EXPOSE 8000
+EXPOSE 8000
--- a/docker/busy-wait.sh
+++ b/docker/busy-wait.sh
--- a/docker/check_solr.sh
+++ b/docker/check_solr.sh
--- a/docker/config/env-sample
+++ b/docker/config/env-sample
@ -1,5 +1,5 @@
 DATABASE_URL = postgresql://postgres:@sapldb:/sapl
-KEY
+SECRET_KEY = 'mzp++@i1y-6y8ez_=^sfbr!dzuyry#^@v(3g^2d1k9%f=+mhlb'
 DEBUG = False
 EMAIL_USE_TLS = True
 EMAIL_PORT = 587
--- a/docker/config/env_dockerfile
+++ b/docker/config/env_dockerfile
@ -1,5 +1,5 @@
 DATABASE_URL = sqlite:///sapl.db
-SECRET_KEY = 'Dockerfile_Key'
+SECRET_KEY = 'mzp++@i1y-6y8ez_=^sfbr!dzuyry#^@v(3g^2d1k9%f=+mhlb'
 DEBUG = False
 EMAIL_USE_TLS = True
 EMAIL_PORT = 587
--- a/docker/config/env_test
+++ b/docker/config/env_test
@ -0,0 +1,9 @@
+DATABASE_URL=postgresql://sapl:sapl@sapldb:/sapl
+SECRET_KEY=test++@i1y-6y8ez_=^sfbr!dzuyry#^@v(3g^2d1k9%f=+mhlb
+DEBUG=False
+EMAIL_USE_TLS = True
+EMAIL_PORT = 587
+EMAIL_HOST = ''
+EMAIL_HOST_USER = ''
+EMAIL_SEND_USER = ''
+EMAIL_HOST_PASSWORD = ''
--- a/docker/config/nginx/nginx.conf
+++ b/docker/config/nginx/nginx.conf
@ -25,7 +25,12 @@ http {

    keepalive_timeout  65;

-    #gzip  on;
+    gzip on;
+    gzip_disable "MSIE [1-6]\\.(?!.*SV1)";
+    gzip_proxied any;
+    gzip_comp_level 5;
+    gzip_types text/plain text/css text/javascript application/javascript application/x-javascript text/xml application/xml application/rss+xml image/gif image/png image/x-icon image/jpeg image/svg+xml;
+    gzip_vary on;

    include /etc/nginx/conf.d/*.conf;
 }
--- a/docker/config/nginx/sapl.conf
+++ b/docker/config/nginx/sapl.conf
--- a/docker/create_admin.py
+++ b/docker/create_admin.py
--- a/docker/docker-compose-dev-db.yml
+++ b/docker/docker-compose-dev-db.yml
@ -17,11 +17,11 @@ services:
    container_name: sapl-dev
    image: sapl:dev
    build:
-      context: .
-      dockerfile: Dockerfile.dev
+      context: ../
+      dockerfile: ./docker/Dockerfile.dev
    command: python3 manage.py runserver 0:8000
    volumes:
-      - .:/sapl-dev
+      - ..:/sapl-dev
    ports:
      - "8000:8000"
    environment:
@ -29,12 +29,10 @@ services:
      DEBUG: 'True'
      DATABASE_URL: postgresql://sapl:sapl@sapldb-dev:5432/sapl
      TZ: America/Sao_Paulo
-    depends_on:
-      - sapldb-dev
    networks:
      - sapl-net-dev

 networks:
  sapl-net-dev:
    name: sapl-net-dev
-    driver: bridge
+    driver: bridge
--- a/docker/docker-compose-dev.yml
+++ b/docker/docker-compose-dev.yml
@ -0,0 +1,19 @@
+version: '3.7'
+
+services:
+  sapl-dev:
+    container_name: sapl-dev
+    image: sapl:dev
+    build:
+      context: ../
+      dockerfile: ./docker/Dockerfile.dev
+    command: python3 manage.py runserver 0:8000
+    volumes:
+      - ..:/sapl-dev
+    ports:
+      - "8000:8000"
+    environment:
+      SECRET_KEY: '$dkhxm-$zvxdox$g2-&w^1i!_z1juq0xwox6e3#gy6w_88!3t^'
+      DEBUG: 'True'
+      DATABASE_URL: postgresql://sapl:sapl@host.docker.internal:5432/sapl
+      TZ: America/Sao_Paulo
--- a/docker/docker-compose.yml
+++ b/docker/docker-compose.yml
@ -3,6 +3,9 @@ services:
  sapldb:
    image: postgres:10.5-alpine
    restart: always
+    container_name: postgres
+    labels:
+        NAME: "postgres"
    environment:
      POSTGRES_PASSWORD: sapl
      POSTGRES_USER: sapl
@ -18,6 +21,9 @@ services:
    image: solr:8.3
    restart: always
    command: bin/solr start -c -f
+    container_name: solr
+    labels:
+        NAME: "solr"
    volumes:
      - solr_data:/opt/solr/server/solr
      - solr_configsets:/opt/solr/server/solr/configsets
@ -26,8 +32,13 @@ services:
    networks:
      - sapl-net
  sapl:
-    image: interlegis/sapl:3.1.161-RC3
-    #build: .
+    image: interlegis/sapl:3.1.162-RC6
+#    build:
+#      context: ../
+#      dockerfile: ./docker/Dockerfile
+    container_name: sapl
+    labels:
+       NAME: "sapl"
    restart: always
    environment:
      ADMIN_PASSWORD: interlegis
--- a/docker/docker-env.sh
+++ b/docker/docker-env.sh
--- a/docker/genkey.py
+++ b/docker/genkey.py
--- a/docker/gunicorn_start.sh
+++ b/docker/gunicorn_start.sh
@ -1,5 +1,12 @@
 #!/usr/bin/env bash

+##
+##
+## PARA USO EXCLUSIVO DO CONTAINER DOCKER DO SAPL!!!
+## EVITE USAR PARA CHAMADA DIRETAS
+##
+##
+
 # As seen in http://tutos.readthedocs.org/en/latest/source/ndg.html

 SAPL_DIR="/var/interlegis/sapl"
@ -25,15 +32,6 @@ DJANGO_WSGI_MODULE=sapl.wsgi                    # WSGI module name (*)

 echo "Starting $NAME as `whoami` on base dir $SAPL_DIR"

-# parameter can be passed to run without virtualenv
-if [[ "$@" != "no-venv" ]]; then
-    # Activate the virtual environment
-    cd $DJANGODIR
-    source /var/interlegis/.virtualenvs/sapl/bin/activate
-    export DJANGO_SETTINGS_MODULE=$DJANGO_SETTINGS_MODULE
-    export PYTHONPATH=$DJANGODIR:$PYTHONPATH
-fi
-
 # Create the run directory if it doesn't exist
 RUNDIR=$(dirname $SOCKFILE)
 test -d $RUNDIR || mkdir -p $RUNDIR
--- a/docker/scripts_docker/remove-all-containers.sh
+++ b/docker/scripts_docker/remove-all-containers.sh
--- a/docker/scripts_docker/remove-db.sh
+++ b/docker/scripts_docker/remove-db.sh
--- a/docker/scripts_docker/restore-db.sh
+++ b/docker/scripts_docker/restore-db.sh
--- a/docker/scripts_docker/shell_sapl.sh
+++ b/docker/scripts_docker/shell_sapl.sh
--- a/docker/simple_gunicorn.sh
+++ b/docker/simple_gunicorn.sh
--- a/docker/solr_api.py
+++ b/docker/solr_api.py
@ -1,56 +1,102 @@
-
+from io import BytesIO
+import argparse
+import os
 import requests
 import subprocess
 import sys
-import argparse
+import zipfile
+from pathlib import Path

+##
+## Este módulo deve ser executado na raiz do projeto
+##

 class SolrClient:

    LIST_CONFIGSETS = "{}/solr/admin/configs?action=LIST&omitHeader=true&wt=json"
    UPLOAD_CONFIGSET = "{}/solr/admin/configs?action=UPLOAD&name={}&wt=json"
    LIST_COLLECTIONS = "{}/solr/admin/collections?action=LIST&wt=json"
-    STATUS_COLLECTION = "{}/solr/admin/collections?action=CLUSTERSTATUS&collection={}&wt=json"
+    STATUS_COLLECTION = "{}/solr/admin/collections?action=CLUSTERSTATUS" \
+                        "&collection={}&wt=json"
    STATUS_CORE = "{}/admin/cores?action=STATUS&name={}"
    EXISTS_COLLECTION = "{}/solr/{}/admin/ping?wt=json"
    OPTIMIZE_COLLECTION = "{}/solr/{}/update?optimize=true&wt=json"
-    CREATE_COLLECTION = "{}/solr/admin/collections?action=CREATE&name={}&collection.configName={}&numShards={}&replicationFactor={}&maxShardsPerNode={}&wt=json"
+    CREATE_COLLECTION = "{}/solr/admin/collections?action=CREATE&name={}" \
+                        "&collection.configName={}&numShards={}" \
+                        "&replicationFactor={}&maxShardsPerNode={}&wt=json"
    DELETE_COLLECTION = "{}/solr/admin/collections?action=DELETE&name={}&wt=json"
    DELETE_DATA = "{}/solr/{}/update?commitWithin=1000&overwrite=true&wt=json"
    QUERY_DATA = "{}/solr/{}/select?q=*:*"

    CONFIGSET_NAME = "sapl_configset"

+    CONFIGSET_PATH = "./solr/sapl_configset/conf"
+
    def __init__(self, url):
        self.url = url

    def get_num_docs(self, collection_name):
        final_url = self.QUERY_DATA.format(self.url, collection_name)
        res = requests.get(final_url)
-        dic = res.json()
-        num_docs = dic["response"]["numFound"]
-        return num_docs
+        if res.ok:
+            try:
+                dic = res.json()
+                return dic["response"]["numFound"]
+            except Exception as e:
+                print(F"Erro no get_num_docs. Erro: {e}")
+                print(res.content)
+
+        return 0

    def list_collections(self):
        req_url = self.LIST_COLLECTIONS.format(self.url)
        res = requests.get(req_url)
-        dic = res.json()
-        return dic['collections']
+        try:
+            dic = res.json()
+            return dic['collections']
+        except Exception as e:
+            print(F"Erro no list_collections. Erro: {e}")
+            print(res.content)
+            return 0

    def exists_collection(self, collection_name):
        collections = self.list_collections()
        return True if collection_name in collections else False

+    def zip_configset(self):
+        try:
+            base_path = Path(self.CONFIGSET_PATH).expanduser().resolve(strict=True)
+
+            # zip files in memory
+            _zipfile = BytesIO()
+            with zipfile.ZipFile(_zipfile, 'w', zipfile.ZIP_DEFLATED) as zipf:
+                for file in base_path.rglob('*'):
+                    zipf.write(file, file.relative_to(base_path))
+            return _zipfile
+        except Exception as e:
+            print(e)
+            raise e
+
    def maybe_upload_configset(self, force=False):
        req_url = self.LIST_CONFIGSETS.format(self.url)
        res = requests.get(req_url)
-        dic = res.json()
-        configsets = dic['configSets']
+        try:
+            dic = res.json()
+            configsets = dic['configSets']
+        except Exception as e:
+            print(F"Erro ao configurar configsets. Erro: {e}")
+            print(res.content)
+
        # UPLOAD configset
        if not self.CONFIGSET_NAME in configsets or force:
+
+            # GENERATE in memory configset
+            configset_zip = self.zip_configset()
+            data = configset_zip.getvalue()
+            configset_zip.close()
+
            files = {'file': ('saplconfigset.zip',
-                              open('./solr/sapl_configset/conf/saplconfigset.zip',
-                                   'rb'),
+                              data,
                              'application/octet-stream',
                              {'Expires': '0'})}

@ -58,6 +104,7 @@ class SolrClient:

            resp = requests.post(req_url, files=files)
            print(resp.content)
+
        else:
            print('O %s já presente no servidor, NÃO enviando.' % self.CONFIGSET_NAME)

@ -74,8 +121,12 @@ class SolrClient:
            print("Collection '%s' created succesfully" % collection_name)
        else:
            print("Error creating collection '%s'" % collection_name)
-            as_json = res.json()
-            print("Error %s: %s" % (res.status_code, as_json['error']['msg']))
+            try:
+                as_json = res.json()
+                print("Error %s: %s" % (res.status_code, as_json['error']['msg']))
+            except Exception as e:
+                print(F"Erro ao verificar erro na resposta. Erro: {e}")
+                print(res.content)
            return False
        return True
    
--- a/docker/start.sh
+++ b/docker/start.sh
@ -117,5 +117,5 @@ echo "| ███████║██║  ██║██║     ████
 echo "| ╚══════╝╚═╝  ╚═╝╚═╝     ╚══════╝  |"
 echo "-------------------------------------"

-/bin/sh gunicorn_start.sh no-venv &
+/bin/sh gunicorn_start.sh &
 /usr/sbin/nginx -g "daemon off;"
--- a/docker/travis.yml.docker
+++ b/docker/travis.yml.docker
@ -0,0 +1,38 @@
+sudo: required
+
+services:
+  - docker
+
+env:
+  global:
+    - DOCKER_COMPOSE_VERSION=1.26.2
+
+before_install:
+  # Install latest versions of docker and docker-compose
+  - curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo apt-key add -
+  - sudo add-apt-repository "deb [arch=amd64] https://download.docker.com/linux/ubuntu $(lsb_release -cs) stable"
+  - sudo apt-get update
+  - sudo apt-get -y -o Dpkg::Options::="--force-confnew" install docker-ce
+  - sudo rm /usr/local/bin/docker-compose
+  - curl -L https://github.com/docker/compose/releases/download/${DOCKER_COMPOSE_VERSION}/docker-compose-`uname -s`-`uname -m` > docker-compose
+  - chmod +x docker-compose
+  - sudo mv docker-compose /usr/local/bin
+  - docker --version
+  - docker-compose --version
+
+install:
+  - sudo service postgresql stop || true
+
+script:
+  - cd $TRAVIS_BUILD_DIR/docker
+  # Build master images and run the webserver (tests end to end)
+  #- docker-compose -f docker-compose.test.yml build
+  #- docker-compose up -d
+  #- docker logs sapl
+  #- docker-compose rm -f -s -v
+  - docker-compose -f docker-compose-test.yml run --workdir="/var/interlegis/sapl" sapl bash -c "bash busy-wait.sh postgresql://sapl:sapl@sapldb:5432/sapl && cp docker/config/env_test .env && py.test --create-db"
+
+after_script:
+  # Cleanup docker containers, images, and volumes
+  - docker-compose rm -f -s -v
+  - docker system prune -a -f --volumes
--- a/docs/ambiente-dev.md
+++ b/docs/ambiente-dev.md
@ -0,0 +1,41 @@
+# Ambiente de Desenvolvimento
+
+### Tópicos
+
+* [Rodar Docker Compose](#Rodar-Docker-Compose)
+* [Configurar Banco de Dados PostgreSQL instalado na máquina](#Configurar-Banco-de-Dados-PostgreSQL-instalado-na-máquina)
+* [Restaurar uma Base de Dados](#Restaurar-Base-de-Dados)
+
+##### A configuração do banco de dados e restauração da base de dados só devem ser feitas na primeira vez.
+
+
+## Rodar Docker Compose
+Para rodar o docker compose sem o conteiner postgresql, vá ao terminal e execute o comando:
+```shell
+docker-compose -f docker/docker-compose-dev.yml up
+```
+Se quiser com o conteiner postgresql, execute o comando:
+```shell
+docker-compose -f docker/docker-compose-dev-db.yml up
+```
+
+## Configurar Banco de Dados PostgreSQL instalado na máquina
+A configuração do banco de dados só é necessário com o postgresql na máquina local. Para configurá-lo, vá ao terminal e execute os comandos a seguir para criar o usuário "sapl", senha "sapl" e a base de dados "sapl":
+```shell
+sudo -u postgres psql -c "CREATE ROLE sapl LOGIN ENCRYPTED PASSWORD 'sapl' NOSUPERUSER INHERIT CREATEDB NOCREATEROLE NOREPLICATION;"
+
+sudo -u postgres psql -c "ALTER ROLE sapl VALID UNTIL 'infinity';"
+
+sudo -u postgres psql -c "CREATE DATABASE sapl WITH OWNER = sapl ENCODING = 'UTF8' TABLESPACE = pg_default LC_COLLATE = 'pt_BR.UTF-8' LC_CTYPE = 'pt_BR.UTF-8' CONNECTION LIMIT = -1 TEMPLATE template0;"
+```
+Depois do banco de dados ter sido configurado, [restaure alguma base de dados](#Restaurar-Base-de-Dados).
+
+## Restaurar Base de Dados
+No termianal, rode o comando no diretório raiz do projeto passando como parâmetro o caminho do backup:
+```shell
+./scripts/restore_db.sh -f <caminho-do-dump>
+```
+Se o postgres estiver rodando no container, adicione a _flag_ "-p 5433":
+```shell
+./scripts/restore_db.sh -f <caminho-do-dump> -f 5433
+```
--- a/docs/deploy.rst
+++ b/docs/deploy.rst
@ -109,7 +109,7 @@ Para rodar o gunicorn::

   workon sapl

-   /var/interlegis/sapl/.gunicorn_start.sh
+   /var/interlegis/sapl/docker/.gunicorn_start.sh



--- a/docs/instalacao31.rst
+++ b/docs/instalacao31.rst
@ -25,7 +25,7 @@ Instalar as seguintes dependências do sistema::
 ::

    sudo apt-get install git python3-dev libpq-dev graphviz-dev graphviz \
-    pkg-config postgresql postgresql-contrib pgadmin3 python-psycopg2 \
+    pkg-config postgresql postgresql-contrib pgadmin3 python3-psycopg2 \
    software-properties-common build-essential libxml2-dev libjpeg-dev \
    libmysqlclient-dev libssl-dev libffi-dev libxslt1-dev python3-setuptools \
    python3-pip poppler-utils antiword default-jre python3-venv
@ -145,7 +145,7 @@ Criação da `SECRET_KEY <https://docs.djangoproject.com/es/1.9/ref/settings/#st
      SERVER_EMAIL = [Insira este parâmetro]

      SOLR_URL = '[Insira este parâmetro]'
-      
+
      FRONTEND_CUSTOM = [True/False]


@ -207,18 +207,16 @@ Instruções para criação do super usuário e de usuários de testes
    operador_materia
    operador_norma
    operador_sessao
-    operador_painel
    operador_geral
+    operador_painel


-Sapl-Frontend
+Frontend do SAPL
 =============

-* O Sapl foi separado em outro projeto, o SAPL Frontend que está aqui no github, no repositório do Interlegis. Veja Aqui: https://github.com/interlegis/sapl-frontend::
+* Se seu objetivo é preparar o ambiente de desenvolvimento para colaborar com o backend, você não precisa se preocupar com o tutorial abaixo pois na pasta https://github.com/interlegis/sapl/tree/3.1.x/sapl/static/sapl/frontend já está o código oficial de produção do Frontend

-* Se seu objetivo é preparar o ambiente de desenvolvimento para colaborar no backend, você não precisa se preocupar com o tutorial abaixo pois na pasta https://github.com/interlegis/sapl/tree/3.1.x/sapl/static já está o código oficial de produção exportado pelo projeto do Sapl-Frontend
-
-* Para colaborar com o Sapl-Frontend ou fazer seu próprio frontend a partir do oficial, siga os passos abaixo:
+* Para colaborar com o Frontend, siga os passos abaixo:

 Preparação do ambiente::
 ----------------------
@ -239,58 +237,18 @@ Preparação do ambiente::

    yarn global add @vue/cli

+Sobre a organização do Frontend

-Ligando os projetos SAPL e Sapl-Frontend para implementação no Sapl-Frontend
-----------------------------------------------------------------------------
-
-**É fundamental que o Sapl-Frontend esteja na mesma pasta que o Sapl**
-
-* Como orientado acima, o Sapl foi clonado na pasta `/var/interlegis`. O mesmo deve ser feito com o sapl-frontend, ficando assim::
-
-
-    /var/interlegis/sapl
-    /var/interlegis/sapl-frontend
-
-
-* para tal, execute::
-
-    cd /var/interlegis    
-    git clone git://github.com/interlegis/sapl-frontend
-    
-**Você pode também criar um Fork do sapl-frontend**
-
-* Para fazer um fork e depois clonar, siga as instruções em https://help.github.com/articles/fork-a-repo que basicamente são:
-
-  * Criar uma conta no github - é gratuíto.
-  * Acessar https://github.com/interlegis/sapl-frontend e clicar em **Fork**.
-
-* Será criado um domínio pelo qual será possível **clonar, corrigir, customizar, melhorar, contribuir, etc**::
-
-      cd /var/interlegis
-      git clone git://github.com/[SEU NOME]/sapl-frontend
-
-
-Feito isso, e você ativando a variável de ambiente FRONTEND_CUSTOM=True (vide acima criação do .env), o Sapl (backend) desativa a pasta *static* no seu ambiente de desenvolvimento e no seu ambiente de produção e passa a valer para o Sapl (backend) o que você customizar em sapl-frontend. Resumindo:
-
-* Se você está criando um fork do sapl-frontend para ter o sapl com sua cara, ou criando funcionalidades de seu interesse: 
-    
-    FRONTEND_CUSTOM=True
-
-* Se você está colaborando com a evolução oficial do sapl-frontend e enviará seu código para o repositório oficial através de um PR e, por consequência, gerará novos versão de produção a ser colocada na pasta static, então:
-    
-    FRONTEND_CUSTOM=False
-
-**Deste ponto em diante, é exigido o conhecimento que você pode adquirir em https://cli.vuejs.org/guide/ e em https://vuejs.org/v2/guide/ para colaborar com sapl-frontend**
+O Frontend está organizado modularmente segundo conceitos do webpack. Sendo independentes, podem possuir Vue ou não.

 Sobre a pasta static
 --------------------
-Após a separação do sapl em sapl e sapl-frontend, o conteúdo da pasta sapl/static/sapl/frontend é compilado e minificado. É gerado pelo build do sapl-frontend e não deve-se tentar customizar ou criar elementos manipulando diretamente informações na pasta sapl/static/sapl/frontend.
+O conteúdo da pasta sapl/static/sapl/frontend é compilado e minificado. É gerado pelo build do Frontend e não deve-se tentar customizar ou criar elementos manipulando diretamente informações na pasta sapl/static/sapl/frontend.

 Para aplicar css e javascript sem sapl-frontend:

-1) Não altere diretamente o conteúdo da pasta sapl/static/sapl/frontend. Isso deve ser feito no projeto sapl-frontend. Você perderá qualquer manipulação dentro desta pasta.
+1) Não altere diretamente o conteúdo da pasta sapl/static/sapl/frontend. Isso deve ser feito na subpasta frontend/src.

 2) Caso venha a criar algum código css/js diretamente no django, crie seus arquivos na pasta sapl/static/sapl.

 3) Não crie nenhum novo conteúdo na pasta sapl/static. Projetos Django podem ser usados como app de outro projeto. É o que ocorre com o Sapl, que é usado como uma app em outros projetos. Qualquer conteúdo colocado dentro sapl/static e não em sapl/static/sapl, pode estar causando erro no uso do Sapl como app em outro projeto.
-
--- a/frontend/.browserslistrc
+++ b/frontend/.browserslistrc
@ -0,0 +1,3 @@
+> 1%
+last 2 versions
+not ie <= 8
--- a/frontend/.eslintrc.js
+++ b/frontend/.eslintrc.js
@ -0,0 +1,31 @@
+module.exports = {
+  root: true,
+  env: {
+    browser: true,
+    node: true,
+    jquery: true
+  },
+  extends: [
+    'plugin:vue/essential',
+    'standard'
+  ],
+  rules: {
+    'generator-star-spacing': 'off',
+    //'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
+    camelcase: 0
+  },
+  // required to lint *.vue files
+  plugins: [
+    'vue'
+  ],
+  parserOptions: {
+    parser: 'babel-eslint'
+  },
+
+  globals: {
+    $: true,
+    jQuery: true,
+    _: true
+  }
+}
--- a/frontend/.gitignore
+++ b/frontend/.gitignore
@ -0,0 +1,22 @@
+.DS_Store
+node_modules
+/dist
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+
+# Editor directories and files
+theme-dev
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw*
--- a/frontend/Dockerfile.dev
+++ b/frontend/Dockerfile.dev
@ -0,0 +1,6 @@
+FROM node:lts-alpine
+RUN apk add --no-cache bash
+WORKDIR /sapl-frontend-dev
+COPY package*.json ./
+RUN npm install
+EXPOSE 8080
--- a/frontend/README.md
+++ b/frontend/README.md
@ -0,0 +1,29 @@
+# sapl-frontend
+
+## Project setup
+```
+yarn install
+```
+
+### Compiles and hot-reloads for development
+```
+yarn run serve
+```
+
+### Compiles and minifies for production
+```
+yarn run build
+```
+
+### Run your tests
+```
+yarn run test
+```
+
+### Lints and fixes files
+```
+yarn run lint
+```
+
+### Customize configuration
+See [Configuration Reference](https://cli.vuejs.org/config/).
--- a/frontend/babel.config.js
+++ b/frontend/babel.config.js
@ -0,0 +1,3 @@
+module.exports = {
+  presets: ['@vue/app']
+}
--- a/frontend/docker-compose-dev.yml
+++ b/frontend/docker-compose-dev.yml
@ -0,0 +1,24 @@
+version: '3.5'
+
+services:
+  sapl-frontend-dev:
+    container_name: sapl-frontend-dev
+    restart: always
+    image: sapl:dev
+    build:
+      context: .
+      dockerfile: Dockerfile.dev
+    volumes:
+      - .:/sapl-frontend-dev
+      - /sapl-frontend-dev/node_modules
+    ports:
+      - "8080:8080"
+    networks:
+      - sapl-net-dev
+    command: sh -c """yarn install &&
+                      yarn run serve"""
+
+networks:
+  sapl-net-dev:
+    name: sapl-net-dev
+    driver: bridge
--- a/frontend/postcss.config.js
+++ b/frontend/postcss.config.js
@ -0,0 +1,5 @@
+module.exports = {
+  plugins: {
+    autoprefixer: {}
+  }
+}
--- a/frontend/public/audio/ring.mp3
+++ b/frontend/public/audio/ring.mp3
--- a/frontend/public/img/arrow.png
+++ b/frontend/public/img/arrow.png
--- a/frontend/public/img/authenticated.png
+++ b/frontend/public/img/authenticated.png
--- a/frontend/public/img/avatar.png
+++ b/frontend/public/img/avatar.png
--- a/frontend/public/img/beta.png
+++ b/frontend/public/img/beta.png
--- a/frontend/public/img/brasao_transp.gif
+++ b/frontend/public/img/brasao_transp.gif
--- a/frontend/public/img/down_arrow_select.jpg
+++ b/frontend/public/img/down_arrow_select.jpg
--- a/frontend/public/img/etiqueta.png
+++ b/frontend/public/img/etiqueta.png
--- a/frontend/public/img/favicon.ico
+++ b/frontend/public/img/favicon.ico
--- a/frontend/public/img/file.png
+++ b/frontend/public/img/file.png
--- a/frontend/public/img/hand-note.png
+++ b/frontend/public/img/hand-note.png
--- a/frontend/public/img/icon_comissoes.png
+++ b/frontend/public/img/icon_comissoes.png
--- a/frontend/public/img/icon_delete_white.png
+++ b/frontend/public/img/icon_delete_white.png
--- a/frontend/public/img/icon_materia_legislativa.png
+++ b/frontend/public/img/icon_materia_legislativa.png
--- a/frontend/public/img/icon_mesa_diretora.png
+++ b/frontend/public/img/icon_mesa_diretora.png
--- a/frontend/public/img/icon_normas_juridicas.png
+++ b/frontend/public/img/icon_normas_juridicas.png
--- a/frontend/public/img/icon_parlamentares.png
+++ b/frontend/public/img/icon_parlamentares.png
--- a/frontend/public/img/icon_pautas.png
+++ b/frontend/public/img/icon_pautas.png
--- a/frontend/public/img/icon_plenarias.png
+++ b/frontend/public/img/icon_plenarias.png
--- a/frontend/public/img/icon_relatorios.png
+++ b/frontend/public/img/icon_relatorios.png
--- a/frontend/public/img/icon_save_white.png
+++ b/frontend/public/img/icon_save_white.png
--- a/frontend/public/img/lexml.gif
+++ b/frontend/public/img/lexml.gif
--- a/frontend/public/img/logo.png
+++ b/frontend/public/img/logo.png
--- a/frontend/public/img/logo_cc.png
+++ b/frontend/public/img/logo_cc.png
--- a/frontend/public/img/logo_interlegis.png
+++ b/frontend/public/img/logo_interlegis.png
--- a/frontend/public/img/manual.png
+++ b/frontend/public/img/manual.png
--- a/frontend/public/img/pdflogo.png
+++ b/frontend/public/img/pdflogo.png
--- a/frontend/public/img/perfil.png
+++ b/frontend/public/img/perfil.png
--- a/frontend/public/img/search-gray.png
+++ b/frontend/public/img/search-gray.png
--- a/frontend/public/img/search.png
+++ b/frontend/public/img/search.png
--- a/frontend/public/img/user.png
+++ b/frontend/public/img/user.png
--- a/frontend/src/__apps/compilacao/js/old/compilacao.js
+++ b/frontend/src/__apps/compilacao/js/old/compilacao.js
@ -0,0 +1,331 @@
+const _$ = window.$
+
+function SetCookie (cookieName, cookieValue, nDays) {
+  const today = new Date()
+  const 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) {
+  const theCookie = ' ' + document.cookie
+  let ind = theCookie.indexOf(' ' + cookieName + '=')
+  if (ind === -1) ind = theCookie.indexOf(';' + cookieName + '=')
+  if (ind === -1 || cookieName === '') return ''
+  let 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>')
+  _$(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 = {}
+    let containerDs = _$('body').children('#container_ds')
+    if (containerDs.length > 0) {
+      _$(containerDs).remove()
+    }
+    containerDs = _$('<div id="container_ds"/>')
+    _$('body').prepend(containerDs)
+
+    const fields = _$('[data-sapl-ta="DispositivoSearch"]')
+    fields.each(function () {
+      const field = _$(this)
+      const dataTypeSelection = field.attr('data-type-selection')
+      const dataField = field.attr('data-field')
+      const dataFunction = field.attr('data-function')
+
+      const onChangeFieldSelects = function (event) {
+        if (dataTypeSelection === 'checkbox') {
+          const tas = field.find('input[name="ta_select_all"]') // tas - Textos Articulados
+          tas.off()
+
+          tas.on('change', function (event) {
+            _$(this).closest('ul').find('input[name="' + dataField + '"]').prop('checked', this.checked)
+            // _$(this).prop('checked', false)
+          })
+        } else {
+          const dpts = field.find('input')
+          dpts.off()
+          dpts.attr('type', 'hidden')
+          _$('<a class="text-danger">')
+            .insertBefore(dpts)
+            .append(_$('<span aria-hidden="true">&times;</span>'))
+            .on('click', function () {
+              if (_$(this).closest('ul').find('li').length === 2) {
+                _$(this).closest('ul').remove()
+              } else {
+                _$(this).closest('li').remove()
+              }
+            })
+        }
+      }
+      onChangeFieldSelects()
+
+      const onChangeParamTA = function (event) {
+        const tipoTa = _$('select[name="tipo_ta"]').val()
+        const tipoModel = _$('select[name="tipo_model"]').val()
+        const numTa = _$('input[name="num_ta"]').val()
+        const anoTa = _$('input[name="ano_ta"]').val()
+        let tipoResultado = _$('input[name="tipo_resultado"]:checked').val()
+        const rotuloDispositivo = _$('input[name="rotulo_dispositivo"]').val()
+        const textoDispositivo = _$('input[name="texto_dispositivo"]').val()
+        const maxResults = _$('select[name="max_results"]').val()
+        let url = ''
+
+        if (rotuloDispositivo.length > 0 || textoDispositivo.length > 0) {
+          _$('input[name="tipo_resultado"]').prop('disabled', false)
+          _$('input[name="tipo_resultado"]').each((idx, element) => {
+            element.parentElement.classList.remove('disabled')
+          })
+          _$('input[name="tipo_resultado"]').closest('#div_id_tipo_resultado').css('opacity', '1')
+        } else {
+          _$('input[name="tipo_resultado"]').filter('[value="False"]').prop('checked', true)
+          _$('input[name="tipo_resultado"]').prop('disabled', true)
+
+          _$('input[name="tipo_resultado"]').each((idx, element) => {
+            element.parentElement.classList.add('disabled')
+          })
+          _$('input[name="tipo_resultado"]').closest('#div_id_tipo_resultado').css('opacity', '0.3')
+          tipoResultado = 'False'
+        }
+        formData = {
+          tipo_ta: tipoTa,
+          tipo_model: tipoModel,
+          num_ta: numTa,
+          ano_ta: anoTa,
+          texto: textoDispositivo,
+          rotulo: rotuloDispositivo,
+          tipo_resultado: tipoResultado,
+          max_results: maxResults,
+          data_type_selection: dataTypeSelection,
+          data_field: dataField,
+          data_function: dataFunction
+        }
+
+        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 (dataTypeSelection === 'checkbox') {
+            const 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)
+            })
+          }
+        })
+      }
+
+      const onKeyPressRotuloBuscaTextual = function (event) {
+        const rotuloDispositivo = _$('input[name="rotulo_dispositivo"]').val()
+        const textoDispositivo = _$('input[name="texto_dispositivo"]').val()
+        // let tipoResultado = _$('input[name="tipo_resultado"]:checked').val()
+
+        if (rotuloDispositivo.length > 0 || textoDispositivo.length > 0) {
+          _$('input[name="tipo_resultado"]').prop('disabled', false)
+          _$('input[name="tipo_resultado"]').each((idx, element) => {
+            element.parentElement.classList.remove('disabled')
+          })
+          _$('input[name="tipo_resultado"]').closest('#div_id_tipo_resultado').css('opacity', '1')
+        } else {
+          _$('input[name="tipo_resultado"]').filter('[value="False"]').prop('checked', true)
+          _$('input[name="tipo_resultado"]').prop('disabled', true)
+          _$('input[name="tipo_resultado"]').each((idx, element) => {
+            element.parentElement.classList.add('disabled')
+          })
+          _$('input[name="tipo_resultado"]').closest('#div_id_tipo_resultado').css('opacity', '0.3')
+          // tipoResultado = 'False'
+        }
+      }
+
+      let buttonDs = field.children('#buttonDs')
+      if (buttonDs.length > 0) {
+        _$(buttonDs).remove()
+      }
+      buttonDs = _$('<div id="buttonDs" class="clearfix"/>')
+      field.prepend(buttonDs)
+
+      const 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) {
+          containerDs.html(data)
+          const modalDs = _$('#modal-ds')
+          // OptionalCustomFrontEnd().init()
+
+          modalDs.find('select[name="tipo_ta"]').change(function (event) {
+            let url = ''
+            url = '/ta/search_fragment_form?action=get_tipos&tipo_ta=' + this.value
+            modalDs.find('label[for="id_tipo_model"]').html('Tipos de ' + this.children[this.selectedIndex].innerHTML)
+
+            const select = modalDs.find('select[name="tipo_model"]')
+            select.empty()
+            _$('<option value="">Carregando...</option>').appendTo(select)
+
+            _$.get(url).done(function (data) {
+              select.empty()
+              for (const item in data) {
+                for (const 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)
+            })
+          })
+
+          /* modalDs.find('input[name="num_ta"], '
+            +'input[name="ano_ta"], '
+            +'select[name="tipo_model"], '
+            +'input[name="texto_dispositivo"], '
+            +'input[name="tipo_resultado"], '
+            +'input[name="rotulo_dispositivo"]'
+          ).change(onChangeParamTA); */
+          modalDs.find('input[name="texto_dispositivo"], ' +
+              'input[name="rotulo_dispositivo"]')
+            .on('keyup', onKeyPressRotuloBuscaTextual)
+
+          modalDs.find('.btn-busca').click(onChangeParamTA)
+
+          modalDs.find('#btn-modal-select').click(function () {
+            // limpar selecionados se o tipo é radio
+            const listas = field.find('ul')
+            if (dataTypeSelection === 'radio') {
+              listas.remove()
+            }
+            // adicionar itens selecionados na caixa modal
+            const selecionados = modalDs.find('[name="' + dataField + '"]: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
+              const ulLista = field.find('#' + this.id)
+              if (ulLista.length === 0) {
+                field.append(this)
+                return
+              }
+
+              // insere os dispositivos não presentes
+              const inputForThis = _$(this).find('input')
+
+              inputForThis.each(function () {
+                if (ulLista.find('#' + this.id).length > 0) {
+                  return
+                }
+                ulLista.append(_$(this).closest('li'))
+              })
+            })
+
+            onChangeFieldSelects()
+
+            modalDs.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)
+
+            _$('input[name="tipo_resultado"]')
+              .filter(`[value="${formData.tipo_resultado}"]`)
+              .attr('checked', true)
+          } catch (e) {
+            // console.log(e)
+          }
+
+          setTimeout(function () {
+            try {
+              _$('select[name="tipo_ta"]').val(formData.tipo_ta)
+              _$('select[name="tipo_ta"]').trigger('change')
+              // modalDs.find('.btn-busca').trigger('click')
+              // onChangeParamTA()
+            } catch (e) {
+              // console.log(e)
+            }
+          }, 200)
+
+          modalDs.modal('show')
+        })
+      })
+      if ('autostart' in opts && opts.autostart) {
+        btnOpenSearch.trigger('click')
+      }
+    })
+  })
+}
+
+function InitViewTAs () {
+  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) {
+        // console.log(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)
+  })
+
+  $('.cp-linha-vigencias > li:not(:first-child):not(:last-child) > a').click(function (event) {
+    $('.cp-linha-vigencias > li').removeClass('active')
+    $(this).closest('li').addClass('active')
+    event.preventDefault()
+  })
+
+  $('main').click(function (event) {
+    if (event.target === this || event.target === this.firstElementChild) {
+      $('.cp-linha-vigencias > li').removeClass('active')
+    }
+  })
+}
+
+export default {
+  SetCookie,
+  ReadCookie,
+  insertWaitAjax,
+  InitViewTAs,
+  DispositivoSearch
+}
--- a/frontend/src/__apps/compilacao/js/old/compilacao_edit.js
+++ b/frontend/src/__apps/compilacao/js/old/compilacao_edit.js
@ -0,0 +1,584 @@
+
+const _$ = window.$
+
+window.DispositivoEdit = function () {
+  // Função única - Singleton pattern - operador new sempre devolve o mesmo objeto
+  let instance
+
+  let editortype = 'textarea'
+
+  if (!(this instanceof window.DispositivoEdit)) {
+    if (!instance) {
+      instance = new window.DispositivoEdit()
+    }
+    return instance
+  }
+  instance = this
+  window.DispositivoEdit = function () {
+    return instance
+  }
+
+  instance.bindActionsEditorType = function (event) {
+    editortype = this.getAttribute('editortype')
+    window.SetCookie('editortype', editortype, 30)
+    const dpt = _$(this).closest('.dpt')
+
+    const pk = dpt.attr('pk')
+    instance.clearEditSelected()
+    instance.triggerBtnDptEdit(pk)
+    event.preventDefault()
+  }
+
+  instance.bindActionsClick = function (event) {
+    const pk = this.getAttribute('pk')
+
+    const form_data = {
+      action: this.getAttribute('action'),
+      tipo_pk: this.getAttribute('tipo_pk'),
+      perfil_pk: this.getAttribute('perfil_pk'),
+      variacao: this.getAttribute('variacao'),
+      pk_bloco: this.getAttribute('pk_bloco')
+    }
+
+    const url = pk + '/refresh'
+    instance.waitShow()
+
+    _$.get(url, form_data).done(function (data) {
+      instance.clearEditSelected()
+      if (data.pk != null) {
+        instance.message(data)
+      }
+    }).fail(instance.waitHide).always(instance.waitHide)
+  }
+
+  instance.clearEditSelected = function () {
+    _$('.dpt-selected > .dpt-form').html('')
+    _$('.dpt-actions, .dpt-actions-bottom').html('')
+    window.tinymce.remove()
+    _$('.dpt-selected').removeClass('dpt-selected')
+  }
+
+  instance.editDispositivo = function (event) {
+    const obj_click = (event.target.classList.contains('dpt-link')
+      ? event.target
+      : (event.target.parentElement.classList.contains('dpt-link')
+        ? event.target.parentElement
+        : null))
+
+    if (obj_click && obj_click.getAttribute('href') && obj_click.getAttribute('href').length > 0) { return }
+
+    const dpt = _$(this).closest('.dpt')
+    if (dpt.hasClass('dpt-selected')) {
+      if (this.getAttribute('action') === 'editor-close') { instance.clearEditSelected() }
+      return
+    }
+    instance.clearEditSelected()
+    instance.loadActionsEdit(dpt)
+
+    const formtype = dpt.attr('formtype')
+    dpt.on(formtype, instance[formtype])
+    instance.loadForm(dpt, formtype)
+  }
+
+  instance.gc = function () {
+    setTimeout(function () {
+      _$('.dpt:not(.dpt-selected) > .dpt-form').html('')
+    }, 500)
+  }
+
+  instance.get_form_base = function () {
+    const _this = _$(this)
+    _this.addClass('dpt-selected')
+
+    const dpt_form = _this.children().filter('.dpt-form')
+    dpt_form.find('form').submit(instance.onSubmitEditFormBase)
+
+    instance.scrollTo(_this)
+    _this.off('get_form_base')
+
+    const btn_fechar = _this.find('.btn-fechar')
+    btn_fechar.on('click', function (event) {
+      instance.clearEditSelected()
+      event.preventDefault()
+    })
+
+    const btns_excluir = _this.find('.btns-excluir')
+    _this.find('.dpt-actions-bottom').first().append(btns_excluir)
+
+    btns_excluir.find('.btn-outline-danger').on('click', instance.bindActionsClick)
+  }
+
+  instance.get_form_alteracao = function () {
+    const _this = _$(this)
+    _this.off('get_form_alteracao')
+    _$('.dpt-actions, .dpt-actions-bottom').html('')
+
+    const dpt_form = _this.children().filter('.dpt-form').children().first()
+    const url_search = dpt_form[0].id_dispositivo_search_form.value
+    window.DispositivoSearch({
+      url_form: url_search,
+      text_button: 'Selecionar',
+      autostart: true
+    })
+
+    instance.scrollTo(_this)
+    dpt_form.submit(instance.onSubmitFormRegistraAlteracao)
+
+    const btn_fechar = _this.find('.btn-fechar')
+    btn_fechar.on('click', function (event) {
+      instance.clearEditSelected()
+      instance.triggerBtnDptEdit(_this.attr('pk'))
+      event.preventDefault()
+    })
+  }
+
+  instance.get_form_inclusao = function () {
+    const _this = _$(this)
+    _this.off('get_form_inclusao')
+    _$('.dpt-actions, .dpt-actions-bottom').html('')
+
+    const dpt_form = _this.children().filter('.dpt-form').children().first()
+    const url_search = dpt_form[0].id_dispositivo_search_form.value
+    window.DispositivoSearch({
+      url_form: url_search,
+      text_button: 'Selecionar',
+      post_selected: instance.allowed_inserts_registro_inclusao,
+      params_post_selected: { pk_bloco: _this.attr('pk') },
+      autostart: true
+
+    })
+
+    instance.scrollTo(_this)
+    dpt_form.submit(instance.onSubmitFormRegistraInclusao)
+
+    const btn_fechar = _this.find('.btn-fechar')
+    btn_fechar.on('click', function (event) {
+      instance.clearEditSelected()
+      instance.triggerBtnDptEdit(_this.attr('pk'))
+      event.preventDefault()
+    })
+  }
+
+  instance.get_form_revogacao = function () {
+    const _this = _$(this)
+    _this.off('get_form_revogacao')
+    _$('.dpt-actions, .dpt-actions-bottom').html('')
+
+    const dpt_form = _this.children().filter('.dpt-form').children().first()
+    const url_search = dpt_form[0].id_dispositivo_search_form.value
+    window.DispositivoSearch({
+      url_form: url_search,
+      text_button: 'Selecionar',
+      autostart: true
+    })
+
+    instance.scrollTo(_this)
+    dpt_form.submit(instance.onSubmitFormRegistraRevogacao)
+
+    const btn_fechar = _this.find('.btn-fechar')
+    btn_fechar.on('click', function () {
+      instance.clearEditSelected()
+      instance.triggerBtnDptEdit(_this.attr('pk'))
+    })
+  }
+
+  instance.allowed_inserts_registro_inclusao = function (params) {
+    const dispositivo_base_para_inclusao = _$('#id' + params.pk_bloco + " input[name='dispositivo_base_para_inclusao']")
+    if (dispositivo_base_para_inclusao.length === 0) { return }
+
+    const pk = dispositivo_base_para_inclusao[0].value
+    const form_data = {
+      action: 'get_actions_allowed_inserts_registro_inclusao',
+      pk_bloco: params.pk_bloco
+    }
+
+    const url = pk + '/refresh'
+    instance.waitShow()
+
+    _$.get(url, form_data).done(function (data) {
+      _$('.allowed_inserts').html(data)
+      _$('.allowed_inserts').find('.btn-action').on('click', instance.bindActionsClick)
+    }).fail(instance.waitHide).always(instance.waitHide)
+  }
+
+  instance.loadActionsEdit = function (dpt) {
+    const pk = dpt.attr('pk')
+    const url = pk + '/refresh?action=get_actions'
+    _$.get(url).done(function (data) {
+      dpt.find('.dpt-actions').first().html(data)
+      dpt.find('.btn-action').on('click', instance.bindActionsClick)
+      // dpt.find('.btn-perfis').on('click', instance.bindActionsClick);
+      dpt.find('.btn-compila').on('click', instance.loadFormsCompilacao)
+      dpt.find('.btn-editor-type').on('click', instance.bindActionsEditorType)
+
+      if (editortype === 'construct') {
+        dpt.find('.btn-group-inserts').first().addClass('open show')
+        dpt.find('.btn-group-inserts ul').first().addClass('show')
+      }
+
+      dpt.find('.btn-group-inserts button').mouseenter(function (event) {
+        dpt.find('.btn-group-inserts ul').removeClass('show')
+        dpt.find('.btn-group-inserts').removeClass('open show')
+        _$(this.parentElement).addClass('open show')
+        _$(this.parentElement).find('ul').addClass('show')
+      })
+
+      dpt.find('.btn-group-inserts').mouseleave(function (event) {
+        dpt.find('.btn-group-inserts ul').removeClass('show')
+        dpt.find('.btn-group-inserts').removeClass('open show')
+      })
+
+      // Para ativar image_cropping dentro do editor dinâmico descolmentar linha abaixo
+      // e retirar restrição do backend que adiciona input image apenas o editor avançado
+      // window.image_cropping.init()
+
+      instance.gc()
+    })
+  }
+
+  instance.loadForm = function (dpt, trigger) {
+    const pk = dpt.attr('pk')
+    const dpt_form = dpt.children().filter('.dpt-form')
+    if (dpt_form.length === 1) {
+      const url = pk + '/refresh?action=' + trigger
+      _$.get(url).done(function (data) {
+        if (editortype !== 'construct') {
+          dpt_form.html(data)
+          if (editortype === 'tinymce') {
+            window.initTextRichEditor()
+          }
+          // OptionalCustomFrontEnd().init()
+        }
+        dpt.trigger(trigger)
+      }).always(function () {
+        instance.waitHide()
+      })
+    }
+  }
+
+  instance.loadFormsCompilacao = function (event) {
+    const dpt = _$(this).closest('.dpt')
+    const formtype = this.getAttribute('action')
+    dpt.on(formtype, instance[formtype])
+    instance.loadForm(dpt, formtype)
+  }
+
+  instance.modalMessage = function (message, alert, closeFunction) {
+    if (message !== null && message !== '') {
+      _$('#modal-message #message').html(message)
+      _$('#modal-message').modal('show')
+      _$('#modal-message, #modal-message .alert button').off()
+      _$('#modal-message .alert').removeClass('alert-success alert-info alert-warning alert-danger alert-danger')
+      _$('#modal-message .alert').addClass(alert)
+
+      if (closeFunction != null) { _$('#modal-message').on('hidden.bs.modal', closeFunction) }
+
+      _$('#modal-message .alert button').on('click', function () {
+        _$('#modal-message').modal('hide')
+      })
+      return true
+    }
+    return false
+  }
+
+  instance.message = function (data) {
+    if (data.message !== undefined) {
+      if (data.message.modal) {
+        instance.modalMessage(data.message.value, 'alert-' + data.message.type, function () {
+          instance.waitShow()
+          instance.refreshScreenFocusPk(data)
+        })
+      } else {
+        instance.refreshScreenFocusPk(data)
+        if (!('message' in data)) { return }
+        const cp_notify = _$('.cp-notify')
+        cp_notify.removeClass('hide')
+        const msg = cp_notify.find('.message')
+        msg.html(data.message.value)
+        msg.removeClass('bg-primary bg-success bg-info bg-warning bg-danger').addClass('bg-' + data.message.type)
+        setTimeout(function () {
+          cp_notify.addClass('hide')
+        }, (data.message.time ? data.message.time : 3000))
+      }
+    } else {
+      instance.refreshScreenFocusPk(data)
+    }
+  }
+  instance.offClicks = function () {
+    _$('.btn-dpt-edit').off()
+  }
+  instance.onClicks = function (container) {
+    let objects
+    if (container == null) { objects = _$('.btn-dpt-edit') } else { objects = _$(container).find('.btn-dpt-edit') }
+    objects.on('click', instance.editDispositivo)
+  }
+
+  instance.onSubmitFormRegistraAlteracao = function (event) {
+    if (this.dispositivo_alterado === undefined) {
+      instance.modalMessage('Nenhum dispositivo selecionado', 'alert-info')
+      if (event != null) { event.preventDefault() }
+      return
+    }
+    const dispositivo_alterado = this.dispositivo_alterado.length === undefined ? [this.dispositivo_alterado] : Array.from(this.dispositivo_alterado)
+    const form_data = {
+      csrfmiddlewaretoken: this.csrfmiddlewaretoken.value,
+      dispositivo_alterado: dispositivo_alterado.filter(
+        function (elem, idx, array) {
+          return elem.checked
+        }
+      ).map(function (dsp) {
+        return dsp.value
+      }),
+      formtype: 'get_form_alteracao'
+    }
+    const url = _$(this).closest('.dpt').attr('pk') + '/refresh'
+
+    instance.waitShow()
+
+    // eslint-disable-next-line
+    _$.post(url, form_data)
+      .done(function (data) {
+        instance.clearEditSelected()
+
+        if (data.pk != null) {
+          instance.message(data)
+        } else {
+          alert('Erro na resposta!')
+        }
+      }).always(function () {
+        instance.waitHide()
+      })
+    if (event != null) { event.preventDefault() }
+  }
+
+  instance.onSubmitFormRegistraInclusao = function (event) {
+    const form_data = {
+      csrfmiddlewaretoken: this.csrfmiddlewaretoken.value,
+      dispositivo_base_para_inclusao: this.dispositivo_base_para_inclusao.value,
+      formtype: 'get_form_inclusao'
+    }
+    const url = _$(this).closest('.dpt').attr('pk') + '/refresh'
+
+    instance.waitShow()
+
+    _$.post(url, form_data)
+      .done(function (data) {
+        instance.clearEditSelected()
+
+        if (data.pk != null) {
+          instance.message(data)
+        } else {
+          alert('Erro na resposta!')
+        }
+      }).always(function () {
+        instance.waitHide()
+      })
+    if (event != null) { event.preventDefault() }
+  }
+
+  instance.onSubmitFormRegistraRevogacao = function (event) {
+    if (this.dispositivo_revogado === undefined) {
+      instance.modalMessage('Nenhum dispositivo selecionado', 'alert-info')
+      if (event != null) { event.preventDefault() }
+      return
+    }
+    const dispositivo_revogado = this.dispositivo_revogado.length === undefined ? [this.dispositivo_revogado] : Array.from(this.dispositivo_revogado)
+    const form_data = {
+      csrfmiddlewaretoken: this.csrfmiddlewaretoken.value,
+      dispositivo_revogado: dispositivo_revogado.filter(
+        function (elem, idx, array) {
+          return elem.checked
+        }
+      ).map(function (dsp) {
+        return dsp.value
+      }),
+      revogacao_em_bloco: this.revogacao_em_bloco.value,
+      formtype: 'get_form_revogacao'
+    }
+
+    const url = _$(this).closest('.dpt').attr('pk') + '/refresh'
+
+    instance.waitShow()
+
+    _$.post(url, form_data)
+      .done(function (data) {
+        instance.clearEditSelected()
+
+        if (data.pk != null) {
+          instance.message(data)
+        } else {
+          alert('Erro na resposta!')
+        }
+      }).always(function (event) {
+        instance.waitHide()
+      })
+    if (event != null) { event.preventDefault() }
+  }
+
+  instance.onSubmitEditFormBase = function (event) {
+    const _this = this
+    let texto = ''
+    let texto_atualizador = ''
+    let visibilidade = ''
+    const editor_tiny_texto = window.tinymce.get('id_texto')
+    const editor_tiny_texto_atualizador = window.tinymce.get('id_texto_atualizador')
+
+    if (editor_tiny_texto != null) { texto = editor_tiny_texto.getContent() } else { texto = this.id_texto.value }
+
+    if (editor_tiny_texto_atualizador != null) { texto_atualizador = editor_tiny_texto_atualizador.getContent() } else if ('id_texto_atualizador' in this) { texto_atualizador = this.id_texto_atualizador.value }
+
+    if ('visibilidade' in this) { visibilidade = this.visibilidade.value }
+
+    const form_data = {
+      csrfmiddlewaretoken: this.csrfmiddlewaretoken.value,
+      texto: texto,
+      texto_atualizador: texto_atualizador,
+      visibilidade: visibilidade,
+      formtype: 'get_form_base'
+    }
+
+    const url = _$(this).closest('.dpt').attr('pk') + '/refresh'
+
+    instance.waitShow()
+
+    _$.post(url, form_data)
+      .done(function (data) {
+        if (typeof data === 'string') { /* if obsoleto */
+          let dpt = _$(_this).closest('.dpt')
+          dpt = _$('#' + dpt.replaceWith(data).attr('id'))
+          instance.onClicks(dpt)
+          instance.waitHide()
+          return
+        }
+        instance.clearEditSelected()
+
+        if (data.pk != null) {
+          instance.message(data)
+        } else {
+          alert('Erro na resposta!')
+        }
+      }).always(function () {
+        instance.waitHide()
+      })
+    if (event != null) { event.preventDefault() }
+  }
+  instance.refreshContent = function (pais, trigger_edit_pk) {
+    if (pais.length === 0) {
+      instance.waitHide()
+      return
+    }
+    const pk = pais.shift()
+    const url = pk + '/refresh'
+
+    _$.get(url).done(function (data) {
+      let dpt = _$('#id' + pk).closest('.dpt')
+      dpt = _$('#' + dpt.replaceWith(data).attr('id'))
+      instance.onClicks(dpt)
+      instance.reloadFunctionsDraggables()
+
+      if (trigger_edit_pk > 0) { instance.triggerBtnDptEdit(trigger_edit_pk) }
+
+      instance.refreshContent(pais)
+    })
+  }
+  instance.refreshScreenFocusPk = function (data) {
+    instance.waitShow()
+    if (data.pai[0] === -1) {
+      instance.waitShow()
+      const href = location.href.split('#')[0]
+      location.href = href + '#' + data.pk
+      location.reload(true)
+    } else {
+      instance.refreshContent(data.pai, data.pk)
+
+      /* setTimeout(function() {
+                for (let pai = 1; pai < data.pai.length; pai++)
+                    instance.refreshContent(data.pai[pai]);
+                instance.waitHide();
+            }, 1000); */
+    }
+  }
+
+  instance.reloadFunctionsDraggables = function () {
+    _$('.dpt-alts').sortable({
+      revert: true,
+      distance: 15,
+      start: function (event, ui) {
+      },
+      stop: function (event, ui) {
+        const pk = ui.item.attr('pk')
+        const bloco_pk = ui.item.closest('.dpt-alts').closest('.dpt').attr('pk')
+
+        const url = pk + '/refresh?action=json_drag_move_dpt_alterado&index=' + ui.item.index() + '&bloco_pk=' + bloco_pk
+        _$.get(url).done(function (data) {
+          // console.log(pk + ' - ' + bloco_pk)
+          // reloadFunctionsForObjectsOfCompilacao();
+        })
+      }
+    })
+
+    _$('.dpt-alts .dpt').draggable({
+      connectToSortable: '.dpt-alts',
+      revert: 'invalid',
+      zIndex: 1,
+      distance: 15,
+      drag: function (event, ui) {
+        // _$('.dpt-comp-selected').removeClass('dpt-comp-selected');
+        _$('.dpt-alts').addClass('drag')
+      },
+      stop: function (event, ui) {
+        _$('.dpt-alts').removeClass('drag')
+      }
+    })
+
+    _$('.dpt-alts').disableSelection()
+  }
+  instance.scrollTo = function (dpt) {
+    try {
+      _$('html, body').animate({
+        scrollTop: dpt.offset().top - window.innerHeight / 9
+      }, 100)
+    } catch (err) {
+    }
+  }
+  instance.triggerBtnDptEdit = function (pk) {
+    let btn_dpt_edit = _$('#id' + pk + ' > .dpt-text.btn-dpt-edit')
+    if (btn_dpt_edit.length === 0) { btn_dpt_edit = _$('#id' + pk + ' > .dpt-actions-fixed > .btn-dpt-edit') }
+    btn_dpt_edit.first().trigger('click')
+  }
+  instance.waitHide = function () {
+    _$('#wait_message').addClass('displaynone')
+  }
+  instance.waitShow = function () {
+    _$('#wait_message').removeClass('displaynone')
+  }
+
+  instance.init = function () {
+    _$('.dpt-actions-fixed').first().css('opacity', '1')
+    editortype = window.ReadCookie('editortype')
+    if (editortype === null || editortype === '') {
+      editortype = 'textarea'
+      window.SetCookie('editortype', editortype, 30)
+    }
+    // editortype = "textarea";
+    instance.offClicks()
+    instance.onClicks()
+    instance.reloadFunctionsDraggables()
+
+    const href = location.href.split('#')
+    if (href.length === 2 && href[1] !== '') {
+      instance.triggerBtnDptEdit(href[1])
+    }
+    _$('main').click(function (event) {
+      if (event.target === this || event.target === this.firstElementChild) { instance.clearEditSelected() }
+    })
+    instance.waitHide()
+  }
+  instance.init()
+}
+
+_$(document).ready(function () {
+  if ($('.cpe').length > 0) {
+    window.DispositivoEdit()
+  }
+})
--- a/frontend/src/__apps/compilacao/js/old/compilacao_notas.js
+++ b/frontend/src/__apps/compilacao/js/old/compilacao_notas.js
@ -0,0 +1,136 @@
+
+const _$ = window.$
+
+function onEventsDneExec (pk, model) {
+  _$('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('')
+  })
+
+  if (model === 'nota') {
+    _$('#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)
+      })
+    })
+  } else if (model === 'vide') {
+    window.DispositivoSearch({
+      url_form: '/ta/search_form',
+      text_button: 'Definir Dispositivo'
+    })
+  }
+}
+
+function onSubmitEditNVForm (event) {
+  let url = ''
+  let model = 'nota'
+  let idEdit = null
+  let idDispositivo = _$('#id_dispositivo').val()
+
+  if (idDispositivo === undefined) { // trata-se de um vide
+    // _$('#idDispositivo_ref').remove()
+    idDispositivo = _$('#id_dispositivo_base').val()
+    model = 'vide'
+  }
+
+  idEdit = _$('#id_pk').val()
+  url = 'text/' + idDispositivo + '/' + model + '/'
+  if (idEdit === null || idEdit === '') {
+    url += 'create'
+  } else {
+    url += idEdit + '/edit'
+  }
+
+  // console.log(_$('#dne' + idDispositivo + ' form').serialize())
+
+  _$.post(url, _$('#dne' + idDispositivo + ' form').serialize(), function (data) {
+    if (typeof data === 'string') {
+      if (data.indexOf('<form') >= 0) {
+        _$('#dne' + idDispositivo + ' .dne-form').html(data)
+        onEventsDneExec(idDispositivo, model)
+      } else {
+        _$('#dne' + idDispositivo + ' .dne-form').closest('.dpt').html(data)
+        onReadyNotasVides()
+        try {
+          _$('html, body').animate({
+            scrollTop: _$('#dne' + idDispositivo).offset().top - window.innerHeight / 3
+          }, 300)
+        } catch (err) {
+        }
+      }
+    }
+  })
+}
+
+function onDelete (event) {
+  const model = _$(event).attr('model')
+
+  const idDispositivo = _$(event).closest('.dn').attr('pk')
+  const idDelete = _$(event).attr('pk')
+  const url = 'text/' + idDispositivo + '/' + model + '/' + idDelete + '/delete'
+
+  _$.get(url, function (data) {
+    _$('#dne' + idDispositivo + ' .dne-form').closest('.dpt').html(data)
+    onReadyNotasVides()
+  })
+}
+
+function getForm (_this) {
+  let url = ''
+  const 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('')
+  }
+
+  if (_this.className.indexOf('create') >= 0) {
+    idDispositivo = _$(_this).attr('pk')
+    url = 'text/' + idDispositivo + '/' + model + '/create'
+  } else if (_this.className.indexOf('edit') >= 0) {
+    const idEdit = _$(_this).attr('pk')
+    idDispositivo = _$(_this).closest('.dn').attr('pk')
+    url = 'text/' + idDispositivo + '/' + model + '/' + idEdit + '/edit'
+  }
+
+  _$('#dne' + idDispositivo).addClass('dne-nota')
+
+  _$.get(url).done(function (data) {
+    _$('#dne' + idDispositivo + ' .dne-form').html(data)
+    onEventsDneExec(idDispositivo, model)
+  }).fail(function () {
+    onReadyNotasVides()
+  })
+}
+
+function onReadyNotasVides () {
+  _$('.dne-nota').removeClass('dne-nota')
+  _$('.dne-form').html('')
+
+  _$('.dne .btn-action').off()
+  _$('.dn .btn-action').off()
+
+  _$('.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 () {
+    onDelete(this)
+  })
+}
+
+export default {
+  onEventsDneExec,
+  onSubmitEditNVForm,
+  onDelete,
+  onReadyNotasVides
+}
--- a/frontend/src/__apps/compilacao/js/old/compilacao_view.js
+++ b/frontend/src/__apps/compilacao/js/old/compilacao_view.js
@ -0,0 +1,169 @@
+const _$ = window.$
+const JsDiff = require('diff')
+
+function isElementInViewport (el) {
+  if (typeof jQuery === 'function' && el instanceof jQuery) {
+    el = el[0]
+  }
+
+  const rect = el.getBoundingClientRect()
+
+  return (
+    rect.top >= 0 &&
+    rect.left >= 0 &&
+    rect.bottom <=
+      (window.innerHeight || document.documentElement.clientHeight) &&
+    rect.right <= (window.innerWidth || document.documentElement.clientWidth)
+  )
+}
+
+function textoMultiVigente (item, diff) {
+  let elv = null
+  const ldpts = _$('.dptt')
+  for (let i = 0; i < ldpts.length; i++) {
+    if (_$(ldpts[i]).hasClass('displaynone')) continue
+    if (isElementInViewport(ldpts[i])) {
+      if (i + 1 < ldpts.length) elv = ldpts[i + 1]
+      else {
+        elv = ldpts[i]
+      }
+      break
+    }
+  }
+
+  _$('.cp .tipo-vigencias a').removeClass('active')
+  _$(item).addClass('active')
+  _$('.dptt.desativado').removeClass('displaynone')
+  _$('.desativado > .dn').removeClass('displaynone')
+  _$('.desativado > .dpt-img').removeClass('displaynone')
+  _$('.dptt.revogado').removeClass('displaynone')
+  _$('.dtxt').removeClass('displaynone')
+  _$('.dtxt.diff').remove()
+  _$('.nota-alteracao').removeClass('displaynone')
+
+  if (diff) {
+    _$('.dtxt[id^="da"').each(function () {
+      if (_$(this)
+        .html()
+        .search(/<\/\w+>/g) > 0) {
+        return
+      }
+
+      const pk = _$(this).attr('pk')
+      const pks = _$(this).attr('pks')
+
+      const a = _$('#d' + pks)
+        .contents()
+        .filter(function () {
+          return this.nodeType === Node.TEXT_NODE
+        })
+      const b = _$('#da' + pk)
+        .contents()
+        .filter(function () {
+          return this.nodeType === Node.TEXT_NODE
+        })
+
+      const diff = JsDiff.diffWordsWithSpace(_$(a).text(), _$(b).text())
+
+      if (diff.length > 0) {
+        _$('#d' + pks)
+          .closest('.desativado')
+          .addClass('displaynone')
+
+        const clone = _$('#da' + pk).clone()
+        _$('#da' + pk).after(clone)
+        _$('#da' + pk).addClass('displaynone')
+        _$(clone)
+          .addClass('diff')
+          .html('')
+
+        diff.forEach(function (part) {
+          // let color = part.added ? '#018' : part.removed ? '#faa' : ''
+
+          const span = document.createElement('span')
+
+          let value = part.value
+
+          if (part.removed) {
+            _$(span).addClass('desativado')
+            value += ' '
+          } else if (part.added) {
+            _$(span).addClass('added')
+          }
+
+          span.appendChild(document.createTextNode(value))
+          _$(clone).append(span)
+        })
+      }
+    })
+    // textoVigente(item, true)
+  }
+
+  if (elv) {
+    try {
+      _$('html, body').animate(
+        {
+          scrollTop:
+            _$(elv)
+              .parent()
+              .offset().top - 60
+        },
+        0
+      )
+    } catch (err) {
+      // console.log(err)
+    }
+  }
+}
+
+function textoVigente (item, link) {
+  let elv = null
+  const ldpts = _$('.dptt')
+  for (let i = 0; i < ldpts.length; i++) {
+    if (_$(ldpts[i]).hasClass('displaynone')) continue
+    if (isElementInViewport(ldpts[i])) {
+      if (i + 1 < ldpts.length) elv = ldpts[i + 1]
+      else {
+        elv = ldpts[i]
+      }
+      break
+    }
+  }
+
+  _$('.cp .tipo-vigencias a').removeClass('active')
+  _$(item).addClass('active')
+  _$('.dptt.desativado').addClass('displaynone')
+  _$('.desativado > .dn').addClass('displaynone')
+  _$('.desativado > .dpt-img').addClass('displaynone')
+  _$('.nota-alteracao').removeClass('displaynone')
+  _$('.dptt.revogado').removeClass('displaynone')
+  if (!link) _$('.nota-alteracao').addClass('displaynone')
+
+  if (elv) {
+    try {
+      _$('html, body').animate(
+        {
+          scrollTop:
+            _$(elv)
+              .parent()
+              .offset().top - 60
+        },
+        0
+      )
+    } catch (err) {
+      // console.log(err)
+    }
+  }
+}
+
+function textoVigenteSemRevogados (item, link) {
+  textoVigente(item, link)
+  _$('.dptt.revogado').addClass('displaynone')
+}
+
+export default {
+  isElementInViewport,
+  textoMultiVigente,
+  textoVigente,
+  textoVigenteSemRevogados
+}
--- a/frontend/src/__apps/compilacao/main.js
+++ b/frontend/src/__apps/compilacao/main.js
@ -0,0 +1,18 @@
+// TODO: migrar compilacao para VueJs
+
+import './scss/compilacao.scss'
+
+import compilacao from './js/old/compilacao'
+import compilacaoView from './js/old/compilacao_view'
+import compilacaoNotas from './js/old/compilacao_notas'
+
+import './js/old/compilacao_edit'
+
+_.forEach(_.merge(_.merge(compilacao, compilacaoNotas), compilacaoView), function (func, key) {
+  window[key] = func
+})
+
+$(document).ready(function () {
+  window.InitViewTAs()
+  window.onReadyNotasVides()
+})
--- a/frontend/src/__apps/compilacao/scss/compilacao.scss
+++ b/frontend/src/__apps/compilacao/scss/compilacao.scss
--- a/frontend/src/__apps/index.js
+++ b/frontend/src/__apps/index.js
@ -0,0 +1,7 @@
+/*
+Pasta apps...
+
+- pensada para possuir módulos (entry_points) independentes
+que se reflitam estruturalmente os apps do backend.
+
+*/
--- a/frontend/src/__apps/painel/main.js
+++ b/frontend/src/__apps/painel/main.js
@ -0,0 +1 @@
+import './scss/painel.scss'
--- a/frontend/src/__apps/painel/scss/painel.scss
+++ b/frontend/src/__apps/painel/scss/painel.scss
@ -0,0 +1,43 @@
+
+.painel-principal {
+  background: #1c1b1b;
+  font-family: Verdana;
+  font-size: x-large;
+  .text-title {
+    color: #4fa64d;
+    margin: 0.5rem;
+	font-weight: bold;
+  }
+  .text-subtitle {
+    color: #459170;
+	font-weight: bold;
+  }
+  .data-hora {
+    font-size: 180%;
+  }
+
+  .text-value {
+    color: white;
+  }
+
+  .logo-painel {
+    max-width: 100%;
+  }
+  .painels {
+    flex-wrap: wrap;
+  }
+  .painel{
+    margin-top: 1rem;
+    table {
+      width: 100%;
+    }
+    h2 {
+      margin-bottom: 0.5rem;
+    }
+    #votacao, #oradores_list {
+      text-align: left;
+      display: inline-block;
+      margin-bottom: 1rem;
+    }
+  }
+}
--- a/frontend/src/__apps/parlamentar/main.js
+++ b/frontend/src/__apps/parlamentar/main.js
@ -0,0 +1,115 @@
+import './scss/parlamentar.scss'
+import Vue from 'vue'
+import { FormSelectPlugin } from 'bootstrap-vue'
+import axios from 'axios'
+
+axios.defaults.xsrfCookieName = 'csrftoken'
+axios.defaults.xsrfHeaderName = 'X-CSRFToken'
+
+Vue.use(FormSelectPlugin)
+
+const v = new Vue({ // eslint-disable-line
+  delimiters: ['[[', ']]'],
+  el: '#app2',
+  data () {
+    return {
+      nome_pesquisa: '',
+      is_pesquisa: false,
+      legislatura_selecionada: '',
+      legislaturas: [],
+      parlamentares: [],
+      visible_parlamentares: [],
+      size_parlamentares: 0,
+      filter_ativo: false,
+      filter_titular: ''
+    }
+  },
+
+  watch: {
+    nome_pesquisa: function (val) {
+      this.debouncepesquisaParlamentar()
+    }
+  },
+
+  created () {
+    this.debouncepesquisaParlamentar = _.debounce(this.pesquisaParlamentar, 500)
+  },
+
+  methods: {
+    getParlamentares (event) {
+      if (this.legislatura_selecionada || this.legislatura_selecionada.toString() === '0') {
+        axios.get('/api/parlamentares/legislatura/' + this.legislatura_selecionada + '/parlamentares/?get_all=true')
+          .then(response => {
+            this.parlamentares = response.data
+            this.visible_parlamentares = this.parlamentares
+            this.size_parlamentares = this.visible_parlamentares.length
+            this.checkTitularAtivo()
+          })
+          .catch(error => {
+            console.error('Ocorreu um erro ao obter os dados de parlamentares:' + error)
+          })
+      }
+    },
+
+    pesquisaParlamentar (event) {
+      axios.get('/api/parlamentares/parlamentar/search_parlamentares/', {
+        params: { nome_parlamentar: this.nome_pesquisa }
+      })
+        .then(response => {
+          this.parlamentares = response.data
+          this.visible_parlamentares = this.parlamentares
+          this.size_parlamentares = this.visible_parlamentares.length
+        })
+        .catch(error => {
+          console.error('Erro ao procurar parlamentar:' + error)
+        })
+    },
+
+    checkTitularAtivo (event) {
+      this.visible_parlamentares = this.parlamentares
+      if (this.filter_ativo) {
+        this.visible_parlamentares = this.visible_parlamentares.filter((v) => v.ativo)
+      }
+      if (this.filter_titular) {
+        this.visible_parlamentares = this.visible_parlamentares.filter((v) => v.titular === 'Sim')
+      }
+      this.size_parlamentares = this.visible_parlamentares.length
+    },
+
+    pesquisaChange (event) {
+      this.is_pesquisa = !this.is_pesquisa
+      this.filter_ativo = false
+      if (this.is_pesquisa) {
+        this.parlamentares = []
+      } else {
+        this.getParlamentares()
+      }
+    }
+  },
+
+  mounted () {
+    axios.get('/api/parlamentares/legislatura/?get_all=true')
+      .then(response => {
+        this.legislaturas = response.data
+
+        var currentYear = new Date().getFullYear()
+
+        var reducer = (acc, legislatura) => {
+          var anoInicio = new Date(legislatura.data_inicio + ' 00:00').getFullYear()
+          var anoFim = new Date(legislatura.data_fim + ' 00:00').getFullYear()
+          if (currentYear >= anoInicio && currentYear <= anoFim) {
+            acc = legislatura.id
+          }
+          return acc
+        }
+
+        this.legislatura_selecionada = this.legislaturas.reduce(reducer, '')
+      })
+      .then(response => {
+        this.getParlamentares()
+      })
+      .catch(err => {
+        console.error('Ocorreu um erro ao obter os dados de legislação: ' + err)
+      })
+  }
+})
--- a/frontend/src/__apps/parlamentar/scss/parlamentar.scss
+++ b/frontend/src/__apps/parlamentar/scss/parlamentar.scss
--- a/frontend/src/__global/js/functions.js
+++ b/frontend/src/__global/js/functions.js
@ -0,0 +1,164 @@
+
+window.refreshDatePicker = function () {
+  $.datepicker.setDefaults($.datepicker.regional['pt-BR'])
+  $('.dateinput').datepicker()
+
+  const dateinput = document.querySelectorAll('.dateinput')
+  _.each(dateinput, function (input, index) {
+    input.setAttribute('autocomplete', 'off')
+  })
+}
+
+window.getCookie = function (name) {
+  var cookieValue = null
+  if (document.cookie && document.cookie !== '') {
+    var cookies = document.cookie.split(';')
+    for (var i = 0; i < cookies.length; i++) {
+      var cookie = $.trim(cookies[i])
+      if (cookie.substring(0, name.length + 1) === name + '=') {
+        cookieValue = decodeURIComponent(cookie.substring(name.length + 1))
+        break
+      }
+    }
+  }
+  return cookieValue
+}
+
+window.autorModal = function () {
+  $(function () {
+    var dialog = $('#modal_autor').dialog({
+      autoOpen: false,
+      modal: true,
+      width: 500,
+      height: 340,
+      show: {
+        effect: 'blind',
+        duration: 500
+      },
+      hide: {
+        effect: 'explode',
+        duration: 500
+      }
+    })
+
+    $('#button-id-limpar').click(function () {
+      $('#nome_autor').text('')
+
+      function clean_if_exists (fieldname) {
+        if ($(fieldname).length > 0) {
+          $(fieldname).val('')
+        }
+      }
+
+      clean_if_exists('#id_autor')
+      clean_if_exists('#id_autoria__autor')
+      clean_if_exists('#id_autorianorma__autor')
+    })
+
+    $('#button-id-pesquisar').click(function () {
+      $('#q').val('')
+      $('#div-resultado')
+        .children()
+        .remove()
+      $('#modal_autor').dialog('open')
+      $('#selecionar').attr('hidden', 'hidden')
+    })
+
+    $('#pesquisar').click(function () {
+      var name_in_query = $('#q').val()
+      // var q_0 = "q_0=nome__icontains"
+      // var q_1 = name_in_query
+      // query = q_1
+
+      $.get('/api/autor?q=' + name_in_query, function (data) {
+        $('#div-resultado')
+          .children()
+          .remove()
+        if (data.pagination.total_entries === 0) {
+          $('#selecionar').attr('hidden', 'hidden')
+          $('#div-resultado').html(
+            "<span class='alert'><strong>Nenhum resultado</strong></span>"
+          )
+          return
+        }
+
+        var select = $(
+          '<select id="resultados" style="min-width: 90%; max-width:90%;" size="5"/>'
+        )
+
+        data.results.forEach(function (item) {
+          select.append(
+            $('<option>')
+              .attr('value', item.value)
+              .text(item.text)
+          )
+        })
+
+        $('#div-resultado')
+          .append('<br/>')
+          .append(select)
+        $('#selecionar').removeAttr('hidden', 'hidden')
+
+        if (data.pagination.total_pages > 1) {
+          $('#div-resultado').prepend(
+            '<span><br/>Mostrando 10 primeiros autores relativos a sua busca.<br/></span>'
+          )
+        }
+
+        $('#selecionar').click(function () {
+          const res = $('#resultados option:selected')
+          const id = res.val()
+          const nome = res.text()
+
+          $('#nome_autor').text(nome)
+
+          // MateriaLegislativa pesquisa Autor via a tabela Autoria
+          if ($('#id_autoria__autor').length) {
+            $('#id_autoria__autor').val(id)
+          }
+          // Protocolo pesquisa a própria tabela de Autor
+          if ($('#id_autor').length) {
+            $('#id_autor').val(id)
+          }
+          // MateriaLegislativa pesquisa Autor via a tabela AutoriaNorma
+          if ($('#id_autorianorma__autor').length) {
+            $('#id_autorianorma__autor').val(id)
+          }
+
+          dialog.dialog('close')
+        })
+      })
+    })
+  })
+
+  /* function get_nome_autor(fieldname) {
+    if ($(fieldname).length > 0) { // se campo existir
+      if ($(fieldname).val() != "") { // e não for vazio
+        var id = $(fieldname).val();
+        $.get("/proposicao/get-nome-autor?id=" + id, function(data, status){
+            $("#nome_autor").text(data.nome);
+        });
+      }
+    }
+  }
+
+  get_nome_autor("#id_autor");
+  get_nome_autor("#id_autoria__autor"); */
+}
+
+window.refreshMask = function () {
+  $('.telefone').mask('(99) 9999-9999', { placeholder: '(__) ____ -____' })
+  $('.cpf').mask('000.000.000-00', { placeholder: '___.___.___-__' })
+  $('.cep').mask('00000-000', { placeholder: '_____-___' })
+  $('.rg').mask('0.000.000', { placeholder: '_.___.___' })
+  $('.titulo_eleitor').mask('0000.0000.0000.0000', {
+    placeholder: '____.____.____.____'
+  })
+  $('.dateinput').mask('00/00/0000', { placeholder: '__/__/____' })
+  $('.hora, input[name=hora_inicio], input[name=hora_fim], input[name=hora]').mask('00:00', {
+    placeholder: 'hh:mm'
+  })
+  $('.hora_hms').mask('00:00:00', { placeholder: 'hh:mm:ss' })
+  $('.timeinput').mask('00:00:00', { placeholder: 'hh:mm:ss' })
+  $('.cronometro').mask('00:00:00', { placeholder: 'hh:mm:ss' })
+}
--- a/frontend/src/__global/js/image_cropping/css/Jcrop.gif
+++ b/frontend/src/__global/js/image_cropping/css/Jcrop.gif
--- a/frontend/src/__global/js/image_cropping/css/image_cropping.css
+++ b/frontend/src/__global/js/image_cropping/css/image_cropping.css
@ -0,0 +1,9 @@
+div.jcrop-image.size-warning .jcrop-hline,
+div.jcrop-image.size-warning .jcrop-vline {
+  border: 1px solid red;
+  background: none;
+}
+body.change-form .jcrop-holder + .help,
+body.change-form .allow-fullsize + .help { clear: left; }
+body.change-form .jcrop-holder { float:left; }
+div.allow-fullsize { padding: 5px 0 0 10px; }
--- a/frontend/src/__global/js/image_cropping/css/jquery.Jcrop.css
+++ b/frontend/src/__global/js/image_cropping/css/jquery.Jcrop.css
@ -0,0 +1,167 @@
+/* jquery.Jcrop.css v0.9.12 - MIT License */
+/*
+  The outer-most container in a typical Jcrop instance
+  If you are having difficulty with formatting related to styles
+  on a parent element, place any fixes here or in a like selector
+
+  You can also style this element if you want to add a border, etc
+  A better method for styling can be seen below with .jcrop-light
+  (Add a class to the holder and style elements for that extended class)
+*/
+.jcrop-holder {
+  direction: ltr;
+  text-align: left;
+  /* IE10 touch compatibility */
+  -ms-touch-action: none;
+}
+/* Selection Border */
+.jcrop-vline,
+.jcrop-hline {
+  background: #ffffff url("Jcrop.gif");
+  font-size: 0;
+  position: absolute;
+}
+.jcrop-vline {
+  height: 100%;
+  width: 1px !important;
+}
+.jcrop-vline.right {
+  right: 0;
+}
+.jcrop-hline {
+  height: 1px !important;
+  width: 100%;
+}
+.jcrop-hline.bottom {
+  bottom: 0;
+}
+/* Invisible click targets */
+.jcrop-tracker {
+  height: 100%;
+  width: 100%;
+  /* "turn off" link highlight */
+  -webkit-tap-highlight-color: transparent;
+  /* disable callout, image save panel */
+  -webkit-touch-callout: none;
+  /* disable cut copy paste */
+  -webkit-user-select: none;
+}
+/* Selection Handles */
+.jcrop-handle {
+  background-color: #333333;
+  border: 1px #eeeeee solid;
+  width: 7px;
+  height: 7px;
+  font-size: 1px;
+}
+.jcrop-handle.ord-n {
+  left: 50%;
+  margin-left: -4px;
+  margin-top: -4px;
+  top: 0;
+}
+.jcrop-handle.ord-s {
+  bottom: 0;
+  left: 50%;
+  margin-bottom: -4px;
+  margin-left: -4px;
+}
+.jcrop-handle.ord-e {
+  margin-right: -4px;
+  margin-top: -4px;
+  right: 0;
+  top: 50%;
+}
+.jcrop-handle.ord-w {
+  left: 0;
+  margin-left: -4px;
+  margin-top: -4px;
+  top: 50%;
+}
+.jcrop-handle.ord-nw {
+  left: 0;
+  margin-left: -4px;
+  margin-top: -4px;
+  top: 0;
+}
+.jcrop-handle.ord-ne {
+  margin-right: -4px;
+  margin-top: -4px;
+  right: 0;
+  top: 0;
+}
+.jcrop-handle.ord-se {
+  bottom: 0;
+  margin-bottom: -4px;
+  margin-right: -4px;
+  right: 0;
+}
+.jcrop-handle.ord-sw {
+  bottom: 0;
+  left: 0;
+  margin-bottom: -4px;
+  margin-left: -4px;
+}
+/* Dragbars */
+.jcrop-dragbar.ord-n,
+.jcrop-dragbar.ord-s {
+  height: 7px;
+  width: 100%;
+}
+.jcrop-dragbar.ord-e,
+.jcrop-dragbar.ord-w {
+  height: 100%;
+  width: 7px;
+}
+.jcrop-dragbar.ord-n {
+  margin-top: -4px;
+}
+.jcrop-dragbar.ord-s {
+  bottom: 0;
+  margin-bottom: -4px;
+}
+.jcrop-dragbar.ord-e {
+  margin-right: -4px;
+  right: 0;
+}
+.jcrop-dragbar.ord-w {
+  margin-left: -4px;
+}
+/* The "jcrop-light" class/extension */
+.jcrop-light .jcrop-vline,
+.jcrop-light .jcrop-hline {
+  background: #ffffff;
+  filter: alpha(opacity=70) !important;
+  opacity: .70!important;
+}
+.jcrop-light .jcrop-handle {
+  -moz-border-radius: 3px;
+  -webkit-border-radius: 3px;
+  background-color: #000000;
+  border-color: #ffffff;
+  border-radius: 3px;
+}
+/* The "jcrop-dark" class/extension */
+.jcrop-dark .jcrop-vline,
+.jcrop-dark .jcrop-hline {
+  background: #000000;
+  filter: alpha(opacity=70) !important;
+  opacity: 0.7 !important;
+}
+.jcrop-dark .jcrop-handle {
+  -moz-border-radius: 3px;
+  -webkit-border-radius: 3px;
+  background-color: #ffffff;
+  border-color: #000000;
+  border-radius: 3px;
+}
+/* Simple macro to turn off the antlines */
+.solid-line .jcrop-vline,
+.solid-line .jcrop-hline {
+  background: #ffffff;
+}
+/* Fix for twitter bootstrap et al. */
+.jcrop-holder img,
+img.jcrop-preview {
+  max-width: none;
+}
--- a/frontend/src/__global/js/image_cropping/css/jquery.Jcrop.min.css
+++ b/frontend/src/__global/js/image_cropping/css/jquery.Jcrop.min.css
@ -0,0 +1,29 @@
+/* jquery.Jcrop.min.css v0.9.12 (build:20130521) */
+.jcrop-holder{-ms-touch-action:none;direction:ltr;text-align:left;}
+.jcrop-vline,.jcrop-hline{background:#FFF url(Jcrop.gif);font-size:0;position:absolute;}
+.jcrop-vline{height:100%;width:1px!important;}
+.jcrop-vline.right{right:0;}
+.jcrop-hline{height:1px!important;width:100%;}
+.jcrop-hline.bottom{bottom:0;}
+.jcrop-tracker{-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;height:100%;width:100%;}
+.jcrop-handle{background-color:#333;border:1px #EEE solid;font-size:1px;height:7px;width:7px;}
+.jcrop-handle.ord-n{left:50%;margin-left:-4px;margin-top:-4px;top:0;}
+.jcrop-handle.ord-s{bottom:0;left:50%;margin-bottom:-4px;margin-left:-4px;}
+.jcrop-handle.ord-e{margin-right:-4px;margin-top:-4px;right:0;top:50%;}
+.jcrop-handle.ord-w{left:0;margin-left:-4px;margin-top:-4px;top:50%;}
+.jcrop-handle.ord-nw{left:0;margin-left:-4px;margin-top:-4px;top:0;}
+.jcrop-handle.ord-ne{margin-right:-4px;margin-top:-4px;right:0;top:0;}
+.jcrop-handle.ord-se{bottom:0;margin-bottom:-4px;margin-right:-4px;right:0;}
+.jcrop-handle.ord-sw{bottom:0;left:0;margin-bottom:-4px;margin-left:-4px;}
+.jcrop-dragbar.ord-n,.jcrop-dragbar.ord-s{height:7px;width:100%;}
+.jcrop-dragbar.ord-e,.jcrop-dragbar.ord-w{height:100%;width:7px;}
+.jcrop-dragbar.ord-n{margin-top:-4px;}
+.jcrop-dragbar.ord-s{bottom:0;margin-bottom:-4px;}
+.jcrop-dragbar.ord-e{margin-right:-4px;right:0;}
+.jcrop-dragbar.ord-w{margin-left:-4px;}
+.jcrop-light .jcrop-vline,.jcrop-light .jcrop-hline{background:#FFF;filter:alpha(opacity=70)!important;opacity:.70!important;}
+.jcrop-light .jcrop-handle{-moz-border-radius:3px;-webkit-border-radius:3px;background-color:#000;border-color:#FFF;border-radius:3px;}
+.jcrop-dark .jcrop-vline,.jcrop-dark .jcrop-hline{background:#000;filter:alpha(opacity=70)!important;opacity:.7!important;}
+.jcrop-dark .jcrop-handle{-moz-border-radius:3px;-webkit-border-radius:3px;background-color:#FFF;border-color:#000;border-radius:3px;}
+.solid-line .jcrop-vline,.solid-line .jcrop-hline{background:#FFF;}
+.jcrop-holder img,img.jcrop-preview{max-width:none;}
--- a/frontend/src/__global/js/image_cropping/image_cropping.js
+++ b/frontend/src/__global/js/image_cropping/image_cropping.js
@ -0,0 +1,202 @@
+/* eslint-disable */
+var image_cropping = (function ($) {
+    var jcrop = {}
+    function init() {
+      $('input.image-ratio').each(function() {
+        var $this = $(this),
+        // find the image field corresponding to this cropping value
+        // by stripping the last part of our id and appending the image field name
+            field = $this.attr('name').replace($this.data('my-name'), $this.data('image-field')),
+
+        // there should only be one file field we're referencing but in special cases
+        // there can be several. Deal with it gracefully.
+            $image_input = $('input.crop-thumb[data-field-name=' + field + ']:first')
+
+        // skip this image if it's empty and hide the whole field, within admin and by itself
+        if (!$image_input.length || $image_input.data('thumbnail-url') === undefined) {
+          $this.hide().parents('div.form-row:first').hide()
+          return
+        }
+        // check if the image field should be hidden
+        if ($image_input.data('hide-field')) {
+          $image_input.hide().parents('div.form-row:first').hide()
+        }
+
+        var image_id = $this.attr('id') + '-image',
+            org_width = $image_input.data('org-width'),
+            org_height = $image_input.data('org-height'),
+            min_width = $this.data('min-width'),
+            min_height = $this.data('min-height')
+
+        var is_image_portrait = (org_height > org_width)
+        var is_select_portrait = (min_height > min_width)
+
+        if ($this.data('adapt-rotation') === true) {
+            if (is_image_portrait != is_select_portrait) {
+                // cropping height/width need to be switched, picture is in portrait mode
+                var x = min_width
+                min_width = min_height
+                min_height = x
+            }
+        }
+
+        var $image = $('<img>', {
+          'id': image_id,
+          'src': $image_input.data('thumbnail-url')
+        })
+
+        var options = {
+          minSize: [5, 5],
+          keySupport: false,
+          trueSize: [org_width, org_height],
+          onSelect: update_selection($this),
+          addClass: ($this.data('size-warning') && ((org_width < min_width) || (org_height < min_height))) ? 'size-warning jcrop-image': 'jcrop-image'
+        }
+        if ($this.data('ratio')) {
+          options['aspectRatio'] = $this.data('ratio')
+        }
+        if ($this.data('box_max_width')) {
+          options['boxWidth'] = $this.data('box_max_width')
+        }
+        if ($this.data('box_max_height')) {
+          options['boxHeight'] = $this.data('box_max_height')
+        }
+
+        var cropping_disabled = false
+        if($this.val()[0] == "-"){
+          cropping_disabled = true
+          $this.val($this.val().substr(1))
+        }
+
+        // is the image bigger than the minimal cropping values?
+        // otherwise lock cropping area on full image
+        var initial
+        if ($this.val()) {
+          initial = initial_cropping($this.val())
+        } else {
+
+          initial = max_cropping(min_width, min_height, org_width, org_height)
+
+            // set cropfield to initial value
+          $this.val(initial.join(','))
+        }
+
+        $.extend(options, {setSelect: initial})
+
+        // hide the input field, show image to crop instead
+        $this.hide().after($image)
+
+        $('#' + image_id).Jcrop(options, function(){jcrop[image_id]=this;})
+
+        if ($this.data('allow-fullsize') === true) {
+          if(cropping_disabled){
+            jcrop[image_id].release()
+            $this.val('-'+$this.val())
+          }
+          var label = 'allow-fullsize-'+image_id
+          var checked = cropping_disabled ? '' : ' checked="checked"'
+          var fullsize = $('<div class="field-box allow-fullsize">' +
+                           '<input type="checkbox" id="'+label+'" name="'+label+'"'+checked+'></div>')
+
+          if ($this.parent().find('.help').length) {
+            fullsize.insertBefore($this.parent().find('.help'))
+          } else {
+            fullsize.appendTo($this.parent())
+          }
+
+          $('#'+label).click(function(){
+            if (cropping_disabled === true){
+              $this.val($this.val().substr(1))
+              jcrop[image_id].setSelect($this.val().split(','))
+              cropping_disabled = false
+            } else {
+              $this.val('-'+$this.val())
+              jcrop[image_id].release()
+              cropping_disabled = true
+            }
+          })
+          $this.parent().find('.jcrop-tracker').mousedown(function(){
+              if (cropping_disabled){
+                $('#'+label).attr('checked','checked')
+                cropping_disabled = false
+              }
+          })
+        }
+      })
+    }
+
+    function max_cropping (width, height, image_width, image_height) {
+      var ratio = width/height
+      var offset
+
+      if (image_width < image_height * ratio) {
+        // width fits fully, height needs to be cropped
+        offset = Math.round((image_height-(image_width/ratio))/2)
+        return [0, offset, image_width, image_height - offset]
+      }
+      // height fits fully, width needs to be cropped
+      offset = Math.round((image_width-(image_height * ratio))/2)
+      return [offset, 0, image_width - offset, image_height]
+    }
+
+    function initial_cropping (val) {
+      if (val === '') { return; }
+      var s = val.split(',')
+      return [
+        parseInt(s[0], 10),
+        parseInt(s[1], 10),
+        parseInt(s[2], 10),
+        parseInt(s[3], 10)
+      ]
+    }
+
+    function _update_selection (sel, $crop_field) {
+      if ($crop_field.data('size-warning')) {
+        crop_indication(sel, $crop_field)
+      }
+      $crop_field.val(new Array(
+        Math.round(sel.x),
+        Math.round(sel.y),
+        Math.round(sel.x2),
+        Math.round(sel.y2)
+      ).join(','))
+    }
+
+    function update_selection ($crop_field) {
+      return function(sel) { _update_selection(sel, $crop_field); }
+    }
+
+    function crop_indication (sel, $crop_field) {
+      // indicate if cropped area gets smaller than the specified minimal cropping
+      var $jcrop_holder = $crop_field.siblings('.jcrop-holder')
+      var min_width = $crop_field.data("min-width")
+      var min_height = $crop_field.data("min-height")
+      if ((sel.w < min_width) || (sel.h < min_height)) {
+        $jcrop_holder.addClass('size-warning')
+      } else {
+        $jcrop_holder.removeClass('size-warning')
+      }
+    }
+
+    return {
+      init: init,
+      jcrop: jcrop
+    }
+
+})(jQuery)
+window.image_cropping = image_cropping
+jQuery(function() {
+  /*var image_cropping_jquery_url = jQuery('.image-ratio:first').data('jquery-url')
+  if (image_cropping_jquery_url == "None") {
+    // JQUERY_URL is set to `none`. We therefore use the existing version of
+    // jQuery and leave it otherwise untouched.
+    jQ = jQuery
+  } else {
+    // JQUERY_URL is specified. Image Cropping's jQuery is included in no conflict mode,
+    jQ = jQuery.noConflict(true)
+  }
+  jQ(function() {image_cropping.init();});*/
+  $(function() {
+    image_cropping.init()
+  })
+})
--- a/frontend/src/__global/js/image_cropping/index.js
+++ b/frontend/src/__global/js/image_cropping/index.js
@ -0,0 +1,6 @@
+/* eslint-disable */ 
+import './css/jquery.Jcrop.min.css'
+import './css/image_cropping.css'
+
+import './js/jquery.Jcrop.min'
+import './image_cropping'
--- a/frontend/src/__global/js/image_cropping/js/jquery.Jcrop.js
+++ b/frontend/src/__global/js/image_cropping/js/jquery.Jcrop.js
--- a/frontend/src/__global/js/image_cropping/js/jquery.Jcrop.min.js
+++ b/frontend/src/__global/js/image_cropping/js/jquery.Jcrop.min.js
@ -0,0 +1,23 @@
+/* eslint-disable */ 
+/**
+ * jquery.Jcrop.min.js v0.9.12 (build:20130202)
+ * jQuery Image Cropping Plugin - released under MIT License
+ * Copyright (c) 2008-2013 Tapmodo Interactive LLC
+ * https://github.com/tapmodo/Jcrop
+ */
+(function(a){a.Jcrop=function(b,c){function i(a){return Math.round(a)+"px"}function j(a){return d.baseClass+"-"+a}function k(){return a.fx.step.hasOwnProperty("backgroundColor")}function l(b){var c=a(b).offset();return[c.left,c.top]}function m(a){return[a.pageX-e[0],a.pageY-e[1]]}function n(b){typeof b!="object"&&(b={}),d=a.extend(d,b),a.each(["onChange","onSelect","onRelease","onDblClick"],function(a,b){typeof d[b]!="function"&&(d[b]=function(){})})}function o(a,b,c){e=l(D),bc.setCursor(a==="move"?a:a+"-resize");if(a==="move")return bc.activateHandlers(q(b),v,c);var d=_.getFixed(),f=r(a),g=_.getCorner(r(f));_.setPressed(_.getCorner(f)),_.setCurrent(g),bc.activateHandlers(p(a,d),v,c)}function p(a,b){return function(c){if(!d.aspectRatio)switch(a){case"e":c[1]=b.y2;break;case"w":c[1]=b.y2;break;case"n":c[0]=b.x2;break;case"s":c[0]=b.x2}else switch(a){case"e":c[1]=b.y+1;break;case"w":c[1]=b.y+1;break;case"n":c[0]=b.x+1;break;case"s":c[0]=b.x+1}_.setCurrent(c),bb.update()}}function q(a){var b=a;return bd.watchKeys
+(),function(a){_.moveOffset([a[0]-b[0],a[1]-b[1]]),b=a,bb.update()}}function r(a){switch(a){case"n":return"sw";case"s":return"nw";case"e":return"nw";case"w":return"ne";case"ne":return"sw";case"nw":return"se";case"se":return"nw";case"sw":return"ne"}}function s(a){return function(b){return d.disabled?!1:a==="move"&&!d.allowMove?!1:(e=l(D),W=!0,o(a,m(b)),b.stopPropagation(),b.preventDefault(),!1)}}function t(a,b,c){var d=a.width(),e=a.height();d>b&&b>0&&(d=b,e=b/a.width()*a.height()),e>c&&c>0&&(e=c,d=c/a.height()*a.width()),T=a.width()/d,U=a.height()/e,a.width(d).height(e)}function u(a){return{x:a.x*T,y:a.y*U,x2:a.x2*T,y2:a.y2*U,w:a.w*T,h:a.h*U}}function v(a){var b=_.getFixed();b.w>d.minSelect[0]&&b.h>d.minSelect[1]?(bb.enableHandles(),bb.done()):bb.release(),bc.setCursor(d.allowSelect?"crosshair":"default")}function w(a){if(d.disabled)return!1;if(!d.allowSelect)return!1;W=!0,e=l(D),bb.disableHandles(),bc.setCursor("crosshair");var b=m(a);return _.setPressed(b),bb.update(),bc.activateHandlers(x,v,a.type.substring
+(0,5)==="touch"),bd.watchKeys(),a.stopPropagation(),a.preventDefault(),!1}function x(a){_.setCurrent(a),bb.update()}function y(){var b=a("<div></div>").addClass(j("tracker"));return g&&b.css({opacity:0,backgroundColor:"white"}),b}function be(a){G.removeClass().addClass(j("holder")).addClass(a)}function bf(a,b){function t(){window.setTimeout(u,l)}var c=a[0]/T,e=a[1]/U,f=a[2]/T,g=a[3]/U;if(X)return;var h=_.flipCoords(c,e,f,g),i=_.getFixed(),j=[i.x,i.y,i.x2,i.y2],k=j,l=d.animationDelay,m=h[0]-j[0],n=h[1]-j[1],o=h[2]-j[2],p=h[3]-j[3],q=0,r=d.swingSpeed;c=k[0],e=k[1],f=k[2],g=k[3],bb.animMode(!0);var s,u=function(){return function(){q+=(100-q)/r,k[0]=Math.round(c+q/100*m),k[1]=Math.round(e+q/100*n),k[2]=Math.round(f+q/100*o),k[3]=Math.round(g+q/100*p),q>=99.8&&(q=100),q<100?(bh(k),t()):(bb.done(),bb.animMode(!1),typeof b=="function"&&b.call(bs))}}();t()}function bg(a){bh([a[0]/T,a[1]/U,a[2]/T,a[3]/U]),d.onSelect.call(bs,u(_.getFixed())),bb.enableHandles()}function bh(a){_.setPressed([a[0],a[1]]),_.setCurrent([a[2],
+a[3]]),bb.update()}function bi(){return u(_.getFixed())}function bj(){return _.getFixed()}function bk(a){n(a),br()}function bl(){d.disabled=!0,bb.disableHandles(),bb.setCursor("default"),bc.setCursor("default")}function bm(){d.disabled=!1,br()}function bn(){bb.done(),bc.activateHandlers(null,null)}function bo(){G.remove(),A.show(),A.css("visibility","visible"),a(b).removeData("Jcrop")}function bp(a,b){bb.release(),bl();var c=new Image;c.onload=function(){var e=c.width,f=c.height,g=d.boxWidth,h=d.boxHeight;D.width(e).height(f),D.attr("src",a),H.attr("src",a),t(D,g,h),E=D.width(),F=D.height(),H.width(E).height(F),M.width(E+L*2).height(F+L*2),G.width(E).height(F),ba.resize(E,F),bm(),typeof b=="function"&&b.call(bs)},c.src=a}function bq(a,b,c){var e=b||d.bgColor;d.bgFade&&k()&&d.fadeTime&&!c?a.animate({backgroundColor:e},{queue:!1,duration:d.fadeTime}):a.css("backgroundColor",e)}function br(a){d.allowResize?a?bb.enableOnly():bb.enableHandles():bb.disableHandles(),bc.setCursor(d.allowSelect?"crosshair":"default"),bb
+.setCursor(d.allowMove?"move":"default"),d.hasOwnProperty("trueSize")&&(T=d.trueSize[0]/E,U=d.trueSize[1]/F),d.hasOwnProperty("setSelect")&&(bg(d.setSelect),bb.done(),delete d.setSelect),ba.refresh(),d.bgColor!=N&&(bq(d.shade?ba.getShades():G,d.shade?d.shadeColor||d.bgColor:d.bgColor),N=d.bgColor),O!=d.bgOpacity&&(O=d.bgOpacity,d.shade?ba.refresh():bb.setBgOpacity(O)),P=d.maxSize[0]||0,Q=d.maxSize[1]||0,R=d.minSize[0]||0,S=d.minSize[1]||0,d.hasOwnProperty("outerImage")&&(D.attr("src",d.outerImage),delete d.outerImage),bb.refresh()}var d=a.extend({},a.Jcrop.defaults),e,f=navigator.userAgent.toLowerCase(),g=/msie/.test(f),h=/msie [1-6]\./.test(f);typeof b!="object"&&(b=a(b)[0]),typeof c!="object"&&(c={}),n(c);var z={border:"none",visibility:"visible",margin:0,padding:0,position:"absolute",top:0,left:0},A=a(b),B=!0;if(b.tagName=="IMG"){if(A[0].width!=0&&A[0].height!=0)A.width(A[0].width),A.height(A[0].height);else{var C=new Image;C.src=A[0].src,A.width(C.width),A.height(C.height)}var D=A.clone().removeAttr("id").
+css(z).show();D.width(A.width()),D.height(A.height()),A.after(D).hide()}else D=A.css(z).show(),B=!1,d.shade===null&&(d.shade=!0);t(D,d.boxWidth,d.boxHeight);var E=D.width(),F=D.height(),G=a("<div />").width(E).height(F).addClass(j("holder")).css({position:"relative",backgroundColor:d.bgColor}).insertAfter(A).append(D);d.addClass&&G.addClass(d.addClass);var H=a("<div />"),I=a("<div />").width("100%").height("100%").css({zIndex:310,position:"absolute",overflow:"hidden"}),J=a("<div />").width("100%").height("100%").css("zIndex",320),K=a("<div />").css({position:"absolute",zIndex:600}).dblclick(function(){var a=_.getFixed();d.onDblClick.call(bs,a)}).insertBefore(D).append(I,J);B&&(H=a("<img />").attr("src",D.attr("src")).css(z).width(E).height(F),I.append(H)),h&&K.css({overflowY:"hidden"});var L=d.boundary,M=y().width(E+L*2).height(F+L*2).css({position:"absolute",top:i(-L),left:i(-L),zIndex:290}).mousedown(w),N=d.bgColor,O=d.bgOpacity,P,Q,R,S,T,U,V=!0,W,X,Y;e=l(D);var Z=function(){function a(){var a={},b=["touchstart"
+,"touchmove","touchend"],c=document.createElement("div"),d;try{for(d=0;d<b.length;d++){var e=b[d];e="on"+e;var f=e in c;f||(c.setAttribute(e,"return;"),f=typeof c[e]=="function"),a[b[d]]=f}return a.touchstart&&a.touchend&&a.touchmove}catch(g){return!1}}function b(){return d.touchSupport===!0||d.touchSupport===!1?d.touchSupport:a()}return{createDragger:function(a){return function(b){return d.disabled?!1:a==="move"&&!d.allowMove?!1:(e=l(D),W=!0,o(a,m(Z.cfilter(b)),!0),b.stopPropagation(),b.preventDefault(),!1)}},newSelection:function(a){return w(Z.cfilter(a))},cfilter:function(a){return a.pageX=a.originalEvent.changedTouches[0].pageX,a.pageY=a.originalEvent.changedTouches[0].pageY,a},isSupported:a,support:b()}}(),_=function(){function h(d){d=n(d),c=a=d[0],e=b=d[1]}function i(a){a=n(a),f=a[0]-c,g=a[1]-e,c=a[0],e=a[1]}function j(){return[f,g]}function k(d){var f=d[0],g=d[1];0>a+f&&(f-=f+a),0>b+g&&(g-=g+b),F<e+g&&(g+=F-(e+g)),E<c+f&&(f+=E-(c+f)),a+=f,c+=f,b+=g,e+=g}function l(a){var b=m();switch(a){case"ne":return[
+b.x2,b.y];case"nw":return[b.x,b.y];case"se":return[b.x2,b.y2];case"sw":return[b.x,b.y2]}}function m(){if(!d.aspectRatio)return p();var f=d.aspectRatio,g=d.minSize[0]/T,h=d.maxSize[0]/T,i=d.maxSize[1]/U,j=c-a,k=e-b,l=Math.abs(j),m=Math.abs(k),n=l/m,r,s,t,u;return h===0&&(h=E*10),i===0&&(i=F*10),n<f?(s=e,t=m*f,r=j<0?a-t:t+a,r<0?(r=0,u=Math.abs((r-a)/f),s=k<0?b-u:u+b):r>E&&(r=E,u=Math.abs((r-a)/f),s=k<0?b-u:u+b)):(r=c,u=l/f,s=k<0?b-u:b+u,s<0?(s=0,t=Math.abs((s-b)*f),r=j<0?a-t:t+a):s>F&&(s=F,t=Math.abs(s-b)*f,r=j<0?a-t:t+a)),r>a?(r-a<g?r=a+g:r-a>h&&(r=a+h),s>b?s=b+(r-a)/f:s=b-(r-a)/f):r<a&&(a-r<g?r=a-g:a-r>h&&(r=a-h),s>b?s=b+(a-r)/f:s=b-(a-r)/f),r<0?(a-=r,r=0):r>E&&(a-=r-E,r=E),s<0?(b-=s,s=0):s>F&&(b-=s-F,s=F),q(o(a,b,r,s))}function n(a){return a[0]<0&&(a[0]=0),a[1]<0&&(a[1]=0),a[0]>E&&(a[0]=E),a[1]>F&&(a[1]=F),[Math.round(a[0]),Math.round(a[1])]}function o(a,b,c,d){var e=a,f=c,g=b,h=d;return c<a&&(e=c,f=a),d<b&&(g=d,h=b),[e,g,f,h]}function p(){var d=c-a,f=e-b,g;return P&&Math.abs(d)>P&&(c=d>0?a+P:a-P),Q&&Math.abs
+(f)>Q&&(e=f>0?b+Q:b-Q),S/U&&Math.abs(f)<S/U&&(e=f>0?b+S/U:b-S/U),R/T&&Math.abs(d)<R/T&&(c=d>0?a+R/T:a-R/T),a<0&&(c-=a,a-=a),b<0&&(e-=b,b-=b),c<0&&(a-=c,c-=c),e<0&&(b-=e,e-=e),c>E&&(g=c-E,a-=g,c-=g),e>F&&(g=e-F,b-=g,e-=g),a>E&&(g=a-F,e-=g,b-=g),b>F&&(g=b-F,e-=g,b-=g),q(o(a,b,c,e))}function q(a){return{x:a[0],y:a[1],x2:a[2],y2:a[3],w:a[2]-a[0],h:a[3]-a[1]}}var a=0,b=0,c=0,e=0,f,g;return{flipCoords:o,setPressed:h,setCurrent:i,getOffset:j,moveOffset:k,getCorner:l,getFixed:m}}(),ba=function(){function f(a,b){e.left.css({height:i(b)}),e.right.css({height:i(b)})}function g(){return h(_.getFixed())}function h(a){e.top.css({left:i(a.x),width:i(a.w),height:i(a.y)}),e.bottom.css({top:i(a.y2),left:i(a.x),width:i(a.w),height:i(F-a.y2)}),e.right.css({left:i(a.x2),width:i(E-a.x2)}),e.left.css({width:i(a.x)})}function j(){return a("<div />").css({position:"absolute",backgroundColor:d.shadeColor||d.bgColor}).appendTo(c)}function k(){b||(b=!0,c.insertBefore(D),g(),bb.setBgOpacity(1,0,1),H.hide(),l(d.shadeColor||d.bgColor,1),bb.
+isAwake()?n(d.bgOpacity,1):n(1,1))}function l(a,b){bq(p(),a,b)}function m(){b&&(c.remove(),H.show(),b=!1,bb.isAwake()?bb.setBgOpacity(d.bgOpacity,1,1):(bb.setBgOpacity(1,1,1),bb.disableHandles()),bq(G,0,1))}function n(a,e){b&&(d.bgFade&&!e?c.animate({opacity:1-a},{queue:!1,duration:d.fadeTime}):c.css({opacity:1-a}))}function o(){d.shade?k():m(),bb.isAwake()&&n(d.bgOpacity)}function p(){return c.children()}var b=!1,c=a("<div />").css({position:"absolute",zIndex:240,opacity:0}),e={top:j(),left:j().height(F),right:j().height(F),bottom:j()};return{update:g,updateRaw:h,getShades:p,setBgColor:l,enable:k,disable:m,resize:f,refresh:o,opacity:n}}(),bb=function(){function k(b){var c=a("<div />").css({position:"absolute",opacity:d.borderOpacity}).addClass(j(b));return I.append(c),c}function l(b,c){var d=a("<div />").mousedown(s(b)).css({cursor:b+"-resize",position:"absolute",zIndex:c}).addClass("ord-"+b);return Z.support&&d.bind("touchstart.jcrop",Z.createDragger(b)),J.append(d),d}function m(a){var b=d.handleSize,e=l(a,c++
+).css({opacity:d.handleOpacity}).addClass(j("handle"));return b&&e.width(b).height(b),e}function n(a){return l(a,c++).addClass("jcrop-dragbar")}function o(a){var b;for(b=0;b<a.length;b++)g[a[b]]=n(a[b])}function p(a){var b,c;for(c=0;c<a.length;c++){switch(a[c]){case"n":b="hline";break;case"s":b="hline bottom";break;case"e":b="vline right";break;case"w":b="vline"}e[a[c]]=k(b)}}function q(a){var b;for(b=0;b<a.length;b++)f[a[b]]=m(a[b])}function r(a,b){d.shade||H.css({top:i(-b),left:i(-a)}),K.css({top:i(b),left:i(a)})}function t(a,b){K.width(Math.round(a)).height(Math.round(b))}function v(){var a=_.getFixed();_.setPressed([a.x,a.y]),_.setCurrent([a.x2,a.y2]),w()}function w(a){if(b)return x(a)}function x(a){var c=_.getFixed();t(c.w,c.h),r(c.x,c.y),d.shade&&ba.updateRaw(c),b||A(),a?d.onSelect.call(bs,u(c)):d.onChange.call(bs,u(c))}function z(a,c,e){if(!b&&!c)return;d.bgFade&&!e?D.animate({opacity:a},{queue:!1,duration:d.fadeTime}):D.css("opacity",a)}function A(){K.show(),d.shade?ba.opacity(O):z(O,!0),b=!0}function B
+(){F(),K.hide(),d.shade?ba.opacity(1):z(1),b=!1,d.onRelease.call(bs)}function C(){h&&J.show()}function E(){h=!0;if(d.allowResize)return J.show(),!0}function F(){h=!1,J.hide()}function G(a){a?(X=!0,F()):(X=!1,E())}function L(){G(!1),v()}var b,c=370,e={},f={},g={},h=!1;d.dragEdges&&a.isArray(d.createDragbars)&&o(d.createDragbars),a.isArray(d.createHandles)&&q(d.createHandles),d.drawBorders&&a.isArray(d.createBorders)&&p(d.createBorders),a(document).bind("touchstart.jcrop-ios",function(b){a(b.currentTarget).hasClass("jcrop-tracker")&&b.stopPropagation()});var M=y().mousedown(s("move")).css({cursor:"move",position:"absolute",zIndex:360});return Z.support&&M.bind("touchstart.jcrop",Z.createDragger("move")),I.append(M),F(),{updateVisible:w,update:x,release:B,refresh:v,isAwake:function(){return b},setCursor:function(a){M.css("cursor",a)},enableHandles:E,enableOnly:function(){h=!0},showHandles:C,disableHandles:F,animMode:G,setBgOpacity:z,done:L}}(),bc=function(){function f(b){M.css({zIndex:450}),b?a(document).bind("touchmove.jcrop"
+,k).bind("touchend.jcrop",l):e&&a(document).bind("mousemove.jcrop",h).bind("mouseup.jcrop",i)}function g(){M.css({zIndex:290}),a(document).unbind(".jcrop")}function h(a){return b(m(a)),!1}function i(a){return a.preventDefault(),a.stopPropagation(),W&&(W=!1,c(m(a)),bb.isAwake()&&d.onSelect.call(bs,u(_.getFixed())),g(),b=function(){},c=function(){}),!1}function j(a,d,e){return W=!0,b=a,c=d,f(e),!1}function k(a){return b(m(Z.cfilter(a))),!1}function l(a){return i(Z.cfilter(a))}function n(a){M.css("cursor",a)}var b=function(){},c=function(){},e=d.trackDocument;return e||M.mousemove(h).mouseup(i).mouseout(i),D.before(M),{activateHandlers:j,setCursor:n}}(),bd=function(){function e(){d.keySupport&&(b.show(),b.focus())}function f(a){b.hide()}function g(a,b,c){d.allowMove&&(_.moveOffset([b,c]),bb.updateVisible(!0)),a.preventDefault(),a.stopPropagation()}function i(a){if(a.ctrlKey||a.metaKey)return!0;Y=a.shiftKey?!0:!1;var b=Y?10:1;switch(a.keyCode){case 37:g(a,-b,0);break;case 39:g(a,b,0);break;case 38:g(a,0,-b);break;
+case 40:g(a,0,b);break;case 27:d.allowSelect&&bb.release();break;case 9:return!0}return!1}var b=a('<input type="radio" />').css({position:"fixed",left:"-120px",width:"12px"}).addClass("jcrop-keymgr"),c=a("<div />").css({position:"absolute",overflow:"hidden"}).append(b);return d.keySupport&&(b.keydown(i).blur(f),h||!d.fixedSupport?(b.css({position:"absolute",left:"-20px"}),c.append(b).insertBefore(D)):b.insertBefore(D)),{watchKeys:e}}();Z.support&&M.bind("touchstart.jcrop",Z.newSelection),J.hide(),br(!0);var bs={setImage:bp,animateTo:bf,setSelect:bg,setOptions:bk,tellSelect:bi,tellScaled:bj,setClass:be,disable:bl,enable:bm,cancel:bn,release:bb.release,destroy:bo,focus:bd.watchKeys,getBounds:function(){return[E*T,F*U]},getWidgetSize:function(){return[E,F]},getScaleFactor:function(){return[T,U]},getOptions:function(){return d},ui:{holder:G,selection:K}};return g&&G.bind("selectstart",function(){return!1}),A.data("Jcrop",bs),bs},a.fn.Jcrop=function(b,c){var d;return this.each(function(){if(a(this).data("Jcrop")){if(
+b==="api")return a(this).data("Jcrop");a(this).data("Jcrop").setOptions(b)}else this.tagName=="IMG"?a.Jcrop.Loader(this,function(){a(this).css({display:"block",visibility:"hidden"}),d=a.Jcrop(this,b),a.isFunction(c)&&c.call(d)}):(a(this).css({display:"block",visibility:"hidden"}),d=a.Jcrop(this,b),a.isFunction(c)&&c.call(d))}),this},a.Jcrop.Loader=function(b,c,d){function g(){f.complete?(e.unbind(".jcloader"),a.isFunction(c)&&c.call(f)):window.setTimeout(g,50)}var e=a(b),f=e[0];e.bind("load.jcloader",g).bind("error.jcloader",function(b){e.unbind(".jcloader"),a.isFunction(d)&&d.call(f)}),f.complete&&a.isFunction(c)&&(e.unbind(".jcloader"),c.call(f))},a.Jcrop.defaults={allowSelect:!0,allowMove:!0,allowResize:!0,trackDocument:!0,baseClass:"jcrop",addClass:null,bgColor:"black",bgOpacity:.6,bgFade:!1,borderOpacity:.4,handleOpacity:.5,handleSize:null,aspectRatio:0,keySupport:!0,createHandles:["n","s","e","w","nw","ne","se","sw"],createDragbars:["n","s","e","w"],createBorders:["n","s","e","w"],drawBorders:!0,dragEdges
+:!0,fixedSupport:!0,touchSupport:null,shade:null,boxWidth:0,boxHeight:0,boundary:2,fadeTime:400,animationDelay:20,swingSpeed:3,minSelect:[0,0],maxSize:[0,0],minSize:[0,0],onChange:function(){},onSelect:function(){},onDblClick:function(){},onRelease:function(){}}})(jQuery);
--- a/frontend/src/__global/js/image_cropping/js/jquery.color.js
+++ b/frontend/src/__global/js/image_cropping/js/jquery.color.js
@ -0,0 +1,716 @@
+/* eslint-disable */
+/*!
+ * jQuery Color Animations v2.0pre
+ * http://jquery.org/
+ *
+ * Copyright 2011 John Resig
+ * Dual licensed under the MIT or GPL Version 2 licenses.
+ * http://jquery.org/license
+ */
+
+(function (jQuery, undefined) {
+  var stepHooks = 'backgroundColor borderBottomColor borderLeftColor borderRightColor borderTopColor color outlineColor'.split(' ')
+
+  // plusequals test for += 100 -= 100
+
+  var rplusequals = /^([\-+])=\s*(\d+\.?\d*)/
+
+  // a set of RE's that can match strings and generate color tuples.
+
+  var stringParsers = [{
+    re: /rgba?\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*(?:,\s*(\d+(?:\.\d+)?)\s*)?\)/,
+    parse: function (execResult) {
+      return [
+        execResult[ 1 ],
+        execResult[ 2 ],
+        execResult[ 3 ],
+        execResult[ 4 ]
+      ]
+    }
+  }, {
+    re: /rgba?\(\s*(\d+(?:\.\d+)?)\%\s*,\s*(\d+(?:\.\d+)?)\%\s*,\s*(\d+(?:\.\d+)?)\%\s*(?:,\s*(\d+(?:\.\d+)?)\s*)?\)/,
+    parse: function (execResult) {
+      return [
+        2.55 * execResult[1],
+        2.55 * execResult[2],
+        2.55 * execResult[3],
+        execResult[ 4 ]
+      ]
+    }
+  }, {
+    re: /#([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})/,
+    parse: function (execResult) {
+      return [
+        parseInt(execResult[ 1 ], 16),
+        parseInt(execResult[ 2 ], 16),
+        parseInt(execResult[ 3 ], 16)
+      ]
+    }
+  }, {
+    re: /#([a-fA-F0-9])([a-fA-F0-9])([a-fA-F0-9])/,
+    parse: function (execResult) {
+      return [
+        parseInt(execResult[ 1 ] + execResult[ 1 ], 16),
+        parseInt(execResult[ 2 ] + execResult[ 2 ], 16),
+        parseInt(execResult[ 3 ] + execResult[ 3 ], 16)
+      ]
+    }
+  }, {
+    re: /hsla?\(\s*(\d+(?:\.\d+)?)\s*,\s*(\d+(?:\.\d+)?)\%\s*,\s*(\d+(?:\.\d+)?)\%\s*(?:,\s*(\d+(?:\.\d+)?)\s*)?\)/,
+    space: 'hsla',
+    parse: function (execResult) {
+      return [
+        execResult[1],
+        execResult[2] / 100,
+        execResult[3] / 100,
+        execResult[4]
+      ]
+    }
+  }]
+
+  // jQuery.Color( )
+
+  var color = jQuery.Color = function (color, green, blue, alpha) {
+    return new jQuery.Color.fn.parse(color, green, blue, alpha)
+  }
+
+  var spaces = {
+    rgba: {
+      cache: '_rgba',
+      props: {
+        red: {
+          idx: 0,
+          type: 'byte',
+          empty: true
+        },
+        green: {
+          idx: 1,
+          type: 'byte',
+          empty: true
+        },
+        blue: {
+          idx: 2,
+          type: 'byte',
+          empty: true
+        },
+        alpha: {
+          idx: 3,
+          type: 'percent',
+          def: 1
+        }
+      }
+    },
+    hsla: {
+      cache: '_hsla',
+      props: {
+        hue: {
+          idx: 0,
+          type: 'degrees',
+          empty: true
+        },
+        saturation: {
+          idx: 1,
+          type: 'percent',
+          empty: true
+        },
+        lightness: {
+          idx: 2,
+          type: 'percent',
+          empty: true
+        }
+      }
+    }
+  }
+
+  var propTypes = {
+    'byte': {
+      floor: true,
+      min: 0,
+      max: 255
+    },
+    'percent': {
+      min: 0,
+      max: 1
+    },
+    'degrees': {
+      mod: 360,
+      floor: true
+    }
+  }
+
+  var rgbaspace = spaces.rgba.props
+
+  var support = color.support = {}
+
+  // colors = jQuery.Color.names
+
+  var colors
+
+  // local aliases of functions called often
+
+  var each = jQuery.each
+
+  spaces.hsla.props.alpha = rgbaspace.alpha
+
+  function clamp (value, prop, alwaysAllowEmpty) {
+    var type = propTypes[ prop.type ] || {}
+
+    var allowEmpty = prop.empty || alwaysAllowEmpty
+
+    if (allowEmpty && value == null) {
+      return null
+    }
+    if (prop.def && value == null) {
+      return prop.def
+    }
+    if (type.floor) {
+      value = ~~value
+    } else {
+      value = parseFloat(value)
+    }
+    if (value == null || isNaN(value)) {
+      return prop.def
+    }
+    if (type.mod) {
+      value = value % type.mod
+      // -10 -> 350
+      return value < 0 ? type.mod + value : value
+    }
+
+    // for now all property types without mod have min and max
+    return type.min > value ? type.min : type.max < value ? type.max : value
+  }
+
+  function stringParse (string) {
+    var inst = color()
+
+    var rgba = inst._rgba = []
+
+    string = string.toLowerCase()
+
+    each(stringParsers, function (i, parser) {
+      var match = parser.re.exec(string)
+
+      var values = match && parser.parse(match)
+
+      var parsed
+
+      var spaceName = parser.space || 'rgba'
+
+      var cache = spaces[ spaceName ].cache
+
+      if (values) {
+        parsed = inst[ spaceName ](values)
+
+        // if this was an rgba parse the assignment might happen twice
+        // oh well....
+        inst[ cache ] = parsed[ cache ]
+        rgba = inst._rgba = parsed._rgba
+
+        // exit each( stringParsers ) here because we matched
+        return false
+      }
+    })
+
+    // Found a stringParser that handled it
+    if (rgba.length !== 0) {
+      // if this came from a parsed string, force "transparent" when alpha is 0
+      // chrome, (and maybe others) return "transparent" as rgba(0,0,0,0)
+      if (Math.max.apply(Math, rgba) === 0) {
+        jQuery.extend(rgba, colors.transparent)
+      }
+      return inst
+    }
+
+    // named colors / default - filter back through parse function
+    if (string = colors[ string ]) {
+      return string
+    }
+  }
+
+  color.fn = color.prototype = {
+    constructor: color,
+    parse: function (red, green, blue, alpha) {
+      if (red === undefined) {
+        this._rgba = [ null, null, null, null ]
+        return this
+      }
+      if (red instanceof jQuery || red.nodeType) {
+        red = red instanceof jQuery ? red.css(green) : jQuery(red).css(green)
+        green = undefined
+      }
+
+      var inst = this
+
+      var type = jQuery.type(red)
+
+      var rgba = this._rgba = []
+
+      var source
+
+      // more than 1 argument specified - assume ( red, green, blue, alpha )
+      if (green !== undefined) {
+        red = [ red, green, blue, alpha ]
+        type = 'array'
+      }
+
+      if (type === 'string') {
+        return this.parse(stringParse(red) || colors._default)
+      }
+
+      if (type === 'array') {
+        each(rgbaspace, function (key, prop) {
+          rgba[ prop.idx ] = clamp(red[ prop.idx ], prop)
+        })
+        return this
+      }
+
+      if (type === 'object') {
+        if (red instanceof color) {
+          each(spaces, function (spaceName, space) {
+            if (red[ space.cache ]) {
+              inst[ space.cache ] = red[ space.cache ].slice()
+            }
+          })
+        } else {
+          each(spaces, function (spaceName, space) {
+            each(space.props, function (key, prop) {
+              var cache = space.cache
+
+              // if the cache doesn't exist, and we know how to convert
+              if (!inst[ cache ] && space.to) {
+                // if the value was null, we don't need to copy it
+                // if the key was alpha, we don't need to copy it either
+                if (red[ key ] == null || key === 'alpha') {
+                  return
+                }
+                inst[ cache ] = space.to(inst._rgba)
+              }
+
+              // this is the only case where we allow nulls for ALL properties.
+              // call clamp with alwaysAllowEmpty
+              inst[ cache ][ prop.idx ] = clamp(red[ key ], prop, true)
+            })
+          })
+        }
+        return this
+      }
+    },
+    is: function (compare) {
+      var is = color(compare)
+
+      var same = true
+
+      var myself = this
+
+      each(spaces, function (_, space) {
+        var isCache = is[ space.cache ]
+
+        var localCache
+        if (isCache) {
+          localCache = myself[ space.cache ] || space.to && space.to(myself._rgba) || []
+          each(space.props, function (_, prop) {
+            if (isCache[ prop.idx ] != null) {
+              same = (isCache[ prop.idx ] === localCache[ prop.idx ])
+              return same
+            }
+          })
+        }
+        return same
+      })
+      return same
+    },
+    _space: function () {
+      var used = []
+
+      var inst = this
+      each(spaces, function (spaceName, space) {
+        if (inst[ space.cache ]) {
+          used.push(spaceName)
+        }
+      })
+      return used.pop()
+    },
+    transition: function (other, distance) {
+      var end = color(other)
+
+      var spaceName = end._space()
+
+      var space = spaces[ spaceName ]
+
+      var start = this[ space.cache ] || space.to(this._rgba)
+
+      var result = start.slice()
+
+      end = end[ space.cache ]
+      each(space.props, function (key, prop) {
+        var index = prop.idx
+
+        var startValue = start[ index ]
+
+        var endValue = end[ index ]
+
+        var type = propTypes[ prop.type ] || {}
+
+        // if null, don't override start value
+        if (endValue === null) {
+          return
+        }
+        // if null - use end
+        if (startValue === null) {
+          result[ index ] = endValue
+        } else {
+          if (type.mod) {
+            if (endValue - startValue > type.mod / 2) {
+              startValue += type.mod
+            } else if (startValue - endValue > type.mod / 2) {
+              startValue -= type.mod
+            }
+          }
+          result[ prop.idx ] = clamp((endValue - startValue) * distance + startValue, prop)
+        }
+      })
+      return this[ spaceName ](result)
+    },
+    blend: function (opaque) {
+      // if we are already opaque - return ourself
+      if (this._rgba[ 3 ] === 1) {
+        return this
+      }
+
+      var rgb = this._rgba.slice()
+
+      var a = rgb.pop()
+
+      var blend = color(opaque)._rgba
+
+      return color(jQuery.map(rgb, function (v, i) {
+        return (1 - a) * blend[ i ] + a * v
+      }))
+    },
+    toRgbaString: function () {
+      var prefix = 'rgba('
+
+      var rgba = jQuery.map(this._rgba, function (v, i) {
+        return v == null ? (i > 2 ? 1 : 0) : v
+      })
+
+      if (rgba[ 3 ] === 1) {
+        rgba.pop()
+        prefix = 'rgb('
+      }
+
+      return prefix + rgba.join(',') + ')'
+    },
+    toHslaString: function () {
+      var prefix = 'hsla('
+
+      var hsla = jQuery.map(this.hsla(), function (v, i) {
+        if (v == null) {
+          v = i > 2 ? 1 : 0
+        }
+
+        // catch 1 and 2
+        if (i && i < 3) {
+          v = Math.round(v * 100) + '%'
+        }
+        return v
+      })
+
+      if (hsla[ 3 ] === 1) {
+        hsla.pop()
+        prefix = 'hsl('
+      }
+      return prefix + hsla.join(',') + ')'
+    },
+    toHexString: function (includeAlpha) {
+      var rgba = this._rgba.slice()
+
+      var alpha = rgba.pop()
+
+      if (includeAlpha) {
+        rgba.push(~~(alpha * 255))
+      }
+
+      return '#' + jQuery.map(rgba, function (v, i) {
+        // default to 0 when nulls exist
+        v = (v || 0).toString(16)
+        return v.length === 1 ? '0' + v : v
+      }).join('')
+    },
+    toString: function () {
+      return this._rgba[ 3 ] === 0 ? 'transparent' : this.toRgbaString()
+    }
+  }
+  color.fn.parse.prototype = color.fn
+
+  // hsla conversions adapted from:
+  // http://www.google.com/codesearch/p#OAMlx_jo-ck/src/third_party/WebKit/Source/WebCore/inspector/front-end/Color.js&d=7&l=193
+
+  function hue2rgb (p, q, h) {
+    h = (h + 1) % 1
+    if (h * 6 < 1) {
+      return p + (q - p) * 6 * h
+    }
+    if (h * 2 < 1) {
+      return q
+    }
+    if (h * 3 < 2) {
+      return p + (q - p) * ((2 / 3) - h) * 6
+    }
+    return p
+  }
+
+  spaces.hsla.to = function (rgba) {
+    if (rgba[ 0 ] == null || rgba[ 1 ] == null || rgba[ 2 ] == null) {
+      return [ null, null, null, rgba[ 3 ] ]
+    }
+    var r = rgba[ 0 ] / 255
+
+    var g = rgba[ 1 ] / 255
+
+    var b = rgba[ 2 ] / 255
+
+    var a = rgba[ 3 ]
+
+    var max = Math.max(r, g, b)
+
+    var min = Math.min(r, g, b)
+
+    var diff = max - min
+
+    var add = max + min
+
+    var l = add * 0.5
+
+    var h; var s
+
+    if (min === max) {
+      h = 0
+    } else if (r === max) {
+      h = (60 * (g - b) / diff) + 360
+    } else if (g === max) {
+      h = (60 * (b - r) / diff) + 120
+    } else {
+      h = (60 * (r - g) / diff) + 240
+    }
+
+    if (l === 0 || l === 1) {
+      s = l
+    } else if (l <= 0.5) {
+      s = diff / add
+    } else {
+      s = diff / (2 - add)
+    }
+    return [ Math.round(h) % 360, s, l, a == null ? 1 : a ]
+  }
+
+  spaces.hsla.from = function (hsla) {
+    if (hsla[ 0 ] == null || hsla[ 1 ] == null || hsla[ 2 ] == null) {
+      return [ null, null, null, hsla[ 3 ] ]
+    }
+    var h = hsla[ 0 ] / 360
+
+    var s = hsla[ 1 ]
+
+    var l = hsla[ 2 ]
+
+    var a = hsla[ 3 ]
+
+    var q = l <= 0.5 ? l * (1 + s) : l + s - l * s
+
+    var p = 2 * l - q
+
+    var r; var g; var b
+
+    return [
+      Math.round(hue2rgb(p, q, h + (1 / 3)) * 255),
+      Math.round(hue2rgb(p, q, h) * 255),
+      Math.round(hue2rgb(p, q, h - (1 / 3)) * 255),
+      a
+    ]
+  }
+
+  each(spaces, function (spaceName, space) {
+    var props = space.props
+
+    var cache = space.cache
+
+    var to = space.to
+
+    var from = space.from
+
+    // makes rgba() and hsla()
+    color.fn[ spaceName ] = function (value) {
+      // generate a cache for this space if it doesn't exist
+      if (to && !this[ cache ]) {
+        this[ cache ] = to(this._rgba)
+      }
+      if (value === undefined) {
+        return this[ cache ].slice()
+      }
+
+      var type = jQuery.type(value)
+
+      var arr = (type === 'array' || type === 'object') ? value : arguments
+
+      var local = this[ cache ].slice()
+
+      var ret
+
+      each(props, function (key, prop) {
+        var val = arr[ type === 'object' ? key : prop.idx ]
+        if (val == null) {
+          val = local[ prop.idx ]
+        }
+        local[ prop.idx ] = clamp(val, prop)
+      })
+
+      if (from) {
+        ret = color(from(local))
+        ret[ cache ] = local
+        return ret
+      } else {
+        return color(local)
+      }
+    }
+
+    // makes red() green() blue() alpha() hue() saturation() lightness()
+    each(props, function (key, prop) {
+      // alpha is included in more than one space
+      if (color.fn[ key ]) {
+        return
+      }
+      color.fn[ key ] = function (value) {
+        var vtype = jQuery.type(value)
+
+        var fn = (key === 'alpha' ? (this._hsla ? 'hsla' : 'rgba') : spaceName)
+
+        var local = this[ fn ]()
+
+        var cur = local[ prop.idx ]
+
+        var match
+
+        if (vtype === 'undefined') {
+          return cur
+        }
+
+        if (vtype === 'function') {
+          value = value.call(this, cur)
+          vtype = jQuery.type(value)
+        }
+        if (value == null && prop.empty) {
+          return this
+        }
+        if (vtype === 'string') {
+          match = rplusequals.exec(value)
+          if (match) {
+            value = cur + parseFloat(match[ 2 ]) * (match[ 1 ] === '+' ? 1 : -1)
+          }
+        }
+        local[ prop.idx ] = value
+        return this[ fn ](local)
+      }
+    })
+  })
+
+  // add .fx.step functions
+  each(stepHooks, function (i, hook) {
+    jQuery.cssHooks[ hook ] = {
+      set: function (elem, value) {
+        var parsed, backgroundColor, curElem
+
+        if (jQuery.type(value) !== 'string' || (parsed = stringParse(value))) {
+          value = color(parsed || value)
+          if (!support.rgba && value._rgba[ 3 ] !== 1) {
+            curElem = hook === 'backgroundColor' ? elem.parentNode : elem
+            do {
+              backgroundColor = jQuery.curCSS(curElem, 'backgroundColor')
+            } while (
+              (backgroundColor === '' || backgroundColor === 'transparent') &&
+							(curElem = curElem.parentNode) &&
+							curElem.style
+            )
+
+            value = value.blend(backgroundColor && backgroundColor !== 'transparent'
+              ? backgroundColor
+              : '_default')
+          }
+
+          value = value.toRgbaString()
+        }
+        elem.style[ hook ] = value
+      }
+    }
+    jQuery.fx.step[ hook ] = function (fx) {
+      if (!fx.colorInit) {
+        fx.start = color(fx.elem, hook)
+        fx.end = color(fx.end)
+        fx.colorInit = true
+      }
+      jQuery.cssHooks[ hook ].set(fx.elem, fx.start.transition(fx.end, fx.pos))
+    }
+  })
+
+  // detect rgba support
+  jQuery(function () {
+    var div = document.createElement('div')
+
+    var div_style = div.style
+
+    div_style.cssText = 'background-color:rgba(1,1,1,.5)'
+    support.rgba = div_style.backgroundColor.indexOf('rgba') > -1
+  })
+
+  // Some named colors to work with
+  // From Interface by Stefan Petre
+  // http://interface.eyecon.ro/
+  colors = jQuery.Color.names = {
+    aqua: '#00ffff',
+    azure: '#f0ffff',
+    beige: '#f5f5dc',
+    black: '#000000',
+    blue: '#0000ff',
+    brown: '#a52a2a',
+    cyan: '#00ffff',
+    darkblue: '#00008b',
+    darkcyan: '#008b8b',
+    darkgrey: '#a9a9a9',
+    darkgreen: '#006400',
+    darkkhaki: '#bdb76b',
+    darkmagenta: '#8b008b',
+    darkolivegreen: '#556b2f',
+    darkorange: '#ff8c00',
+    darkorchid: '#9932cc',
+    darkred: '#8b0000',
+    darksalmon: '#e9967a',
+    darkviolet: '#9400d3',
+    fuchsia: '#ff00ff',
+    gold: '#ffd700',
+    green: '#008000',
+    indigo: '#4b0082',
+    khaki: '#f0e68c',
+    lightblue: '#add8e6',
+    lightcyan: '#e0ffff',
+    lightgreen: '#90ee90',
+    lightgrey: '#d3d3d3',
+    lightpink: '#ffb6c1',
+    lightyellow: '#ffffe0',
+    lime: '#00ff00',
+    magenta: '#ff00ff',
+    maroon: '#800000',
+    navy: '#000080',
+    olive: '#808000',
+    orange: '#ffa500',
+    pink: '#ffc0cb',
+    purple: '#800080',
+    violet: '#800080',
+    red: '#ff0000',
+    silver: '#c0c0c0',
+    white: '#ffffff',
+    yellow: '#ffff00',
+    transparent: [ null, null, null, 0 ],
+    _default: '#ffffff'
+  }
+})(jQuery)
--- a/frontend/src/__global/js/jquery.runner.js
+++ b/frontend/src/__global/js/jquery.runner.js
@ -0,0 +1,296 @@
+/* eslint-disable */
+/*!
+ * jQuery-runner - v2.3.3 - 2014-08-06
+ * https://github.com/jylauril/jquery-runner/
+ * Copyright (c) 2014 Jyrki Laurila <https://github.com/jylauril>
+ */
+(function() {
+  var Runner, formatTime, meta, pad, runners, uid, _$, _requestAnimationFrame, _uid
+
+  meta = {
+    version: "2.3.3",
+    name: "jQuery-runner"
+  }
+
+  _$ = $
+
+  if (!(_$ && _$.fn)) {
+    throw new Error('[' + meta.name + '] jQuery or jQuery-like library is required for this plugin to work')
+  }
+
+  runners = {}
+
+  pad = function(num) {
+    return (num < 10 ? '0' : '') + num
+  }
+
+  _uid = 1
+
+  uid = function() {
+    return 'runner' + _uid++
+  }
+
+  _requestAnimationFrame = (function(win, raf) {
+    return win['r' + raf] || win['webkitR' + raf] || win['mozR' + raf] || win['msR' + raf] || function(fn) {
+      return setTimeout(fn, 30)
+    }
+  })(this, 'equestAnimationFrame')
+
+  formatTime = function(time, settings) {
+    var i, len, ms, output, prefix, separator, step, steps, value, _i, _len
+    settings = settings || {}
+    steps = [3600000, 60000, 1000, 10]
+    separator = ['', ':', ':', '.']
+    prefix = ''
+    output = ''
+    ms = settings.milliseconds
+    len = steps.length
+    value = 0
+    if (time < 0) {
+      time = Math.abs(time)
+      prefix = '-'
+    }
+    for (i = _i = 0, _len = steps.length; _i < _len; i = ++_i) {
+      step = steps[i]
+      value = 0
+      if (time >= step) {
+        value = Math.floor(time / step)
+        time -= value * step
+      }
+      if ((value || i > 1 || output) && (i !== len - 1 || ms)) {
+        output += (output ? separator[i] : '') + pad(value)
+      }
+    }
+    return prefix + output
+  }
+
+  Runner = (function() {
+    function Runner(items, options, start) {
+      var id
+      if (!(this instanceof Runner)) {
+        return new Runner(items, options, start)
+      }
+      this.items = items
+      id = this.id = uid()
+      this.settings = _$.extend({}, this.settings, options)
+      runners[id] = this
+      items.each(function(index, element) {
+        _$(element).data('runner', id)
+      })
+      this.value(this.settings.startAt)
+      if (start || this.settings.autostart) {
+        this.start()
+      }
+    }
+
+    Runner.prototype.running = false
+
+    Runner.prototype.updating = false
+
+    Runner.prototype.finished = false
+
+    Runner.prototype.interval = null
+
+    Runner.prototype.total = 0
+
+    Runner.prototype.lastTime = 0
+
+    Runner.prototype.startTime = 0
+
+    Runner.prototype.lastLap = 0
+
+    Runner.prototype.lapTime = 0
+
+    Runner.prototype.settings = {
+      autostart: false,
+      countdown: false,
+      stopAt: null,
+      startAt: 0,
+      milliseconds: true,
+      format: null
+    }
+
+    Runner.prototype.value = function(value) {
+      this.items.each((function(_this) {
+        return function(item, element) {
+          var action
+          item = _$(element)
+          action = item.is('input') ? 'val' : 'text'
+          item[action](_this.format(value))
+        }
+      })(this))
+    }
+
+    Runner.prototype.format = function(value) {
+      var format
+      format = this.settings.format
+      format = _$.isFunction(format) ? format : formatTime
+      return format(value, this.settings)
+    }
+
+    Runner.prototype.update = function() {
+      var countdown, delta, settings, stopAt, time
+      if (!this.updating) {
+        this.updating = true
+        settings = this.settings
+        time = _$.now()
+        stopAt = settings.stopAt
+        countdown = settings.countdown
+        delta = time - this.lastTime
+        this.lastTime = time
+        if (countdown) {
+          this.total -= delta
+        } else {
+          this.total += delta
+        }
+        if (stopAt !== null && ((countdown && this.total <= stopAt) || (!countdown && this.total >= stopAt))) {
+          this.total = stopAt
+          this.finished = true
+          this.stop()
+          this.fire('runnerFinish')
+        }
+        this.value(this.total)
+        this.updating = false
+      }
+    }
+
+    Runner.prototype.fire = function(event) {
+      this.items.trigger(event, this.info())
+    }
+
+    Runner.prototype.start = function() {
+      var step
+      if (!this.running) {
+        this.running = true
+        if (!this.startTime || this.finished) {
+          this.reset()
+        }
+        this.lastTime = _$.now()
+        step = (function(_this) {
+          return function() {
+            if (_this.running) {
+              _this.update()
+              _requestAnimationFrame(step)
+            }
+          }
+        })(this)
+        _requestAnimationFrame(step)
+        this.fire('runnerStart')
+      }
+    }
+
+    Runner.prototype.stop = function() {
+      if (this.running) {
+        this.running = false
+        this.update()
+        this.fire('runnerStop')
+      }
+    }
+
+    Runner.prototype.toggle = function() {
+      if (this.running) {
+        this.stop()
+      } else {
+        this.start()
+      }
+    }
+
+    Runner.prototype.lap = function() {
+      var lap, last
+      last = this.lastTime
+      lap = last - this.lapTime
+      if (this.settings.countdown) {
+        lap = -lap
+      }
+      if (this.running || lap) {
+        this.lastLap = lap
+        this.lapTime = last
+      }
+      last = this.format(this.lastLap)
+      this.fire('runnerLap')
+      return last
+    }
+
+    Runner.prototype.reset = function(stop) {
+      var nowTime
+      if (stop) {
+        this.stop()
+      }
+      nowTime = _$.now()
+      if (typeof this.settings.startAt === 'number' && !this.settings.countdown) {
+        nowTime -= this.settings.startAt
+      }
+      this.startTime = this.lapTime = this.lastTime = nowTime
+      this.total = this.settings.startAt
+      this.value(this.total)
+      this.finished = false
+      this.fire('runnerReset')
+    }
+
+    Runner.prototype.info = function() {
+      var lap
+      lap = this.lastLap || 0
+      return {
+        running: this.running,
+        finished: this.finished,
+        time: this.total,
+        formattedTime: this.format(this.total),
+        startTime: this.startTime,
+        lapTime: lap,
+        formattedLapTime: this.format(lap),
+        settings: this.settings
+      }
+    }
+
+    return Runner
+
+  })()
+
+  _$.fn.runner = function(method, options, start) {
+    var id, runner
+    if (!method) {
+      method = 'init'
+    }
+    if (typeof method === 'object') {
+      start = options
+      options = method
+      method = 'init'
+    }
+    id = this.data('runner')
+    runner = id ? runners[id] : false
+    switch (method) {
+      case 'init':
+        new Runner(this, options, start)
+        break
+      case 'info':
+        if (runner) {
+          return runner.info()
+        }
+        break
+      case 'reset':
+        if (runner) {
+          runner.reset(options)
+        }
+        break
+      case 'lap':
+        if (runner) {
+          return runner.lap()
+        }
+        break
+      case 'start':
+      case 'stop':
+      case 'toggle':
+        if (runner) {
+          return runner[method]()
+        }
+        break
+      case 'version':
+        return meta.version
+      default:
+        _$.error('[' + meta.name + '] Method ' + method + ' does not exist')
+    }
+    return this
+  }
+
+  _$.fn.runner.format = formatTime
+}).call(window)
--- a/frontend/src/__global/js/tinymce/index.js
+++ b/frontend/src/__global/js/tinymce/index.js
@ -0,0 +1,42 @@
+
+import tinymce from 'tinymce/tinymce'
+import './langs/pt_BR.js'
+
+import 'tinymce/themes/silver'
+import 'tinymce/icons/default'
+
+import 'tinymce/plugins/table'
+import 'tinymce/plugins/lists'
+import 'tinymce/plugins/code'
+import 'tinymce/plugins/visualblocks'
+
+import 'tinymce/skins/ui/oxide/skin.css'
+
+window.tinymce = tinymce
+
+window.removeTinymce = function () {
+  while (window.tinymce.editors.length > 0) {
+    window.tinymce.remove(window.tinymce.editors[0])
+  }
+}
+
+window.initTextRichEditor = function (elements, readonly = false) {
+  window.removeTinymce()
+  const configTinymce = {
+    selector: elements === null || elements === undefined ? 'textarea' : elements,
+    forced_root_block: '',
+    min_height: 200,
+    language: 'pt_BR',
+    branding: false,
+    content_css: 'default',
+    plugins: ['lists table code visualblocks'],
+    menubar: 'edit view format table tools',
+    toolbar: 'undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent'
+  }
+  if (readonly) {
+    configTinymce.readonly = 1
+    configTinymce.menubar = false
+    configTinymce.toolbar = false
+  }
+  window.tinymce.init(configTinymce)
+}
--- a/frontend/src/__global/js/tinymce/langs/pt_BR.js
+++ b/frontend/src/__global/js/tinymce/langs/pt_BR.js
@ -0,0 +1,262 @@
+/* eslint-disable */
+tinymce.addI18n('pt_BR', {
+  'Redo': 'Refazer',
+  'Undo': 'Desfazer',
+  'Cut': 'Recortar',
+  'Copy': 'Copiar',
+  'Paste': 'Colar',
+  'Select all': 'Selecionar tudo',
+  'New document': 'Novo documento',
+  'Ok': 'Ok',
+  'Cancel': 'Cancelar',
+  'Visual aids': 'Ajuda visual',
+  'Bold': 'Negrito',
+  'Italic': 'It\u00e1lico',
+  'Underline': 'Sublinhar',
+  'Strikethrough': 'Riscar',
+  'Superscript': 'Sobrescrito',
+  'Subscript': 'Subscrever',
+  'Clear formatting': 'Limpar formata\u00e7\u00e3o',
+  'Align left': 'Alinhar \u00e0 esquerda',
+  'Align center': 'Centralizar',
+  'Align right': 'Alinhar \u00e0 direita',
+  'Justify': 'Justificar',
+  'Bullet list': 'Lista n\u00e3o ordenada',
+  'Numbered list': 'Lista ordenada',
+  'Decrease indent': 'Diminuir recuo',
+  'Increase indent': 'Aumentar recuo',
+  'Close': 'Fechar',
+  'Formats': 'Formatos',
+  'Your browser doesn\'t support direct access to the clipboard. Please use the Ctrl+X/C/V keyboard shortcuts instead.': 'Seu navegador n\u00e3o suporta acesso direto \u00e0 \u00e1rea de transfer\u00eancia. Por favor use os atalhos Ctrl+X - C - V do teclado',
+  'Headers': 'Cabe\u00e7alhos',
+  'Header 1': 'Cabe\u00e7alho 1',
+  'Header 2': 'Cabe\u00e7alho 2',
+  'Header 3': 'Cabe\u00e7alho 3',
+  'Header 4': 'Cabe\u00e7alho 4',
+  'Header 5': 'Cabe\u00e7alho 5',
+  'Header 6': 'Cabe\u00e7alho 6',
+  'Headings': 'Cabe\u00e7alhos',
+  'Heading 1': 'Cabe\u00e7alho 1',
+  'Heading 2': 'Cabe\u00e7alho 2',
+  'Heading 3': 'Cabe\u00e7alho 3',
+  'Heading 4': 'Cabe\u00e7alho 4',
+  'Heading 5': 'Cabe\u00e7alho 5',
+  'Heading 6': 'Cabe\u00e7alho 6',
+  'Preformatted': 'Preformatado',
+  'Div': 'Container',
+  'Pre': 'Pre',
+  'Code': 'C\u00f3digo',
+  'Paragraph': 'Par\u00e1grafo',
+  'Blockquote': 'Aspas',
+  'Inline': 'Em linha',
+  'Blocks': 'Blocos',
+  'Paste is now in plain text mode. Contents will now be pasted as plain text until you toggle this option off.': 'O comando colar est\u00e1 agora em modo texto plano. O conte\u00fado ser\u00e1 colado como texto plano at\u00e9 voc\u00ea desligar esta op\u00e7\u00e3o.',
+  'Font Family': 'Fonte',
+  'Font Sizes': 'Tamanho',
+  'Class': 'Classe',
+  'Browse for an image': 'Procure uma imagem',
+  'OR': 'OU',
+  'Drop an image here': 'Arraste uma imagem aqui',
+  'Upload': 'Carregar',
+  'Block': 'Bloco',
+  'Align': 'Alinhamento',
+  'Default': 'Padr\u00e3o',
+  'Circle': 'C\u00edrculo',
+  'Disc': 'Disco',
+  'Square': 'Quadrado',
+  'Lower Alpha': 'a. b. c. ...',
+  'Lower Greek': '\u03b1. \u03b2. \u03b3. ...',
+  'Lower Roman': 'i. ii. iii. ...',
+  'Upper Alpha': 'A. B. C. ...',
+  'Upper Roman': 'I. II. III. ...',
+  'Anchor': '\u00c2ncora',
+  'Name': 'Nome',
+  'Id': 'Id',
+  'Id should start with a letter, followed only by letters, numbers, dashes, dots, colons or underscores.': 'Id deve come\u00e7ar com uma letra, seguido apenas por letras, n\u00fameros, tra\u00e7os, pontos, dois pontos ou sublinhados.',
+  'You have unsaved changes are you sure you want to navigate away?': 'Voc\u00ea tem mudan\u00e7as n\u00e3o salvas. Voc\u00ea tem certeza que deseja sair?',
+  'Restore last draft': 'Restaurar \u00faltimo rascunho',
+  'Special character': 'Caracteres especiais',
+  'Source code': 'C\u00f3digo fonte',
+  'Insert/Edit code sample': 'Inserir/Editar c\u00f3digo de exemplo',
+  'Language': 'Idioma',
+  'Code sample': 'Exemplo de c\u00f3digo',
+  'Color': 'Cor',
+  'R': 'R',
+  'G': 'G',
+  'B': 'B',
+  'Left to right': 'Da esquerda para a direita',
+  'Right to left': 'Da direita para a esquerda',
+  'Emoticons': 'Emoticons',
+  'Document properties': 'Propriedades do documento',
+  'Title': 'T\u00edtulo',
+  'Keywords': 'Palavras-chave',
+  'Description': 'Descri\u00e7\u00e3o',
+  'Robots': 'Rob\u00f4s',
+  'Author': 'Autor',
+  'Encoding': 'Codifica\u00e7\u00e3o',
+  'Fullscreen': 'Tela cheia',
+  'Action': 'A\u00e7\u00e3o',
+  'Shortcut': 'Atalho',
+  'Help': 'Ajuda',
+  'Address': 'Endere\u00e7o',
+  'Focus to menubar': 'Foco no menu',
+  'Focus to toolbar': 'Foco na barra de ferramentas',
+  'Focus to element path': 'Foco no caminho do elemento',
+  'Focus to contextual toolbar': 'Foco na barra de ferramentas contextual',
+  'Insert link (if link plugin activated)': 'Inserir link (se o plugin de link estiver ativado)',
+  'Save (if save plugin activated)': 'Salvar (se o plugin de salvar estiver ativado)',
+  'Find (if searchreplace plugin activated)': 'Procurar (se o plugin de procurar e substituir estiver ativado)',
+  'Plugins installed ({0}):': 'Plugins instalados ({0}):',
+  'Premium plugins:': 'Plugins premium:',
+  'Learn more...': 'Saiba mais...',
+  'You are using {0}': 'Voc\u00ea est\u00e1 usando {0}',
+  'Plugins': 'Plugins',
+  'Handy Shortcuts': 'Atalhos \u00fateis',
+  'Horizontal line': 'Linha horizontal',
+  'Insert/edit image': 'Inserir/editar imagem',
+  'Image description': 'Inserir descri\u00e7\u00e3o',
+  'Source': 'Endere\u00e7o da imagem',
+  'Dimensions': 'Dimens\u00f5es',
+  'Constrain proportions': 'Manter propor\u00e7\u00f5es',
+  'General': 'Geral',
+  'Advanced': 'Avan\u00e7ado',
+  'Style': 'Estilo',
+  'Vertical space': 'Espa\u00e7amento vertical',
+  'Horizontal space': 'Espa\u00e7amento horizontal',
+  'Border': 'Borda',
+  'Insert image': 'Inserir imagem',
+  'Image': 'Imagem',
+  'Image list': 'Lista de Imagens',
+  'Rotate counterclockwise': 'Girar em sentido hor\u00e1rio',
+  'Rotate clockwise': 'Girar em sentido anti-hor\u00e1rio',
+  'Flip vertically': 'Virar verticalmente',
+  'Flip horizontally': 'Virar horizontalmente',
+  'Edit image': 'Editar imagem',
+  'Image options': 'Op\u00e7\u00f5es de Imagem',
+  'Zoom in': 'Aumentar zoom',
+  'Zoom out': 'Diminuir zoom',
+  'Crop': 'Cortar',
+  'Resize': 'Redimensionar',
+  'Orientation': 'Orienta\u00e7\u00e3o',
+  'Brightness': 'Brilho',
+  'Sharpen': 'Aumentar nitidez',
+  'Contrast': 'Contraste',
+  'Color levels': 'N\u00edveis de cor',
+  'Gamma': 'Gama',
+  'Invert': 'Inverter',
+  'Apply': 'Aplicar',
+  'Back': 'Voltar',
+  'Insert date/time': 'Inserir data/hora',
+  'Date/time': 'data/hora',
+  'Insert link': 'Inserir link',
+  'Insert/edit link': 'Inserir/editar link',
+  'Text to display': 'Texto para mostrar',
+  'Url': 'Url',
+  'Target': 'Alvo',
+  'None': 'Nenhum',
+  'New window': 'Nova janela',
+  'Remove link': 'Remover link',
+  'Anchors': '\u00c2ncoras',
+  'Link': 'Link',
+  'Paste or type a link': 'Cole ou digite um Link',
+  'The URL you entered seems to be an email address. Do you want to add the required mailto: prefix?': 'The URL you entered seems to be an email address. Do you want to add the required mailto: prefix?',
+  'The URL you entered seems to be an external link. Do you want to add the required http:// prefix?': 'A URL que voc\u00ea informou parece ser um link externo. Deseja incluir o prefixo http://?',
+  'Link list': 'Lista de Links',
+  'Insert video': 'Inserir v\u00eddeo',
+  'Insert/edit video': 'Inserir/editar v\u00eddeo',
+  'Insert/edit media': 'Inserir/editar imagem',
+  'Alternative source': 'Fonte alternativa',
+  'Poster': 'Autor',
+  'Paste your embed code below:': 'Insira o c\u00f3digo de incorpora\u00e7\u00e3o abaixo:',
+  'Embed': 'Incorporar',
+  'Media': 'imagem',
+  'Nonbreaking space': 'Espa\u00e7o n\u00e3o separ\u00e1vel',
+  'Page break': 'Quebra de p\u00e1gina',
+  'Paste as text': 'Colar como texto',
+  'Preview': 'Pr\u00e9-visualizar',
+  'Print': 'Imprimir',
+  'Save': 'Salvar',
+  'Find': 'Localizar',
+  'Replace with': 'Substituir por',
+  'Replace': 'Substituir',
+  'Replace all': 'Substituir tudo',
+  'Prev': 'Anterior',
+  'Next': 'Pr\u00f3ximo',
+  'Find and replace': 'Localizar e substituir',
+  'Could not find the specified string.': 'N\u00e3o foi poss\u00edvel encontrar o termo especificado',
+  'Match case': 'Diferenciar mai\u00fasculas e min\u00fasculas',
+  'Whole words': 'Palavras inteiras',
+  'Spellcheck': 'Corretor ortogr\u00e1fico',
+  'Ignore': 'Ignorar',
+  'Ignore all': 'Ignorar tudo',
+  'Finish': 'Finalizar',
+  'Add to Dictionary': 'Adicionar ao Dicion\u00e1rio',
+  'Insert table': 'Inserir tabela',
+  'Table properties': 'Propriedades da tabela',
+  'Delete table': 'Excluir tabela',
+  'Cell': 'C\u00e9lula',
+  'Row': 'Linha',
+  'Column': 'Coluna',
+  'Cell properties': 'Propriedades da c\u00e9lula',
+  'Merge cells': 'Agrupar c\u00e9lulas',
+  'Split cell': 'Dividir c\u00e9lula',
+  'Insert row before': 'Inserir linha antes',
+  'Insert row after': 'Inserir linha depois',
+  'Delete row': 'Excluir linha',
+  'Row properties': 'Propriedades da linha',
+  'Cut row': 'Recortar linha',
+  'Copy row': 'Copiar linha',
+  'Paste row before': 'Colar linha antes',
+  'Paste row after': 'Colar linha depois',
+  'Insert column before': 'Inserir coluna antes',
+  'Insert column after': 'Inserir coluna depois',
+  'Delete column': 'Excluir coluna',
+  'Cols': 'Colunas',
+  'Rows': 'Linhas',
+  'Width': 'Largura',
+  'Height': 'Altura',
+  'Cell spacing': 'Espa\u00e7amento da c\u00e9lula',
+  'Cell padding': 'Espa\u00e7amento interno da c\u00e9lula',
+  'Caption': 'Legenda',
+  'Left': 'Esquerdo',
+  'Center': 'Centro',
+  'Right': 'Direita',
+  'Cell type': 'Tipo de c\u00e9lula',
+  'Scope': 'Escopo',
+  'Alignment': 'Alinhamento',
+  'H Align': 'Alinhamento H',
+  'V Align': 'Alinhamento V',
+  'Top': 'Superior',
+  'Middle': 'Meio',
+  'Bottom': 'Inferior',
+  'Header cell': 'C\u00e9lula cabe\u00e7alho',
+  'Row group': 'Agrupar linha',
+  'Column group': 'Agrupar coluna',
+  'Row type': 'Tipo de linha',
+  'Header': 'Cabe\u00e7alho',
+  'Body': 'Corpo',
+  'Footer': 'Rodap\u00e9',
+  'Border color': 'Cor da borda',
+  'Insert template': 'Inserir modelo',
+  'Templates': 'Modelos',
+  'Template': 'Modelo',
+  'Text color': 'Cor do texto',
+  'Background color': 'Cor do fundo',
+  'Custom...': 'Personalizado...',
+  'Custom color': 'Cor personalizada',
+  'No color': 'Nenhuma cor',
+  'Table of Contents': '\u00edndice de Conte\u00fado',
+  'Show blocks': 'Mostrar blocos',
+  'Show invisible characters': 'Exibir caracteres invis\u00edveis',
+  'Words: {0}': 'Palavras: {0}',
+  '{0} words': '{0} palavras',
+  'File': 'Arquivo',
+  'Edit': 'Editar',
+  'Insert': 'Inserir',
+  'View': 'Visualizar',
+  'Format': 'Formatar',
+  'Table': 'Tabela',
+  'Tools': 'Ferramentas',
+  'Powered by {0}': 'Distribu\u00eddo por  {0}',
+  'Rich Text Area. Press ALT-F9 for menu. Press ALT-F10 for toolbar. Press ALT-0 for help': '\u00c1rea de texto formatado. Pressione ALT-F9 para exibir o menu, ALT-F10 para exibir a barra de ferramentas ou ALT-0 para exibir a ajuda'
+})
--- a/frontend/src/__global/main.js
+++ b/frontend/src/__global/main.js
@ -0,0 +1,40 @@
+// app - global
+// é uma app fundamental para o layout do sapl tradicional.
+// é importada pelo backend em seus templates
+
+import '@fortawesome/fontawesome-free/css/all.css'
+
+import 'bootstrap'
+
+import 'webpack-jquery-ui/dialog'
+import 'webpack-jquery-ui/sortable'
+import 'webpack-jquery-ui/datepicker'
+import 'webpack-jquery-ui/autocomplete'
+import 'jquery-ui/ui/i18n/datepicker-pt-BR'
+
+import 'jquery-ui-themes/themes/cupertino/jquery-ui.min.css'
+
+import 'jquery-mask-plugin'
+
+import './scss/app.scss'
+
+import './js/tinymce'
+import './js/image_cropping'
+import './js/functions'
+
+import * as moment from 'moment'
+import 'moment/locale/pt-br'
+
+// eslint-disable-next-line
+require('imports-loader?window.jQuery=jquery!./js/jquery.runner.js')
+
+window.$ = $
+window.jQuery = $
+
+window.moment = moment
+
+window.autorModal()
+window.refreshMask()
+window.refreshDatePicker()
+
+window.initTextRichEditor('#texto-rico')
--- a/frontend/src/__global/scss/_header.scss
+++ b/frontend/src/__global/scss/_header.scss
@ -0,0 +1,49 @@
+
+$blue:    #02baf2 !default;
+$red:     #f84545 !default;
+
+@import "~bootstrap/scss/functions";
+@import "~bootstrap/scss/variables";
+@import "~bootstrap/scss/mixins";
+@import "~bootstrap/scss/reboot";
+@import "~bootstrap/scss/type";
+@import "~bootstrap/scss/images";
+@import "~bootstrap/scss/code";
+@import "~bootstrap/scss/grid";
+@import "~bootstrap/scss/tables";
+@import "~bootstrap/scss/forms";
+@import "~bootstrap/scss/buttons";
+@import "~bootstrap/scss/transitions";
+@import "~bootstrap/scss/dropdown";
+@import "~bootstrap/scss/button-group";
+@import "~bootstrap/scss/input-group";
+@import "~bootstrap/scss/custom-forms";
+@import "~bootstrap/scss/nav";
+@import "~bootstrap/scss/navbar";
+@import "~bootstrap/scss/card";
+@import "~bootstrap/scss/breadcrumb";
+@import "~bootstrap/scss/pagination";
+@import "~bootstrap/scss/badge";
+@import "~bootstrap/scss/jumbotron";
+@import "~bootstrap/scss/alert";
+@import "~bootstrap/scss/progress";
+@import "~bootstrap/scss/media";
+@import "~bootstrap/scss/list-group";
+@import "~bootstrap/scss/close";
+@import "~bootstrap/scss/toasts";
+@import "~bootstrap/scss/modal";
+@import "~bootstrap/scss/tooltip";
+@import "~bootstrap/scss/popover";
+@import "~bootstrap/scss/carousel";
+@import "~bootstrap/scss/spinners";
+@import "~bootstrap/scss/utilities";
+@import "~bootstrap/scss/print";
+
+@each $color, $value in $theme-colors {
+  .btn-outline-#{$color} {
+    @include button-outline-variant($value);
+    border-color: #d6e1e5;
+  }
+}
+
+
--- a/frontend/src/__global/scss/app.scss
+++ b/frontend/src/__global/scss/app.scss
@ -0,0 +1,4 @@
+@import "header";
+
+@import "libs/libs";
+@import "layouts/layouts";
--- a/frontend/src/__global/scss/layouts/_footer.scss
+++ b/frontend/src/__global/scss/layouts/_footer.scss
@ -0,0 +1,25 @@
+
+body {
+  margin-bottom: 160px;
+}
+.footer {
+  background: #364347;
+  color: white;
+  text-align: center;
+  position: absolute;
+  width: 100%;
+  bottom: 0px;
+  p {
+    color: white;
+    margin-top: 10px;
+  }
+  .container {
+    padding-top: 25px;
+  }
+}
+
+@media (max-width: 991px) {
+  .footer {
+    position: relative;
+  }
+}
--- a/frontend/src/__global/scss/layouts/_globals.scss
+++ b/frontend/src/__global/scss/layouts/_globals.scss
@ -0,0 +1,190 @@
+html {
+  position: relative;
+  min-height: 100%;
+}
+
+h1, h2, h3, h4, h5, h6, form, dl, dt, dd, p, div, img, a {
+  margin: 0;
+  padding: 0;
+}
+h1, .h1 {
+  font-size: 30px;
+}
+h2, .h2 {
+  font-size: 24px;
+}
+h3, .h3 {
+  font-size: 20px;
+}
+h4, .h4 {
+  font-size: 16px;
+}
+h5, .h5 {
+  font-size: 14px;
+}
+h6, .h6 {
+  font-size: 12px;
+}
+
+p {
+  margin: 0.25em 0;
+  &.control-label {
+    font-weight: bold;
+  }
+}
+
+label {
+  margin-bottom: 0;
+  line-height: 1;
+}
+input[type=checkbox], input[type=radio] {
+  margin: 0 5px 0 0;
+  position: relative;
+}
+
+fieldset {
+  fieldset {
+    font-size: 95%;
+    legend {
+      font-size: 18px;
+    }
+  }
+}
+ul {
+  margin: 0;
+}
+.hidden {
+  display: none;
+}
+
+.form-control-static {
+  padding: 0.2em 0;
+  padding-left: 12px;
+  background-color: #f7f7f7;
+  &:empty {
+    display: none;
+  }
+}
+
+.legend {
+  display: block;
+  width: 100%;
+  padding: 0;
+  margin-bottom: 20px;
+  font-size: 21px;
+  line-height: inherit;
+  color: #333;
+  border: 0;
+  border-bottom: 1px solid #e5e5e5;
+  clear: both;
+}
+
+.page-header {
+  margin: 20px 0px 10px;
+}
+
+.caret {
+  &.top {
+    transform: rotate(180deg);
+  }
+}
+
+.lista-parlamentares .table td {
+  vertical-align: middle;
+}
+small {
+  color: #777;
+}
+
+.container-tabaux {
+  .sidebar-tabaux {
+    background: #fafafa;
+    margin-top: -70px;
+    padding: 10px;
+    border: 1px solid #eee;
+    .navbar-right {
+      margin: 0;
+    }
+    .nav-pills > li + li {
+      margin-left: 0px;
+    }
+    li {
+      width: 100%;
+    }
+    span {
+      display: none;
+    }
+    .dropdown-menu {
+      padding: 0px;
+      right: 10px;
+      margin-top: -5px;
+      overflow: hidden;
+      a {
+        border: 0px;
+      }
+    }
+  }
+
+  ul {
+    list-style: none;
+    padding: 0;
+  }
+
+  .list {
+    font-family: "SourceSansProSemiBold", Helvetica, Arial, sans-serif;
+    font-size: 0px;
+    display: table;
+    width: 100%;
+    margin: 0;
+
+    ul {
+      display: table;
+      width: 100%;
+      margin: 0;
+    }
+
+    li {
+      width: calc(50%);
+      display: inline-block;
+      position: relative;
+    }
+    & > li {
+      width: 100%;
+      border-bottom: 1px solid #eee;
+      padding-bottom: 20px;
+      margin-bottom: 20px;
+    }
+
+    .head_title {
+      color: #364347;
+      font-size: 1.7rem;
+      text-transform: none;
+    }
+
+    a {
+      span {
+        display: none;
+      }
+    }
+  }
+}
+.mce-branding.mce-label {
+  display: none;
+}
+
+.dont-break-out {
+  overflow-wrap: break-word;
+  word-wrap: break-word;
+  word-break: break-word;
+
+  /*-ms-hyphens: auto;
+  -moz-hyphens: auto;
+  -webkit-hyphens: auto;
+  hyphens: auto;*/
+}
+
+@media print {
+  a[href]:after {
+    content: none !important;
+  }
+}
--- a/frontend/src/__global/scss/layouts/_home_index.scss
+++ b/frontend/src/__global/scss/layouts/_home_index.scss
@ -0,0 +1,188 @@
+
+.container-home {
+  position: relative;
+  padding: 2em 1.5em 1.5em 1.5em;
+  max-width: 1000px;
+  margin: 0 auto;
+  a:hover {
+    color: #444;
+    -webkit-transition: 0.3s ease-in;
+    -moz-transition: 0.3s ease-in;
+    -o-transition: 0.3s ease-in
+  }
+
+  #homeIndex {
+    text-align: center;
+  }
+
+  .homeBanner span {
+    color: white;
+    font-size: 32px;
+    font-weight: 600;
+    display: inline-block;
+    vertical-align: middle;
+    padding: 2px 45px 4px;
+    border: 2px solid;
+  }
+
+  .homeBanner::after {
+    display: inline-block;
+    vertical-align: middle;
+    height: 100%;
+  }
+
+  .homeBlock {
+    display: inline-block;
+    position: relative;
+    background-color: #F3F3F3;
+    width: 190px;
+    height: 260px;
+    margin: 3px;
+    text-align: center;
+    font-size: 0;
+    overflow: hidden;
+  }
+
+  .homeBlock > a {
+    display: block;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+  }
+
+  .homeBlock::after {
+    content: '';
+    display: inline-block;
+    vertical-align: middle;
+    height: 100%;
+    overflow: visible;
+    clear: none;
+    visibility: initial;
+  }
+
+  .homeContent {
+    position: relative;
+    padding: 10px;
+    text-align: justify;
+    font-size: 14px;
+    color: #FFF;
+    opacity: 0;
+    transition: opacity 0.5s ease;
+    display: inline-block;
+    vertical-align: middle;
+  }
+
+  .homeContent p {
+    display: block;
+    line-height: 13px;
+    font-size: 80%;
+    color: white;
+  }
+
+  .homeIcon {
+    position: relative;
+    display: inline-block;
+    width: 105px;
+    height: 105px;
+    border-radius: 50%;
+    background: #364347;
+    z-index: 1;
+  }
+
+  .homeIcon::before {
+    content: '';
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    background: #364347;
+    top: 0;
+    left: 0;
+    transform: scale(0.95);
+    transition: transform 0.6s ease;
+  }
+
+  .homeIcon img {
+    position: absolute;
+    margin: auto;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    left: 0;
+    transition: opacity 0.4s 0.4s ease;
+  }
+
+  .homeFront {
+    position: absolute;
+    top: 46%;
+    width: 100%;
+    font-size: 0;
+    transform: translateY(-60%);
+
+  }
+
+  .homeFront h2 {
+    position: absolute;
+    margin-top: 18px;
+    font-size: 22px;
+    font-weight: 700;
+    color: #595959 !important;
+    width: 100%;
+    padding: 0 6%;
+    z-index: 0;
+  }
+
+  .homeTitle {
+    display: block;
+    height: 32px;
+    text-align: center;
+    width: 100%;
+    opacity: 0;
+    transition: opacity 0.4s ease;
+  }
+
+  .homeTitle::before {
+    content: '';
+    display: inline-block;
+    vertical-align: middle;
+    height: 100%;
+  }
+
+  .homeTitle h2 {
+    display: inline-block;
+    vertical-align: middle;
+    max-width: 110px;
+    font-size: 14px;
+    color: white !important;
+    line-height: 1em;
+  }
+
+  .homeTitle img {
+    display: inline-block;
+    vertical-align: middle;
+    height: 30px;
+    margin-right: 5px;
+  }
+
+  .homeBlock:hover .homeIcon::before {
+    transform: scale(3.6) translateY(7px);
+  }
+
+  .homeBlock:hover .homeContent{
+    opacity: 1;
+    transition-delay: 0.2s;
+  }
+
+  .homeBlock:hover .homeIcon img {
+    opacity: 0;
+    transition-duration: 0.2s;
+    transition-delay: 0s;
+  }
+
+  .homeBlock:hover .homeTitle {
+    opacity: 1;
+  }
+
+}