Initial OpenECOMP SDC commit

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

3 files changed, 155 insertions, 0 deletions

diff --git a/catalog-ui/app/scripts/view-models/modals/confirmation-modal/confirmation-modal-view-model.ts b/catalog-ui/app/scripts/view-models/modals/confirmation-modal/confirmation-modal-view-model.ts
new file mode 100644
index 0000000000..f906593d8a
--- /dev/null
+++ b/catalog-ui/app/scripts/view-models/modals/confirmation-modal/confirmation-modal-view-model.ts
@@ -0,0 +1,96 @@
+/*-
+ * ============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 {
+    'use strict';
+
+    export interface IConfirmationModalModel {
+        title: string;
+        message: string;
+        showComment: boolean;
+        type: Utils.Constants.ModalType;
+    }
+
+    interface IConfirmationModalViewModelScope {
+        modalInstanceConfirmation:ng.ui.bootstrap.IModalServiceInstance;
+        confirmationModalModel: IConfirmationModalModel;
+        comment: any;
+        commentValidationPattern:RegExp;
+        editForm:ng.IFormController;
+        okButtonColor: string;
+        hideCancelButton: boolean;
+        ok(): any;
+        cancel(): void;
+    }
+
+    export class ConfirmationModalViewModel {
+
+        static '$inject' = ['$scope', '$modalInstance', 'confirmationModalModel', 'CommentValidationPattern', 'ValidationUtils', '$templateCache', '$modal'];
+
+        constructor(private $scope:IConfirmationModalViewModelScope,
+                    private $modalInstance:ng.ui.bootstrap.IModalServiceInstance,
+                    confirmationModalModel:IConfirmationModalModel,
+                    private CommentValidationPattern: RegExp,
+                    private ValidationUtils: Sdc.Utils.ValidationUtils,
+                    private $templateCache:ng.ITemplateCacheService,
+                    private $modal:ng.ui.bootstrap.IModalService) {
+
+            this.initScope(confirmationModalModel);
+        }
+
+        private initScope = (confirmationModalModel:IConfirmationModalModel):void => {
+            let self = this;
+            this.$scope.hideCancelButton = false;
+            this.$scope.modalInstanceConfirmation = this.$modalInstance;
+            this.$scope.confirmationModalModel = confirmationModalModel;
+            this.$scope.comment = {"text": ''};
+            this.$scope.commentValidationPattern = this.CommentValidationPattern;
+
+            this.$scope.ok = ():any => {
+                self.$modalInstance.close(this.ValidationUtils.stripAndSanitize(self.$scope.comment.text));
+            };
+
+            this.$scope.cancel = ():void => {
+                console.info('Cancel pressed on: ' + this.$scope.confirmationModalModel.title);
+                self.$modalInstance.dismiss();
+            };
+
+            // Set the OK button color according to modal type (standard, error, alert)
+            let _okButtonColor = 'blue'; // Default
+            switch (confirmationModalModel.type) {
+                case Sdc.Utils.Constants.ModalType.STANDARD:
+                    _okButtonColor='blue';
+                    break;
+                case Sdc.Utils.Constants.ModalType.ERROR:
+                    _okButtonColor='red';
+                    break;
+                case Sdc.Utils.Constants.ModalType.ALERT:
+                    this.$scope.hideCancelButton = true;
+                    _okButtonColor='grey';
+                    break;
+                default:
+                    _okButtonColor='blue';
+                    break;
+            }
+            this.$scope.okButtonColor = _okButtonColor;
+
+        }
+    }
+}
diff --git a/catalog-ui/app/scripts/view-models/modals/confirmation-modal/confirmation-modal-view.html b/catalog-ui/app/scripts/view-models/modals/confirmation-modal/confirmation-modal-view.html
new file mode 100644
index 0000000000..09c27f8cd3
--- /dev/null
+++ b/catalog-ui/app/scripts/view-models/modals/confirmation-modal/confirmation-modal-view.html
@@ -0,0 +1,29 @@
+<sdc-modal modal="modalInstanceConfirmation" type="classic" class="w-sdc-modal-confirmation modal-type-{{confirmationModalModel.type}}" header="{{confirmationModalModel.title}}" show-close-button="true">
+    <form novalidate class="w-sdc-form" name="editForm">
+        <label class="i-sdc-form-label required w-sdc-modal-label" data-ng-bind-html="confirmationModalModel.message"></label>
+
+        <div class="i-sdc-form-item">
+            <textarea class="w-sdc-modal-body-comment"
+                      data-tests-id="checkindialog"
+                      autofocus="autofocus"
+                      data-ng-show="confirmationModalModel.showComment===true"
+                      data-ng-model="comment.text"
+                      placeholder="Comment..."
+                      maxlength="256"
+                      data-required
+                      name="comment1"
+                      data-ng-pattern="commentValidationPattern"
+                      data-ng-maxlength="256"></textarea>
+
+            <div class="input-error" data-ng-show="editForm.comment1.$dirty && editForm.comment1.$invalid">
+                <span ng-show="editForm.comment1.$error.pattern" translate="VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED"></span>
+                <span ng-show="editForm.comment1.$error.required" translate="VALIDATION_ERROR_REQUIRED" translate-values="{'field': 'Comment' }"></span>
+            </div>
+        </div>
+    </form>
+    <div class="w-sdc-modal-footer classic">
+        <button class="tlv-btn {{okButtonColor}}" data-tests-id="OK" data-ng-click="ok()" data-ng-disabled="confirmationModalModel.showComment===true && (!comment.text || comment.text && comment.text.length===0)">OK</button>
+        <button class="tlv-btn grey" data-ng-if="hideCancelButton===false" data-tests-id="Cancel" data-ng-click="cancel()" >Cancel</button>
+        <button class="tlv-btn blue add-property-add-another" data-ng-if="isNew" data-ng-click="saveAndAnother()" type="reset" data-ng-disabled="editForm.$invalid">Add Another</button>
+    </div>
+</sdc-modal>
diff --git a/catalog-ui/app/scripts/view-models/modals/confirmation-modal/confirmation-modal.less b/catalog-ui/app/scripts/view-models/modals/confirmation-modal/confirmation-modal.less
new file mode 100644
index 0000000000..666c41d5ed
--- /dev/null
+++ b/catalog-ui/app/scripts/view-models/modals/confirmation-modal/confirmation-modal.less
@@ -0,0 +1,30 @@
+.w-sdc-modal-confirmation {
+    form.w-sdc-form{
+        padding: 0;
+    }
+
+    .w-sdc-modal-body-content {
+        .b_6;
+        word-break: break-word;
+
+    }
+    .w-sdc-modal-body {
+        height: auto;
+        /* padding: 47px 60px 20px 60px; */
+        border-bottom: none;
+    }
+    .w-sdc-modal-body-content {
+        padding: 0;
+    }
+    .w-sdc-modal-body-comment {
+        width: 430px;
+        height: 127px;
+        border: solid 1px @color_e;
+        margin: 20px 0 0 0;
+        padding: 15px;
+    }
+    .w-sdc-modal-label {
+        .m_14_r;
+        text-align: left;
+    }
+}