Declare properties as policies

Change-Id: I54dc7b444e08117097c314cf5f51bd356ac5287d
Issue-ID: SDC-2240
Signed-off-by: talio <tali.orenbach@amdocs.com>

4 files changed, 358 insertions, 0 deletions

diff --git a/catalog-ui/src/app/ng2/components/logic/policies-table/policies-table.component.html b/catalog-ui/src/app/ng2/components/logic/policies-table/policies-table.component.html
new file mode 100644
index 0000000000..6106e13924
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/logic/policies-table/policies-table.component.html
@@ -0,0 +1,48 @@
+
+<div class="properties-table">
+    <loader [display]="isLoading" [size]="'large'" [relative]="true"></loader>
+    <div class="table-header">
+        <div class="table-cell col1" (click)="sort('name')">Property Name
+            <span *ngIf="sortBy === 'name'" class="table-header-sort-arrow" [ngClass]="{'down': reverse, 'up':!reverse}">
+            </span>
+        </div>
+        <div class="table-cell col3" (click)="sort('instanceUniqueId')">From Instance
+            <span *ngIf="sortBy === 'instanceUniqueId'" class="table-header-sort-arrow" [ngClass]="{'down': reverse, 'up':!reverse}">
+            </span>
+        </div>
+        <div class="table-cell col2" (click)="sort('type')">Type
+            <span *ngIf="sortBy === 'type'" class="table-header-sort-arrow" [ngClass]="{'down': reverse, 'up':!reverse}">
+            </span>
+        </div>
+    </div>
+    <div class="table-body">
+        <div class="no-data" *ngIf="!policies || !policies.length">No data to display</div>
+        <div>
+            <div class="table-row" *ngFor="let policy of policies">
+                <div class="table-cell col1">
+                    <div class="inner-cell-div" tooltips tooltip="{{policy.name}}">
+                        <span class="property-name">{{policy.name}}</span>
+                    </div>
+                </div>
+                <div class="table-cell col3">
+                    <div class="inner-cell-div" tooltips tooltip="{{instanceNamesMap[policy.instanceUniqueId]?.name}}">
+                        <span>{{instanceNamesMap[policy.instanceUniqueId]?.name}}</span>
+                    </div>
+                </div>
+                <div class="table-cell col2">
+                    <div class="inner-cell-div" tooltips tooltip="{{policy.type | contentAfterLastDot}}">
+                        <span>{{policy.type | contentAfterLastDot}}</span>
+                    </div>
+                </div>
+                <div class="table-cell valueCol policy-value-col">
+                    <div class="delete-button-container">
+                        <span *ngIf="policy.uniqueId && !readonly" class="sprite-new delete-btn" (click)="openDeleteModal(policy)" data-tests-id="delete-policy-button"></span>
+                    </div>
+                </div>
+
+            </div>
+        </div>
+    </div>
+</div>
+
+
diff --git a/catalog-ui/src/app/ng2/components/logic/policies-table/policies-table.component.less b/catalog-ui/src/app/ng2/components/logic/policies-table/policies-table.component.less
new file mode 100644
index 0000000000..57a69a3aa1
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/logic/policies-table/policies-table.component.less
@@ -0,0 +1,169 @@
+
+@import './../../../../../assets/styles/variables.less';
+
+:host /deep/ input { width:100%;}
+
+.properties-table {
+    display:flex;
+    flex-direction:column;
+    flex: 1;
+    height:100%;
+    text-align:left;
+
+    .inner-cell-div{
+        max-width: 100%;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        height: 20px;
+    }
+
+
+    .table-header {
+        font-weight:bold;
+        border-top: @main_color_o solid 1px;
+        background-color: @tlv_color_u;
+        color:@func_color_s;
+
+        .table-cell {
+            font-size: 13px;
+            .table-header-sort-arrow {
+                display: inline-block;
+                background-color: transparent;
+                border: none;
+                color: #AAA;
+                margin: 8px 0 0 5px;
+                &.up {
+                    border-left: 5px solid transparent;
+                    border-right: 5px solid transparent;
+                    border-bottom: 5px solid;
+                }
+                &.down {
+                    border-left: 5px solid transparent;
+                    border-right: 5px solid transparent;
+                    border-top: 5px solid;
+                }
+            }
+        }
+    }
+    .table-header, .table-row {
+        display: flex;
+        flex-direction:row;
+        flex: 0 0 auto;
+    }
+
+    .table-body {
+        display:flex;
+        flex-direction: column;
+        overflow-y:auto;
+        flex: 1;
+
+        .no-data {
+            border: @main_color_o solid 1px;
+            border-top:none;
+            text-align: center;
+            height: 100%;
+            padding: 20px;
+        }
+        /deep/.selected{
+            background-color: @tlv_color_v;
+            color: @main_color_a;
+        }
+    }
+
+    .table-row {
+        &:hover {
+             background-color:@tlv_color_t; cursor:pointer;
+        }
+
+        &:last-child {
+            flex: 1 0 auto;
+        }
+        .selected-row {
+            background-color:@tlv_color_v;
+        }
+    }
+
+     .table-cell {
+        font-size:13px;
+        flex:1;
+        border: @main_color_o solid 1px;
+        border-right:none;
+        border-top:none;
+        padding: 10px;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+
+
+        &:last-child {
+            border-right:@main_color_o solid 1px;
+        }
+        &.col1 {
+            flex: 1 0 130px;
+            max-width:130px;
+
+            justify-content: space-between;
+
+            .policy-name {
+                flex: 1;
+            }
+
+            //.policy-description-icon {
+            //    float: right;
+            //    margin-top: 4px;
+            //    margin-left: 5px;
+            //    flex: 0 0 auto;
+            //}
+        }
+        &.col2 {
+            flex: 0 0 140px;
+            max-width:140px;
+        }
+
+        &.col3 {
+            flex:0 0 120px;
+            max-width:120px;
+        }
+
+        &.valueCol {
+             .value-input {
+                flex: 1;
+                border: none;
+                background-color: inherit;
+
+                &:focus, &:active {
+                    border:none;
+                    outline:none;
+                }
+            }
+
+            .delete-btn {
+                flex: 0 0 auto;
+            }
+
+            .delete-button-container {
+                max-height: 24px;
+            }
+
+            &.inner-table-container {
+                padding: 0px;
+
+                .delete-button-container {
+                    padding: 0 8px 0 0 ;
+                }
+            }
+        }
+
+         &.input-value-col {
+             padding: 8px;
+         }
+
+
+    }
+
+    .filtered {
+        /deep/ .checkbox-label-content{
+            background-color: yellow;
+        }
+    }
+
+}
diff --git a/catalog-ui/src/app/ng2/components/logic/policies-table/policies-table.component.ts b/catalog-ui/src/app/ng2/components/logic/policies-table/policies-table.component.ts
new file mode 100644
index 0000000000..aa5f2420b3
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/logic/policies-table/policies-table.component.ts
@@ -0,0 +1,100 @@
+/*!
+ * Copyright © 2016-2018 European Support Limited
+ *
+ * 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.
+ */
+
+
+import { Component, Input, Output, EventEmitter } from "@angular/core";
+import { PolicyInstance } from "app/models";
+import { ModalService } from "../../../services/modal.service";
+import { InstanceFeDetails } from "app/models/instance-fe-details";
+import {TranslateService} from 'app/ng2/shared/translator/translate.service';
+
+@Component({
+    selector: 'policies-table',
+    templateUrl: 'policies-table.component.html',
+    styleUrls: ['policies-table.component.less'],
+})
+export class PoliciesTableComponent {
+
+    @Input() policies: Array<PolicyInstance>;
+    @Input() instanceNamesMap: Map<string, InstanceFeDetails>;
+    @Input() readonly: boolean;
+    @Input() isLoading: boolean;
+    @Output() deletePolicy: EventEmitter<any> = new EventEmitter<any>();
+
+    sortBy: String;
+    reverse: boolean;
+    selectedPolicyToDelete: PolicyInstance;
+    deleteMsgTitle: string;
+    deleteMsgBodyTxt: string;
+    modalDeleteBtn: string;
+    modalCancelBtn: string;
+
+    sort = (sortBy) => {
+        this.reverse = (this.sortBy === sortBy) ? !this.reverse : true;
+        let reverse = this.reverse ? 1 : -1;
+        this.sortBy = sortBy;
+        let instanceNameMapTemp = this.instanceNamesMap;
+        let itemIdx1Val = "";
+        let itemIdx2Val = "";
+        this.policies.sort(function (itemIdx1, itemIdx2) {
+            if (sortBy == 'instanceUniqueId') {
+                itemIdx1Val = (itemIdx1[sortBy] && instanceNameMapTemp[itemIdx1[sortBy]] !== undefined) ? instanceNameMapTemp[itemIdx1[sortBy]].name : "";
+                itemIdx2Val = (itemIdx2[sortBy] && instanceNameMapTemp[itemIdx2[sortBy]] !== undefined) ? instanceNameMapTemp[itemIdx2[sortBy]].name : "";
+            }
+            else {
+                itemIdx1Val = itemIdx1[sortBy];
+                itemIdx2Val = itemIdx2[sortBy];
+            }            
+            if (itemIdx1Val < itemIdx2Val) {
+                return -1 * reverse;
+            }
+            else if (itemIdx1Val > itemIdx2Val) {
+                return 1 * reverse;
+            }
+            else {
+                return 0;
+            }
+        });
+    };
+
+
+    constructor(private modalService: ModalService, private translateService: TranslateService) {
+    }
+
+    ngOnInit() {
+        this.translateService.languageChangedObservable.subscribe(lang => {
+            this.deleteMsgTitle = this.translateService.translate("DELETE_POLICY_TITLE");
+            this.modalDeleteBtn = this.translateService.translate("MODAL_DELETE");
+            this.modalCancelBtn = this.translateService.translate("MODAL_CANCEL");
+
+        });
+    }
+
+    onDeletePolicy = () => {
+        this.deletePolicy.emit(this.selectedPolicyToDelete);
+        this.modalService.closeCurrentModal();
+    };
+
+    openDeleteModal = (policy: PolicyInstance) => {
+        this.selectedPolicyToDelete = policy;
+        this.translateService.languageChangedObservable.subscribe(lang => {
+            this.deleteMsgBodyTxt = this.translateService.translate("DELETE_POLICY_MSG", {policyName: policy.name});
+            this.modalService.createActionModal(this.deleteMsgTitle, this.deleteMsgBodyTxt, this.modalDeleteBtn, this.onDeletePolicy, this.modalCancelBtn).instance.open();
+        });
+    }
+}
+
+
diff --git a/catalog-ui/src/app/ng2/components/logic/policies-table/policies-table.module.ts b/catalog-ui/src/app/ng2/components/logic/policies-table/policies-table.module.ts
new file mode 100644
index 0000000000..f780c62c0b
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/logic/policies-table/policies-table.module.ts
@@ -0,0 +1,41 @@
+/*!
+ * Copyright © 2016-2018 European Support Limited
+ *
+ * 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.
+ */
+
+import { NgModule } from "@angular/core";
+import {CommonModule} from "@angular/common";
+import {PoliciesTableComponent} from "./policies-table.component";
+import {TranslateModule} from 'app/ng2/shared/translator/translate.module';
+import {UiElementsModule} from "app/ng2/components/ui/ui-elements.module";
+import {GlobalPipesModule} from "../../../pipes/global-pipes.module";
+
+@NgModule({
+    declarations: [
+        PoliciesTableComponent
+    ],
+    imports: [
+        CommonModule,
+        GlobalPipesModule,
+        UiElementsModule,
+        TranslateModule
+    ],
+    exports: [PoliciesTableComponent],
+    entryComponents: [
+        PoliciesTableComponent
+    ],
+    providers: []
+})
+export class PoliciesTableModule {
+}
\ No newline at end of file