OLAS/app/views/local/managers/admins/transformativeAction.blade.php

@extends('layouts.master')

@section('navigation')
    @if($role==2)
        @include('local.managers.sCoords._navigation')
    @elseif($role==3)
        @include('local.managers.pCoords._navigation')
    @else
        @include('local.professors._navigation')
    @endif
@stop
@section('main')

<div class="row">
    <div class="col-md-6">
        <!-- Form to add a new criterion -->
        <div class="panel panel-default panel-button">
            <div class="panel-heading">
                Create a TA
            </div>
            <div class="panel-body" id="createPanel">
              {{ Form::open(array('action' => 'TransformativeActionsController@createTA')) }}

              <div class="form-group">
                {{ Form::label('text', 'Name') }}
                {{ Form::text('text', '', array('class' => 'form-control')) }}
              </div>

              <div class="form-group">
                {{ Form::label('description', 'Description') }}
                {{ Form::textarea('description', '', array('class' => 'form-control')) }}
              </div>

              <div class="form-group"> </div>
              <div class="form-group" id='dummyApproval'>
                <label>Availability</label>
                <select name="approval" class="form-control">
                  <option value="1">Recommended</option>
                  <option value="0">To be implemented</option>
                </select>
              </div>

              <label>Courses being Transformed by the Action</label>
              <div class="" id="">
                <div class="form-group col-md-11">
                  <select name="courseid[]" class="form-control createCourses selectpicker">
                    @foreach ($courses_create as $course)
                      <option value="{{$course->id}}">{{$course->name}} [{{$course->code}}]</option>
                    @endforeach
                  </select>
                </div>
                <button type="button" class='btn btn-md btn-primary col-md-1 remove-course'>
                  X
                </button>
              </div>
              <button type="button" class='btn btn-md btn-secondary add-course'>
                <span class='glyphicon glyphicon-plus'>
                </span>
                Add another Course
              </button>
              <div class="form-group"> </div>

              <div class="form-group" id='createOutcome'>
                <label>Outcome perteneciente</label>
                <select name="outcome" class="form-control selectpicker">
                  @foreach ($outcomes as $outcome)
                    <option value="{{$outcome->id}}">{{$outcome->name}}</option>
                  @endforeach
                </select>
              </div>

              <label>Associated Objectives</label>
              <div class="" id="">
                <div class="form-group col-md-11">
                  <select name="objectiveid[]" class="form-control createObjectives">
                    <option value="">First, select an Outcome</option>
                  </select>
                </div>
                <button type="button" class='btn btn-md btn-primary col-md-1 remove-objective'>
                  X
                </button>
              </div>
              <button type="button" class='btn btn-md btn-secondary add-objective'>
                <span class='glyphicon glyphicon-plus'>
                </span>
                Add another Objective
              </button>
              <div class="form-group"> </div>

              {{ Form::submit('Create', array('class' => 'btn btn-primary btn-block')) }}
              {{ Form::close() }}
            </div>
        </div>
        <div class="panel panel-default panel-button">
            <div class="panel-heading">
                Approve a Recommended TA
            </div>
            <div class="panel-body" id="approvePanel">

              <div class="">
                <button class="btn btn-md btn-secondary filterButton">
                  <span class="glyphicon glyphicon-plus">
                  </span>
                  Filters
                </button>
              </div>
              <div class="filterSection">
                <br>
                <div class="">
                  <div class="">
                    <label>Professor that created the TA</label>
                    <select class="form-control filterProfessor selectpicker">
                      <option value="0">Show All</option>
                      @foreach ($professor_filter_approvePanel as $ta)
                        <option value="{{$ta->id}}">Prof. {{$ta->first_name}} {{$ta->surnames}}</option>
                      @endforeach
                    </select>
                  </div>
                  <br>
                  <div class="">
                    <label>Course evaluated by an Objective of the TA</label>
                    <select class="form-control filterCourse selectpicker">
                      <option value="0">Show All</option>
                      @foreach ($course_filter_approvePanel as $course)
                        <option value="{{$course->id}}">{{$course->name}}[{{$course->code}}]</option>
                      @endforeach
                    </select>
                  </div>
                  <br>
                  <div class="">
                    <label>Outcome of the TA</label>
                    <select class="form-control filterOutcome selectpicker">
                      <option value="0">Show All</option>
                      @foreach ($outcome_filter_approvePanel as $outcome)
                        <option value="{{$outcome->id}}">{{$outcome->name}}</option>
                      @endforeach
                    </select>
                  </div>
                </div>
              </div>
              <hr>
              {{ Form::open(array('action' => 'TransformativeActionsController@approveTA')) }}

              <div>
                <div class="form-group col-md-11">
                  <label>Select Transformative Action</label>
                  <select name="ta" class="form-control SelectTA selectpicker" id='approvalSelectTA'>
                    @if (count($ta_approval_panel) == 0)
                      <option value="0">No TAs available</option>
                    @else
                    @endif
                    @foreach ($ta_approval_panel as $ta)
                      <option value="{{$ta->id}}">{{$ta->at_text}}</option>
                   @endforeach
                  </select>
                </div>
              </div>

              <div class="form-group">
                {{ Form::label('approvalDescription', 'Description') }}
                {{ Form::textarea('approvalDescription', '', array('class' => 'form-control')) }}
              </div>

              <label>Associated Courses</label>
              <div class="approveCourses">
                <div class="form-group col-md-11 approveCourse">
                  <select name="courseid[]" class="form-control selectpicker">
                      <option value="">option</option>
                  </select>
                </div>
                <button type="button" class='btn btn-md btn-primary col-md-1 remove-course'>
                  X
                </button>
              </div>
              <button type="button" class='btn btn-md btn-secondary add-course'>
                <span class='glyphicon glyphicon-plus'>
                </span>
                Add another Course
              </button>

              <label>Associated Objectives</label>
              <div class="approveObjectives">
                <div class="form-group col-md-11">
                  <select name="objectiveid[]" class="form-control">
                    @foreach ($objectives as $id => $text)
                      <option value="{{$id}}">{{$text}}</option>
                    @endforeach
                  </select>
                </div>
                <button type="button" class='btn btn-md btn-primary col-md-1 remove-objective'>
                  X
                </button>
              </div>
              <button type="button" class='btn btn-md btn-secondary add-objective'>
                <span class='glyphicon glyphicon-plus'>
                </span>
                Add another Objective
              </button>

              <input type='hidden' name='at_text' class="approvalText">

              <input type='hidden' name='ta_id' class='updateTA'>

              {{ Form::submit('Approve', array('class' => 'btn btn-primary btn-block')) }}
              {{ Form::close() }}
            </div>
        </div>
    </div>

    <div class="col-md-6">
        <div class="panel panel-default panel-button">
            <div class="panel-heading">
                Edit a TA
            </div>
            <div class="panel-body" id="editPanel">

              <div class="">
                <button class="btn btn-md btn-secondary filterButton">
                  <span class="glyphicon glyphicon-plus">
                  </span>
                  Filters
                </button>
              </div>
              <div class="filterSection">
                <br>
                <div class="">
                  <div class="">
                    <label>Professor that created the TA</label>
                    <select class="form-control filterProfessor selectpicker">
                      <option value="0">Show All</option>
                      @foreach ($professor_filter_editPanel as $user)
                        <option value="{{$user->id}}">Prof. {{$user->first_name}} {{$user->surnames}}</option>
                      @endforeach
                    </select>
                  </div>
                  <br>
                  <div class="">
                    <label>Course evaluated by an Objective of the TA</label>
                    <select class="form-control filterCourse selectpicker">
                      <option value="0">Show All</option>
                      @foreach ($course_filter_editPanel as $course)
                        <option value="{{$course->id}}">{{$course->name}}[{{$course->code}}]</option>
                      @endforeach
                    </select>
                  </div>
                  <br>
                  <div class="">
                    <label>Outcome of the TA</label>
                    <select class="form-control filterOutcome selectpicker">
                      <option value="0">Show All</option>
                      @foreach ($outcome_filter_editPanel as $outcome)
                        <option value="{{$outcome->id}}">{{$outcome->name}}</option>
                      @endforeach
                    </select>
                  </div>
                </div>
              </div>
              <hr>

              {{ Form::open(array('action' => 'TransformativeActionsController@updateTA')) }}

              <div>
                <div class="form-group col-md-12">
                  <label>Select Transformative Action</label>
                  <select name="ta" class="form-control SelectTA selectpicker" id='editSelectTA'>
                     @if (count($ta_edit_panel) == 0)
                       <option value="0">No TAs available</option>
                     @else
                     @endif
                     @foreach ($ta_edit_panel as $ta)
                      <option value="{{$ta->id}}">{{$ta->at_text}}</option>
                    @endforeach
                  </select>
                </div>
              </div>

              <div class="form-group" id="editName">
                {{ Form::label('text', 'Name') }}
                {{ Form::text('text', '', array('class' => 'form-control')) }}
              </div>
              <input type='hidden' name='ta_id' class='updateTA' value="0">

              <div class="form-group">
                {{ Form::label('description', 'Description') }}
                {{ Form::textarea('description', '', array('class' => 'form-control')) }}
              </div>

              <div class="form-group"> </div>
              <div class="form-group" id='editApproval'>
                <label>Availability</label>
                <select name="approval" class="form-control selectpicker">
                    <option value="1">Recommended</option>
                    <option value="0">To be implemented</option>
                </select>
              </div>

              <label>Associated Courses</label>
              <div class="editCourses">
                <div class="form-group col-md-11 editCourse">
                  <select name="courseid[]" class="form-control selectpicker">
                    @foreach ($courses_create as $course)
                      <option value="{{$course->id}}">{{$course->name}}[{{$course->code}}]</option>
                    @endforeach
                  </select>
                </div>
                <button type="button" class='btn btn-md btn-primary col-md-1 remove-course'>
                  X
                </button>
              </div>
              <button type="button" class='btn btn-md btn-secondary add-course'>
                <span class='glyphicon glyphicon-plus'>
                </span>
                Add another Course
              </button>
              <div class="form-group"> </div>

              <label>Associated Objectives</label>
              <div class="editObjectives">
                <div class="form-group col-md-11">
                  {{-- <select class="form-control selectpicker"> --}}
                  <select name="objectiveid[]" class="form-control">
                    @foreach ($objectives as $id => $text)
                      <option value="{{$id}}">{{$text}}</option>
                    @endforeach
                  </select>
                </div>
                <button type="button" class='btn btn-md btn-primary col-md-1 remove-objective'>
                  X
                </button>
              </div>
              <button type="button" class='btn btn-md btn-secondary add-objective'>
                <span class='glyphicon glyphicon-plus'>
                </span>
                Add another Objective
              </button>
              <div class="form-group"> </div>

              {{ Form::submit('Update', array('class' => 'btn btn-primary btn-block')) }}
              {{ Form::close() }}

              {{ Form::open(array('action' => 'TransformativeActionsController@deleteTA')) }}
              <input type='hidden' name='ta_id' id='deleteTA'>
              {{Form::submit("Delete", array('class'=> 'btn btn-primary btn-block', 'id'=>"DeleteButton"))}}
            </div>
        </div>
    </div>
