@mobiage/base v2.29.0

mobiage-base

Módulo que tem como objetivo servir de base para dashboards desenvolvidos pela Mobiage. O mobiage-base é composto pelos seguintes componentes:

• Base (<mbg-base>)
• Topbar (<mb-topbar>)
• Container (<mb-container>) e (<mb-content>)
• Sidemenu (<mb-sidemenu>)
• PageLoader (<mb-pageloader>)
• TopNotifications (<mb-notifications>)

Implementando o mobiage-base

Este módulo é privado, faça o login no npm com o comando npm login com uma conta autorizada e instale:

yarn add @mobiage/base

ou

npm i --save @mobiage/base

Faça o import do módulo com:

/* Import do css */
import '@mobiage/base/dist/mobiage-base.min.css'
/* Import do javascript */
import '@mobiage/base/dist/mobiage-base.min'

Declare a dependência na sua aplicação:

/* O módulo está identificado por 'mbg.base' */
angular.module('app', ['mbg.base'])

Os componentes do módulo foram desenvolvidos para serem utilizados em conjunto. Portanto, uma instalação típica do mobiage-base deverá se parecer com:

<mbg-base config="configBase">
  <mb-topbar config="configTopbar"></mb-topbar>
  <mb-container>
    <mb-sidemenu config="configMenu"></mb-sidemenu>
    <mb-content>
      <!-- Conteúdo do sistema -->
    </mb-content>
  </mb-container>
  <mb-pageloader></mb-pageloader>
</mbg-base>
<mb-notifications></mb-notifications>

Inicialmente, é necessário configurar qual tema a base irá utilizar. Para isso, passe um objeto de configuração com o atributo theme para a binding config no componente base. Por exemplo, para definir que utilizaremos o theme1, precisamos configurar o objeto:

$scope.configBase = {
  theme: 'theme1'
}

E depois passamos esse objeto para o base:

<mbg-base config="configBase">

Objeto de configuração do componente base (<mbg-base>)

O mesmo ocorre com os outros componentes. Portanto:

Objeto de configuração do componente Topbar (<mb-topbar>)

Exemplo:

$scope.configTopbar = {
  logo: 'assets/img/logo.png',
  logoActionType: 'state',
  logoAction: 'app.home',
  user: {
    name: 'Amália Fernandes',
    avatar: 'assets/img/perfil.png',
    links: [
      {
        label: 'Testar Loader',
        iconSrc: 'fontawesome',
        icon: 'fas fa-exchange-alt',
        iconSize: '22',
        actionType: 'function',
        action: () => {
          console.log('Ação personalizada')
        }
      },
      {
        label: 'Trocar de Conta',
        iconSrc: 'fontawesome',
        icon: 'fas fa-exchange-alt',
        iconSize: '22',
        actionType: 'internal',
        action: 'changeAccount'
      },
      {
        label: 'Sair',
        iconSrc: 'fontawesome',
        icon: 'fas fa-sign-out-alt',
        iconSize: '22',
        actionType: 'link',
        action: '#logout'
      }
    ],
    actualOrganization: {
      name: 'Spotify',
      subTitle: 'Spotify Limitada ME.',
      avatar: 'assets/img/logo_company.png',
      editAction: () => { 
        console.log('EDITAR');
      },
      editActionType: 'function',
      info: [
        { title: 'Razão Social', text: 'Spotify Stream Digital World' },
        { title: 'Nome Fantasia', text: 'Spotify Brasil' },
        { title: 'CNPJ', text: '910293.28201.1234' },
        { title: 'Inscrição Social', text: '910293.29201.1234' }
      ]
    },
    otherOrganizations: [
      {
        name: 'Apple Inc',
        logo: 'https://hcil.umd.edu/wp-content/uploads/2015/12/Apple-logo.png'
      }, {
        name: 'Dell',
        logo: 'https://upload.wikimedia.org/wikipedia/commons/1/18/Dell_logo_2016.svg'
      }
    ],
    changeOrganizationAction: (organizationSelected) => {
      console.log(organizationSelected);
    }
  },
  search: {
    indexFields: [{ name: 'name' }],
    data: [
      {
        type: 'static',
        data: [
          {
            type: 'Clientes',
            name: 'Alfredo Peres',
            empresa: 'Mobiage',
            cpf: '029.202.594-54',
            action: '#clientes/029.202.594-54',
            actionType: 'link'
          },
          {
            type: 'Clientes',
            name: 'Thiago Martins',
            cpf: '208.290.390-45',
            actionType: 'function',
            action: () => {
              console.log('Thiago Martins');
            }
          }
        ]
      },
      {
        type: 'static',
        data: 'sideMenuLinks'
      }
    ]
  }
};

A barra do topo recebe um objeto de configuração que pode ter os atributos:

Atributos do objeto de configuração do user:

Atributos do objeto de configuração do user.actualOrganization:

