Initial OpenECOMP SDC commit

Change-Id: I0924d5a6ae9cdc161ae17c68d3689a30d10f407b
Signed-off-by: Michael Lando <ml636r@att.com>

1 files changed, 399 insertions, 0 deletions

diff --git a/catalog-ui/app/scripts/view-models/wizard/wizard-creation-base.ts b/catalog-ui/app/scripts/view-models/wizard/wizard-creation-base.ts
new file mode 100644
index 0000000000..365d3aedf6
--- /dev/null
+++ b/catalog-ui/app/scripts/view-models/wizard/wizard-creation-base.ts
@@ -0,0 +1,399 @@
+/*-
+ * ============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=========================================================
+ */
+/// <reference path="../../references"/>
+module Sdc.ViewModels.Wizard {
+    'use strict';
+
+    export class StepNames {
+        static general = "General";
+        static icon = "Icon";
+        static deploymentArtifact = "Deployment Artifact";
+        static informationArtifact = "Information Artifact";
+        static properties = "Properties";
+        static hierarchy = "Hierarchy";
+    }
+
+    class FooterButtons {
+        static cancel = "Cancel";
+        static back = "Back";
+        static next = "Next";
+        static finish = "Finish";
+    }
+
+    export class WizardCreationTypes {
+        static importAsset = "importAsset";
+        static create = "create";
+        static edit = "edit";
+    }
+
+    export class _CreationStep {
+        name:string;
+        url:string;
+    }
+
+    export class CurrentStep {
+        assetCreationStep:_CreationStep;
+        reference:IWizardCreationStep;
+        index:number;
+        valid: boolean;
+    }
+
+    export interface IWizardCreationStep {
+        save(callback:Function):void;
+        back(callback:Function):void;
+    }
+
+    export interface IWizardCreationStepScope extends ng.IScope {
+        data:any;
+        getComponent():Sdc.Models.Components.Component;
+        setComponent(component: Sdc.Models.Components.Component):void;
+        registerChild(child:IWizardCreationStep):void; // Called from the step
+        setValidState(valid:boolean):void; // Called from the step
+    }
+
+    export interface IWizardCreationScope extends ng.IScope {
+        isLoading: boolean;
+        data:any; // data passed from dashboard (opener), need it on the scope, because general step will use this (extends the scope)
+        directiveSteps: Array<Sdc.Directives.IWizardStep>; // Steps for the directive, on the scope (on the scope because need to pass to directive via HTML)
+        templateUrl: string; // On the scope because need to pass to <ng-include> via HTML
+        footerButtons: Array<Sdc.Directives.ISdcModalButton>; // Wizard footer buttons (on the scope because need to pass to directive via HTML)
+        assetCreationControl:any; // Link to wizard directive functions.
+        modalInstance:ng.ui.bootstrap.IModalServiceInstance; // Reference to the modal, so we can close it (on the scope because need to pass to directive via HTML)
+        assetName:string;
+        assetType:string;
+        modalTitle:string;
+        getComponent():Sdc.Models.Components.Component;
+        setComponent(component: Sdc.Models.Components.Component):void;
+        registerChild(child:IWizardCreationStep):void; // Called from the step
+        setValidState(valid:boolean):void; // Called from the step
+    }
+
+    export class WizardCreationBaseViewModel {
+
+        component: Sdc.Models.Components.Component;
+        protected assetCreationSteps: Array<_CreationStep>; // Contains URL and name so we can replace them
+        currentStep:CurrentStep;
+        protected type:string;
+
+        constructor(protected $scope:IWizardCreationScope,
+                    protected data:any,
+                    protected ComponentFactory: Utils.ComponentFactory,
+                    protected $modalInstance: ng.ui.bootstrap.IModalServiceInstance
+          ) {
+
+            this.$scope.data = data;
+            this.currentStep = new CurrentStep();
+            this.currentStep.valid=false;
+            this.$scope.modalInstance = this.$modalInstance;
+            this.initScope();
+            this.noBackspaceNav();
+
+            // In case the modal was opened with filled resource (edit mode).
+            if (data.component){
+                    this.$scope.setComponent(data.component);
+                    data.componentType = this.$scope.getComponent().componentType;
+                    window.setTimeout(()=>{
+                        this.safeApply(this.setCurrentStepByIndex(0, false));
+                    },100);
+            } else {
+                // Default step to start with
+                window.setTimeout(()=>{
+                    this.safeApply(this.setCurrentStepByIndex(0, false));
+                },100);
+            }
+
+        }
+
+        private safeApply = (fn:any) => {
+            let phase = this.$scope.$root.$$phase;
+            if (phase == '$apply' || phase == '$digest') {
+                if (fn && (typeof(fn) === 'function')) {
+                    fn();
+                }
+            } else {
+                this.$scope.$apply(fn);
+            }
+        };
+
+        private initScope = ():void => {
+
+            // Control to call functions on wizard step directive
+            this.$scope.assetCreationControl = {};
+
+            // Footer buttons definitions for the modal directive.
+            this.$scope.footerButtons = [
+                {"name":FooterButtons.cancel,   "css":'white cancel',"callback": ()=>{this.btnCancelClicked();}},
+                {"name":FooterButtons.back,     "disabled":true, "css":'white back',"callback": ()=>{this.btnBackClicked();}},
+                {"name":FooterButtons.next,     "disabled":true, "css":'blue next',"callback": ()=>{this.btnNextClicked();}},
+                {"name":FooterButtons.finish,   "disabled":true, "css":'white finish',"callback": ()=>{this.btnFinishedClicked();}}
+            ];
+
+            // Will be called from step constructor to register him.
+            // So the current step will be the reference.
+            this.$scope.registerChild=(child:IWizardCreationStep):void => {
+                this.currentStep.reference=child;
+            };
+
+            // Will be called from each step to notify if the step is valid
+            // The wizard will set the "Next", "Finish" buttons accordingly.
+            this.$scope.setValidState = (valid:boolean):void => {
+                this.currentStep.valid=valid;
+                let currentDirectiveStep:Sdc.Directives.IWizardStep = this.$scope.directiveSteps[this.currentStep.index];
+                this.$scope.assetCreationControl.setStepValidity(currentDirectiveStep, valid);
+                this.footerButtonsStateMachine();
+                this.wizardButtonsIconsStateMachine();
+            };
+
+            /**
+             * Will be called from each step to get current entity.
+             * This will return copy of the entity (not reference), because I do not want that the step will change entity parameters.
+             * If the step need to update the entity it can call setComponent function.
+             * @returns {Sdc.Models.IEntity}
+             */
+            this.$scope.getComponent = ():Sdc.Models.Components.Component => {
+                return this.component;
+            };
+
+            // Will be called from each step after save to update the resource.
+            this.$scope.setComponent = (component:Sdc.Models.Components.Component):void => {
+                this.component = component;
+            };
+
+        };
+
+        protected setCurrentStepByName = (stepName:string):boolean => {
+            let stepIndex:number = this.getStepIndex(stepName);
+            return this.setCurrentStepByIndex(stepIndex);
+        };
+
+        // Set the current step, change the URL in ng-include.
+        protected setCurrentStepByIndex = (index:number, doSave:boolean=true):boolean => {
+            let result:boolean = false;
+            if (this.currentStep.index!==index) { // Check that not pressing on same step, also the first time currentStepIndex=undefined
+                if (doSave===true) {
+                    this.callStepSave(() => {
+                        // This section will be executed only if success save.
+
+                        // Set current step in the left wizard directive = valid
+                        let currentDirectiveStep:Sdc.Directives.IWizardStep = this.$scope.directiveSteps[this.currentStep.index];
+                        this.$scope.assetCreationControl.setStepValidity(currentDirectiveStep, true);
+
+                        // Move to next step
+                        let step:_CreationStep = this.assetCreationSteps[index];
+                        this.currentStep.index = index;
+                        this.currentStep.assetCreationStep = step;
+                        this.$scope.templateUrl = step.url;
+
+                        // Update the next/back buttons and steps buttons.
+                        this.footerButtonsStateMachine();
+                        this.wizardButtonsIconsStateMachine();
+
+                        // Can not perform step click without enabling the step
+                        this.$scope.directiveSteps[index].enabled = true; // Need to set the step enabled, before clicking it.
+                        this.$scope.assetCreationControl.stepClicked(step.name);
+
+                        // After saving the asset name and type will be shown in the top right of the screen.
+                        this.fillAssetNameAndType();
+
+                        result=true;
+                    });
+                } else {
+                    // For the first time
+                    let step:_CreationStep = this.assetCreationSteps[index];
+                    this.currentStep.index = index;
+                    this.currentStep.assetCreationStep=step;
+                    this.$scope.templateUrl = step.url;
+                    this.$scope.directiveSteps[index].enabled = true; // Need to set the step enabled, before clicking it.
+                    this.$scope.assetCreationControl.stepClicked(step.name);
+                    result=true;
+                }
+
+                //this.updateFooterButtonsStates();
+
+            } else {
+                result=true;
+            }
+            return result;
+        };
+
+        // Save the current step
+        private callStepSave = (successCallback:Function):void => {
+            this.$scope.isLoading = true;
+            this.currentStep.reference.save((result:boolean)=>{
+                this.$scope.isLoading = false;
+                if (result===true){
+                    successCallback();
+                } else {
+                    // Set the next and finish button enabled.
+                    //this.updateFooterButtonsStates(true);
+                }
+            });
+        };
+
+        // Save the current step
+        private callStepBack = (successCallback:Function):void => {
+            this.$scope.isLoading = true;
+            this.currentStep.reference.back((result:boolean)=>{
+                this.$scope.isLoading = false;
+                if (result===true){
+                    successCallback();
+                } else {
+                    // Set the next and finish button enabled.
+                    //this.updateFooterButtonsStates(true);
+                }
+            });
+        };
+
+        private getStepIndex = (stepName:string):number => {
+            let index:number=-1;
+            let tmp = _.find(this.assetCreationSteps, function (item, indx) {
+                index = indx;
+                return item.name === stepName;
+            });
+            return index;
+        };
+
+        private btnNextClicked = ():void => {
+            if (this.hasNext()===true) {
+                let tmp = this.currentStep.index+1;
+                this.setCurrentStepByIndex(tmp);
+            }
+        };
+
+        private btnBackClicked = ():void => {
+            if (this.hasBack()===true) {
+                this.callStepBack(() => {
+                    let tmp = this.currentStep.index-1;
+                    this.setCurrentStepByIndex(tmp, false);
+                });
+            }
+        };
+
+        private btnCancelClicked = ():void => {
+            this.$modalInstance.dismiss(this.$scope.getComponent());
+        };
+
+        private btnFinishedClicked = ():void => {
+            this.callStepSave(() => {
+                this.$modalInstance.close(this.$scope.getComponent());
+            });
+        };
+
+        // Check if we can move next
+        private hasNext = ():boolean => {
+            if (this.assetCreationSteps.length-1>this.currentStep.index){
+                return true;
+            } else {
+                return false;
+            }
+        };
+
+        // Check if we can move back
+        private hasBack = ():boolean => {
+            if (this.currentStep.index===0){
+                return false;
+            } else {
+                return true;
+            }
+        };
+
+        private fillAssetNameAndType=():void => {
+            this.$scope.assetName = this.$scope.getComponent().name;
+            this.$scope.assetType = this.$scope.getComponent().getComponentSubType();
+
+        };
+
+        protected enableAllWizardSteps=():void => {
+            this.$scope.directiveSteps.forEach((step:Sdc.Directives.IWizardStep) => {
+                step.enabled=true;
+            });
+        };
+
+        protected disableAllWizardSteps=():void => {
+            this.$scope.directiveSteps.forEach((step:Sdc.Directives.IWizardStep) => {
+                step.enabled=false;
+            });
+        };
+
+        private footerButtonsStateMachine = ():void => {
+            //console.log("footerButtonsStateMachine, current step validity: " + this.currentStep.valid);
+            let stepIndex:number = this.currentStep.index;
+            let cancelButton = this.$scope.footerButtons[0];
+            let backButton = this.$scope.footerButtons[1];
+            let nextButton = this.$scope.footerButtons[2];
+            let finishButton = this.$scope.footerButtons[3];
+
+            // NEXT button
+            // Disable next button if it is the last step, and if not check the validity of the step.
+            if (this.hasNext()){
+                nextButton.disabled = !this.currentStep.valid;
+            } else {
+                nextButton.disabled = true;
+            }
+
+            // BACK button
+            backButton.disabled = !this.hasBack();
+
+            // FINISH button
+            // If step 2 is valid show the finish button.
+            if (stepIndex>=1 && this.currentStep.valid===true) {
+                finishButton.disabled = false;
+            }
+            if (this.currentStep.valid===false){
+                finishButton.disabled = true;
+            }
+
+            // EDIT
+            if (this.type===WizardCreationTypes.edit && this.currentStep.valid===true){
+                finishButton.disabled = false;
+            }
+
+        };
+
+
+
+        private wizardButtonsIconsStateMachine = ():void => {
+
+            // Enable or disable wizard directive next step, in case the current step form is valid or not.
+            let stepIndex:number = this.currentStep.index;
+            if (this.$scope.directiveSteps[stepIndex + 1]) {
+                this.$scope.directiveSteps[stepIndex + 1].enabled = this.currentStep.valid;
+            }
+
+            // In case step 1 and 2 are valid, we can open all other steps.
+            if (this.$scope.directiveSteps[0].valid===true && this.$scope.directiveSteps[1].valid===true){
+                // Enable all wizard directive steps
+                this.enableAllWizardSteps();
+            } else if (this.currentStep.valid===false) {
+                // Disable all steps
+                this.disableAllWizardSteps();
+            }
+        };
+
+        private noBackspaceNav:Function = ():void => {
+            this.$scope.$on('$locationChangeStart', (event, newUrl, oldUrl):void =>{
+                event.preventDefault();
+            })
+        };
+
+
+    }
+
+}