</div>

@stop

@section('javascript')

// --------------------------------------------------------------------------
// Page load
// --------------------------------------------------------------------------

// Hide accordion panel contents by default
$('.panel-group .panel-body').hide();

$('#outcome-display').parent().hide();

$('.remove-objective').hide();
$('.remove-course').hide();

////createPanel
// remove TA approval section if the user isnt a program coordinator
var dummyApproval = $('#dummyApproval');
dummyApproval.find('select').prop('disabled', 'disabled');
dummyApproval.find('option').remove();


var role = {{Auth::user()['role']}};
if (role == 3){
  dummyApproval.find('select').append('<option value="0">To be implemented</option>');
  $('#approvePanel .add-course').hide();
} else if (role == 4){
  dummyApproval.find('select').append('<option value="1">Recommended</option>');
  $('#approvePanel').parent().hide();

  //hide the select for changin Availability
  $('#editApproval').find('select').prop('disabled', 'disabled');
  //add an input since disabled the form wont recognize it
  $('#editApproval').append('<input type="text" name="approval" value="1" hidden />')

  // in edit panel, hide the professor filter
  $('.filterProfessor').parent().hide();
  $('.filterProfessor').parent().next().hide(); // hide <br>
}

$('.createObjectives').prop('disabled', 'disabled');
$('#createPanel .add-objective').prop('disabled', 'disabled');