Atributos dos objetos da array de objetos user.actualOrganization.info:

Atributos dos objetos da array de objetos user.otherOrganizations:

Apenas dois atributos são necessários. Você pode colocar mais informações no objeto como o id da organização, por exemplo, para uso posterior na changeOrganizationAction.

Nem sempre é possível ter todos esses dados na configuração inicial do componente, portanto, você pode incluir apenas os dados mais básicos e inicialmente e então atualizar incrementalmente com a service mbUserService.

Atributos do objeto de configuração do search:

O search precisa de dois atributos, um com informações á serem buscadas e outro com os índices da busca

Atributos dos objetos da array de objetos do search.data:

Atributos dos objetos da array de objetos do search.data.data:

Abaixo estão os únicos atributos obrigatórios do search.data.data, você pode inserir mais dados nos objetos de dados, porém eles não serão usados até você indicar no search.indexFields que é necessário buscar por eles.

Atributos dos objetos da array de objetos search.indexFields:

Você precisa indicar aqui todos os dados que serão usados nas buscas. Por exemplo: Na lista de links do menu lateral, precisamos buscar pelo nome dos links (texto do botão). Ao importar os links do menu lateral com o tipo 'sideMenuLinks' no atributo data, precisamos indicar no indexFields que o índice com o nome 'name' deverá ser considerado, portanto, deve ser adicionado a seguinte configuração:

indexFields: [
  {
    name: 'name'
  }
]

Caso você queira adicionar uma lista estática de clientes, por exemplo, e deseja que o CPF dos clientes seja considerado na busca, você deve adicionar:

indexFields: [
  {
    name: 'name'
  },
  {
    name: 'cpf'
  }
]

Basta o dado ter uma key cpf no objeto, que ele será buscado. Porém, deve ser notado que atualmente apenas o índice name, é mostrado no autocomplete e usado para highlight de digitação.

Objeto de configuração do componente Side Menu (<mb-sidemenu>)

Exemplo:

const config = {
  structure: [{
    type: 'category',
    label: 'Categoria',
    children: [
      {
        type: 'sub-category',
        label: 'Sub-Categoria',
        children: [
          {
            type: 'btn',
            label: 'Item comum',
            actionType: 'link',
            action: 'http://www.google.com',
          },
          {
            type: 'btn',
            label: 'Texto que quebra em duas linhas',
            actionType: 'state',
            action: 'app.home'
          },
          {
            type: 'btn',
            iconSrc: 'fontawesome',
            icon: 'fas fa-heart',
            label: 'Font Awesome',
            actionType: 'function',
            action: () => {
              console.log('Olá mundo!')
            }
          },
          {
            type: 'btn',
            iconSrc: 'material',
            icon: 'movie',
            label: 'Material Design',
            actionType: 'link',
            action: '#'
          },
          {
            type: 'btn',
            iconSrc: 'https://upload.wikimedia.org/wikipedia/commons/5/53/Google_%22G%22_Logo.svg',
            label: 'Custom Icon',
            actionType: 'link',
            action: '#'
          },
          {
            type: 'btn',
            iconSrc: 'data:image/png;base64,iVBORw0[..]KGgoAAA=',
            label: 'Custom Base 64 Icon',
            actionType: 'link',
            action: '#'
          },
          {
            type: 'btn',
            iconSrc: 'fontawesome',
            icon: 'fas fa-ambulance',
            iconSize: '25',
            label: 'Custom Size Icon FA',
            actionType: 'link',
            action: '#'
          },
          {
            type: 'btn',
            iconSrc: 'material',
            icon: 'weekend',
            iconSize: '25',
            label: 'Custom Size Icon MD',
            actionType: 'link',
            action: '#'
          }
        ]
      }
    ]
  }],
  quickMenu: {
    enabled: true,
    buttonText: 'Cadastro',
    links: [
      {
        label: 'Clientes',
        iconSrc: 'fontawesome',
        icon: 'far fa-user',
        actionType: 'link',
        action: '#'
      },
      {
        label: 'Produtos',
        iconSrc: 'fontawesome',
        icon: 'far fa-sticky-note',
        actionType: 'link',
        action: '#'
      }
    ]
  }
};

O menu lateral recebe um objeto de configuração que pode ter os atributos:

Cada item do atributo structure tem os seguintes atributos:

Atributos específicos para itens do tipo 'btn':

Atributos do objeto de configuração do quickMenu:

Services

mbUserService

Service para atualização dos dados de usuário da barra do topo.

Métodos:

MbgPageLoader

Service para abrir ou fechar o MbgPageLoader

Métodos:

MbgNotification

Service para abrir e fechar notificações do MbgNotification

Métodos:

Existe um método de fechamento para cada tipo de notificação pois cada tipo de notificação tem a sua própria fila.

Atributos da configuração de notificações:

Providers

mbTheme

Provider para configuração de tema

Métodos: