aboutsummaryrefslogtreecommitdiffstats
path: root/catalog-ui/src/app/ng2/components
diff options
context:
space:
mode:
Diffstat (limited to 'catalog-ui/src/app/ng2/components')
-rw-r--r--catalog-ui/src/app/ng2/components/dynamic-element/dynamic-element.component.ts27
-rw-r--r--catalog-ui/src/app/ng2/components/dynamic-element/dynamic-element.module.ts20
-rw-r--r--catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/checkbox/ui-element-checkbox.component.ts20
-rw-r--r--catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/dropdown/ui-element-dropdown.component.ts20
-rw-r--r--catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/input/ui-element-input.component.ts20
-rw-r--r--catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/integer-input/ui-element-integer-input.component.ts20
-rw-r--r--catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/popover-input/ui-element-popover-input.component.ts20
-rw-r--r--catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/ui-element-base.component.ts20
-rw-r--r--catalog-ui/src/app/ng2/components/filter-properties-assignment/filter-properties-assignment.component.less5
-rw-r--r--catalog-ui/src/app/ng2/components/filter-properties-assignment/filter-properties-assignment.component.ts20
-rw-r--r--catalog-ui/src/app/ng2/components/hierarchy-navigtion/hierarchy-display-options.ts20
-rw-r--r--catalog-ui/src/app/ng2/components/hierarchy-navigtion/hierarchy-navigation.component.less7
-rw-r--r--catalog-ui/src/app/ng2/components/hierarchy-navigtion/hierarchy-navigation.component.ts20
-rw-r--r--catalog-ui/src/app/ng2/components/inputs-table/confirmation-delete-input/confirmation-delete-input.component.html3
-rw-r--r--catalog-ui/src/app/ng2/components/inputs-table/confirmation-delete-input/confirmation-delete-input.component.ts38
-rw-r--r--catalog-ui/src/app/ng2/components/inputs-table/inputs-table.component.html15
-rw-r--r--catalog-ui/src/app/ng2/components/inputs-table/inputs-table.component.less44
-rw-r--r--catalog-ui/src/app/ng2/components/inputs-table/inputs-table.component.ts31
-rw-r--r--catalog-ui/src/app/ng2/components/loader/loader.component.ts114
-rw-r--r--catalog-ui/src/app/ng2/components/modal/modal.component.html16
-rw-r--r--catalog-ui/src/app/ng2/components/modal/modal.component.ts34
-rw-r--r--catalog-ui/src/app/ng2/components/modal/modal.module.ts19
-rw-r--r--catalog-ui/src/app/ng2/components/popover/popover-content.component.less10
-rw-r--r--catalog-ui/src/app/ng2/components/popover/popover-content.component.ts20
-rw-r--r--catalog-ui/src/app/ng2/components/popover/popover.component.ts20
-rw-r--r--catalog-ui/src/app/ng2/components/popover/popover.module.ts20
-rw-r--r--catalog-ui/src/app/ng2/components/properties-table/dynamic-property/dynamic-property.component.html22
-rw-r--r--catalog-ui/src/app/ng2/components/properties-table/dynamic-property/dynamic-property.component.less62
-rw-r--r--catalog-ui/src/app/ng2/components/properties-table/dynamic-property/dynamic-property.component.ts98
-rw-r--r--catalog-ui/src/app/ng2/components/properties-table/properties-table.component.html29
-rw-r--r--catalog-ui/src/app/ng2/components/properties-table/properties-table.component.less103
-rw-r--r--catalog-ui/src/app/ng2/components/properties-table/properties-table.component.ts39
-rw-r--r--catalog-ui/src/app/ng2/components/tooltip/tooltip-content.component.ts20
-rw-r--r--catalog-ui/src/app/ng2/components/tooltip/tooltip.component.ts28
-rw-r--r--catalog-ui/src/app/ng2/components/tooltip/tooltip.module.ts20
35 files changed, 738 insertions, 306 deletions
diff --git a/catalog-ui/src/app/ng2/components/dynamic-element/dynamic-element.component.ts b/catalog-ui/src/app/ng2/components/dynamic-element/dynamic-element.component.ts
index 84ac46c4cf..246258e44f 100644
--- a/catalog-ui/src/app/ng2/components/dynamic-element/dynamic-element.component.ts
+++ b/catalog-ui/src/app/ng2/components/dynamic-element/dynamic-element.component.ts
@@ -1,3 +1,23 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * SDC
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+
import { Component, Compiler, EventEmitter, ViewContainerRef, ViewChild, Input, Output, ElementRef, ComponentRef, ComponentFactory, ComponentFactoryResolver } from '@angular/core'
import { UiElementCheckBoxComponent } from './elements-ui/checkbox/ui-element-checkbox.component';
import { UiElementDropDownComponent, DropdownValue } from './elements-ui/dropdown/ui-element-dropdown.component';
@@ -24,6 +44,7 @@ export class DynamicElementComponent {
@Input() type: any;
@Input() name: string;
@Input() readonly:boolean;
+ @Input() path:string;//optional param. used only for for subnetpoolid type
value:any;
// Two way binding for value (need to write the "Change" word like this)
@@ -58,7 +79,11 @@ export class DynamicElementComponent {
this.cmpRef.instance.pattern = this.validation.validationPatterns.integer;
break;
case 'string':
- if (this.name.toUpperCase().indexOf("SUBNETPOOLID") !== -1) {
+ if (this.path && this.path.toUpperCase().indexOf("SUBNETPOOLID") !== -1) {
+ if(this.name.toUpperCase().indexOf("SUBNETPOOLID") == -1){//if it's an item of subnetpoolid list get the parent name
+ let pathArray = this.path.split("#");
+ this.name = pathArray[pathArray.length - 2];
+ }
this.createComponent(UiElementPopoverInputComponent);
}
else {
diff --git a/catalog-ui/src/app/ng2/components/dynamic-element/dynamic-element.module.ts b/catalog-ui/src/app/ng2/components/dynamic-element/dynamic-element.module.ts
index f53b8616ac..b57020a1d0 100644
--- a/catalog-ui/src/app/ng2/components/dynamic-element/dynamic-element.module.ts
+++ b/catalog-ui/src/app/ng2/components/dynamic-element/dynamic-element.module.ts
@@ -1,3 +1,23 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * SDC
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+
import { NgModule } from "@angular/core";
import { UiElementCheckBoxComponent } from './elements-ui/checkbox/ui-element-checkbox.component';
import { UiElementDropDownComponent } from './elements-ui/dropdown/ui-element-dropdown.component';
diff --git a/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/checkbox/ui-element-checkbox.component.ts b/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/checkbox/ui-element-checkbox.component.ts
index 152303aee7..f73afd42c7 100644
--- a/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/checkbox/ui-element-checkbox.component.ts
+++ b/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/checkbox/ui-element-checkbox.component.ts
@@ -1,3 +1,23 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * SDC
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+
import { Component, ViewChild, ElementRef, ContentChildren, Input } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser'
import { UiElementBase, UiElementBaseInterface } from './../ui-element-base.component';
diff --git a/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/dropdown/ui-element-dropdown.component.ts b/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/dropdown/ui-element-dropdown.component.ts
index b1fb37a186..970c61531f 100644
--- a/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/dropdown/ui-element-dropdown.component.ts
+++ b/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/dropdown/ui-element-dropdown.component.ts
@@ -1,3 +1,23 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * SDC
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+
import { Component, EventEmitter, Output, Input } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { UiElementBase, UiElementBaseInterface } from './../ui-element-base.component';
diff --git a/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/input/ui-element-input.component.ts b/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/input/ui-element-input.component.ts
index 2d64d9b713..fb3b3db859 100644
--- a/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/input/ui-element-input.component.ts
+++ b/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/input/ui-element-input.component.ts
@@ -1,3 +1,23 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * SDC
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+
import {Component, ViewChild, ElementRef, ContentChildren, Input} from '@angular/core';
import { BrowserModule } from '@angular/platform-browser'
import { UiElementBase, UiElementBaseInterface } from './../ui-element-base.component';
diff --git a/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/integer-input/ui-element-integer-input.component.ts b/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/integer-input/ui-element-integer-input.component.ts
index d42c80a89e..8b27ab7e3a 100644
--- a/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/integer-input/ui-element-integer-input.component.ts
+++ b/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/integer-input/ui-element-integer-input.component.ts
@@ -1,3 +1,23 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * SDC
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+
import {Component, ViewChild, ElementRef, ContentChildren, Input} from '@angular/core';
import { BrowserModule } from '@angular/platform-browser'
import { UiElementBase, UiElementBaseInterface } from './../ui-element-base.component';
diff --git a/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/popover-input/ui-element-popover-input.component.ts b/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/popover-input/ui-element-popover-input.component.ts
index 84dd884d1f..67eb8822b4 100644
--- a/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/popover-input/ui-element-popover-input.component.ts
+++ b/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/popover-input/ui-element-popover-input.component.ts
@@ -1,3 +1,23 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * SDC
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+
import {Component, ViewChild, ElementRef, Input} from '@angular/core';
import {UiElementBase, UiElementBaseInterface} from "../ui-element-base.component";
import {ButtonsModelMap, ButtonModel} from "app/models";
diff --git a/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/ui-element-base.component.ts b/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/ui-element-base.component.ts
index fa2be1048c..4bc35e814a 100644
--- a/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/ui-element-base.component.ts
+++ b/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/ui-element-base.component.ts
@@ -1,3 +1,23 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * SDC
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+
import { Component, EventEmitter, Input, Output } from '@angular/core'
import { ValidationConfiguration } from "app/models";
import { FormControl, Validators } from '@angular/forms';
diff --git a/catalog-ui/src/app/ng2/components/filter-properties-assignment/filter-properties-assignment.component.less b/catalog-ui/src/app/ng2/components/filter-properties-assignment/filter-properties-assignment.component.less
index afed54672c..07f38d3011 100644
--- a/catalog-ui/src/app/ng2/components/filter-properties-assignment/filter-properties-assignment.component.less
+++ b/catalog-ui/src/app/ng2/components/filter-properties-assignment/filter-properties-assignment.component.less
@@ -25,11 +25,10 @@ form{
cursor: pointer;
width: 32px;
height: 34px;
- display: inline-block;
+ margin-left:5px;
+
&.open{
z-index: 1061;
- position: relative;
- top: 2px;
background-color: @main_color_p;
border: solid 1px @main_color_c;
border-bottom: none;
diff --git a/catalog-ui/src/app/ng2/components/filter-properties-assignment/filter-properties-assignment.component.ts b/catalog-ui/src/app/ng2/components/filter-properties-assignment/filter-properties-assignment.component.ts
index c23e08bc0d..c43c30db21 100644
--- a/catalog-ui/src/app/ng2/components/filter-properties-assignment/filter-properties-assignment.component.ts
+++ b/catalog-ui/src/app/ng2/components/filter-properties-assignment/filter-properties-assignment.component.ts
@@ -1,3 +1,23 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * SDC
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+
/**
* Created by rc2122 on 5/16/2017.
*/
diff --git a/catalog-ui/src/app/ng2/components/hierarchy-navigtion/hierarchy-display-options.ts b/catalog-ui/src/app/ng2/components/hierarchy-navigtion/hierarchy-display-options.ts
index 7045286ccd..c8d4566653 100644
--- a/catalog-ui/src/app/ng2/components/hierarchy-navigtion/hierarchy-display-options.ts
+++ b/catalog-ui/src/app/ng2/components/hierarchy-navigtion/hierarchy-display-options.ts
@@ -1,3 +1,23 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * SDC
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+
export class HierarchyDisplayOptions {
idProperty: string;
valueProperty: string;
diff --git a/catalog-ui/src/app/ng2/components/hierarchy-navigtion/hierarchy-navigation.component.less b/catalog-ui/src/app/ng2/components/hierarchy-navigtion/hierarchy-navigation.component.less
index 57d51616a8..4befa2c797 100644
--- a/catalog-ui/src/app/ng2/components/hierarchy-navigtion/hierarchy-navigation.component.less
+++ b/catalog-ui/src/app/ng2/components/hierarchy-navigtion/hierarchy-navigation.component.less
@@ -6,6 +6,7 @@
border: 1px dotted;
border-right: none;
border-bottom: none;
+ width: 100%;
}
.node-item:last-child {
@@ -14,10 +15,10 @@
.node-data-wrapper {
cursor: default;
- height: 30px;
- line-height: 2.6em;;
+ height: 39px;
+ line-height: 39px;
position: relative;
- top: -1.1em;
+ top: -20px;
background-color: white;
margin-left: 0.7em;
}
diff --git a/catalog-ui/src/app/ng2/components/hierarchy-navigtion/hierarchy-navigation.component.ts b/catalog-ui/src/app/ng2/components/hierarchy-navigtion/hierarchy-navigation.component.ts
index 428bbb4b04..dc0a02c277 100644
--- a/catalog-ui/src/app/ng2/components/hierarchy-navigtion/hierarchy-navigation.component.ts
+++ b/catalog-ui/src/app/ng2/components/hierarchy-navigtion/hierarchy-navigation.component.ts
@@ -1,3 +1,23 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * SDC
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+
import {Component, Input, Output, EventEmitter} from '@angular/core';
import {HierarchyDisplayOptions} from './hierarchy-display-options';
diff --git a/catalog-ui/src/app/ng2/components/inputs-table/confirmation-delete-input/confirmation-delete-input.component.html b/catalog-ui/src/app/ng2/components/inputs-table/confirmation-delete-input/confirmation-delete-input.component.html
deleted file mode 100644
index 7fdd95b304..0000000000
--- a/catalog-ui/src/app/ng2/components/inputs-table/confirmation-delete-input/confirmation-delete-input.component.html
+++ /dev/null
@@ -1,3 +0,0 @@
-<modal #confirmationModal title="Delete Input" size="sm" [buttons]="footerButtons">
- Are you sure you want to delete this input?
-</modal>
diff --git a/catalog-ui/src/app/ng2/components/inputs-table/confirmation-delete-input/confirmation-delete-input.component.ts b/catalog-ui/src/app/ng2/components/inputs-table/confirmation-delete-input/confirmation-delete-input.component.ts
deleted file mode 100644
index 24c37b5636..0000000000
--- a/catalog-ui/src/app/ng2/components/inputs-table/confirmation-delete-input/confirmation-delete-input.component.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-/**
- * Created by rc2122 on 6/1/2017.
- */
-import {Component, Output, EventEmitter, ViewChild} from "@angular/core";
-import {ButtonsModelMap, ButtonModel} from "app/models/button";
-import {ModalComponent} from "app/ng2/components/modal/modal.component";
-
-@Component({
- selector: 'confirm-delete-input',
- templateUrl: './confirmation-delete-input.component.html'
-})
-export class ConfirmationDeleteInputComponent {
-
- @Output() deleteInput: EventEmitter<any> = new EventEmitter<any>();
- @ViewChild ('confirmationModal') confirmationModal:ModalComponent;
- footerButtons:ButtonsModelMap = {};
-
- constructor (){
- }
-
- ngOnInit() {
- this.footerButtons['Delete'] = new ButtonModel('Delete', 'blue', this.onDeleteInput);
- this.footerButtons['Close'] = new ButtonModel('Close', 'grey', this.closeModal);
- }
-
- onDeleteInput = (input) => {
- this.deleteInput.emit(input);
- this.closeModal();
- };
-
- openModal = () => {
- this.confirmationModal.open();
- }
-
- closeModal = () => {
- this.confirmationModal.close();
- }
-}
diff --git a/catalog-ui/src/app/ng2/components/inputs-table/inputs-table.component.html b/catalog-ui/src/app/ng2/components/inputs-table/inputs-table.component.html
index fb6b04013f..38de3ce649 100644
--- a/catalog-ui/src/app/ng2/components/inputs-table/inputs-table.component.html
+++ b/catalog-ui/src/app/ng2/components/inputs-table/inputs-table.component.html
@@ -1,9 +1,9 @@
<div class="properties-table">
- <loader [display]="isLoading" size="large" [relative]="true"></loader>
+ <loader [display]="isLoading" size="large" [relative]="false"></loader>
<div class="table-header">
<div class="table-cell col1">Property Name</div>
+ <div class="table-cell col3">From Instance</div>
<div class="table-cell col2">Type</div>
- <div class="table-cell col3">ES</div>
<div class="table-cell valueCol">Value</div>
</div>
<div class="table-body">
@@ -14,14 +14,18 @@
<div class="inner-cell-div" tooltip="{{input.name}}"><span class="property-name">{{input.name}}</span></div>
<span *ngIf="input.description"
class="property-description-icon sprite-new show-desc"
- tooltip="{{input.description}}"></span>
+ tooltip="{{input.description}}" tooltipDelay="0"></span>
+ </div>
+ <div class="table-cell col3">
+ <div class="inner-cell-div" tooltip="{{instanceNamesMap[input.instanceUniqueId]}}">
+ <span>{{instanceNamesMap[input.instanceUniqueId]}}</span>
+ </div>
</div>
<div class="table-cell col2">
<div class="inner-cell-div" tooltip="{{input.type | contentAfterLastDot}}">
<span>{{input.type | contentAfterLastDot}}</span>
</div>
</div>
- <div class="table-cell col3">{{input.schema && input.schema.property && input.schema.property.type ? (input.schema.property.type | contentAfterLastDot) : ''}}</div>
<div class="table-cell valueCol input-value-col" [class.inner-table-container]="input.childrenProperties || !input.isSimpleType">
<dynamic-element class="value-input"
*ngIf="input.isSimpleType"
@@ -33,7 +37,7 @@
[readonly]="readonly">
</dynamic-element>
<div class="delete-button-container">
- <span *ngIf="!input.ownerId && !readonly" class="sprite-new delete-btn" (click)="openDeleteModal(input)"></span>
+ <span *ngIf="input.instanceUniqueId && !readonly" class="sprite-new delete-btn" (click)="openDeleteModal(input)"></span>
</div>
</div>
@@ -41,6 +45,5 @@
</div>
</div>
</div>
-<confirm-delete-input #deleteInputConfirmation (deleteInput)="onDeleteInput()"></confirm-delete-input>
diff --git a/catalog-ui/src/app/ng2/components/inputs-table/inputs-table.component.less b/catalog-ui/src/app/ng2/components/inputs-table/inputs-table.component.less
index 93f96470bc..89c7287449 100644
--- a/catalog-ui/src/app/ng2/components/inputs-table/inputs-table.component.less
+++ b/catalog-ui/src/app/ng2/components/inputs-table/inputs-table.component.less
@@ -10,26 +10,26 @@
height:100%;
text-align:left;
- dynamic-property {
- width:100%;
- }
-
- /deep/ .dynamic-property-row {
- border-top:solid #d2d2d2 1px;
+ .inner-cell-div{
+ width: 100%;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ height: 20px;
}
- /deep/ dynamic-property dynamic-property:first-of-type .dynamic-property-row:not(.with-top-border) {
- border-top: none;
- }
.table-header {
font-weight:bold;
border-top: #d2d2d2 solid 1px;
background-color: #eaeaea;
+ color:#191919;
+ .table-cell {
+ font-size: 13px;
+ }
.valueCol {
justify-content: flex-start;
- padding: 5px;
+ padding: 10px;
}
}
.table-header, .table-row {
@@ -57,18 +57,6 @@
}
}
- .table-rows-header {
- font-size:16px;
- flex:1;
- border: #d2d2d2 solid 1px;
- border-top:none;
- padding: 5px;
- text-overflow: ellipsis;
- white-space: nowrap;
- overflow: hidden;
- background-color: @tlv_color_v;
- }
-
.table-row {
&:hover {
background-color:#f8f8f8; cursor:pointer;
@@ -81,17 +69,14 @@
background-color:#e6f6fb;
}
}
- .cut-inner-long-text{
- text-overflow: ellipsis;
- overflow: hidden;
- }
+
.table-cell {
font-size:13px;
flex:1;
border: #d2d2d2 solid 1px;
border-right:none;
border-top:none;
- padding: 5px;
+ padding: 10px;
text-overflow: ellipsis;
white-space: nowrap;
@@ -100,7 +85,7 @@
border-right:#d2d2d2 solid 1px;
}
&.col1 {
- flex: 0 0 300px;
+ flex: 1 0 200px;
max-width:300px;
display: flex;
justify-content: space-between;
@@ -132,6 +117,7 @@
display: flex;
justify-content: flex-end;
padding: 0px;
+ align-items: center;
.value-input {
flex: 1;
@@ -163,7 +149,7 @@
}
&.input-value-col {
- padding: 5px;
+ padding: 8px;
}
diff --git a/catalog-ui/src/app/ng2/components/inputs-table/inputs-table.component.ts b/catalog-ui/src/app/ng2/components/inputs-table/inputs-table.component.ts
index 83c0bda991..30cdb89d8e 100644
--- a/catalog-ui/src/app/ng2/components/inputs-table/inputs-table.component.ts
+++ b/catalog-ui/src/app/ng2/components/inputs-table/inputs-table.component.ts
@@ -1,9 +1,31 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * SDC
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+
/**
* Created by rc2122 on 5/4/2017.
*/
import {Component, Input, Output, EventEmitter, ViewChild} from "@angular/core";
import {InputFEModel} from "app/models";
-import {ConfirmationDeleteInputComponent} from "./confirmation-delete-input/confirmation-delete-input.component";
+import { ModalService } from 'app/ng2/services/modal.service';
+
+
@Component({
selector: 'inputs-table',
@@ -13,15 +35,15 @@ import {ConfirmationDeleteInputComponent} from "./confirmation-delete-input/conf
export class InputsTableComponent {
@Input() inputs: Array<InputFEModel>;
+ @Input() instanceNamesMap: Map<string, string>;
@Input() readonly:boolean;
@Input() isLoading:boolean;
@Output() inputValueChanged: EventEmitter<any> = new EventEmitter<any>();
@Output() deleteInput: EventEmitter<any> = new EventEmitter<any>();
- @ViewChild ('deleteInputConfirmation') deleteInputConfirmation:ConfirmationDeleteInputComponent;
selectedInputToDelete:InputFEModel;
- constructor (){
+ constructor(private modalService: ModalService){
}
onInputValueChanged = (input) => {
@@ -30,11 +52,12 @@ export class InputsTableComponent {
onDeleteInput = () => {
this.deleteInput.emit(this.selectedInputToDelete);
+ this.modalService.closeCurrentModal();
};
openDeleteModal = (input:InputFEModel) => {
this.selectedInputToDelete = input;
- this.deleteInputConfirmation.openModal();
+ this.modalService.openActionModal("Delete Input", "Are you sure you want to delete this input?", "Delete", this.onDeleteInput, "Close");
}
}
diff --git a/catalog-ui/src/app/ng2/components/loader/loader.component.ts b/catalog-ui/src/app/ng2/components/loader/loader.component.ts
index 4d90b2853d..92278d3ff5 100644
--- a/catalog-ui/src/app/ng2/components/loader/loader.component.ts
+++ b/catalog-ui/src/app/ng2/components/loader/loader.component.ts
@@ -1,3 +1,23 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * SDC
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+
/**
* Created by rc2122 on 6/6/2017.
*/
@@ -11,72 +31,28 @@ export class LoaderComponent {
@Input() display:boolean;
@Input() size:string;// small || medium || large
- @Input() elementSelector:string; // required if is relative true
- @Input() relative:boolean;
-
- interval;
+ @Input() relative: boolean;
+ @Input() elementSelector: string; // optional. If is relative is set to true, option to pass in element that loader should be relative to. Otherwise, will be relative to parent element.
+
constructor (private el: ElementRef, private renderer: Renderer){
}
ngOnInit() {
-
- if (this.elementSelector) {
- let elemParent = angular.element(this.elementSelector);
- let positionStyle:string = elemParent.css('position');
- this.setStyle(positionStyle);
- }
-
- if (this.relative === true) {
- let positionStyle:string = this.el.nativeElement.parentElement.style.position;
- this.setStyle(positionStyle);
- }
if (!this.size) {
this.size = 'large';
}
- }
-
- ngOnDestroy(){
- clearInterval(this.interval);
- }
-
- calculateSizesForFixPosition = (positionStyle:string):void => {
- // This is problematic, I do not want to change the parent position.
- // set the loader on all the screen
- let parentLeft = this.el.nativeElement.parentElement.offsetLeft;
- let parentTop = this.el.nativeElement.parentElement.offsetTop;
- let parentWidth = this.el.nativeElement.parentElement.offsetWidth;
- let parentHeight = this.el.nativeElement.parentElement.offsetHeight;
- this.renderer.setElementStyle(this.el.nativeElement, 'position', positionStyle);
- this.renderer.setElementStyle(this.el.nativeElement, 'top', parentTop);
- this.renderer.setElementStyle(this.el.nativeElement, 'left', parentLeft);
- this.renderer.setElementStyle(this.el.nativeElement, 'width', parentWidth);
- this.renderer.setElementStyle(this.el.nativeElement, 'height', parentHeight);
- };
-
- setStyle = (positionStyle:string):void => {
-
- switch (positionStyle) {
- case 'absolute':
- case 'fixed':
- // The parent size is not set yet, still loading, so need to use interval to update the size.
- this.interval = window.setInterval(()=> {
- this.calculateSizesForFixPosition(positionStyle);
- }, 2000);
- break;
- default:
- // Can change the parent position to relative without causing style issues.
- this.renderer.setElementStyle(this.el.nativeElement.parentElement,'position', 'relative');
- break;
+ if (this.display === true) {
+ this.changeLoaderDisplay(true);
}
- };
+ }
ngOnChanges(changes: SimpleChanges) {
if(changes.display){
- this.changeLoaderDisplay(false);
- if ( this.display ) {
- window.setTimeout(():void => {
- this.changeLoaderDisplay(true);
+ if (this.display) {
+ this.changeLoaderDisplay(false); //display is set to true, so loader will appear unless we explicitly tell it not to.
+ window.setTimeout((): void => {
+ this.display && this.changeLoaderDisplay(true); //only show loader if we still need to display it.
}, 500);
} else {
window.setTimeout(():void => {
@@ -86,7 +62,33 @@ export class LoaderComponent {
}
}
- changeLoaderDisplay = (display:boolean):void => {
- this.renderer.setElementStyle(this.el.nativeElement, 'display', display ? 'block' : 'none');
+ changeLoaderDisplay = (display: boolean): void => {
+ if (display) {
+ this.calculateLoaderPosition();
+ this.renderer.setElementStyle(this.el.nativeElement, 'display', 'block');
+ } else {
+ this.renderer.setElementStyle(this.el.nativeElement, 'display', 'none');
+ }
}
+
+ calculateLoaderPosition = () => {
+ if (this.relative === true) { // Can change the parent position to relative without causing style issues.
+ let parent = (this.elementSelector) ? angular.element(this.elementSelector).get(0) : this.el.nativeElement.parentElement;
+ this.renderer.setElementStyle(parent, 'position', 'relative');
+ this.setLoaderPosition(0, 0); //will be relative to parent and appear over specified element
+ //TODO: DONT force parent to have position relative; set inner div's style instead of outer element
+ // let parentPos: ClientRect = this.el.nativeElement.parentElement.getBoundingClientRect();
+ // this.setLoaderPosition(parentPos.top, parentPos.left, parentPos.width, parentPos.height);
+ } else {
+ this.setLoaderPosition(0, 0); //will appear over whole page
+ }
+ }
+
+ setLoaderPosition = (top:number, left:number, width?:number, height?:number): void => {
+ this.renderer.setElementStyle(this.el.nativeElement, 'position', 'absolute');
+ this.renderer.setElementStyle(this.el.nativeElement, 'top', top? top.toString() : "0");
+ this.renderer.setElementStyle(this.el.nativeElement, 'left', left? left.toString() : "0");
+ this.renderer.setElementStyle(this.el.nativeElement, 'width', width? width.toString() : "100%");
+ this.renderer.setElementStyle(this.el.nativeElement, 'height', height? height.toString() : "100%");
+ };
}
diff --git a/catalog-ui/src/app/ng2/components/modal/modal.component.html b/catalog-ui/src/app/ng2/components/modal/modal.component.html
index 4882449596..cc411bc751 100644
--- a/catalog-ui/src/app/ng2/components/modal/modal.component.html
+++ b/catalog-ui/src/app/ng2/components/modal/modal.component.html
@@ -1,17 +1,15 @@
-<div class="custom-modal {{size}}">
+<div class="custom-modal {{input.size}}">
<div class="ng2-modal-content">
<div class="ng2-modal-header">
- <span class="title">{{ title }}</span>
+ <span class="title">{{ input.title }}</span>
<span class="close-button" (click)="close()"></span>
</div>
- <div class="ng2-modal-body">
- <ng-content></ng-content>
- </div>
+ <div class="ng2-modal-body" >{{input.content}}</div>
<div class="ng2-modal-footer">
- <button *ngFor="let buttonName of buttonsNames"
- class="tlv-btn {{buttons[buttonName].cssClass}}"
- [disabled] = "buttons[buttonName].getDisabled && buttons[buttonName].getDisabled()"
- (click) = "buttons[buttonName].callback()">{{buttons[buttonName].text}}</button>
+ <button *ngFor="let button of input.buttons"
+ class="tlv-btn {{button.cssClass}}"
+ [disabled] = "button.getDisabled && button.getDisabled()"
+ (click) = "button.callback()">{{button.text}}</button>
</div>
</div>
</div>
diff --git a/catalog-ui/src/app/ng2/components/modal/modal.component.ts b/catalog-ui/src/app/ng2/components/modal/modal.component.ts
index 4a00871b21..09fb9abdd1 100644
--- a/catalog-ui/src/app/ng2/components/modal/modal.component.ts
+++ b/catalog-ui/src/app/ng2/components/modal/modal.component.ts
@@ -1,9 +1,30 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * SDC
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+
/**
* Created by rc2122 on 6/1/2017.
*/
import { Component, ElementRef, Input, OnInit, OnDestroy } from '@angular/core';
+//import {ViewContainerRef, ViewChild} from '@angular/core';
import * as $ from 'jquery';
-import {ButtonsModelMap} from "app/models/button";
+import { ButtonsModelMap, ModalModel } from 'app/models';
@Component({
selector: 'modal',
@@ -12,22 +33,17 @@ import {ButtonsModelMap} from "app/models/button";
})
export class ModalComponent implements OnInit, OnDestroy {
- @Input() size: string; 'xl|l|md|sm|xsm'
- @Input() title: string;
- @Input() public buttons:ButtonsModelMap;
+ @Input() input: ModalModel;
private modalElement: JQuery;
- private buttonsNames:Array<string>;
+ //@ViewChild('modalBody', { read: ViewContainerRef }) modalContainer: ViewContainerRef; //TODO: allow for custom component as body instead of simple message
+
constructor( el: ElementRef ) {
this.modalElement = $(el.nativeElement);
}
ngOnInit(): void {
- let modal = this;
this.modalElement.appendTo('body');
- if(this.buttons){
- this.buttonsNames = Object.keys(this.buttons);
- }
}
ngOnDestroy(): void {
diff --git a/catalog-ui/src/app/ng2/components/modal/modal.module.ts b/catalog-ui/src/app/ng2/components/modal/modal.module.ts
new file mode 100644
index 0000000000..d77be2cd23
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/modal/modal.module.ts
@@ -0,0 +1,19 @@
+import { NgModule } from "@angular/core";
+import { CommonModule } from '@angular/common';
+import { ModalService } from 'app/ng2/services/modal.service';
+import { ModalComponent } from "app/ng2/components/modal/modal.component"
+
+@NgModule({
+ declarations: [
+ ModalComponent,
+ ],
+ imports: [CommonModule],
+ exports: [],
+ entryComponents: [
+ ModalComponent
+ ],
+ providers: [ModalService]
+})
+export class ModalModule {
+
+} \ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/components/popover/popover-content.component.less b/catalog-ui/src/app/ng2/components/popover/popover-content.component.less
index f7b62e91f7..04cdd3914b 100644
--- a/catalog-ui/src/app/ng2/components/popover/popover-content.component.less
+++ b/catalog-ui/src/app/ng2/components/popover/popover-content.component.less
@@ -39,10 +39,14 @@
-ms-flex-align: center;
align-items: center;
margin: 0px 20px;
+ max-width:350px;
+
.title{
- -webkit-box-flex: 999;
- -ms-flex-positive: 999;
- flex-grow: 999;
+ flex: 1;
+ max-width: 100%;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
}
.close-button{
.sprite;
diff --git a/catalog-ui/src/app/ng2/components/popover/popover-content.component.ts b/catalog-ui/src/app/ng2/components/popover/popover-content.component.ts
index c4489f59b9..6eb36287d0 100644
--- a/catalog-ui/src/app/ng2/components/popover/popover-content.component.ts
+++ b/catalog-ui/src/app/ng2/components/popover/popover-content.component.ts
@@ -1,3 +1,23 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * SDC
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+
import {Component, Input, Output, AfterViewInit, ElementRef, ChangeDetectorRef, OnDestroy, ViewChild, EventEmitter, Renderer } from "@angular/core";
import {ButtonsModelMap} from "app/models";
import {PopoverComponent} from "./popover.component";
diff --git a/catalog-ui/src/app/ng2/components/popover/popover.component.ts b/catalog-ui/src/app/ng2/components/popover/popover.component.ts
index a7e2881b29..e976bc7bf2 100644
--- a/catalog-ui/src/app/ng2/components/popover/popover.component.ts
+++ b/catalog-ui/src/app/ng2/components/popover/popover.component.ts
@@ -1,3 +1,23 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * SDC
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+
import { Directive, HostListener, ComponentRef, ViewContainerRef, ComponentFactoryResolver, ComponentFactory, Input, OnChanges, SimpleChange, Output, EventEmitter } from "@angular/core";
import {PopoverContentComponent} from "./popover-content.component";
diff --git a/catalog-ui/src/app/ng2/components/popover/popover.module.ts b/catalog-ui/src/app/ng2/components/popover/popover.module.ts
index 4bd8426ce1..a9605c17b6 100644
--- a/catalog-ui/src/app/ng2/components/popover/popover.module.ts
+++ b/catalog-ui/src/app/ng2/components/popover/popover.module.ts
@@ -1,3 +1,23 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * SDC
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+
/**
* Created by rc2122 on 5/17/2017.
*/
diff --git a/catalog-ui/src/app/ng2/components/properties-table/dynamic-property/dynamic-property.component.html b/catalog-ui/src/app/ng2/components/properties-table/dynamic-property/dynamic-property.component.html
index d6ee568c0c..95cc79dce9 100644
--- a/catalog-ui/src/app/ng2/components/properties-table/dynamic-property/dynamic-property.component.html
+++ b/catalog-ui/src/app/ng2/components/properties-table/dynamic-property/dynamic-property.component.html
@@ -1,16 +1,16 @@
-<div class="dynamic-property-row"
+<div *ngIf="!property.hidden" class="dynamic-property-row nested-level-{{nestedLevel}}" [@fadeIn]
[ngClass]="{'selected': selectedPropertyId && selectedPropertyId === property.propertiesName }"
[class.with-top-border]="property.isChildOfListOrMap"
(click)="onClickPropertyRow(property, $event)">
<!-- LEFT CELL -->
<ng-container *ngIf="!isPropertyFEModel">
- <div class="table-cell" *ngIf="canBeDeclared" [ngClass]="{'filtered':property.name === propertyNameSearchText}"> <!-- simple children of complex type -->
- <checkbox [label]="property.name" [(checked)]="property.isSelected" [disabled]="property.isDisabled ||property.isDeclared || readonly" (checkedChange)="checkProperty.emit(property.propertiesName)"
- ></checkbox>
+ <div class="table-cell" *ngIf="canBeDeclared" [ngClass]="{'filtered':property.name === propertyNameSearchText}" [class.round-checkbox]="property.isDeclared"> <!-- simple children of complex type [@checkEffect]="property.isDeclared"-->
+ <checkbox [(checked)]="property.isSelected" [disabled]="property.isDisabled ||property.isDeclared || readonly" (checkedChange)="checkProperty.emit(property.propertiesName)" ></checkbox>
+ <div class="inner-cell-div" tooltip="{{property.name}}"><span>{{property.name}}</span></div>
</div>
<div class="table-cell" *ngIf="!canBeDeclared && !property.isChildOfListOrMap">{{property.name}}</div> <!-- simple children of complex type within map or list -->
<div class="table-cell map-entry" *ngIf="property.isChildOfListOrMap && propType == derivedPropertyTypes.MAP"><!-- map left cell -->
- <input [value]="property.mapKey" #mapKey (change)="mapKeyChanged.emit(mapKey.value)" [readonly]="readonly" type="text" [ngClass]="{'disabled':readonly}" />
+ <input [value]="property.mapKey" #mapKey (change)="mapKeyChanged.emit(mapKey)" [readonly]="readonly" type="text" [ngClass]="{'disabled':readonly, 'error':!mapKey.validity.valid}" />
</div>
</ng-container>
<!-- RIGHT CELL OR FULL WIDTH CELL-->
@@ -21,24 +21,24 @@
[(value)]="property.valueObj"
[type]="property.isDeclared ? 'string' : property.type"
[name]="property.name"
+ [path]="property.propertiesName"
(valueChange)="valueChanged.emit();"
- [readonly]="readonly||property.isDeclared"
- > <!--[disabled]="property.isDisabled || property.isDeclared" -->
- </dynamic-element>
+ [readonly]="readonly||property.isDeclared||property.isDisabled"
+ ></dynamic-element>
</div>
</ng-container>
<ng-container *ngIf="!isPropertyFEModel && propType != derivedPropertyTypes.SIMPLE && !property.isDeclared"> <!-- right cell for complex elements, or list complex -->
<div class="table-cell" *ngIf="propType == derivedPropertyTypes.COMPLEX">{{property.type | contentAfterLastDot }}</div>
<div class="table-cell" *ngIf="propType == derivedPropertyTypes.MAP && !property.schema.property.isSimpleType">{{property.schema.property.type | contentAfterLastDot }}</div>
</ng-container>
- <ng-container *ngIf="isPropertyFEModel && (propType == derivedPropertyTypes.LIST || propType == derivedPropertyTypes.MAP)"><!-- empty, full-width table cell - for PropertyFEModel of type list or map -->
+ <ng-container *ngIf="isPropertyFEModel && (propType == derivedPropertyTypes.LIST || propType == derivedPropertyTypes.MAP) && !property.isDeclared"><!-- empty, full-width table cell - for PropertyFEModel of type list or map -->
<div class="table-cell empty"></div>
</ng-container>
<!-- ICONS: add, delete, and expand -->
<ng-container *ngIf="!property.isDeclared">
- <span *ngIf="(propType == derivedPropertyTypes.LIST || propType == derivedPropertyTypes.MAP) && !property.isChildOfListOrMap" class="property-icon sprite-new add-item-icon" (click)="createNewChildProperty();" [ngClass]="{'disabled':readonly}"></span>
+ <a *ngIf="(propType == derivedPropertyTypes.LIST || propType == derivedPropertyTypes.MAP) && !property.isChildOfListOrMap" class="property-icon add-item" (click)="createNewChildProperty();" [ngClass]="{'disabled':readonly || preventInsertItem(property)}">Add value to list</a>
<span *ngIf="property.isChildOfListOrMap" (click)="deleteItem.emit(property);" class="property-icon sprite-new delete-item-icon" [ngClass]="{'disabled':readonly}"></span>
- <span *ngIf="!isPropertyFEModel && (propType == derivedPropertyTypes.COMPLEX || hasChildren())" (click)="expandChildById(propPath)" class="property-icon expand-icon" [class.expanded]="propPath == expandedChildId">V</span>
+ <span *ngIf="!isPropertyFEModel && (propType == derivedPropertyTypes.COMPLEX || ((propType == derivedPropertyTypes.LIST || propType == derivedPropertyTypes.MAP) && hasChildren()))" (click)="expandChildById(propPath)" class="property-icon sprite-new round-expand-icon" [class.open]="expandedChildId.indexOf(propPath) == 0"></span>
</ng-container>
</div>
diff --git a/catalog-ui/src/app/ng2/components/properties-table/dynamic-property/dynamic-property.component.less b/catalog-ui/src/app/ng2/components/properties-table/dynamic-property/dynamic-property.component.less
index cb7cd39640..48d3d035d0 100644
--- a/catalog-ui/src/app/ng2/components/properties-table/dynamic-property/dynamic-property.component.less
+++ b/catalog-ui/src/app/ng2/components/properties-table/dynamic-property/dynamic-property.component.less
@@ -1,48 +1,74 @@
+@import '../../../../../assets/styles/variables.less';
.flat-children-container {
- dynamic-property:first-child .dynamic-property-row:not(.with-top-border) {
- border-top:none;
- }
.dynamic-property-row {
- border-top: solid 1px #CCC;
+ /*create nested left border classes for up to 10 levels of nesting*/
+ .nested-border-loop(@i) when (@i > 0) {
+ @size: (@i - 1) *2;
+ &.nested-level-@{i} .table-cell:first-child {
+ border-left: ~"solid @{size}px #009fdb";
+ }
+ .nested-border-loop(@i - 1)
+ }
+ .nested-border-loop(10);
+ }
+ dynamic-property {
+ &:first-child .dynamic-property-row.with-top-border {
+ border-top:solid 1px #d2d2d2;
+ }
+ &:not(:last-child) .dynamic-property-row {
+ border-bottom:solid 1px #d2d2d2;
+ }
}
}
.dynamic-property-row {
display:flex;
flex-direction:row;
- align-items: center;
-
+ align-items: stretch;
+
.table-cell {
flex: 1;
- padding:5px;
+ padding:9px;
+ justify-content: center;
+ overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
- overflow:hidden;
- min-height:32px;
&:first-child {
flex: 0 0 50%;
border-right:#d2d2d2 solid 1px;
-
-
&:only-of-type {
flex: 1 1 100%;
border-right:none;
}
}
-
+ &.empty {
+ height:40px;
+ }
}
.property-icon {
flex: 0 0 auto;
+ margin-right:10px;
+ align-self:center;
+ cursor:pointer;
}
- span.expand-icon {
- transition: 200ms transform ease-in-out;
- }
- span.expand-icon.expanded {
- transform: rotate(-180deg);
- }
+
}
+
.filtered {
/deep/ .checkbox-label-content{
background-color: yellow;
}
}
+.inner-cell-div{
+ max-width: 100%;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ display: inline;
+ padding-left: 8px;
+}
+.error {
+ border: solid 1px @func_color_q;
+ color: @func_color_q;
+ outline: none;
+ box-sizing: border-box;
+}
diff --git a/catalog-ui/src/app/ng2/components/properties-table/dynamic-property/dynamic-property.component.ts b/catalog-ui/src/app/ng2/components/properties-table/dynamic-property/dynamic-property.component.ts
index 1c7fbfac7a..59811b582d 100644
--- a/catalog-ui/src/app/ng2/components/properties-table/dynamic-property/dynamic-property.component.ts
+++ b/catalog-ui/src/app/ng2/components/properties-table/dynamic-property/dynamic-property.component.ts
@@ -1,14 +1,36 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * SDC
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+
import {Component, Input, Output, EventEmitter} from "@angular/core";
import { PropertyBEModel, PropertyFEModel, DerivedFEProperty, DerivedPropertyType, SchemaPropertyGroupModel, DataTypeModel } from "app/models";
import { PROPERTY_DATA, PROPERTY_TYPES } from 'app/utils';
import { PropertiesUtils } from "app/ng2/pages/properties-assignment/properties.utils";
import { DataTypeService } from "../../../services/data-type.service";
+import { trigger, state, style, transition, animate } from '@angular/core';
@Component({
selector: 'dynamic-property',
templateUrl: './dynamic-property.component.html',
- styleUrls: ['./dynamic-property.component.less']
+ styleUrls: ['./dynamic-property.component.less'],
+ animations: [trigger('fadeIn', [transition(':enter', [style({ opacity: '0' }), animate('.7s ease-out', style({ opacity: '1' }))])])]
})
export class DynamicPropertyComponent {
@@ -16,7 +38,7 @@ export class DynamicPropertyComponent {
propType: DerivedPropertyType;
propPath: string;
isPropertyFEModel: boolean;
- childrenCount: number;
+ nestedLevel: number;
@Input() canBeDeclared: boolean;
@Input() property: PropertyFEModel | DerivedFEProperty;
@@ -41,6 +63,7 @@ export class DynamicPropertyComponent {
this.isPropertyFEModel = this.property instanceof PropertyFEModel;
this.propType = this.property.derivedDataType;
this.propPath = (this.property instanceof PropertyFEModel) ? this.property.name : this.property.propertiesName;
+ this.nestedLevel = (this.property.propertiesName.match(/#/g) || []).length;
}
@@ -65,8 +88,8 @@ export class DynamicPropertyComponent {
}
createNewChildProperty = (): void => {
-
- let newProps: Array<DerivedFEProperty> = this.propertiesUtils.createListOrMapChildren(this.property, "", null);
+
+ let newProps: Array<DerivedFEProperty> = this.propertiesUtils.createListOrMapChildren(this.property, "", undefined);
if (this.property instanceof PropertyFEModel) {
this.addChildProps(newProps, this.property.name);
} else {
@@ -75,25 +98,33 @@ export class DynamicPropertyComponent {
}
addChildProps = (newProps: Array<DerivedFEProperty>, childPropName: string) => {
-
+
if (this.property instanceof PropertyFEModel) {
- let insertIndex: number = this.property.getIndexOfChild(childPropName) + this.property.getCountOfChildren(childPropName); //insert after parent prop and existing children
- this.property.flattenedChildren.splice(insertIndex, 0, ...newProps); //using ES6 spread operator
+ let insertIndex: number = this.property.getIndexOfChild(childPropName) + this.property.getCountOfChildren(childPropName); //insert after parent prop and existing children
+ this.property.flattenedChildren.splice(insertIndex, 0, ...newProps); //using ES6 spread operator
this.expandChildById(newProps[0].propertiesName);
+
+
+ if(!newProps[0].schema.property.isSimpleType){
+ angular.forEach(newProps, (prop:DerivedFEProperty):void => { //Update parent PropertyFEModel with value for each child, including nested props
+ (<PropertyFEModel>this.property).childPropUpdated(prop);
+ },this);
+ //grab the cumulative value for the new item from parent PropertyFEModel and assign that value to DerivedFEProp[0] (which is the list or map parent with UUID of the set we just added)
+ let parentNames = (<PropertyFEModel>this.property).getParentNamesArray(newProps[0].propertiesName, []);
+ newProps[0].valueObj = _.get(this.property.valueObj, parentNames.join('.'));
+ this.valueChanged.emit(this.property.name);
+ }
}
}
childValueChanged = (property: DerivedFEProperty) => { //value of child property changed
if (this.property instanceof PropertyFEModel) { // will always be the case
- let parentNames = this.getParentNamesArray(property.propertiesName, []);
- if (parentNames.length) {
- _.set(this.property.valueObj, parentNames.join('.'), property.valueObj);
- }
- console.log(parentNames);
+ this.property.childPropUpdated(property);
+ this.dataTypeService.checkForCustomBehavior(this.property);
this.valueChanged.emit(this.property.name);
}
- }
+ }
deleteListOrMapItem = (item: DerivedFEProperty) => {
if (this.property instanceof PropertyFEModel) {
@@ -103,15 +134,22 @@ export class DynamicPropertyComponent {
}
}
- removeValueFromParent = (item: DerivedFEProperty, replaceKey?: string) => {
+ removeValueFromParent = (item: DerivedFEProperty, target?: any) => {
if (this.property instanceof PropertyFEModel) {
let itemParent = (item.parentName == this.property.name) ? this.property : this.property.flattenedChildren.find(prop => prop.propertiesName == item.parentName);
if (item.derivedDataType == DerivedPropertyType.MAP) {
let oldKey = item.mapKey;
- if (typeof replaceKey == 'string') { //allow saving empty string
- _.set(itemParent.valueObj, replaceKey, itemParent.valueObj[oldKey]);
- item.mapKey = replaceKey;
+ if (target && typeof target.value == 'string') { //allow saving empty string
+ let replaceKey:string = target.value;
+ if(Object.keys(itemParent.valueObj).indexOf(replaceKey) > -1){//the key is exists
+ target.setCustomValidity('This key is already exists.');
+ return;
+ }else {
+ target.setCustomValidity('');
+ _.set(itemParent.valueObj, replaceKey, itemParent.valueObj[oldKey]);
+ item.mapKey = replaceKey;
+ }
}
delete itemParent.valueObj[oldKey];
} else {
@@ -127,29 +165,11 @@ export class DynamicPropertyComponent {
}
}
-
- getParentNamesArray = (parentPropName: string, parentNames?: Array<string>): Array<string> => {
- if (this.property instanceof PropertyFEModel) {
-
- if (parentPropName.indexOf("#") == -1) { return parentNames; } //finished recursing parents. return
-
- let parentProp: DerivedFEProperty = this.property.flattenedChildren.find(prop => prop.propertiesName === parentPropName);
- let nameToInsert: string = parentProp.name;
-
- if (parentProp.isChildOfListOrMap) {
- if (parentProp.derivedDataType == DerivedPropertyType.MAP) {
- nameToInsert = parentProp.mapKey;
- } else { //LIST
- let siblingProps = this.property.flattenedChildren.filter(prop => prop.parentName == parentProp.parentName).map(prop => prop.propertiesName);
- nameToInsert = siblingProps.indexOf(parentProp.propertiesName).toString();
- }
- }
-
- parentNames.splice(0, 0, nameToInsert); //add prop name to array
- return this.getParentNamesArray(parentProp.parentName, parentNames); //continue recursing
-
+ preventInsertItem = (property:DerivedFEProperty):boolean => {
+ if(property.type == PROPERTY_TYPES.MAP && Object.keys(property.valueObj).indexOf('') > -1 ){
+ return true;
}
+ return false;
}
-
}
diff --git a/catalog-ui/src/app/ng2/components/properties-table/properties-table.component.html b/catalog-ui/src/app/ng2/components/properties-table/properties-table.component.html
index 426ae3ab23..c57998af5e 100644
--- a/catalog-ui/src/app/ng2/components/properties-table/properties-table.component.html
+++ b/catalog-ui/src/app/ng2/components/properties-table/properties-table.component.html
@@ -1,5 +1,5 @@
<div class="properties-table">
- <loader [display]="isLoading" size="large" [relative]="true"></loader>
+ <loader [display]="isLoading" size="large" [relative]="false"></loader>
<div class="table-header">
<div class="table-cell col1">Property Name</div>
<div class="table-cell col2">Type</div>
@@ -7,18 +7,18 @@
<div class="table-cell valueCol">Value</div>
</div>
<div class="table-body">
- <div class="no-data" *ngIf="!feInstancesNames">No data to display</div>
+ <div class="no-data" *ngIf="!fePropertiesMap || !(fePropertiesMap | keys).length">No data to display</div>
- <div *ngFor="let instanceName of feInstancesNames; trackBy:instanceName">
- <div class="table-rows-header">{{instanceName | contentAfterLastDot}}</div>
+ <ng-container *ngFor="let instanceId of fePropertiesMap | keys; trackBy:instanceId">
+ <div class="table-rows-header white-sub-header">{{feInstanceNamesMap[instanceId]}}</div>
<div class="table-row"
- *ngFor="let property of fePropertiesMap[instanceName] | searchFilter:'name':searchTerm; trackBy:property?.name"
- (click)="onClickPropertyRow(property, instanceName, $event)"
+ *ngFor="let property of fePropertiesMap[instanceId] | searchFilter:'name':searchTerm; trackBy:property?.name"
+ (click)="onClickPropertyRow(property, instanceId, $event)"
[ngClass]="{'selected': selectedPropertyId && selectedPropertyId === property.name }">
- <div class="table-cell col1" [ngClass]="{'filtered':property.name === propertyNameSearchText}">
- <div class="property-name cut-inner-long-text">
+ <div class="table-cell col1" [ngClass]="{'filtered':property.name === propertyNameSearchText}" [class.round-checkbox]="property.isDeclared">
+ <div class="property-name">
<checkbox [(checked)]="property.isSelected"
[disabled]="property.isDisabled || property.isDeclared || readonly"
(checkedChange)="propertyChecked(property)"></checkbox>
@@ -26,15 +26,18 @@
<span>{{property.name}}</span>
</div>
</div>
- <span *ngIf="property.description" class="property-description-icon sprite-new show-desc" tooltip="{{property.description}}"></span>
+ <span *ngIf="property.description" class="property-description-icon sprite-new show-desc" tooltip="{{property.description}}" tooltipDelay="0"></span>
</div>
<div class="table-cell col2">
<div class="inner-cell-div" tooltip="{{property.type | contentAfterLastDot}}">
<span>{{property.type | contentAfterLastDot}}</span>
</div>
</div>
- <div class="table-cell col3">{{property.schema && property.schema.property && property.schema.property.type ? (property.schema.property.type
- | contentAfterLastDot) : ''}}</div>
+ <div class="table-cell col3">
+ <div *ngIf="property.schema && property.schema.property && property.schema.property.type" class="inner-cell-div" tooltip="{{property.schema.property.type | contentAfterLastDot}}">
+ <span>{{property.schema.property.type | contentAfterLastDot}}</span>
+ </div>
+ </div>
<div class="table-cell valueCol">
<!-- [ngClass]="{'filtered':property.name === propertyNameSearchText}" (selectProperty)="propertySelected(property, $event, flatProperty.propertiesName)" [propType]="property.type" [propSchema]="property.schema" [propKey]="" [propValue]="property.value"-->
<dynamic-property
@@ -46,7 +49,7 @@
[readonly]="readonly"
(valueChanged)="propValueChanged(property);"
(expandChild)="property.updateExpandedChildPropertyId($event)"
- (clickOnPropertyRow)="onClickPropertyInnerRow($event, instanceName)"
+ (clickOnPropertyRow)="onClickPropertyInnerRow($event, instanceId)"
(checkProperty)="propertyChecked(property, $event)"
>
</dynamic-property>
@@ -54,7 +57,7 @@
</div>
</div>
- </div>
+ </ng-container>
</div>
</div>
diff --git a/catalog-ui/src/app/ng2/components/properties-table/properties-table.component.less b/catalog-ui/src/app/ng2/components/properties-table/properties-table.component.less
index bb019a768b..9ede84faff 100644
--- a/catalog-ui/src/app/ng2/components/properties-table/properties-table.component.less
+++ b/catalog-ui/src/app/ng2/components/properties-table/properties-table.component.less
@@ -1,5 +1,6 @@
-
@import './../../../../assets/styles/variables.less';
+@import '../../../../assets/styles/sprite';
+@smaller-screen: ~"only screen and (max-width: 1580px)";
:host /deep/ input { width:100%;}
@@ -10,40 +11,31 @@
height:100%;
text-align:left;
+
.inner-cell-div{
max-width: 100%;
text-overflow: ellipsis;
overflow: hidden;
height: 20px;
}
-
- .table-header, .table-row {
+
+ .table-header {
display: flex;
flex-direction:row;
flex: 0 0 auto;
- }
-
- .table-header {
font-weight:bold;
border-top: #d2d2d2 solid 1px;
- background-color: #eaeaea;
+ background-color: #f2f2f2;
- .valueCol {
- justify-content: flex-start;
- padding: 5px;
+ .table-cell {
+ color:#191919;
+ font-size:13px;
}
}
.table-rows-header {
- font-size:16px;
- flex:1;
border: #d2d2d2 solid 1px;
border-top:none;
- padding: 5px;
- text-overflow: ellipsis;
- white-space: nowrap;
- overflow: hidden;
- background-color: @tlv_color_v;
}
.table-body {
@@ -63,49 +55,52 @@
background-color: #e6f6fb;
color: #009fdb;
}
- }
+ .table-row {
+ display: flex;
+ flex-direction:row;
+ flex: 0 0 auto;
+ &:hover:not(.selected){
+ background-color:#f8f8f8; cursor:pointer;
+ }
- .table-row {
- &:hover {
- background-color:#f8f8f8; cursor:pointer;
- }
+ .selected-row {
+ background-color:#e6f6fb;
+ }
- &:last-child {
- flex: 1 0 auto;
- }
- .selected-row {
- background-color:#e6f6fb;
+ .table-cell.valueCol {
+ padding:0px;
+
+ }
}
}
- .cut-inner-long-text{
- text-overflow: ellipsis;
- overflow: hidden;
- }
- .table-cell {
+ .table-cell {
font-size:13px;
flex:1;
border: #d2d2d2 solid 1px;
border-right:none;
border-top:none;
- padding: 5px;
+ padding:10px;
text-overflow: ellipsis;
white-space: nowrap;
+ overflow:hidden;
display: flex;
+ min-height:40px;
&:last-child {
border-right:#d2d2d2 solid 1px;
}
&.col1 {
- flex: 0 0 300px;
+ flex: 1 0 210px;
max-width:300px;
display: flex;
justify-content: space-between;
+ @media @smaller-screen { flex: 0 0 25%;}
.property-name {
flex: 1;
display: flex;
- max-width: 270px;
+ max-width: 90%;
}
.property-description-icon {
@@ -114,27 +109,44 @@
margin-left: 5px;
flex: 0 0 auto;
}
-
- /deep/ .checkbox-container {
- margin-right: 5px;
- }
}
&.col2 {
flex: 0 0 150px;
max-width:150px;
+ @media @smaller-screen { flex: 0 0 20%;}
}
&.col3 {
flex:0 0 120px;
max-width:120px;
+ @media @smaller-screen { flex: 0 0 15%;}
}
&.valueCol {
- flex: 1;
- min-width: 350px;
+ flex: 2 0 300px;
display: flex;
- justify-content: flex-end;
- padding: 0px;
+ @media @smaller-screen { flex: 1 0 40%;}
+ }
+
+
+ /deep/ .checkbox-container {
+ margin-right: 10px;
+ }
+
+ /deep/ &.round-checkbox {
+ .checkbox-container input[type=checkbox].checkbox-hidden {
+ &:checked ~ .checkbox-icon::before {
+ .sprite-new;
+ .round-checked-icon;
+ }
+ &[disabled] ~ .checkbox-icon::before {
+ .sprite-new;
+ .round-checked-icon.disabled;
+ background-color:inherit;
+ border:none;
+ //animation: addDisabledCheck 4s linear;
+ }
+ }
}
}
@@ -143,9 +155,12 @@
background-color: yellow;
}
}
-
+
dynamic-property {
width:100%;
+ &:last-child /deep/ .dynamic-property-row {
+ border-bottom:none;
+ }
}
}
diff --git a/catalog-ui/src/app/ng2/components/properties-table/properties-table.component.ts b/catalog-ui/src/app/ng2/components/properties-table/properties-table.component.ts
index 58214ca16b..afb7189348 100644
--- a/catalog-ui/src/app/ng2/components/properties-table/properties-table.component.ts
+++ b/catalog-ui/src/app/ng2/components/properties-table/properties-table.component.ts
@@ -1,5 +1,24 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * SDC
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+
import { Component, Input, Output, EventEmitter, SimpleChanges, ViewChild, ElementRef } from "@angular/core";
-import { trigger, state, style, transition, animate} from '@angular/core';
import {PropertyFEModel, DerivedFEProperty, DerivedPropertyType, InstanceFePropertiesMap} from "app/models";
import {PropertiesService} from "../../services/properties.service";
import { DynamicElementComponent } from 'app/ng2/components/dynamic-element/dynamic-element.component';
@@ -8,12 +27,12 @@ import { KeysPipe } from 'app/ng2/pipes/keys.pipe';
@Component({
selector: 'properties-table',
templateUrl: './properties-table.component.html',
- styleUrls: ['./properties-table.component.less'],
- animations: [trigger('fadeIn', [transition(':enter', [style({ opacity: '0' }), animate('.3s ease-out', style({ opacity: '1' }))]) ])]
+ styleUrls: ['./properties-table.component.less']
})
export class PropertiesTableComponent {
@Input() fePropertiesMap: InstanceFePropertiesMap;
+ @Input() feInstanceNamesMap: Map<string, string>;
@Input() selectedPropertyId: string;
@Input() displayDeleteButton: boolean;
@Input() propertyNameSearchText:string;
@@ -26,23 +45,10 @@ export class PropertiesTableComponent {
@Output() updateCheckedPropertyCount: EventEmitter<boolean> = new EventEmitter<boolean>();
//@Output() selectInstanceRow: EventEmitter<string> = new EventEmitter<string>();
- feInstancesNames: Array<string>;
constructor ( private propertiesService:PropertiesService ){
}
- /**
- * Update feInstancesNames when fePropertiesMap: InstanceFePropertiesMap change (after getting response from server)
- */
- ngOnChanges(changes: SimpleChanges) {
- if (changes['fePropertiesMap']) {
- if (changes['fePropertiesMap'].currentValue) {
- let keysPipe = new KeysPipe();
- let fiteredArr = keysPipe.transform(changes['fePropertiesMap'].currentValue,[]);
- this.feInstancesNames = fiteredArr;
- }
- }
- }
propValueChanged = (property) => {
!property.isDeclared && this.valueChanged.emit(property);
@@ -65,7 +71,6 @@ export class PropertiesTableComponent {
propertyChecked = (prop: PropertyFEModel, childPropName?: string) => {
let isChecked: boolean = (!childPropName)? prop.isSelected : prop.flattenedChildren.find(prop => prop.propertiesName == childPropName).isSelected;
- console.log(isChecked, childPropName, prop);
if (!isChecked) {
this.propertiesService.undoDisableRelatedProperties(prop, childPropName);
} else {
diff --git a/catalog-ui/src/app/ng2/components/tooltip/tooltip-content.component.ts b/catalog-ui/src/app/ng2/components/tooltip/tooltip-content.component.ts
index 6e3e8065bb..4dcb64c499 100644
--- a/catalog-ui/src/app/ng2/components/tooltip/tooltip-content.component.ts
+++ b/catalog-ui/src/app/ng2/components/tooltip/tooltip-content.component.ts
@@ -1,3 +1,23 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * SDC
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+
import {Component, AfterViewInit, Input, ElementRef, ChangeDetectorRef} from "@angular/core";
@Component
diff --git a/catalog-ui/src/app/ng2/components/tooltip/tooltip.component.ts b/catalog-ui/src/app/ng2/components/tooltip/tooltip.component.ts
index e98b69003e..79d35c6e0e 100644
--- a/catalog-ui/src/app/ng2/components/tooltip/tooltip.component.ts
+++ b/catalog-ui/src/app/ng2/components/tooltip/tooltip.component.ts
@@ -1,3 +1,23 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * SDC
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+
import {
Directive, ComponentRef, ViewContainerRef, ComponentFactoryResolver, Input, HostListener
} from "@angular/core";
@@ -14,6 +34,7 @@ export class TooltipComponent {
private tooltip: ComponentRef<TooltipContentComponent>;
private visible: boolean;
+ private delayInProgress: boolean = false;
// -------------------------------------------------------------------------
// Constructor
@@ -31,6 +52,7 @@ export class TooltipComponent {
@Input() tooltipDisabled: boolean;
@Input() tooltipAnimation: boolean = true;
@Input() tooltipPlacement: "top"|"bottom"|"left"|"right" = "bottom";
+ @Input() tooltipDelay: number = 1500;
// -------------------------------------------------------------------------
// Public Methods
@@ -41,6 +63,11 @@ export class TooltipComponent {
if(this.tooltipDisabled || this.visible || this.content === "") {
return;
}
+ if (this.tooltipDelay && !this.delayInProgress) {
+ this.delayInProgress = true;
+ setTimeout(() => { this.delayInProgress && this.show() }, this.tooltipDelay);
+ return;
+ }
this.visible = true;
if (typeof this.content === "string") {
@@ -65,6 +92,7 @@ export class TooltipComponent {
@HostListener("mouseleave")
hide(): void {
+ this.delayInProgress = false;
if (!this.visible) {
return;
}
diff --git a/catalog-ui/src/app/ng2/components/tooltip/tooltip.module.ts b/catalog-ui/src/app/ng2/components/tooltip/tooltip.module.ts
index 69976da6af..84a3987081 100644
--- a/catalog-ui/src/app/ng2/components/tooltip/tooltip.module.ts
+++ b/catalog-ui/src/app/ng2/components/tooltip/tooltip.module.ts
@@ -1,3 +1,23 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * SDC
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+
import {NgModule} from "@angular/core";
import {TooltipContentComponent} from "./tooltip-content.component";
import {TooltipComponent} from "./tooltip.component";