////editPanel
// disable the buttons of the edit section if there are no TA for selection
if(($('#editSelectTA').val() === "")){
  $('#editPanel').find('select').prop('disabled', 'disabled');
  $('#editPanel').find('button').prop('disabled', 'disabled');
  $('#editPanel').find('input').prop('disabled', 'disabled');
}else{
  var ta_id = $('#editSelectTA').val();
  if(ta_id != 0){
    load_ta_info_for_edit(ta_id);
  }


}

////approvePanel
$('#approvePanel .add-objective').hide();
// disable the buttons of the approval section if there are no TA for selection
if(($('#approvalSelectTA').val() === "")){
  $('#approvePanel').find('select').prop('disabled', 'disabled');
  $('#approvePanel').find('button').prop('disabled', 'disabled');
  $('#approvePanel').find('input').prop('disabled', 'disabled');
  $('#approvalDescription').prop('disabled', 'disabled');
}else{
  var ta_id = $('#approvalSelectTA').val();
  if(ta_id != 0){
    load_ta_info_for_approval(ta_id);
  }

}

//
$('.filterSection').hide();

// --------------------------------------------------------------------------
// Functions
// --------------------------------------------------------------------------

function load_objectives_from_outcome(outcome_id) {
  $.post(
    "{{ URL::action('TransformativeActionsController@objectivesFromOutcome') }}",
    {
      outcome_id: (outcome_id),
    },
    function(data)
    {
      var panel = $('#createPanel');

      //
      var objectives = data.objectives;
      //delete al current select
      panel.find('.remove-objective').parent().remove();

      //create select
      var new_div = $('<div/>',{
        'class': 'createObjectives'
      });
      var new_inner_div = $('<div/>',{
        'class': 'form-group col-md-11'
      });
      var new_select = $('<select/>',{
        'class': 'form-control createObjectives selectpicker',
        'data-live-search': 'true',
        'name': 'objectiveid[]'
      });
      var new_button = $('<button/>',{
        'class': 'btn btn-md btn-primary col-md-1 remove-objective',
        'type': 'button',
        'html': 'X'
      });
      new_button.hide();

      $.each(objectives, function(index, objective)
      {
        new_select.append('<option value="'+ objective.id +'">'+ objective.text +'</option>');
      });

      panel.find('.add-objective').before(new_div);
      new_div.append(new_button);
      new_div.append(new_inner_div);
      new_inner_div.append(new_select);
      new_select.selectpicker('refresh');

      //activate the button for adding more objectives
      $('#createPanel .add-objective').prop('disabled', false);
    }
  );
}

