AW-1079

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

@@ -9,10 +9,18 @@
     <div class="card-body">
       <div class="mb-2"><a href="#" (click)="handleBackToList($event)" i18n>Back</a></div>
       <h1 class="card-title">{{item.name}}</h1>
-      <a *ngIf="itemTypeService.hasViewer(item)" href="#" (click)="handleOnView(item)" class="btn btn-outline-secondary" i18n><i class="fa fa-eye" aria-hidden="true" title="View"></i> View</a>
-      <!-- <a [href]="config.getConfig('apiEndPoint')+ '/api/v1/items/'+ item.code+ '/download'" class="btn btn-outline-secondary" i18n><i class="fa fa-download" aria-hidden="true" title="Download"></i> Download</a> -->
-      <a *ngIf="item.isEditable" href="#" class="btn btn-outline-secondary" (click)="handleOnEdit(item)" i18n><i class="fa fa-pencil" aria-hidden="true" title="Edit"></i> Edit</a>
-      <a *ngIf="itemTypeService.isLayer(item)" href="#" (click)="handleAddAsLayer(item)" class="btn btn-outline-secondary" i18n><i class="fa fa-eye" aria-hidden="true" title="Add as layer"></i> Add as overlay</a>
+      <div class="card menu-card">
+        <ul class="p-0 mt-2">
+          <li *ngIf="itemTypeService.hasViewer(item)"><a href="#" (click)="handleOnView(item)" class="btn btn-outline-secondary" i18n><i class="fa fa-eye" aria-hidden="true" title="View"></i> View</a></li>
+          <li *ngIf="item.isEditable"><a href="#" (click)="handleOnEdit(item)" i18n><i class="fa fa-pencil" aria-hidden="true" title="Edit"></i> Edit</a></li>
+          <ng-container *ngIf="itemTypeService.isLayer(item)">
+            <li *ngIf="!getItemLayer(item)"><a href="#" (click)="handleAddAsLayer(item)" i18n><i class="fa fa-eye" aria-hidden="true" title="Add as layer"></i> Add as overlay</a></li>
+            <li  *ngIf="getItemLayer(item)"><a href="#" (click)="handleRemoveLayer(item)" i18n><i class="fa fa-eye" aria-hidden="true" title="Remove overlay"></i> Remove overlay</a></li>
+          </ng-container>
+        </ul>
+              <!-- <a [href]="config.getConfig('apiEndPoint')+ '/api/v1/items/'+ item.code+ '/download'" class="btn btn-outline-secondary" i18n><i class="fa fa-download" aria-hidden="true" title="Download"></i> Download</a> -->
+
+      </div>            
     </div>
   </div>
 </div>

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

@@ -11,3 +11,19 @@
 .card-title {
   font-size: 1rem;
 }
+
+ul {
+  list-style:none;
+}
+
+li {
+  margin-top:1rem;
+}
+
+.menu-card {
+  margin-left: -7px;
+  padding-left: 7px;
+  margin-right: -7px;
+  padding-right: 7px;
+  margin-bottom: 7px;
+}

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

@@ -11,7 +11,8 @@ import { IItemLayer } from '../../models/item.layer';
 @Injectable()
 export abstract class AbstractSelectedItemComponent {
   @Input() item: IItem
-  @Input() itemLayer: IItemLayer
+  @Input() itemLayer: IItemLayer;
+  @Input() overlayLayers: Array<IItemLayer>;
   constructor(public store: Store<mapReducers.State | commonReducers.State>, public itemTypeService: ItemTypeService, private location: Location, public router: Router) {
   }
 
@@ -39,6 +40,21 @@ export abstract class AbstractSelectedItemComponent {
     return false;
   }
 
+  handleRemoveLayer(item: IItem,layerIndex:number = -1) {
+    let itemLayer = this.getItemLayer(item,layerIndex);
+    if(itemLayer) {
+      this.store.dispatch(new mapActions.RemoveLayer(itemLayer));
+    }
+    return false;
+  }
+
+  getItemLayer(item:IItem,layerIndex:number = -1):IItemLayer {
+    let li = layerIndex==-1?0:layerIndex;
+    let selected = this.overlayLayers.filter(ol => ol.item.code == item.code && ol.layerIndex == li);
+    if(selected.length==0) return null;
+    return selected[0];
+  }
+
   handleBackToList(event: MouseEvent) {
     event.preventDefault();
     this.location.back();