diff options
Diffstat (limited to 'ecomp-portal-FE-common/client/app/views/widget-onboarding')
8 files changed, 1162 insertions, 0 deletions
diff --git a/ecomp-portal-FE-common/client/app/views/widget-onboarding/widget-details-dialog/widget-details.controller.js b/ecomp-portal-FE-common/client/app/views/widget-onboarding/widget-details-dialog/widget-details.controller.js new file mode 100644 index 00000000..0a9dd12c --- /dev/null +++ b/ecomp-portal-FE-common/client/app/views/widget-onboarding/widget-details-dialog/widget-details.controller.js @@ -0,0 +1,381 @@ +/*-
+ * ================================================================================
+ * ECOMP Portal
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property
+ * ================================================================================
+ * 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.
+ * ================================================================================
+ */
+'use strict';
+(function () {
+ class WidgetOnboardingDetailsModalCtrl {
+ constructor($scope, $log, $interval, applicationsService, adminsService, microserviceService, widgetsCatalogService, errorMessageByCode, ECOMP_URL_REGEX, $window,userProfileService, confirmBoxService, $cookies) {
+
+ this.appUpdate = function(){
+ this.hasSelectedApp = false;
+ this.appCounter = 0;
+ for(var i = 0; i < this.availableApps.length; i++){
+ if(this.availableApps[i].isSelected){
+ this.appCounter++;
+ if(!this.hasSelectedApp)
+ this.hasSelectedApp = true;
+ }
+ if(this.availableApps[i].isSelected
+ && this.availableApps[i].roles.length == 0){
+ var index = i;
+ this.availableRoles = [];
+ adminsService.getRolesByApp(this.availableApps[i].id).then(roles => {
+ for(var i = 0; i < roles.length; i++){
+ this.availableRoles.push({
+ id: roles[i].id,
+ name: roles[i].name,
+ isSelected: false,
+ });
+ }
+ this.availableApps[index].roles = this.availableRoles;
+ });
+ }
+ }
+ this.allRoleSelected = true;
+ this.checkRoleSelected();
+ }
+
+ this.roleUpdate = function(app){
+ this.allRoleSelected = true;
+ for(var i = 0; i < app.roles.length; i++){
+ if(app.roles[i].isSelected){
+ app.roleSelected = true;
+ this.checkRoleSelected();
+ return;
+ }
+ }
+ app.roleSelected = false;
+ this.checkRoleSelected();
+ }
+
+ this.checkRoleSelected = function(){
+ for(var i = 0; i < this.availableApps.length; i++){
+ if(this.availableApps[i].isSelected
+ && !this.availableApps[i].roleSelected){
+ this.allRoleSelected = false;
+ return;
+ }
+ }
+ }
+
+ this.getAppName = function(appId){
+ for(var i = 0; i < this.availableApps.length; i++){
+ if(this.availableApps[i].id == appId){
+ return this.availableApps[i].name;
+ }
+ }
+ }
+
+ let newWidgetModel = {
+ name: null,
+ roleId: null,
+ roleName: null,
+ appId: null,
+ appName: null,
+ url: null,
+ showAppOptions: false,
+ showRoleOptions: false,
+ hasSelectedApp: false
+ };
+
+ let getAvailableApps = () => {
+
+ if(this.isEditMode == false){
+ applicationsService.getAppsForSuperAdminAndAccountAdmin().then(apps => {
+ this.availableApps=[];
+ for(var i=0;i<apps.length;i++) {
+ if (!apps[i].restrictedApp) {
+ this.availableApps.push({
+ id: apps[i].id,
+ name: apps[i].name,
+ roles: [],
+ roleSelected: false,
+ isSelected: false,
+ });
+ }
+ }
+ }).catch(err => {
+ $log.error(err);
+ });
+ }
+ else if(this.isEditMode == true){
+ if(this.widget.allowAllUser == "Y")
+ this.widget.allUser = true;
+ applicationsService.getAppsForSuperAdminAndAccountAdmin().then(apps => {
+ this.availableApps=[];
+ let selectedApps = {};
+ var availableApps = this.availableApps;
+ this.allRoleSelected = true;
+ for(var i=0; i < this.widget.widgetRoles.length; i++){
+ if(selectedApps[this.widget.widgetRoles[i].app.appId] != undefined)
+ selectedApps[this.widget.widgetRoles[i].app.appId] += this.widget.widgetRoles[i].roleId + ";" + this.widget.widgetRoles[i].roleName + ";";
+ else{
+ selectedApps[this.widget.widgetRoles[i].app.appId] = this.widget.widgetRoles[i].roleId + ";" + this.widget.widgetRoles[i].roleName + ";";
+ this.appCounter++;
+ }
+ }
+ apps.forEach(function(app, index){
+ availableApps.push({
+ id: app.id,
+ name: app.name,
+ roles: [],
+ roleSelected: false,
+ isSelected: false,
+ });
+ if(selectedApps[app.id] != undefined){
+ adminsService.getRolesByApp(app.id).then(roles => {
+ var role = selectedApps[app.id].split(';');
+ var selectedRoles = [];
+ var n = 0;
+ while((n+1) < role.length){
+ selectedRoles.push({
+ id: role[n++],
+ name: role[n++],
+ isSelected: true,
+ });
+ }
+ for(var m = 0; m < roles.length; m++){
+ var hasSelected = true;
+ for(var n = 0; n < selectedRoles.length; n++){
+ if(selectedRoles[n].id == roles[m].id){
+ hasSelected = false;
+ break;
+ }
+ }
+ if(hasSelected){
+ selectedRoles.push({
+ id: roles[m].id,
+ name: roles[m].name,
+ isSelected: false,
+ });
+ }
+ }
+ availableApps[index].roleSelected = true;
+ availableApps[index].isSelected = true;
+ availableApps[index].roles = selectedRoles;
+ });
+ }
+ })
+ })
+ }
+ };
+
+ let getAvailableServices = () =>{
+ microserviceService.getServiceList().then(services => {
+ this.availableServices = [];
+ for(var i = 0; i < services.length; i++){
+ this.availableServices.push({
+ id: services[i].id,
+ name: services[i].name,
+ option: services[i].name + ": " + services[i].url
+ });
+
+ if(this.widget.service != null && this.widget.service.id == services[i].id){
+ this.widget.serviceURL = this.availableServices[i];
+ }
+ }
+ }).catch(err => {
+ $log.error(err);
+ });
+ }
+
+
+ let init = () => {
+ $log.info('WidgetOnboardingDetailsModalCtrl::init');
+ this.widgetsList = [];
+ this.duplicatedName = true;
+ this.allRoleSelected = false;
+ this.appCounter = 0;
+ this.isSaving = false;
+ this.allUser = false;
+ this.emptyWidgetName = false;
+
+ if ($scope.ngDialogData && $scope.ngDialogData.widget) {
+ this.isEditMode = true;
+ this.allRoleSelected = true;
+ this.widget = _.clone($scope.ngDialogData.widget);
+ } else {
+ this.isEditMode = false;
+ this.widget = _.clone(newWidgetModel);
+ }
+
+ widgetsCatalogService.getManagedWidgets().then(res => {
+ for(var i = 0; i < res.length; i++){
+ this.widgetsList.push(res[i].name);
+ }
+ }).catch(err => {
+ $log.error('WidgetOnboardingDetailsModalCtrl::init error: ' + err);
+ }).finally(()=> {
+ this.isLoadingTable = false;
+ });
+ getAvailableApps();
+ getAvailableServices();
+ };
+ this.ECOMP_URL_REGEX = ECOMP_URL_REGEX;
+ this.conflictMessages = {};
+ this.scrollApi = {};
+
+ let resetConflict = fieldName => {
+ delete this.conflictMessages[fieldName];
+ if($scope.widgetForm[fieldName]){
+ $scope.widgetForm[fieldName].$setValidity('conflict', true);
+ }
+ };
+
+ this.updateSelectedRole = () => {
+ if (!this.selectedRole) {
+ return;
+ }
+ this.widget.RoleId = this.selectedRole.id;
+ this.widget.RoleName = this.selectedRole.name;
+ };
+
+ let emptyCookies = () => {
+ userProfileService.getUserProfile()
+ .then(profile=> {
+ $log.info('AppDetailsModalCtrl::emptyCookies profile: ', profile);
+ $scope.orgUserId = profile.orgUserId;
+ $log.info('user has the following orgUserId: ' + profile.orgUserId);
+ if ($cookies.getObject($scope.orgUserId + '_widget') != undefined && $cookies.getObject($scope.orgUserId + '_widget') != null) {
+ $cookies.remove($scope.orgUserId + '_widget');
+ }
+ });
+ };
+
+ this.updateWidgetName = () => {
+ for(var i = 0; i < this.widgetsList.length; i++){
+ if(this.widget.name.toUpperCase() == this.widgetsList[i].toUpperCase()){
+ this.duplicatedName = false;
+ return;
+ }
+ }
+ this.duplicatedName = true;
+ };
+
+ this.saveChanges = () => {
+
+ if(!this.isEditMode)
+ this.updateWidgetName();
+
+ if(this.duplicatedName == false
+ || this.widget.name == ''
+ || this.widget.name == undefined){
+ this.emptyWidgetName = true;
+ return;
+ }
+
+ if((this.widget.file == undefined && !this.isEditMode) ||
+ (!this.widget.allUser && this.appCounter == 0) ||
+ this.widget.name == null ||
+ (!this.widget.allUser && !this.allRoleSelected) ||
+ this.widget.saving == true)
+ return;
+
+
+ this.widget.saving = true;
+ var selectedRoles = [];
+ if(!this.widget.allUser){
+ for(var i = 0; i < this.availableApps.length; i++){
+ if(this.availableApps[i].isSelected){
+ for(var n = 0; n < this.availableApps[i].roles.length; n++) {
+ if(this.availableApps[i].roles[n].isSelected){
+ var role = {
+ app: {
+ appId: this.availableApps[i].id
+ },
+ roleId: this.availableApps[i].roles[n].id,
+ roleName: this.availableApps[i].roles[n].name,
+ };
+ selectedRoles.push(role);
+ }
+ }
+ }
+ }
+ }
+
+ var allowAllUser = 0;
+ if(this.widget.allUser)
+ allowAllUser = 1;
+
+ var serviceId = null;
+ if(this.widget.serviceURL != null &&
+ this.widget.serviceURL != undefined){
+ serviceId = this.widget.serviceURL.id;
+ }
+
+
+ var file_loc = this.widget.name + ".zip";
+ var newWidget = {
+ name: this.widget.name,
+ desc: this.widget.desc,
+ widgetRoles: selectedRoles,
+ fileLocation: file_loc,
+ allowAllUser: allowAllUser,
+ serviceId: serviceId
+ };
+
+ if(this.isEditMode){
+
+ if(this.widget.file != undefined){
+ widgetsCatalogService.updateWidgetWithFile(this.widget.file, this.widget.id, newWidget).then(res => {
+ if(!res.valid){
+ if(!res.error){
+ confirmBoxService.showInformation("Could not save. Please retry.");
+ this.widget.saving = false;
+ return;
+ }
+ confirmBoxService.showInformation(res.error);
+ this.widget.saving = false;
+ return;
+ }
+ $scope.closeThisDialog(true);
+ this.widget.saving = false;
+ });
+ }
+ else{
+ widgetsCatalogService.updateWidget(this.widget.id, newWidget)
+ .then(() => {
+ $scope.closeThisDialog(true);
+ });
+ }
+ }
+ else{
+ widgetsCatalogService.createWidget(newWidget, this.widget.file).then(res => {
+ if(!res.valid){
+ if(!res.error)
+ confirmBoxService.showInformation("Could not save. Please retry.");
+ else
+ confirmBoxService.showInformation(res.error);
+ this.widget.saving = false;
+ return;
+ }
+ $scope.closeThisDialog(true);
+ this.widget.saving = false;
+ });
+ }
+ };
+ init();
+ $scope.$on('$stateChangeStart', e => {
+ e.preventDefault();
+ });
+ }
+ }
+ WidgetOnboardingDetailsModalCtrl.$inject = ['$scope', '$log', '$interval', 'applicationsService', 'adminsService', 'microserviceService', 'widgetsCatalogService', 'errorMessageByCode', 'ECOMP_URL_REGEX', '$window','userProfileService', 'confirmBoxService', '$cookies'];
+ angular.module('ecompApp').controller('WidgetOnboardingDetailsModalCtrl', WidgetOnboardingDetailsModalCtrl);
+})();
diff --git a/ecomp-portal-FE-common/client/app/views/widget-onboarding/widget-details-dialog/widget-details.controller.spec.js b/ecomp-portal-FE-common/client/app/views/widget-onboarding/widget-details-dialog/widget-details.controller.spec.js new file mode 100644 index 00000000..1762fadb --- /dev/null +++ b/ecomp-portal-FE-common/client/app/views/widget-onboarding/widget-details-dialog/widget-details.controller.spec.js @@ -0,0 +1,154 @@ +/*-
+ * ================================================================================
+ * ECOMP Portal
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property
+ * ================================================================================
+ * 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.
+ * ================================================================================
+ */
+// 'use strict';
+// describe('Controller: WidgetDetailsModalCtrl', ()=> {
+// /**
+// * INITIALIZATION
+// */
+// beforeEach(module('testUtils'));
+// beforeEach(module('ecompApp'));
+//
+// let promisesTestUtils;
+// //destroy $http default cache before starting to prevent the error 'default cache already exists'
+// //_promisesTestUtils_ comes from testUtils for promises resolve/reject
+// beforeEach(inject((_CacheFactory_, _promisesTestUtils_)=> {
+// _CacheFactory_.destroyAll();
+// promisesTestUtils = _promisesTestUtils_;
+// }));
+//
+// let widgetDetails, scope, $controller, $q, $rootScope, $log, widgetsService, errorMessageByCode, ECOMP_URL_REGEX;
+// let deferredAdminApps, deferredUserProfile;
+// let applicationsServiceMock, widgetsServiceMock, userProfileServiceMock;
+// beforeEach(inject((_$controller_, _$q_, _$rootScope_, _$log_)=> {
+// [$controller, $q, $rootScope, $log] = [_$controller_, _$q_, _$rootScope_, _$log_];
+//
+// deferredAdminApps = $q.defer();
+// deferredUserProfile = $q.defer();
+// /*applicationsServiceMock = {
+// getAppsForSuperAdminAndAccountAdmin: () => {
+// var promise = () => {return deferredAdminApps.promise};
+// var cancel = jasmine.createSpy();
+// return {
+// promise: promise,
+// cancel: cancel
+// }
+// }
+// };*/
+//
+// widgetsServiceMock = {
+// updateWidget: () => {
+// var promise = () => {return deferredAdminApps.promise};
+// var cancel = jasmine.createSpy();
+// return {
+// promise: promise,
+// cancel: cancel
+// }
+// },
+// createWidget: () => {
+// var promise = () => {return deferredAdminApps.promise};
+// var cancel = jasmine.createSpy();
+// return {
+// promise: promise,
+// cancel: cancel
+// }
+// }
+// };
+//
+// userProfileServiceMock = jasmine.createSpyObj('userProfileServiceMock',['getUserProfile']);
+// userProfileServiceMock.getUserProfile.and.returnValue(deferredUserProfile.promise);
+//
+// applicationsServiceMock = jasmine.createSpyObj('applicationsServiceMock',['getAppsForSuperAdminAndAccountAdmin']);
+// applicationsServiceMock.getAppsForSuperAdminAndAccountAdmin.and.returnValue(deferredAdminApps.promise);
+//
+// }));
+//
+// beforeEach(()=> {
+// errorMessageByCode = [];
+// ECOMP_URL_REGEX = "";
+// scope = $rootScope.$new();
+// createController(scope);
+// });
+//
+// let createController = scopeObj => {
+// widgetDetails = $controller('WidgetDetailsModalCtrl', {
+// $scope: scope,
+// $log: $log,
+// applicationsService: applicationsServiceMock,
+// widgetsService: widgetsServiceMock,
+// errorMessageByCode: errorMessageByCode,
+// ECOMP_URL_REGEX: ECOMP_URL_REGEX,
+// userProfileService: userProfileServiceMock
+// });
+// };
+//
+// /**
+// * MOCK DATA
+// */
+// let newWidgetModel = {
+// name: null,
+// appId: null,
+// appName: null,
+// width: 360,
+// height: 300,
+// url: null
+// };
+// let exsistingWidget = {
+// name: 'some widget',
+// appId: 1,
+// appName: 'APP NAME',
+// width: 360,
+// height: 300,
+// url: 'http://a.com'
+// };
+// let adminApps = [{id: 1, name: 'a'}, {id: 2, name: 'b'}];
+//
+// /**
+// * TEST CASES
+// */
+// it('should initialize controller with new widget mode when opening the modal without selected widget', ()=> {
+// expect(widgetDetails.widget).toEqual(newWidgetModel);
+// });
+//
+// it('should initialize controller with exsisting widget details when opening the modal with selected widget', ()=> {
+// scope.ngDialogData = {
+// widget: exsistingWidget
+// };
+// createController(scope);
+// expect(widgetDetails.widget).toEqual(exsistingWidget);
+// });
+//
+// it('should populate widget selected app name and id when initializing controller with widget', () =>{
+// deferredAdminApps.resolve(adminApps);
+// scope.ngDialogData = {
+// widget: exsistingWidget
+// };
+// createController(scope);
+// scope.$apply();
+// expect(widgetDetails.widget.appId).toEqual(adminApps[0].id);
+// expect(widgetDetails.widget.appName).toEqual(adminApps[0].name);
+// });
+//
+// //TODO:
+// //save changes fail - conflict handling
+// //save changes success
+//
+//
+//
+// });
diff --git a/ecomp-portal-FE-common/client/app/views/widget-onboarding/widget-details-dialog/widget-details.modal.html b/ecomp-portal-FE-common/client/app/views/widget-onboarding/widget-details-dialog/widget-details.modal.html new file mode 100644 index 00000000..2fa56443 --- /dev/null +++ b/ecomp-portal-FE-common/client/app/views/widget-onboarding/widget-details-dialog/widget-details.modal.html @@ -0,0 +1,156 @@ +<!--
+ ================================================================================
+ ECOMP Portal
+ ================================================================================
+ Copyright (C) 2017 AT&T Intellectual Property
+ ================================================================================
+ 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.
+ ================================================================================
+ -->
+<div class="widget-details-modal">
+ <div id="'widgets-details-title" class="title">Widget Details</div>
+
+ <div class="widget-properties-main"
+ scroll-top="widgetOnboardingDetails.scrollApi">
+ <form id="widgets-details-form" name="widgetForm" novalidate
+ autocomplete="off">
+
+ <div class="item required">
+ <div class="item-label">Widget Name</div>
+ <input id="widgets-details-input-name" class="input-field"
+ type="text" ng-model="widgetOnboardingDetails.widget.name"
+ ng-change="widgetOnboardingDetails.updateWidgetName()" name="name"
+ ng-pattern="/^[\w -]*$/" maxlength="100"
+ ng-disabled="widgetOnboardingDetails.isEditMode" required />
+
+ <div class="error-container"
+ ng-show="(widgetOnboardingDetails.emptyWidgetName || widgetForm.name.$dirty) && !widgetOnboardingDetails.duplicatedName">
+ <div id="widgets-details-input-name-conflict" class="err-message">Name
+ not available - choose different name</div>
+ </div>
+
+ <div class="error-container"
+ ng-show="(widgetOnboardingDetails.emptyWidgetName || widgetForm.name.$dirty) && widgetOnboardingDetails.duplicatedName">
+ <div ng-messages="widgetForm.name.$error" class="error-container">
+ <small id="widgets-details-input-name-required"
+ class="err-message" ng-message="required">Widget Name is
+ required</small> <small id="widgets-details-input-name-pattern"
+ class="err-message" ng-message="pattern">Widget Name must
+ be letters, numbers, or underscore</small>
+ </div>
+ </div>
+ </div>
+
+
+ <div class="item">
+ <div class="item-label">Widget Description</div>
+ <input id="widgets-details-input-name" class="input-field"
+ type="text" ng-model="widgetOnboardingDetails.widget.desc"
+ name="desc" maxlength="200" />
+ </div>
+
+ <div class="widget-property">
+ <input id="widgets-checkbox-app-is-enabled" type="checkbox"
+ class="checkbox-field"
+ ng-model="widgetOnboardingDetails.widget.allUser" />
+ <div class="property-label checkbox-label">Allow all user
+ access</div>
+ </div>
+
+
+ <div class="item" ng-show="!widgetOnboardingDetails.isEditMode">
+ <div class="item-label">Service Endpoint</div>
+ <div>
+ <select id="widgets-details-input-endpoint-url" name="url"
+ class="input-field"
+ ng-model="widgetOnboardingDetails.widget.serviceURL"
+ ng-options="service as service.option
+ for service in widgetOnboardingDetails.availableServices">
+ <option value="" selected="selected">Select Microservice
+ Endpoint</option>
+ </select>
+ </div>
+ </div>
+
+ <div class="item required"
+ ng-show="!widgetOnboardingDetails.widget.allUser">
+ <div class="item-label">Application Name</div>
+ <div>
+ <multiple-select id="widget-applications" unique-data="{{$index}}"
+ placeholder="Select Applications"
+ ng-model="widgetOnboardingDetails.availableApps"
+ on-change="widgetOnboardingDetails.appUpdate()" name-attr="name"
+ value-attr="isSelected"> </multiple-select>
+ </div>
+ <div class="error-container"
+ ng-show="widgetOnboardingDetails.appCounter == 0">
+ <div id="widgets-details-input-name-conflict" class="err-message">Please
+ select at least one Application</div>
+ </div>
+ </div>
+
+ <div class="item" ng-show="!widgetOnboardingDetails.widget.allUser">
+ <div ng-show="widgetOnboardingDetails.hasSelectedApp"
+ class="item-label">User Role Name</div>
+ <div ng-repeat="appRoles in widgetOnboardingDetails.availableApps"
+ id="roles-{{appRoles.roles.split(' ').join('-')}}">
+ <div class="item required">
+ <div class="app-item-left" ng-show="appRoles.isSelected">{{appRoles.name}}</div>
+ <div class="app-item-right" ng-show="appRoles.isSelected">
+ <multiple-select id="widget-roles-by-application"
+ unique-data="{{$index}}" placeholder="Select Roles"
+ ng-model="appRoles.roles" name-attr="name"
+ on-change="widgetOnboardingDetails.roleUpdate(appRoles)"
+ value-attr="isSelected"></multiple-select>
+ <div class="error-container" ng-show="!appRoles.roleSelected">
+ <div id="widgets-details-input-name-conflict"
+ class="err-message">Please select at least one role</div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <div class="item required">
+ <div class="item-label">Upload Widget</div>
+ <div>
+ <input id="widget-onboarding-details-upload-file"
+ file-model="widgetOnboardingDetails.widget.file" type="file"
+ style="height: 24px;" />
+
+
+ <div class="error-container"
+ ng-show="widgetOnboardingDetails.widget.file == undefined && !widgetOnboardingDetails.isEditMode">
+ <div class="err-message">Please upload your widget (.zip)</div>
+ </div>
+ </div>
+ </div>
+ </form>
+ </div>
+
+ <div class="dialog-control">
+ <span class="ecomp-save-spinner"
+ ng-show="widgetOnboardingDetails.isSaving"></span>
+ <button id="widgets-details-save-button" class="btn btn-alt btn-small"
+ ng-class="{disabled: widgetOnboardingDetails.widget.name == undefined || !widgetOnboardingDetails.duplicatedName
+ || (!widgetOnboardingDetails.widget.allUser && widgetOnboardingDetails.appCounter == 0) || (widgetOnboardingDetails.widget.file == undefined && !widgetOnboardingDetails.isEditMode)
+ || (!widgetOnboardingDetails.widget.allUser && !widgetOnboardingDetails.allRoleSelected) || (widgetOnboardingDetails.widget.saving)}"
+ ng-click="widgetOnboardingDetails.saveChanges()">Save</button>
+ <button id="widgets-details-cancel-button"
+ class="btn btn-alt btn-small" ng-click="closeThisDialog()">Cancel</button>
+
+ </div>
+
+
+
+</div>
diff --git a/ecomp-portal-FE-common/client/app/views/widget-onboarding/widget-details-dialog/widget-details.modal.less b/ecomp-portal-FE-common/client/app/views/widget-onboarding/widget-details-dialog/widget-details.modal.less new file mode 100644 index 00000000..d7cf2671 --- /dev/null +++ b/ecomp-portal-FE-common/client/app/views/widget-onboarding/widget-details-dialog/widget-details.modal.less @@ -0,0 +1,102 @@ +.widget-details-modal { + height: 580px; + .title { + //.n18r; + .dGray18r; //AT&T Dark Gray + border-bottom: @portalDBlue 3px solid; + } + .widget-input-field{ + width:250px; + } + .widget-properties-main { + padding: 16px; + height: 460px; + overflow-y: auto; + + .widget-property{ + position: relative; + margin-bottom: 18px; + .property-label{ + .dGray14r; + } + .checkbox-label{ + display: inline-block; + padding-left: 3px; + } + .checkbox-field{ + padding: 0; + margin: 0; + vertical-align: middle; + position: relative; + top: -1px; + height:15px; + } + + } + .widget-upload-field{ + height:24px; + border: 0px solid #d2d2d2; + box-shadow: 0px 0px 2px -2px rgba(0, 0, 0, 0.08) inset; + padding-left: 2px; + } + .item{ + position: relative; + margin-bottom: 18px; + + .input-field{ + .custom-input-field; + width: 100%; + &.url{ + width: 78%; + display: inline-block; + } + } + + .select-field { + .custom-select-field; + } + + .item-label{ + .dGray14r; + } + + .right-item{ + position: relative; + display: inline-block; + width: 48%; + float: right; + } + .left-item{ + display: inline-block; + width: 48%; + } + + .url-validation-button{ + .btn-blue; + width: 20%; + display: inline-block; + float: right; + } + + .error-container{ + position: absolute; + width: 280px; + display: block; + height: 12px; + line-height: 12px; + + .err-message{ + color: @funcRed; + font-size: 9px; + } + .valid-message{ + color: @funcGreen; + font-size: 9px; + } + } + + } + + } + +} diff --git a/ecomp-portal-FE-common/client/app/views/widget-onboarding/widget-onboarding.controller.js b/ecomp-portal-FE-common/client/app/views/widget-onboarding/widget-onboarding.controller.js new file mode 100644 index 00000000..a9e5c416 --- /dev/null +++ b/ecomp-portal-FE-common/client/app/views/widget-onboarding/widget-onboarding.controller.js @@ -0,0 +1,204 @@ +/*-
+ * ================================================================================
+ * ECOMP Portal
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property
+ * ================================================================================
+ * 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.
+ * ================================================================================
+ */
+'use strict';
+(function () {
+ class WidgetOnboardingCtrl {
+ constructor($log, applicationsService, widgetsCatalogService, ngDialog, confirmBoxService,
+ userProfileService, $cookies, $scope) {
+ $scope.infoMessage = true;
+
+ let populateAvailableApps = widgets => {
+ let allPortalsFilterObject = {index: 0, title: 'All applications', value: ''};
+ this.availableApps = [allPortalsFilterObject];
+ this.filterByApp = this.availableApps[0];
+ applicationsService.getAppsForSuperAdminAndAccountAdmin().then(myApps => {
+ var reSortedApp = myApps.sort(getSortOrder("name"));
+ var realAppIndex = 1;
+ for (let i = 1; i <= reSortedApp.length; i++) {
+ if (!reSortedApp[i-1].restrictedApp) {
+ this.availableApps.push({
+ index: realAppIndex,
+ title: reSortedApp[i - 1].name,
+ value: reSortedApp[i - 1].name
+ })
+ realAppIndex = realAppIndex + 1;
+ }
+ }
+ }).catch(err => {
+ $log.error('WidgetOnboardingCtrl:getAppsForSuperAdmin failed', err);
+ });
+ };
+
+ let getOnboardingWidgets = () => {
+ this.isLoadingTable = true;
+ this.isCommError = false;
+ widgetsCatalogService.getManagedWidgets().then(res => {
+ if(!(res instanceof Array)){
+ this.isCommError = true;
+ return;
+ }
+
+ var reSortedWidget = res.sort(getSortOrder("name"));
+ $scope.widgetsList = reSortedWidget;
+ for(var i = 0; i < $scope.widgetsList.length; i++){
+ let set = new Set();
+ var info = "";
+ var appContent = [];
+ var appName = [];
+ for(var n = 0; n < $scope.widgetsList[i].widgetRoles.length; n++){
+ set.add($scope.widgetsList[i].widgetRoles[n].app.appName);
+ }
+ if($scope.widgetsList[i].allowAllUser == "Y"){
+ info = "All Applications";
+ appContent.push("All Applications");
+ appName.push("All Applications");
+ }
+
+ set.forEach(function (item) {
+ info = item.toString() + " - ";
+ for(var n = 0; n < $scope.widgetsList[i].widgetRoles.length; n++){
+ if(item.toString() == $scope.widgetsList[i].widgetRoles[n].app.appName){
+ info += $scope.widgetsList[i].widgetRoles[n].roleName + "; ";
+ }
+ }
+ appContent.push(info);
+ appName.push(item.toString());
+ });
+ $scope.widgetsList[i].appContent = appContent;
+ $scope.widgetsList[i].appName = appName;
+ }
+ populateAvailableApps(reSortedWidget);
+ }).catch(err => {
+ // Land here when the micro service is down
+ $log.error('WidgetOnboardingCtrl::getOnboardingWidgets caught error', err);
+ }).finally(()=> {
+ this.isLoadingTable = false;
+ });
+
+ };
+
+
+ // Refactor this into a directive
+ let getSortOrder = (prop) => {
+ return function(a, b) {
+ if (a[prop].toLowerCase() > b[prop].toLowerCase()) {
+ return 1;
+ } else if (a[prop].toLowerCase() < b[prop].toLowerCase()) {
+ return -1;
+ }
+ return 0;
+ }
+ }
+
+ $scope.hideMe = function () {
+ $scope.infoMessage = false;
+ }
+
+ let init = () => {
+ this.isLoadingTable = false;
+ getOnboardingWidgets();
+ this.searchString = '';
+ this.widgetsTableHeaders = [
+ {name: 'Widget Name', value: 'name', isSortable: false}
+ ];
+ $scope.widgetsList = [];
+ };
+
+ this.filterByDropdownValue = item => {
+ if(this.filterByApp.value === '')
+ return true;
+
+ for(var i = 0; i < item.appName.length; i++){
+ if(item.appName[i] == this.filterByApp.value
+ || item.appName[i] == 'All Applications'){
+ return true;
+ }
+ }
+ return false;
+ };
+
+ this.openWidgetCatalogDetailsModal = (selectedWidget) => {
+ let data = null;
+ if(selectedWidget){
+ if(!selectedWidget.id){
+ $log.error('WidgetOnboardingCtrl:openWidgetCatalogDetailModal: widget id not found');
+ return;
+ }
+ data = {
+ widget: selectedWidget
+ }
+ }
+ ngDialog.open({
+ templateUrl: 'app/views/widget-onboarding/widget-details-dialog/widget-details.modal.html',
+ controller: 'WidgetOnboardingDetailsModalCtrl',
+ controllerAs: 'widgetOnboardingDetails',
+ data: data
+ }).closePromise.then(needUpdate => {
+ if(needUpdate.value === true){
+ getOnboardingWidgets();
+ }
+ });
+ };
+
+ this.deleteWidget = widget => {
+
+ confirmBoxService.deleteItem(widget.name).then(isConfirmed => {
+ if(isConfirmed){
+ if(!widget || !widget.id){
+ $log.error('WidgetOnboardingCtrl::deleteWidget: No widget or ID... cannot delete');
+ return;
+ }
+ widgetsCatalogService.deleteWidget(widget.id).then(() => {
+ $scope.widgetsList.splice($scope.widgetsList.indexOf(widget), 1);
+ }).catch(err => {
+ $log.error('WidgetOnboardingCtrl::deleteWidget error:',err);
+ });
+ }
+ }).catch(err => {
+ $log.error('WidgetOnboardingCtrl::deleteWidget error:',err);
+ });
+
+ };
+
+
+ this.downloadWidget = widget => {
+ widgetsCatalogService.downloadWidgetFile(widget.id).then(res => {
+ var data = res;
+ var filename = widget.name + ".zip";
+
+ if (data == undefined || data == null){
+ confirmBoxService.showInformation("Could not download. Please retry.");
+ return;
+ }
+ var a = document.createElement('a');
+ var blob = new Blob([data], {type: 'application/octet-stream'});
+ a.href = URL.createObjectURL(blob);
+ a.download = filename;
+ a.click();
+ });
+ };
+
+ init();
+ }
+ }
+ WidgetOnboardingCtrl.$inject = ['$log', 'applicationsService', 'widgetsCatalogService', 'ngDialog', 'confirmBoxService',
+ 'userProfileService','$cookies', '$scope'];
+ angular.module('ecompApp').controller('WidgetOnboardingCtrl', WidgetOnboardingCtrl);
+})();
diff --git a/ecomp-portal-FE-common/client/app/views/widget-onboarding/widget-onboarding.controller.spec.js b/ecomp-portal-FE-common/client/app/views/widget-onboarding/widget-onboarding.controller.spec.js new file mode 100644 index 00000000..77659d93 --- /dev/null +++ b/ecomp-portal-FE-common/client/app/views/widget-onboarding/widget-onboarding.controller.spec.js @@ -0,0 +1,20 @@ +/*-
+ * ================================================================================
+ * ECOMP Portal
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property
+ * ================================================================================
+ * 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.
+ * ================================================================================
+ */
+
diff --git a/ecomp-portal-FE-common/client/app/views/widget-onboarding/widget-onboarding.less b/ecomp-portal-FE-common/client/app/views/widget-onboarding/widget-onboarding.less new file mode 100644 index 00000000..f832b8f9 --- /dev/null +++ b/ecomp-portal-FE-common/client/app/views/widget-onboarding/widget-onboarding.less @@ -0,0 +1,32 @@ +.widget-onboarding{ + .bg_portalWhite;//white for 1702 + position: @page-main-position; + top: @page-main-top; + left: @page-main-left; + right: @page-main-right; + bottom: @page-main-bottom; + padding-top: @padding-top; + overflow-y: @page-main-overflow-y; + padding-left: @padding-left-side; + #widget-onboarding-table-search::-webkit-input-placeholder, +{ +font-style: italic; + color: #999999; + +} + + .widgets-table { + width: @table-width; + margin: 0 auto; + } + + .delete-widget{ + .ico_trash_default; + } + .c-ecomp-abs-select{ + width: 440px; + display: inline-block; + margin-right: 10px; + } + +} diff --git a/ecomp-portal-FE-common/client/app/views/widget-onboarding/widget-onboarding.tpl.html b/ecomp-portal-FE-common/client/app/views/widget-onboarding/widget-onboarding.tpl.html new file mode 100644 index 00000000..808deb8c --- /dev/null +++ b/ecomp-portal-FE-common/client/app/views/widget-onboarding/widget-onboarding.tpl.html @@ -0,0 +1,113 @@ +<!--
+ ================================================================================
+ ECOMP Portal
+ ================================================================================
+ Copyright (C) 2017 AT&T Intellectual Property
+ ================================================================================
+ 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.
+ ================================================================================
+ -->
+<div class="w-ecomp-main">
+ <div class="w-ecomp-main-container">
+ <div class="widget-onboarding" id="page-content">
+ <div id="title" class="w-ecomp-main-view-title">
+ <h1 class="heading-page">Widget Onboarding</h1>
+ </div>
+ <div class="widgets-table">
+ <div class="table-control">
+ <div class="c-ecomp-abs-select default">
+ <div class="table-dropdown">
+ <select id="dropdown1" name="dropdown1" b2b-dropdown
+ placeholder-text="All application"
+ ng-model="widgetOnboarding.filterByApp.value">
+ <option b2b-dropdown-list
+ option-repeat="d in widgetOnboarding.availableApps"
+ value="{{d.value}}">{{d.title}}</option>
+ </select>
+ </div>
+ </div>
+ <input class="table-search" type="text"
+ id="widget-onboarding-table-search"
+ placeholder="Search in entire table"
+ ng-model="widgetOnboarding.searchString" />
+
+ <button id="widget-onboarding-button-add"
+ class="btn btn-alt btn-small"
+ ng-click="widgetOnboarding.openWidgetCatalogDetailsModal()">
+ <i class="icon-people-userbookmark" aria-hidden="true"></i> Add
+ Widget
+ </button>
+
+ <div id="widget-onboarding-communcation-message"
+ ng-show="widgetOnboarding.isCommError">Failed to communicate
+ with the widget microservice.</div>
+
+ <div ng-hide="widgetOnboarding.isCommError">
+ <div b2b-table table-data="portalAdmin.portalAdminsTableData"
+ ng-hide="widgetOnboarding.isLoadingTable"
+ search-string="portalAdmin.searchString" class="b2b-table-div">
+ <table>
+ <thead b2b-table-row type="header">
+ <tr>
+ <th id="widgets-catalog-th-header-name"
+ ng-repeat="header in widgetOnboarding.widgetsTableHeaders"
+ b2b-table-header key="{{header.value}}"
+ sortable="{{header.isSortable}}">{{header.name}}</th>
+ <th id="widgets-catalog-th-header-url" b2b-table-header
+ key="appName" sortable="false">Application</th>
+
+ <th id="widgets-catalog-th-header-download" b2b-table-header
+ sortable="false">Download</th>
+
+ <th id="widgets-catalog-th-header-delete" b2b-table-header
+ sortable="false">Delete</th>
+ </tr>
+ </thead>
+ <tbody b2b-table-row type="body" class="table-body"
+ row-repeat="rowData in widgetsList | filter:widgetOnboarding.filterByDropdownValue">
+ <tr>
+ <td b2b-table-body
+ ng-repeat="header in widgetOnboarding.widgetsTableHeaders"
+ ng-click="widgetOnboarding.openWidgetCatalogDetailsModal(rowData)">
+ <div id="widgets-catalog-widget-name-{{rowData.id}}"
+ ng-bind="rowData[header.value]"></div>
+ </td>
+
+ <td b2b-table-body
+ ng-click="widgetOnboarding.openWidgetCatalogDetailsModal(rowData)">
+ <div ng-repeat="row in rowData.appContent">
+ <div id="widget-catalog-widget-application-{{rowData.id}}"
+ ng-bind="row"></div>
+ </div>
+ </td>
+
+ <td b2b-table-body>
+ <div class="icon-download"
+ ng-click="widgetOnboarding.downloadWidget(rowData)"></div>
+ </td>
+
+ <td b2b-table-body>
+ <div id="widget-onboarding-div-delete-widget-{{$index}}" class="delete-widget"
+ ng-click="widgetOnboarding.deleteWidget(rowData)"></div>
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+</div>
+</div>
|