function load_ta_info_for_edit(ta_id) {
  $.post(
    "{{ URL::action('TransformativeActionsController@selectTA') }}",
    {
      ta_id: (ta_id),
    },
    function(data)
    {
      //
      var selected_courses = data.selected_courses;
      var objectives = data.objectives;
      var objectives_from_outcome = data.objectives_from_outcome;
      var status = data.status;
      var name = data.name[0];
      var description = data.description[0];
      var can_be_deleted = data.can_be_deleted;

      //add objectives button
      var add_button = $('#editPanel .add-objective');

      //set if the TA is approved or not
      $('#editApproval select').val(status);

      //delete objectives select
      $('.editObjectives').remove();

      //create one objective select and populate it
      var panel = $('#editPanel');

      //
      var objectives = data.objectives;
      //delete al current select
      panel.find('.remove-objective').parent().remove();

      //create select
      var new_div = $('<div/>',{
        'class': 'editObjectives'
      });
      var new_inner_div = $('<div/>',{
        'class': 'form-group col-md-11'
      });
      var new_select = $('<select/>',{
        'class': 'form-control editObjectives selectpicker',
        'data-live-search': 'true',
        'name': 'objectiveid[]'
      });
      var new_button = $('<button/>',{
        'class': 'btn btn-md btn-primary col-md-1 remove-objective',
        'type': 'button',
        'html': 'X'
      });
      new_button.hide();

      $.each(objectives_from_outcome, function(index, objective)
      {
        new_select.append('<option value="'+ objective.id +'">'+ objective.text +'</option>');
      });

      panel.find('.add-objective').before(new_div);
      new_div.append(new_button);
      new_div.append(new_inner_div);
      new_inner_div.append(new_select);
      new_select.selectpicker('refresh');


      //change de value of the select

      //add the other selects

      var prev_select = new_div;
      $.each(objectives, function(index, objective)
      {
        prev_select.find('select').val(objective.id);
        add_objective_select(add_button);
        {{-- add_button; --}}
        prev_select = add_button.prev();

      });
      add_button.prev().remove();

      //set the text box
      $('#editName').find('input').val(name);
      $('#editPanel #description').val(description);

      //
      $('#deleteTA').val(ta_id);
      $('#editPanel .updateTA').val(ta_id);

      if(can_be_deleted == false){
        $('#DeleteButton').prop('disabled', 'disabled');
      }else{
        $('#DeleteButton').prop('disabled', false);
      }


      //locate de "add course" button on edit panel
      var add_course_button = $('#editPanel .add-course')

      //save current course selectpickers, add a new one, and delete old ones
      var current_course_selects = $('#editPanel .editCourse');
      add_course_button.click();
      current_course_selects.remove();

      //populate edit panel with courses previusly selected
      var prev_select = add_course_button.prev();
      prev_select.find('.remove-course').hide();
      $.each(selected_courses, function(index, course)
      {
        prev_select.find('select').val(course.id);
        add_course_button.click();
        prev_select = add_course_button.prev();
      });
      prev_select.remove();

    }
  );
}

