Skip to content
This repository has been archived by the owner on Mar 10, 2020. It is now read-only.

mobiagelabs/mobiage-base

BranchesTags

Repository files navigation

mobiage-base

awesome topage

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>)

Tipo Nome Descrição
string theme Define o tema que será utilizado, consulte lista de temas disponveis no arquivo 'src/themes/themes.style.scss'.

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:

Tipo Nome Descrição
string logo Link para a imagem que será utilizada como logo no topo
string logoActionType Tipo de ação que será feita ao clicar na imagem da logo, pode ser um entre: 'link', 'function' ou 'state'.
string ou function logoAction Define a ação da imagem da logo, o conteúdo deste atributo depende do tipo de ação que você escolheu no atributo logoActionType:
1. 'link': String com uma url válida;
2. 'state': String com o nome de um state (do ui-router) válido para transição;
3. 'function': Função que será executada ao clicar no botão;
object user Objeto de configuração do campo de usuário da barra do topo.
object search Objeto de configuração do campo de busca da barra do topo.

Atributos do objeto de configuração do user:

Tipo Nome Descrição
string name String com o nome do usuário.
string avatar Url para a imagem utilizada como avatar do usuário, mantenha undefined quando não houver avatar.
array<Object> links Array de Objetos que definirão os botões de ação do menu do usuário, esses objetos têm exatamente os mesmos atributos que o botão do menu lateral, com um actionType adicional. Para realizar métodos internos do mobiage-base (como listar outras organizações), você deve usar actionType:'internal' e então definir o atributo action com uma ação interna:
1. 'changeAccount'
Object actualOrganization Objeto de configuração para definir os dados da organização que estiver sendo usada na sessão
array<Object> otherOrganizations Array de Objetos de outras empresas para tornar possível a listagem e troca de organização
function(selectedOrganization) changeOrganizationAction Função responsável por realizar a troca de organização em sua aplicação. Essa função recebe como parâmetro a organização selecionada.

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

Tipo Nome Descrição
string name String com o nome fantasia da organização.
string subTitle Texto que fica acima do nome da organização, geralmente a razão social é usada
string avatar Url para a imagem utilizada como avatar da organização, mantenha undefined quando não houver avatar.
string editActionType Tipo de ação que será feita ao clicar no botão de edição de organização, pode ser um entre: 'link', 'function' ou 'state'.
string ou function editAction Define a ação do botão de edição de organização, o conteúdo deste atributo depende do tipo de ação que você escolheu no atributo editActionType:
1. 'link': String com uma url válida;
2. 'state': String com o nome de um state (do ui-router) válido para transição;
3. 'function': Função que será executada ao clicar no botão;
array<Object> info Array de Objetos para exibição de informações sobre a empresa no menu da empresa.

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

Tipo Nome Descrição
string title String com o título da informação á ser exibida.
string text String com o texto da informação.

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.

Tipo Nome Descrição
string name String com o nome fantasia da organização.
string avatar Url para a imagem utilizada como avatar da organização, mantenha undefined quando não houver avatar.

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

Tipo Nome Descrição
array<Object> data Array de objetos com os dados á serem buscados
array<Object> indexFields Array de objetos com os índices que serão utilizados na busca.

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

Tipo Nome Descrição
string type Tipo de dado que será usado para busca. A ideia aqui era ter a possibilidade de indicar que um dado será estático ou dinâmico, porém apenas o tipo estático foi desenvolvido até o momento. Portanto, apenas a opção 'static' é valida.
string ou array<Object> data Array de Objetos com os dados para busca. Para usar os links do menu lateral como entrada de dados, passe a string 'sideMenuLinks' neste atributo

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.

Tipo Nome Descrição
string type Tipo do dado (Ex.: Clientes, Empresas, Fornecedores). Este atributo é usado para agrupar os dados do mesmo tipo no autocomplete da busca.
string name String que será exibida no autocomplete
string actionType Define o tipo de ação do botão do autocomplete, pode ser um entre: 'link', 'function' ou 'state'.
string ou function action Define a ação do botão, o conteúdo deste atributo depende do tipo de ação que você escolheu no atributo actionType:
1. 'link': String com uma url válida;
2. 'state': String com o nome de um state (do ui-router) válido para transição;
3. 'function': Função que será executada ao clicar no botão;

Atributos dos objetos da array de objetos search.indexFields:

Tipo Nome Descrição
string name Único atributo obrigatório, é o nome que será usado ao procurar o índice nas informações á serem buscadas.

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:

Tipo Nome Descrição
array <Object> structure Define a estrutura de links do menu lateral, recebendo uma array de objetos. Cada objeto define um item do menu lateral.
object quickMenu Objeto de configurações do menu rápido.

Cada item do atributo structure tem os seguintes atributos:

