public/src/js/modules/main/apps/staff/views/userProfiles/edit/view.html/view.html

   1 <div id="staff-userProfile" class="page-layout simple tabbed" layout="column">
   2   <!-- HEADER -->
   3   <div class="header md-accent-bg" layout="row" layout-align="start center">
   4     <div class="white-fg" layout="row" layout-align="start center" flex>
   5       <md-button
   6         class="goto-userProfiles-button md-icon-button"
   7         aria-label="Go to userProfiles"
   8         ng-click="vm.gotoUserProfiles()"
   9         translate
  10         translate-attr-aria-label="STAFF.GO_TO_USERPROFILES"
  11       >
  12         <md-icon md-font-icon="icon-arrow-left"></md-icon>
  13       </md-button>
  14
  15       <div layout="row" layout-align="start center">
  16         <div class="userProfile-image" hide-xs>
  17           <img ng-src="assets/images/business/userProfiles.jpg" />
  18         </div>
  19
  20         <div layout="column" layout-align="start start">
  21           <div class="h2">
  22             #{{vm.userProfile.id}}
  23             <span ng-if="vm.userProfile.name">{{vm.userProfile.name}}</span>
  24           </div>
  25           <div class="subtitle secondary-text">
  26             <span translate="APP.CREATED_AT"></span>
  27             <span>{{vm.userProfile.createdAt | date:'medium'}}</span>
  28           </div>
  29         </div>
  30       </div>
  31     </div>
  32
  33     <div ng-cloak ng-if="vm.crudPermissions.canEdit">
  34       <md-button
  35         ng-click="vm.clonedialog(vm.userProfile, $event)"
  36         class="md-fab md-amber-500-bg md-icon-button"
  37         aria-label="clone"
  38       >
  39         <md-tooltip
  40           ><span translate="STAFF.CLONE_USERPROFILE"></span
  41         ></md-tooltip>
  42         <md-icon md-font-icon="icon-content-duplicate"></md-icon>
  43       </md-button>
  44     </div>
  45     <div>
  46       <md-button
  47         type="submit"
  48         ng-click="vm.saveUserProfile()"
  49         ng-if="vm.crudPermissions.canEdit"
  50         class="send-button md-accent md-raised"
  51         ng-disabled="(generalForm.$invalid) || (modulesForm.$invalid)"
  52         translate="APP.SAVE"
  53         translate-attr-aria-label="APP.SAVE"
  54       >
  55         SAVE
  56       </md-button>
  57     </div>
  58   </div>
  59   <!-- / HEADER -->
  60
  61   <!-- CONTENT -->
  62   <div class="content">
  63     <md-tabs
  64       md-selected="vm.selectedTab"
  65       md-stretch-tabs="always"
  66       flex
  67       layout-fill
  68       md-dynamic-height
  69     >
  70       <md-tab>
  71         <md-tab-label>
  72           <span translate="APP.SETTINGS">SETTINGS</span>
  73         </md-tab-label>
  74         <md-tab-body>
  75           <div
  76             class="userProfile-detail-form-container general md-background-bg md-whiteframe-1dp"
  77           >
  78             <div class="pb-16" layout="row" layout-align="start center">
  79               <div class="h2 secondary-text" translate="APP.GENERAL">
  80                 GENERAL
  81               </div>
  82             </div>
  83             <form name="generalForm" novalidate>
  84               <md-input-container class="md-block">
  85                 <label translate="APP.NAME">Name</label>
  86                 <input
  87                   type="text"
  88                   name="name"
  89                   ng-model="vm.userProfile.name"
  90                   ng-required="true"
  91                   autofocus
  92                   disabled
  93                 />
  94
  95                 <div
  96                   ng-messages="generalForm['name'].$error"
  97                   ng-show="generalForm['name'].$touched"
  98                   role="alert"
  99                 >
 100                   <div ng-message="required">
 101                     <span translate="APP.ERRORS.NAME_REQUIRED"
 102                       >Name field is required</span
 103                     >
 104                   </div>
 105                 </div>
 106               </md-input-container>
 107               <md-input-container class="md-block">
 108                 <label translate="APP.DESCRIPTION">Description</label>
 109                 <input
 110                   type="text"
 111                   name="description"
 112                   ng-model="vm.userProfile.description"
 113                   ng-disabled="!vm.crudPermissions.canEdit"
 114                 />
 115
 116                 <div
 117                   ng-messages="generalForm['description'].$error"
 118                   ng-show="generalForm['description'].$touched"
 119                   role="alert"
 120                 >
 121                   <div ng-message="required">
 122                     <span translate="STAFF.ERRORS.DESCRIPTION_REQUIRED"
 123                       >Description field is required</span
 124                     >
 125                   </div>
 126                 </div>
 127               </md-input-container>
 128               <md-input-container class="md-block">
 129                 <label translate="STAFF.CRUDPERMISSIONS">CrudPermissions</label>
 130                 <md-select
 131                   name="crudPermissions"
 132                   ng-model="vm.userProfile.crudPermissions"
 133                   multiple
 134                   required
 135                   ng-disabled="!vm.crudPermissions.canEdit"
 136                 >
 137                   <md-option ng-value="'r'" disabled>
 138                     {{ 'STAFF.READ_PERMISSION' | translate }}
 139                   </md-option>
 140
 141                   <md-option ng-value="'e'">
 142                     {{ 'STAFF.EDIT_PERMISSION' | translate }}
 143                   </md-option>
 144
 145                   <md-option ng-value="'d'">
 146                     {{ 'STAFF.DELETE_PERMISSION' | translate }}
 147                   </md-option>
 148                 </md-select>
 149                 <div
 150                   ng-messages="generalForm['crudPermissions'].$error"
 151                   ng-show="generalForm['crudPermissions'].$touched"
 152                   role="alert"
 153                 >
 154                   <div ng-message="required">
 155                     <span translate="STAFF.ERRORS.CRUDPERMISSIONS_REQUIRED"
 156                       >CrudPermissions field is required</span
 157                     >
 158                   </div>
 159                 </div>
 160               </md-input-container>
 161             </form>
 162           </div>
 163         </md-tab-body>
 164       </md-tab>
 165       <md-tab>
 166         <md-tab-label>
 167           <span translate="STAFF.PERMISSIONS">PERMISSIONS</span>
 168         </md-tab-label>
 169         <md-tab-body>
 170           <div
 171             class="userProfile-detail-form-container modules md-background-bg md-whiteframe-1dp"
 172           >
 173             <div class="pb-16" layout="row" layout-align="start center">
 174               <div class="h2 secondary-text" translate="APP.MODULES">
 175                 MODULES
 176               </div>
 177             </div>
 178             <div
 179               ng-controller="UserProfilePermissionsController as vm_pc"
 180               ng-init="vm_pc.init(vm.userProfile, vm.license)"
 181               class="userProfile-detail-form-container"
 182             >
 183               <md-grid-list
 184                 flex
 185                 md-cols-gt-xs="2"
 186                 md-cols-gt-sm="2"
 187                 md-cols-gt-md="4"
 188                 md-cols-gt-lg="6"
 189                 md-row-height-gt-xs="2:1"
 190                 md-row-height-gt-sm="2:1"
 191                 md-row-height-gt-md="3:1"
 192                 gt-xs-gutter="4px"
 193                 gt-sm-gutter="8px"
 194                 gt-md-gutter="8px"
 195                 gt-lg-gutter="16px"
 196               >
 197                 <md-grid-tile
 198                   ng-repeat="father in vm_pc.modules"
 199                   ng-if="vm_pc.userProfile.role !== 'admin' && !father.permissions.hidden"
 200                   md-colspan="2"
 201                 >
 202                   <md-card
 203                     flex-xs
 204                     flex-gt-xs="90"
 205                     layout="column"
 206                     no-padding
 207                     no-margin
 208                   >
 209                     <md-card-header>
 210                       <md-card-avatar>
 211                         <md-icon
 212                           class="md-avatar-icon auto-size"
 213                           md-font-icon="{{father.icon}}"
 214                           ng-class="{ true: father.status.color }[true]"
 215                         >
 216                         </md-icon>
 217                         <md-tooltip>{{ father.status.info }}</md-tooltip>
 218                       </md-card-avatar>
 219                       <md-card-header-text layout-align="center start">
 220                         <span class="md-title" translate="{{father.translate}}"
 221                           >{{ father.title }}</span
 222                         >
 223                       </md-card-header-text>
 224                       <md-card-actions
 225                         class="no-margin"
 226                         layout="row"
 227                         ng-init="vm_pc.checkSectionResources(father)"
 228                         ng-if="father.status.tag != 'unlicensed'"
 229                       >
 230                         <md-switch
 231                           class="auto-height no-margin"
 232                           ng-model="father.allResourcesEnabled"
 233                           ng-change="vm_pc.onChangeEnableAllResources(father)"
 234                           aria-label="Enable all"
 235                         ></md-switch>
 236                         <md-button
 237                           class="md-mini auto-width"
 238                           aria-label="Manage"
 239                           ng-click="vm_pc.manageResources(father)"
 240                           ng-hide="father.permissions && !father.permissions.association"
 241                         >
 242                           <md-tooltip
 243                             >{{'STAFF.PERMISSIONS_MANAGE' | translate}}
 244                           </md-tooltip>
 245                           <md-icon md-font-icon="icon-cog"></md-icon>
 246                         </md-button>
 247                       </md-card-actions>
 248                       <md-card-header-text
 249                         ng-if="father.status.tag === 'unlicensed'"
 250                         layout-align="center end"
 251                       >
 252                         <span class="md-subhead red-A700-fg"
 253                           >{{ father.status.name }}</span
 254                         >
 255                       </md-card-header-text>
 256                     </md-card-header>
 257                   </md-card>
 258                 </md-grid-tile>
 259               </md-grid-list>
 260             </div>
 261           </div>
 262         </md-tab-body>
 263       </md-tab>
 264     </md-tabs>
 265   </div>
 266   <!-- / CONTENT -->
 267 </div>