Prepara o SIGI para usar a app Django-dashboard

sigi/settings.py

@@ -70,6 +70,7 @@ INSTALLED_APPS = [
     "sigi.apps.servicos",
     "sigi.apps.servidores",
     "sigi.apps.utils",
+    "dashboard",
 ]
 
 MIDDLEWARE = [
@@ -128,9 +129,10 @@ TEMPLATES = [
                 "django.contrib.auth.context_processors.auth",
                 "django.contrib.messages.context_processors.messages",
                 "django.template.context_processors.media",
+                "django.template.context_processors.request",
                 "djbs.context_processors.sets",
+                "dashboard.context_processors.dashboard",
                 "sigi.apps.utils.context_processors.site_context",
-                "sigi.apps.home.context_processors.dashboard",
             ],
         },
     },

sigi/static/css/dashboard.css

@@ -1,136 +1,3 @@
-table.servicos {
+.card {
-    width: 100%;
-}
-
-table.numeros>tbody>tr>td {
-    text-align: right;
-}
-
-.app>.card>.card-content>.card-title {
-    font-size: 16px;
-    font-weight: bolder;
-}
-
-.full-preloader {
-    width: 100%;
     height: 100%;
-    background-color: rgb(255, 255, 255, 0.8);
-    position: absolute;
-    z-index: 2;
-    display: flex;
-    align-items: center;
-    justify-content: space-around;
-}
-
-.user_thumb {
-    width: 24px;
-    height: 24px;
-    margin-right: 1rem;
-}
-
-.gerente_selector {
-    width: 100%;
-    border: none;
-}
-
-.card-links {
-    padding: 0 24px;
-}
-
-.tab-edit,
-.tab-control {
-    display: inline-block;
-    text-align: center;
-    line-height: 48px;
-    height: 48px;
-    padding: 0;
-    margin: 0;
-    text-transform: uppercase;
-}
-
-.tab-edit a,
-.tab-control a {
-    display: block;
-    width: 100%;
-    height: 100%;
-    padding: 0 24px;
-    font-size: 14px;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    transition: color .28s ease, background-color .28s ease;
-}
-
-.dashbar {
-    background: var(--main-hover-color);
-    opacity: .8;
-    color: #fff;
-    padding: 10px;
-    border: none;
-    text-align: left;
-}
-
-.dashtabs {
-    position: relative;
-    overflow-x: auto;
-    overflow-y: hidden;
-    height: 48px;
-    width: 100%;
-    background-color: #fff;
-    margin: 0 auto;
-    white-space: nowrap;
-    list-style-type: none;
-    display: block;
-    margin-block-start: 1em;
-    margin-block-end: 1em;
-    margin-inline-start: 0px;
-    margin-inline-end: 0px;
-    padding-inline-start: 40px;
-}
-
-.dashtabs .tabitem {
-    display: inline-block;
-    font-weight: normal;
-    height: 48px;
-    line-height: 48px;
-    margin: 0;
-    padding: 0;
-    text-transform: uppercase;
-    text-align: center;
-}
-
-.dashtabs .tabitem .active {
-    font-weight: bolder;
-}
-
-.dashtabs .tabitem a,
-.dashtabs .tabitem p {
-    display: block;
-    width: 100%;
-    height: 100%;
-    padding: 0 24px;
-    font-size: 14px;
-    text-overflow: ellipsis;
-    overflow: hidden;
-}
-
-.dashtabs .tabitem i {
-    line-height: unset;
-    color: var(--primary);
-}
-
-.dashtab {
-    width: 100%;
-}
-
-.dash-modal-header {
-    font-size: 1.2em;
-    display: block;
-    text-transform: uppercase;
-}
-
-.xlsx-download {
-    height: 24px;
-}
-.collapsible-body>hr {
-    height: 1px;
 }

sigi/static/js/dashboard.js

@@ -1,122 +0,0 @@
-$(document).ready(function () {
-  $(".dash-control").hide();
-  try {
-    M.Tabs.init($('.tabs'), {});
-  } catch {
-    // fail gracefully
-  }
-  $(".remove-card").off("click").on("click", function (e) {
-    e.preventDefault();
-    var $this = $(this);
-    var context = $this.parents("li");
-    $.ajax({
-      url: $this.attr("href"),
-      method: 'GET',
-      context: context,
-      success: function (data) {
-        $(this).remove();
-        M.toast({ html: data.result })
-      },
-      error: function (jqXHR, textStatus, errorThrown) {
-        console.log(errorThrown);
-        M.toast({ html: `${textStatus}: ${errorThrown}` });
-      }
-    })
-  });
-  $(".tab-edit a").off("click").on("click", function (e) {
-    e.preventDefault();
-    $(".dash-control").toggle();
-    if ($(".dash-control").is(':visible')) {
-      $(".sortable").sortable({
-        update: function (e, ui) {
-          var parent = ui.item.parent();
-          var url = parent.attr("data-target-url");
-          var dados = { 'categoria': parent.attr("data-tab-name") };
-          parent.children().each(function (pos) {
-            dados[$(this).attr("data-card-id")] = pos + 1;
-          })
-          $.get(url, dados, function (data) {
-            M.toast({ html: data.response })
-          });
-        }
-      });
-      $(".sortable").sortable("enable");
-    } else {
-      $(".sortable").sortable("disable");
-    }
-  })
-  Chart.defaults.plugins.legend.labels.usePointStyle = true;
-  setlinks();
-  $("div[data-source]").each(function (index, container) {
-    var container = $(container);
-    var url = container.attr('data-source');
-    get_content(container, url);
-  });
-  $("canvas[data-source]").each(function (index, canvas) {
-    var canvas = $(canvas)
-    var url = canvas.attr("data-source");
-    plot_chart(canvas, url);
-  });
-});
-
-function setlinks() {
-  try {
-    M.Modal.init($('.modal'), {});
-    M.Dropdown.init($('.dropdown-trigger'), {});
-    M.Collapsible.init($('.collapsible'), {});
-  } catch (e) {
-    console.log("A exception has ocurred", e)
-  }
-  $("a.dashlink[data-target]").off('click').on('click', function (e) {
-    e.preventDefault();
-    var $this = $(this);
-    var target = $("#" + $this.attr('data-target'));
-    var url = $this.attr('href');
-    if (target.is("canvas")) {
-      plot_chart(target, url);
-    } else if (target.is("div")) {
-      get_content(target, url);
-    }
-  });
-}
-
-function get_content(container, url) {
-  container.closest('.card').find('.full-preloader').removeClass('hide');
-  $.get(url, function (data) {
-    container.html(data);
-    container.closest('.card').find('.full-preloader').addClass('hide');
-    setlinks();
-  }).fail(function () {
-    container.closest('.card').find('.full-preloader').html("Ocorreu um erro. Tente recarregar a página");
-  });
-}
-
-function plot_chart(canvas, url) {
-  canvas.closest('.card').find('.full-preloader').removeClass('hide');
-  $.get(url, function (data) {
-    var chart_name = canvas.attr("data-chart-name");
-    var has_action_links = canvas.attr("data-has-action-links");
-
-    var new_canvas = $(canvas.clone()).insertBefore(canvas);
-    canvas.remove();
-    canvas = new_canvas;
-    canvas.removeClass("hide");
-
-    var ctx = canvas.get(0).getContext("2d");
-    var myChart = new Chart(ctx, data);
-
-    if (has_action_links) {
-      if (data.actionblock) {
-        $(`#${chart_name}-action-links`).html(data.actionblock).removeClass("hide");
-      } else {
-        $(`#${chart_name}-previlink`).attr('href', data.prevlink);
-        $(`#${chart_name}-nextlink`).attr('href', data.nextlink);
-        $(`#${chart_name}-action-links`).removeClass("hide");
-      }
-    }
-    setlinks();
-    canvas.closest('.card').find('.full-preloader').addClass('hide');
-  }).fail(function () {
-    canvas.closest('.card').find('.full-preloader').html("Ocorreu um erro. Tente recarregar a página");
-  });
-}

sigi/templates/admin/dashboard.html

@@ -0,0 +1,26 @@
+{% load i18n djbs_extras %}
+
+{% if dashboard.dash_apps|length > 1 %}
+  <ul class="nav nav-tabs" id="sigiDashTab" role="tablist">
+    {% for app in dashboard.dash_apps.keys %}
+      <li class="nav-item" role="presentation">
+        <button class="nav-link{% if forloop.first %} active{% endif %}" id="{{ app.name|slugify }}-tab" data-bs-toggle="tab" data-bs-target="#{{ app.name|slugify }}-tab-pane" type="button" role="tab" aria-controls="{{ app.name|slugify }}-tab-pane"{% if forloop.first %} aria-selected="true"{% endif %}>{{ app.verbose_name }}</button>
+      </li>
+    {% endfor %}
+  </ul>
+{% endif %}
+
+<div class="tab-content pt-2" id="sigiDashTabContent">
+  {% for app, cards in dashboard.dash_apps.items %}
+    <div class="tab-pane fade show{% if forloop.first %} active{% endif %}" id="{{ app.name|slugify }}-tab-pane" role="tabpanel" aria-labelledby="{{ app.name|slugify }}-tab" tabindex="0">
+      <div class="row row-cols-1 row-cols-md-2 g-2">
+        {% for card in cards.values %}
+          <div class="col">
+            {{ card }}
+          </div>
+        {% endfor %}
+      </div>
+    </div>
+  {% endfor %}
+</div>
+

sigi/templates/admin/index.html

@@ -0,0 +1,12 @@
+{% extends 'admin/index.html' %}
+
+{% block extrahead %}
+  {{ block.super }}
+  {{ dashboard.media }}
+{% endblock %}
+
+{% block content %}
+  <div id="content-main" class="dashboard py-2">
+    {% include 'admin/dashboard.html' %}
+  </div>
+{% endblock %}

sigi/urls.py

@@ -21,6 +21,9 @@ from django.contrib import admin
 from django.urls import path, include
 from django.views.generic import TemplateView, RedirectView
 
+from dashboard.registry import dashboard
+from django.views.generic import TemplateView
+
 urlpatterns = [
     path("casas/", include("sigi.apps.casas.urls")),
     path("ocorrencias/", include("sigi.apps.ocorrencias.urls")),
@@ -33,6 +36,7 @@ urlpatterns = [
     path("admin/ocorrencias/", include("sigi.apps.ocorrencias.admin_urls")),
     path("admin/utils/", include("sigi.apps.utils.admin_urls")),
     path("admin/", admin.site.urls),
+    path("dash/", dashboard.urls),
     path(
         "api/",
         RedirectView.as_view(pattern_name="swagger-ui", permanent=False),