summaryrefslogtreecommitdiffstats
path: root/catalog-ui/src/app/ng2/pages
diff options
context:
space:
mode:
authormiriame <miriam.eini@amdocs.com>2019-03-04 13:49:15 +0200
committerAvi Gaffa <avi.gaffa@amdocs.com>2019-03-05 06:57:57 +0000
commit41ee9cb182dd5f730c8eb21282004ce6ee4e2927 (patch)
treed92483e28aa1997ec207e6d7d9734b4464fef3ad /catalog-ui/src/app/ng2/pages
parent11e9d33f2f50ad3990905fba184b7c10d255070a (diff)
Add 'Req & Cap' screen for VF/PNF/Service - UI
Issue-ID: SDC-2142 Change-Id: I23a2de18862e18389f801cbec3e452d7094df8e9 Signed-off-by: miriame <miriam.eini@amdocs.com>
Diffstat (limited to 'catalog-ui/src/app/ng2/pages')
-rw-r--r--catalog-ui/src/app/ng2/pages/req-and-capabilities-editor/capabilities-editor/capabilities-editor.component.html92
-rw-r--r--catalog-ui/src/app/ng2/pages/req-and-capabilities-editor/capabilities-editor/capabilities-editor.component.less38
-rw-r--r--catalog-ui/src/app/ng2/pages/req-and-capabilities-editor/capabilities-editor/capabilities-editor.component.ts73
-rw-r--r--catalog-ui/src/app/ng2/pages/req-and-capabilities-editor/capabilities-editor/capabilities-editor.module.ts28
-rw-r--r--catalog-ui/src/app/ng2/pages/req-and-capabilities-editor/requirements-editor/requirements-editor.component.html88
-rw-r--r--catalog-ui/src/app/ng2/pages/req-and-capabilities-editor/requirements-editor/requirements-editor.component.less35
-rw-r--r--catalog-ui/src/app/ng2/pages/req-and-capabilities-editor/requirements-editor/requirements-editor.component.ts88
-rw-r--r--catalog-ui/src/app/ng2/pages/req-and-capabilities-editor/requirements-editor/requirements-editor.module.ts26
8 files changed, 468 insertions, 0 deletions
diff --git a/catalog-ui/src/app/ng2/pages/req-and-capabilities-editor/capabilities-editor/capabilities-editor.component.html b/catalog-ui/src/app/ng2/pages/req-and-capabilities-editor/capabilities-editor/capabilities-editor.component.html
new file mode 100644
index 0000000000..c0bfc8a1a5
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/req-and-capabilities-editor/capabilities-editor/capabilities-editor.component.html
@@ -0,0 +1,92 @@
+<div class="capability-editor">
+ <form class="w-sdc-form">
+ <div class="i-sdc-form-content-capability-content">
+ <div class="content-row">
+ <div class="i-sdc-form-item">
+ <sdc-input
+ label="{{ 'CAP_NAME' | translate}}"
+ required="true"
+ class="i-sdc-form-input"
+ testId="capName"
+ [disabled]="isReadonly"
+ [(value)]="capabilityData.name"
+ (valueChange)="validityChanged()">
+ </sdc-input>
+ </div>
+ </div>
+
+ <div class="group-with-border">
+ <div class="content-row i-sdc-form-item">
+ <sdc-dropdown
+ label="{{ 'CAP_TYPE' | translate}}"
+ required="true"
+ class="i-sdc-form-select"
+ testId="capType"
+ [disabled]="isReadonly"
+ [options]="capabilityTypesMappedList"
+ selectedOption="{{capabilityData.type}}"
+ (changed)="onSelectCapabilityType($event)">
+ </sdc-dropdown>
+ </div>
+ <div class="content-row i-sdc-form-item">
+ <label class="i-sdc-form-label"> {{ 'CAP_DESCRIPTION' | translate}} </label>
+ <textarea
+ rows="3"
+ class="i-sdc-form-input description"
+ data-tests-id="capDesc"
+ disabled
+ value="{{capabilityData.description}}">
+ </textarea>
+ </div>
+ <div class="content-row i-sdc-form-item">
+ <label class="i-sdc-form-label valid-source-label"> {{ 'CAP_VALID_SOURCE' | translate}} </label>
+ <textarea
+ rows="2"
+ class="i-sdc-form-input"
+ data-tests-id="capValidSrc"
+ disabled
+ value="{{capabilityData.validSourceTypes}}">
+ </textarea>
+ </div>
+ </div>
+
+ <label class="i-sdc-form-label occurrences-label"> {{ 'REQ_CAP_OCCURRENCES' | translate}} </label>
+ <div class="content-row occurrences-section">
+ <div class="min-occurrences-value">
+ <sdc-input
+ label="{{ 'REQ_CAP_OCCURRENCES_MIN' | translate}}"
+ class="i-sdc-form-input"
+ testId="capOccurrencesMin"
+ [disabled]="isReadonly"
+ [(value)]="capabilityData.minOccurrences"
+ (valueChange)="validityChanged()"
+ type="number">
+ </sdc-input>
+ </div>
+ <div class="sdc-input">
+ <label class="sdc-input__label"> {{ 'REQ_CAP_OCCURRENCES_MAX' | translate}} </label>
+ <div class="max-occurrences-value">
+ <sdc-checkbox
+ class="checkbox-label unbounded-value"
+ testId="capOccurrencesMaxUnbounded"
+ label="{{translatedUnboundTxt.toLowerCase()}}"
+ (checkedChange)="onUnboundedChanged()"
+ [checked]="isUnboundedChecked"
+ [disabled]="isReadonly">
+ </sdc-checkbox>
+
+ <sdc-input
+ *ngIf="!isUnboundedChecked"
+ class="i-sdc-form-input"
+ testId="capOccurrencesMax"
+ [disabled]="isReadonly"
+ [(value)]="capabilityData.maxOccurrences"
+ (valueChange)="validityChanged()"
+ type="number">
+ </sdc-input>
+ </div>
+ </div>
+ </div>
+ </div>
+ </form>
+</div> \ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/pages/req-and-capabilities-editor/capabilities-editor/capabilities-editor.component.less b/catalog-ui/src/app/ng2/pages/req-and-capabilities-editor/capabilities-editor/capabilities-editor.component.less
new file mode 100644
index 0000000000..915628117e
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/req-and-capabilities-editor/capabilities-editor/capabilities-editor.component.less
@@ -0,0 +1,38 @@
+@import '../../../../../assets/styles/variables.less';
+
+.capability-editor {
+ .i-sdc-form-content-capability-content {
+ padding: 10px 25px;
+ .group-with-border {
+ margin: 25px 0;
+ padding: 15px 0;
+ border-top: 1px solid @tlv_color_u;
+ border-bottom: 1px solid @tlv_color_u;
+ .content-row:not(:last-of-type) {
+ padding-bottom: 13px;
+ }
+ }
+
+ .occurrences-label {
+ font-family: @font-opensans-bold;
+ margin-bottom: 19px;
+ }
+ .occurrences-section, /deep/ .max-occurrences-value {
+ display: flex;
+ .min-occurrences-value {
+ padding-right: 30px;
+ }
+ .unbounded-value {
+ padding-top: 7px;
+ padding-right: 20px;
+ .sdc-checkbox__label {
+ text-transform: capitalize;
+ }
+ }
+ }
+ textarea {
+ min-height: unset;
+ height: unset;
+ }
+ }
+} \ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/pages/req-and-capabilities-editor/capabilities-editor/capabilities-editor.component.ts b/catalog-ui/src/app/ng2/pages/req-and-capabilities-editor/capabilities-editor/capabilities-editor.component.ts
new file mode 100644
index 0000000000..82e2e464cc
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/req-and-capabilities-editor/capabilities-editor/capabilities-editor.component.ts
@@ -0,0 +1,73 @@
+import {Component} from '@angular/core';
+import {ServiceServiceNg2} from "app/ng2/services/component-services/service.service";
+import {Capability, CapabilityTypeModel} from 'app/models';
+import {DropdownValue} from "app/ng2/components/ui/form-components/dropdown/ui-element-dropdown.component";
+import {TranslateService} from 'app/ng2/shared/translator/translate.service';
+
+@Component({
+ selector: 'capabilities-editor',
+ templateUrl: './capabilities-editor.component.html',
+ styleUrls: ['./capabilities-editor.component.less'],
+ providers: [ServiceServiceNg2]
+})
+
+export class CapabilitiesEditorComponent {
+ input: {
+ capability: Capability,
+ capabilityTypesList: Array<CapabilityTypeModel>,
+ isReadonly: boolean;
+ validityChangedCallback: Function;
+ };
+ capabilityData: Capability;
+ capabilityTypesMappedList: Array<DropdownValue>;
+ isUnboundedChecked: boolean;
+ isReadonly: boolean;
+ translatedUnboundTxt: string;
+
+ constructor(private translateService: TranslateService) {
+ }
+
+ ngOnInit() {
+ this.capabilityData = new Capability(this.input.capability);
+ this.translatedUnboundTxt = '';
+ this.capabilityData.minOccurrences = this.capabilityData.minOccurrences || 0;
+ this.translateService.languageChangedObservable.subscribe(lang => {
+ this.translatedUnboundTxt = this.translateService.translate('REQ_CAP_OCCURRENCES_UNBOUNDED');
+ this.capabilityData.maxOccurrences = this.capabilityData.maxOccurrences || this.translatedUnboundTxt;
+ this.isUnboundedChecked = this.capabilityData.maxOccurrences === this.translatedUnboundTxt;
+ });
+ this.capabilityTypesMappedList = _.map(this.input.capabilityTypesList, capType => new DropdownValue(capType.toscaPresentation.type, capType.toscaPresentation.type));
+ this.isReadonly = this.input.isReadonly;
+ this.validityChanged();
+ }
+
+ onUnboundedChanged() {
+ this.isUnboundedChecked = !this.isUnboundedChecked;
+ this.capabilityData.maxOccurrences = this.isUnboundedChecked ? this.translatedUnboundTxt : null;
+ this.validityChanged();
+ }
+
+ checkFormValidForSubmit() {
+ return this.capabilityData.name && this.capabilityData.name.length &&
+ this.capabilityData.type && this.capabilityData.type.length && !_.isEqual(this.capabilityData.minOccurrences, "") && this.capabilityData.minOccurrences >= 0 &&
+ (
+ this.isUnboundedChecked ||
+ (this.capabilityData.maxOccurrences && (this.capabilityData.minOccurrences <= parseInt(this.capabilityData.maxOccurrences)))
+ );
+ }
+
+ onSelectCapabilityType(selectedCapType: DropdownValue) {
+ this.capabilityData.type = selectedCapType && selectedCapType.value;
+ if (selectedCapType && selectedCapType.value) {
+ let selectedCapabilityTypeObj: CapabilityTypeModel = this.input.capabilityTypesList.find(capType => capType.toscaPresentation.type === selectedCapType.value);
+ this.capabilityData.description = selectedCapabilityTypeObj.toscaPresentation.description;
+ this.capabilityData.validSourceTypes = selectedCapabilityTypeObj.toscaPresentation.validTargetTypes;
+ }
+ this.validityChanged();
+ }
+
+ validityChanged = () => {
+ let validState = this.checkFormValidForSubmit();
+ this.input.validityChangedCallback(validState);
+ }
+} \ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/pages/req-and-capabilities-editor/capabilities-editor/capabilities-editor.module.ts b/catalog-ui/src/app/ng2/pages/req-and-capabilities-editor/capabilities-editor/capabilities-editor.module.ts
new file mode 100644
index 0000000000..1e767a5690
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/req-and-capabilities-editor/capabilities-editor/capabilities-editor.module.ts
@@ -0,0 +1,28 @@
+import {NgModule} from "@angular/core";
+import {CommonModule} from "@angular/common";
+import {CapabilitiesEditorComponent} from "./capabilities-editor.component";
+import {FormsModule} from "@angular/forms";
+import {FormElementsModule} from "app/ng2/components/ui/form-components/form-elements.module";
+import {UiElementsModule} from "app/ng2/components/ui/ui-elements.module";
+import {TranslateModule} from 'app/ng2/shared/translator/translate.module';
+import {SdcUiComponentsModule} from "sdc-ui/lib/angular/index";
+
+@NgModule({
+ declarations: [
+ CapabilitiesEditorComponent
+ ],
+ imports: [CommonModule,
+ FormsModule,
+ FormElementsModule,
+ UiElementsModule,
+ TranslateModule,
+ SdcUiComponentsModule
+ ],
+ exports: [],
+ entryComponents: [
+ CapabilitiesEditorComponent
+ ],
+ providers: []
+})
+export class CapabilitiesEditorModule {
+} \ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/pages/req-and-capabilities-editor/requirements-editor/requirements-editor.component.html b/catalog-ui/src/app/ng2/pages/req-and-capabilities-editor/requirements-editor/requirements-editor.component.html
new file mode 100644
index 0000000000..0fe326efb9
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/req-and-capabilities-editor/requirements-editor/requirements-editor.component.html
@@ -0,0 +1,88 @@
+<div class="requirement-editor">
+ <form class="w-sdc-form">
+ <div class="i-sdc-form-content-requirement-content">
+ <div class="content-row">
+ <div class="i-sdc-form-item">
+ <sdc-input
+ label="{{ 'REQ_NAME' | translate}}"
+ required="true"
+ testId="reqName"
+ [disabled]="isReadonly"
+ [(value)]="requirementData.name"
+ (valueChange)="validityChanged()">
+ </sdc-input>
+ </div>
+ </div>
+
+ <div class="group-with-border">
+ <div class="content-row i-sdc-form-item">
+ <sdc-dropdown
+ label="{{ 'REQ_RELATED_CAPABILITY' | translate}}"
+ testId="reqRelatedCapability"
+ required="true"
+ [disabled]="isReadonly"
+ [options]="capabilityTypesMappedList"
+ selectedOption="{{requirementData.capability}}"
+ (changed)="onCapabilityChanged($event)">
+ </sdc-dropdown>
+ </div>
+ <div class="content-row i-sdc-form-item">
+ <sdc-dropdown
+ label="{{ 'REQ_NODE' | translate}}"
+ testId="reqNode"
+ [disabled]="isReadonly"
+ [options]="nodeTypesMappedList"
+ selectedOption="{{requirementData.node}}"
+ (changed)="onNodeChanged($event)">
+ </sdc-dropdown>
+ </div>
+ <div class="content-row i-sdc-form-item">
+ <sdc-dropdown
+ label="{{ 'REQ_RELATIONSHIP' | translate}}"
+ testId="reqRelationship"
+ [disabled]="isReadonly"
+ [options]="relationshipTypesMappedList"
+ selectedOption="{{requirementData.relationship}}"
+ (changed)="onRelationshipChanged($event)">
+ </sdc-dropdown>
+ </div>
+ </div>
+
+ <label class="i-sdc-form-label occurrences-label"> {{ 'REQ_CAP_OCCURRENCES' | translate}} </label>
+ <div class="content-row occurrences-section">
+ <div class="min-occurrences-value">
+ <sdc-input
+ label="{{ 'REQ_CAP_OCCURRENCES_MIN' | translate}}"
+ testId="reqOccurrencesMin"
+ [disabled]="isReadonly"
+ [(value)]="requirementData.minOccurrences"
+ (valueChange)="validityChanged()"
+ type="number">
+ </sdc-input>
+ </div>
+ <div class="sdc-input">
+ <label class="sdc-input__label"> {{ 'REQ_CAP_OCCURRENCES_MAX' | translate}} </label>
+ <div class="max-occurrences-value">
+ <sdc-checkbox
+ class="checkbox-label unbounded-value"
+ testId="reqOccurrencesMaxUnbounded"
+ label="{{translatedUnboundTxt.toLowerCase()}}"
+ (checkedChange)="onUnboundedChanged()"
+ [checked]="isUnboundedChecked"
+ [disabled]="isReadonly">
+ </sdc-checkbox>
+ <sdc-input
+ *ngIf="!isUnboundedChecked"
+ testId="reqOccurrencesMax"
+ [disabled]="isReadonly"
+ [(value)]="requirementData.maxOccurrences"
+ (valueChange)="validityChanged()"
+ type="number">
+ </sdc-input>
+ </div>
+
+ </div>
+ </div>
+ </div>
+ </form>
+</div> \ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/pages/req-and-capabilities-editor/requirements-editor/requirements-editor.component.less b/catalog-ui/src/app/ng2/pages/req-and-capabilities-editor/requirements-editor/requirements-editor.component.less
new file mode 100644
index 0000000000..f0ae3bf3ac
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/req-and-capabilities-editor/requirements-editor/requirements-editor.component.less
@@ -0,0 +1,35 @@
+@import '../../../../../assets/styles/variables.less';
+
+.requirement-editor {
+ .i-sdc-form-content-requirement-content {
+ padding: 10px 25px;
+
+ .group-with-border {
+ margin: 25px 0;
+ padding: 15px 0;
+ border-top: 1px solid @tlv_color_u;
+ border-bottom: 1px solid @tlv_color_u;
+ .content-row:not(:last-of-type) {
+ padding-bottom: 13px;
+ }
+ }
+
+ .occurrences-label {
+ font-family: @font-opensans-bold;
+ margin-bottom: 19px;
+ }
+ .occurrences-section, /deep/ .max-occurrences-value {
+ display: flex;
+ .min-occurrences-value {
+ padding-right: 30px;
+ }
+ .unbounded-value {
+ padding-top: 7px;
+ padding-right: 20px;
+ .sdc-checkbox__label {
+ text-transform: capitalize;
+ }
+ }
+ }
+ }
+} \ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/pages/req-and-capabilities-editor/requirements-editor/requirements-editor.component.ts b/catalog-ui/src/app/ng2/pages/req-and-capabilities-editor/requirements-editor/requirements-editor.component.ts
new file mode 100644
index 0000000000..464b581997
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/req-and-capabilities-editor/requirements-editor/requirements-editor.component.ts
@@ -0,0 +1,88 @@
+import {Component} from '@angular/core';
+import {ServiceServiceNg2} from "app/ng2/services/component-services/service.service";
+import {Requirement, RelationshipTypeModel, NodeTypeModel, CapabilityTypeModel} from 'app/models';
+import {TranslateService} from 'app/ng2/shared/translator/translate.service';
+import {DropdownValue} from "app/ng2/components/ui/form-components/dropdown/ui-element-dropdown.component";
+
+@Component({
+ selector: 'requirements-editor',
+ templateUrl: 'requirements-editor.component.html',
+ styleUrls: ['requirements-editor.component.less'],
+ providers: [ServiceServiceNg2, TranslateService]
+})
+
+export class RequirementsEditorComponent {
+
+ input: {
+ requirement: Requirement,
+ relationshipTypesList: Array<RelationshipTypeModel>;
+ nodeTypesList: Array<NodeTypeModel>;
+ capabilityTypesList: Array<CapabilityTypeModel>;
+ isReadonly: boolean;
+ validityChangedCallback: Function;
+ };
+ requirementData: Requirement;
+ capabilityTypesMappedList: Array<DropdownValue>;
+ relationshipTypesMappedList: Array<DropdownValue>;
+ nodeTypesMappedList: Array<DropdownValue>;
+ isUnboundedChecked: boolean;
+ isReadonly: boolean;
+ translatedUnboundTxt: string;
+
+ constructor(private translateService: TranslateService) {
+ }
+
+ ngOnInit() {
+ this.requirementData = new Requirement(this.input.requirement);
+ this.requirementData.minOccurrences = this.requirementData.minOccurrences || 0;
+ this.translatedUnboundTxt = '';
+ this.capabilityTypesMappedList = _.map(this.input.capabilityTypesList, capType => new DropdownValue(capType.toscaPresentation.type, capType.toscaPresentation.type));
+ this.relationshipTypesMappedList = _.map(this.input.relationshipTypesList, rType => new DropdownValue(rType.toscaPresentation.type, rType.toscaPresentation.type));
+ this.nodeTypesMappedList = _.map(this.input.nodeTypesList, nodeType => {
+ return new DropdownValue(
+ nodeType.componentMetadataDefinition.componentMetadataDataDefinition.toscaResourceName,
+ nodeType.componentMetadataDefinition.componentMetadataDataDefinition.toscaResourceName)
+ });
+ this.translateService.languageChangedObservable.subscribe(lang => {
+ this.translatedUnboundTxt = this.translateService.translate('REQ_CAP_OCCURRENCES_UNBOUNDED');
+ this.requirementData.maxOccurrences = this.requirementData.maxOccurrences || this.translatedUnboundTxt;
+ this.isUnboundedChecked = this.requirementData.maxOccurrences === this.translatedUnboundTxt;
+ });
+ this.isReadonly = this.input.isReadonly;
+ this.validityChanged();
+ }
+
+ onUnboundedChanged() {
+ this.isUnboundedChecked = !this.isUnboundedChecked;
+ this.requirementData.maxOccurrences = this.isUnboundedChecked ? this.translatedUnboundTxt : null;
+ this.validityChanged();
+ }
+
+ onCapabilityChanged(selectedCapability: DropdownValue) {
+ this.requirementData.capability = selectedCapability && selectedCapability.value;
+ this.validityChanged();
+ }
+
+ onNodeChanged(selectedNode: DropdownValue) {
+ this.requirementData.node = selectedNode && selectedNode.value;
+ }
+
+ onRelationshipChanged(selectedRelationship: DropdownValue) {
+ this.requirementData.relationship = selectedRelationship && selectedRelationship.value;
+ }
+
+ checkFormValidForSubmit() {
+ return this.requirementData.name && this.requirementData.name.length &&
+ this.requirementData.capability && this.requirementData.capability.length && !_.isEqual(this.requirementData.minOccurrences, "") && this.requirementData.minOccurrences >= 0 &&
+ (
+ this.isUnboundedChecked ||
+ (this.requirementData.maxOccurrences && (this.requirementData.minOccurrences <= parseInt(this.requirementData.maxOccurrences)))
+ );
+ }
+
+ validityChanged = () => {
+ let validState = this.checkFormValidForSubmit();
+ this.input.validityChangedCallback(validState);
+ }
+
+} \ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/pages/req-and-capabilities-editor/requirements-editor/requirements-editor.module.ts b/catalog-ui/src/app/ng2/pages/req-and-capabilities-editor/requirements-editor/requirements-editor.module.ts
new file mode 100644
index 0000000000..1be8be51af
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/req-and-capabilities-editor/requirements-editor/requirements-editor.module.ts
@@ -0,0 +1,26 @@
+import {NgModule} from "@angular/core";
+import {CommonModule} from "@angular/common";
+import {RequirementsEditorComponent} from "./requirements-editor.component";
+import {FormsModule} from "@angular/forms";
+import {FormElementsModule} from "../../../components/ui/form-components/form-elements.module";
+import {TranslateModule} from 'app/ng2/shared/translator/translate.module';
+import {SdcUiComponentsModule} from "sdc-ui/lib/angular/index";
+
+@NgModule({
+ declarations: [
+ RequirementsEditorComponent
+ ],
+ imports: [CommonModule,
+ FormsModule,
+ FormElementsModule,
+ TranslateModule,
+ SdcUiComponentsModule
+ ],
+ exports: [],
+ entryComponents: [
+ RequirementsEditorComponent
+ ],
+ providers: []
+})
+export class RequirementsEditorModule {
+} \ No newline at end of file