function load_ta_info_for_approval(ta_id) {
  $.post(
    "{{ URL::action('TransformativeActionsController@selectTA') }}",
    {
      ta_id: (ta_id),
    },
    function(data)
    {
      //
      var selected_courses = data.selected_courses;
      var objectives = data.objectives;
      var status = data.status[0];
      var name = data.name[0];
      var description = data.description[0];

      //clear the objectives of ony prevoius TA selected for approve
      var add_button = $('#approvePanel .add-objective');
      var select = add_button.prev().clone(true);

      var first_select = select.clone(true);
      first_select.find('button').hide();

      $('.approveObjectives').remove();
      add_button.before(first_select);

      var prev_select = first_select;
      $.each(objectives, function(index, objective)
      {

        // save the new select in a var
        var new_select = select.clone(true);

        // set only one option on the select
        prev_select.find('option').remove();
        prev_select.find('select').append('<option value="'+ objective.id +'">'+objective.text +'</option>');
        prev_select = new_select;
        // add the copy of the select
        add_button.before(new_select);
      });
      // remove the last objective select, since it isnt one of the saved objectives
      add_button.prev().remove();

      //
      $('#approvalDescription').val(description);
      $('.approvalText').val(name);
      $('#approvePanel .updateTA').val(ta_id);


      //locate de "add course" button on approve panel
      var add_course_button = $('#approvePanel .add-course')

      //save current course selectpickers, add a new one, and delete old ones
      var current_course_selects = $('#approvePanel .approveCourse');
      add_course_button.click();
      current_course_selects.remove();

      //populate approve panel with courses previusly selected
      var prev_select = add_course_button.prev();
      prev_select.find('.remove-course').hide();
      $.each(selected_courses, function(index, course)
      {
        var new_option = $('<option/>',{
          'value': course.id,
          'type': 'button',
          'html': course.name+' ['+course.code+']'
        });
        prev_select.find('select option').remove();
        prev_select.find('select').append(new_option);
        prev_select.find('.remove-course').hide();
        add_course_button.click();
        prev_select = add_course_button.prev();
      });
      prev_select.remove();

    }
  );
}

function add_objective_select(element) {
  var prev_select = $(element).prev();

  var parent_panel = $(element).parent().parent().attr('id');
  var select_class = '';
  if(parent_panel == 'editPanel'){
    select_class = 'editObjectives';
  }else{
    select_class = 'createObjectives';
  }

  //create select
  var new_div = $('<div/>',{
    'class': select_class
  });
  var new_inner_div = $('<div/>',{
    'class': 'form-group col-md-11'
  });
  var new_select = $('<select/>',{
    'class': 'form-control createObjectives selectpicker',
    'data-live-search': 'true',
    'name': 'objectiveid[]'
  });
  var new_button = $('<button/>',{
    'class': 'btn btn-md btn-primary col-md-1 remove-objective',
    'type': 'button',
    'html': 'X'
  });


  $.each(prev_select.find('option'), function(index, option)
  {
    var new_option = $('<option/>',{
      'value': $(option).val(),
      'html': $(option).html()
    });
    new_select.append(new_option);
  });


  $(element).before(new_div);
  new_div.append(new_inner_div);
  new_div.append(new_button);
  new_inner_div.append(new_select);
  $(element).parent().find('.selectpicker').selectpicker('refresh');
  new_select.selectpicker('refresh');

}

