Merge branch 'feature/Upgrade_to_angular_14' into develop

.gitignore

@@ -33,6 +33,7 @@ speed-measure-plugin.json
 .history/*
 
 # misc
+/.angular/cache
 /.sass-cache
 /connect.lock
 /coverage

angular.json

@@ -148,18 +148,6 @@
               "src/assets"
             ]
           }
-        },
-        "lint": {
-          "builder": "@angular-devkit/build-angular:tslint",
-          "options": {
-            "tsConfig": [
-              "src/tsconfig.app.json",
-              "src/tsconfig.spec.json"
-            ],
-            "exclude": [
-              "**/node_modules/**"
-            ]
-          }
         }
       }
     },
@@ -179,15 +167,6 @@
               "devServerTarget": "farmmaps-lib-app:serve:production"
             }
           }
-        },
-        "lint": {
-          "builder": "@angular-devkit/build-angular:tslint",
-          "options": {
-            "tsConfig": "e2e/tsconfig.e2e.json",
-            "exclude": [
-              "**/node_modules/**"
-            ]
-          }
         }
       }
     },
@@ -216,18 +195,6 @@
             "tsConfig": "projects/common/tsconfig.spec.json",
             "karmaConfig": "projects/common/karma.conf.js"
           }
-        },
-        "lint": {
-          "builder": "@angular-devkit/build-angular:tslint",
-          "options": {
-            "tsConfig": [
-              "projects/common/tsconfig.lib.json",
-              "projects/common/tsconfig.spec.json"
-            ],
-            "exclude": [
-              "**/node_modules/**"
-            ]
-          }
         }
       }
     },
@@ -256,18 +223,6 @@
             "tsConfig": "projects/common-map/tsconfig.spec.json",
             "karmaConfig": "projects/common-map/karma.conf.js"
           }
-        },
-        "lint": {
-          "builder": "@angular-devkit/build-angular:tslint",
-          "options": {
-            "tsConfig": [
-              "projects/common-map/tsconfig.lib.json",
-              "projects/common-map/tsconfig.spec.json"
-            ],
-            "exclude": [
-              "**/node_modules/**"
-            ]
-          }
         }
       }
     },
@@ -296,21 +251,8 @@
             "tsConfig": "projects/common-map3d/tsconfig.spec.json",
             "karmaConfig": "projects/common-map3d/karma.conf.js"
           }
-        },
-        "lint": {
-          "builder": "@angular-devkit/build-angular:tslint",
-          "options": {
-            "tsConfig": [
-              "projects/common-map3d/tsconfig.lib.json",
-              "projects/common-map3d/tsconfig.spec.json"
-            ],
-            "exclude": [
-              "**/node_modules/**"
-            ]
-          }
         }
       }
     }
-  },
-  "defaultProject": "farmmaps-lib-app"
+  }
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "farmmaps-lib-app",
-  "version": "2.0.3",
+  "version": "3.0.0",
   "scripts": {
     "ng": "ng",
     "start": "ng serve",
@@ -11,28 +11,28 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "~12.2.8",
-    "@angular/common": "~12.2.8",
-    "@angular/compiler": "~12.2.8",
-    "@angular/core": "~12.2.8",
-    "@angular/forms": "~12.2.8",
-    "@angular/platform-browser": "~12.2.8",
-    "@angular/platform-browser-dynamic": "~12.2.8",
-    "@angular/router": "~12.2.8",
+    "@angular/animations": "^14.1.3",
+    "@angular/common": "^14.1.3",
+    "@angular/compiler": "^14.1.3",
+    "@angular/core": "^14.1.3",
+    "@angular/forms": "^14.1.3",
+    "@angular/platform-browser": "^14.1.3",
+    "@angular/platform-browser-dynamic": "^14.1.3",
+    "@angular/router": "^14.1.3",
     "@farmmaps/common": "file:dist/common",
     "@farmmaps/common-map": "file:dist/common-map",
     "@farmmaps/common-map3d": "file:dist/common-map3d",
     "@microsoft/signalr": "^3.1.16",
-    "@ng-bootstrap/ng-bootstrap": "^9.0",
-    "@ngrx/effects": "^12.0",
-    "@ngrx/router-store": "^12.0",
-    "@ngrx/store": "^12.0",
-    "angular-oauth2-oidc": "^12.0",
+    "@ng-bootstrap/ng-bootstrap": "^9.1.3",
+    "@ngrx/effects": "^14",
+    "@ngrx/router-store": "^14",
+    "@ngrx/store": "^14",
+    "angular-oauth2-oidc": "^13",
+    "ngrx-store-localstorage": "^14",
     "bootstrap": "^4.6.0",
     "cesium": "^1.82.1",
     "core-js": "^2.6.12",
-    "moment": "^2.29.1",
-    "ngrx-store-localstorage": "^12.0",
+    "moment": "^2.29.4",
     "ngx-avatar": "^4.1.0",
     "ngx-clipboard": "^14.0.1",
     "ngx-image-cropper": "^3.3.5",
@@ -43,16 +43,16 @@
     "resumablejs": "^1.1.0",
     "rxjs": "^6.6.7",
     "tassign": "^1.0.0",
-    "tslib": "^2.2.0",
+    "tslib": "^2.4.0",
     "zone.js": "~0.11.4"
   },
   "devDependencies": {
-    "@angular-builders/custom-webpack": "^12.1.3",
-    "@angular-devkit/build-angular": "^12.2.8",
-    "@angular/cli": "^12.2.8",
-    "@angular/compiler-cli": "~12.2.8",
-    "@angular/language-service": "~12.2.8",
-    "@angular/localize": "^12.2.8",
+    "@angular-builders/custom-webpack": "^14",
+    "@angular-devkit/build-angular": "^14.1.3",
+    "@angular/cli": "^14.1.3",
+    "@angular/compiler-cli": "^14.1.3",
+    "@angular/language-service": "^14.1.3",
+    "@angular/localize": "^14.1.3",
     "@types/arcgis-rest-api": "^10.4.5",
     "@types/jasmine": "~2.8.8",
     "@types/jasminewd2": "^2.0.9",
@@ -60,15 +60,15 @@
     "codelyzer": "^5.1.2",
     "jasmine-core": "~3.5.0",
     "jasmine-spec-reporter": "~5.0.0",
-    "karma": "~6.3.3",
+    "karma": "^6.3.20",
     "karma-chrome-launcher": "~3.1.0",
     "karma-coverage-istanbul-reporter": "~3.0.2",
     "karma-jasmine": "~4.0.0",
     "karma-jasmine-html-reporter": "^1.6.0",
-    "ng-packagr": "^12.2.2",
+    "ng-packagr": "^14.1.0",
     "protractor": "~7.0.0",
     "ts-node": "^8.8.1",
     "tslint": "~6.1.0",
-    "typescript": "~4.3.5"
+    "typescript": "~4.6.4"
   }
 }

projects/common-map/package.json

@@ -8,11 +8,11 @@
     "tslib": "^2.0.0"
   },
   "peerDependencies": {
-    "@angular/core": "~12.2.8",
-    "ngrx-store-localstorage": "^12.0",
-    "@ngrx/effects": "^12.0",
-    "@ngrx/router-store":"^12.0",
-    "@ngrx/store":"^12.0",
+    "@angular/core": "~14",
+    "ngrx-store-localstorage": "^14",
+    "@ngrx/effects": "^14",
+    "@ngrx/router-store":"^14",
+    "@ngrx/store":"^14",
     "tassign": "^1.0.0",
     "@farmmaps/common": "~2.0",
     "ngx-openlayers": "1.0.0-next.19",

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

@@ -169,134 +169,119 @@ export {
   GeometryThumbnailComponent
 }
 
-@NgModule({
-  imports: [
-    CommonModule,
-    AngularOpenlayersModule,
-    MapRoutingModule,
-    StoreModule.forFeature(MODULE_NAME, mapReducers.reducer,{metaReducers:metaReducers}),
-    EffectsModule.forFeature([mapEffects.MapEffects]),
-    NgbModule,
-    FormsModule,
-    ReactiveFormsModule,
-    AppCommonModule
-  ],
-  declarations: [
-    ZoomToExtentComponent,
-    ItemVectorSourceComponent,
-    ItemLayersComponent,
-    FileDropTargetComponent,
-    MapComponent,
-    MetaDataModalComponent,
-    RotationResetComponent,
-    MapSearchComponent,
-    SelectPeriodModalComponent,
-    LayerListComponent,
-    LegendComponent,
-    LayerVectorImageComponent,
-    FeatureListComponent,
-    WidgetHostDirective,
-    FeatureListContainerComponent,
-    FeatureListCroppingschemeComponent,
-    FeatureListCropfieldComponent,
-    FeatureListFeatureContainerComponent,
-    FeatureListFeatureComponent,
-    FeatureListFeatureCroppingschemeComponent,
-    FeatureListFeatureCropfieldComponent,
-    SelectedItemContainerComponent,
-    SelectedItemComponent,
-    SelectedItemCropfieldComponent,
-    SelectedItemGeotiffComponent,
-    SelectedItemTemporalComponent,
-    SelectedItemShapeComponent,
-    ItemListItemComponent,
-    ItemListItemContainerComponent,
-    ItemListComponent,
-    ItemWidgetListComponent,
-    WidgetStatusComponent,
-    GpsLocation,
-    PanToLocation,
-    LayerSwitcher,
-    HistogramDetailsComponent,
-    StatisticsDetailsComponent,
-    ifZoomToShowDirective,
-    ZoomToShowAlert,
-    LayerValuesComponent,
-    GeometryThumbnailComponent
-  ],
-  entryComponents: [
-    FeatureListComponent,
-    FeatureListCroppingschemeComponent,
-    FeatureListCropfieldComponent,
-    FeatureListFeatureComponent,
-    FeatureListFeatureCroppingschemeComponent,
-    FeatureListFeatureCropfieldComponent,
-    SelectedItemComponent,
-    SelectedItemCropfieldComponent,
-    SelectedItemGeotiffComponent,
-    SelectedItemTemporalComponent,
-    SelectedItemShapeComponent,
-    ItemListComponent,
-    ItemListItemComponent,
-  ],
-  exports: [
-       ItemVectorSourceComponent,
-       ItemLayersComponent,
-       FileDropTargetComponent,
-       MetaDataModalComponent,
-       MapComponent,
-       GpsLocation,
-       PanToLocation,
-       LayerSwitcher,
-       FeatureListFeatureComponent,
-       FeatureListFeatureCropfieldComponent,
-       FeatureListFeatureCroppingschemeComponent,
-       SelectedItemContainerComponent,
-       SelectedItemComponent,
-       SelectedItemCropfieldComponent,
-       SelectedItemGeotiffComponent,
-       SelectedItemTemporalComponent,
-       SelectedItemShapeComponent,
-       ItemListItemComponent,
-       ItemListItemContainerComponent,
-       ItemListComponent,
-       ItemWidgetListComponent,
-       WidgetStatusComponent,
-       RotationResetComponent,
-       MapSearchComponent,
-       SelectPeriodModalComponent,
-       LayerListComponent,
-       LegendComponent,
-       LayerVectorImageComponent,
-       FeatureListComponent,
-       WidgetHostDirective,
-       FeatureListContainerComponent,
-       FeatureListCroppingschemeComponent,
-       FeatureListCropfieldComponent,
-       FeatureListFeatureContainerComponent,
-       ZoomToExtentComponent,
-       ifZoomToShowDirective,
-       ZoomToShowAlert,
-       GeometryThumbnailComponent
-  ],
-  providers: [
-    FeatureIconService,
-    GeolocationService,
-    DeviceOrientationService,
-    TemporalService,
-    { provide: AbstractFeatureListComponent, useClass: FeatureListCroppingschemeComponent, multi: true },
-    { provide: AbstractFeatureListComponent, useClass: FeatureListCropfieldComponent, multi: true },
-    { provide: AbstractFeatureListFeatureComponent, useClass: FeatureListFeatureComponent, multi: true },
-    { provide: AbstractFeatureListFeatureComponent, useClass: FeatureListFeatureCroppingschemeComponent, multi: true },
-    { provide: AbstractFeatureListFeatureComponent, useClass: FeatureListFeatureCropfieldComponent, multi: true },
-    { provide: AbstractSelectedItemComponent, useClass: SelectedItemComponent, multi: true },
-    { provide: AbstractSelectedItemComponent, useClass: SelectedItemCropfieldComponent, multi: true },
-    { provide: AbstractSelectedItemComponent, useClass: SelectedItemGeotiffComponent, multi: true },
-    { provide: AbstractSelectedItemComponent, useClass: SelectedItemTemporalComponent, multi: true },
-    { provide: AbstractSelectedItemComponent, useClass: SelectedItemShapeComponent, multi: true },
-    { provide: AbstractItemListItemComponent, useClass: ItemListItemComponent, multi: true },
-    { provide: AbstractItemListComponent, useClass: ItemListComponent, multi: true }
-  ]
+@NgModule({
+    imports: [
+        CommonModule,
+        AngularOpenlayersModule,
+        MapRoutingModule,
+        StoreModule.forFeature(MODULE_NAME, mapReducers.reducer, { metaReducers: metaReducers }),
+        EffectsModule.forFeature([mapEffects.MapEffects]),
+        NgbModule,
+        FormsModule,
+        ReactiveFormsModule,
+        AppCommonModule
+    ],
+    declarations: [
+        ZoomToExtentComponent,
+        ItemVectorSourceComponent,
+        ItemLayersComponent,
+        FileDropTargetComponent,
+        MapComponent,
+        MetaDataModalComponent,
+        RotationResetComponent,
+        MapSearchComponent,
+        SelectPeriodModalComponent,
+        LayerListComponent,
+        LegendComponent,
+        LayerVectorImageComponent,
+        FeatureListComponent,
+        WidgetHostDirective,
+        FeatureListContainerComponent,
+        FeatureListCroppingschemeComponent,
+        FeatureListCropfieldComponent,
+        FeatureListFeatureContainerComponent,
+        FeatureListFeatureComponent,
+        FeatureListFeatureCroppingschemeComponent,
+        FeatureListFeatureCropfieldComponent,
+        SelectedItemContainerComponent,
+        SelectedItemComponent,
+        SelectedItemCropfieldComponent,
+        SelectedItemGeotiffComponent,
+        SelectedItemTemporalComponent,
+        SelectedItemShapeComponent,
+        ItemListItemComponent,
+        ItemListItemContainerComponent,
+        ItemListComponent,
+        ItemWidgetListComponent,
+        WidgetStatusComponent,
+        GpsLocation,
+        PanToLocation,
+        LayerSwitcher,
+        HistogramDetailsComponent,
+        StatisticsDetailsComponent,
+        ifZoomToShowDirective,
+        ZoomToShowAlert,
+        LayerValuesComponent,
+        GeometryThumbnailComponent
+    ],
+    exports: [
+        ItemVectorSourceComponent,
+        ItemLayersComponent,
+        FileDropTargetComponent,
+        MetaDataModalComponent,
+        MapComponent,
+        GpsLocation,
+        PanToLocation,
+        LayerSwitcher,
+        FeatureListFeatureComponent,
+        FeatureListFeatureCropfieldComponent,
+        FeatureListFeatureCroppingschemeComponent,
+        SelectedItemContainerComponent,
+        SelectedItemComponent,
+        SelectedItemCropfieldComponent,
+        SelectedItemGeotiffComponent,
+        SelectedItemTemporalComponent,
+        SelectedItemShapeComponent,
+        ItemListItemComponent,
+        ItemListItemContainerComponent,
+        ItemListComponent,
+        ItemWidgetListComponent,
+        WidgetStatusComponent,
+        RotationResetComponent,
+        MapSearchComponent,
+        SelectPeriodModalComponent,
+        LayerListComponent,
+        LegendComponent,
+        LayerVectorImageComponent,
+        FeatureListComponent,
+        WidgetHostDirective,
+        FeatureListContainerComponent,
+        FeatureListCroppingschemeComponent,
+        FeatureListCropfieldComponent,
+        FeatureListFeatureContainerComponent,
+        ZoomToExtentComponent,
+        ifZoomToShowDirective,
+        ZoomToShowAlert,
+        GeometryThumbnailComponent
+    ],
+    providers: [
+        FeatureIconService,
+        GeolocationService,
+        DeviceOrientationService,
+        TemporalService,
+        { provide: AbstractFeatureListComponent, useClass: FeatureListCroppingschemeComponent, multi: true },
+        { provide: AbstractFeatureListComponent, useClass: FeatureListCropfieldComponent, multi: true },
+        { provide: AbstractFeatureListFeatureComponent, useClass: FeatureListFeatureComponent, multi: true },
+        { provide: AbstractFeatureListFeatureComponent, useClass: FeatureListFeatureCroppingschemeComponent, multi: true },
+        { provide: AbstractFeatureListFeatureComponent, useClass: FeatureListFeatureCropfieldComponent, multi: true },
+        { provide: AbstractSelectedItemComponent, useClass: SelectedItemComponent, multi: true },
+        { provide: AbstractSelectedItemComponent, useClass: SelectedItemCropfieldComponent, multi: true },
+        { provide: AbstractSelectedItemComponent, useClass: SelectedItemGeotiffComponent, multi: true },
+        { provide: AbstractSelectedItemComponent, useClass: SelectedItemTemporalComponent, multi: true },
+        { provide: AbstractSelectedItemComponent, useClass: SelectedItemShapeComponent, multi: true },
+        { provide: AbstractItemListItemComponent, useClass: ItemListItemComponent, multi: true },
+        { provide: AbstractItemListComponent, useClass: ItemListComponent, multi: true }
+    ]
 })
 
 

projects/common-map/src/fm-map/components/meta-data-modal/meta-data-modal.component.ts

@@ -1,5 +1,5 @@
 import { Component, Output, ViewChild, EventEmitter, Input, ElementRef, HostListener } from '@angular/core';
-import { FormGroup,FormBuilder, Validators } from '@angular/forms';
+import { UntypedFormGroup,UntypedFormBuilder, Validators } from '@angular/forms';
 import { IListItem } from '@farmmaps/common';
 import { IDroppedFile } from '../aol/file-drop-target/file-drop-target.component';
 import {NgbModal, NgbModalRef} from "@ng-bootstrap/ng-bootstrap";
@@ -33,9 +33,9 @@ export class MetaDataModalComponent {
   @Output() onCloseModal = new EventEmitter<any>();
   @Output() onAddFilesWithMetaData = new EventEmitter<IMetaData>();
 
-  constructor(private modalService: NgbModal, public fb: FormBuilder) { }
+  constructor(private modalService: NgbModal, public fb: UntypedFormBuilder) { }
 
-  public metaDataForm: FormGroup;
+  public metaDataForm: UntypedFormGroup;
 
   handleMetaDataEntered(event) {
     if (this.metaDataForm.valid) {

projects/common-map/src/test.ts

@@ -14,7 +14,9 @@ declare const require: any;
 // First, initialize the Angular testing environment.
 getTestBed().initTestEnvironment(
   BrowserDynamicTestingModule,
-  platformBrowserDynamicTesting()
+  platformBrowserDynamicTesting(), {
+    teardown: { destroyAfterEach: false }
+}
 );
 // Then we find all the tests.
 const context = require.context('./', true, /\.spec\.ts$/);

projects/common-map/tsconfig.lib.json

@@ -2,7 +2,7 @@
   "extends": "../../tsconfig.json",
   "compilerOptions": {
     "outDir": "../../out-tsc/lib",
-    "target": "es2015",
+    "target": "es2020",
     "module": "es2015",
     "moduleResolution": "node",
     "declaration": true,

projects/common-map/tsconfig.lib.prod.json

@@ -2,7 +2,7 @@
   "extends": "../../tsconfig.json",
   "compilerOptions": {
     "outDir": "../../out-tsc/lib",
-    "target": "es2015",
+    "target": "es2020",
     "module": "es2015",
     "moduleResolution": "node",
     "declaration": true,

projects/common-map3d/package.json

@@ -5,8 +5,8 @@
     "registry": "https://repository.akkerweb.nl/repository/npm-hosted/"
   },
   "peerDependencies": {
-    "@angular/common":  "~12.2.8",
-    "@angular/core":  "~12.2.8",
+    "@angular/common":  "~14",
+    "@angular/core":  "~14",
     "ngx-openlayers": "1.0.0-next.19",
     "cesium": "^1.82.1",
     "ol-cesium": "^2.13.0"

projects/common-map3d/src/test.ts

@@ -18,7 +18,9 @@ declare const require: {
 // First, initialize the Angular testing environment.
 getTestBed().initTestEnvironment(
   BrowserDynamicTestingModule,
-  platformBrowserDynamicTesting()
+  platformBrowserDynamicTesting(), {
+    teardown: { destroyAfterEach: false }
+}
 );
 // Then we find all the tests.
 const context = require.context('./', true, /\.spec\.ts$/);

projects/common/ng-package.json

@@ -2,10 +2,7 @@
   "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
   "dest": "../../dist/common",
   "lib": {
-    "entryFile": "src/public-api.ts",
-    "umdModuleIds": {
-      "my-data": "my-data"
-    }
+    "entryFile": "src/public-api.ts"
   },
   "allowedNonPeerDependencies": [
     "."

projects/common/package.json

@@ -6,17 +6,17 @@
   },
   "peerDependencies": {
     "@ng-bootstrap/ng-bootstrap": "^7.0",
-    "@angular/common": "~12.2.8",
-    "@angular/core": "~12.2.8",
-    "@angular/forms": "~12.2.8",
-    "@ngrx/effects": "^12.0",
-    "@ngrx/router-store": "^12.0",
-    "@ngrx/store": "^12.0",
+    "@angular/common": "~14",
+    "@angular/core": "~14",
+    "@angular/forms": "~14",
+    "@ngrx/effects": "^14",
+    "@ngrx/router-store": "^14",
+    "@ngrx/store": "^14",
     "tassign": "^1.0.0",
     "bootstrap": "^4.4.1",
     "@microsoft/signalr": "^3.1.3",
     "ngx-uploadx": "^3.3.4",
-    "angular-oauth2-oidc": "^12.0",
+    "angular-oauth2-oidc": "^13",
     "moment": "^2.27.0",
     "ngx-avatar": "^4.0.0",
     "ngx-image-cropper": "^3.3.5",

projects/common/src/fm/actions/app-common.actions.ts

@@ -12,6 +12,9 @@ export const INITUSERSUCCESS = '[AppCommon] InitUserSuccess';
 export const INITUSERPACKAGES = '[AppCommon] InitUserPackages';
 export const INITUSERPACKAGESSUCCESS = '[AppCommon] InitUserPackagesSuccess';
 
+export const INITPACKAGES = '[AppCommon] InitPackages';
+export const INITPACKAGESSUCCESS = '[AppCommon] InitPackagesSuccess';
+
 export const INITUSERSETTINGSROOT = '[AppCommon] InitUserSettingsRoot';
 export const INITUSERSETTINGSROOTSUCCESS = '[AppCommon] InitUserSettingsRootSuccess';
 
@@ -102,6 +105,18 @@ export class InitUserPackagesSuccess implements Action {
   constructor(public items:IItem[] ) { }
 }
 
+export class InitPackages implements Action {
+  readonly type = INITPACKAGES;
+
+  constructor() {}
+}
+
+export class InitPackagesSuccess implements Action {
+  readonly type = INITPACKAGESSUCCESS;
+
+  constructor(public items:IItem[] ) { }
+}
+
 export class InitUserSettingsRoot implements Action {
   readonly type = INITUSERSETTINGSROOT;
 
@@ -381,6 +396,8 @@ export type Actions = OpenModal
   | SetMenuVisible
   | InitUserPackages
   | InitUserPackagesSuccess
+  | InitPackages
+  | InitPackagesSuccess
   | InitUserSettingsRoot
   | InitUserSettingsRootSuccess
   | ToggleAccountMenu

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

@@ -35,6 +35,7 @@ import { PackageService } from './services/package.service';
 import { PackagePreloadStrategy } from './services/package-preload-strategy.service';
 import { SenmlService } from './services/senml-service';
 import { DeviceService } from './services/device.service';
+import { GradientService} from './services/gradient.service';
 
 export {
   FolderService,
@@ -61,7 +62,8 @@ export {
   PackageService,
   SenmlService,
   PackagePreloadStrategy,
-  DeviceService
+  DeviceService,
+  GradientService
 };
 
 @NgModule({

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

@@ -32,6 +32,7 @@ import { TimespanComponent } from './components/timespan/timespan.component';
 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 { UserMenuComponent} from './components/user-menu/user-menu.component';
 import { ThumbnailComponent } from './components/thumbnail/thumbnail.component';
@@ -82,6 +83,7 @@ export {
   UserMenuComponent,
   ThumbnailComponent,
   HasPackageDirective,
+  PackageExistsDirective,
   HasClaimDirective,
   Alert,
   IEventMessage,
@@ -144,6 +146,7 @@ export {
     SessionClearedComponent,
     MenuBackgroundComponent,
     HasPackageDirective,
+    PackageExistsDirective,
     HasClaimDirective,
     UserMenuComponent,
     GradientComponent,
@@ -174,6 +177,7 @@ export {
     SessionClearedComponent,
     MenuBackgroundComponent,
     HasPackageDirective,
+    PackageExistsDirective,
     HasClaimDirective,
     UserMenuComponent,
     GradientComponent,

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

@@ -1,6 +1,7 @@
 import { Component, Input, OnInit ,OnChanges, SimpleChanges,ChangeDetectorRef} from '@angular/core';
 import { IItem} from '../../models/item'
 import { IGradientstop } from '../../models/gradient';
+import { GradientService } from '../../common-service.module';
 
 
 
@@ -14,23 +15,12 @@ export class GradientComponent implements OnInit,OnChanges {
   @Input() gradientItem:IItem;
   public gradientStyle:any = {};
 
-  constructor(private ref: ChangeDetectorRef) { }
+  constructor(private ref: ChangeDetectorRef,private gradientService:GradientService) { }
 
   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);
+      return this.gradientService.getGradientStyle(gradient);
     }
   }
 
@@ -49,5 +39,4 @@ export class GradientComponent implements OnInit,OnChanges {
       }      
     }
   }
-
 }

projects/common/src/fm/components/package-exists/package-exists.directive.ts

@@ -0,0 +1,61 @@
+import {AfterViewInit, Directive, Input, OnDestroy, TemplateRef, ViewContainerRef} from '@angular/core';
+import {Subscription} from 'rxjs';
+import {PackageService} from '../../services/package.service';
+import * as appCommonReducer from '../../reducers/app-common.reducer';
+import {Store} from '@ngrx/store';
+
+@Directive({
+  selector: '[fmPackageExists]',
+})
+export class PackageExistsDirective implements OnDestroy, AfterViewInit {
+
+  @Input()
+  set fmPackageExists(packageIdentifier: string) {
+    this.packageIdentifier = packageIdentifier;
+    this.updateView();
+  }
+
+  @Input()
+  set fmPackageExistsThen(thenTemplate: TemplateRef<any>) {
+    this.thenTemplate = thenTemplate;
+    this.updateView();
+  }
+
+  @Input()
+  set fmPackageExistsElse(thenTemplate: TemplateRef<any>) {
+    this.elseTemplate = thenTemplate;
+    this.updateView();
+  }
+
+  private packageIdentifier: string;
+  private thenTemplate: TemplateRef<any>;
+  private elseTemplate: TemplateRef<any>;
+  private packSub: Subscription;
+
+  constructor(private hostTemplateRef: TemplateRef<any>, private viewContainerRef: ViewContainerRef,
+              private store: Store<appCommonReducer.State>, private packageService: PackageService) {
+    this.thenTemplate = hostTemplateRef;
+    this.packSub = this.store.select(appCommonReducer.SelectGetPackages).subscribe((_) => {
+      this.updateView();
+    });
+  }
+
+  ngAfterViewInit() {
+    this.updateView();
+  }
+
+  updateView() {
+    this.viewContainerRef.clear();
+    if (this.packageService.packageExists(this.packageIdentifier)) {
+      this.viewContainerRef.createEmbeddedView(this.thenTemplate);
+    } else if (this.elseTemplate) {
+      this.viewContainerRef.createEmbeddedView(this.elseTemplate);
+    }
+  }
+
+  ngOnDestroy() {
+    if (this.packSub) {
+      this.packSub.unsubscribe();
+    }
+  }
+}

projects/common/src/fm/components/tag-input/tag-input.component.html

@@ -1,3 +1,11 @@
-<div class="tags">
-  <span class="tag rounded bg-primary text-white" *ngFor="let tag of tags;"><span>{{tag}}</span> <i (click)="handleDeleteTag(tag)" class="fal fa-times" aria-hidden="true"></i></span><input type="text" #taginput (blur)="handleAddTag($event)" (keyup)="handleCheckAddTag($event)" [(ngModel)]="tag" [ngbTypeahead]="findTag" (selectItem)="handleSelect($event)" placeholder="New tag"/>
-</div>
+<div class="tags">
+  <span class="tag rounded bg-primary text-white" *ngFor="let tag of tags;"><span>{{tag}}</span> <i
+    (click)="handleDeleteTag(tag)" class="fal fa-times" aria-hidden="true"></i></span><input
+  type="text" #tagInputElement
+  (blur)="handleBlur($event, false)"
+  (keyup)="handleKeyUp($event)"
+  [(ngModel)]="tag"
+  [ngbTypeahead]="findTag"
+  (selectItem)="handleSelect($event)"
+  placeholder="New tag"/>
+</div>

projects/common/src/fm/components/tag-input/tag-input.component.ts

@@ -1,104 +1,122 @@
-import { Component, Input, forwardRef,ElementRef,ViewChild } from '@angular/core';
-import { ControlValueAccessor, NG_VALUE_ACCESSOR,NgModel } from '@angular/forms';
-import { Observable,of } from 'rxjs';
-import { tap,catchError,debounceTime,distinctUntilChanged,switchMap } from 'rxjs/operators'
-import { TypeaheadService } from '../../services/typeahead.service';
-
-@Component({
-  selector: 'fm-tag-input',
-  templateUrl: 'tag-input.component.html',
-  styleUrls: ['tag-input.component.scss'],
-  providers: [
-    {
-      provide: NG_VALUE_ACCESSOR,
-      useExisting: forwardRef(() => TagInputComponent),
-      multi: true
-    }
-  ]
-})
-
-export class TagInputComponent implements ControlValueAccessor  {
-  @Input() tags: string[]
-  @ViewChild('taginput', { static: true }) tagInputElement: ElementRef;
-  public tag: string;
-  searching = false;
-  searchFailed = false;
-
-  constructor(private typeaheadService: TypeaheadService) {
-  }
-
-  tagExists(tag) {
-    if (tag.length == 0) return true;
-    for (let t of this.tags) {
-      if (t.toLowerCase() == tag.toLowerCase()) return true;
-    }
-    return false;
-  }
-
-  handleDeleteTag(tag) {
-    let tags = [];
-    for (let t of this.tags) {
-      if (t != tag) tags.push(t);
-    }
-    this.tags = tags;
-    this.propagateChange(tags);
-  }
-
-  handleAddTag(event) {
-    if (!this.tagExists(this.tag)) {
-      this.tags.push(this.tag);
-      this.propagateChange(this.tags);
-    }
-    this.tag = "";
-    this.tagInputElement.nativeElement.focus();
-  }
-
-  handleCheckAddTag(event: KeyboardEvent) {
-    if (event.keyCode == 188) {
-      let tag = this.tag.substr(0, this.tag.length - 1); // strip ,
-      if (!this.tagExists(tag)) {
-        this.tags.push(tag);
-        this.propagateChange(this.tags);
-      }
-      this.tag = "";
-    }
-  }
-
-  handleSelect(event) {
-    if (!this.tagExists(event.item)) {
-      this.tags.push(event.item);
-      this.propagateChange(this.tags);
-    }
-    event.preventDefault();
-    this.tag = "";
-  }
-
-  propagateChange = (_: any) => { };
-
-  registerOnChange(fn) {
-    this.propagateChange = fn;
-  }
-
-  findTag = (text$: Observable<string>) =>
-  text$.pipe(
-        debounceTime(200),
-        distinctUntilChanged(), 
-        tap(() => this.searching = true),
-        switchMap(term => term.length < 1 ? of([]) :
-           this.typeaheadService.getTagTypeaheadItems(term).pipe(
-            tap(() => this.searchFailed = false),
-            catchError(() => {
-                this.searchFailed = true;
-                return of([]);
-            }))
-         ),
-         tap(() => this.searching = false)
-  );
-
-  writeValue(value: any) {
-    this.tags = value;
-    this.tag = "";
-  }
-
-  registerOnTouched() { }
-}
+import {Component, ElementRef, forwardRef, Input, ViewChild} from '@angular/core';
+import {ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms';
+import {Observable, of} from 'rxjs';
+import {catchError, debounceTime, distinctUntilChanged, switchMap, tap} from 'rxjs/operators';
+import {TypeaheadService} from '../../services/typeahead.service';
+import {NgbTypeahead} from '@ng-bootstrap/ng-bootstrap';
+
+@Component({
+  selector: 'fm-tag-input',
+  templateUrl: 'tag-input.component.html',
+  styleUrls: ['tag-input.component.scss'],
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => TagInputComponent),
+      multi: true
+    }
+  ]
+})
+
+export class TagInputComponent implements ControlValueAccessor {
+  @Input() tags: string[] = [];
+  @ViewChild('tagInputElement', {static: true}) tagInputElement: ElementRef;
+  @ViewChild(NgbTypeahead, {static: true}) typeahead: NgbTypeahead;
+
+  public tag: string;
+  searching = false;
+  searchFailed = false;
+
+  constructor(private typeaheadService: TypeaheadService) {
+  }
+
+  tagExists(tag) {
+    if (tag.length === 0) {
+      return true;
+    }
+    for (const t of this.tags) {
+      if (t.toLowerCase() === tag.toLowerCase()) {
+        return true;
+      }
+    }
+    return false;
+  }
+
+  addTag(tag, keepFocus = true) {
+    if (!this.tagExists(tag)) {
+      this.tags.push(tag);
+      this.propagateChange(this.tags);
+    }
+    this.tag = '';
+
+    if (keepFocus) {
+      this.tagInputElement.nativeElement.focus();
+    }
+  }
+
+  handleDeleteTag(tag) {
+    const tags = [];
+    for (const t of this.tags) {
+      if (t !== tag) {
+        tags.push(t);
+      }
+    }
+    this.tags = tags;
+    this.propagateChange(tags);
+  }
+
+  handleBlur(event, keepFocus = true) {
+    if (!this.typeahead.isPopupOpen()) {
+      this.addTag(this.tag, keepFocus);
+    } else {
+      this.tag = '';
+    }
+  }
+
+  handleKeyUp(event: KeyboardEvent) {
+    if (event.keyCode === 188) {
+      const tag = this.tag.substr(0, this.tag.length - 1); // strip ,
+      this.addTag(tag);
+    }
+  }
+
+  handleSelect(event) {
+    if (!this.tagExists(event.item)) {
+      this.tags.push(event.item);
+      this.propagateChange(this.tags);
+    }
+    event.preventDefault();
+    this.tag = '';
+  }
+
+  propagateChange = (_: any) => {
+  };
+
+  registerOnChange(fn) {
+    this.propagateChange = fn;
+  }
+
+  findTag = (text$: Observable<string>) =>
+    text$.pipe(
+      distinctUntilChanged(),
+      debounceTime(200),
+      tap(() => this.searching = true),
+      switchMap(term => term.length < 1 ? of([]) :
+        this.typeaheadService.getTagTypeaheadItems(term).pipe(
+          tap(() => this.searchFailed = false),
+          catchError(() => {
+            this.searchFailed = true;
+            return of([]);
+          }))
+      ),
+      tap(() => this.searching = false)
+    );
+
+  writeValue(value: any) {
+    this.tags = value;
+    this.tag = '';
+  }
+
+  registerOnTouched() {
+  }
+}

projects/common/src/fm/effects/app-common.effects.ts

@@ -62,6 +62,15 @@ export class AppCommonEffects {
       )
     })
   ));
+  initPackages$ =  createEffect(() => this.actions$.pipe(
+    ofType(appCommonActions.INITPACKAGES),
+    switchMap(() => {
+      return this.itemService$.getItemList('vnd.farmmaps.itemtype.package.template').pipe(
+        switchMap((items) => of(new appCommonActions.InitPackagesSuccess(items))),
+        catchError(error =>  of(new appCommonActions.Fail(error)))
+      )
+    })
+  ));
 
   userPackagesChanged$ =  createEffect(() => this.actions$.pipe(
     ofType(appCommonActions.ITEMCHANGEDEVENT),
@@ -99,7 +108,7 @@ export class AppCommonEffects {
   initUserSuccess$ =  createEffect(() => this.actions$.pipe(
     ofType(appCommonActions.INITUSERSUCCESS),
     switchMap(() => {
-      return [new appCommonActions.InitRoot(),new appCommonActions.InitUserPackages(),new appCommonActions.InitUserSettingsRoot()];
+      return [new appCommonActions.InitRoot(),new appCommonActions.InitUserPackages(),new appCommonActions.InitPackages(),new appCommonActions.InitUserSettingsRoot()];
     }
     )));
 

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

@@ -9,3 +9,8 @@ export interface IPackage {
 export interface IPackages {
     [id: string]: IPackage[];
 }
+
+export interface IPackageMap {
+    [id: string]: IPackage;
+}
+

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

@@ -2,7 +2,7 @@ import { tassign } from 'tassign';
 import { IItemTypes} from '../models/item.types';
 import { IListItem } from '../models/list.item';
 import { IUser } from '../models/user';
-import { IPackage,IPackages} from '../models/package';
+import { IPackage,IPackageMap,IPackages} from '../models/package';
 import * as appCommonActions from '../actions/app-common.actions';
 import { createSelector, createFeatureSelector, ActionReducerMap } from '@ngrx/store';
 
@@ -20,6 +20,7 @@ export interface State {
   routeLoading:boolean,
   menuVisible: boolean,
   userPackages: IPackages,
+  packages: IPackageMap,
   userSettingsRoot: IItem,
   accountMenuVisible: boolean,
   appMenuVisible: boolean,
@@ -40,6 +41,7 @@ export const initialState: State = {
   routeLoading: false,
   menuVisible: false,
   userPackages: {},
+  packages: {},
   userSettingsRoot: null,
   accountMenuVisible: false,
   appMenuVisible: false,
@@ -140,6 +142,15 @@ export function reducer(state = initialState, action: appCommonActions.Actions )
 
       return tassign(state,{userPackages:packages});
     }
+    case appCommonActions.INITPACKAGESSUCCESS:{
+      let a = action as appCommonActions.InitPackagesSuccess;
+      let packages = {}
+      a.items.forEach((item) => {
+        packages[item.data.id] = item.data;
+      });
+
+      return tassign(state,{packages:packages});
+    }
     case appCommonActions.INITUSERSETTINGSROOTSUCCESS:{
       let a = action as appCommonActions.InitUserSettingsRootSuccess;
       return tassign(state, { userSettingsRoot : a.item });
@@ -187,6 +198,7 @@ export const getRouteLoading = (state: State) => state.routeLoading;
 export const getMenuVisible = (state: State) => state.menuVisible;
 export const getUser = (state: State) => state.user;
 export const getUserPackages = (state: State) => state.userPackages;
+export const getPackages = (state: State) => state.packages;
 export const getUserSettingsRoot = (state: State) => state.userSettingsRoot;
 export const getAccountMenuVisible = (state: State) => state.accountMenuVisible;
 export const getAppMenuVisible = (state: State) => state.appMenuVisible;
@@ -207,6 +219,7 @@ export const selectGetRouteLoading = createSelector(selectAppCommonState, getRou
 export const SelectGetMenuVisible = createSelector(selectAppCommonState,getMenuVisible);
 export const SelectGetUser = createSelector(selectAppCommonState,getUser);
 export const SelectGetUserPackages = createSelector(selectAppCommonState,getUserPackages);
+export const SelectGetPackages = createSelector(selectAppCommonState,getPackages);
 export const SelectGetValidUserPackages = createSelector(SelectGetUserPackages, (packageMap) => {
   return getValidPackages(packageMap);
 });

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

@@ -0,0 +1,25 @@
+import { Injectable } from '@angular/core';
+import {IGradientstop } from '../models/gradient'
+
+@Injectable({
+  providedIn: 'root',
+})
+export class GradientService {
+  constructor() {
+  }
+
+  getGradientStyle(gradient:IGradientstop[],portrait:boolean = false ):any {
+      let gd = '{ "background": "linear-gradient(to ' + (portrait?'bottom':'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);
+    }  
+}

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

@@ -83,7 +83,8 @@ export class ItemService {
     return this.httpClient.get<IItem[]>(`${this.ApiEndpoint()}/api/v1/items/`, { params: params });
   }
 
-  getChildItemList(parentcode: string, itemType: string, dataFilter?: any, level: number = 1, deep: boolean = true): Observable<IItem[]> {
+  getChildItemList(parentcode: string, itemType: string, dataFilter?: any, level: number = 1, deep: boolean = true,
+                   startDate?: Date, endDate?: Date): Observable<IItem[]> {
     var params = new HttpParams();
     if(itemType != null) {
       params = params.append("it", itemType);
@@ -93,6 +94,8 @@ export class ItemService {
     }
     params = params.append("lvl", level.toString());
     params = params.append("deep", deep.toString());
+    if (startDate) params = params.append("sDate", startDate.toISOString());
+    if (endDate) params = params.append("eDate", endDate.toISOString());
     return this.httpClient.get<IItem[]>(`${this.ApiEndpoint()}/api/v1/items/${parentcode}/children`, { params: params });
   }
 

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

@@ -7,17 +7,23 @@ import {IItem} from '../models/item';
 import {IItemTask} from '../models/itemTask';
 import {HttpClient} from '@angular/common/http';
 import {AppConfig} from '../shared/app.config';
-import {Observable} from 'rxjs';
+import {Observable,iif,of} from 'rxjs';
+import {switchMap} from 'rxjs/operators';
 
 @Injectable({
   providedIn: 'root',
 })
 
 export class PackageService {
+  private userPackages: { [key: string]: IPackage } = {};
   private packages: { [key: string]: IPackage } = {};
+  private packagesObservable = this.store$.select(appCommonReducer.SelectGetPackages);
 
   constructor(private store$: Store<appCommonReducer.State>, public httpClient: HttpClient, public appConfig: AppConfig) {
     store$.select(appCommonReducer.SelectGetValidUserPackages).subscribe((packages) => {
+      this.userPackages = packages;
+    });
+    this.packagesObservable.subscribe((packages) => {
       this.packages = packages;
     });
   }
@@ -27,12 +33,24 @@ export class PackageService {
   }
 
   hasPackage(id: string): boolean {
+    return id in this.userPackages;
+  }
+
+  packageExists(id: string): boolean {
     return id in this.packages;
   }
 
   postItemPackageTask(item: IItem, task: IItemTask): Observable<IItemTask> {
     return this.httpClient.post<IItemTask>(`${this.ApiEndpoint()}/api/v1/items/${item.code}/packagetasks`, task);
   }
+
+  ifPackageListExists<Type>(packageList: Array<string>, ifTrue:Observable<Type>,ifFalse:Observable<Type>):Observable<Type> {
+    return this.packagesObservable.pipe(switchMap(packages => 
+        iif(( )=> Object.keys(packages).some(id => packageList.includes(id)),
+            ifTrue,
+            ifFalse) 
+    )); 
+  }
 }
 
 export function getValidPackages(packageMap: IPackages): {[key: string]: IPackage} {

projects/common/src/test.ts

@@ -14,7 +14,9 @@ declare const require: any;
 // First, initialize the Angular testing environment.
 getTestBed().initTestEnvironment(
   BrowserDynamicTestingModule,
-  platformBrowserDynamicTesting()
+  platformBrowserDynamicTesting(), {
+    teardown: { destroyAfterEach: false }
+}
 );
 // Then we find all the tests.
 const context = require.context('./', true, /\.spec\.ts$/);

projects/common/tsconfig.lib.json

@@ -2,7 +2,7 @@
   "extends": "../../tsconfig.json",
   "compilerOptions": {
     "outDir": "../../out-tsc/lib",
-    "target": "es2015",
+    "target": "es2020",
     "module": "es2015",
     "moduleResolution": "node",
     "declaration": true,

projects/common/tsconfig.lib.prod.json

@@ -2,7 +2,7 @@
   "extends": "../../tsconfig.json",
   "compilerOptions": {
     "outDir": "../../out-tsc/lib",
-    "target": "es2015",
+    "target": "es2020",
     "module": "es2015",
     "moduleResolution": "node",
     "declaration": true,

src/app/test/test.component.html

@@ -2,7 +2,7 @@
     <div class="row">
         <fm-gradient-select [gradientItems]="gradientItems|async" [showLabel]="false" [showAdd]="true"></fm-gradient-select>
     </div>
-    <div class="row mt-3">
+    <div class="row mt-3" *fmPackageExists="'vnd.farmmaps.itemtype.package.dacom'">
         <button class="btn btn-primary" (click)="onTest($event)">Test</button>
     </div>
 </div>

src/polyfills.ts

@@ -18,16 +18,6 @@
  * BROWSER POLYFILLS
  */
 
-/** IE10 and IE11 requires the following for NgClass support on SVG elements */
-// import 'classlist.js';  // Run `npm install --save classlist.js`.
-
-/**
- * Web Animations `@angular/platform-browser/animations`
- * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
- * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
- */
-// import 'web-animations-js';  // Run `npm install --save web-animations-js`.
-
 /**
  * By default, zone.js will patch all possible macroTask and DomEvents
  * user can disable parts of macroTask/DomEvents patch by setting following flags

src/test.ts

@@ -12,7 +12,9 @@ declare const require: any;
 // First, initialize the Angular testing environment.
 getTestBed().initTestEnvironment(
   BrowserDynamicTestingModule,
-  platformBrowserDynamicTesting()
+  platformBrowserDynamicTesting(), {
+    teardown: { destroyAfterEach: false }
+}
 );
 // Then we find all the tests.
 const context = require.context('./', true, /\.spec\.ts$/);

tsconfig.json

@@ -13,7 +13,7 @@
     "allowSyntheticDefaultImports": true,
     "importHelpers": true,
     "skipLibCheck": true,
-    "target": "es2015",
+    "target": "es2020",
     "typeRoots": [
       "node_modules/@types"
     ],