[SDC-29] catalog 1707 rebase commit.

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

3 files changed, 230 insertions, 0 deletions

diff --git a/catalog-ui/src/app/view-models/modals/email-modal/email-modal-view-model.ts b/catalog-ui/src/app/view-models/modals/email-modal/email-modal-view-model.ts
new file mode 100644
index 0000000000..f1fb56d0ff
--- /dev/null
+++ b/catalog-ui/src/app/view-models/modals/email-modal/email-modal-view-model.ts
@@ -0,0 +1,96 @@
+'use strict';
+import {IAppConfigurtaion, Component, AsdcComment} from "app/models";
+import {ValidationUtils} from "app/utils";
+
+export interface IEmailModalModel_Email {
+    to:string;
+    subject:string;
+    message:string;
+}
+
+export interface IEmailModalModel_Data {
+    component:Component;
+    stateUrl:string;
+}
+
+export interface IEmailModalModel {
+    title:string;
+    email:IEmailModalModel_Email;
+    data:IEmailModalModel_Data;
+}
+
+interface IEmailModalViewModelScope {
+    modalInstanceEmail:ng.ui.bootstrap.IModalServiceInstance;
+    emailModalModel:IEmailModalModel;
+    submitInProgress:boolean;
+    commentValidationPattern:RegExp;
+    isLoading:boolean;
+    submit():any;
+    cancel():void;
+    validateField(field:any):boolean;
+}
+
+export class EmailModalViewModel {
+
+    static '$inject' = ['$scope', '$filter', 'sdcConfig', '$uibModalInstance', 'emailModalModel', 'ValidationUtils', 'CommentValidationPattern'];
+
+    constructor(private $scope:IEmailModalViewModelScope,
+                private $filter:ng.IFilterService,
+                private sdcConfig:IAppConfigurtaion,
+                private $uibModalInstance:ng.ui.bootstrap.IModalServiceInstance,
+                private emailModalModel:IEmailModalModel,
+                private ValidationUtils:ValidationUtils,
+                private CommentValidationPattern:RegExp) {
+
+        this.initScope(emailModalModel);
+    }
+
+    private initScope = (emailModalModel:IEmailModalModel):void => {
+        this.$scope.emailModalModel = emailModalModel;
+        this.$scope.submitInProgress = false;
+        this.$scope.commentValidationPattern = this.CommentValidationPattern;
+        this.$scope.modalInstanceEmail = this.$uibModalInstance;
+
+        this.$scope.submit = ():any => {
+
+            let onSuccess = (component:Component) => {
+                this.$scope.isLoading = false;
+                this.$scope.submitInProgress = false;
+                // showing the outlook modal according to the config json
+                if (this.sdcConfig.showOutlook) {
+                    let link:string = encodeURI(this.sdcConfig.api.baseUrl + "?folder=Ready_For_Testing");
+                    let outlook:string = this.$filter('translate')("EMAIL_OUTLOOK_MESSAGE", "{'to': '" + emailModalModel.email.to + "','subject': '" + emailModalModel.email.subject + "','message': '" + emailModalModel.email.message + "', 'entityNameAndVersion': '" + emailModalModel.email.subject + "','link': '" + link + "'}");
+                    window.location.href = outlook; // Open outlook with the email to send
+                }
+                this.$uibModalInstance.close(component); // Close the dialog
+            };
+
+            let onError = () => {
+                this.$scope.isLoading = false;
+                this.$scope.submitInProgress = false;
+                this.$uibModalInstance.close(); // Close the dialog
+            };
+
+            // Submit to server
+            // Prevent from user pressing multiple times on submit.
+            if (this.$scope.submitInProgress === false) {
+                this.$scope.isLoading = true;
+                this.$scope.submitInProgress = true;
+                let comment:AsdcComment = new AsdcComment();
+                comment.userRemarks = emailModalModel.email.message;
+                emailModalModel.data.component.changeLifecycleState(emailModalModel.data.stateUrl, comment).then(onSuccess, onError);
+            }
+        };
+
+        this.$scope.cancel = ():void => {
+            this.$uibModalInstance.dismiss();
+        };
+
+        this.$scope.validateField = (field:any):boolean => {
+            if (field && field.$dirty && field.$invalid) {
+                return true;
+            }
+            return false;
+        };
+    }
+}
diff --git a/catalog-ui/src/app/view-models/modals/email-modal/email-modal-view.html b/catalog-ui/src/app/view-models/modals/email-modal/email-modal-view.html
new file mode 100644
index 0000000000..bf65428033
--- /dev/null
+++ b/catalog-ui/src/app/view-models/modals/email-modal/email-modal-view.html
@@ -0,0 +1,77 @@
+<sdc-modal modal="modalInstanceEmail" type="classic" class="w-sdc-modal-email modal-type-standard" header="{{emailModalModel.title}}" show-close-button="true">
+    <loader data-display="isLoading"></loader>
+    <form novalidate class="w-sdc-form" name="editForm">
+
+            <div class="i-sdc-form-item" data-ng-class="{'error': validateField(editForm.to)}">
+                <label class="i-sdc-form-label col-sm-2">To</label>
+                <div class="col-sm-10">
+                    <input class="i-sdc-form-input" type="text"
+                           data-ng-model="emailModalModel.email.to"
+                           data-ng-model-options="{ debounce: 500 }"
+                           data-ng-maxlength="255"
+                           data-required
+                           name="to"
+                           id="to"
+                           data-ng-disabled="true"
+                        />
+                </div>
+
+                <div class="input-error" data-ng-show="validateField(editForm.to)" alignToSelector="#to">
+                    <span ng-show="editForm.to.$error.required" translate="VALIDATION_ERROR_REQUIRED" translate-values="{'field': 'To' }"></span>
+                    <span ng-show="editForm.to.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '255' }"></span>
+                    <span ng-show="editForm.to.$error.pattern" translate="VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED"></span>
+                </div>
+
+            </div>
+
+            <div class="i-sdc-form-item" data-ng-class="{'error': validateField(editForm.subject)}">
+                <label class="i-sdc-form-label col-sm-2">Subject</label>
+                <div class="col-sm-10">
+                    <input class="i-sdc-form-input" type="text"
+                           data-ng-model="emailModalModel.email.subject"
+                           data-ng-model-options="{ debounce: 500 }"
+                           data-ng-maxlength="255"
+                           data-required
+                           name="subject"
+                           data-ng-disabled="true"
+                        />
+                </div>
+
+                <div class="input-error" data-ng-show="validateField(editForm.subject)">
+                    <span ng-show="editForm.subject.$error.required" translate="VALIDATION_ERROR_REQUIRED" translate-values="{'field': 'Subject' }"></span>
+                    <span ng-show="editForm.subject.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '255' }"></span>
+                    <span ng-show="editForm.subject.$error.pattern" translate="VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED"></span>
+                </div>
+
+            </div>
+
+            <div class="i-sdc-form-item" data-ng-class="{'error': validateField(editForm.message)}">
+                <label class="i-sdc-form-label required col-sm-2">Message</label>
+                <div class="col-sm-10">
+                        <textarea class="w-sdc-modal-body-email"
+                                  data-ng-model="emailModalModel.email.message"
+                                  placeholder="{{'EMAIL_MODAL_MESSAGE' | translate }}"
+                                  data-required
+                                  name="message"
+                                  data-ng-pattern="commentValidationPattern"
+                                  maxlength="255"
+                                  data-tests-id="changeLifeCycleMessage"
+                                  data-ng-maxlength="255">
+                        </textarea>
+
+                    <div class="input-error" data-ng-show="validateField(editForm.message)">
+                        <span ng-show="editForm.message.$error.required" translate="VALIDATION_ERROR_REQUIRED" translate-values="{'field': 'Message' }"></span>
+                        <span ng-show="editForm.message.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '255' }"></span>
+                        <span ng-show="editForm.message.$error.pattern" translate="VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED"></span>
+                    </div>
+                </div>
+
+            </div>
+
+    </form>
+
+    <div class="w-sdc-modal-footer classic">
+        <button class="tlv-btn blue" data-tests-id="OK" data-ng-click="submit()" data-ng-disabled="editForm.$invalid">OK</button>
+        <button class="tlv-btn grey" data-tests-id="Cancel" data-ng-click="cancel()" >Cancel</button>
+    </div>
+</sdc-modal>
diff --git a/catalog-ui/src/app/view-models/modals/email-modal/email-modal.less b/catalog-ui/src/app/view-models/modals/email-modal/email-modal.less
new file mode 100644
index 0000000000..471089fa1a
--- /dev/null
+++ b/catalog-ui/src/app/view-models/modals/email-modal/email-modal.less
@@ -0,0 +1,57 @@
+.w-sdc-modal-email {
+
+    .w-sdc-modal-body {
+        border-bottom: none;
+    }
+
+    form.w-sdc-form{
+        padding: 0;
+
+        .i-sdc-form-item {
+            clear: both;
+            label {
+                min-height: 30px;
+                padding-top: 4px;
+            }
+
+            .col-sm-10 {
+                padding-right: 0;
+            }
+
+        }
+
+        .w-sdc-modal-body-email {
+            border-style: solid;
+            border-width: 1px;
+            border-color:  @color_e;
+            box-sizing: border-box;
+            width: 100%;
+            height: 127px;
+            margin-bottom: 20px;
+        }
+
+        label {.m_14_m; text-align: left;}
+        input {.m_14_r;}
+        textarea {.m_14_r;}
+        /* I made the subject and to fields as input (for future use), but for now they look like labels: */
+        input:disabled {
+            .bg_c;
+            border: none;
+        }
+    }
+
+    .w-sdc-modal-action {
+        background-color: @main_color_p;
+        padding: 0 13px 0 0;
+        height: 90px;
+        line-height: 65px;
+
+        button {width: 174px;}
+    }
+
+    .w-sdc-form .i-sdc-form-item label.required::before {
+        position: absolute;
+        left: -13px;
+    }
+
+}