summaryrefslogtreecommitdiffstats
path: root/catalog-ui/src/app/ng2/pages/composition
diff options
context:
space:
mode:
Diffstat (limited to 'catalog-ui/src/app/ng2/pages/composition')
-rw-r--r--catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/properties-tab/properties-tab.component.html65
-rw-r--r--catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/properties-tab/properties-tab.component.less8
-rw-r--r--catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/properties-tab/properties-tab.component.ts68
3 files changed, 137 insertions, 4 deletions
diff --git a/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/properties-tab/properties-tab.component.html b/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/properties-tab/properties-tab.component.html
index 86c6fea1ef..358c910c2b 100644
--- a/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/properties-tab/properties-tab.component.html
+++ b/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/properties-tab/properties-tab.component.html
@@ -92,6 +92,69 @@
</sdc-accordion>
</ng-container>
</div>
- </div>
+
+ </div>
+ </content>
+</ng2-expand-collapse>
+
+<ng2-expand-collapse state="0">
+ <header sdc-tooltip tooltip-text="Occurrences">OCCURRENCES</header>
+ <content>
+ <div class="w-sdc-designer-sidebar-section">
+ <div *ngIf="isUnboundedChecked != null">
+ <ng-container>
+ <sdc-accordion [title]="component.name + ' Occurrences'" [arrow-direction]="'right'" [testId]="'Occurrences'" [css-class]="'occurrences-accordion'">
+ <div class="i-sdc-designer-sidebar-section-content-item">
+ <div class="i-sdc-designer-sidebar-section-content-item-property-and-attribute">
+ <checkbox [(checked)]="isOccurrencesEnabled" (change)="enableOccurrences()" [disabled]="isViewOnly"></checkbox>
+ <div>
+ <span class="i-sdc-designer-sidebar-section-content-item-property-and-attribute-label"
+ [ngClass]="{'hand enabled': !isViewOnly}">Enable Occurrences</span>
+ </div>
+ </div>
+ <div *ngIf="isOccurrencesEnabled" class="i-sdc-designer-sidebar-section-content-item-property-and-attribute">
+ <div class="sdc-input">
+ <span class="i-sdc-designer-sidebar-section-content-item-property-and-attribute-label">Min Occurrences</span>
+ <div class="min-occurrences-value">
+ <sdc-input
+ label=""
+ testId="reqOccurrencesMin"
+ [disabled]="isViewOnly"
+ [(value)]="component.minOccurrences"
+ type="number">
+ </sdc-input>
+ </div>
+ </div>
+ </div>
+ <div *ngIf="isOccurrencesEnabled" class="i-sdc-designer-sidebar-section-content-item-property-and-attribute">
+ <div class="sdc-input">
+ <span class="i-sdc-designer-sidebar-section-content-item-property-and-attribute-label">Max Occurrences</span>
+ <div class="max-occurrences-value">
+ <sdc-checkbox
+ class="checkbox-label unbounded-value"
+ testId="reqOccurrencesMaxUnbounded"
+ label="Unbounded"
+ (checkedChange)="onUnboundedChanged(component)"
+ [checked]="isUnboundedChecked"
+ [disabled]="isViewOnly">
+ </sdc-checkbox>
+ <sdc-input
+ *ngIf="!isUnboundedChecked"
+ testId="reqOccurrencesMax"
+ [disabled]="isViewOnly"
+ [(value)]="component.maxOccurrences"
+ type="number">
+ </sdc-input>
+ </div>
+ </div>
+ </div>
+ <div *ngIf="!isViewOnly && isOccurrencesEnabled" class="i-sdc-designer-sidebar-section-content-item-property-and-attribute">
+ <button class="tlv-btn blue" (click)="saveOccurrences()" [disabled]="!isOccurrencesFormValid(component)">Save</button>
+ </div>
+ </div>
+ </sdc-accordion>
+ </ng-container>
+ </div>
+ </div>
</content>
</ng2-expand-collapse>
diff --git a/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/properties-tab/properties-tab.component.less b/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/properties-tab/properties-tab.component.less
index 5cb0697da1..ac0d1707e7 100644
--- a/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/properties-tab/properties-tab.component.less
+++ b/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/properties-tab/properties-tab.component.less
@@ -21,6 +21,10 @@
flex: 0 0 auto;
align-self: center;
}
+
+ /deep/ .checkbox-container {
+ margin-right: 10px;
+ }
}
.i-sdc-designer-sidebar-section-content-item-property-and-attribute-label {
@@ -39,14 +43,12 @@
display: block;
}
-
-
/deep/ .expand-collapse-content {
max-height: max-content;
padding: 10px 0;
.sdc-accordion .sdc-accordion-header {
-
+
background-color: #e6f6fb;
border-left: solid #009fdb 4px;
box-shadow: 0 0px 3px -1px rgba(0, 0, 0, 0.3);
diff --git a/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/properties-tab/properties-tab.component.ts b/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/properties-tab/properties-tab.component.ts
index b4b8248ed0..99bd5e882d 100644
--- a/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/properties-tab/properties-tab.component.ts
+++ b/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/properties-tab/properties-tab.component.ts
@@ -4,6 +4,7 @@ import {
AttributeModel,
AttributesGroup,
Component as TopologyTemplate,
+ ComponentInstance,
ComponentMetadata,
FullComponentInstance,
PropertiesGroup,
@@ -14,6 +15,7 @@ import { WorkspaceService } from 'app/ng2/pages/workspace/workspace.service';
import { GroupByPipe } from 'app/ng2/pipes/groupBy.pipe';
import { ResourceNamePipe } from 'app/ng2/pipes/resource-name.pipe';
import { TopologyTemplateService } from 'app/ng2/services/component-services/topology-template.service';
+import { ComponentInstanceServiceNg2 } from "app/ng2/services/component-instance-services/component-instance.service";
import { ComponentGenericResponse } from 'app/ng2/services/responses/component-generic-response';
import { TranslateService } from 'app/ng2/shared/translator/translate.service';
import { ModalsHandler } from 'app/utils';
@@ -33,6 +35,9 @@ export class PropertiesTabComponent implements OnInit {
propertiesMessage: string;
metadata: ComponentMetadata;
objectKeys = Object.keys;
+ isUnboundedChecked: boolean;
+ isOccurrencesEnabled: boolean = false;
+ isLoading: boolean;
@Input() isViewOnly: boolean;
@Input() componentType: SelectedComponentType;
@@ -44,6 +49,7 @@ export class PropertiesTabComponent implements OnInit {
private compositionService: CompositionService,
private modalsHandler: ModalsHandler,
private topologyTemplateService: TopologyTemplateService,
+ private componentInstanceService: ComponentInstanceServiceNg2,
private modalService: SdcUiServices.ModalService,
private translateService: TranslateService,
private groupByPipe: GroupByPipe) {
@@ -176,6 +182,15 @@ export class PropertiesTabComponent implements OnInit {
}
}
+ private initComponentOccurrences = (): void => {
+ if (this.component instanceof FullComponentInstance) {
+ if(this.component.minOccurrences != null && this.component.maxOccurrences != null){
+ this.isOccurrencesEnabled = true;
+ }
+ this.isUnboundedChecked = this.component.maxOccurrences == "UNBOUNDED" ? true: false;
+ }
+ }
+
/**
* This function is checking if the component is the value owner of the current property
* in order to notify the edit property modal which fields to disable
@@ -208,5 +223,58 @@ export class PropertiesTabComponent implements OnInit {
private initPropertiesAndAttributes = (): void => {
this.initComponentProperties();
this.initComponentAttributes();
+ this.initComponentOccurrences();
+ }
+
+ onUnboundedChanged(component: ComponentInstance) {
+ this.isUnboundedChecked = !this.isUnboundedChecked;
+ component.maxOccurrences = this.isUnboundedChecked ? "UNBOUNDED" : "1";
+ }
+
+ private updateComponentInstance(component: ComponentInstance) {
+ this.store.dispatch(new TogglePanelLoadingAction({isLoading: true}));
+
+ this.componentInstanceService.updateComponentInstance(this.workspaceService.metadata.componentType,
+ this.workspaceService.metadata.uniqueId, component)
+ .subscribe((updatedComponentInstance: ComponentInstance) => {
+ component = new ComponentInstance(updatedComponentInstance);
+ this.compositionService.getComponentInstances().find((item) => item.uniqueId === component.uniqueId).maxOccurrences = component.maxOccurrences;
+ this.compositionService.getComponentInstances().find((item) => item.uniqueId === component.uniqueId).minOccurrences = component.minOccurrences;
+ this.store.dispatch(new TogglePanelLoadingAction({isLoading: false}));
+ }, (error:any) => {
+ this.store.dispatch(new TogglePanelLoadingAction({isLoading: false}));
+ if (error) {
+ console.log(error);
+ }});
+ }
+
+ private enableOccurrences = () => {
+ if(this.component instanceof FullComponentInstance){
+ if(!this.isOccurrencesEnabled){
+ this.component.minOccurrences = null;
+ this.component.maxOccurrences = null;
+ } else {
+ this.component.minOccurrences = "1";
+ this.component.maxOccurrences = "1";
+ }
+ this.updateComponentInstance(this.component);
+ }
+ }
+
+ private isOccurrencesFormValid(component: FullComponentInstance) {
+ if(
+ component.minOccurrences && parseInt(component.minOccurrences) >= 0 &&
+ component.maxOccurrences && (parseInt(component.maxOccurrences) >= parseInt(component.minOccurrences) || component.maxOccurrences === "UNBOUNDED")
+ ) {
+ return true;
+ } else {
+ return false;
+ }
+ }
+
+ private saveOccurrences = () => {
+ if(this.component instanceof FullComponentInstance && this.isOccurrencesFormValid(this.component)) {
+ this.updateComponentInstance(this.component);
+ }
}
}