Bugfix/frontend/202 unable to remove groups in the datasources view (…

frontend/src/app/assets-discover/shared/components/asset-group-add/asset-group-add.component.html

@@ -1,12 +1,12 @@
-<button #tagPopober=ngbPopover *ngIf="typeFormat==='button';else icon"
+<button #tagPopoverButton=ngbPopover *ngIf="typeFormat==='button';else icon"
         [ngbPopover]="colContent"
         [popoverTitle]="colTitle"
         autoClose="outside"
         class="p-1 text-blue-800 font-weight-light"
         container="body"
         id="statusId"
         placement="auto"
-        popoverClass="utm-popover"
+        popoverClass="utm-popover popover-group"
         triggers="click">
   <span>
     <i *ngIf="creating" class="icon-spinner2 spinner"></i>
@@ -18,7 +18,7 @@
        container="body"
        placement="auto"
        tooltipClass="utm-tooltip-top">
-    <span #tagPopober=ngbPopover
+    <span #tagPopoverSpan=ngbPopover
           (click)="getGroups($event)"
           [ngClass]="{'text-blue-800':group}"
           [ngbPopover]="colContent"
@@ -27,7 +27,7 @@
           class="position-relative cursor-pointer small-md-icon"
           container="body"
           placement="auto"
-          popoverClass="utm-popover"
+          popoverClass="utm-popover popover-group"
           triggers="click">
       <i [ngClass]="creating?'icon-spinner2 spinner':getIcon(group)"></i>
       <span *ngIf="showTypeLabel" class="ml-2">
@@ -38,15 +38,19 @@
 </ng-template>
 
 <ng-template #colContent>
-  <ng-select
+  <ng-select #select
     [(ngModel)]="group"
-    [clearable]="true"
+    [clearable]="false"
     [items]="groups"
     [loadingText]="'Loading groups....'"
     [loading]="loading"
     bindLabel="groupName"
     class="mt-2 mb-2"
     id="id" style="min-width: 200px">
+    <ng-template ng-label-tmp let-item="item" let-clear="clear">
+        {{item.groupName}}
+        <span style="position:relative; z-index: 1; cursor: pointer; float: right" (click)="handleClear(select)">&times;</span>
+    </ng-template>
   </ng-select>
 
   <div class="d-flex justify-content-center align-items-center p-1">

frontend/src/app/assets-discover/shared/components/asset-group-add/asset-group-add.component.ts

@@ -1,5 +1,6 @@
-import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
-import {NgbModal} from '@ng-bootstrap/ng-bootstrap';
+import {Component, EventEmitter, Input, OnInit, Output, ViewChild} from '@angular/core';
+import {NgbModal, NgbPopover} from '@ng-bootstrap/ng-bootstrap';
+import {NgSelectComponent} from '@ng-select/ng-select';
 import {UtmToastService} from '../../../../shared/alert/utm-toast.service';
 import {AssetGroupCreateComponent} from '../../../asset-groups/asset-group-create/asset-group-create.component';
 import {AssetGroupType} from '../../../asset-groups/shared/type/asset-group.type';
@@ -19,6 +20,8 @@ export class AssetGroupAddComponent implements OnInit {
   @Input() assets: number[];
   @Input() group: AssetGroupType;
   @Output() applyGroupEvent = new EventEmitter<AssetGroupType>();
+  @ViewChild('tagPopoverSpan') tagPopoverSpan: NgbPopover;
+  @ViewChild('tagPopoverButton') tagPopoverButton: NgbPopover;
   groups: AssetGroupType[];
   loading = false;
   creating = false;
@@ -58,10 +61,12 @@ export class AssetGroupAddComponent implements OnInit {
         this.applyGroupEvent.emit(response.body);
         this.assetReloadFilterBehavior.$assetReloadFilter.next(AssetFieldFilterEnum.GROUP);
         this.creating = false;
+        this.closePopover();
       }, error => {
         this.utmToastService.showError('Error changing group',
           'Error changing group, please try again');
         this.creating = false;
+        this.closePopover();
       });
   }
 
@@ -70,8 +75,22 @@ export class AssetGroupAddComponent implements OnInit {
   }
 
   addNewGroup() {
+    this.closePopover();
     const modalGroup = this.modalService.open(AssetGroupCreateComponent, {centered: true});
   }
 
-  protected readonly event = event;
+  handleClear(select: NgSelectComponent) {
+    this.group = null;
+    select.close();
+  }
+
+  closePopover() {
+    if (this.tagPopoverSpan) {
+      this.tagPopoverSpan.close();
+    }
+
+    if (this.tagPopoverButton) {
+      this.tagPopoverButton.close();
+    }
+  }
 }

frontend/src/styles.scss

@@ -1286,5 +1286,11 @@ $topnav-background-color: #FFFFFF;
   }
 }
 
+.popover-group{
+  .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-value{
+    width: 100%;
+  }
+}
+