Tipo Nome Descrição
string type define o tipo de item, pode ser um entre 'category', 'sub-category', 'btn'.
string label define o texto do item, nos itens do tipo 'category' ou 'sub-category' esse atributo define o título.
array <Object> children define os itens que estarão abaixo deste na hiearquia do menu, apenas o item do tipo 'btn' não aceita este atributo.

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

Tipo Nome Descrição
string iconSrc Define a origem do ícone, pode ser uma das seguintes opções:
1. Link direto para imagem do ícone (ou string base64)
2.'material'
3.'fontawesome'
string icon Caso seja utilizado os valores 'material' ou 'fontawesome' no iconSrc, você deve informar neste atributo os seletores de classes do ícone (no caso do fontawesome) ou o nome do ícone (no caso do material design) que você deseja utilizar.
Por exemplo: Para utilizar o ícone do android usando o fontawesome, precisamos passar o valor: 'fab fa-android'. Para utilizar o mesmo ícone, mas com a fonte do material design, precisamos passar o valor: 'android'.
string iconSize Define um tamanho personalizado para o ícone.
string actionType Define o tipo de ação do botão, pode ser um entre: 'link', 'function' ou 'state'.
string ou function action Define a ação do botão, o conteúdo deste atributo depende do tipo de ação que você escolheu no atributo actionType:
1. 'link': String com uma url válida;
2. 'state': String com o nome de um state (do ui-router) válido para transição;
3. 'function': Função que será executada ao clicar no botão;

Atributos do objeto de configuração do quickMenu:

Tipo Nome Descrição
boolean enabled Ativa ou desativa o menu rápido;
string buttonText Define o texto do botão;
array <Object> links Array de objetos para configurar os links do menu rápido. (Cada link é configurado por um objeto com os mesmos atributos dos itens do tipo 'btn' acima).

Services

mbUserService

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

Métodos:

Nome Descrição
.getUser() Retorna o objeto de usuário sendo usado no momento pela service e pelo componente de usuário da barra do topo.
.setUser(<Object>) Seta o objeto de configuração do usuário. Internamente, este método utiliza o Object.assign para substituir as configurações, portanto, a configuração pode ser feita incrementalmente.

MbgPageLoader

Service para abrir ou fechar o MbgPageLoader

Métodos:

Nome Descrição
.open(<Promise>, <String>) Este método é útil para exibir o loader apenas durante o processo da promise, que pode ser uma chamada no backend, por exemplo. Recebe dois parâmetros, o primeiro deve ser uma promise, o segundo (opcional) é uma string usada como título do loader. Esse método retorna a promise do primeiro parâmetro.
.createPromise() Este método cria uma promise e mantem o loader aberto até que essa promise seja finalizada através de um dos métodos de finalização descritos abaixo.
.close() Fecha o loader e finaliza a promise criada com createPromise(), caso exista.
.endPromise() Finaliza a promise criada com createPromise() caso exista, e fecha o loader.

MbgNotification

Service para abrir e fechar notificações do MbgNotification

Métodos:

Nome Descrição
.openNotification(<Object>) Abre uma nova notificação. Recebe um objeto de configuração como parâmetro. Opções disponíveis. Este método retorna o objeto de configuração da notificação com um ID que pode ser usado posteriormente com um dos métodos abaixo.
.closeFixedNotif(<String>) Fecha uma notificação do tipo Fixed, recebe o id da notificação como parâmetro.
.closeFloatNotif(<String>) Fecha uma notificação do tipo Float, recebe o id da notificação como parâmetro.
.closeToastNotif(<String>) Fecha uma notificação do tipo Toast, recebe o id da notificação como parâmetro.

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:

Tipo Nome Descrição Valor padrão
string type Estilo da notificação, pode ser um entre 'info', 'warn', 'error', 'success'. 'info'
string variation Variação da notificação, pode ser um entre 'fixed', 'float', 'toast'. 'toast'
number ou string duration Define o tempo (em milisegundos) que a notificação ficará na tela. No caso da variation 'fixed', você pode usar a duration 'fixed' para que a notificação permaneça na tela até ela ser fechada. 4000
string text String com o texto da notificação. 'Olá mundo, esta é uma notificação'
string icon String com os seletores do ícone do fontawesome. 'fas fa-exclamation-circle'
boolean actionButton Define se o botão de ação irá ou não aparecer. false
function action Função que será executada ao clicar no botão de ação. undefined
string actionText Texto do botão de ação. 'Clique aqui'

Providers

mbTheme

Provider para configuração de tema

Métodos:

Nome Descrição
.get(<String>) Recebe uma string como parâmetro com o nome do tema á ser buscado. Retorna um objeto com as cores do tema selecionado.

About

No description, website, or topics provided.

Resources

Readme
Activity

Stars

2 stars

Watchers

3 watching

Forks

0 forks
Report repository

Releases

No releases published

Packages

No packages published

Contributors 6

Languages