Skip to content

Commit

Permalink
Update UI logic for request info and pass the test
Browse files Browse the repository at this point in the history
  • Loading branch information
@perryzjc
perryzjc committed Feb 27, 2024
1 parent d4db5b3 commit 21718e5
Show file tree
Hide file tree
Showing 4 changed files with 356 additions and 327 deletions.
106 changes: 56 additions & 50 deletions app/views/main/_deny_modal.html.erb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,24 +5,25 @@
<h4 class="modal-title"></h4>
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
</div>
<!-- default action is deny, but it can be dynamically changed. Check the js at the bottom of this file -->
<%= form_tag deny_teacher_path(0), method: :post, class: "form-horizontal" do %>
<div class="modal-body">
<%= label_tag 'denial_reason', 'Reason', class: 'control-label' %>
<%# The text field values are now filled when the modal is opened %>
<%= text_field_tag 'js_name_field', nil, class: "form-control" %>
<!-- <div class="form-group">
<label for="reason-select">Reason for Denial (Select)</label>
<select id="reason-select" name="reason-select" class="form-control">
<option value="">Select a reason</option>
<option value="Incomplete Application">Incomplete Application</option>
<option value="Insufficient Experience">Insufficient Experience</option>
<option value="Unfavorable References">Unfavorable References</option>
</select>
</div> -->
<div class="form-check">
<%= check_box_tag :skip_email, 'skip_email', false, class: 'form-check-input' %>
<%= label_tag 'skip_email', 'Skip email notifcation?', class: 'form-check-label' %>
</div>
<%= hidden_field_tag :action_type, '', class: "form-control action-type" %>
<%= label_tag 'action_reason', 'Reason', class: 'control-label' %>
<%= text_field_tag :action_reason_placeholder, '', class: "form-control action-reason", id: "action_reason" %>
<!-- <div class="form-group">
<label for="reason-select">Reason for Denial (Select)</label>
<select id="reason-select" name="reason-select" class="form-control">
<option value="">Select a reason</option>
<option value="Incomplete Application">Incomplete Application</option>
<option value="Insufficient Experience">Insufficient Experience</option>
<option value="Unfavorable References">Unfavorable References</option>
</select>
</div> -->
<div class="form-check">
<%= check_box_tag :skip_email, 'skip_email', false, class: 'form-check-input' %>
<%= label_tag 'skip_email', 'Skip email notifcation?', class: 'form-check-label' %>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>
Expand All @@ -34,38 +35,43 @@
</div>

<script type="text/javascript">
let modal = $('.js-denialModal');
modal.on('shown.bs.modal', function (event) {
let button = $(event.relatedTarget);
let teacherId = button.data('teacher-id');
let teacherName = button.data('teacher-name');
let newAction = null;
let newTitle = null;
let reasonType = null;
switch(button.data('modal-type')) {
case "deny":
newAction = `/teachers/${teacherId}/deny`;
newTitle = 'Deny ' + teacherName;
reasonType = 'denial_reason';
break;
case "request_info":
newAction = `/teachers/${teacherId}/request_info`;
newTitle = 'Request Info from ' + teacherName;
reasonType = 'request_reason';
break;
default:
newAction = `/teachers/${teacherId}/deny`;
newTitle = 'Deny ' + teacherName;
reasonType = 'denial_reason';
}
modal.find('.form-horizontal').attr('action', newAction);
modal.find('.modal-title').text(newTitle);
// Need to make reasonType the value of the TextField as well
$('.form-control').attr("id", ":" + reasonType);
$('.form-control').attr("name", reasonType);
});
modal.on('hidden.bs.modal', function () {
$('#reason').val('');
modal.find('.modal-title').text('');
});
let modal = $('.js-denialModal');
modal.on('shown.bs.modal', function (event) {
let button = $(event.relatedTarget); // Button that triggered the modal
let teacherId = button.data('teacher-id');
let teacherName = button.data('teacher-name');
let actionType = button.data('modal-type'); // Action type, e.g., "deny", "request_info"
let newAction, newTitle, inputName;

// Determine the action and title based on the button clicked
switch(actionType) {
case "deny":
newAction = `/teachers/${teacherId}/deny`;
newTitle = 'Deny ' + teacherName;
inputName = 'denial_reason'; // The dynamic part for the input's name attribute
break;
case "request_info":
newAction = `/teachers/${teacherId}/request_info`;
newTitle = 'Request Info from ' + teacherName;
inputName = 'request_reason'; // Change accordingly
break;
default:
newAction = `/teachers/${teacherId}/deny`;
newTitle = 'Deny ' + teacherName;
inputName = 'denial_reason'; // Fallback option
}

// Update the form's action and the modal's title
modal.find('.form-horizontal').attr('action', newAction);
modal.find('.modal-title').text(newTitle);

// Dynamically change the name attribute of the input field
modal.find('#action_reason').attr('name', inputName);
});

