Base para os sistemas da mobiage
npm install @kigi/baseMódulo que tem como objetivo servir de base para dashboards desenvolvidos pela Mobiage.
O mobiage-base é composto pelos seguintes componentes:
- Base (
- Topbar (
- Container (
- Sidemenu (
- PageLoader (
- TopNotifications (
npm login com uma conta autorizada e instale:shellscript
yarn add @kigi/base
`
ou
shellscript
npm i --save @kigi/base
`
Faça o import do módulo com:
javascript
/ Import do css /
import '@kigi/base/dist/mobiage-base.min.css'
/ Import do javascript /
import '@kigi/base/dist/mobiage-base.min'
`
Declare a dependência na sua aplicação:
javascript
/ 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:
html
`
Inicialmente, é necessário configurar qual tema a base irá utilizar.
Para isso, passe um objeto de configuração com o atributo para a binding config no componente base.
Por exemplo, para definir que utilizaremos o theme1, precisamos configurar o objeto:
`javascript
$scope.configBase = {
theme: 'theme1'
}
`
E depois passamos esse objeto para o base:
html
`
Objeto de configuração do componente 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 (
)
Exemplo:
`javascript
$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',
isMatrix: false,
},
{
name: 'Dell',
logo: 'https://upload.wikimedia.org/wikipedia/commons/1/18/Dell_logo_2016.svg',
isMatrix: false,
},
{
name: 'Teste',
logo: 'https://upload.wikimedia.org/wikipedia/commons/1/18/Dell_logo_2016.svg',
isMatrix: true,
},
],
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'
}
]
}
};
`
$3
| Tipo | Nome | Descrição |
|---------|---------|-------------|
||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. |$3
| 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$3
| 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$3
| 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. |$3
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. *
$3
O search precisa de dois atributos, um com informações á serem buscadas e outro com os índices da busca| Tipo | Nome | Descrição |
|---------|---------|-------------|
|array
$3
| 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
$3
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; |$3
| 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:
`javascript
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:
javascript
indexFields: [
{
name: 'name'
},
{
name: 'cpf'
}
]
`
Basta o dado ter uma key 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 (
)
Exemplo:
`javascript
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 |
|---------|---------|-------------|
|