Add fm-gradient-select

projects/common/src/fm/common.module.ts

@@ -49,11 +49,13 @@ import { IUser } from './models/user';
 import { IQueryState } from './models/query.state';
 import { ICodeListItem } from './models/code.list.item';
 import { IDataLayer } from './models/data.layer';
+import { IColor,IGradientstop} from './models/gradient';
 import * as commonActions from './actions/app-common.actions';
 import * as commonReducers from './reducers/app-common.reducer';
 import * as commonEffects from './effects/app-common.effects';
 import { SecureOAuthStorage} from './shared/secureOAuthStorage';
-import { GradientComponent } from './gradient/gradient.component';
+import { GradientComponent } from './components/gradient/gradient.component';
+import { GradientSelectComponent } from './components/gradient-select/gradient-select.component';
 
 export {
   SafePipe,
@@ -93,7 +95,9 @@ export {
   WeatherCurrentObservation,
   IJsonline,
   ISenMLItem,
-  IDataLayer
+  IDataLayer,
+  IColor,
+  IGradientstop
 };
 
 @NgModule({
@@ -123,7 +127,8 @@ export {
     HasPackageDirective,
     HasClaimDirective,
     UserMenuComponent,
-    GradientComponent
+    GradientComponent,
+    GradientSelectComponent
   ],
   exports: [
     NgbModule,
@@ -144,7 +149,8 @@ export {
     HasPackageDirective,
     HasClaimDirective,
     UserMenuComponent,
-    GradientComponent
+    GradientComponent,
+    GradientSelectComponent
   ]
 })
 export class AppCommonModule {

projects/common/src/fm/components/gradient-select/gradient-select.component.html

@@ -0,0 +1,16 @@
+<div *ngIf="gradientItems" class="form-control gradient-select" (click)="handleToggleList()">
+    <div *ngIf="selectedItem">
+        <div *ngIf="showLabel">{{selectedItem?.name}}</div>
+        <fm-gradient [gradientItem]="selectedItem"></fm-gradient>    
+    </div>
+    <div class="gradient-list" [ngClass]="{'visible':listVisible}">
+        <ul *ngIf="gradientItems">
+            <li *ngFor="let item of gradientItems" (click)="handleSelect(item)" [ngClass]="{'bg-primary':isSelected(item),'text-white':isSelected(item)} ">
+                <div>{{item?.name}}</div>
+                <div><fm-gradient [gradientItem]="item"></fm-gradient></div>
+            </li>
+        </ul>
+        <div *ngIf="showAdd" class="addGradient"><a href="#" i18n (click)="handleAdd($event)" >Add gradient</a></div>
+    </div>
+</div>
+

projects/common/src/fm/components/gradient-select/gradient-select.component.scss

@@ -0,0 +1,55 @@
+.gradient-select {
+    position: relative;
+    width:30rem;
+    height: auto;
+}
+
+.gradient-list {
+    position: absolute;
+    top:100%;
+    left:-0.15rem;
+    width:100%;
+    display: none;
+  
+    margin-left: 1px;
+    border-radius: 0.25rem;
+    border: 1px solid #ced4da;
+}
+
+.gradient-list.visible {
+    display: block;
+    background-color: white;
+   
+}
+
+li {
+    display: block;
+    overflow: hidden;
+    padding: 0.375rem .75rem;
+    border-bottom: 1px solid #ced4da;
+}
+
+li:hover {
+   background-color: #ced4da;
+   //color:white;
+}
+
+ul {
+    list-style: none;
+    padding: 0;
+    overflow: hidden;
+    overflow-y: auto;
+    max-height: 20rem;   
+}
+
+fm-gradient {
+    display: block;
+    height: 1.5rem;
+    position: relative;
+    border:1px solid white;
+}
+
+.addGradient {
+    padding: 0.375rem .75rem;
+    border-top: 1px solid #ced4da;
+}

projects/common/src/fm/components/gradient-select/gradient-select.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { GradientSelectComponent } from './gradient-select.component';
+
+describe('GradientSelectComponent', () => {
+  let component: GradientSelectComponent;
+  let fixture: ComponentFixture<GradientSelectComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ GradientSelectComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(GradientSelectComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

projects/common/src/fm/components/gradient-select/gradient-select.component.ts

@@ -0,0 +1,54 @@
+import { Component, ChangeDetectorRef, Input,SimpleChanges,OnChanges, Output,EventEmitter } from '@angular/core';
+import { IItem } from '../../models/item';
+
+@Component({
+  selector: 'fm-gradient-select',
+  templateUrl: './gradient-select.component.html',
+  styleUrls: ['./gradient-select.component.scss']
+})
+export class GradientSelectComponent implements OnChanges {
+
+  public listVisible:boolean = false;
+  @Input() showLabel:boolean = true;
+  @Input() gradientItems:IItem[];
+  @Input() showAdd:boolean = false;
+  @Input() selectedItem:IItem;
+  @Output() onSelect:EventEmitter<any> = new EventEmitter<any>();
+  @Output() onAdd:EventEmitter<MouseEvent> = new EventEmitter<MouseEvent>();
+
+
+  constructor(private ref:ChangeDetectorRef) {   
+  }
+
+   ngOnChanges(changes:SimpleChanges) {
+      if(changes["gradientItems"]) {
+        this.gradientItems=changes["gradientItems"].currentValue;
+        this.selectedItem=this.selectedItem == null && this.gradientItems && this.gradientItems.length>0?this.gradientItems[0]:null;
+        this.ref.detectChanges();
+      }     
+  }
+
+  handleToggleList() {
+    this.listVisible=!this.listVisible;
+  }
+
+  handleSelect(item:IItem) {
+    this.selectedItem=item;
+    this.onSelect.emit(item);
+  }
+
+  handleAdd(event:MouseEvent) {
+    event.preventDefault();
+    this.onAdd.emit(event);
+  }
+
+  isSelected(item:IItem):boolean {
+    if(this.selectedItem && this.selectedItem.data  && this.selectedItem.data.gradient && item && item.data && item.data.gradient) {
+       let sid = JSON.stringify(this.selectedItem.data.gradient)+this.selectedItem.name;
+       let id = JSON.stringify( item.data.gradient) + item.name;
+       return sid == id;
+    }
+    return false;
+  }
+
+}

projects/common/src/fm/components/gradient/gradient.component.ts

@@ -0,0 +1,53 @@
+import { Component, Input, OnInit ,OnChanges, SimpleChanges,ChangeDetectorRef} from '@angular/core';
+import { IItem} from '../../models/item'
+import { IGradientstop } from '../../models/gradient';
+
+
+
+@Component({
+  selector: 'fm-gradient',
+  templateUrl: './gradient.component.html',
+  styleUrls: ['./gradient.component.scss']
+})
+export class GradientComponent implements OnInit,OnChanges {
+
+  @Input() gradientItem:IItem;
+  public gradientStyle:any = {};
+
+  constructor(private ref: ChangeDetectorRef) { }
+
+  getGradientStyle(item:IItem):any {
+    if(item.data && item.data.gradient) {
+      let gradient = item.data.gradient as IGradientstop[];
+      let gd = '{ "background": "linear-gradient(to right,';
+      for(var i=0;i<gradient.length;i++) {
+        let gs = gradient[i];
+        if(i>0) gd+=",";
+        gd += `rgba(${gs.color.red},${gs.color.green},${gs.color.blue},${gs.color.alpha/255})`;          
+        gd +=` ${gs.relativestop*100}%`
+      }
+      gradient.forEach((gs) => {
+      });
+      gd+=')"}';
+      
+      return JSON.parse(gd);
+    }
+  }
+
+  ngOnInit(): void {
+    if(this.gradientItem && this.gradientItem.itemType == "vnd.farmmaps.itemtype.gradient") {
+      this.gradientStyle = this.getGradientStyle(this.gradientItem);
+    }
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    if(changes['gradientItem']) {
+      let gradientItem = changes['gradientItem'].currentValue;
+      if(gradientItem && gradientItem.itemType == "vnd.farmmaps.itemtype.gradient") {
+        this.gradientStyle = this.getGradientStyle(changes['gradientItem'].currentValue);
+        this.ref.markForCheck();
+      }      
+    }
+  }
+
+}

projects/common/src/fm/gradient/gradient.component.ts

@@ -1,53 +0,0 @@
-import { Component, Input, OnInit } from '@angular/core';
-import { IItem} from '../models/item'
-
-interface IColor {
-  red: number,
-  green: number,
-  blue: number,
-  alpha: number,
-}
-
-interface IGradientstop {
-  relativestop: number,
-  color: IColor
-}
-
-@Component({
-  selector: 'fm-gradient',
-  templateUrl: './gradient.component.html',
-  styleUrls: ['./gradient.component.scss']
-})
-export class GradientComponent implements OnInit {
-
-  @Input() item:IItem;
-  public gradientStyle:any = {};
-
-  constructor() { }
-
-  getGradientStyle(item:IItem):any {
-    if(item.data && item.data.gradient) {
-      let gradient = item.data.gradient as IGradientstop[];
-      let gd = '{ "background": "linear-gradient(to right,';
-      for(var i=0;i<gradient.length;i++) {
-        let gs = gradient[i];
-        if(i>0) gd+=",";
-        gd += `rgba(${gs.color.red},${gs.color.green},${gs.color.blue},${gs.color.alpha/255})`;          
-        gd +=` ${gs.relativestop*100}%`
-      }
-      gradient.forEach((gs) => {
-      });
-      gd+=')"}';
-      
-      return JSON.parse(gd);
-    }
-  }
-
-  ngOnInit(): void {
-    if(this.item.itemType == "vnd.farmmaps.itemtype.gradient") {
-       if(this.item) {
-         this.gradientStyle = this.getGradientStyle(this.item);
-       }
-    }
-  }
-}

projects/common/src/fm/models/gradient.ts

@@ -0,0 +1,11 @@
+export interface IColor {
+  red: number,
+  green: number,
+  blue: number,
+  alpha: number,
+ }
+  
+export interface IGradientstop {
+  relativestop: number,
+  color: IColor
+ }