Merge branch 'master' of https://github.com/akveo/ng2-admin into dev-tree-view

bower.json

@@ -16,7 +16,6 @@
     "tests"
   ],
   "dependencies": {
-    "Ionicons": "ionicons#~2.0.1",
+    "Ionicons": "ionicons#~2.0.1"
-    "ckeditor": "^4.5.9"
   }
 }

config/webpack.common.js

@@ -87,6 +87,7 @@ module.exports = {
         loader: 'source-map-loader',
         exclude: [
           // these packages have problems with their sourcemaps
+          helpers.root('node_modules/ng2-branchy'),
           helpers.root('node_modules/rxjs')
         ]
       }

config/webpack.prod.js

@@ -154,10 +154,7 @@ module.exports = webpackMerge(commonConfig, {
 
       beautify: false, //prod
 
-      mangle: {
+      mangle: false, //prod
-        screw_ie8 : true,
-        keep_fnames: true
-      }, //prod
 
       compress: {
         screw_ie8: true

package.json

@@ -6,15 +6,16 @@
   "homepage": "http://akveo.github.io/ng2-admin/",
   "license": "MIT",
   "dependencies": {
-    "@angular/common": "2.0.0-rc.3",
+    "@angular/common": "2.0.0-rc.4",
-    "@angular/compiler": "2.0.0-rc.3",
+    "@angular/compiler": "2.0.0-rc.4",
-    "@angular/core": "2.0.0-rc.3",
+    "@angular/core": "2.0.0-rc.4",
-    "@angular/http": "2.0.0-rc.3",
+    "@angular/http": "2.0.0-rc.4",
-    "@angular/platform-browser": "2.0.0-rc.3",
+    "@angular/platform-browser": "2.0.0-rc.4",
-    "@angular/platform-browser-dynamic": "2.0.0-rc.3",
+    "@angular/platform-browser-dynamic": "2.0.0-rc.4",
-    "@angular/platform-server": "2.0.0-rc.3",
+    "@angular/platform-server": "2.0.0-rc.4",
     "@angular/router": "3.0.0-alpha.8",
     "@angular/router-deprecated": "2.0.0-rc.2",
+    "@angular/forms":"0.2.0",
     "amcharts3": "github:amcharts/amcharts3",
     "ammap3": "github:amcharts/ammap3",
     "animate.css": "^3.5.1",
@@ -22,6 +23,7 @@
     "bootstrap-loader": "^1.0.8",
     "chart.js": "^1.1.1",
     "chartist": "^0.9.7",
+    "ckeditor": "^4.5.9",
     "core-js": "^2.4.0",
     "easy-pie-chart": "^2.1.7",
     "extract-text-webpack-plugin": "^1.0.1",
@@ -37,6 +39,7 @@
     "ng2-bootstrap": "^1.0.16",
     "ng2-branchy": "0.0.2-2",
     "ng2-ckeditor": "^1.0.3",
+    "ng2-uploader": "^0.5.2",
     "normalize.css": "^4.1.1",
     "rxjs": "5.0.0-beta.6",
     "tether": "^1.2.4",

src/app/pages/components/components/treeView/treeView.component.ts

@@ -1,6 +1,6 @@
 import {Component} from '@angular/core';
 import {BranchyComponent, TreeModel} from 'ng2-branchy';
-import {BaCard} from "../../../../theme/components/baCard/baCard.component";
+import {BaCard} from '../../../../theme/components/baCard';
 
 @Component({
   selector: 'tree-view',

src/app/pages/forms/components/inputs/components/ratinginputs/index.ts

@@ -0,0 +1 @@
+export * from './ratinginputs.component';

src/app/pages/forms/components/inputs/components/ratinginputs/ratinginputs.component.ts

@@ -0,0 +1,20 @@
+import { RatingComponent } from 'ng2-bootstrap/ng2-bootstrap';
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'rating-inputs',
+  directives: [RatingComponent],
+  template: require('./ratinginputs.html')
+})
+
+export class Rating {
+  private _rate1:number = 3;
+  private _rate2:number = 4;
+
+  private _max1:number = 5;
+  private _max2:number = 10;
+
+  constructor() {
+  }
+
+}

src/app/pages/forms/components/inputs/components/ratinginputs/ratinginputs.html

@@ -0,0 +1,9 @@
+<div class="col-md-4">
+  <rating [(ngModel)]="_rate1" max="{{_max1}}" stateOn="ion-android-star" stateOff="ion-android-star-outline" class="rating"></rating>
+  <span class="help-block">Rate: {{_rate1}}</span>
+</div>
+
+<div class="col-md-8">
+  <rating [(ngModel)]="_rate2" max="{{_max2}}" stateOn="ion-ios-heart" stateOff="ion-ios-heart-outline" class="rating"></rating>
+  <span class="help-block">Rate: {{_rate2}}</span>
+</div>

src/app/pages/forms/components/inputs/inputs.component.ts

@@ -6,11 +6,13 @@ import {StandardInputs} from './components/standardInputs';
 import {ValidationInputs} from './components/validationInputs';
 import {GroupInputs} from './components/groupInputs';
 import {CheckboxInputs} from './components/checkboxInputs';
+import {Rating} from './components/ratinginputs';
+
 
 @Component({
   selector: 'inputs',
   encapsulation: ViewEncapsulation.None,
-  directives: [BaCard, StandardInputs, ValidationInputs, GroupInputs, CheckboxInputs],
+  directives: [BaCard, StandardInputs, ValidationInputs, GroupInputs, CheckboxInputs, Rating],
   template: require('./inputs.html'),
 })
 export class Inputs {

src/app/pages/forms/components/inputs/inputs.html

@@ -19,6 +19,10 @@
       <ba-card title="Checkboxes & Radios" baCardClass="with-scroll">
         <checkbox-inputs></checkbox-inputs>
       </ba-card>
+
+      <ba-card title="Rating" baCardClass="with-scroll">
+        <rating-inputs></rating-inputs>
+      </ba-card>
     </div>
   </div>
 

src/app/pages/forms/components/layouts/layouts.component.ts

@@ -7,16 +7,25 @@ import {BlockForm} from './components/blockForm';
 import {HorizontalForm} from './components/horizontalForm';
 import {BasicForm} from './components/basicForm';
 import {WithoutLabelsForm} from './components/withoutLabelsForm';
+import {BaPictureUploader} from '../../../../theme/components';
 
 @Component({
   selector: 'layouts',
   encapsulation: ViewEncapsulation.None,
-  directives: [BaCard, InlineForm, BlockForm, HorizontalForm, BasicForm, WithoutLabelsForm],
+  directives: [BaCard, InlineForm, BlockForm, HorizontalForm, BasicForm, WithoutLabelsForm, BaPictureUploader],
   styles: [],
   template: require('./layouts.html'),
 })
 export class Layouts {
 
+  public defaultPicture = 'assets/img/theme/no-photo.png';
+  public profile:any = {
+    picture: 'assets/img/app/profile/Nasta.png'
+  };
+  public uploaderOptions:any = {
+    // url: 'http://website.com/upload'
+  };
+
   constructor() {
   }
 

src/app/pages/forms/components/layouts/layouts.html

@@ -35,4 +35,11 @@
       </div>
     </div>
   </div>
+  <div class="row">
+    <div class="col-md-6">
+      <ba-card title="Picture Uploader" baCardClass="with-scroll">
+        <ba-picture-uploader [picture]="profile.picture" [defaultPicture]="defaultPicture" [uploaderOptions]="uploaderOptions"></ba-picture-uploader>
+      </ba-card>
+    </div>
+  </div>
 </div>

src/app/theme/components/baCard/baCard.component.ts

@@ -1,5 +1,4 @@
-import {Component, ViewEncapsulation, Input} from '@angular/core';
+import {Component, ViewEncapsulation, ViewChild, Input} from '@angular/core';
-
 import {BaCardBlur} from './baCardBlur.directive';
 
 @Component({

src/app/theme/components/baCard/index.ts

@@ -1,2 +1 @@
-export * from './baCard.component.ts';
+export * from './baCard.component';
-export * from './baCardBlur.directive';

src/app/theme/components/baPictureUploader/baPictureUploader.component.ts

@@ -0,0 +1,90 @@
+import {Component, ViewChild, Input, Output, EventEmitter, ElementRef, Renderer} from '@angular/core';
+import {Ng2Uploader} from 'ng2-uploader/ng2-uploader';
+
+@Component({
+  selector: 'ba-picture-uploader',
+  styles: [require('./baPictureUploader.scss')],
+  template: require('./baPictureUploader.html'),
+  providers: [Ng2Uploader]
+})
+export class BaPictureUploader {
+
+  @Input() defaultPicture:string = '';
+  @Input() picture:string = '';
+
+  @Input() uploaderOptions:any = {};
+  @Input() canDelete:boolean = true;
+
+  onUpload:EventEmitter<any> = new EventEmitter();
+  onUploadCompleted:EventEmitter<any> = new EventEmitter();
+
+  @ViewChild('fileUpload') protected _fileUpload:ElementRef;
+
+  public uploadInProgress:boolean = false;
+
+  constructor(private renderer:Renderer, protected _uploader:Ng2Uploader) {
+  }
+
+  public ngOnInit():void {
+    if (this._canUploadOnServer()) {
+      setTimeout(() => {
+        this._uploader.setOptions(this.uploaderOptions);
+      });
+
+      this._uploader._emitter.subscribe((data) => {
+        this._onUpload(data);
+      });
+    } else {
+      console.warn('Please specify url parameter to be able to upload the file on the back-end');
+    }
+  }
+
+  public onFiles():void {
+    let files = this._fileUpload.nativeElement.files;
+
+    if (files.length) {
+      const file = files[0];
+      this._changePicture(file);
+
+      if (this._canUploadOnServer()) {
+        this.uploadInProgress = true;
+        this._uploader.addFilesToQueue(files);
+      }
+    }
+  }
+
+  public bringFileSelector():boolean {
+    this.renderer.invokeElementMethod(this._fileUpload.nativeElement, 'click');
+    return false;
+  }
+
+  public removePicture():boolean {
+    this.picture = '';
+    return false;
+  }
+
+  protected _changePicture(file:File):void {
+    const reader = new FileReader();
+    reader.addEventListener('load', (event:Event) => {
+      this.picture = (<any> event.target).result;
+    }, false);
+    reader.readAsDataURL(file);
+  }
+
+  protected _onUpload(data):void {
+    if (data['done'] || data['abort'] || data['error']) {
+      this._onUploadCompleted(data);
+    } else {
+      this.onUpload.emit(data);
+    }
+  }
+
+  protected _onUploadCompleted(data):void {
+    this.uploadInProgress = false;
+    this.onUploadCompleted.emit(data);
+  }
+
+  protected _canUploadOnServer():boolean {
+    return !!this.uploaderOptions['url'];
+  }
+}

src/app/theme/components/baPictureUploader/baPictureUploader.html

@@ -0,0 +1,16 @@
+<div class="picture-group" [ngClass]="{uploading: uploadInProgress}">
+  <div class="picture-wrapper" (click)="bringFileSelector();">
+    <img src="{{ picture }}" *ngIf="picture">
+    <img src="{{ defaultPicture }}" *ngIf="!picture && defaultPicture">
+
+    <div class="loading" *ngIf="uploadInProgress">
+      <div class="spinner">
+        <div class="double-bounce1"></div>
+        <div class="double-bounce2"></div>
+      </div>
+    </div>
+  </div>
+  <i class="ion-ios-close-outline" (click)="removePicture();" *ngIf="picture && canDelete"></i>
+  <a href class="change-picture" (click)="bringFileSelector();">Change profile Picture</a>
+  <input #fileUpload type="file" hidden="true" id="uploadFile" (change)="onFiles()">
+</div>

src/app/theme/components/baPictureUploader/baPictureUploader.scss

@@ -0,0 +1,114 @@
+@import '../../sass/conf/conf';
+
+.picture-group {
+  border: 1px dashed #b8b8b8;
+  width: 202px;
+  height: 202px;
+  position: relative;
+  cursor: pointer;
+  .picture-wrapper {
+    width: 200px;
+    height: 200px;
+    overflow: hidden;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  img {
+    max-width: 100%;
+    max-height: 100%;
+  }
+  i {
+    display: none;
+    position: absolute;
+    font-size: 32px;
+    background: $default;
+    cursor: pointer;
+    color: $primary;
+    top: -11px;
+    right: -11px;
+    height: 26px;
+    border-radius: 50%;
+    &:before {
+      line-height: 26px;
+    }
+    &:hover {
+      color: $danger;
+    }
+  }
+  a.change-picture {
+    display: none;
+    width: 202px;
+    background: rgba(0, 0, 0, 0.7);
+    transition: all 200ms ease-in-out;
+    color: $default-text;
+    text-decoration: none;
+    position: absolute;
+    bottom: -1px;
+    left: -1px;
+    line-height: 32px;
+    text-align: center;
+  }
+  &:hover {
+    i {
+      display: block;
+    }
+    .change-picture {
+      display: block;
+    }
+  }
+
+  .loading {
+    width: 100%;
+    height: 100%;
+    left: 0;
+    display: flex;
+    position: absolute;
+    justify-content: center;
+    align-items: center;
+  }
+  .spinner {
+    width: 60px;
+    height: 60px;
+    position: relative;
+  }
+
+  .double-bounce1, .double-bounce2 {
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    background-color: #fff;
+    opacity: 0.6;
+    position: absolute;
+    top: 0;
+    left: 0;
+
+    -webkit-animation: sk-bounce 2.0s infinite ease-in-out;
+    animation: sk-bounce 2.0s infinite ease-in-out;
+  }
+
+  .double-bounce2 {
+    -webkit-animation-delay: -1.0s;
+    animation-delay: -1.0s;
+  }
+
+  @-webkit-keyframes sk-bounce {
+    0%, 100% {
+      -webkit-transform: scale(0.0)
+    }
+    50% {
+      -webkit-transform: scale(1.0)
+    }
+  }
+
+  @keyframes sk-bounce {
+    0%, 100% {
+      transform: scale(0.0);
+      -webkit-transform: scale(0.0);
+    }
+    50% {
+      transform: scale(1.0);
+      -webkit-transform: scale(1.0);
+    }
+  }
+}

src/app/theme/components/baPictureUploader/index.ts

@@ -0,0 +1 @@
+export * from './baPictureUploader.component.ts';

src/app/theme/components/index.ts

@@ -7,3 +7,4 @@ export * from './baAmChart';
 export * from './baChartistChart';
 export * from './baBackTop';
 export * from './baFullCalendar';
+export * from './baPictureUploader';

src/app/theme/sass/_form.scss

@@ -582,3 +582,11 @@ label.custom-input-danger {
 .sub-little-text {
   font-size: 12px;
 }
+
+.rating {
+  font-size: 20px;
+}
+
+rating-inputs span {
+  vertical-align: middle;
+}