diff options
Diffstat (limited to 'catalog-ui/app/scripts/view-models/admin-dashboard/user-management')
3 files changed, 573 insertions, 0 deletions
diff --git a/catalog-ui/app/scripts/view-models/admin-dashboard/user-management/user-management-view-model.ts b/catalog-ui/app/scripts/view-models/admin-dashboard/user-management/user-management-view-model.ts new file mode 100644 index 0000000000..3921d0cf8f --- /dev/null +++ b/catalog-ui/app/scripts/view-models/admin-dashboard/user-management/user-management-view-model.ts @@ -0,0 +1,220 @@ +/*- + * ============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 { + + import IUserProperties = Sdc.Models.IUserProperties; + 'use strict'; + + interface IUserManagementViewModelScope extends ng.IScope { + sdcConfig:Models.IAppConfigurtaion; + usersList: Array<Models.IUserProperties>; + isLoading: boolean; + isNewUser: boolean; + sortBy:string; + reverse:boolean; + tableHeadersList:any; + roles:Array<string>; + newUser: Models.IUser; + currentUser: Sdc.Services.IUserResource; + userIdValidationPattern: RegExp; + editForm:ng.IFormController; + getAllUsers():void; + editUserRole(user:IUserProperties); + sort(sortBy:string): void; + createUser(): void; + deleteUser(userId:string) : void; + onEditUserPressed(user:IUserProperties): void; + saveUserChanges(user:IUserProperties) :void; + getTitle(role:string): string; + clearForm():void; + + } + + + export class UserManagementViewModel { + static '$inject' = [ + '$scope', + 'sdcConfig', + 'Sdc.Services.UserResourceService', + '$templateCache', + '$modal', + 'UserIdValidationPattern', + '$filter', + 'ModalsHandler' + ]; + + constructor(private $scope:IUserManagementViewModelScope, + private sdcConfig:Models.IAppConfigurtaion, + private userResourceService:Sdc.Services.IUserResourceClass, + private $templateCache:ng.ITemplateCacheService, + private $modal:ng.ui.bootstrap.IModalService, + private UserIdValidationPattern:RegExp, + private $filter:ng.IFilterService, + private ModalsHandler: Utils.ModalsHandler + ) { + + this.initScope(); + + } + + + + private getAllUsers = ():void => { + this.$scope.isLoading = true; + + let onError = (response) => { + this.$scope.isLoading = false; + console.info('onFaild', response); + }; + let onSuccess = (response: Array<Models.IUserProperties>) => { + this.$scope.usersList = response; + _.forEach(this.$scope.usersList,(user:any,i:number)=>{ + user.index = i; + }); + this.$scope.isLoading = false; + }; + this.userResourceService.getAllUsers(onSuccess, onError); + }; + + private updateUserFilterTerm = (user: IUserProperties): void =>{ + user.filterTerm = user.firstName + ' ' + user.lastName + ' ' + user.userId + ' ' + user.email + ' ' + user.role + ' ' + this.$filter('date')(user.lastLoginTime, "MM/dd/yyyy"); + }; + + private initScope = ():void => { + let self=this; + + this.$scope.tableHeadersList = [ + {title: "First Name", property: 'firstName'}, + {title: "Last Name", property: 'lastName'}, + {title: this.$filter('translate')("USER_MANAGEMENT_TABLE_HEADER_USER_ID"), property: 'userId'}, + {title: "Email", property: 'email'}, + {title: "Role", property: 'role'}, + {title: "Last Active", property: 'lastLoginTime'} + ]; + this.$scope.userIdValidationPattern = this.UserIdValidationPattern; + this.$scope.sortBy = 'lastLoginTime'; + this.$scope.reverse = false; + this.$scope.roles = this.sdcConfig.roles; + this.$scope.isNewUser = false; + this.$scope.currentUser = this.userResourceService.getLoggedinUser(); + this.getAllUsers(); + + let resource : Services.IUserResource = <Services.IUserResource>{}; + this.$scope.newUser = new Sdc.Models.User(resource); + + this.$scope.sort = (sortBy:string):void => {//default sort by descending last update. default for alphabetical = ascending + this.$scope.isNewUser = false; + this.$scope.reverse = (this.$scope.sortBy === sortBy) ? ( !this.$scope.reverse) : this.$scope.reverse = false; + this.$scope.sortBy = sortBy; + }; + + this.$scope.createUser = () : void => { + + let onError = (response) => { + this.$scope.isLoading = false; + console.info('onFaild', response); + }; + + let onSuccess = (response: Models.IUserProperties) => { + this.$scope.newUser.resource['index'] = this.$scope.usersList.length; + this.$scope.newUser.resource.lastLoginTime = "0"; + this.$scope.newUser.resource.status = response.status; + this.updateUserFilterTerm(this.$scope.newUser.resource); + this.$scope.usersList.unshift(this.$scope.newUser.resource); + this.$scope.isNewUser = true; + this.$scope.sortBy = 'index'; + this.$scope.reverse = true; + this.$scope.isLoading = false; + this.$scope.newUser = new Sdc.Models.User(null); + this.$scope.editForm.$setPristine(); + let _self = this; + setTimeout(function () { + _self.$scope.isNewUser = false; + }, 7000); + }; + this.userResourceService.createUser({ userId: this.$scope.newUser.resource.userId, role: this.$scope.newUser.resource.role}, onSuccess, onError); + }; + + + this.$scope.onEditUserPressed = (user:IUserProperties): void => { + user.isInEditMode = true; + user.tempRole = user.role; + }; + + this.$scope.editUserRole = (user:IUserProperties): void => { + let roleBeforeUpdate: string = user.role; + user.role= user.tempRole; + + let onError = (response) => { + this.$scope.isLoading = false; + user.role = roleBeforeUpdate; + console.info('onFaild', response); + }; + let onSuccess = (response: any) => { + this.$scope.isLoading = false; + user.tempRole = user.role; + this.updateUserFilterTerm(user); + }; + + this.userResourceService.editUserRole({ id: user.userId, role: user.role}, onSuccess, onError); + }; + + this.$scope.saveUserChanges = (user:IUserProperties): void => { + if(user.tempRole != user.role){ + this.$scope.editUserRole(user) + } + user.isInEditMode = false; + }; + + this.$scope.deleteUser = (userId:string): void => { + + let onOk = ():void => { + this.$scope.isLoading = true; + + let onError = (response):void => { + this.$scope.isLoading = false; + console.info('onFaild', response); + }; + + let onSuccess = (response: any) :void => { + _.remove(this.$scope.usersList, {userId: userId }); + this.$scope.isLoading = false; + }; + this.userResourceService.deleteUser({ id: userId}, onSuccess, onError); + }; + + let title:string = this.$filter('translate')("USER_MANAGEMENT_VIEW_DELETE_MODAL_TITLE"); + let message:string = this.$filter('translate')("USER_MANAGEMENT_VIEW_DELETE_MODAL_TEXT"); + this.ModalsHandler.openConfirmationModal(title, message, false).then(onOk); + }; + + this.$scope.getTitle = (role:string):string =>{ + return role.toLowerCase().replace('governor','governance_Rep').replace('_',' '); + }; + + this.$scope.clearForm =():void =>{ + if(!this.$scope.editForm['contactId'].$viewValue && !this.$scope.editForm['role'].$viewValue){ + this.$scope.editForm.$setPristine(); + } + }; + } + } +} diff --git a/catalog-ui/app/scripts/view-models/admin-dashboard/user-management/user-management-view.html b/catalog-ui/app/scripts/view-models/admin-dashboard/user-management/user-management-view.html new file mode 100644 index 0000000000..26e720b044 --- /dev/null +++ b/catalog-ui/app/scripts/view-models/admin-dashboard/user-management/user-management-view.html @@ -0,0 +1,102 @@ +<div ng-controller="Sdc.ViewModels.UserManagementViewModel"> + <loader data-display="isLoading"></loader> + <div class="sdc-user-management-top-bar"> + <div class="sdc-user-management-top-bar-search-container"> + <label class="sdc-user-management-top-bar-search-text">Search User</label> + <input type="text" class="sdc-user-management-top-bar-form-input" placeholder="{{ USER_MANAGEMENT_SEARCH_LABEL | translate }}" data-ng-model="search.filterTerm" ng-model-options="{ debounce: 500 }" data-tests-id="searchbox" /> + <span class="w-sdc-search-icon" data-ng-class="{'cancel':search.filterTerm, 'magnification':!search.filterTerm}" data-ng-click="search.filterTerm=''" ></span> + </div> + <div class="vertical-border-container"> + <div class="vertical-border"></div> + </div> + <form class="sdc-user-management-top-bar-create-user-container w-sdc-form" name="editForm"> + <label class="sdc-user-management-top-bar-title">Create New User</label> + <div class="sdc-user-management-top-bar-wrapper"> + <div class="i-sdc-form-item sdc-user-management-top-bar-form-container" data-ng-class="{error:(editForm.contactId.$dirty && editForm.contactId.$invalid)}"> + <input ng-focus="search.filterTerm=''" type="text" + data-ng-model="newUser.resource.userId" + class="i-sdc-form-input" + placeholder="{{ USER_MANAGEMENT_SEARCH_TEXT | translate}}" + data-ng-model-options="{ updateOn: 'default blur', debounce: { 'default': 750, 'blur': 0 } }" + name="contactId" + data-ng-pattern="userIdValidationPattern" + data-ng-change="clearForm()" + data-ng-blur="clearForm()" + data-required + data-tests-id="newuserid" /> + + <div class="input-error" data-ng-show="editForm.contactId.$dirty && editForm.contactId.$invalid"> + <span ng-show="editForm.contactId.$error.required" translate="NEW_USER_ERROR_USER_ID_REQUIRED"></span> + <span ng-show="editForm.contactId.$error.pattern" translate="NEW_USER_ERROR_USER_ID_NOT_VALID"></span> + </div> + </div> + <div class="i-sdc-form-item sdc-user-management-top-bar-form-container" data-ng-class="{error:(editForm.role.$dirty && editForm.role.$invalid + && editForm.contactId.$viewValue)}"> + <select class="i-sdc-form-select capitalize" + data-required + name="role" + data-tests-id="selectrole" + data-ng-model = "newUser.resource.role" + data-ng-options="role as (getTitle(role)) for role in roles | orderBy:'role'" + ng-focus="search.filterTerm=''"> + <option value="">Select Role</option> + </select> + <div class="input-error" data-ng-show="editForm.role.$dirty && editForm.role.$invalid && editForm.contactId.$viewValue"> + <span ng-show="editForm.role.$error.required" translate="NEW_USER_ERROR_ROLE_REQUIRED"></span> + </div> + </div> + <button data-tests-id="creategreen" data-ng-disabled="editForm.$invalid" class="sdc-user-management-top-bar-create-btn" ng-click="search.filterTerm = '' ; createUser()">Create</button> + </div> + </form> + </div> + + + <div class="sdc-user-management-table-container-flex"> + + <div class="sdc-user-management-table"> + <div class="head sdc-user-management-flex-container"> + <div class="sdc-user-management-table-header head-row hand sdc-user-management-flex-item" data-tests-id="th{{header.title}}" ng-repeat="header in tableHeadersList" ng-click="sort(header.property)">{{header.title}} + <span ng-if="sortBy === header.property" class="sdc-user-management-table-header-sort-arrow" data-ng-class="{'down': reverse, 'up':!reverse}"> </span> + </div> + <div class="sdc-user-management-table-no-text-header head-row sdc-user-management-flex-item"></div> + <div class="sdc-user-management-table-no-text-header head-row sdc-user-management-flex-item"></div> + </div> + + <div class="body"> + <perfect-scrollbar scroll-y-margin-offset="0" include-padding="true" class="scrollbar-container"> + <div ng-init="user.filterTerm = user.firstName + ' ' + user.lastName + ' ' + user.userId + ' ' + user.email + ' ' + user.role + ' ' + (user.lastLoginTime | date: 'MM/dd/yyyy')" + ng-repeat="user in usersList | filter: search | orderBy:sortBy:reverse" + data-ng-class="{'sdc-user-management-table-new-user-row': (isNewUser && $first), 'sdc-user-management-table-row-edit-mode': user.isInEditMode}" + class="sdc-user-management-flex-container data-row" data-tests-id="tdRow"> + + <div sdc-smart-tooltip class="sdc-user-management-table-col-general sdc-user-management-flex-item" data-tests-id="td{{tableHeadersList[0].title}}">{{user.firstName || '---'}}</div> + <div sdc-smart-tooltip class="sdc-user-management-table-col-general sdc-user-management-flex-item" data-tests-id="td{{tableHeadersList[1].title}}">{{user.lastName || '---' }}</div> + <div class="sdc-user-management-table-col-userid sdc-user-management-flex-item" data-tests-id="td{{tableHeadersList[2].title}}">{{user.userId || '---'}}</div> + <div sdc-smart-tooltip class="sdc-user-management-table-col-general sdc-user-management-flex-item" data-tests-id="td{{tableHeadersList[3].title}}">{{user.email || '---'}}</div> + <div class="sdc-user-management-table-col-general sdc-user-management-flex-item" data-tests-id="td{{tableHeadersList[4].title}}"> + <div class="sdc-user-management-table-role-select capitalize sdc-user-management-table-role-label" + data-ng-if="!user.isInEditMode" + data-ng-bind="getTitle(user.role)"></div> + <select class="sdc-user-management-table-role-select capitalize" + data-tests-id="tdselectrole" + data-ng-if="user.isInEditMode" + data-ng-model="user.tempRole" + data-ng-options="role as (getTitle(role)) for role in roles | orderBy:'role'"> + </select> + </div> + <div class="sdc-user-management-table-col-general sdc-user-management-flex-item" data-tests-id="td{{tableHeadersList[5].title}}">{{user.lastLoginTime == 0 ? 'Waiting' : (user.lastLoginTime | date:'MM/dd/yyyy')}}</div> + <div class="sdc-user-management-table-btn-col sdc-user-management-flex-item"> + <button data-ng-disabled="user.isInEditMode" data-ng-hide="user.isInEditMode || currentUser.userId === user.userId" class="sdc-user-management-table-edit-btn" ng-click="onEditUserPressed(user)" data-tests-id="updateuser{{user.userId}}"> </button> + <button data-ng-show="user.isInEditMode" class="sdc-user-management-table-save-btn" ng-click="saveUserChanges(user)" data-tests-id="tdsave"> </button> + </div> + <div class="sdc-user-management-table-btn-col sdc-user-management-flex-item"> + <button data-ng-hide="currentUser.userId === user.userId" class="sdc-user-management-table-delete-btn" ng-click="deleteUser(user.userId)" data-tests-id="delete{{user.userId}}"> </button> + </div> + + </div> + </perfect-scrollbar> + </div> + + </div> + </div> +</div> diff --git a/catalog-ui/app/scripts/view-models/admin-dashboard/user-management/user-management.less b/catalog-ui/app/scripts/view-models/admin-dashboard/user-management/user-management.less new file mode 100644 index 0000000000..934faab9e7 --- /dev/null +++ b/catalog-ui/app/scripts/view-models/admin-dashboard/user-management/user-management.less @@ -0,0 +1,251 @@ +.sdc-user-management-top-bar { + display: flex; + width: 100%; + label { + .i_17; + } + .sdc-user-management-top-bar-form-input, + .sdc-user-management-top-bar-form-select { + .b_9; + color: @color_b; + height: 28px; + padding-left: 10px; + border-radius: 2px; + border: 1px solid @border_color_f; + } + + .sdc-user-management-top-bar-search-container { + display: flex; + flex-direction: column; + position: relative; + width: 400px; + + label { + margin-bottom: 20px; + } + + .w-sdc-search-icon { + right: 11px; + top: 49px; + } + } + .vertical-border-container { + min-width: 50px; + margin: 0px auto; + + .vertical-border { + + width: 1px; + height: 70px; + background-color: @color_e; + display: table; + margin: 0 auto; + } + } + + .sdc-user-management-top-bar-wrapper { + display: flex; + } + + .sdc-user-management-top-bar-title { + .i_17; + font-weight: bold; + } + + .sdc-user-management-top-bar-create-user-container { + + display: flex; + flex-direction: column; + position: relative; + float: right; + padding-top: 0px; + text-align: left; + width: 650px; + + label { + margin-bottom: 20px; + } + + .sdc-user-management-top-bar-form-container { + width: 233px; + margin-right: 35px; + } + + .sdc-user-management-top-bar-create-btn { + .w-sdc-btn-light-green; + height: 30px; + width: 100px; + line-height: 0px; + padding-bottom: 3px; + margin-right: 0px; + } + } +} + + +.sdc-user-management-table-container-flex { + height: 650px; + margin-top: 35px; + .sdc-user-management-table { + width: 100%; + border: 1px solid @color_m; + .head { + .bg_m; + .head-row { + .c_18; + font-weight: bold; + + border-right: 1px solid @border_color_d; + + .sdc-user-management-table-header-sort-arrow { + display: inline-block; + background-color: transparent; + border: none; + .c_9; + width: 0; + height: 0; + float: right; + margin: 8px 8px 0px 0px; + &.up { + border-left: 5px solid transparent; + border-right: 5px solid transparent; + border-bottom: 5px solid; + } + &.down { + border-left: 5px solid transparent; + border-right: 5px solid transparent; + border-top: 5px solid; + } + } + } + .sdc-user-management-table-header:hover { + .bg_j; + } + + } + .body { + .scrollbar-container { + max-height: 421px; + .perfect-scrollbar; + } + .b_9; + + .data-row { + &:nth-of-type(odd) { + .bg_c; + } + &.sdc-user-management-table-new-user-row { + + animation: change 7s step-end both; + + @keyframes change { + from { + color: @color_z + } + to { + color: @color_b + } + } + } + &.sdc-user-management-table-row-edit-mode { + .bg_j; + } + div { + + border-right: 1px solid @border_color_d; + + &:last-child { + border-right: none; + } + + .sdc-user-management-table-role-select { + background-color: transparent; + border: 0; + width: 100%; + + } + .sdc-user-management-table-role-label { + margin-left:4px; + } + + } + + } + .data-row:hover { + .bg_j; + } + + } + + .sdc-user-management-table-btn-col { + + line-height: 0px; + text-align: center; + .sdc-user-management-table-delete-btn { + background-color: transparent; + border: none; + .sprite; + .sprite.e-sdc-small-icon-delete; + opacity: 0.7; + } + .sdc-user-management-table-edit-btn { + background-color: transparent; + border: none; + .sprite; + .e-sdc-small-icon-pencil; + opacity: 0.7; + } + .sdc-user-management-table-save-btn { + background-color: transparent; + border: none; + .sprite; + .sprite.e-sdc-green-save; + } + } + + } + + .sdc-user-management-flex-container { + display: flex; + } + + .sdc-user-management-flex-item { + width:10px; + padding: 5px; + text-align: center; + } + + .sdc-user-management-flex-item:nth-child(1) { + flex-grow: 5; + } + + .sdc-user-management-flex-item:nth-child(2) { + flex-grow: 7; + } + + .sdc-user-management-flex-item:nth-child(3) { + flex-grow: 4; + } + + .sdc-user-management-flex-item:nth-child(4) { + flex-grow: 8; + } + + .sdc-user-management-flex-item:nth-child(5) { + flex-grow: 8; + } + + .sdc-user-management-flex-item:nth-child(6) { + flex-grow: 8; + } + + .sdc-user-management-flex-item:nth-child(7) { + flex-grow: 1; + } + + .sdc-user-management-flex-item:nth-child(8) { + flex-grow: 1; + } + +} + |