Fix issue

projects/common-map/src/fm-map/components/aol/item-vector-source/item-vector-source.component.ts

@@ -1,9 +1,9 @@
-import { Component,  Host, Input, Output, EventEmitter, OnInit, OnChanges, SimpleChanges, forwardRef, Inject, InjectionToken } from '@angular/core';
+import { Component, Host, Input, Output, EventEmitter, OnInit, OnChanges, SimpleChanges, forwardRef, Inject, InjectionToken } from '@angular/core';
 import { LayerVectorComponent, SourceVectorComponent, MapComponent } from 'ngx-openlayers';
-import { ItemService,ItemTypeService,IItem, IItemType } from '@farmmaps/common';
+import { ItemService, ItemTypeService, IItem, IItemType } from '@farmmaps/common';
 
 import { Feature } from 'ol';
-import { Point,Geometry } from 'ol/geom';
+import { Point, Geometry } from 'ol/geom';
 import { MapBrowserEvent } from 'ol';
 import { Types } from 'ol/MapBrowserEventType';
 import * as style from 'ol/style';
@@ -11,18 +11,18 @@ import * as color from 'ol/color';
 import * as loadingstrategy from 'ol/loadingstrategy';
 import * as condition from 'ol/events/condition';
 import * as extent from 'ol/extent';
-import {Vector,Cluster,Source} from 'ol/source';
-import {Layer} from 'ol/layer';
-import {GeoJSON} from 'ol/format';
-import {Select} from 'ol/interaction';
-import {IStyles} from '../../../models/style.cache';
-import {FeatureIconService} from '../../../services/feature-icon.service';
+import { Vector, Cluster, Source } from 'ol/source';
+import { Layer } from 'ol/layer';
+import { GeoJSON } from 'ol/format';
+import { Select } from 'ol/interaction';
+import { IStyles } from '../../../models/style.cache';
+import { FeatureIconService } from '../../../services/feature-icon.service';
 
 @Component({
   selector: 'fm-map-item-source-vector',
   template: `<ng-content></ng-content>`,
   providers: [
-    { provide: SourceVectorComponent , useExisting: forwardRef(() => ItemVectorSourceComponent) }
+    { provide: SourceVectorComponent, useExisting: forwardRef(() => ItemVectorSourceComponent) }
   ]
 })
 export class ItemVectorSourceComponent extends SourceVectorComponent implements OnInit, OnChanges {
@@ -34,12 +34,12 @@ export class ItemVectorSourceComponent extends SourceVectorComponent implements
   @Input() features: Array<Feature<Geometry>>;
   @Input() selectedFeature: Feature<Geometry>;
   @Input() selectedItem: IItem;
-  @Input() styles:IStyles;
+  @Input() styles: IStyles;
   @Output() onFeatureSelected: EventEmitter<Feature<Geometry>> = new EventEmitter<Feature<Geometry>>();
   @Output() onFeatureHover: EventEmitter<Feature<Geometry>> = new EventEmitter<Feature<Geometry>>();
-  private stylesCache:IStyles = {};
+  private stylesCache: IStyles = {};
 
-  constructor(@Host() private layer: LayerVectorComponent, private itemService: ItemService, private map: MapComponent, private itemTypeService: ItemTypeService,private featureIconService$:FeatureIconService) {
+  constructor(@Host() private layer: LayerVectorComponent, private itemService: ItemService, private map: MapComponent, private itemTypeService: ItemTypeService, private featureIconService$: FeatureIconService) {
     super(layer);
     this._format = new GeoJSON();
   }
@@ -54,14 +54,14 @@ export class ItemVectorSourceComponent extends SourceVectorComponent implements
       geometry = new Point(extent.getCenter(e));
     }
     return geometry;
-   }
+  }
 
