Added parentitem title to geotiff, shape and temporal selected-item components.

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

@@ -105,7 +105,7 @@ export class SelectItem implements Action {
 export class SelectItemSuccess implements Action {
   readonly type = SELECTITEMSUCCESS;
 
-  constructor(public item: IItem) { }
+  constructor(public item: IItem, public parentItem: IItem) { }
 }
 
 export class SelectTemporalItemsSuccess implements Action {

projects/common-map/src/fm-map/components/map/map.component.html

@@ -12,6 +12,7 @@
   panelCollapsed:panelCollapsed$|async,
   searchMinified:searchMinified$|async,
   selectedItem:selectedItem$|async,
+  parentItem:parentItem$|async,
   queryState:queryState$|async,
   searchCollapsed:searchCollapsed$|async,
   clearEnabled:clearEnabled$|async,
@@ -57,7 +58,7 @@
         </div>
 
         <div *ngIf="state.selectedItem;let item">
-          <fm-map-selected-item-container [item]="item" [itemLayer]="state.selectedItemLayer" [overlayLayers]="state.overlayLayers"></fm-map-selected-item-container>
+          <fm-map-selected-item-container [item]="item" [parentItem]="state.parentItem" [itemLayer]="state.selectedItemLayer" [overlayLayers]="state.overlayLayers"></fm-map-selected-item-container>
         </div>
         <div *ngIf="state.features.length == 0" class="no-results  m-2">
           <div *ngIf="state.queryState.query">Cannot find <span>{{state.queryState?.query}}</span></div>

projects/common-map/src/fm-map/components/map/map.component.ts

@@ -64,6 +64,7 @@ export class MapComponent implements OnInit, OnDestroy,AfterViewInit {
   public selectedFeature$: Observable<Feature> = this.store.select(mapReducers.selectGetSelectedFeature);
   public clickedFeature: Subject<Feature> = new Subject<Feature>();
   public selectedItem$: Observable<IItem> = this.store.select(mapReducers.selectGetSelectedItem);
+  public parentItem$: Observable<IItem> =this.store.select(mapReducers.selectGetParentItem);
   public queryState$: Observable<IQueryState> = this.store.select(mapReducers.selectGetQueryState);
   public state$:Observable<{mapState:IMapState,queryState:IQueryState,setStateCount:number}> = this.store.select(mapReducers.selectGetState);
   public period$: Observable<IPeriodState> = this.store.select(mapReducers.selectGetPeriod);

projects/common-map/src/fm-map/components/selected-item-container/selected-item-container.component.ts

@@ -16,6 +16,7 @@ export class SelectedItemContainerComponent {
   }
 
   @Input() item: IItem;
+  @Input() parentItem: IItem;
   @Input() itemLayer:IItemLayer;
   @Input() overlayLayers:Array<IItemLayer>;
 
@@ -57,6 +58,7 @@ export class SelectedItemContainerComponent {
 
     const componentRef = viewContainerRef.createComponent(componentFactory);
     (<AbstractSelectedItemComponent>componentRef.instance).item = this.item;
+    (<AbstractSelectedItemComponent>componentRef.instance).parentItem = this.parentItem;
     (<AbstractSelectedItemComponent>componentRef.instance).itemLayer = this.itemLayer;
     (<AbstractSelectedItemComponent>componentRef.instance).overlayLayers = this.overlayLayers;
   }

projects/common-map/src/fm-map/components/selected-item-geotiff/selected-item-geotiff.component.html

@@ -4,7 +4,8 @@
     <div class="card-body">
       <div class="mb-2"><a href="#" (click)="handleBackToList($event)" i18n>Back</a></div>
       <div class="card menu-card">
-        <h1>{{item.name}}</h1>
+        <h2 *ngIf="parentItem">{{parentItem.name}}</h2>
+        <h2>{{item.name}}</h2>
       </div>
       <div class="legend-container" *ngIf="item?.data.layers;let layers">
         <div class="card menu-card">
@@ -13,7 +14,8 @@
               <option *ngFor="let l of layers;" [value]="l.index"  [selected]="itemLayer.layerIndex == l.index">{{l.name}}</option>
             </select>
           </div>
-          <fm-map-layer-legend [layer]="layer(layers,itemLayer.layerIndex)" [histogramenabled]="true"></fm-map-layer-legend>
+          <fm-map-layer-legend [showTitle]="layers.length == 1"
+            [layer]="layer(layers,itemLayer.layerIndex)" [histogramenabled]="true"></fm-map-layer-legend>
         </div>
       </div>
       <div class="card menu-card">

projects/common-map/src/fm-map/components/selected-item-shape/selected-item-shape.component.html

@@ -4,6 +4,7 @@
     <div class="card-body">
       <div class="mb-2"><a href="#" (click)="handleBackToList($event)" i18n>Back</a></div>
       <div class="card menu-card">
+        <h2 *ngIf="parentItem">{{parentItem.name}}</h2>
         <h1>{{item.name}}</h1>
       </div>
       <div class="legend-container" *ngIf="item?.data.layers;let layers">

projects/common-map/src/fm-map/components/selected-item-temporal/selected-item-temporal.component.html

@@ -4,6 +4,7 @@
     <div class="card-body">
       <div class="mb-2"><a href="#" (click)="handleBackToList($event)" i18n>Back</a></div>
       <div class="card menu-card">
+        <h2 *ngIf="parentItem">{{parentItem.name}}</h2>
         <h1>{{item.name}}</h1>
       </div>
       <div class="legend-container" *ngIf="item?.data.layers;let layers">

projects/common-map/src/fm-map/components/selected-item/selected-item.component.ts

@@ -11,7 +11,8 @@ import { IItemLayer } from '../../models/item.layer';
 @Injectable()
 @Directive()
 export abstract class AbstractSelectedItemComponent {
-  @Input() item: IItem
+  @Input() item: IItem;
+  @Input() parentItem: IItem;
   @Input() itemLayer: IItemLayer;
   @Input() overlayLayers: Array<IItemLayer>;
   constructor(public store: Store<mapReducers.State | commonReducers.State>, public itemTypeService: ItemTypeService, private location: Location, public router: Router) {

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

@@ -173,7 +173,14 @@ export class MapEffects {
         let itemCode = selectedItem ? selectedItem.code : "";
         if (a.itemCode != itemCode || setStateCount == 1) {
           return this.itemService$.getItem(a.itemCode).pipe(
-            map((item: IItem) => new mapActions.SelectItemSuccess(item)),
+            switchMap(child => {
+              return this.itemService$.getItem(child.parentCode)
+                .pipe(map(parent => {
+                    return {child, parent};
+                  })
+                );
+            }),
+            map(data => new mapActions.SelectItemSuccess(data.child, data.parent)),
             catchError(error => of(new commonActions.Fail(error))))
         } else {
           return [];
@@ -247,7 +254,14 @@ export class MapEffects {
       let itemChangedAction = action as commonActions.ItemChangedEvent;
       if (selectedItem && selectedItem.code == itemChangedAction.itemCode) {
         return this.itemService$.getItem(itemChangedAction.itemCode).pipe(
-          map((item: IItem) => new mapActions.SelectItemSuccess(item)),
+          switchMap(child => {
+            return this.itemService$.getItem(child.parentCode)
+              .pipe(map(parent => {
+                  return {child, parent};
+                })
+              );
+          }),
+          map(data => new mapActions.SelectItemSuccess(data.child, data.parent)),
           catchError(error => of(new commonActions.Fail(error))));
       } else {
         return [];

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

@@ -44,6 +44,7 @@ export interface State {
   panelCollapsed: boolean,
   selectedFeature: Feature,
   selectedItem:IItem,
+  parentItem:IItem,
   clearEnabled: boolean,
   searchCollapsed: boolean,
   searchMinified: boolean,
@@ -165,6 +166,7 @@ export function reducer(state = initialState, action: mapActions.Actions | commo
       return tassign(state, {
         inSearch:false,
         selectedItem: a.item,
+        parentItem: a.parentItem,
         selectedItemLayer: itemLayer,
         panelVisible: a.item != null,
         clearEnabled: a.item != null,
@@ -481,6 +483,7 @@ export const getPanelVisible = (state: State) => state.panelVisible;
 export const getPanelCollapsed = (state: State) => state.panelCollapsed;
 export const getSelectedFeature = (state: State) => state.selectedFeature;
 export const getSelectedItem = (state: State) => state.selectedItem;
+export const getParentItem = (state: State) => state.parentItem;
 export const getQueryState = (state: State) => state.queryState;
 export const getClearEnabled = (state: State) => state.clearEnabled;
 export const getSearchCollapsed = (state: State) => state.searchCollapsed;
@@ -508,6 +511,7 @@ export const selectGetPanelVisible = createSelector(selectMapState, getPanelVisi
 export const selectGetPanelCollapsed = createSelector(selectMapState, getPanelCollapsed);
 export const selectGetSelectedFeature = createSelector(selectMapState, getSelectedFeature);
 export const selectGetSelectedItem = createSelector(selectMapState, getSelectedItem);
+export const selectGetParentItem = createSelector(selectMapState, getParentItem);
 export const selectGetQueryState = createSelector(selectMapState, getQueryState);
 export const selectGetClearEnabled = createSelector(selectMapState, getClearEnabled);
 export const selectGetSearchCollapsed = createSelector(selectMapState, getSearchCollapsed);