// Reset the input field when the modal is closed
modal.on('hidden.bs.modal', function () {
modal.find('#action_reason').val('').attr('name', 'action_reason_placeholder');
modal.find('.modal-title').text('');
});
</script>
108 changes: 54 additions & 54 deletions app/views/main/dashboard.html.erb
View file
Original file line number Diff line number Diff line change
@@ -1,44 +1,44 @@
<% provide(:title, "BJC Teacher Dashboard") %>
<div class="requests-dashboard">
<h2>New Requests</h2>
<table class="table js-dataTable">
<thead class="thead-dark">
<tr>
<%= render 'teachers/table_headers' %>
<th scope="col">Actions</th>
</tr>
</thead>
<tbody>
<% @unreviewed_teachers.each do |teacher| %>
<tr>
<%= render 'teachers/teacher', teacher: teacher %>
<td>
<div class="btn-group" role="group" aria-label="Validate or Remove Teacher">
<%= button_to("✔️", validate_teacher_path(teacher.id),
class: 'btn-group btn btn-outline-success', type: 'button') %>
<span>
<table class="table js-dataTable">
<thead class="thead-dark">
<tr>
<%= render 'teachers/table_headers' %>
<th scope="col">Actions</th>
</tr>
</thead>
<tbody>
<% @unreviewed_teachers.each do |teacher| %>
<tr>
<%= render 'teachers/teacher', teacher: teacher %>
<td>
<div class="btn-group" role="group" aria-label="Validate or Remove Teacher">
<%= button_to("✔️", validate_teacher_path(teacher.id),
class: 'btn-group btn btn-outline-success', type: 'button') %>
<span>
<button class="btn btn-outline-warning" type="button" data-toggle="modal" data-target=".js-denialModal"
data-modal-type="request_info" data-teacher-id="<%= teacher.id %>" data-teacher-name="<%= teacher.full_name %>">
data-modal-type="request_info" data-teacher-id="<%= teacher.id %>" data-teacher-name="<%= teacher.full_name %>">
❓
</button>
</span>
<span>
<span>
<button class="btn btn-outline-danger" type="button" data-toggle="modal" data-target=".js-denialModal"
data-modal-type="deny" data-teacher-id="<%= teacher.id %>" data-teacher-name="<%= teacher.full_name %>">
data-modal-type="deny" data-teacher-id="<%= teacher.id %>" data-teacher-name="<%= teacher.full_name %>">
❌
</button>
</span>
</div>
</td>
</tr>
<% end %>
</tbody>
</table>
<% if @unreviewed_teachers.empty? %>
<div class="alert alert-success" role="alert">
<strong>No unreviewed forms!</strong>
</div>
</div>
</td>
</tr>
<% end %>
</tbody>
</table>
<% if @unreviewed_teachers.empty? %>
<div class="alert alert-success" role="alert">
<strong>No unreviewed forms!</strong>
</div>
<% end %>
</div>

<%= render 'deny_modal' %>
Expand All @@ -52,65 +52,65 @@
<h2>Course Statistics</h2>
<table class="table">
<thead class="thead-dark">
<tr>
<tr>
<th scope="col"> Status </th>
<th scope="col"> Count </th>
</tr>
</tr>
</thead>
<tbody>
<% @statuses.each do |key, value| %>
<% @statuses.each do |key, value| %>
<tr>
<td> <%= key.humanize.titlecase %> </td>
<td> <%= value %> </td>
</tr>
<% end %>
<% end %>
</tbody>
</table>
</table>
</div>

<div class="col-6">
<h2>School Statistics</h2>
<table class="table">
<thead class="thead-dark">
<tr>
<tr>
<th scope="col">School</th>
<th scope="col">Location</th>
<th scope="col">Teachers</th>
</tr>
</tr>
</thead>
<tbody>
<% @schools.each do |school| %>
<% @schools.each do |school| %>
<tr>
<td><%= link_to(school.name, school_path(school)) %></td>
<td><%= school.location %></td>
<td><%= school.teachers_count %></td>
</tr>
<% end %>
<% end %>
</tbody>
</table>
</div>
</div>

<script>
let map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 39.50, lng: -98.35},
zoom: 4
});
let map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 39.50, lng: -98.35},
zoom: 4
});

let school_data = <%= School.all_maps_data.html_safe %>;
for (let school of school_data) {
let marker = new google.maps.Marker({
position: school.position,
map: map
});
let infoWindow = new google.maps.InfoWindow({ content: school.name });
marker.addListener('click', () => { infoWindow.open(map, marker) });
let school_data = <%= School.all_maps_data.html_safe %>;
for (let school of school_data) {
let marker = new google.maps.Marker({
position: school.position,
map: map
});
let infoWindow = new google.maps.InfoWindow({ content: school.name });
marker.addListener('click', () => { infoWindow.open(map, marker) });
}
}
}
</script>

<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA9YjQt1uyBo0rEKe7UWMeW9GUryKtaMVo&callback=initMap">
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA9YjQt1uyBo0rEKe7UWMeW9GUryKtaMVo&callback=initMap">
</script>
Loading

0 comments on commit 21718e5

Please sign in to comment.