public/src/js/modules/main/apps/staff/views/users/users.html/users.html

   1 <div id="users" class="page-layout simple left-sidenav inner-sidenav motion-list">
   2   <!-- HEADER -->
   3   <div class="header md-accent-bg" layout="row" layout-align="space-between center">
   4     <!-- APP TITLE -->
   5     <div layout="row" layout-align="start center">
   6       <div class="logo" layout="row" layout-align="start center">
   7         <span class="logo-icon">
   8           <md-icon md-font-icon="icon-account-multiple" class="s24"></md-icon>
   9         </span>
  10         <span class="logo-text" translate="APP.USERS">Users</span>
  11       </div>
  12     </div>
  13     <!-- / APP TITLE -->
  14
  15     <div layout="row">
  16       <!-- SEARCH -->
  17       <div class="search-input-wrapper" layout="row" layout-align="start center">
  18         <label for="search">
  19           <md-icon md-font-icon="icon-magnify"></md-icon>
  20         </label>
  21         <md-input-container md-no-float class="m-0">
  22           <input id="search" placeholder="Search for anyone" type="text" ng-model="vm.query.filter"
  23             ng-model-options="{ debounce: 1000 }" translate translate-attr-placeholder="APP.SEARCH_FOR_ANYONE" />
  24         </md-input-container>
  25       </div>
  26       <!-- / SEARCH -->
  27     </div>
  28   </div>
  29   <!-- / HEADER -->
  30
  31   <!-- SELECTED BAR -->
  32   <div ng-show="vm.selectedUsers.length > 0" class="selected-bar header animate-slide-down md-accent-bg" layout="row"
  33     layout-align="start center">
  34     <div class="close-button-wrapper" ng-click="vm.selectedUsers =[]">
  35       <md-button layout="row" layout-align="start center">
  36         <md-icon md-font-icon="icon-arrow-left" class="mr-8"></md-icon>
  37         <span translate="APP.BACK">Back</span>
  38       </md-button>
  39     </div>
  40
  41     <div flex layout="row" layout-align="space-between center">
  42       <div>
  43         <span class="selected-users-count">
  44           <span>{{vm.selectedUsers.length}}</span>
  45           <span translate="APP.SELECTED">selected</span>
  46         </span>
  47
  48         <md-menu class="select-menu" ng-if="!vm.currentThread">
  49           <md-button class="md-icon-button" ng-click="$mdMenu.open($event)" aria-label="multi select toggle" translate
  50             translate-attr-aria-label="STAFF.MULTI_SELECT_TOGGLE">
  51             <md-icon md-font-icon="icon-menu-down"></md-icon>
  52           </md-button>
  53           <md-menu-content width="3">
  54             <md-menu-item>
  55               <md-button ng-click="vm.selectAllUsers()" translate="APP.SELECT_ALL">
  56                 Select all
  57               </md-button>
  58             </md-menu-item>
  59             <md-menu-item>
  60               <md-button ng-click="vm.deselectUsers()" translate="APP.SELECT_NONE">
  61                 Select none
  62               </md-button>
  63             </md-menu-item>
  64           </md-menu-content>
  65         </md-menu>
  66       </div>
  67
  68       <div class="multi-select-actions">
  69         <button class="md-icon-button" ng-csv="vm.exportSelectedUsers" csv-label="true" filename="users.csv">
  70           <md-icon md-font-icon="icon-file-excel"></md-icon>
  71         </button>
  72       </div>
  73     </div>
  74   </div>
  75   <!-- / SELECTED BAR -->
  76
  77   <!-- CONTENT -->
  78   <div class="content" md-background-bg layout="row" layout-align="start start">
  79     <!-- MAIN -->
  80     <div class="main scrollable" ms-scroll>
  81       <!-- USER TABLE -->
  82       <md-card>
  83         <md-table-container>
  84           <table md-table md-row-select multiple ng-model="vm.selectedUsers" md-progress="vm.promise">
  85             <thead md-head md-order="vm.query.sort" md-on-reorder="vm.getUsers">
  86               <tr md-row>
  87                 <th md-column ng-if="vm.table == 'users' || vm.table == 'agents'" width="20px"></th>
  88                 <th md-column md-order-by="role">
  89                   {{ 'STAFF.ROLE' | translate }}
  90                 </th>
  91                 <th md-column md-order-by="userProfileId">
  92                   {{ 'STAFF.USERPROFILE' | translate }}
  93                 </th>
  94                 <th md-column md-order-by="fullname">
  95                   {{ 'APP.FULLNAME' | translate }}
  96                 </th>
  97                 <th md-column md-order-by="name">
  98                   {{ 'APP.USERNAME' | translate }}
  99                 </th>
 100                 <th md-column md-order-by="email">
 101                   {{ 'APP.EMAIL' | translate }}
 102                 </th>
 103                 <th md-column md-order-by="phone">
 104                   {{ 'APP.PHONE' | translate }}
 105                 </th>
 106                 <th md-column md-order-by="mobile">
 107                   {{ 'APP.MOBILE' | translate }}
 108                 </th>
 109                 <th md-column md-order-by="internal">
 110                   {{ 'APP.INTERNAL' | translate }}
 111                 </th>
 112                 <th md-column md-order-by="disabled">
 113                   {{ 'APP.DISABLED' | translate }}
 114                 </th>
 115                 <th md-column md-order-by="blocked">
 116                   {{ 'STAFF.BLOCKED' | translate }}
 117                 </th>
 118                 <th md-column width="10px"></th>
 119               </tr>
 120             </thead>
 121             <tbody md-body>
 122               <tr md-row ng-hide="vm.users.rows.length">
 123                 <td md-cell colspan="11">
 124                   <div layout="row" layout-align="center center">
 125                     <span translate="APP.NO_AVAILABLE_INFO">No Available Info</span>
 126                   </div>
 127                 </td>
 128               </tr>
 129               <tr md-row md-select="user" md-select-id="id" ng-repeat="user in vm.users.rows">
 130                 <td md-cell ng-if="user.userpic">
 131                   <img class="avatar" alt="{{user.name}}" ng-src="api/users/{{user.id}}/avatar" />
 132                 </td>
 133                 <td md-cell ng-if="!user.userpic && (vm.table == 'users' || vm.table == 'agents')">
 134                   <img class="avatar" alt="{{user.name}}" ng-src="assets/images/avatars/profile.png" />
 135                 </td>
 136                 <td
 137                   ng-click="vm.crudPermissions.readOnly || (vm.crudPermissions.canDelete && !vm.crudPermissions.canEdit) ? vm.editstate(user, ev) : vm.createOrEditUser($event, user)"
 138                   md-cell class="role">
 139                   {{ vm.arrayrole[user.role].option }}
 140                 </td>
 141                 <td
 142                   ng-click="vm.crudPermissions.readOnly || (vm.crudPermissions.canDelete && !vm.crudPermissions.canEdit) ? vm.editstate(user, ev) : vm.createOrEditUser($event, user)"
 143                   md-cell class="userProfileId font-weight-600">
 144                   {{ (vm.userProfiles | filter : {'id':user.userProfileId} :
 145                   true)[0].name }}
 146                 </td>
 147                 <td
 148                   ng-click="vm.crudPermissions.readOnly || (vm.crudPermissions.canDelete && !vm.crudPermissions.canEdit) ? vm.editstate(user, ev) : vm.createOrEditUser($event, user)"
 149                   md-cell class="fullname font-weight-600">
 150                   {{user.fullname}}
 151                 </td>
 152                 <td
 153                   ng-click="vm.crudPermissions.readOnly || (vm.crudPermissions.canDelete && !vm.crudPermissions.canEdit) ? vm.editstate(user, ev) : vm.createOrEditUser($event, user)"
 154                   md-cell class="name">
 155                   {{user.name}}
 156                 </td>
 157                 <td
 158                   ng-click="vm.crudPermissions.readOnly || (vm.crudPermissions.canDelete && !vm.crudPermissions.canEdit) ? vm.editstate(user, ev) : vm.createOrEditUser($event, user)"
 159                   md-cell class="email">
 160                   {{user.email}}
 161                 </td>
 162                 <td
 163                   ng-click="vm.crudPermissions.readOnly || (vm.crudPermissions.canDelete && !vm.crudPermissions.canEdit) ? vm.editstate(user, ev) : vm.createOrEditUser($event, user)"
 164                   md-cell class="phone">
 165                   {{user.phone}}
 166                 </td>
 167                 <td
 168                   ng-click="vm.crudPermissions.readOnly || (vm.crudPermissions.canDelete && !vm.crudPermissions.canEdit) ? vm.editstate(user, ev) : vm.createOrEditUser($event, user)"
 169                   md-cell class="mobile">
 170                   {{user.mobile}}
 171                 </td>
 172                 <td
 173                   ng-click="vm.crudPermissions.readOnly || (vm.crudPermissions.canDelete && !vm.crudPermissions.canEdit) ? vm.editstate(user, ev) : vm.createOrEditUser($event, user)"
 174                   md-cell class="internal">
 175                   {{user.internal}}
 176                 </td>
 177                 <td
 178                   ng-click="vm.crudPermissions.readOnly || (vm.crudPermissions.canDelete && !vm.crudPermissions.canEdit) ? vm.editstate(user, ev) : vm.createOrEditUser($event, user)"
 179                   md-cell class="disabled">
 180                   <md-icon md-colors="{color: {{user.disabled ? '\'green\'' : '\'grey\''}}}"
 181                     md-font-icon="{{user.disabled ? 'icon-check' : 'icon-close'}}"></md-icon>
 182                 </td>
 183                 <td
 184                   ng-click="vm.crudPermissions.readOnly || (vm.crudPermissions.canDelete && !vm.crudPermissions.canEdit) ? vm.editstate(user, ev) : vm.createOrEditUser($event, user)"
 185                   md-cell class="blocked">
 186                   <md-icon md-colors="{color: {{user.blocked ? '\'green\'' : '\'grey\''}}}"
 187                     md-font-icon="{{user.blocked ? 'icon-check' : 'icon-close'}}"></md-icon>
 188                 </td>
 189
 190                 <td md-cell class="actions">
 191                   <md-menu>
 192                     <md-button class="md-icon-button" aria-label="More" translate translate-attr-aria-label="APP.MORE"
 193                       ng-click="$mdMenu.open($event)">
 194                       <md-icon md-font-icon="icon-dots-vertical"></md-icon>
 195                     </md-button>
 196
 197                     <md-menu-content width="3">
 198                       <!-- SUBACTIONS -->
 199
 200                       <!-- ACTIONS -->
 201
 202                       <md-menu-item ng-if="vm.crudPermissions.canEdit">
 203                         <md-button ng-click="vm.editstate(user, $event    )" translate="STAFF.EDIT_USER">
 204                           Edit User
 205                         </md-button>
 206                       </md-menu-item>
 207
 208                       <!-- SUBACTIONS -->
 209
 210                       <!-- ACTIONS -->
 211
 212                       <md-menu-item ng-if="vm.currentUser.role === 'admin' && user.id !== vm.currentUser.id">
 213                         <md-button ng-click="vm.deleteconfirm(user, $event    )" translate="STAFF.DELETE_USER">
 214                           Delete User
 215                         </md-button>
 216                       </md-menu-item>
 217                     </md-menu-content>
 218                   </md-menu>
 219                 </td>
 220               </tr>
 221             </tbody>
 222           </table>
 223         </md-table-container>
 224
 225         <md-table-pagination
 226           md-label="{page: '{{'APP.PAGE' | translate}}:', rowsPerPage: '{{'APP.ROWSPERPAGE' | translate}}:', of: '{{'APP.OF' | translate}}'}"
 227           md-limit="vm.query.limit" md-limit-options="[10, 15, 20, 50, 100, 250]" md-page="vm.query.page"
 228           md-total="{{vm.users.count}}" md-on-paginate="vm.getUsers" md-page-select></md-table-pagination>
 229       </md-card>
 230       <!-- / USER TABLE -->
 231       <!-- NO RESULTS -->
 232
 233       <!-- / NO RESULTS -->
 234     </div>
 235     <!-- / MAIN -->
 236   </div>
 237   <!-- / CONTENT -->
 238
 239   <!-- ADD USER BUTTON -->
 240   <md-button ng-if="vm.crudPermissions.canEdit" class="md-fab md-accent add-item-button" id="add-user-button"
 241     ng-click="vm.createOrEditUser($event)" aria-label="add user" translate translate-attr-aria-label="STAFF.ADD_USER">
 242     <md-icon md-font-icon="icon-plus"></md-icon>
 243   </md-button>
 244   <!-- / ADD USER BUTTON -->
 245 </div>