a9cec65312eeee0837a84c259ed6cfae492f5809
[motion-next.git] /
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="STAFF.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="STAFF.SAVE"
53         translate-attr-aria-label="STAFF.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="STAFF.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="STAFF.GENERAL">
80                 GENERAL
81               </div>
82             </div>
83             <form name="generalForm" novalidate>
84               <md-input-container class="md-block">
85                 <label translate="STAFF.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="STAFF.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="STAFF.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="STAFF.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                         ></md-icon>
216                         <md-tooltip>{{ father.status.info }}</md-tooltip>
217                       </md-card-avatar>
218                       <md-card-header-text layout-align="center start">
219                         <span class="md-title" translate="{{father.translate}}"
220                           >{{ father.title }}</span
221                         >
222                       </md-card-header-text>
223                       <md-card-actions
224                         class="no-margin"
225                         layout="row"
226                         ng-init="vm_pc.checkSectionResources(father)"
227                         ng-if="father.status.tag != 'unlicensed'"
228                       >
229                         <md-switch
230                           class="auto-height no-margin"
231                           ng-model="father.allResourcesEnabled"
232                           ng-change="vm_pc.onChangeEnableAllResources(father)"
233                           aria-label="Enable all"
234                         ></md-switch>
235                         <md-button
236                           class="md-mini auto-width"
237                           aria-label="Manage"
238                           ng-click="vm_pc.manageResources(father)"
239                           ng-hide="father.permissions && !father.permissions.association"
240                         >
241                           <md-tooltip
242                             >{{'STAFF.PERMISSIONS_MANAGE' | translate}}
243                           </md-tooltip>
244                           <md-icon md-font-icon="icon-cog"></md-icon>
245                         </md-button>
246                       </md-card-actions>
247                       <md-card-header-text
248                         ng-if="father.status.tag === 'unlicensed'"
249                         layout-align="center end"
250                       >
251                         <span class="md-subhead red-A700-fg"
252                           >{{ father.status.name }}</span
253                         >
254                       </md-card-header-text>
255                     </md-card-header>
256                   </md-card>
257                 </md-grid-tile>
258               </md-grid-list>
259             </div>
260           </div>
261         </md-tab-body>
262       </md-tab>
263     </md-tabs>
264   </div>
265   <!-- / CONTENT -->
266 </div>