mgr/dashboard: Add cd-select-badges component

Signed-off-by: Ricardo Marques <rimarques@suse.com>

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/components.module.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/components.module.ts
index e4fb9b2b29c3c7d5dcda8a6950bf189bbb432024..ae30c292ecafec9cb4e625a1b9568ea28b0a9c4f 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/components.module.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/components.module.ts
@@ -13,6 +13,7 @@ import { HelperComponent } from './helper/helper.component';
 import { InfoPanelComponent } from './info-panel/info-panel.component';
 import { LoadingPanelComponent } from './loading-panel/loading-panel.component';
 import { ModalComponent } from './modal/modal.component';
+import { SelectBadgesComponent } from './select-badges/select-badges.component';
 import { SparklineComponent } from './sparkline/sparkline.component';
 import { SubmitButtonComponent } from './submit-button/submit-button.component';
 import { UsageBarComponent } from './usage-bar/usage-bar.component';
@@ -36,6 +37,7 @@ import { WarningPanelComponent } from './warning-panel/warning-panel.component';
     ViewCacheComponent,
     SparklineComponent,
     HelperComponent,
+    SelectBadgesComponent,
     SubmitButtonComponent,
     UsageBarComponent,
     ErrorPanelComponent,
@@ -51,6 +53,7 @@ import { WarningPanelComponent } from './warning-panel/warning-panel.component';
     ViewCacheComponent,
     SparklineComponent,
     HelperComponent,
+    SelectBadgesComponent,
     SubmitButtonComponent,
     ErrorPanelComponent,
     LoadingPanelComponent,

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/select-badges/select-badges-option.model.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/select-badges/select-badges-option.model.ts
new file mode 100644 (file)
index 0000000..0c28f1c
--- /dev/null
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/select-badges/select-badges-option.model.ts
@@ -0,0 +1,5 @@
+interface SelectBadgesOption {
+  selected: boolean;
+  name: string;
+  description: string;
+}

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/select-badges/select-badges.component.html b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/select-badges/select-badges.component.html
new file mode 100644 (file)
index 0000000..2fa9d1b
--- /dev/null
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/select-badges/select-badges.component.html
@@ -0,0 +1,40 @@
+<ng-template #popTemplate>
+  <div *ngFor="let option of options"
+       class="select-menu-item"
+       (click)="selectOption(option)">
+    <div class="select-menu-item-icon">
+      <i class="fa fa-check" aria-hidden="true"
+         *ngIf="option.selected"></i>
+      &nbsp;
+    </div>
+    <div class="select-menu-item-content">
+      {{ option.name }}
+      <br>
+      <small class="text-muted">
+        {{ option.description }}&nbsp;
+      </small>
+    </div>
+  </div>
+</ng-template>
+
+<a  class="margin-right-sm select-menu-edit"
+    [popover]="popTemplate"
+    placement="bottom"
+    container="body"
+    outsideClick="true">
+  <i class="fa fa-fw fa-pencil"></i>
+</a>
+<span class="text-muted"
+      *ngIf="data.length === 0"
+      i18n>
+  {{ emptyMessage }}
+</span>
+<span *ngFor="let dataItem of data">
+  <span class="badge badge-pill badge-primary margin-right-sm">
+    <span class="margin-right-sm">{{ dataItem }}</span>
+    <a class="badge-remove"
+       (click)="removeItem(dataItem)">
+      <i class="fa fa-times" aria-hidden="true"></i>
+    </a>
+  </span>
+</span>

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/select-badges/select-badges.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/select-badges/select-badges.component.scss
new file mode 100644 (file)
index 0000000..bd43177
--- /dev/null
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/select-badges/select-badges.component.scss
@@ -0,0 +1,25 @@
+@import '../../../../defaults';
+
+.select-menu-edit {
+  margin-left: -20px
+}
+.select-menu-item {
+  display: block;
+  cursor: pointer;
+  border-bottom: 1px solid $color-transparent;
+  font-size: 12px;
+  &:hover {
+    background-color: $color-off-white;
+  }
+}
+.select-menu-item-icon {
+  float: left;
+  padding: 8px 8px 8px 8px;
+  width: 30px;
+}
+.select-menu-item-content {
+  padding: 8px 8px 8px 8px;
+}
+.badge-remove {
+  color: $color-solid-white;
+}

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/select-badges/select-badges.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/select-badges/select-badges.component.spec.ts
new file mode 100644 (file)
index 0000000..52c3de2
--- /dev/null
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/select-badges/select-badges.component.spec.ts
@@ -0,0 +1,58 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PopoverModule } from 'ngx-bootstrap';
+
+import { configureTestBed } from '../../../../testing/unit-test-helper';
+import { SelectBadgesComponent } from './select-badges.component';
+
+describe('SelectBadgesComponent', () => {
+  let component: SelectBadgesComponent;
+  let fixture: ComponentFixture<SelectBadgesComponent>;
+
+  configureTestBed({
+    declarations: [SelectBadgesComponent],
+    imports: [PopoverModule.forRoot()]
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SelectBadgesComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should add item', () => {
+    component.options = [
+      {name: 'option1', description: '', selected: false},
+      {name: 'option2', description: '', selected: false}
+    ];
+    component.data = [];
+    component.selectOption(component.options[1]);
+    expect(component.data).toEqual(['option2']);
+  });
+
+  it('should update selected', () => {
+    component.options = [
+      {name: 'option1', description: '', selected: false},
+      {name: 'option2', description: '', selected: false}
+    ];
+    component.data = ['option2'];
+    component.ngOnChanges();
+    expect(component.options[0].selected).toBe(false);
+    expect(component.options[1].selected).toBe(true);
+  });
+
+  it('should remove item', () => {
+    component.options = [
+      {name: 'option1', description: '', selected: true},
+      {name: 'option2', description: '', selected: true}
+    ];
+    component.data = ['option1', 'option2'];
+    component.removeItem('option1');
+    expect(component.data).toEqual(['option2']);
+  });
+
+});

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/select-badges/select-badges.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/select-badges/select-badges.component.ts
new file mode 100644 (file)
index 0000000..5ca1275
--- /dev/null
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/select-badges/select-badges.component.ts
@@ -0,0 +1,48 @@
+import { Component, OnChanges } from '@angular/core';
+import { Input } from '@angular/core';
+
+@Component({
+  selector: 'cd-select-badges',
+  templateUrl: './select-badges.component.html',
+  styleUrls: ['./select-badges.component.scss']
+})
+export class SelectBadgesComponent implements OnChanges {
+  @Input() data: Array<string> = [];
+  @Input() options: Array<SelectBadgesOption> = [];
+  @Input() emptyMessage = 'There are no items.';
+
+  constructor() {}
+
+  ngOnChanges() {
+    if (!this.options || !this.data || this.data.length === 0) {
+      return;
+    }
+    this.options.forEach((option) => {
+      if (this.data.indexOf(option.name) !== -1) {
+        option.selected = true;
+      }
+    });
+  }
+
+  private updateOptions() {
+    this.data.splice(0, this.data.length);
+    this.options.forEach((option: SelectBadgesOption) => {
+      if (option.selected) {
+        this.data.push(option.name);
+      }
+    });
+  }
+
+  selectOption(option: SelectBadgesOption) {
+    option.selected = !option.selected;
+    this.updateOptions();
+  }
+
+  removeItem(item: string) {
+    const optionToRemove = this.options.find((option: SelectBadgesOption) => {
+      return option.name === item;
+    });
+    optionToRemove.selected = false;
+    this.updateOptions();
+  }
+}