Bez popisu

users.blade.php 26KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659
  1. @extends('layouts.master')
  2. @section('navigation')
  3. @include('local.managers.admins._navigation')
  4. @stop
  5. @section('main')
  6. <!-- Edit User -->
  7. <div class="modal fade" id="modal-edit-user">
  8. <div class="modal-dialog modal-sm">
  9. <div class="modal-content">
  10. <div class="modal-header">
  11. <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  12. <h4 class="modal-title">Edit User</h4>
  13. </div>
  14. <div class="modal-body">
  15. {{ Form::open(array('action' => array('UsersController@update'))) }}
  16. <input name="id" id="id" type="hidden"></input>
  17. <div class="form-group">
  18. <label for="name" class="control-label">Name</label>
  19. <p id="name" name="name" class="form-control-static"></p>
  20. </div>
  21. <div class="form-group">
  22. <label for="" class="control-label">Email</label>
  23. <p id="email" name="email" class="form-control-static"></p>
  24. </div>
  25. <div class="form-group">
  26. {{ Form::label('role', 'Role') }}
  27. <select id="role" name="role" class="role form-control">
  28. <option value="1">Administrator</option>
  29. <option value="2">School Coordinator</option>
  30. <option value="3">Program Coordinator</option>
  31. <option value="4">Professor</option>
  32. </select>
  33. </div>
  34. <div class="form-group">
  35. {{ Form::label('school', 'School or College') }}
  36. <select name="school" class="school form-control">
  37. <option value="0">All</option>
  38. @foreach ($schools as $school)
  39. <option value="{{ $school->id }}">
  40. {{ $school->name }}
  41. </option>
  42. @endforeach
  43. </select>
  44. </div>
  45. {{ Form::label('program', 'Program(s)') }}
  46. <div class="programs">
  47. <div class="form-group">
  48. <select class="program form-control" name="programs[]"></select>
  49. </div>
  50. </div>
  51. <p id="add-program-wrapper" class="text-right">
  52. <button id="add-program" class="add-program btn-xs btn btn-success"><span class="glyphicon glyphicon-plus"></span></button>
  53. </p>
  54. <div class="form-group">
  55. {{ Form::label('has_access', 'Active (has access)') }}
  56. <select name="has_access" id="has_access" class="form-control">
  57. <option value="1">Yes</option>
  58. <option value="0">No</option>
  59. </select>
  60. </div>
  61. </div>
  62. <div class="modal-footer">
  63. <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
  64. <button name="submit_roles" class="btn btn-primary" value="Save" type="submit">Save</button>
  65. {{ Form::close() }}
  66. </div>
  67. </div><!-- /.modal-content -->
  68. </div><!-- /.modal-dialog -->
  69. </div><!-- /.modal -->
  70. <!-- New User -->
  71. <div class="modal fade" id="modal-new-user">
  72. <div class="modal-dialog modal-sm">
  73. <div class="modal-content">
  74. <div class="modal-header">
  75. <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  76. <h4 class="modal-title">New User</h4>
  77. </div>
  78. <div class="modal-body">
  79. {{ Form::open(array('action' => array('UsersController@store'))) }}
  80. <input name="new_id" id="new_id" type="hidden"></input>
  81. <div class="form-group">
  82. <label for="new_first_name" class="control-label">Name</label>
  83. {{ Form::text('new_first_name', Input::old('new_first_name'), array('class'=>'form-control'))}}
  84. </div>
  85. <div class="form-group">
  86. <label for="new_surnames" class="control-label">Surnames</label>
  87. {{ Form::text('new_surnames', Input::old('new_surnames'), array('class'=>'form-control'))}}
  88. </div>
  89. <div class="form-group">
  90. <label for="new_email" class="control-label">Email</label>
  91. {{ Form::text('new_email', Input::old('new_email'), array('class'=>'form-control'))}}
  92. </div>
  93. <div class="form-group">
  94. {{ Form::label('new_role', 'Role') }}
  95. <select id="new_role" name="new_role" class="role form-control">
  96. <option value="1">Administrator</option>
  97. <option value="2">School Coordinator</option>
  98. <option value="3">Program Coordinator</option>
  99. <option value="4">Professor</option>
  100. </select>
  101. </div>
  102. <div class="form-group">
  103. {{ Form::label('new_school', 'School or College') }}
  104. <select id="new_school" name="new_school" class="school form-control">
  105. <option value="0">All</option>
  106. @foreach ($schools as $school)
  107. <option value="{{ $school->id }}">
  108. {{ $school->name }}
  109. </option>
  110. @endforeach
  111. </select>
  112. </div>
  113. {{ Form::label('new_programs', 'Program(s)') }}
  114. <div class="programs">
  115. <div class="form-group">
  116. <select class="program form-control" name="new_programs[]"></select>
  117. </div>
  118. </div>
  119. <p id="new-add-program-wrapper" class="text-right">
  120. <button id="new-add-program" class="add-program btn-xs btn btn-success"><span class="add-program glyphicon glyphicon-plus"></span></button>
  121. </p>
  122. </div>
  123. <div class="modal-footer">
  124. <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
  125. <button name="submit_new_user" class="btn btn-primary" value="Save" type="submit">Save</button>
  126. {{ Form::close() }}
  127. </div>
  128. </div><!-- /.modal-content -->
  129. </div><!-- /.modal-dialog -->
  130. </div><!-- /.modal -->
  131. <div class="row">
  132. <div class="col-md-12">
  133. @if(count($users))
  134. <div class="table-responsive">
  135. <table id="user_table" class="table table-striped table-condensed datatable-user">
  136. <thead>
  137. <tr>
  138. <th>Name</th>
  139. <th>College/School</th>
  140. <th>Program(s)</th>
  141. <th>Email</th>
  142. <th>Role</th>
  143. <th>Active</th>
  144. <th>Office Phone</th>
  145. <th>Cell Phone</th>
  146. <th>Edit</th>
  147. </tr>
  148. </thead>
  149. <tfoot>
  150. <tr class="column-search">
  151. <th><input class="column-search-bar form-control" type="text" placeholder="Search"/></th>
  152. <th><select class="column-search-select form-control"><option value=""></option></select></th>
  153. <th><input class="column-search-bar form-control" type="text" placeholder="Search"/></th>
  154. <th><input class="column-search-bar form-control" type="text" placeholder="Search"/></th>
  155. <th><select class="column-search-select form-control"><option value=""></option></select></th>
  156. <th><select class="column-search-select form-control"><option value=""></option></select></th>
  157. <th><input class="column-search-bar form-control" type="text" placeholder="Search"/></th>
  158. <th><input class="column-search-bar form-control" type="text" placeholder="Search"/></th>
  159. <th></th>
  160. </tr>
  161. </tfoot>
  162. <tbody>
  163. @foreach ($users as $user)
  164. <tr>
  165. <td data-user-id="{{ $user->id }}" class="user-name">{{ $user->surnames }}, {{ $user->first_name }}</td>
  166. <!-- If user has school, set school data -->
  167. @if($user->school_id)
  168. <td class="user-school" data-school-id="{{ $user->school_id }}">
  169. {{ $user->school->name }}
  170. </td>
  171. @elseif(count($user->programs)>0)
  172. <td class="user-school" data-school-id="{{ $user->programs[0]->school_id }}">
  173. {{ $user->programs[0]->school->name }}
  174. </td>
  175. @else
  176. <td>
  177. All
  178. </td>
  179. @endif
  180. <!-- If user has programs, set program data -->
  181. @if(count($user->programs))
  182. <td class="user-program">
  183. @foreach ($user->programs as $program)
  184. <p data-program-id="{{$program->id}}">{{ $program->name }}</p>
  185. @endforeach
  186. </td>
  187. @else
  188. <td>
  189. All
  190. </td>
  191. @endif
  192. <td class="user-email">{{ $user->email }}</td>
  193. @if($user->role==4)
  194. <td data-role-number="4" class="user-role">Professor</td>
  195. @elseif($user->role==3)
  196. <td data-role-number="3" class="user-role">Program Coordinator</td>
  197. @elseif($user->role==2)
  198. <td data-role-number="2" class="user-role">School Coordinator</td>
  199. @elseif($user->role==1)
  200. <td data-role-number="1" class="user-role">Administrator</td>
  201. @endif
  202. @if($user->has_access)
  203. <td class="user-has-access" data-value="1">Yes</td>
  204. @else
  205. <td class="user-has-access" data-value="0">No</td>
  206. @endif
  207. <td class="col-md-2">
  208. {{ $user->office_phone }}
  209. @if($user->office_extension)
  210. x. {{ $user->office_extension }}
  211. @endif
  212. </td>
  213. <td>
  214. {{ $user->cell_phone }}
  215. </td>
  216. <td>
  217. <span class="glyphicon glyphicon-pencil edit-user icon-btn"></span>
  218. </td>
  219. </tr>
  220. @endforeach
  221. </tbody>
  222. </table>
  223. </div>
  224. <div>
  225. <button class="btn btn-primary pull-right" id="new_user"><span class="glyphicon glyphicon-plus"></span> New User</button>
  226. </div>
  227. <br><br>
  228. @endif
  229. </div>
  230. </div>
  231. <div class="row">
  232. <div class="col-md-3">
  233. <h3>User Access</h3>
  234. <p>Use this section to control application access. Select the preferred access level and click 'Update'.</p>
  235. {{ Form::open(array('action' => 'UsersController@updateAccess')) }}
  236. <div class="form-group">
  237. <select name="access_level" class="form-control">
  238. @if($access_level == 1)
  239. <option selected="selected" value="1">Only Administrators</option>
  240. @else
  241. <option value="1">Only Administrators</option>
  242. @endif
  243. @if($access_level == 2)
  244. <option selected="selected" value="2">Only Administrators and School Coordinators</option>
  245. @else
  246. <option value="2">Only Administrators and School Coordinators</option>
  247. @endif
  248. @if($access_level == 3)
  249. <option selected="selected" value="3">Only Administrators, School Coordinators, and Program Coordinators</option>
  250. @else
  251. <option value="3">Only Administrators, School Coordinators, and Program Coordinators</option>
  252. @endif
  253. @if($access_level == 4)
  254. <option selected="selected" value="4">All users</option>
  255. @else
  256. <option value="4">All Users</option>
  257. @endif
  258. </select>
  259. </div>
  260. <button type="submit" class="btn btn-primary">Update</button>
  261. {{ Form::close() }}
  262. </div>
  263. </div>
  264. @stop
  265. @section('included-js')
  266. @include('global._datatables_js')
  267. @stop
  268. @section('javascript')
  269. // ------------------------------------------------------------------------
  270. // Page Load
  271. // ------------------------------------------------------------------------
  272. // ------------------------------------------------------------------------
  273. // Events
  274. // ------------------------------------------------------------------------
  275. function triggerEditModal(element)
  276. {
  277. // Set static info in modal
  278. var user= element.closest('tr');
  279. $('#id').val(user.find('.user-name').data('user-id'));
  280. $('#name').text(user.find('.user-name').text());
  281. $('#email').text(user.find('.user-email').text());
  282. $('#has_access').val(user.find('.user-has-access').data('value'));
  283. // Select the selected user's current role
  284. var currentRole= user.find('.user-role').data('role-number');
  285. $('.role option[value="'+currentRole+'"]').prop('selected', true);
  286. selectSchoolandProgram(user, currentRole, $('#modal-edit-user'));
  287. //Open modal
  288. $('#modal-edit-user').modal();
  289. }
  290. // When user clicks on button to edit a user on the list
  291. $('.edit-user').on('click', function(e){
  292. triggerEditModal($(this));
  293. });
  294. // After user changes page (table is redrawn), bind modal trigger events
  295. $('table').on('draw.dt', function(e){
  296. // When user clicks on button to edit a user on the list
  297. $('.edit-user').on('click', function(e){
  298. triggerEditModal($(this));
  299. });
  300. });
  301. // When user clicks on button to create new user
  302. $('#new_user').on('click', function()
  303. {
  304. var modal = $('#modal-new-user');
  305. modal.find('.add-program').hide();
  306. // Remove all but first program
  307. modal.find('.program').not(':first').parent().remove();
  308. <!-- Select Admin role and "All" school and program -->
  309. $('#new_role option[value="1"]').prop('selected', true);
  310. $('#new_school option[value="0"]').prop('selected', true);
  311. modal.find('.program option[value="0"]').prop('selected', true);
  312. fetchPrograms(modal);
  313. <!-- Disable school and program -->
  314. $('#new_school').prop('disabled', true);
  315. modal.find('.program').prop('disabled', true);
  316. //Open modal
  317. modal.modal();
  318. });
  319. // Remove a program from the list
  320. $('.remove-program').on('click', function(e)
  321. {
  322. if($(this).parent().siblings().length > 0)
  323. $(this).parent().remove();
  324. });
  325. // On role change
  326. $('.role').on('change', function()
  327. {
  328. var modal = $(this).closest('.modal');
  329. switch($(this).find(':selected').val())
  330. {
  331. <!-- If admin, set both to All and disable selection on both-->
  332. case '1':
  333. modal.find('.school option[value="0"]').prop('selected', true);
  334. modal.find('.program option[value="0"]').prop('selected', true);
  335. modal.find('.school').prop('disabled', true);
  336. modal.find('.program').prop('disabled', true);
  337. // Remove all but first program
  338. modal.find('.program').not(':first').parent().remove();
  339. // Remove delete button and fix width of select
  340. modal.find('.program').removeClass('shortened-select');
  341. $('.remove-program').remove();
  342. //Hide button to add program
  343. modal.find('.add-program').hide();
  344. break;
  345. <!-- If scoord, set program to all and disable it -->
  346. case '2':
  347. <!-- Disable "All" option in schools and program -->
  348. modal.find('.school option[value="0"]').attr('disabled', true);
  349. if(modal.find('.school').find(':selected').val() == 0)
  350. {
  351. modal.find('.school option:enabled:first').prop('selected', true);
  352. }
  353. modal.find('.program option[value="0"]').prop('selected', true);
  354. modal.find('.school').prop('disabled', false);
  355. modal.find('.program').prop('disabled', true);
  356. // Remove all but first program
  357. modal.find('.program').not(':first').parent().remove();
  358. // Remove delete button and fix width of select
  359. modal.find('.program').removeClass('shortened-select');
  360. $('.remove-program').remove();
  361. //Hide button to add program
  362. modal.find('.add-program').hide();
  363. break;
  364. <!-- If pcoord or professor, enable everything -->
  365. case '3':
  366. case '4':
  367. <!-- Disable "All" option in school -->
  368. modal.find('.school option[value="0"]').attr('disabled', true);
  369. <!-- Enable School and select an available option for school-->
  370. modal.find('.school').prop('disabled', false);
  371. if(modal.find('.school').find(':selected').val() == 0)
  372. {
  373. modal.find('.school option:enabled:first').prop('selected', true);
  374. }
  375. <!-- Enable program-->
  376. modal.find('.program').prop('disabled', false);
  377. // If it only has one child (most likely when changing from admin or scoord)
  378. if(modal.find('.programs').children().length == 1)
  379. {
  380. <!-- Fetch programs for the available school -->
  381. fetchPrograms(modal);
  382. <!-- Disable "All" option in schools and program -->
  383. modal.find('.program option[value="0"]').attr('disabled', true);
  384. <!-- Select available option -->
  385. modal.find('.program option:enabled:first').prop('selected', true);
  386. }
  387. else
  388. {
  389. <!-- Disable "All" option in schools and program -->
  390. modal.find('.program option[value="0"]').attr('disabled', true);
  391. }
  392. // Add delete button and fix width of select
  393. modal.find('.program').addClass('shortened-select');
  394. modal.find('.program').each(function() {
  395. if($(this).siblings().length ==0)
  396. {
  397. $(this).parent().append(
  398. ' <span class="remove-program glyphicon glyphicon-remove text-primary icon-btn"></span>'
  399. );
  400. }
  401. });
  402. $('.remove-program').on('click', function(e)
  403. {
  404. if($(this).parent().siblings().length > 0)
  405. $(this).parent().remove();
  406. });
  407. //Hide button to add program
  408. modal.find('.add-program').show();
  409. break;
  410. default:
  411. break;
  412. }
  413. });
  414. $('.school').on('change', function()
  415. {
  416. var modal = $(this).closest('.modal');
  417. switch(modal.find('.role').find(':selected').val())
  418. {
  419. case '3':
  420. case '4':
  421. // Remove all but first program
  422. modal.find('.program').not(':first').parent().remove();
  423. fetchPrograms(modal);
  424. modal.find('.program option[value="0"]').attr('disabled', true);
  425. modal.find('.program option:enabled:first').prop('selected', true);
  426. break;
  427. }
  428. });
  429. $('.add-program').on('click', function(e)
  430. {
  431. e.preventDefault();
  432. var modal = $(this).closest('.modal');
  433. var clone = modal.find('.program:last')
  434. .parent()
  435. .clone();
  436. // Change name
  437. clone
  438. .children('select')
  439. .attr('name', 'programs[]');
  440. // Append
  441. modal.find('.programs').append(clone);
  442. modal.find('.remove-program').on('click', function(e)
  443. {
  444. if($(this).parent().siblings().length > 0)
  445. $(this).parent().remove();
  446. });
  447. });
  448. // ------------------------------------------------------------------------
  449. // Functions
  450. // ------------------------------------------------------------------------
  451. function selectSchoolandProgram(user, role, modal)
  452. {
  453. modal.find('.add-program').hide();
  454. switch(role)
  455. {
  456. case 1:
  457. fetchPrograms(modal);
  458. <!-- Select "All" in school and program -->
  459. $('.school option[value="0"]').prop('selected', true);
  460. modal.find('.program option[value="0"]').prop('selected', true);
  461. <!-- Disable school and program -->
  462. $('.school').prop('disabled', true);
  463. modal.find('.program').prop('disabled', true);
  464. break;
  465. case 2:
  466. <!-- Find and select user's school -->
  467. var school_id = user.find('.user-school').data('school-id');
  468. $('.school option[value="'+school_id+'"]').prop('selected', true);
  469. <!-- Fetch programs -->
  470. fetchPrograms(modal);
  471. <!-- Disable "All" option in school and select the next one-->
  472. $('.school option[value="0"]').attr('disabled', true);
  473. <!-- Disable all options in program -->
  474. modal.find('.program').prop('disabled', true);
  475. <!-- -->
  476. break;
  477. case 3:
  478. case 4:
  479. <!-- Make sure school and program are not disabled -->
  480. $('.school').prop('disabled', false);
  481. modal.find('.program').prop('disabled', false);
  482. var school_id = user.find('.user-school').data('school-id');
  483. $('.school option[value="'+school_id+'"]').prop('selected', true);
  484. var program_ids = new Array();
  485. modal.find('.programs').empty();
  486. user.find('.user-program').children().each(function(index, value)
  487. {
  488. $(this).parent().siblings().find('.remove-program').prop('disabled', true);
  489. var program_id = $(this).data('program-id');
  490. modal.find('.programs').append(
  491. '<div class="form-group">'+
  492. '<select class="program form-control shortened-select" name="programs[]"></select>'+
  493. ' <span class="remove-program glyphicon glyphicon-remove text-primary icon-btn"></span>'+
  494. '</div>'
  495. );
  496. $('.remove-program').on('click', function(e)
  497. {
  498. if($(this).parent().siblings().length > 0)
  499. $(this).parent().remove();
  500. });
  501. fetchPrograms(modal);
  502. program_ids.push(program_id);
  503. });
  504. for(var i =0; i < program_ids.length; i++)
  505. {
  506. var program_id = program_ids[i];
  507. modal.find('.program:eq('+i+') option[value="'+program_id+'"]').prop('selected', true);
  508. }
  509. modal.find('.add-program').show();
  510. <!-- Disable "All" option in school and program-->
  511. $('.school option[value="0"]').attr('disabled', true);
  512. modal.find('.program option[value="0"]').attr('disabled', true);
  513. break;
  514. }
  515. }
  516. // Fetch programs associated to a specific school
  517. function fetchPrograms(modal, index = 1)
  518. {
  519. //If school is set to All, do not search for programs
  520. if(modal.find('.school').find(':selected').val()!=0)
  521. {
  522. $.ajax({
  523. type: 'POST',
  524. url: "{{ URL::action('ProgramsController@fetch') }}",
  525. data: { id: modal.find('.school').find(':selected').val()},
  526. success: function(data)
  527. {
  528. modal.find('.program').empty();
  529. modal.find('.program').append('<option value="0">All</option>');
  530. data.forEach( function (program)
  531. {
  532. modal.find('.program')
  533. .append('<option value="'+program.id+'" >'+program.name+'</option>');
  534. });
  535. },
  536. async:false
  537. });
  538. }
  539. else
  540. {
  541. modal.find('.program').empty();
  542. modal.find('.program').append('<option value="0">All</option>');
  543. }
  544. }
  545. @stop