function add_course_select(element) {
  var prev_select = $(element).prev();

  var parent_panel = $(element).parent().parent().attr('id');
  var select_class = '';
  if(parent_panel == 'editPanel'){
    select_class = 'editCourse';
  }else{
    select_class = 'createCourse';
  }

  //create select
  var new_div = $('<div/>',{
    'class': select_class+' approveCourse'
  });
  var new_inner_div = $('<div/>',{
    'class': 'form-group col-md-11'
  });
  var new_select = $('<select/>',{
    'class': 'form-control createCourses selectpicker',
    'data-live-search': 'true',
    'name': 'courseid[]'
  });
  var new_button = $('<button/>',{
    'class': 'btn btn-md btn-primary col-md-1 remove-course',
    'type': 'button',
    'html': 'X'
  });


  $.each(prev_select.find('option'), function(index, option)
  {
    var new_option = $('<option/>',{
      'value': $(option).val(),
      'html': $(option).html()
    });
    new_select.append(new_option);
  });


  $(element).before(new_div);
  new_div.append(new_inner_div);
  new_div.append(new_button);
  new_inner_div.append(new_select);
  $(element).parent().find('.selectpicker').selectpicker('refresh');
  new_select.selectpicker('refresh');

}

// --------------------------------------------------------------------------
// Events
// --------------------------------------------------------------------------

// When a TA is selected for edit, load the TA info
$('#createOutcome').on('change', function()
{
  var outcome_id = $(this).find('select').val();

  load_objectives_from_outcome(outcome_id);
});

// When a TA is selected for edit, load the TA info
$('#editSelectTA').parent().on('change', function()
{
  var ta_id = $(this).find('select').val();
  if(ta_id != 0){
    load_ta_info_for_edit(ta_id);
  }
});

// When a TA is selected for approval, load the TA info
$('#approvalSelectTA').parent().on('change', function()
{
  var ta_id = $(this).find('select').val();
  if(ta_id != 0){
    load_ta_info_for_approval(ta_id);
    }
});


// Add an objective Select picker
$('.add-objective').on('click', function()
{
  add_objective_select(this);
});
// Add an course Select picker
$('.add-course').on('click', function()
{
  add_course_select(this);
});

// Remove an objective Select picker
$('.panel').on('click', '.remove-objective', function()
{
  $(this).parent().remove();
});
// Remove an course Select picker
$('.panel').on('click', '.remove-course', function()
{
  $(this).parent().remove();
});

// Remove an objective Select picker
$('.filterButton').on('click', function()
{
  var span = $(this).find('span');
  if(span.attr('class') == 'glyphicon glyphicon-plus'){
    span.attr('class','glyphicon glyphicon-minus');
  } else{
    span.attr('class','glyphicon glyphicon-plus');
  }
  $(this).parent().next().toggle(533);
});

//
$('.filterSection').on('change', function()
{

  var professor_id = $(this).find('.filterProfessor select').val();
  var course_id = $(this).find('.filterCourse select').val();
  var outcome_id = $(this).find('.filterOutcome select').val();
  var panel_id = $(this).parent().attr('id');

  var select = $('#'+panel_id+' .SelectTA select');


  $.post(
    "{{ URL::action('TransformativeActionsController@filterTA') }}",
    {
      professor_id: (professor_id),
      course_id: (course_id),
      outcome_id: (outcome_id),
      panel_id: (panel_id),
    },
    function(data)
    {
      //
      select.find('option').remove();
      $.each(data, function(index, ta)
      {
        var ta_id = ta.id;
        var ta_text = ta.at_text;
        var new_option = '<option value="'+ ta_id +'">'+ ta_text +'</option>';
        select.append(new_option);
      });

      select.selectpicker('refresh');

      if(data.length != 0){
        var ta_id = data[0].id;

        if(panel_id=='editPanel'){
          load_ta_info_for_edit(ta_id);
        }
        if(panel_id=='approvePanel'){
          load_ta_info_for_approval(ta_id);
        }
      }
    }
  );

});

@stop