feat: implementa configuração dashboard tabs e cards nas entidades

Plugin.php

@@ -8,31 +8,46 @@ class Plugin extends \MapasCulturais\Plugin
 {
     function __construct($config = [])
     {
-        $config += [
-            'links' => [],
-            'cards' => [],
-        ];
-
         parent::__construct($config);
     }
 
     public function _init()
     {
         $app = App::i();
         //load css
-        $app->hook('<<GET|POST>>(<<metabase|site>>.<<*>>)', function() use ($app) {
+        $app->hook('<<GET|POST>>(<<*>>.<<*>>)', function() use ($app) {
             $app->view->enqueueStyle('app-v2', 'metabase', 'css/plugin-metabase.css');
         });
-        $app->hook("component(home-feature):after", function() {
+        $app->hook('component(home-feature):after', function() {
             /** @var \MapasCulturais\Theme $this */
             $this->part('home-metabase');
         });
 
+        $app->hook('template(search.agents.search-tabs):after', function(){
+            $this->part('search-tabs/agent');
+        });
+
+        // $app->hook('template(search.spaces.search-tabs):after', function(){
+        //     $this->part('search-tabs/space');
+        // });
+
+        $app->hook('template(search.agents.search-header):after', function(){
+            $this->part('search-tabs/entity-agent-cards');
+        });
+
+        // $app->hook('template(search.spaces.search-header):after', function(){
+        //     $this->part('search-tabs/entity-space-cards');
+        // });
+
         $self= $this;
-        $app->hook("app.init:after", function() use ($self){
+        $app->hook('app.init:after', function() use ($self){
             $this->view->metabasePlugin = $self;
         });
 
+        $app->hook('component(mc-icon).iconset', function(&$iconset) {
+            $iconset['indicator'] = 'cil:chart-line';
+        });
+
     }
 
     public function register()

README.md

@@ -37,7 +37,48 @@ Criação do arquivo de configuração do plugin Metabase.php no diretório conf
                     'title' => 'TITULO_DASHBOARD'
                 ],
             ],
+            'cards' => [
+              // cards que aparecem na home
+              'home' => [
+                  [
+                      'type' => 'agent',
+                      'label' => '',
+                      'icon'=> 'agent',
+                      'iconClass'=> 'agent__color',
+                      'panelLink'=> 'painel-agentes',
+                      'data'=> [
+                          [
+                              'icon'=> 'agent',
+                              'label' => 'Agentes cadastrados',
+                              'entity' => 'MapasCulturais\\Entities\\Agent',
+                              'query' => [],
+                              'value' => null
+                          ],
+                      ]
+                  ],     
+              ],
+              // cards que aparecem na entidade (página de pesquisa)
+              'entities' => [
+                  [
+                      'type' => 'agent',
+                      'label' => '',
+                      'icon'=> 'agent',
+                      'iconClass'=> 'agent__color',
+                      'panelLink'=> 'painel-agentes',
+                      'data'=> [
+                          [
+                              'id' => 'agentes-cadastrados',
+                              'icon'=> 'agent',
+                              'label' => 'Agentes cadastrados',
+                              'entity' => 'MapasCulturais\\Entities\\Agent',
+                              'query' => [],
+                              'value' => null
+                          ],
+                      ]
+                  ],
+              ]
+            ]
         ]
     ]
 ];
-```
+```

assets-src/sass/4-components/_entity-cards.scss

@@ -0,0 +1,126 @@
+@use '../2-atoms/a-mixins' as *;
+
+
+.entity-cards {
+    margin: 0 auto;
+    position: relative;
+    display: flex;
+    align-items: center;
+    overflow: hidden;
+    flex-direction: column;
+    padding: 2px;
+
+    &__header {
+        margin: 0 auto;
+        width: 100%;
+        display: grid;
+        align-items: center;
+        grid-template-columns: 1fr size(455);
+
+        @media (max-width:size(600)) {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+        }
+    }
+
+    &__panel {
+        display: flex;
+        flex-direction: column;
+        gap: size(12);
+    }
+
+
+    &__content {
+        align-items: stretch;
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        margin: 0 auto;
+        max-width: size(1170);
+        z-index: 2;
+        gap: size(18) size(13);
+
+
+        @media (max-width:size(500)) {
+            gap: size(18) 0;
+        }
+    }
+}
+
+.entity-cards-cards {
+    width: size(220);
+    max-width: 100%;
+    background-color: var(--mc-white);
+    border: size(2) solid var(--mc-gray-100);
+    box-shadow: 2px 2px 8px 0px #00000040;
+    // border: size(1) solid red;
+    border-radius: size(8);
+    display: grid;
+    align-content: space-between;
+    padding: size(5);
+
+    &__header {
+        display: grid;
+        grid-template-columns: size(32) 1fr;
+        gap: size(16);
+    }
+    &__icon {
+        background-color: var(--mc-white);
+        align-self:self-start;
+        color: #EF7B45;
+    }
+
+    &__content {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        align-items: end;
+        text-align: center;
+        border-radius: size(8);
+
+    }
+
+    &__number {
+        font-size: var(--mc-font-size-lg)
+    }
+
+    &__label {
+
+        color: #666666;
+        font-size: var(--mc-font-size-xxxs);
+    }
+
+    &__info {
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+
+        align-items: left;
+        text-align: left;
+        margin-left: size(2);
+    }
+
+    &--double & {
+        &__content {
+            grid-template-columns: 1fr 1fr;
+        }
+
+        &__info:first-of-type .metabase-card__number {
+            font-size: var(--mc-font-size-lg);
+
+            &--long {
+                font-size: var(--mc-font-size-sm);
+            }
+        }
+
+        &__number {
+            font-size: var(--mc-font-size-md);
+        }
+
+    }
+    @media (max-width:size(500)){
+        min-width: size(297);
+        width: 100%;
+    }
+}

assets-src/sass/plugin-metabase.scss

@@ -17,6 +17,7 @@
 @import '4-components/metabase-dashboard';
 @import '4-components/metabase-card';
 @import '4-components/single-dashboard';
+@import '4-components/entity-cards';
 
 
 /* ----- 5: AREAS ------- */

components/entity-cards/README.md

@@ -0,0 +1,47 @@
+# Componente `<__template__>`
+A ideia do componente `__template__` é servir de modelo para a criação de novos componentes. Este implementa um exemplo 
+de componente que manipula um objeto do tipo `Entity` e dispara um evento quando este for modificado.
+
+Este documento (README.md) deve conter a descrição do que o componente faz e toda a interface pública do componente.
+
+Neste exemplo, o componente recebe obrigatoriamente um nome e uma entidade e opcionalmente um apelido (nickname) e um sobrenome.
+Baseado nos parâmetros passados para o componente, este gera um `displayName` e um `fullname`.
+
+Quando o botão "Definir Nomes" é clicado, este definirá o `entity.name` e `entity.nomeCompleto` com o valores `displaName` e `fullname`, 
+respectivamente, e emitirá o evento `namesDefined`, que poderá ser capturado fora do componente.
+
+### Eventos
+- **namesDefined** - disparado quando o método `defineNames` é chamado, após a definição do `name` e `nomeCompleto`
+
+## Propriedades
+- *Entity **entity*** - Entidade
+- *String **name*** - Nome
+- *String **lastname** = ''* - Sobrenome
+
+## Slots
+- **default** `{fullname, displayName, compareDisplayName, compareFullname}`: informações dos nomes e comparação com o nome gerado
+
+### Importando componente
+```PHP
+<?php 
+$this->import('__template__');
+?>
+```
+### Exemplos de uso
+```HTML
+<!-- utilizaçao básica -->
+<__template__ :entity="entity" name="Fulano"></__template__>
+
+<!-- utilizano o evento on-names-defined para salvar a entidade -->
+<__template__ :entity="entity" name="Fulano" nickname="Lano" @names-defined="entity.save()"></__template__>
+
+<!-- utilizano o evento on-names-defined para salvar a entidade -->
+<__template__ :entity="entity" name="Fulano" nickname="Lano" @names-defined="entity.save()" #default="props">
+    <div v-if="props.compareDisplayName"> o nome está atualizado</div>
+    <div v-if="!props.compareDisplayName"> o novo nome será <strong>{{props.displayName}}</strong></div>
+
+    <div v-if="props.compareFullname"> o nome completo está atualizado</div>
+    <div v-if="!props.compareFullname"> o novo nome completo será <strong>{{props.fullname}}</strong></div>
+</__template__>
+
+```

components/entity-cards/init.php

@@ -0,0 +1,25 @@
+<?php
+
+use MapasCulturais\ApiQuery;
+use MapasCulturais\App;
+
+$app = App::i();
+
+$cards = $app->config['Metabase']['config']['cards']['entities'];
+
+$app->applyHook('component(home-metabase).data', [&$cards]);
+
+foreach ($cards as &$card) {
+    foreach ($card['data'] as &$data) {
+        $query = $data['query'];
+        $entity = $data['entity'];
+        $api_query = new ApiQuery($entity, $query);
+        $data['data'] = $api_query->getFindResult();
+        $data['value'] = $api_query->getCountResult();
+    }
+}
+
+$this->jsObject['config']['homeMetabase'] = $cards;
+
+return;
+

components/entity-cards/script.js

@@ -0,0 +1,61 @@
+app.component('entity-cards', {
+    template: $TEMPLATES['entity-cards'],
+
+    props: {
+        classes: {
+            type: [String, Array, Object],
+            required: false
+        },
+        type: {
+            type: String,
+            default: '',
+        },
+    },
+
+    setup({ slots }) {
+        const hasSlot = name => !!slots[name];
+        const text = Utils.getTexts('entity-cards')
+        return { text, hasSlot }
+    },
+
+    data() {
+        const cards = $MAPAS.config.homeMetabase.filter((c) => {
+            return c.type == this.type
+        });
+
+        cards.map((c) => {
+            c.data.map((d) => {
+                if (d.id == 'agentes-cadastrados-7-dias') {
+                    const today = new Date();
+                    const sevenDaysBefore = new Date();
+                    sevenDaysBefore.setDate(today.getDate() - 7);
+
+                    const newData = d.data.filter(dd => {
+                        const dateObject = new Date(dd.createTimestamp.date);
+                        return dateObject >= sevenDaysBefore && dateObject <= today;
+                    });
+
+                    d.value = newData.length;
+                    return d;
+                }
+
+                return d;
+            });
+        });
+
+        return {
+            cards: cards,
+        }
+    },
+
+    computed: { },
+
+    methods: {
+        lengthClass(text) {
+            const textString = String(text);
+            if (textString.length > 5) {
+                return 'metabase-card__number--long';
+            }
+        },
+    },
+});