-  getSelectedStyle(feature:Feature<Geometry>):style.Style {
-    let key = feature.get('itemType')+"_selected";
-    let evaluatedStyle: style.Style =undefined;
+  getSelectedStyle(feature: Feature<Geometry>): style.Style {
+    let key = feature.get('itemType') + "_selected";
+    let evaluatedStyle: style.Style = undefined;
     var styleEntry = this.stylesCache[key];
-    if(styleEntry) {
-      if(typeof styleEntry === 'function')  {
+    if (styleEntry) {
+      if (typeof styleEntry === 'function') {
         evaluatedStyle = styleEntry(feature);
       } else {
         evaluatedStyle = styleEntry;
@@ -69,8 +69,8 @@ export class ItemVectorSourceComponent extends SourceVectorComponent implements
     } else {
       evaluatedStyle = this.stylesCache["selected"] as style.Style;
     }
-    if(evaluatedStyle ) {
-      evaluatedStyle .setGeometry((feature:Feature<Geometry>) => this.geometry(feature));
+    if (evaluatedStyle) {
+      evaluatedStyle.setGeometry((feature: Feature<Geometry>) => this.geometry(feature));
     }
     return evaluatedStyle as style.Style
   }
@@ -79,12 +79,12 @@ export class ItemVectorSourceComponent extends SourceVectorComponent implements
     this.strategy = loadingstrategy.bbox;
     this.format = new GeoJSON();
     this._select = new Select({
-      style:null,
+      style: null,
       hitTolerance: 10,
       layers: [this.layer.instance as Layer<Source>]
     });
     this._hoverSelect = new Select({
-      style: (feature:Feature<Geometry>) => {        
+      style: (feature: Feature<Geometry>) => {
         return this.getSelectedStyle(feature);
       },
       hitTolerance: 10,
@@ -114,39 +114,39 @@ export class ItemVectorSourceComponent extends SourceVectorComponent implements
 
     this.host.instance.setStyle((feature) => {
       var itemType = feature.get('itemType');
-      var key = itemType + (this.selectedItem?"_I":"");
+      var key = itemType + (this.selectedItem ? "_I" : "");
       if (!this.stylesCache[key]) {
         if (this.itemTypeService.itemTypes[itemType]) {
           let itemTypeEntry = this.itemTypeService.itemTypes[itemType];
           let fillColor = color.asArray(itemTypeEntry.iconColor);
           fillColor[3] = 0;
           this.stylesCache[key] = new style.Style({
-              image: itemTypeEntry.icon ? new style.Icon({
-                  anchor: [0.5, 1],
-                  scale: 0.05,
-                  src: this.featureIconService$.getIconImageDataUrl(itemTypeEntry.icon)
-                }):null,
-              stroke: new style.Stroke({
-                color: 'red',
-                width: 1
-              }),
-              fill: new style.Fill({
-                color: fillColor
-              }),
-              geometry:(feature:Feature<Geometry>) => this.geometry(feature)
-            });                   
+            image: itemTypeEntry.icon ? new style.Icon({
+              anchor: [0.5, 1],
+              scale: 0.05,
+              src: this.featureIconService$.getIconImageDataUrl(itemTypeEntry.icon)
+            }) : null,
+            stroke: new style.Stroke({
+              color: 'red',
+              width: 1
+            }),
+            fill: new style.Fill({
+              color: fillColor
+            }),
+            geometry: (feature: Feature<Geometry>) => this.geometry(feature)
+          });
         } else {
           key = 'file';
         }
       }
-      let evaluatedStyle =null;
+      let evaluatedStyle = null;
       var styleEntry = this.stylesCache[key];
-      if(typeof styleEntry === 'function')  {
+      if (typeof styleEntry === 'function') {
         evaluatedStyle = styleEntry(feature);
       } else {
         evaluatedStyle = styleEntry;
       }
-      if(evaluatedStyle && evaluatedStyle.geometry_ == null) {
+      if (evaluatedStyle && evaluatedStyle.geometry_ == null && !Array.isArray(evaluatedStyle)) {
         evaluatedStyle.setGeometry((feature) => this.geometry(feature));
       }
       return evaluatedStyle;
@@ -179,11 +179,11 @@ export class ItemVectorSourceComponent extends SourceVectorComponent implements
         this.map.instance.addInteraction(this._hoverSelect);
       }
     }
-    if (changes["styles"] && this.instance) {
+    if (changes["styles"]) {
       let styles = changes["styles"].currentValue;
       for (const key in styles) {
         if (styles.hasOwnProperty(key)) {
-          this.stylesCache[key]=styles[key]; 
+          this.stylesCache[key] = styles[key];
         }
       }
     }

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

@@ -13,6 +13,7 @@ import { SchemaService } from './services/schema.service';
 import { FolderService } from './services/folder.service';
 import { TimespanService } from './services/timespan.service';
 import { ItemService } from './services/item.service';
+import { AdminService } from './services/admin.service';
 import { EventService } from './services/event.service';
 import { TypeaheadService } from './services/typeahead.service';
 import { UserService } from './services/user.service';
@@ -42,6 +43,7 @@ export {
   ItemTypeService,
   TimespanService,
   ItemService,
+  AdminService,
   EventService,
   TypeaheadService,
   UserService,

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

@@ -33,7 +33,8 @@ import { TagInputComponent } from './components/tag-input/tag-input.component';
 import { MenuBackgroundComponent } from './components/menu-background/menu-background.component';
 import { HasPackageDirective} from './components/has-package/has-package.directive';
 import { PackageExistsDirective} from './components/package-exists/package-exists.directive';
-import { HasClaimDirective} from './components/has-claim/has-claim.directive';
+import { HasClaimDirective } from './components/has-claim/has-claim.directive';
+import { HasRoleDirective } from './components/has-role/has-role.directive';
 import { UserMenuComponent} from './components/user-menu/user-menu.component';
 import { ThumbnailComponent } from './components/thumbnail/thumbnail.component';
 import { Alert } from './enumerations/alert.enum';
@@ -85,6 +86,7 @@ export {
   HasPackageDirective,
   PackageExistsDirective,
   HasClaimDirective,
+  HasRoleDirective,
   Alert,
   IEventMessage,
   IItem,
@@ -148,6 +150,7 @@ export {
     HasPackageDirective,
     PackageExistsDirective,
     HasClaimDirective,
+    HasRoleDirective,
     UserMenuComponent,
     GradientComponent,
     GradientSelectComponent,
@@ -179,6 +182,7 @@ export {
     HasPackageDirective,
     PackageExistsDirective,
     HasClaimDirective,
+    HasRoleDirective,
     UserMenuComponent,
     GradientComponent,
     GradientSelectComponent,

projects/common/src/fm/components/has-role/has-role.directive.ts

@@ -0,0 +1,32 @@
+import { Directive, ViewContainerRef,TemplateRef,OnInit,Input, OnDestroy } from '@angular/core';
+import { Store} from '@ngrx/store';
+import * as appCommonReducer from '../../reducers/app-common.reducer'
+import { Observable, Subscription } from 'rxjs';
+import { IUser } from '../../models/user';
+
+@Directive({
+  selector: '[fmHasRole]',
+})
+export class HasRoleDirective  implements OnInit, OnDestroy{
+  @Input('fmHasRole') role:string;
+
+  constructor(private templateRef$: TemplateRef<any>,private viewContainerRef$: ViewContainerRef,private store$: Store<appCommonReducer.State>) { }
+  private user$:Observable<IUser> = this.store$.select(appCommonReducer.SelectGetUser);
+  private hasView = false;
+  private roleClaim = 'role';
+  private sub: Subscription;
+  ngOnInit() {   
+    this.sub = this.user$.subscribe((user) => {
+      if (user && user.claims[this.roleClaim]?.includes(this.role)) {
+        this.viewContainerRef$.createEmbeddedView(this.templateRef$);
+        this.hasView=true;
+      } else if (this.hasView) {
+        this.viewContainerRef$.clear();
+        this.hasView = false;     
+      }  
+    });    
+  }
+  ngOnDestroy() {
+    if (this.sub) {this.sub.unsubscribe() };
+  }
+}

projects/common/src/fm/reducers/app-common.reducer.ts

@@ -59,10 +59,7 @@ export function reducer(state = initialState, action: appCommonActions.Actions )
     }
     case appCommonActions.INITUSERSUCCESS: {
       let a = action as appCommonActions.InitUserSuccess;
-      let claims = {}
-      Object.getOwnPropertyNames(a.userinfo.info).forEach((k) => {
-         claims[k] = a.userinfo[k];
-      });
+      let claims = { ...a.userinfo.info };
       var user:IUser = {
         code:a.user.code,
         email:claims["email"]!== undefined ? claims["email"] : a.user.name,

projects/common/src/fm/services/admin.service.ts

@@ -0,0 +1,45 @@
+import { Injectable } from '@angular/core';
+import { Observable } from 'rxjs';
+import { IItem } from '../models/item';
+import { HttpClient, HttpParams } from "@angular/common/http";
+import { AppConfig } from "../shared/app.config";
+import {ItemTypeService} from './itemtype.service';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class AdminService {
+  constructor(public httpClient: HttpClient, public appConfig: AppConfig,private itemTypeService:ItemTypeService) {
+  }
+
+  ApiEndpoint() {
+    return this.appConfig.getConfig("apiEndPoint");
+  }
+
+  getItem(code: string): Observable<IItem> {
+    return this.httpClient.get<IItem>(`${this.ApiEndpoint()}/api/v1/admin/${code}`);
+  }
+
+  getItemList(itemType?: string, dataFilter?: any, level?: number, atItemLocationItemCode?: string, indexed?: boolean, validToday?: boolean): Observable<IItem[]> {
+    var params = new HttpParams();
+    if(itemType)  params = params.append("it", itemType);
+    if(dataFilter) params = params.append("df", JSON.stringify(dataFilter));
+    if(atItemLocationItemCode) params = params.append("ail",atItemLocationItemCode);
+    if(indexed) params = params.append("ind",indexed?"true":"false");
+    if (level) params = params.append("lvl", level.toFixed());
+    if (validToday) params = params.append("vt", validToday ? "true" : "false");
+    return this.httpClient.get<IItem[]>(`${this.ApiEndpoint()}/api/v1/admin/`, { params: params });
+  }
+
+  postItem(item:IItem): Observable<IItem> {
+    return this.httpClient.post<IItem>(`${this.ApiEndpoint()}/api/v1/admin`,item);
+  }
+
+  putItem(item:IItem): Observable<IItem> {
+    return this.httpClient.put<IItem>(`${this.ApiEndpoint()}/api/v1/admin/${item.code}`,item);
+  }
+
+  deleteItem(code: string): Observable<any> {
+    return this.httpClient.delete<any>(`${this.ApiEndpoint()}/api/v1/admin/${code}`);
+  }
+}

projects/common/src/fm/services/auth-guard.service.ts

@@ -24,26 +24,33 @@ export class AuthGuard implements CanActivate, CanLoad, CanActivateChild  {
   canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Promise<boolean> {
     let url: string = state.url;
 
-    return this.checkLogin(url);
+    return this.checkLogin(url, route);
   }
 
   canActivateChild(childRoute: ActivatedRouteSnapshot, state: RouterStateSnapshot): Promise<boolean> {
     let url: string = state.url;
 
-    return this.checkLogin(url);
+    return this.checkLogin(url, childRoute);
   }
 
   canLoad(route: Route): Promise<boolean> {
-    return this.checkLogin(route.path);
+    return this.checkLogin(route.path, null);
   }
 
-  checkLogin(url: string): Promise<boolean> {
+  checkLogin(url: string, route: ActivatedRouteSnapshot): Promise<boolean> {
     return new Promise<boolean>((resolve) => {
       if (!this.oauthService.hasValidAccessToken()) {
         console.debug("No valid token");
         this.oauthService.initCodeFlow(url);
         resolve(false);
       } else {
+        const requiredRoleClaim = route.data.role;
+        if (!requiredRoleClaim) { resolve(true); }
+        const ownedClaims = this.oauthService.getIdentityClaims();
+        if (!ownedClaims) { resolve(false); }
+        const ownedRoleClaims: string[] = ownedClaims['role'];
+        if (!ownedRoleClaims) { resolve(false); }
+        if (ownedRoleClaims.findIndex(r => r === requiredRoleClaim) <= -1) { resolve(false); }
         resolve(true);
       }
     });

src/app/admin/admin-router.module.ts

@@ -0,0 +1,25 @@
+import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { AuthGuard } from 'dist/common';
+import { AdminComponent } from './admin.component';
+
+const routes = [   
+  {
+      path: '',
+      component: AdminComponent,
+      canActivate: [AuthGuard],
+      data: {
+        role: 'admin'
+      }   
+  }
+];
+
+@NgModule({
+  imports: [
+      RouterModule.forChild(routes),
+  ],
+  exports: [
+      RouterModule
+  ]
+})
+export class AdminRouterModule { }

src/app/admin/admin.component.ts

@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-test',
+  template: `<h1>Yes! You have access to the admin component.</h1>`
+})
+export class AdminComponent {
+}

src/app/admin/admin.module.ts

@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+import { AdminRouterModule} from './admin-router.module';
+import { AdminComponent } from './admin.component';
+
+@NgModule({
+  imports: [
+      AdminRouterModule
+  ],
+  declarations: [
+      AdminComponent
+  ]
+})
+  
+export class AdminModule { }

src/app/app-routing.module.ts

@@ -65,6 +65,7 @@ const routes = [
   },
   { path: 'map', loadChildren: () => import('../../projects/common-map/src/public-api').then(m => m.AppCommonMapModule), canActivateChild: [AuthGuard],canActivate: [FullScreenGuard], },
   { path: 'map3d', loadChildren: () => import('./map3d/map3d.module').then(m => m.Map3DModule), canActivateChild: [AuthGuard], canActivate: [FullScreenGuard] },
+  { path: 'admin', loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule), canActivateChild: [AuthGuard], canActivate: [FullScreenGuard], data: { role: 'admin' } },
   {
     path: 'registerdevice/:deviceToken',
     canActivate: [FullScreenGuard],

src/app/menu/menu.component.html

@@ -14,6 +14,7 @@
     <div class="card menu-card">
       <ul class="navbar-nav">
         <li class="nav-item py-0" *fmHasPackage="'vnd.farmmaps.itemtype.package.agrirouter'"><a [routerLinkActive]="['active']" [routerLink]="['/agrirouter']" class="nav-link"><span><i class="fal fa-plug" aria-hidden="true"></i> <span i18n>agrirouter</span></span></a></li>
+        <li class="nav-item py-0" *fmHasRole="'admin'"><a [routerLinkActive]="['active']" [routerLink]="['/admin']" class="nav-link"><span><i class="fal fa-plug" aria-hidden="true"></i> <span i18n>Admin role</span></span></a></li>
       </ul>
     </div> 
 </div>