Support occurrences on node templates

Issue-ID: SDC-3711
Change-Id: I9f25454faa8be6987f336b7efd3821cfa09585a1
Signed-off-by: JvD_Ericsson <jeff.van.dam@est.tech>

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);
+        }
     }
 }