layout-admin-lte v1.0.14

layout-admin-lte

Install this project using npm install layout-admin-lte.

This is a test template with base on adminlte to easy start your app

How to:

npm install layout-admin-lte --save

Dependencies that we need:

on your package json put

  "dependencies": {
    ...
    "layout-admin-lte": "1.0.11",
    "admin-lte": "2.3.11",
    "bootstrap": "^3.3.7",
    "font-awesome": "^4.7.0",
    "jquery": "^3.2.17",
    "primeng": "6.0.0-alpha.2",
    ...
  }

Import on angular.json:

        "styles": [
            "./node_modules/bootstrap/dist/css/bootstrap.css",
            "./node_modules/font-awesome/css/font-awesome.css",
            "./node_modules/admin-lte/dist/css/skins/_all-skins.css",
            "./node_modules/admin-lte/dist/css/AdminLTE.css",
            "./node_modules/primeng/resources/themes/omega/theme.css",
            "./node_modules/primeng/resources/primeng.min.css"
            ...
        ],
        "scripts": [
              "./node_modules/jquery/dist/jquery.js",
              "./node_modules/jqueryui/jquery-ui.js",
              "./node_modules/bootstrap/dist/js/bootstrap.js",
              "./node_modules/jquery-slimscroll/jquery.slimscroll.js",
              "./node_modules/admin-lte/dist/js/app.js",
              "./node_modules/layout-admin-lte/assets/js/adminLTEOptions.js",
              "./node_modules/layout-admin-lte/assets/js/scripts.js",
              ....
        ]

Import on module:

import { AdminLTEModule } from 'layout-admin-lte';

@NgModule({
  imports: [
    AdminLTEModule,
    ...
  ]
})
export class AppModule { }

Example html app.html

<div class="wrapper">
  <!-- Main Header -->
  <adminlte-header [centerText]="text" [userName]="userName" [imgPerfil]="imgPerfil" (perfilEvent)="getPerfil()"
    (logOutEvent)="logout()"></adminlte-header>
  <!-- Left side column. contains the logo and sidebar -->
  <adminlte-left-side [title]="'Example'" [optionsMenu]="sidebarOptions"></adminlte-left-side>
  <!-- Content Wrapper. Contains page content -->
  <adminlte-content>
    
    <!-- CONTENT HERE router-outlet -->
    <router-outlet></router-outlet>

  </adminlte-content>
  <!-- /.content-wrapper -->
  <!-- Main Footer -->
  <adminlte-footer></adminlte-footer>
  <!-- Control Sidebar -->
  <adminlte-control-sidebar [dropDownOptions]="controlSideBarOptions" (clickOptionDropdown)="controlSidebarOption($event)"></adminlte-control-sidebar>
  <!-- /.control-sidebar -->
  <!-- Add the sidebar's background. This div must be placed
         immediately after the control sidebar -->
  <div class="control-sidebar-bg"></div>
</div>

<perfil-component [display]="displayPerfilComponent" [file]="filePerfil" [perfil]="perfil" (outputEvent)="setPerfil($event)"></perfil-component>

<airc-loading></airc-loading>

Components:

HeaderComponent

  <adminlte-header ></adminlte-header>

  @Input() showLogo: boolean = true;
  @Input() showRightOptions: boolean = true;
  @Input() showPerfilButton: boolean = true;
  @Input() centerText: string = "";
  @Input() centerIcon: string = "fa fa-institution";
  @Input() rightOptionsIcon: string = "fa fa-institution";
  @Input() userName: string = "";
  @Input() imgPerfil: string;
  @Input() logo: string;
  @Input() icon: string;
  @Input() bgColorLogo: string = "";
  @Output() logOutEvent = new EventEmitter();
  @Output() perfilEvent = new EventEmitter();

LeftSideComponent

  <adminlte-left-side></adminlte-left-side>

  @Input() title: string = "";
  @Input() optionsMenu: SideBarMainOptionInterface[] = new Array<SideBarMainOptionInterface>();

    export interface SideBarMainOptionInterface {
        id: string
        icon: string
        shortLabel: string
        label: string
        url: string
        subMenu: SideBarSubOptionInterface[]
    }
    export interface SideBarSubOptionInterface {
        id: string
        label: string
        icon: string
        url: string
    }

ContentComponent

  <adminlte-content>   //put your content here<router-outlet></router-outlet>     </adminlte-content>

ControlSidebarComponent

  <adminlte-control-sidebar> </adminlte-control-sidebar>

  @Input() private dropDownOptions: DropDownOption[] = new Array<DropDownOption>();
  @Output() clickOptionDropdown = new EventEmitter();

    export interface DropDownOption {
        id: string,
        icon: string,
        label: string,
        active: boolean
    }

FooterComponent

  <adminlte-footer></adminlte-footer>

  @Input() showInfo: boolean = true;
  @Input() text: string = "AIRC";
  @Input() websiteLink: string = "http://www.airc.pt";
  @Input() backgroundColorFooter: string = null;

PerfilComponent

  <perfil-component></perfil-component>

  @Input() display: boolean = false;
  @Input() perfil: PerfilInterface = new PerfilInterface();
  @Input() file: any = null;
  @Output() outputEvent: any = new EventEmitter();

    export class PerfilInterface {
        email: string = null;
        firstName: string = null;
        lastName: string = null;
        newPassword: string = null;
    }

AIRCLoadingComponent

  <airc-loading></airc-loading>

AIRCLoadingService

showLoading()
hideLoading()

MessagesComponent

  <airc-messages></airc-messages>

    @Input() showCloseMessage: boolean = true;
    @Input() heightInput: any;
    @Input() idAlert: string = "";
    @Input() component: string = null;

MessagesService

    public subject = new Subject<any>();

    sendMessage(alert: Array<Alert>, mensagemAApagar?: string): void {
        if (mensagemAApagar != undefined) {
            for (let i = 0; i < alert.length; i++) {
                alert[i].mensagemAApagar = mensagemAApagar;
            }
        }
        this.subject.next(alert);
    }

    sendCustomMessage(msg: AIRCMessage, type?: string, mensagemAApagar?: string): void {
        let alerts: Array<Alert> = new Array<Alert>();
        let alert: Alert = new Alert();
        alert.errorType = type === undefined ? 'danger' : type;
        if (mensagemAApagar != undefined) {
            alert.mensagemAApagar = mensagemAApagar;
        }
        alert.msg = { code: msg.code, message: msg.message, title: msg.title, component: msg.component };
        alerts.push(alert);
        this.sendMessage(alerts);
    }

    getMessage(): Observable<Array<Alert>> {
        return this.subject.asObservable();
    }

    clear() {
        this.subject.next(null);
    }

    clearComponentMessage() {
        this.subject.next("apagar");
    }

InstituicaoComponent

  <instituicao></instituicao>

  @Input() private display: boolean = false;
  @Input() private instituicao: Instituicao;
  @Output() private outputEvent = new EventEmitter();

ChangeTenantComponent

  <change-tenant></change-tenant>

  @Input() display: boolean = false;
  @Input() dadosPreenchimentoModal: DadosPreenchimentoModal = new DadosPreenchimentoModal();
  @Output() outputEvent: any = new EventEmitter();

  export class DadosPreenchimentoModal {
    idModal: string;
    srcImagem: any;
    tituloModal: string;
    subTitulo: string;
    subTitulo2: string;
    mensagem: string
  }