ecomp-portal-FE-common/client/app/views/widget-onboarding/widget-details-dialog/widget-details.modal.html

   1 <!--
   2   ================================================================================
   3   ECOMP Portal
   4   ================================================================================
   5   Copyright (C) 2017 AT&T Intellectual Property
   6   ================================================================================
   7   Licensed under the Apache License, Version 2.0 (the "License");
   8   you may not use this file except in compliance with the License.
   9   You may obtain a copy of the License at
  10
  11        http://www.apache.org/licenses/LICENSE-2.0
  12
  13   Unless required by applicable law or agreed to in writing, software
  14   distributed under the License is distributed on an "AS IS" BASIS,
  15   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  16   See the License for the specific language governing permissions and
  17   limitations under the License.
  18   ================================================================================
  19   -->
  20 <div class="widget-details-modal">
  21
  22                 <div class="b2b-modal-header">
  23                         <h2 class="widget-title" id="widgets-details-title">Widget Details</h2>
  24
  25                         <div class="corner-button in">
  26                                 <button type="button" class="close" aria-label="Close"
  27                                         ng-click="$dismiss('cancel')"></button>
  28                         </div>
  29                 </div>
  30
  31                 <div class="b2b-modal-body">
  32                 <div class="widget-properties-main"
  33                 scroll-top="widgetOnboardingDetails.scrollApi">
  34                 <form id="widgets-details-form" name="widgetForm" novalidate
  35                         autocomplete="off">
  36
  37                         <div class="item required">
  38                                 <div class="item-label">Widget Name</div>
  39                                 <input id="widgets-details-input-name" class="table-search-field"
  40                                         type="text" ng-model="widgetOnboardingDetails.widget.name"
  41                                         ng-change="widgetOnboardingDetails.updateWidgetName()" name="name"
  42                                         ng-pattern="/^[\w -]*$/" maxlength="100"
  43                                         ng-disabled="widgetOnboardingDetails.isEditMode" required />
  44
  45                                 <div class="error-container"
  46                                         ng-show="(widgetOnboardingDetails.emptyWidgetName || widgetForm.name.$dirty) && !widgetOnboardingDetails.duplicatedName">
  47                                         <div id="widgets-details-input-name-conflict" class="err-message">Name
  48                                                 not available - choose different name</div>
  49                                 </div>
  50
  51                                 <div class="error-container"
  52                                         ng-show="(widgetOnboardingDetails.emptyWidgetName || widgetForm.name.$dirty) && widgetOnboardingDetails.duplicatedName">
  53                                         <div ng-messages="widgetForm.name.$error" class="error-container">
  54                                                 <small id="widgets-details-input-name-required"
  55                                                         class="err-message" ng-message="required">Widget Name is
  56                                                         required</small> <small id="widgets-details-input-name-pattern"
  57                                                         class="err-message" ng-message="pattern">Widget Name must
  58                                                         be letters, numbers, space, dash or underscore</small>
  59                                         </div>
  60                                 </div>
  61                         </div>
  62
  63                         <div class="item">
  64                                 <div class="item-label">Widget Description</div>
  65                                 <!-- <input id="widgets-details-input-description" class="input-field"
  66                                         type="text" ng-model="widgetOnboardingDetails.widget.desc"
  67                                         name="desc" maxlength="200" /> -->
  68                                         <textarea b2b-reset b2b-reset-textarea id="widgets-details-input-desc"
  69                                                 name="desc" type="text" ng-model="widgetOnboardingDetails.widget.desc"  maxlength="200"         ></textarea>
  70                         </div>
  71
  72                         <div class="item">
  73                                 <div class="item-label">Service Endpoint</div>
  74                                 <div class="table-dropdown" >
  75                                                         <select id="widgets-details-input-endpoint-url" name="url" b2b-dropdown placeholder-text="Select Microservice Endpoint" ng-model="widgetOnboardingDetails.widget.serviceURL" ng-disabled="widgetOnboardingDetails.isEditMode" >
  76                                                 <option b2b-dropdown-list option-repeat="service in widgetOnboardingDetails.availableServices" value="{{service.id}}">{{service.option}}</option>
  77                                             </select>
  78                                                 </div>
  79                         </div>
  80
  81                         <div class="widget-property">
  82                                 <label for="widget-checkbox-app-is-enabled" class="checkbox">
  83                                         <input type="checkbox"
  84                                         ng-model="widgetOnboardingDetails.widget.allUser"
  85                                         id="widget-checkbox-app-is-enabled"> <i class="skin"></i>
  86                                         <span class="property-label checkbox-label">Allow all user
  87                                                 access</span>
  88                                 </label>
  89                         </div>
  90
  91                         <div class="item required"
  92                                 ng-show="!widgetOnboardingDetails.widget.allUser">
  93                                 <div class="item-label">Application Name</div>
  94                                 <div>
  95                                         <multiple-select id="widget-applications" unique-data="{{$index}}"
  96                                                 placeholder="Select Applications"
  97                                                 ng-model="widgetOnboardingDetails.availableApps"
  98                                                 on-change="widgetOnboardingDetails.appUpdate()" name-attr="name"
  99                                                 value-attr="isSelected"> </multiple-select>
 100                                 </div>
 101                                 <div class="error-container"
 102                                         ng-show="widgetOnboardingDetails.appCounter == 0">
 103                                         <div id="widgets-details-input-name-conflict" class="err-message">Please
 104                                                 select at least one Application</div>
 105                                 </div>
 106                         </div>
 107
 108                         <div class="item" ng-show="!widgetOnboardingDetails.widget.allUser">
 109                                 <div ng-show="widgetOnboardingDetails.hasSelectedApp"
 110                                         class="item-label">User Role Name</div>
 111                                 <div ng-repeat="appRoles in widgetOnboardingDetails.availableApps"
 112                                         id="roles-{{appRoles.roles.split(' ').join('-')}}">
 113                                         <div class="item required">
 114                                                 <div class="app-item-left" ng-show="appRoles.isSelected">{{appRoles.name}}</div>
 115                                                 <div class="app-item-right" ng-show="appRoles.isSelected">
 116                                                         <multiple-select id="widget-roles-by-application"
 117                                                                 unique-data="{{$index}}" placeholder="Select Roles"
 118                                                                 ng-model="appRoles.roles" name-attr="name"
 119                                                                 on-change="widgetOnboardingDetails.roleUpdate(appRoles)"
 120                                                                 value-attr="isSelected"></multiple-select>
 121                                                         <div class="error-container" ng-show="!appRoles.roleSelected">
 122                                                                 <div id="widgets-details-input-name-conflict"
 123                                                                         class="err-message">Please select at least one role</div>
 124                                                         </div>
 125                                                 </div>
 126                                         </div>
 127                                 </div>
 128                         </div>
 129
 130                         <div class="item required">
 131                                 <div class="item-label">Upload Widget</div>
 132                                 <div>
 133                                         <input id="widget-onboarding-details-upload-file"
 134                                                 file-model="widgetOnboardingDetails.widget.file" type="file"
 135                                                 class="widget-onboarding-details-upload-file ht" />
 136
 137
 138                                         <div class="error-container"
 139                                                 ng-show="widgetOnboardingDetails.widget.file == undefined && !widgetOnboardingDetails.isEditMode">
 140                                                 <div class="err-message">Please upload your widget (.zip)</div>
 141                                         </div>
 142                                 </div>
 143                         </div>
 144                 </form>
 145         </div>
 146                         </div>
 147                         <br>
 148                         <div class="b2b-modal-footer">
 149                                 <div class="cta-button-group cta-modal-footer-flex">
 150                                         <span class="ecomp-save-spinner" ng-show="widgetOnboardingDetails.isSaving"></span>
 151                                         <button id="widgets-details-save-button" class="btn btn-alt btn-small"  ng-class="{disabled: widgetOnboardingDetails.widget.name == undefined || !widgetOnboardingDetails.duplicatedName
 152                                         || (!widgetOnboardingDetails.widget.allUser && widgetOnboardingDetails.appCounter == 0) || (widgetOnboardingDetails.widget.file == undefined && !widgetOnboardingDetails.isEditMode)
 153                                         || (!widgetOnboardingDetails.widget.allUser && !widgetOnboardingDetails.allRoleSelected) || (widgetOnboardingDetails.widget.saving)}"
 154                                         ng-click="widgetOnboardingDetails.saveChanges()">Save</button>
 155                                         <button class="btn btn-alt btn-small" id="widgets-details-cancel-button" ng-click="$dismiss('cancel')">Cancel</button>
 156                                 </div>
 157                         </div>
 158
 159
 160
 161
 162
 163 </div>