@extends('layouts.master')
@section('navigation')
@include('local.managers.admins._navigation')
@stop
@section('main')
<!-- Edit User -->
<div class="modal fade" id="modal-edit-user">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Edit User</h4>
</div>
<div class="modal-body">
{{ Form::open(array('action' => array('UsersController@update'))) }}
<input name="id" id="id" type="hidden"></input>
<div class="form-group">
<label for="name" class="control-label">Name</label>
<p id="name" name="name" class="form-control-static"></p>
</div>
<div class="form-group">
<label for="" class="control-label">Email</label>
<p id="email" name="email" class="form-control-static"></p>
</div>
<div class="form-group">
{{ Form::label('role', 'Role') }}
<select id="role" name="role" class="role form-control">
<option value="1">Administrator</option>
<option value="2">School Coordinator</option>
<option value="3">Program Coordinator</option>
<option value="4">Professor</option>
</select>
</div>
<div class="form-group">
{{ Form::label('school', 'School or College') }}
<select name="school" class="school form-control">
<option value="0">All</option>
@foreach ($schools as $school)
<option value="{{ $school->id }}">
{{ $school->name }}
</option>
@endforeach
</select>
</div>
{{ Form::label('program', 'Program(s)') }}
<div class="programs">
<div class="form-group">
<select class="program form-control" name="programs[]"></select>
</div>
</div>
<p id="add-program-wrapper" class="text-right">
<button id="add-program" class="add-program btn-xs btn btn-success"><span class="glyphicon glyphicon-plus"></span></button>
</p>
<div class="form-group">
{{ Form::label('has_access', 'Active (has access)') }}
<select name="has_access" id="has_access" class="form-control">
<option value="1">Yes</option>
<option value="0">No</option>
</select>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button name="submit_roles" class="btn btn-primary" value="Save" type="submit">Save</button>
{{ Form::close() }}
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!-- New User -->
<div class="modal fade" id="modal-new-user">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">New User</h4>
</div>
<div class="modal-body">
{{ Form::open(array('action' => array('UsersController@store'))) }}
<input name="new_id" id="new_id" type="hidden"></input>
<div class="form-group">
<label for="new_first_name" class="control-label">Name</label>
{{ Form::text('new_first_name', Input::old('new_first_name'), array('class'=>'form-control'))}}
</div>
<div class="form-group">
<label for="new_surnames" class="control-label">Surnames</label>
{{ Form::text('new_surnames', Input::old('new_surnames'), array('class'=>'form-control'))}}
</div>
<div class="form-group">
<label for="new_email" class="control-label">Email</label>
{{ Form::text('new_email', Input::old('new_email'), array('class'=>'form-control'))}}
</div>
<div class="form-group">
{{ Form::label('new_role', 'Role') }}
<select id="new_role" name="new_role" class="role form-control">
<option value="1">Administrator</option>
<option value="2">School Coordinator</option>
<option value="3">Program Coordinator</option>
<option value="4">Professor</option>
</select>
</div>
<div class="form-group">
{{ Form::label('new_school', 'School or College') }}
<select id="new_school" name="new_school" class="school form-control">
<option value="0">All</option>
@foreach ($schools as $school)
<option value="{{ $school->id }}">
{{ $school->name }}
</option>
@endforeach
</select>
</div>
{{ Form::label('new_programs', 'Program(s)') }}
<div class="programs">
<div class="form-group">
<select class="program form-control" name="new_programs[]"></select>
</div>
</div>
<p id="new-add-program-wrapper" class="text-right">
<button id="new-add-program" class="add-program btn-xs btn btn-success"><span class="add-program glyphicon glyphicon-plus"></span></button>
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button name="submit_new_user" class="btn btn-primary" value="Save" type="submit">Save</button>
{{ Form::close() }}
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<div class="row">
<div class="col-md-12">
@if(count($users))
<div class="table-responsive">
<table id="user_table" class="table table-striped table-condensed datatable-user">
<thead>
<tr>
<th>Name</th>
<th>College/School</th>
<th>Program(s)</th>
<th>Email</th>
<th>Role</th>
<th>Active</th>
<th>Office Phone</th>
<th>Cell Phone</th>
<th>Edit</th>
</tr>
</thead>
<tfoot>
<tr class="column-search">
<th><input class="column-search-bar form-control" type="text" placeholder="Search"/></th>
<th><select class="column-search-select form-control"><option value=""></option></select></th>
<th><input class="column-search-bar form-control" type="text" placeholder="Search"/></th>
<th><input class="column-search-bar form-control" type="text" placeholder="Search"/></th>
<th><select class="column-search-select form-control"><option value=""></option></select></th>
<th><select class="column-search-select form-control"><option value=""></option></select></th>
<th><input class="column-search-bar form-control" type="text" placeholder="Search"/></th>
<th><input class="column-search-bar form-control" type="text" placeholder="Search"/></th>
<th></th>
</tr>
</tfoot>
<tbody>
@foreach ($users as $user)
<tr>
<td data-user-id="{{ $user->id }}" class="user-name">{{ $user->surnames }}, {{ $user->first_name }}</td>
<!-- If user has school, set school data -->
@if($user->school_id)
<td class="user-school" data-school-id="{{ $user->school_id }}">
{{ $user->school->name }}
</td>
@elseif(count($user->programs)>0)
<td class="user-school" data-school-id="{{ $user->programs[0]->school_id }}">
{{ $user->programs[0]->school->name }}
</td>
@else
<td>
All
</td>
@endif
<!-- If user has programs, set program data -->
@if(count($user->programs))
<td class="user-program">
@foreach ($user->programs as $program)
<p data-program-id="{{$program->id}}">{{ $program->name }}</p>
@endforeach
</td>
@else
<td>
All
</td>
@endif
<td class="user-email">{{ $user->email }}</td>
@if($user->role==4)
<td data-role-number="4" class="user-role">Professor</td>
@elseif($user->role==3)
<td data-role-number="3" class="user-role">Program Coordinator</td>
@elseif($user->role==2)
<td data-role-number="2" class="user-role">School Coordinator</td>
@elseif($user->role==1)
<td data-role-number="1" class="user-role">Administrator</td>
@endif
@if($user->has_access)
<td class="user-has-access" data-value="1">Yes</td>
@else
<td class="user-has-access" data-value="0">No</td>
@endif
<td class="col-md-2">
{{ $user->office_phone }}
@if($user->office_extension)
x. {{ $user->office_extension }}
@endif
</td>
<td>
{{ $user->cell_phone }}
</td>
<td>
<span class="glyphicon glyphicon-pencil edit-user icon-btn"></span>
</td>
</tr>
@endforeach
</tbody>
</table>
</div>
<div>
<button class="btn btn-primary pull-right" id="new_user"><span class="glyphicon glyphicon-plus"></span> New User</button>
</div>
<br><br>
@endif
</div>
</div>
<div class="row">
<div class="col-md-3">
<h3>User Access</h3>
<p>Use this section to control application access. Select the preferred access level and click 'Update'.</p>
{{ Form::open(array('action' => 'UsersController@updateAccess')) }}
<div class="form-group">
<select name="access_level" class="form-control">
@if($access_level == 1)
<option selected="selected" value="1">Only Administrators</option>
@else
<option value="1">Only Administrators</option>
@endif
@if($access_level == 2)
<option selected="selected" value="2">Only Administrators and School Coordinators</option>
@else
<option value="2">Only Administrators and School Coordinators</option>
@endif
@if($access_level == 3)
<option selected="selected" value="3">Only Administrators, School Coordinators, and Program Coordinators</option>
@else
<option value="3">Only Administrators, School Coordinators, and Program Coordinators</option>
@endif
@if($access_level == 4)
<option selected="selected" value="4">All users</option>
@else
<option value="4">All Users</option>
@endif
</select>
</div>
<button type="submit" class="btn btn-primary">Update</button>
{{ Form::close() }}
</div>
</div>
@stop
@section('included-js')
@include('global._datatables_js')
@stop
@section('javascript')
// ------------------------------------------------------------------------
// Page Load
// ------------------------------------------------------------------------
// ------------------------------------------------------------------------
// Events
// ------------------------------------------------------------------------
function triggerEditModal(element)
{
// Set static info in modal
var user= element.closest('tr');
$('#id').val(user.find('.user-name').data('user-id'));
$('#name').text(user.find('.user-name').text());
$('#email').text(user.find('.user-email').text());
$('#has_access').val(user.find('.user-has-access').data('value'));
// Select the selected user's current role
var currentRole= user.find('.user-role').data('role-number');
$('.role option[value="'+currentRole+'"]').prop('selected', true);
selectSchoolandProgram(user, currentRole, $('#modal-edit-user'));
//Open modal
$('#modal-edit-user').modal();
}
// When user clicks on button to edit a user on the list
$('.edit-user').on('click', function(e){
triggerEditModal($(this));
});
// After user changes page (table is redrawn), bind modal trigger events
$('table').on('draw.dt', function(e){
// When user clicks on button to edit a user on the list
$('.edit-user').on('click', function(e){
triggerEditModal($(this));
});
});
// When user clicks on button to create new user
$('#new_user').on('click', function()
{
var modal = $('#modal-new-user');
modal.find('.add-program').hide();
// Remove all but first program
modal.find('.program').not(':first').parent().remove();
<!-- Select Admin role and "All" school and program -->
$('#new_role option[value="1"]').prop('selected', true);
$('#new_school option[value="0"]').prop('selected', true);
modal.find('.program option[value="0"]').prop('selected', true);
fetchPrograms(modal);
<!-- Disable school and program -->
$('#new_school').prop('disabled', true);
modal.find('.program').prop('disabled', true);
//Open modal
modal.modal();
});
// Remove a program from the list
$('.remove-program').on('click', function(e)
{
if($(this).parent().siblings().length > 0)
$(this).parent().remove();
});
// On role change
$('.role').on('change', function()
{
var modal = $(this).closest('.modal');
switch($(this).find(':selected').val())
{
<!-- If admin, set both to All and disable selection on both-->
case '1':
modal.find('.school option[value="0"]').prop('selected', true);
modal.find('.program option[value="0"]').prop('selected', true);
modal.find('.school').prop('disabled', true);
modal.find('.program').prop('disabled', true);
// Remove all but first program
modal.find('.program').not(':first').parent().remove();
// Remove delete button and fix width of select
modal.find('.program').removeClass('shortened-select');
$('.remove-program').remove();
//Hide button to add program
modal.find('.add-program').hide();
break;
<!-- If scoord, set program to all and disable it -->
case '2':
<!-- Disable "All" option in schools and program -->
modal.find('.school option[value="0"]').attr('disabled', true);
if(modal.find('.school').find(':selected').val() == 0)
{
modal.find('.school option:enabled:first').prop('selected', true);
}
modal.find('.program option[value="0"]').prop('selected', true);
modal.find('.school').prop('disabled', false);
modal.find('.program').prop('disabled', true);
// Remove all but first program
modal.find('.program').not(':first').parent().remove();
// Remove delete button and fix width of select
modal.find('.program').removeClass('shortened-select');
$('.remove-program').remove();
//Hide button to add program
modal.find('.add-program').hide();
break;
<!-- If pcoord or professor, enable everything -->
case '3':
case '4':
<!-- Disable "All" option in school -->
modal.find('.school option[value="0"]').attr('disabled', true);
<!-- Enable School and select an available option for school-->
modal.find('.school').prop('disabled', false);
if(modal.find('.school').find(':selected').val() == 0)
{
modal.find('.school option:enabled:first').prop('selected', true);
}
<!-- Enable program-->
modal.find('.program').prop('disabled', false);
// If it only has one child (most likely when changing from admin or scoord)
if(modal.find('.programs').children().length == 1)
{
<!-- Fetch programs for the available school -->
fetchPrograms(modal);
<!-- Disable "All" option in schools and program -->
modal.find('.program option[value="0"]').attr('disabled', true);
<!-- Select available option -->
modal.find('.program option:enabled:first').prop('selected', true);
}
else
{
<!-- Disable "All" option in schools and program -->
modal.find('.program option[value="0"]').attr('disabled', true);
}
// Add delete button and fix width of select
modal.find('.program').addClass('shortened-select');
modal.find('.program').each(function() {
if($(this).siblings().length ==0)
{
$(this).parent().append(
' <span class="remove-program glyphicon glyphicon-remove text-primary icon-btn"></span>'
);
}
});
$('.remove-program').on('click', function(e)
{
if($(this).parent().siblings().length > 0)
$(this).parent().remove();
});
//Hide button to add program
modal.find('.add-program').show();
break;
default:
break;
}
});
$('.school').on('change', function()
{
var modal = $(this).closest('.modal');
switch(modal.find('.role').find(':selected').val())
{
case '3':
case '4':
// Remove all but first program
modal.find('.program').not(':first').parent().remove();
fetchPrograms(modal);
modal.find('.program option[value="0"]').attr('disabled', true);
modal.find('.program option:enabled:first').prop('selected', true);
break;
}
});
$('.add-program').on('click', function(e)
{
e.preventDefault();
var modal = $(this).closest('.modal');
var clone = modal.find('.program:last')
.parent()
.clone();
// Change name
clone
.children('select')
.attr('name', 'programs[]');
// Append
modal.find('.programs').append(clone);
modal.find('.remove-program').on('click', function(e)
{
if($(this).parent().siblings().length > 0)
$(this).parent().remove();
});
});
// ------------------------------------------------------------------------
// Functions
// ------------------------------------------------------------------------
function selectSchoolandProgram(user, role, modal)
{
modal.find('.add-program').hide();
switch(role)
{
case 1:
fetchPrograms(modal);
<!-- Select "All" in school and program -->
$('.school option[value="0"]').prop('selected', true);
modal.find('.program option[value="0"]').prop('selected', true);
<!-- Disable school and program -->
$('.school').prop('disabled', true);
modal.find('.program').prop('disabled', true);
break;
case 2:
<!-- Find and select user's school -->
var school_id = user.find('.user-school').data('school-id');
$('.school option[value="'+school_id+'"]').prop('selected', true);
<!-- Fetch programs -->
fetchPrograms(modal);
<!-- Disable "All" option in school and select the next one-->
$('.school option[value="0"]').attr('disabled', true);
<!-- Disable all options in program -->
modal.find('.program').prop('disabled', true);
<!-- -->
break;
case 3:
case 4:
<!-- Make sure school and program are not disabled -->
$('.school').prop('disabled', false);
modal.find('.program').prop('disabled', false);
var school_id = user.find('.user-school').data('school-id');
$('.school option[value="'+school_id+'"]').prop('selected', true);
var program_ids = new Array();
modal.find('.programs').empty();
user.find('.user-program').children().each(function(index, value)
{
$(this).parent().siblings().find('.remove-program').prop('disabled', true);
var program_id = $(this).data('program-id');
modal.find('.programs').append(
'<div class="form-group">'+
'<select class="program form-control shortened-select" name="programs[]"></select>'+
' <span class="remove-program glyphicon glyphicon-remove text-primary icon-btn"></span>'+
'</div>'
);
$('.remove-program').on('click', function(e)
{
if($(this).parent().siblings().length > 0)
$(this).parent().remove();
});
fetchPrograms(modal);
program_ids.push(program_id);
});
for(var i =0; i < program_ids.length; i++)
{
var program_id = program_ids[i];
modal.find('.program:eq('+i+') option[value="'+program_id+'"]').prop('selected', true);
}
modal.find('.add-program').show();
<!-- Disable "All" option in school and program-->
$('.school option[value="0"]').attr('disabled', true);
modal.find('.program option[value="0"]').attr('disabled', true);
break;
}
}
// Fetch programs associated to a specific school
function fetchPrograms(modal, index = 1)
{
//If school is set to All, do not search for programs
if(modal.find('.school').find(':selected').val()!=0)
{
$.ajax({
type: 'POST',
url: "{{ URL::action('ProgramsController@fetch') }}",
data: { id: modal.find('.school').find(':selected').val()},
success: function(data)
{
modal.find('.program').empty();
modal.find('.program').append('<option value="0">All</option>');
data.forEach( function (program)
{
modal.find('.program')
.append('<option value="'+program.id+'" >'+program.name+'</option>');
});
},
async:false
});
}
else
{
modal.find('.program').empty();
modal.find('.program').append('<option value="0">All</option>');
}
}
@stop