aboutsummaryrefslogtreecommitdiffstats
path: root/src/angular/tag-cloud
diff options
context:
space:
mode:
authorMichael Lando <ml636r@att.com>2018-05-21 20:19:48 +0000
committerGerrit Code Review <gerrit@onap.org>2018-05-21 20:19:48 +0000
commit05b37297177e8a342668c15e5d6f738b51f7aedd (patch)
treee236c96df52a13f935292db8aa73e84d0c41ad8a /src/angular/tag-cloud
parent884dfb789593d2a3cc319047ab1f0215778aec9f (diff)
parent1994c98063c27a41797dec01f2ca9fcbe33ceab0 (diff)
Merge "init commit onap ui"HEAD2.0.0-ONAPmasterbeijing2.0.0-ONAP
Diffstat (limited to 'src/angular/tag-cloud')
-rw-r--r--src/angular/tag-cloud/tag-cloud.component.html.ts30
-rw-r--r--src/angular/tag-cloud/tag-cloud.component.ts46
-rw-r--r--src/angular/tag-cloud/tag-cloud.module.ts21
-rw-r--r--src/angular/tag-cloud/tag-item/tag-item.component.html.ts16
-rw-r--r--src/angular/tag-cloud/tag-item/tag-item.component.ts15
5 files changed, 128 insertions, 0 deletions
diff --git a/src/angular/tag-cloud/tag-cloud.component.html.ts b/src/angular/tag-cloud/tag-cloud.component.html.ts
new file mode 100644
index 0000000..2ff4e8a
--- /dev/null
+++ b/src/angular/tag-cloud/tag-cloud.component.html.ts
@@ -0,0 +1,30 @@
+export default `
+<div class="sdc-tag-cloud-new-item-field" [ngClass]="{'not-empty': newTagItem}">
+ <sdc-input [label]="label"
+ [disabled]="(isViewOnly===true)"
+ [placeHolder]="placeholder"
+ [(value)]="newTagItem"
+ (keyup)="onKeyup($event)"
+ [ngClass]="{'error': uniqueError}"></sdc-input>
+ <div class="add-button" (click)="newTagItem && insertItemToList()" [ngClass]="{'disabled': !newTagItem || uniqueError}">
+ <span class="plus-icon">
+ <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24">
+ <defs>
+ <path id="add-a" d="M15,7 L9,7 L9,1 C9,0.4 8.6,0 8,0 C7.4,0 7,0.4 7,1 L7,7 L1,7 C0.4,7 0,7.4 0,8 C0,8.6 0.4,9 1,9 L7,9 L7,15 C7,15.6 7.4,16 8,16 C8.6,16 9,15.6 9,15 L9,9 L15,9 C15.6,9 16,8.6 16,8 C16,7.4 15.6,7 15,7"/>
+ </defs>
+ <g fill="none" fill-rule="evenodd" transform="translate(4 4)">
+ <use xlink:href="#add-a"/>
+ </g>
+ </svg>
+ </span>
+ </div>
+</div>
+<div class="sdc-list-container">
+ <sdc-tag-item *ngFor="let item of list; let i = index;"
+ [text]="item"
+ [index]="i"
+ [isViewOnly]="isViewOnly && (isViewOnly === true || isViewOnly.indexOf(i) > -1)"
+ (clickOnDelete)="deleteItemFromList($event)"></sdc-tag-item>
+</div>
+<div class="error-message" *ngIf="uniqueError">{{uniqueErrorMessage}}</div>
+`;
diff --git a/src/angular/tag-cloud/tag-cloud.component.ts b/src/angular/tag-cloud/tag-cloud.component.ts
new file mode 100644
index 0000000..1635b8d
--- /dev/null
+++ b/src/angular/tag-cloud/tag-cloud.component.ts
@@ -0,0 +1,46 @@
+import { Component, EventEmitter, Input, Output } from "@angular/core";
+import template from "./tag-cloud.component.html";
+
+@Component({
+ selector: 'sdc-tag-cloud',
+ template: template,
+})
+export class TagCloudComponent {
+ @Input() public list: string[];
+ @Input() public isViewOnly: boolean|number[]; // get a boolean parameter or array of specific items indexes.
+ @Input() public isUniqueList: boolean;
+ @Input() public uniqueErrorMessage: string = "Unique error";
+ @Input() public label: string;
+ @Input() public placeholder: string;
+ @Output() public listChanged: EventEmitter<string[]> = new EventEmitter<string[]>();
+ private newTagItem: string;
+ private uniqueError: boolean;
+
+ private onKeyup = (e): void => {
+ if (e.keyCode === 13) {
+ this.insertItemToList();
+ }
+ }
+
+ private insertItemToList = (): void => {
+ this.validateTag();
+ if (!this.uniqueError && this.newTagItem.length) {
+ this.list.push(this.newTagItem);
+ this.newTagItem = "";
+ this.listChanged.emit(this.list);
+ }
+ }
+
+ private deleteItemFromList = (index: number): void => {
+ this.list.splice(index, 1);
+ if (Array.isArray(this.isViewOnly)) {
+ this.isViewOnly = this.isViewOnly.map((i: number) => {
+ return i > index ? i - 1 : i;
+ });
+ }
+ }
+
+ private validateTag = (): void => {
+ this.uniqueError = this.list && this.list.indexOf(this.newTagItem) > -1;
+ }
+}
diff --git a/src/angular/tag-cloud/tag-cloud.module.ts b/src/angular/tag-cloud/tag-cloud.module.ts
new file mode 100644
index 0000000..fd7efb4
--- /dev/null
+++ b/src/angular/tag-cloud/tag-cloud.module.ts
@@ -0,0 +1,21 @@
+import { NgModule } from "@angular/core";
+import { TagItemComponent } from "./tag-item/tag-item.component";
+import { TagCloudComponent } from "./tag-cloud.component";
+import { CommonModule } from "@angular/common";
+import { FormElementsModule } from './../form-elements/form-elements.module';
+
+@NgModule({
+ declarations: [
+ TagItemComponent,
+ TagCloudComponent
+ ],
+ imports: [
+ CommonModule,
+ FormElementsModule
+ ],
+ exports: [
+ TagCloudComponent
+ ]
+})
+export class TagCloudModule {
+}
diff --git a/src/angular/tag-cloud/tag-item/tag-item.component.html.ts b/src/angular/tag-cloud/tag-item/tag-item.component.html.ts
new file mode 100644
index 0000000..04112c1
--- /dev/null
+++ b/src/angular/tag-cloud/tag-item/tag-item.component.html.ts
@@ -0,0 +1,16 @@
+export default `
+<div class="tag-item" [ngClass]="{'view-only':isViewOnly}">
+ <span>{{text}}</span>
+ <span class="delete-item" *ngIf="!isViewOnly" (click)="clickOnDelete.emit(index)">
+ <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24">
+ <defs>
+ <path id="close-a" d="M13.5996,12 L19.6576,5.942 C20.1146,5.485 20.1146,4.8 19.6576,4.343 C19.2006,3.886 18.5146,3.886 18.0576,4.343 L11.9996,10.4 L5.9426,4.343 C5.4856,3.886 4.7996,3.886 4.3426,4.343 C3.8856,4.8 3.8856,5.485 4.3426,5.942 L10.4006,12 L4.3426,18.058 C3.8856,18.515 3.8856,19.2 4.3426,19.657 C4.5716,19.886 4.7996,20 5.1426,20 C5.4856,20 5.7136,19.886 5.9426,19.657 L11.9996,13.6 L18.0576,19.657 C18.2866,19.886 18.6286,20 18.8576,20 C19.0856,20 19.4286,19.886 19.6576,19.657 C20.1146,19.2 20.1146,18.515 19.6576,18.058 L13.5996,12 Z"/>
+ </defs>
+ <g fill="none" fill-rule="evenodd">
+ <use xlink:href="#close-a"/>
+ </g>
+ </svg>
+ </span>
+</div>
+`;
+
diff --git a/src/angular/tag-cloud/tag-item/tag-item.component.ts b/src/angular/tag-cloud/tag-item/tag-item.component.ts
new file mode 100644
index 0000000..f2e2fa7
--- /dev/null
+++ b/src/angular/tag-cloud/tag-item/tag-item.component.ts
@@ -0,0 +1,15 @@
+import { Component, EventEmitter, Input, Output, HostBinding } from "@angular/core";
+import template from "./tag-item.component.html";
+
+@Component({
+ selector: 'sdc-tag-item',
+ template: template
+})
+
+export class TagItemComponent {
+ @HostBinding('class') classes = 'sdc-tag-item';
+ @Input() public text: string;
+ @Input() public isViewOnly: boolean;
+ @Input() public index: number;
+ @Output() public clickOnDelete: EventEmitter<number> = new EventEmitter<number>();
+}