update the interview stage
This commit is contained in:
parent
51583371db
commit
6b74990791
Binary file not shown.
@ -57,6 +57,7 @@ INSTALLED_APPS = [
|
||||
'django_countries',
|
||||
'django_celery_results',
|
||||
'django_q',
|
||||
'widget_tweaks',
|
||||
'easyaudit'
|
||||
|
||||
]
|
||||
@ -69,13 +70,13 @@ SITE_ID = 1
|
||||
LOGIN_REDIRECT_URL = '/dashboard/'
|
||||
|
||||
|
||||
ACCOUNT_LOGOUT_REDIRECT_URL = '/'
|
||||
ACCOUNT_LOGOUT_REDIRECT_URL = '/'
|
||||
|
||||
|
||||
ACCOUNT_SIGNUP_REDIRECT_URL = '/dashboard/'
|
||||
ACCOUNT_SIGNUP_REDIRECT_URL = '/dashboard/'
|
||||
|
||||
|
||||
LOGIN_URL = '/accounts/login/'
|
||||
LOGIN_URL = '/accounts/login/'
|
||||
|
||||
|
||||
|
||||
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
@ -273,12 +273,12 @@ class Candidate(Base):
|
||||
CANDIDATE = "Candidate", _("Candidate")
|
||||
|
||||
# Stage transition validation constants
|
||||
# STAGE_SEQUENCE = {
|
||||
# "Applied": ["Exam", "Interview", "Offer"],
|
||||
# "Exam": ["Interview", "Offer"],
|
||||
# "Interview": ["Offer"],
|
||||
# "Offer": [], # Final stage - no further transitions
|
||||
# }
|
||||
STAGE_SEQUENCE = {
|
||||
"Applied": ["Exam", "Interview", "Offer"],
|
||||
"Exam": ["Interview", "Offer"],
|
||||
"Interview": ["Offer"],
|
||||
"Offer": [], # Final stage - no further transitions
|
||||
}
|
||||
|
||||
job = models.ForeignKey(
|
||||
JobPosting,
|
||||
@ -412,13 +412,13 @@ class Candidate(Base):
|
||||
# allowed_next_stages = self.STAGE_SEQUENCE.get(old_stage, [])
|
||||
# return new_stage in allowed_next_stages
|
||||
|
||||
# def get_available_stages(self):
|
||||
# """Get list of stages this candidate can transition to"""
|
||||
# if not self.pk: # New record
|
||||
# return ["Applied"]
|
||||
def get_available_stages(self):
|
||||
"""Get list of stages this candidate can transition to"""
|
||||
if not self.pk: # New record
|
||||
return ["Applied"]
|
||||
|
||||
# old_stage = self.__class__.objects.get(pk=self.pk).stage
|
||||
# return self.STAGE_SEQUENCE.get(old_stage, [])
|
||||
old_stage = self.__class__.objects.get(pk=self.pk).stage
|
||||
return self.STAGE_SEQUENCE.get(old_stage, [])
|
||||
|
||||
@property
|
||||
def submission(self):
|
||||
|
||||
@ -68,6 +68,8 @@ urlpatterns = [
|
||||
path('jobs/<slug:slug>/candidate_exam_view/', views.candidate_exam_view, name='candidate_exam_view'),
|
||||
path('jobs/<slug:slug>/candidate_interview_view/', views.candidate_interview_view, name='candidate_interview_view'),
|
||||
|
||||
path('jobs/<slug:slug>/<int:candidate_id>/reschedule_meeting_for_candidate/<int:meeting_id>/', views.reschedule_meeting_for_candidate, name='reschedule_meeting_for_candidate'),
|
||||
|
||||
path('jobs/<slug:slug>/update_candidate_exam_status/', views.update_candidate_exam_status, name='update_candidate_exam_status'),
|
||||
path('jobs/<slug:slug>/bulk_update_candidate_exam_status/', views.bulk_update_candidate_exam_status, name='bulk_update_candidate_exam_status'),
|
||||
|
||||
@ -100,7 +102,8 @@ urlpatterns = [
|
||||
path('jobs/<slug:job_slug>/candidates/<int:candidate_pk>/reschedule-meeting/<int:interview_pk>/', views.reschedule_candidate_meeting, name='reschedule_candidate_meeting'),
|
||||
path('api/jobs/<slug:job_slug>/candidates/<int:candidate_pk>/reschedule-meeting/<int:interview_pk>/', views.api_reschedule_candidate_meeting, name='api_reschedule_candidate_meeting'),
|
||||
# New URL for simple page-based meeting scheduling
|
||||
path('jobs/<slug:job_slug>/candidates/<int:candidate_pk>/schedule-meeting-page/', views.schedule_meeting_for_candidate, name='schedule_meeting_for_candidate'),
|
||||
path('jobs/<slug:slug>/candidates/<int:candidate_pk>/schedule-meeting-page/', views.schedule_meeting_for_candidate, name='schedule_meeting_for_candidate'),
|
||||
path('jobs/<slug:slug>/candidates/<int:candidate_pk>/delete_meeting_for_candidate/<int:meeting_id>/', views.delete_meeting_for_candidate, name='delete_meeting_for_candidate'),
|
||||
|
||||
|
||||
# users urls
|
||||
|
||||
@ -579,3 +579,38 @@ def get_candidates_from_request(request):
|
||||
except Exception as e:
|
||||
logger.error(e)
|
||||
yield None
|
||||
|
||||
|
||||
|
||||
def update_meeting(instance, updated_data):
|
||||
result = update_zoom_meeting(instance.meeting_id, updated_data)
|
||||
if result["status"] == "success":
|
||||
# Fetch the latest details from Zoom after successful update
|
||||
details_result = get_zoom_meeting_details(instance.meeting_id)
|
||||
|
||||
if details_result["status"] == "success":
|
||||
zoom_details = details_result["meeting_details"]
|
||||
# Update instance with fetched details
|
||||
|
||||
instance.topic = zoom_details.get("topic", instance.topic)
|
||||
|
||||
instance.duration = zoom_details.get("duration", instance.duration)
|
||||
instance.join_url = zoom_details.get("join_url", instance.join_url)
|
||||
instance.password = zoom_details.get("password", instance.password)
|
||||
# Corrected status assignment: instance.status, not instance.password
|
||||
instance.status = zoom_details.get("status")
|
||||
|
||||
instance.zoom_gateway_response = details_result.get("meeting_details") # Store full response
|
||||
instance.save()
|
||||
logger.info(f"Successfully updated Zoom meeting {instance.meeting_id}.")
|
||||
return {"status": "success", "message": "Zoom meeting updated successfully."}
|
||||
elif details_result["status"] == "error":
|
||||
# If fetching details fails, save with form data and log a warning
|
||||
logger.warning(
|
||||
f"Successfully updated Zoom meeting {instance.meeting_id}, but failed to fetch updated details. "
|
||||
f"Error: {details_result.get('message', 'Unknown error')}"
|
||||
)
|
||||
return {"status": "success", "message": "Zoom meeting updated successfully."}
|
||||
|
||||
logger.warning(f"Failed to update Zoom meeting {instance.meeting_id}. Error: {result.get('message', 'Unknown error')}")
|
||||
return {"status": "error", "message": result.get("message", "Zoom meeting update failed.")}
|
||||
@ -32,6 +32,7 @@ from .utils import (
|
||||
create_zoom_meeting,
|
||||
delete_zoom_meeting,
|
||||
get_candidates_from_request,
|
||||
update_meeting,
|
||||
update_zoom_meeting,
|
||||
get_zoom_meeting_details,
|
||||
schedule_interviews,
|
||||
@ -171,39 +172,14 @@ class ZoomMeetingUpdateView(UpdateView):
|
||||
if instance.start_time < timezone.now():
|
||||
messages.error(self.request, "Start time must be in the future.")
|
||||
return redirect(f"/update-meeting/{instance.pk}/", status=400)
|
||||
result = update_zoom_meeting(instance.meeting_id, updated_data)
|
||||
|
||||
result = update_meeting(instance, updated_data)
|
||||
|
||||
if result["status"] == "success":
|
||||
# Fetch the latest details from Zoom after successful update
|
||||
details_result = get_zoom_meeting_details(instance.meeting_id)
|
||||
|
||||
if details_result["status"] == "success":
|
||||
zoom_details = details_result["meeting_details"]
|
||||
# Update instance with fetched details
|
||||
|
||||
instance.topic = zoom_details.get("topic", instance.topic)
|
||||
|
||||
instance.duration = zoom_details.get("duration", instance.duration)
|
||||
instance.join_url = zoom_details.get("join_url", instance.join_url)
|
||||
instance.password = zoom_details.get("password", instance.password)
|
||||
# Corrected status assignment: instance.status, not instance.password
|
||||
instance.status = zoom_details.get("status")
|
||||
|
||||
instance.zoom_gateway_response = details_result.get("meeting_details") # Store full response
|
||||
instance.save()
|
||||
messages.success(self.request, result["message"] + " Local data updated from Zoom.")
|
||||
else:
|
||||
# If fetching details fails, save with form data and log a warning
|
||||
logger.warning(
|
||||
f"Successfully updated Zoom meeting {instance.meeting_id}, but failed to fetch updated details. "
|
||||
f"Error: {details_result.get('message', 'Unknown error')}"
|
||||
)
|
||||
instance.save() # Save with data from the form
|
||||
messages.success(self.request, result["message"] + " (Note: Could not refresh local data from Zoom.)")
|
||||
return redirect(reverse("meeting_details", kwargs={"slug": instance.slug}))
|
||||
messages.success(self.request, result["message"])
|
||||
else:
|
||||
messages.error(self.request, result["message"])
|
||||
return redirect(reverse("meeting_details", kwargs={"slug": instance.slug}))
|
||||
return redirect(reverse("meeting_details", kwargs={"slug": instance.slug}))
|
||||
|
||||
|
||||
def ZoomMeetingDeleteView(request, pk):
|
||||
@ -1020,7 +996,7 @@ def submit_form(request, template_id):
|
||||
address=address.display_value,
|
||||
resume=resume.get_file if resume.is_file else None,
|
||||
job=submission.template.job,
|
||||
|
||||
|
||||
)
|
||||
return redirect('application_success')
|
||||
|
||||
@ -1125,17 +1101,6 @@ def form_submission_details(request, template_id, slug):
|
||||
|
||||
def schedule_interviews_view(request, slug):
|
||||
job = get_object_or_404(JobPosting, slug=slug)
|
||||
|
||||
# if request.method == "POST" and "Datastar-Request" in request.headers:
|
||||
# form = InterviewScheduleForm(slug=slug)
|
||||
# break_formset = BreakTimeFormSet()
|
||||
# form.initial["candidates"] = get_candidates_from_request(request)
|
||||
# def response():
|
||||
# html = render_to_string("includes/schedule_interview_div.html",{"form": form, "break_formset": break_formset, "job": job})
|
||||
# yield SSE.patch_elements(html,"#candidateviewModalBody")
|
||||
# return DatastarResponse(response())
|
||||
|
||||
|
||||
if request.method == "POST":
|
||||
form = InterviewScheduleForm(slug, request.POST)
|
||||
break_formset = BreakTimeFormSet(request.POST)
|
||||
@ -1193,16 +1158,15 @@ def schedule_interviews_view(request, slug):
|
||||
# Create Zoom meeting
|
||||
meeting_topic = f"Interview for {job.title} - {candidate.name}"
|
||||
|
||||
start_time = interview_datetime.isoformat() + "Z"
|
||||
start_time = interview_datetime
|
||||
|
||||
zoom_meeting = create_zoom_meeting(
|
||||
topic=meeting_topic,
|
||||
start_time=start_time,
|
||||
duration=schedule.interview_duration
|
||||
)
|
||||
# zoom_meeting = create_zoom_meeting(
|
||||
# topic=meeting_topic,
|
||||
# start_time=start_time,
|
||||
# duration=schedule.interview_duration
|
||||
# )
|
||||
|
||||
result = create_zoom_meeting(meeting_topic, start_time, schedule.interview_duration)
|
||||
|
||||
if result["status"] == "success":
|
||||
zoom_meeting = ZoomMeeting.objects.create(
|
||||
topic=meeting_topic,
|
||||
@ -1212,16 +1176,19 @@ def schedule_interviews_view(request, slug):
|
||||
join_url=result["meeting_details"]["join_url"],
|
||||
zoom_gateway_response=result["zoom_gateway_response"],
|
||||
)
|
||||
|
||||
# Create scheduled interview record
|
||||
scheduled_interview = ScheduledInterview.objects.create(
|
||||
candidate=candidate,
|
||||
job=job,
|
||||
zoom_meeting=zoom_meeting,
|
||||
schedule=schedule,
|
||||
interview_date=slot['date'],
|
||||
interview_time=slot['time']
|
||||
)
|
||||
# Create scheduled interview record
|
||||
ScheduledInterview.objects.create(
|
||||
candidate=candidate,
|
||||
job=job,
|
||||
zoom_meeting=zoom_meeting,
|
||||
schedule=schedule,
|
||||
interview_date=slot['date'],
|
||||
interview_time=slot['time']
|
||||
)
|
||||
else:
|
||||
messages.error(request, result["message"])
|
||||
schedule.delete()
|
||||
return redirect("candidate_interview_view", slug=slug)
|
||||
|
||||
# Send email to candidate
|
||||
# try:
|
||||
@ -1354,9 +1321,9 @@ def schedule_interviews_view(request, slug):
|
||||
else:
|
||||
form = InterviewScheduleForm(slug=slug)
|
||||
break_formset = BreakTimeFormSet()
|
||||
print(request.headers)
|
||||
if "Hx-Request" in request.headers:
|
||||
form.initial["candidates"] = [Candidate.objects.get(pk=c[0]) for c in request.GET.items()]
|
||||
if "HX-Request" in request.headers:
|
||||
candidate_ids = request.GET.getlist("candidate_ids")
|
||||
form.initial["candidates"] = Candidate.objects.filter(pk__in = candidate_ids)
|
||||
|
||||
return render(
|
||||
request,
|
||||
@ -1675,7 +1642,6 @@ def candidate_screening_view(request, slug):
|
||||
return render(request, "recruitment/candidate_screening_view.html", context)
|
||||
|
||||
|
||||
|
||||
def candidate_exam_view(request, slug):
|
||||
"""
|
||||
Manage candidate tiers and stage transitions
|
||||
@ -1728,7 +1694,6 @@ def candidate_update_status(request, slug):
|
||||
job = get_object_or_404(JobPosting, slug=slug)
|
||||
mark_as = request.POST.get('mark_as')
|
||||
candidate_ids = request.POST.getlist("candidate_ids")
|
||||
|
||||
if c := Candidate.objects.filter(pk__in = candidate_ids):
|
||||
c.update(stage=mark_as,exam_date=timezone.now(),applicant_status="Candidate" if mark_as in ["Exam","Interview","Offer"] else "Applicant")
|
||||
|
||||
@ -1739,14 +1704,55 @@ def candidate_update_status(request, slug):
|
||||
|
||||
def candidate_interview_view(request,slug):
|
||||
job = get_object_or_404(JobPosting,slug=slug)
|
||||
if "Datastar-Request" in request.headers:
|
||||
for candidate in get_candidates_from_request(request):
|
||||
print(candidate)
|
||||
context = {"job":job,"candidates":job.candidates.all()}
|
||||
context = {"job":job,"candidates":job.candidates.filter(stage="Interview").order_by("-match_score")}
|
||||
return render(request,"recruitment/candidate_interview_view.html",context)
|
||||
|
||||
def reschedule_meeting_for_candidate(request,slug,candidate_id,meeting_id):
|
||||
job = get_object_or_404(JobPosting,slug=slug)
|
||||
candidate = get_object_or_404(Candidate,pk=candidate_id)
|
||||
meeting = get_object_or_404(ZoomMeeting,pk=meeting_id)
|
||||
form = ZoomMeetingForm(instance=meeting)
|
||||
|
||||
if request.method == "POST":
|
||||
form = ZoomMeetingForm(request.POST,instance=meeting)
|
||||
if form.is_valid():
|
||||
instance = form.save(commit=False)
|
||||
updated_data = {
|
||||
"topic": instance.topic,
|
||||
"start_time": instance.start_time.isoformat() + "Z",
|
||||
"duration": instance.duration,
|
||||
}
|
||||
if instance.start_time < timezone.now():
|
||||
messages.error(request, "Start time must be in the future.")
|
||||
return redirect("reschedule_meeting_for_candidate",slug=job.slug,candidate_id=candidate_id,meeting_id=meeting_id)
|
||||
|
||||
result = update_meeting(instance, updated_data)
|
||||
|
||||
if result["status"] == "success":
|
||||
messages.success(request, result["message"])
|
||||
else:
|
||||
messages.error(request, result["message"])
|
||||
return redirect(reverse("candidate_interview_view", kwargs={"slug": job.slug}))
|
||||
|
||||
context = {"job":job,"candidate":candidate,"meeting":meeting,"form":form}
|
||||
return render(request,"meetings/reschedule_meeting.html",context)
|
||||
|
||||
|
||||
def delete_meeting_for_candidate(request,slug,candidate_pk,meeting_id):
|
||||
job = get_object_or_404(JobPosting,slug=slug)
|
||||
candidate = get_object_or_404(Candidate,pk=candidate_pk)
|
||||
meeting = get_object_or_404(ZoomMeeting,pk=meeting_id)
|
||||
if request.method == "POST":
|
||||
result = delete_zoom_meeting(meeting.meeting_id)
|
||||
if result["status"] == "success":
|
||||
meeting.delete()
|
||||
messages.success(request, result["message"])
|
||||
else:
|
||||
messages.error(request, result["message"])
|
||||
return redirect(reverse("candidate_interview_view", kwargs={"slug": job.slug}))
|
||||
|
||||
context = {"job":job,"candidate":candidate,"meeting":meeting}
|
||||
return render(request,"meetings/delete_meeting_form.html",context)
|
||||
|
||||
def interview_calendar_view(request, slug):
|
||||
job = get_object_or_404(JobPosting, slug=slug)
|
||||
@ -2230,12 +2236,12 @@ def reschedule_candidate_meeting(request, job_slug, candidate_pk, interview_pk):
|
||||
})
|
||||
|
||||
|
||||
def schedule_meeting_for_candidate(request, job_slug, candidate_pk):
|
||||
def schedule_meeting_for_candidate(request, slug, candidate_pk):
|
||||
"""
|
||||
Handles GET to display a simple form for scheduling a meeting for a candidate.
|
||||
Handles POST to process the form, create the meeting, and redirect back.
|
||||
"""
|
||||
job = get_object_or_404(JobPosting, slug=job_slug)
|
||||
job = get_object_or_404(JobPosting, slug=slug)
|
||||
candidate = get_object_or_404(Candidate, pk=candidate_pk, job=job)
|
||||
|
||||
if request.method == "POST":
|
||||
@ -2253,14 +2259,15 @@ def schedule_meeting_for_candidate(request, job_slug, candidate_pk):
|
||||
if start_time_val <= timezone.now():
|
||||
messages.error(request, "Start time must be in the future.")
|
||||
# Re-render form with error and initial data
|
||||
return render(request, "recruitment/schedule_meeting_form.html", {
|
||||
'form': form,
|
||||
'job': job,
|
||||
'candidate': candidate,
|
||||
'initial_topic': topic_val,
|
||||
'initial_start_time': start_time_val.strftime('%Y-%m-%dT%H:%M') if start_time_val else '',
|
||||
'initial_duration': duration_val
|
||||
})
|
||||
return redirect('candidate_interview_view', slug=job.slug)
|
||||
# return render(request, "recruitment/schedule_meeting_form.html", {
|
||||
# 'form': form,
|
||||
# 'job': job,
|
||||
# 'candidate': candidate,
|
||||
# 'initial_topic': topic_val,
|
||||
# 'initial_start_time': start_time_val.strftime('%Y-%m-%dT%H:%M') if start_time_val else '',
|
||||
# 'initial_duration': duration_val
|
||||
# })
|
||||
|
||||
# Create Zoom meeting using utility function
|
||||
# The create_zoom_meeting expects start_time as a datetime object
|
||||
@ -2307,7 +2314,7 @@ def schedule_meeting_for_candidate(request, job_slug, candidate_pk):
|
||||
})
|
||||
else:
|
||||
# Form validation errors
|
||||
return render(request, "recruitment/schedule_meeting_form.html", {
|
||||
return render(request, "meetings/schedule_meeting_form.html", {
|
||||
'form': form,
|
||||
'job': job,
|
||||
'candidate': candidate,
|
||||
@ -2322,7 +2329,7 @@ def schedule_meeting_for_candidate(request, job_slug, candidate_pk):
|
||||
'duration': 60, # Default duration
|
||||
}
|
||||
form = ZoomMeetingForm(initial=initial_data)
|
||||
return render(request, "recruitment/schedule_meeting_form.html", {
|
||||
return render(request, "meetings/schedule_meeting_form.html", {
|
||||
'form': form,
|
||||
'job': job,
|
||||
'candidate': candidate
|
||||
|
||||
@ -12,272 +12,18 @@
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
|
||||
{% comment %} <link href="https://unpkg.com/filepond/dist/filepond.css" rel="stylesheet">
|
||||
<link href="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.css" rel="stylesheet"> {% endcomment %}
|
||||
<link rel="stylesheet" href="{% static 'css/style.css' %}">
|
||||
<link rel="stylesheet" href="{% static 'css/main.css' %}">
|
||||
|
||||
<style>
|
||||
:root {
|
||||
--kaauh-teal: #00636e;
|
||||
--kaauh-teal-dark: #004a53;
|
||||
--kaauh-light-bg: #f9fbfd;
|
||||
--kaauh-border: #eaeff3;
|
||||
}
|
||||
|
||||
/* NEW CLASS FOR WIDER CONTENT */
|
||||
.max-width-1600 {
|
||||
max-width: 1600px;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
padding-right: var(--bs-gutter-x, 0.75rem); /* Add Bootstrap padding for responsiveness */
|
||||
padding-left: var(--bs-gutter-x, 0.75rem);
|
||||
}
|
||||
|
||||
/* === Top Bar === */
|
||||
.top-bar {
|
||||
background-color: white;
|
||||
border-bottom: 1px solid var(--kaauh-border);
|
||||
font-size: 0.825rem;
|
||||
padding: 0.4rem 0;
|
||||
}
|
||||
.top-bar a { text-decoration: none; }
|
||||
.top-bar .social-icons i {
|
||||
color: var(--kaauh-teal);
|
||||
transition: color 0.2s;
|
||||
}
|
||||
.top-bar .social-icons i:hover {
|
||||
color: var(--kaauh-teal-dark);
|
||||
}
|
||||
.top-bar .contact-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.35rem;
|
||||
padding: 0.25rem 0.5rem;
|
||||
}
|
||||
.top-bar .logo-container img {
|
||||
height: 60px;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
.top-bar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* === Navbar === */
|
||||
.navbar-brand {
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.5px;
|
||||
font-size: 1.25rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
.navbar-dark {
|
||||
background-color: var(--kaauh-teal) !important;
|
||||
box-shadow: 0 2px 6px rgba(0,0,0,0.12);
|
||||
}
|
||||
/* Change the outer navbar container to fluid, rely on inner max-width */
|
||||
.navbar-dark > .container {
|
||||
max-width: 100%; /* Override default container width */
|
||||
}
|
||||
.nav-link {
|
||||
font-weight: 500;
|
||||
transition: all 0.2s ease;
|
||||
padding: 0.5rem 0.75rem;
|
||||
}
|
||||
.nav-link:hover,
|
||||
.nav-link.active {
|
||||
color: white !important;
|
||||
background: rgba(255,255,255,0.12) !important;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
/* Dropdown - Enhanced UX */
|
||||
.dropdown-menu {
|
||||
backdrop-filter: blur(4px);
|
||||
background-color: rgba(255, 255, 255, 0.98);
|
||||
border: 1px solid var(--kaauh-border);
|
||||
box-shadow: 0 6px 20px rgba(0,0,0,0.12);
|
||||
border-radius: 8px;
|
||||
padding: 0.5rem 0;
|
||||
min-width: 200px;
|
||||
will-change: transform, opacity;
|
||||
transition: transform 0.2s ease, opacity 0.2s ease;
|
||||
}
|
||||
.dropdown-item {
|
||||
padding: 0.5rem 1.25rem;
|
||||
transition: background-color 0.15s;
|
||||
}
|
||||
.dropdown-item:hover {
|
||||
background-color: var(--kaauh-light-bg);
|
||||
color: var(--kaauh-teal-dark);
|
||||
}
|
||||
|
||||
/* Language Toggle Button Style */
|
||||
.language-toggle-btn {
|
||||
color: white !important;
|
||||
background: none !important;
|
||||
border: none !important;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.3rem;
|
||||
padding: 0.5rem 0.75rem !important;
|
||||
font-weight: 500;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
.language-toggle-btn:hover {
|
||||
background: rgba(255,255,255,0.12) !important;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
/* Profile Avatar - Enhanced Feedback */
|
||||
.profile-avatar {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 50%;
|
||||
background: var(--kaauh-teal);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
font-size: 0.85rem;
|
||||
transition: transform 0.1s ease;
|
||||
}
|
||||
/* Subtle hover effect for the profile button */
|
||||
.navbar-nav .dropdown-toggle:hover .profile-avatar {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
.navbar-nav .dropdown-toggle.p-0:hover {
|
||||
background: none !important; /* Keep avatar background fixed */
|
||||
}
|
||||
|
||||
|
||||
/* === Job Table and other sections CSS remain the same... === */
|
||||
.job-table-wrapper {
|
||||
background: white;
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 4px 16px rgba(0,0,0,0.06);
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
.job-table thead th {
|
||||
background: var(--kaauh-teal);
|
||||
color: white;
|
||||
font-weight: 600;
|
||||
padding: 1rem;
|
||||
text-align: center;
|
||||
}
|
||||
.job-table td {
|
||||
padding: 1rem;
|
||||
vertical-align: middle;
|
||||
text-align: center;
|
||||
}
|
||||
.job-table tr:hover td {
|
||||
background-color: rgba(0, 99, 110, 0.03);
|
||||
}
|
||||
.btn-apply {
|
||||
background: var(--kaauh-teal);
|
||||
border: none;
|
||||
color: white;
|
||||
padding: 0.45rem 1rem;
|
||||
font-weight: 600;
|
||||
border-radius: 6px;
|
||||
transition: all 0.2s;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.btn-apply:hover {
|
||||
background: var(--kaauh-teal-dark);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 2px 6px rgba(0,0,0,0.15);
|
||||
}
|
||||
|
||||
@media (max-width: 575.98px) {
|
||||
.table-responsive {
|
||||
overflow-x: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
.job-table th,
|
||||
.job-table td {
|
||||
white-space: nowrap;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* === Footer & Alerts === */
|
||||
.footer {
|
||||
background: var(--kaauh-light-bg);
|
||||
padding: 1.5rem 0;
|
||||
border-top: 1px solid var(--kaauh-border);
|
||||
font-size: 0.9rem;
|
||||
color: #555;
|
||||
}
|
||||
.alert {
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 6px rgba(0,0,0,0.05);
|
||||
}
|
||||
/* The main content width is already handled by the inline style, but making it explicit here */
|
||||
main.container-fluid {
|
||||
min-height: calc(100vh - 200px);
|
||||
padding: 1.5rem 0;
|
||||
}
|
||||
|
||||
/* === RTL Support === */
|
||||
html[dir="rtl"] {
|
||||
text-align: right;
|
||||
direction: rtl;
|
||||
}
|
||||
html[dir="rtl"] .navbar-brand {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
html[dir="rtl"] .dropdown-menu {
|
||||
/* Ensures RTL dropdown menu opens left aligned to its button when dropdown-menu-end isn't used */
|
||||
right: auto;
|
||||
left: 0;
|
||||
}
|
||||
html[dir="rtl"] .me-3 { margin-right: 0 !important; margin-left: 1rem !important; }
|
||||
html[dir="rtl"] .ms-3 { margin-left: 0 !important; margin-right: 1rem !important; }
|
||||
html[dir="rtl"] .me-2 { margin-right: 0 !important; margin-left: 0.5rem !important; }
|
||||
html[dir="rtl"] .ms-2 { margin-left: 0 !important; margin-right: 0.5rem !important; }
|
||||
html[dir="rtl"] .ms-auto { margin-left: 0 !important; margin-right: auto !important; }
|
||||
html[dir="rtl"] .me-auto { margin-right: 0 !important; margin-left: auto !important; }
|
||||
|
||||
|
||||
.form-control-sm,
|
||||
.btn-sm {
|
||||
/* Reduce vertical padding even more than default Bootstrap 'sm' */
|
||||
padding-top: 0.2rem !important;
|
||||
padding-bottom: 0.2rem !important;
|
||||
/* Ensure a consistent, small height for both */
|
||||
height: 35px !important;
|
||||
font-size: 2 rem !important; /* Slightly smaller font */
|
||||
}
|
||||
|
||||
</style>
|
||||
{% block customCSS %}{% endblock %}
|
||||
</head>
|
||||
<body class="d-flex flex-column min-vh-100" hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'>
|
||||
|
||||
<div class="top-bar d-none d-md-block">
|
||||
{# Changed container to container-fluid and added max-width-1600 to inner div #}
|
||||
<div class="container-fluid">
|
||||
<div class="d-flex justify-content-between align-items-center gap-2 max-width-1600">
|
||||
<div class="d-flex align-items-center gap-3 social-icons">
|
||||
{% comment %} <span class="text-muted">{% trans "Follow Us:" %}</span>
|
||||
<a href="#" aria-label="Facebook"><i class="fab fa-facebook-f"></i></a>
|
||||
<a href="#" aria-label="Twitter"><i class="fab fa-twitter"></i></a>
|
||||
<a href="#" aria-label="Instagram"><i class="fab fa-instagram"></i></a> {% endcomment %}
|
||||
</div>
|
||||
<div class="contact-info d-flex gap-3">
|
||||
{% comment %} <div class="contact-item">
|
||||
<i class="fas fa-envelope text-primary"></i>
|
||||
<span>info@kaauh.edu.sa</span>
|
||||
</div>
|
||||
<div class="contact-item">
|
||||
<i class="fas fa-phone text-primary"></i>
|
||||
<span>+966 11 820 0000</span>
|
||||
</div> {% endcomment %}
|
||||
</div>
|
||||
<div class="logo-container d-flex gap-2">
|
||||
<img src="{% static 'image/vision.svg' %}" alt="{% trans 'Saudi Vision 2030' %}" loading="lazy">
|
||||
@ -297,7 +43,6 @@
|
||||
</div>
|
||||
|
||||
<nav class="navbar navbar-expand-lg navbar-dark sticky-top">
|
||||
{# Changed container to container-fluid and added max-width-1600 to inner div #}
|
||||
<div class="container-fluid">
|
||||
<div class="navbar-content-wrapper max-width-1600 d-flex justify-content-between align-items-center" style="width: 100%;">
|
||||
<a class="navbar-brand text-white d-none d-md-block" href="{% url 'dashboard' %}">
|
||||
@ -311,14 +56,6 @@
|
||||
|
||||
<div class="collapse navbar-collapse" id="navbarNav">
|
||||
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
|
||||
{% comment %} <li class="nav-item">
|
||||
<a class="nav-link {% if request.resolver_match.url_name == 'dashboard' %}active{% endif %}" href="{% url 'dashboard' %}">
|
||||
<span class="d-flex align-items-center gap-2">
|
||||
{% include "icons/dashboard.html" %}
|
||||
{% trans "Dashboard" %}
|
||||
</span>
|
||||
</a>
|
||||
</li> {% endcomment %}
|
||||
<li class="nav-item me-4">
|
||||
<a class="nav-link {% if request.resolver_match.url_name == 'job_list' %}active{% endif %}" href="{% url 'job_list' %}">
|
||||
<span class="d-flex align-items-center gap-2">
|
||||
@ -328,19 +65,6 @@
|
||||
</a>
|
||||
</li>
|
||||
|
||||
{% comment %} <li class="nav-item me-2">
|
||||
<a class="nav-link {% if request.resolver_match.url_name == 'form_templates_list' %}active{% endif %}" href="{% url 'form_templates_list' %}">
|
||||
<span class="d-flex align-items-center gap-2">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z" />
|
||||
</svg>
|
||||
|
||||
{% trans "Form Templates" %}
|
||||
</span>
|
||||
|
||||
</a>
|
||||
</li> {% endcomment %}
|
||||
|
||||
<li class="nav-item me-4">
|
||||
<a class="nav-link {% if request.resolver_match.url_name == 'candidate_list' %}active{% endif %}" href="{% url 'candidate_list' %}">
|
||||
<span class="d-flex align-items-center gap-2">
|
||||
@ -356,13 +80,11 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="m15.75 10.5 4.72-4.72a.75.75 0 0 1 1.28.53v11.38a.75.75 0 0 1-1.28.53l-4.72-4.72M4.5 18.75h9a2.25 2.25 0 0 0 2.25-2.25v-9a2.25 2.25 0 0 0-2.25-2.25h-9A2.25 2.25 0 0 0 2.25 7.5v9a2.25 2.25 0 0 0 2.25 2.25Z" />
|
||||
</svg>
|
||||
|
||||
{% trans "Meetings" %}
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
|
||||
<li class="nav-item me-4">
|
||||
<a class="nav-link {% if request.resolver_match.url_name == 'training_list' %}active{% endif %}" href="{% url 'training_list' %}">
|
||||
<span class="d-flex align-items-center gap-2">
|
||||
@ -393,7 +115,6 @@
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
<ul class="navbar-nav me-2">
|
||||
<li class="nav-item dropdown">
|
||||
<a class="language-toggle-btn dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown"
|
||||
@ -446,7 +167,6 @@
|
||||
{{ user.username|first|upper }}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% comment %} <span class="ms-2 d-none d-lg-inline fw-semibold">{{ user.username }}</span> {% endcomment %}
|
||||
</button>
|
||||
<ul
|
||||
class="dropdown-menu dropdown-menu-end py-0 shadow border-0 rounded-3"
|
||||
@ -554,6 +274,30 @@
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const forms = document.querySelectorAll('form');
|
||||
|
||||
forms.forEach(form => {
|
||||
form.addEventListener('submit', function(e) {
|
||||
// Find the submit button within this form
|
||||
const submitButton = form.querySelector('button[type="submit"], input[type="submit"]');
|
||||
|
||||
if (submitButton) {
|
||||
// Disable the button
|
||||
submitButton.disabled = true;
|
||||
|
||||
// Optional: Add a loading class for styling
|
||||
submitButton.classList.add('loading');
|
||||
|
||||
// Re-enable the button if the form submission fails
|
||||
// This ensures the button doesn't stay disabled if there's an error
|
||||
window.addEventListener('unload', function() {
|
||||
submitButton.disabled = false;
|
||||
submitButton.classList.remove('loading');
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Navbar collapse auto-close on link click (Standard Mobile UX)
|
||||
const navbarCollapse = document.getElementById('navbarNav');
|
||||
if (navbarCollapse) {
|
||||
|
||||
@ -1,108 +1,247 @@
|
||||
<!-- templates/interviews/schedule_interviews.html -->
|
||||
{% extends "base.html" %}
|
||||
{% extends 'base.html' %}
|
||||
{% load static i18n %}
|
||||
|
||||
{% block title %}Bulk Interview Scheduling - {{ job.title }} - ATS{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="container mt-4 interview-schedule">
|
||||
<h1>Schedule Interviews for {{ job.title }}</h1>
|
||||
<div class="container-fluid py-4">
|
||||
<style>
|
||||
/* KAAT-S UI Variables */
|
||||
:root {
|
||||
--kaauh-teal: #00636e;
|
||||
--kaauh-teal-dark: #004a53;
|
||||
--kaauh-border: #eaeff3;
|
||||
--kaauh-primary-text: #343a40;
|
||||
--kaauh-success: #28a745;
|
||||
--kaauh-info: #17a2b8;
|
||||
--kaauh-danger: #dc3545;
|
||||
--kaauh-warning: #ffc107;
|
||||
}
|
||||
|
||||
<div class="card mt-4">
|
||||
<div class="card-body">
|
||||
<form method="post" id="schedule-form">
|
||||
{% csrf_token %}
|
||||
/* 1. Card & Container Styling */
|
||||
.kaauh-card {
|
||||
border: 1px solid var(--kaauh-border);
|
||||
border-radius: 0.75rem;
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.06);
|
||||
background-color: white;
|
||||
padding: 1.5rem;
|
||||
}
|
||||
.container-fluid.py-4 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<h5>Select Candidates</h5>
|
||||
<div class="form-group">
|
||||
{{ form.candidates }}
|
||||
</div>
|
||||
</div>
|
||||
/* 2. Typography & Headers */
|
||||
.page-header {
|
||||
color: var(--kaauh-teal-dark);
|
||||
font-weight: 700;
|
||||
}
|
||||
.section-header {
|
||||
color: var(--kaauh-primary-text);
|
||||
font-weight: 600;
|
||||
border-bottom: 2px solid var(--kaauh-border);
|
||||
padding-bottom: 0.5rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
label {
|
||||
font-weight: 500;
|
||||
color: var(--kaauh-primary-text);
|
||||
font-size: 0.9rem;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
.form-control, .form-select {
|
||||
border-radius: 0.5rem;
|
||||
border: 1px solid #ced4da;
|
||||
padding: 0.5rem 0.75rem;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
.form-group > .form-check {
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
<div class="col-md-6">
|
||||
<h5>Schedule Details</h5>
|
||||
/* --- FIX: SCROLLABLE CANDIDATE LIST --- */
|
||||
.form-group select[multiple] {
|
||||
max-height: 450px;
|
||||
overflow-y: auto;
|
||||
min-height: 250px;
|
||||
padding: 0;
|
||||
}
|
||||
/* ------------------------------------- */
|
||||
|
||||
<div class="form-group mb-3">
|
||||
<label for="{{ form.start_date.id_for_label }}">Start Date</label>
|
||||
{{ form.start_date }}
|
||||
</div>
|
||||
/* 3. Button Styling */
|
||||
.btn-main-action {
|
||||
background-color: var(--kaauh-teal);
|
||||
border-color: var(--kaauh-teal);
|
||||
color: white;
|
||||
font-weight: 600;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
.btn-main-action:hover {
|
||||
background-color: var(--kaauh-teal-dark);
|
||||
border-color: var(--kaauh-teal-dark);
|
||||
box-shadow: 0 4px 8px rgba(0,0,0,0.15);
|
||||
}
|
||||
.btn-secondary {
|
||||
color: var(--kaauh-teal-dark);
|
||||
border-color: var(--kaauh-border);
|
||||
background-color: #f1f3f4;
|
||||
}
|
||||
|
||||
<div class="form-group mb-3">
|
||||
<label for="{{ form.end_date.id_for_label }}">End Date</label>
|
||||
{{ form.end_date }}
|
||||
</div>
|
||||
/* 4. Break Times Section Styling */
|
||||
.break-time-form {
|
||||
background-color: #f8f9fa;
|
||||
padding: 0.75rem;
|
||||
border-radius: 0.5rem;
|
||||
border: 1px solid var(--kaauh-border);
|
||||
align-items: flex-end;
|
||||
}
|
||||
.remove-break {
|
||||
width: 100%;
|
||||
}
|
||||
.note-box {
|
||||
background-color: #fff3cd;
|
||||
border-left: 5px solid var(--kaauh-warning);
|
||||
padding: 1rem;
|
||||
border-radius: 0.25rem;
|
||||
font-size: 0.9rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
</style>
|
||||
<div class="d-flex justify-content-between align-items-center mb-4">
|
||||
<div>
|
||||
<h1 class="h3 page-header">
|
||||
<i class="fas fa-calendar-alt me-2"></i>
|
||||
{% trans "Bulk Interview Scheduling" %}
|
||||
</h1>
|
||||
<h2 class="h5 text-muted mb-0">
|
||||
{% trans "Configure time slots for:" %} **{{ job.title }}**
|
||||
</h2>
|
||||
</div>
|
||||
<a href="{% url 'job_detail' slug=job.slug %}" class="btn btn-outline-secondary">
|
||||
<i class="fas fa-arrow-left me-1"></i> {% trans "Back to Job" %}
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="form-group mb-3">
|
||||
<label>Working Days</label>
|
||||
{{ form.working_days }}
|
||||
</div>
|
||||
<div class="kaauh-card shadow-sm">
|
||||
<form method="post" id="schedule-form">
|
||||
{% csrf_token %}
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="form-group mb-3">
|
||||
<label for="{{ form.start_time.id_for_label }}">Start Time</label>
|
||||
{{ form.start_time }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-4">
|
||||
<h5 class="section-header">{% trans "Select Candidates" %}</h5>
|
||||
|
||||
<div class="col-md-6">
|
||||
<div class="form-group mb-3">
|
||||
<label for="{{ form.end_time.id_for_label }}">End Time</label>
|
||||
{{ form.end_time }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="form-group mb-3">
|
||||
<label for="{{ form.interview_duration.id_for_label }}">Interview Duration (minutes)</label>
|
||||
{{ form.interview_duration }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6">
|
||||
<div class="form-group mb-3">
|
||||
<label for="{{ form.buffer_time.id_for_label }}">Buffer Time (minutes)</label>
|
||||
{{ form.buffer_time }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="{{ form.candidates.id_for_label }}">
|
||||
{% trans "Candidates to Schedule (Hold Ctrl/Cmd to select multiple)" %}
|
||||
</label>
|
||||
{{ form.candidates }}
|
||||
{% if form.candidates.errors %}
|
||||
<div class="text-danger small mt-1">{{ form.candidates.errors }}</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row mt-4">
|
||||
<div class="col-12">
|
||||
<h5>Break Times</h5>
|
||||
<div class="col-md-8">
|
||||
<h5 class="section-header">{% trans "Schedule Details" %}</h5>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="form-group mb-3">
|
||||
<label for="{{ form.start_date.id_for_label }}">{% trans "Start Date" %}</label>
|
||||
{{ form.start_date }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6">
|
||||
<div class="form-group mb-3">
|
||||
<label for="{{ form.end_date.id_for_label }}">{% trans "End Date" %}</label>
|
||||
{{ form.end_date }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group mb-3">
|
||||
<label>{% trans "Working Days" %}</label>
|
||||
<div class="d-flex flex-wrap gap-3 p-2 border rounded" style="background-color: #f8f9fa;">
|
||||
{{ form.working_days }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
<div class="form-group mb-3">
|
||||
<label for="{{ form.start_time.id_for_label }}">{% trans "Start Time" %}</label>
|
||||
{{ form.start_time }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-3">
|
||||
<div class="form-group mb-3">
|
||||
<label for="{{ form.end_time.id_for_label }}">{% trans "End Time" %}</label>
|
||||
{{ form.end_time }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-3">
|
||||
<div class="form-group mb-3">
|
||||
<label for="{{ form.interview_duration.id_for_label }}">{% trans "Duration (min)" %}</label>
|
||||
{{ form.interview_duration }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-3">
|
||||
<div class="form-group mb-3">
|
||||
<label for="{{ form.buffer_time.id_for_label }}">{% trans "Buffer (min)" %}</label>
|
||||
{{ form.buffer_time }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-4 pt-4 border-top">
|
||||
<h5 class="section-header">{% trans "Daily Break Times" %}</h5>
|
||||
<div id="break-times-container">
|
||||
{{ break_formset.management_form }}
|
||||
{% for hidden in break_formset.management_form.hidden_fields %}
|
||||
{% if "TOTAL_FORMS" in hidden.id_for_label %}
|
||||
<input type="hidden" name="{{ hidden.name }}" id="id_breaks-TOTAL_FORMS" value="{{ hidden.value }}">
|
||||
{% else %}
|
||||
{{ hidden }}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
{% for form in break_formset %}
|
||||
<div class="break-time-form row mb-2">
|
||||
<div class="col-md-5">
|
||||
<label>Start Time</label>
|
||||
<div class="break-time-form row mb-2 g-2">
|
||||
<div class="col-5">
|
||||
<label for="{{ form.start_time.id_for_label }}">{% trans "Start Time" %}</label>
|
||||
{{ form.start_time }}
|
||||
</div>
|
||||
<div class="col-md-5">
|
||||
<label>End Time</label>
|
||||
<div class="col-5">
|
||||
<label for="{{ form.end_time.id_for_label }}">{% trans "End Time" %}</label>
|
||||
{{ form.end_time }}
|
||||
</div>
|
||||
<div class="col-md-2">
|
||||
<label> </label><br>
|
||||
<div class="col-2 d-flex align-items-end">
|
||||
{{ form.DELETE }}
|
||||
<button type="button" class="btn btn-danger btn-sm remove-break">Remove</button>
|
||||
<button type="button" class="btn btn-danger btn-sm remove-break w-100">
|
||||
<i class="fas fa-trash-alt"></i> {% trans "Remove" %}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
<button type="button" id="add-break" class="btn btn-secondary btn-sm mt-2">Add Break</button>
|
||||
<button type="button" id="add-break" class="btn btn-secondary btn-sm mt-3">
|
||||
<i class="fas fa-plus me-1"></i> {% trans "Add Break" %}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-4">
|
||||
<button type="submit" class="btn btn-primary">Preview Schedule</button>
|
||||
<a href="{% url 'job_detail' slug=job.slug %}" class="btn btn-secondary">Cancel</a>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-4 pt-4 border-top d-flex justify-content-end gap-2">
|
||||
<button type="submit" class="btn btn-main-action">
|
||||
<i class="fas fa-calendar-check me-1"></i> {% trans "Preview Schedule" %}
|
||||
</button>
|
||||
<a href="{% url 'job_detail' slug=job.slug %}" class="btn btn-secondary">
|
||||
{% trans "Cancel" %}
|
||||
</a>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -110,43 +249,59 @@
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const addBreakBtn = document.getElementById('add-break');
|
||||
const breakTimesContainer = document.getElementById('break-times-container');
|
||||
// The ID is now guaranteed to be 'id_breaks-TOTAL_FORMS' thanks to the template fix
|
||||
const totalFormsInput = document.getElementById('id_breaks-TOTAL_FORMS');
|
||||
|
||||
// Safety check added, though the template fix should resolve the core issue
|
||||
if (!totalFormsInput) {
|
||||
console.error("TOTAL_FORMS input not found. Cannot add break dynamically.");
|
||||
return;
|
||||
}
|
||||
|
||||
addBreakBtn.addEventListener('click', function() {
|
||||
const formCount = parseInt(totalFormsInput.value);
|
||||
|
||||
// Template for a new form, ensuring the correct classes are applied
|
||||
const newFormHtml = `
|
||||
<div class="break-time-form row mb-2">
|
||||
<div class="col-md-5">
|
||||
<label>Start Time</label>
|
||||
<div class="break-time-form row mb-2 g-2">
|
||||
<div class="col-5">
|
||||
<label for="id_breaks-${formCount}-start_time">Start Time</label>
|
||||
<input type="time" name="breaks-${formCount}-start_time" class="form-control" id="id_breaks-${formCount}-start_time">
|
||||
</div>
|
||||
<div class="col-md-5">
|
||||
<label>End Time</label>
|
||||
<div class="col-5">
|
||||
<label for="id_breaks-${formCount}-end_time">End Time</label>
|
||||
<input type="time" name="breaks-${formCount}-end_time" class="form-control" id="id_breaks-${formCount}-end_time">
|
||||
</div>
|
||||
<div class="col-md-2">
|
||||
<label> </label><br>
|
||||
<div class="col-2 d-flex align-items-end">
|
||||
<input type="hidden" name="breaks-${formCount}-id" id="id_breaks-${formCount}-id">
|
||||
<input type="hidden" name="breaks-${formCount}-meeting" id="id_breaks-${formCount}-meeting">
|
||||
<input type="checkbox" name="breaks-${formCount}-DELETE" id="id_breaks-${formCount}-DELETE" style="display:none;">
|
||||
<button type="button" class="btn btn-danger btn-sm remove-break">Remove</button>
|
||||
<button type="button" class="btn btn-danger btn-sm remove-break w-100">
|
||||
<i class="fas fa-trash-alt"></i> Remove
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
const tempDiv = document.createElement('div');
|
||||
tempDiv.innerHTML = newFormHtml;
|
||||
tempDiv.innerHTML = newFormHtml.trim();
|
||||
const newForm = tempDiv.firstChild;
|
||||
|
||||
breakTimesContainer.appendChild(newForm);
|
||||
totalFormsInput.value = formCount + 1;
|
||||
});
|
||||
|
||||
// Handle remove button clicks
|
||||
// Handle remove button clicks (both existing and dynamically added)
|
||||
breakTimesContainer.addEventListener('click', function(e) {
|
||||
if (e.target.classList.contains('remove-break')) {
|
||||
if (e.target.closest('.remove-break')) {
|
||||
const form = e.target.closest('.break-time-form');
|
||||
const deleteCheckbox = form.querySelector('input[name$="-DELETE"]');
|
||||
deleteCheckbox.checked = true;
|
||||
form.style.display = 'none';
|
||||
if (form) {
|
||||
const deleteCheckbox = form.querySelector('input[name$="-DELETE"]');
|
||||
if (deleteCheckbox) {
|
||||
deleteCheckbox.checked = true;
|
||||
}
|
||||
form.style.display = 'none';
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
7
templates/meetings/delete_meeting_form.html
Normal file
7
templates/meetings/delete_meeting_form.html
Normal file
@ -0,0 +1,7 @@
|
||||
{% load i18n %}
|
||||
<form action="{% url 'delete_meeting_for_candidate' job.slug candidate.pk meeting.pk %}" method="post">
|
||||
{% csrf_token %}
|
||||
<p class="text-danger">{% trans "Are you sure you want to delete this meeting? This action is irreversible." %}</p>
|
||||
<button type="submit" class="btn btn-danger">{% trans "Delete Meeting" %}</button>
|
||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{% trans "Cancel" %}</button>
|
||||
</form>
|
||||
70
templates/meetings/reschedule_meeting.html
Normal file
70
templates/meetings/reschedule_meeting.html
Normal file
@ -0,0 +1,70 @@
|
||||
{% load static i18n %}
|
||||
{% load widget_tweaks %}
|
||||
|
||||
<div class="p-3" id="reschedule-meeting-form">
|
||||
<div class="d-flex justify-content-between align-items-center mb-3">
|
||||
<div>
|
||||
<h5 class="mb-1" style="color: var(--kaauh-teal-dark); font-weight: 700;">
|
||||
<i class="fas fa-redo-alt me-1"></i>
|
||||
{% trans "Update Interview" %} for {{ candidate.name }}
|
||||
</h5>
|
||||
<p class="text-muted mb-0 small">{% trans "Job" %}: {{ job.title }}</p>
|
||||
{% if has_future_meeting %}
|
||||
<div class="alert alert-info mt-2 mb-0 p-2 small" role="alert">
|
||||
<i class="fas fa-info-circle me-1"></i>
|
||||
{% trans "You are updating the existing meeting schedule." %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<form method="post" id="updateMeeting" action="{% url 'reschedule_meeting_for_candidate' job.slug candidate.pk meeting.pk %}">
|
||||
{% csrf_token %}
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="{{ form.topic.id_for_label }}" class="form-label small">
|
||||
{% trans "Meeting Topic" %}
|
||||
</label>
|
||||
{{ form.topic|add_class:"form-control" }}
|
||||
{% for error in form.topic.errors %}
|
||||
<div class="text-danger small mt-1">{{ error }}</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-7">
|
||||
<div class="mb-3">
|
||||
<label for="{{ form.start_time.id_for_label }}" class="form-label small">
|
||||
{% trans "Start Time" %} (Date & Time)
|
||||
</label>
|
||||
{{ form.start_time|add_class:"form-control" }}
|
||||
{% for error in form.start_time.errors %}
|
||||
<div class="text-danger small mt-1">{{ error }}</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-5">
|
||||
<div class="mb-3">
|
||||
<label for="{{ form.duration.id_for_label }}" class="form-label small">
|
||||
{% trans "Duration (minutes)" %}
|
||||
</label>
|
||||
{{ form.duration|add_class:"form-control" }}
|
||||
{% for error in form.duration.errors %}
|
||||
<div class="text-danger small mt-1">{{ error }}</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr style="border-top: 1px solid var(--kaauh-border); margin-top: 1.5rem; margin-bottom: 1.5rem;">
|
||||
|
||||
<div class="d-flex justify-content-end gap-2">
|
||||
<button type="submit" class="btn btn-main-action btn-sm">
|
||||
<i class="fas fa-save me-1"></i> {% trans "Update Meeting" %}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
90
templates/meetings/schedule_meeting_form.html
Normal file
90
templates/meetings/schedule_meeting_form.html
Normal file
@ -0,0 +1,90 @@
|
||||
{% load i18n %}
|
||||
<div class="p-3" id="schedule-meeting-form">
|
||||
<div class="d-flex justify-content-between align-items-center mb-3">
|
||||
<div>
|
||||
<h5 class="mb-1" style="color: var(--kaauh-teal-dark); font-weight: 700;">
|
||||
{% if has_future_meeting %}
|
||||
{% trans "Update Interview" %} for {{ candidate.name }}
|
||||
{% else %}
|
||||
{% trans "Schedule Interview" %} for {{ candidate.name }}
|
||||
{% endif %}
|
||||
</h5>
|
||||
<p class="text-muted mb-0 small">{% trans "Job" %}: {{ job.title }}</p>
|
||||
{% if has_future_meeting %}
|
||||
<div class="alert alert-info mt-2 mb-0 p-2 small" role="alert">
|
||||
<i class="fas fa-info-circle me-1"></i>
|
||||
{% trans "Candidate has upcoming interviews. Updating existing schedule." %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<form method="post" action="{% url 'schedule_meeting_for_candidate' job.slug candidate.pk %}">
|
||||
{% csrf_token %}
|
||||
<div class="mb-3">
|
||||
<label for="{{ form.topic.id_for_label }}" class="form-label small">
|
||||
{% trans "Meeting Topic" %}
|
||||
</label>
|
||||
{{ form.topic }}
|
||||
{% if form.topic.errors %}
|
||||
<div class="text-danger">
|
||||
{% for error in form.topic.errors %}
|
||||
<small>{{ error }}</small>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="form-text small text-muted">
|
||||
{% trans "e.g., Technical Screening, HR Interview" %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-7">
|
||||
<div class="mb-3">
|
||||
<label for="{{ form.start_time.id_for_label }}" class="form-label small">
|
||||
{% trans "Start Time" %} (Date & Time)
|
||||
</label>
|
||||
{{ form.start_time }}
|
||||
{% if form.start_time.errors %}
|
||||
<div class="text-danger">
|
||||
{% for error in form.start_time.errors %}
|
||||
<small>{{ error }}</small>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-5">
|
||||
<div class="mb-3">
|
||||
<label for="{{ form.duration.id_for_label }}" class="form-label small">
|
||||
{% trans "Duration (minutes)" %}
|
||||
</label>
|
||||
{{ form.duration }}
|
||||
{% if form.duration.errors %}
|
||||
<div class="text-danger">
|
||||
{% for error in form.duration.errors %}
|
||||
<small>{{ error }}</small>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr style="border-top: 1px solid var(--kaauh-border); margin-top: 1.5rem; margin-bottom: 1.5rem;">
|
||||
|
||||
<div class="d-flex justify-content-end gap-2">
|
||||
<button type="submit" class="btn btn-main-action btn-sm">
|
||||
<i class="fas fa-save me-1"></i>
|
||||
{% if has_future_meeting %}
|
||||
{% trans "Update Meeting" %}
|
||||
{% else %}
|
||||
{% trans "Schedule Meeting" %}
|
||||
{% endif %}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
@ -3,169 +3,7 @@
|
||||
{% block title %}{% trans "Update Zoom Meeting" %} - {{ block.super }}{% endblock %}
|
||||
|
||||
{% block customCSS %}
|
||||
<style>
|
||||
/* UI Variables for the KAAT-S Theme */
|
||||
:root {
|
||||
--kaauh-teal: #00636e;
|
||||
--kaauh-teal-dark: #004a53;
|
||||
--kaauh-border: #eaeff3;
|
||||
--kaauh-primary-text: #343a40;
|
||||
--kaauh-gray: #6c757d;
|
||||
|
||||
/* Status Colors for alerts/messages */
|
||||
--kaauh-success: var(--kaauh-teal);
|
||||
--kaauh-danger: #dc3545;
|
||||
--kaauh-info: #17a2b8;
|
||||
}
|
||||
|
||||
/* CONTAINER AND CARD STYLING */
|
||||
.container {
|
||||
padding: 2rem 1rem;
|
||||
}
|
||||
.card {
|
||||
border: 1px solid var(--kaauh-border);
|
||||
border-radius: 0.75rem;
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.06);
|
||||
max-width: 600px;
|
||||
margin: 0 auto; /* Center the card */
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
/* HEADER STYLING (The section outside the card) */
|
||||
.header {
|
||||
text-align: center;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
.header h1 {
|
||||
font-size: 2rem;
|
||||
color: var(--kaauh-teal-dark);
|
||||
font-weight: 700;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
.header p {
|
||||
color: var(--kaauh-gray);
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
/* CARD TITLE STYLING */
|
||||
.card-title {
|
||||
font-size: 1.25rem;
|
||||
color: var(--kaauh-teal-dark);
|
||||
font-weight: 600;
|
||||
border-bottom: 1px solid var(--kaauh-border);
|
||||
padding-bottom: 0.75rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
/* FORM STYLING */
|
||||
.form-row {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
.form-label {
|
||||
display: block;
|
||||
font-weight: 600;
|
||||
color: var(--kaauh-gray);
|
||||
margin-bottom: 0.5rem;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
.form-input {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 0.75rem 1rem;
|
||||
font-size: 1rem;
|
||||
line-height: 1.5;
|
||||
color: var(--kaauh-primary-text);
|
||||
background-color: #fff;
|
||||
background-clip: padding-box;
|
||||
border: 1px solid var(--kaauh-border);
|
||||
border-radius: 0.5rem;
|
||||
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
|
||||
}
|
||||
.form-input:focus {
|
||||
border-color: var(--kaauh-teal);
|
||||
outline: 0;
|
||||
box-shadow: 0 0 0 0.1rem rgba(0, 99, 110, 0.25);
|
||||
}
|
||||
input[type="datetime-local"] {
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
/* MESSAGES/ALERTS STYLING */
|
||||
.messages {
|
||||
max-width: 600px;
|
||||
margin: 0 auto 1.5rem auto;
|
||||
}
|
||||
.alert {
|
||||
padding: 1rem;
|
||||
border-radius: 0.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
.alert-success {
|
||||
color: white;
|
||||
background-color: var(--kaauh-success);
|
||||
border-color: var(--kaauh-success);
|
||||
}
|
||||
.alert-danger {
|
||||
color: white;
|
||||
background-color: var(--kaauh-danger);
|
||||
border-color: var(--kaauh-danger);
|
||||
}
|
||||
.alert-info {
|
||||
color: white;
|
||||
background-color: var(--kaauh-info);
|
||||
border-color: var(--kaauh-info);
|
||||
}
|
||||
|
||||
/* BUTTON STYLING */
|
||||
.actions {
|
||||
margin-top: 1.5rem;
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
}
|
||||
.btn-base {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
padding: 0.5rem 1rem;
|
||||
font-size: 1rem;
|
||||
line-height: 1.5;
|
||||
border-radius: 0.5rem;
|
||||
font-weight: 600;
|
||||
border: 1px solid transparent;
|
||||
transition: all 0.2s ease;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* Primary Action Button (Update) */
|
||||
.btn-main-action {
|
||||
background-color: var(--kaauh-teal);
|
||||
border-color: var(--kaauh-teal);
|
||||
color: white;
|
||||
}
|
||||
.btn-main-action:hover {
|
||||
background-color: var(--kaauh-teal-dark);
|
||||
border-color: var(--kaauh-teal-dark);
|
||||
box-shadow: 0 4px 8px rgba(0,0,0,0.15);
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* Secondary Button (Cancel) */
|
||||
.btn-kaats-outline-secondary {
|
||||
color: var(--kaauh-secondary);
|
||||
border-color: var(--kaauh-secondary);
|
||||
background-color: transparent;
|
||||
}
|
||||
.btn-kaats-outline-secondary:hover {
|
||||
background-color: var(--kaauh-secondary);
|
||||
color: white;
|
||||
border-color: var(--kaauh-secondary);
|
||||
}
|
||||
</style>
|
||||
<link rel="stylesheet" href="{% static 'css/update_meeting.css' %}">
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
@ -190,7 +28,7 @@
|
||||
<div class="card">
|
||||
<h2 class="card-title">{% trans "Meeting Information" %}</h2>
|
||||
|
||||
<form method="post" action="{% url 'update_meeting' meeting.slug %}">
|
||||
<form method="post" id="updateMeeting" action="{% url 'update_meeting' meeting.slug %}">
|
||||
{% csrf_token %}
|
||||
|
||||
<div class="form-row">
|
||||
|
||||
@ -3,206 +3,11 @@
|
||||
|
||||
{% block title %}Candidate Tier Management - {{ job.title }} - ATS{% endblock %}
|
||||
|
||||
{% block customCSS %}
|
||||
<style>
|
||||
/* KAAT-S UI Variables */
|
||||
:root {
|
||||
--kaauh-teal: #00636e;
|
||||
--kaauh-teal-dark: #004a53;
|
||||
--kaauh-border: #eaeff3;
|
||||
--kaauh-primary-text: #343a40;
|
||||
--kaauh-success: #28a745;
|
||||
--kaauh-info: #17a2b8; /* Used for Exam stages (Pending status) */
|
||||
--kaauh-danger: #dc3545;
|
||||
--kaauh-warning: #ffc107;
|
||||
}
|
||||
|
||||
/* Primary Color Overrides */
|
||||
.text-primary-theme { color: var(--kaauh-teal) !important; }
|
||||
.bg-primary-theme { background-color: var(--kaauh-teal) !important; }
|
||||
|
||||
/* 1. Main Container & Card Styling */
|
||||
.kaauh-card {
|
||||
border: 1px solid var(--kaauh-border);
|
||||
border-radius: 0.75rem;
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.06);
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
/* Dedicated style for the tier control block (consistent with .filter-controls) */
|
||||
.tier-controls {
|
||||
background-color: var(--kaauh-border); /* Light background for control sections */
|
||||
border-radius: 0.75rem;
|
||||
padding: 1.25rem;
|
||||
margin-bottom: 2rem;
|
||||
border: 1px solid var(--kaauh-border);
|
||||
}
|
||||
.tier-controls .form-row {
|
||||
display: flex;
|
||||
align-items: end;
|
||||
gap: 1rem;
|
||||
}
|
||||
.tier-controls .form-group {
|
||||
flex: 1;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* 2. Button Styling (Themed for Main Actions) */
|
||||
.btn-main-action {
|
||||
background-color: var(--kaauh-teal);
|
||||
border-color: var(--kaauh-teal);
|
||||
color: white;
|
||||
font-weight: 600;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
.btn-main-action:hover {
|
||||
background-color: var(--kaauh-teal-dark);
|
||||
border-color: var(--kaauh-teal-dark);
|
||||
box-shadow: 0 4px 8px rgba(0,0,0,0.15);
|
||||
}
|
||||
.btn-outline-secondary {
|
||||
color: var(--kaauh-teal-dark);
|
||||
border-color: var(--kaauh-teal);
|
||||
}
|
||||
.btn-outline-secondary:hover {
|
||||
background-color: var(--kaauh-teal-dark);
|
||||
color: white;
|
||||
border-color: var(--kaauh-teal-dark);
|
||||
}
|
||||
/* Style for Bulk Pass button */
|
||||
.btn-bulk-pass {
|
||||
background-color: var(--kaauh-success);
|
||||
border-color: var(--kaauh-success);
|
||||
color: white;
|
||||
font-weight: 500;
|
||||
}
|
||||
.btn-bulk-pass:hover {
|
||||
background-color: #1e7e34;
|
||||
border-color: #1e7e34;
|
||||
}
|
||||
/* Style for Bulk Fail button */
|
||||
.btn-bulk-fail {
|
||||
background-color: var(--kaauh-danger);
|
||||
border-color: var(--kaauh-danger);
|
||||
color: white;
|
||||
font-weight: 500;
|
||||
}
|
||||
.btn-bulk-fail:hover {
|
||||
background-color: #bd2130;
|
||||
border-color: #bd2130;
|
||||
}
|
||||
|
||||
/* 3. Input and Button Height Optimization (Thin look) */
|
||||
.form-control-sm,
|
||||
.btn-sm {
|
||||
/* Reduce vertical padding even more than default Bootstrap 'sm' */
|
||||
padding-top: 0.2rem !important;
|
||||
padding-bottom: 0.2rem !important;
|
||||
/* Ensure a consistent, small height for inputs and buttons */
|
||||
height: 28px !important;
|
||||
font-size: 0.8rem !important;
|
||||
}
|
||||
.btn-main-action.btn-sm { font-weight: 600 !important; }
|
||||
|
||||
/* Container for the timeline include */
|
||||
.applicant-tracking-timeline {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
/* 4. Candidate Table Styling (KAAT-S Look) */
|
||||
.candidate-table {
|
||||
table-layout: fixed;
|
||||
width: 100%;
|
||||
border-collapse: separate;
|
||||
border-spacing: 0;
|
||||
background-color: white;
|
||||
border-radius: 0.5rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
.candidate-table thead {
|
||||
background-color: var(--kaauh-border);
|
||||
}
|
||||
.candidate-table th {
|
||||
padding: 0.75rem;
|
||||
font-weight: 600;
|
||||
color: var(--kaauh-teal-dark);
|
||||
border-bottom: 2px solid var(--kaauh-teal);
|
||||
font-size: 0.9rem;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.candidate-table td {
|
||||
padding: 0.75rem;
|
||||
border-bottom: 1px solid var(--kaauh-border);
|
||||
vertical-align: middle;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
.candidate-table tbody tr:hover {
|
||||
background-color: #f1f3f4;
|
||||
}
|
||||
.candidate-name {
|
||||
font-weight: 600;
|
||||
color: var(--kaauh-primary-text);
|
||||
}
|
||||
.candidate-details {
|
||||
font-size: 0.8rem;
|
||||
color: #6c757d;
|
||||
}
|
||||
.candidate-table-responsive {
|
||||
overflow-x: auto;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
/* 5. Badges */
|
||||
.ai-score-badge {
|
||||
background-color: var(--kaauh-teal-dark) !important;
|
||||
color: white;
|
||||
font-weight: 700;
|
||||
padding: 0.4em 0.8em;
|
||||
border-radius: 0.4rem;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
.status-badge { /* Used for Exam Status (Passed/Failed/Pending) */
|
||||
font-size: 0.75rem;
|
||||
padding: 0.3em 0.7em;
|
||||
border-radius: 0.35rem;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
display: inline-block;
|
||||
}
|
||||
.bg-success { background-color: var(--kaauh-success) !important; color: white; }
|
||||
.bg-danger { background-color: var(--kaauh-danger) !important; color: white; }
|
||||
.bg-info-pending { background-color: var(--kaauh-info) !important; color: white; }
|
||||
|
||||
.tier-badge { /* Used for Tier labels */
|
||||
font-size: 0.75rem;
|
||||
padding: 0.125rem 0.5rem;
|
||||
border-radius: 0.5rem;
|
||||
font-weight: 600;
|
||||
margin-left: 0.5rem;
|
||||
display: inline-block;
|
||||
}
|
||||
.tier-1-badge { background-color: var(--kaauh-success); color: white; }
|
||||
.tier-2-badge { background-color: var(--kaauh-warning); color: #856404; }
|
||||
.tier-3-badge { background-color: #d1ecf1; color: #0c5460; }
|
||||
|
||||
/* Fix table column widths for better layout */
|
||||
.candidate-table th:nth-child(1) { width: 40px; } /* Checkbox */
|
||||
.candidate-table th:nth-child(4) { width: 10%; } /* AI Score */
|
||||
.candidate-table th:nth-child(5) { width: 12%; } /* Exam Status */
|
||||
.candidate-table th:nth-child(6) { width: 15%; } /* Exam Date */
|
||||
.candidate-table th:nth-child(7) { width: 220px; } /* Actions */
|
||||
|
||||
.cd_exam{
|
||||
color: #00636e;
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="container-fluid py-4">
|
||||
<div class="d-flex justify-content-between align-items-center mb-4">
|
||||
<div>
|
||||
<h1 class="h3 mb-1" style="color: var(--kaauh-teal-dark); font-weight: 700;">
|
||||
<h1 class="h3 mb-1 page-header">
|
||||
<i class="fas fa-edit me-2"></i>
|
||||
{% trans "Exam Management" %} - {{ job.title }}
|
||||
</h1>
|
||||
@ -215,35 +20,9 @@
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{# APPLICANT TRACKING TIMELINE INCLUSION #}
|
||||
<div class="applicant-tracking-timeline">
|
||||
<div class="applicant-tracking-timeline mb-4">
|
||||
{% include 'jobs/partials/applicant_tracking.html' %}
|
||||
</div>
|
||||
{# END APPLICANT TRACKING TIMELINE INCLUSION #}
|
||||
|
||||
{% comment %} <div class="tier-controls kaauh-card shadow-sm">
|
||||
<h4 class="h6 mb-3 fw-bold" style="color: var(--kaauh-teal-dark);">
|
||||
<i class="fas fa-sort-amount-up me-1"></i> {% trans "Define Top Candidates (Tiers)" %}
|
||||
</h4>
|
||||
<form method="post" class="mb-0">
|
||||
{% csrf_token %}
|
||||
<div class="row g-3 align-items-end">
|
||||
<div class="col-md-3 col-sm-6">
|
||||
<label for="tier1_count" class="form-label small text-muted mb-1">
|
||||
{% trans "Number of Tier 1 Candidates (Top N)" %}
|
||||
</label>
|
||||
<input type="number" name="tier1_count" id="tier1_count" class="form-control form-control-sm"
|
||||
value="{{ tier1_count }}" min="1" max="{{ total_candidates }}" placeholder="e.g., 50">
|
||||
</div>
|
||||
<div class="col-md-3 col-sm-6">
|
||||
<button type="submit" name="update_tiers" class="btn btn-main-action btn-sm w-100">
|
||||
<i class="fas fa-sync-alt me-1"></i> {% trans "Update Tiers" %}
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-md-6 d-none d-md-block"></div>
|
||||
</div>
|
||||
</form> {% endcomment %}
|
||||
</div>
|
||||
|
||||
<h2 class="h4 mb-3" style="color: var(--kaauh-primary-text);">
|
||||
{% trans "Candidate List" %}
|
||||
@ -252,27 +31,26 @@
|
||||
</h2>
|
||||
|
||||
<div class="kaauh-card shadow-sm p-3">
|
||||
<div class="candidate-table-responsive" data-signals__ifmissing="{_fetching: false, selections: Array({{ candidates|length }}).fill(false)}">
|
||||
<div class="col-md-3 col-sm-6 mb-3 d-flex gap-2">
|
||||
{% if candidates %}
|
||||
<form hx-boost="true" hx-include="#candidate-form" action="{% url 'candidate_update_status' job.slug %}" method="post">
|
||||
<div class="d-flex align-items-center">
|
||||
<select name="mark_as" id="update_status" class="form-select form-select-sm" style="height: 3rem;">
|
||||
<option value="Applied">
|
||||
<i class="fas fa-arrow-left me-1"></i> {% trans "Apply" %}
|
||||
</option>
|
||||
<option value="Interview">
|
||||
<i class="fas fa-arrow-right me-1"></i> {% trans "Interview" %}
|
||||
</option>
|
||||
</select>
|
||||
<button type="submit" class="btn btn-main-action btn-mds ms-2">
|
||||
<i class="fas fa-arrow-right me-1"></i> {% trans "Update" %}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
{% if candidates %}
|
||||
<div class="bulk-action-bar">
|
||||
<form hx-boost="true" hx-include="#candidate-form" action="{% url 'candidate_update_status' job.slug %}" method="post" class="action-group">
|
||||
{% csrf_token %}
|
||||
<label for="update_status" class="form-label small mb-0 fw-bold">{% trans "Move Selected To:" %}</label>
|
||||
<select name="mark_as" id="update_status" class="form-select form-select-sm" style="width: auto;">
|
||||
<option value="Applied">
|
||||
{% trans "Screening Stage" %}
|
||||
</option>
|
||||
<option value="Interview">
|
||||
{% trans "Interview Stage" %}
|
||||
</option>
|
||||
</select>
|
||||
<button type="submit" class="btn btn-main-action btn-sm">
|
||||
<i class="fas fa-arrow-right me-1"></i> {% trans "Update Status" %}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="table-responsive">
|
||||
<form id="candidate-form" method="post">
|
||||
{% csrf_token %}
|
||||
<table class="table candidate-table align-middle">
|
||||
@ -308,7 +86,7 @@
|
||||
<td>
|
||||
<div class="candidate-name">
|
||||
{{ candidate.name }}
|
||||
{# Tier logic updated to be cleaner #}
|
||||
{# Tier badges now use defined stage-badge and tier-X-badge classes #}
|
||||
{% if forloop.counter <= tier1_count %}
|
||||
<span class="stage-badge tier-1-badge">Tier 1</span>
|
||||
{% elif forloop.counter <= tier1_count|default:0|add:tier1_count %}
|
||||
@ -333,7 +111,7 @@
|
||||
{% elif candidate.exam_status == "Failed" %}
|
||||
<span class="status-badge bg-danger">{{ candidate.exam_status }}</span>
|
||||
{% else %}
|
||||
<span class="status-badge bg-info-pending">Pending</span>
|
||||
<span class="status-badge bg-info">Pending</span>
|
||||
{% endif %}
|
||||
</td>
|
||||
<td>
|
||||
@ -370,7 +148,6 @@
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="modal fade modal-lg" id="candidateviewModal" tabindex="-1" aria-labelledby="candidateviewModalLabel" aria-hidden="true">
|
||||
@ -423,36 +200,24 @@
|
||||
selectAllCheckbox.checked = false;
|
||||
selectAllCheckbox.indeterminate = true;
|
||||
}
|
||||
|
||||
// IMPORTANT: We do NOT fire a change event here to prevent the infinite loop.
|
||||
// Your existing data-bind-_all logic should handle the bulk action status.
|
||||
}
|
||||
|
||||
// 1. Logic for the 'Select All' checkbox (Clicking it updates all rows)
|
||||
selectAllCheckbox.addEventListener('change', function () {
|
||||
const isChecked = selectAllCheckbox.checked;
|
||||
|
||||
// Temporarily disable the change listener on rows to prevent cascading events
|
||||
rowCheckboxes.forEach(checkbox => checkbox.removeEventListener('change', updateSelectAllState));
|
||||
|
||||
// Update all row checkboxes
|
||||
rowCheckboxes.forEach(function (checkbox) {
|
||||
checkbox.checked = isChecked;
|
||||
|
||||
// You must still dispatch the event here so your framework's data-bind-selections
|
||||
// picks up the change on individual elements. This should NOT trigger the updateSelectAllState.
|
||||
checkbox.dispatchEvent(new Event('change', { bubbles: true }));
|
||||
});
|
||||
|
||||
// Re-attach the change listeners to the rows
|
||||
rowCheckboxes.forEach(checkbox => checkbox.addEventListener('change', updateSelectAllState));
|
||||
|
||||
// Ensure the header state is correct after forcing all changes
|
||||
updateSelectAllState();
|
||||
});
|
||||
|
||||
// 2. Logic to update 'Select All' state based on row checkboxes
|
||||
// Attach the function to be called whenever a row checkbox changes
|
||||
rowCheckboxes.forEach(function (checkbox) {
|
||||
checkbox.addEventListener('change', updateSelectAllState);
|
||||
});
|
||||
|
||||
@ -1,385 +1,296 @@
|
||||
{% extends 'base.html' %}
|
||||
{% load static i18n %}
|
||||
|
||||
{% block title %}Candidate Tier Management - {{ job.title }} - ATS{% endblock %}
|
||||
|
||||
{% block customCSS %}
|
||||
<style>
|
||||
/* Minimal Tier Management Styles */
|
||||
.tier-controls {
|
||||
background-color: #f8f9fa;
|
||||
padding: 1rem;
|
||||
border-radius: 0.375rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
.tier-controls .form-row {
|
||||
display: flex;
|
||||
align-items: end;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
.tier-controls .form-group {
|
||||
flex: 1;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.bulk-update-controls {
|
||||
background-color: #f8f9fa;
|
||||
padding: 1rem;
|
||||
border-radius: 0.375rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
.stage-groups {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||
gap: 1rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
.stage-group {
|
||||
border: 1px solid #dee2e6;
|
||||
border-radius: 0.375rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
.stage-group .stage-header {
|
||||
background-color: #495057;
|
||||
color: white;
|
||||
padding: 0.5rem 0.75rem;
|
||||
font-weight: 500;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
.stage-group .stage-body {
|
||||
padding: 0.75rem;
|
||||
min-height: 80px;
|
||||
}
|
||||
.stage-candidate {
|
||||
padding: 0.375rem;
|
||||
border-bottom: 1px solid #f1f3f4;
|
||||
}
|
||||
.stage-candidate:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
.match-score {
|
||||
font-weight: 600;
|
||||
color: #0056b3;
|
||||
}
|
||||
.btn-sm {
|
||||
font-size: 0.75rem;
|
||||
padding: 0.2rem 0.4rem;
|
||||
}
|
||||
|
||||
/* Tab Styles for Tiers */
|
||||
.nav-tabs {
|
||||
border-bottom: 1px solid #dee2e6;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
.nav-tabs .nav-link {
|
||||
border: none;
|
||||
color: #495057;
|
||||
font-weight: 500;
|
||||
padding: 0.5rem 1rem;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
.nav-tabs .nav-link:hover {
|
||||
border: none;
|
||||
background-color: #f8f9fa;
|
||||
}
|
||||
.nav-tabs .nav-link.active {
|
||||
color: #495057;
|
||||
background-color: #fff;
|
||||
border: none;
|
||||
border-bottom: 2px solid #007bff;
|
||||
font-weight: 600;
|
||||
}
|
||||
.tier-1 .nav-link {
|
||||
color: #155724;
|
||||
}
|
||||
.tier-1 .nav-link.active {
|
||||
border-bottom-color: #28a745;
|
||||
}
|
||||
.tier-2 .nav-link {
|
||||
color: #856404;
|
||||
}
|
||||
.tier-2 .nav-link.active {
|
||||
border-bottom-color: #ffc107;
|
||||
}
|
||||
.tier-3 .nav-link {
|
||||
color: #721c24;
|
||||
}
|
||||
.tier-3 .nav-link.active {
|
||||
border-bottom-color: #dc3545;
|
||||
}
|
||||
|
||||
/* Candidate Table Styles */
|
||||
.candidate-table {
|
||||
width: 100%;
|
||||
border-collapse: separate;
|
||||
border-spacing: 0;
|
||||
background-color: white;
|
||||
border-radius: 0.375rem;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
|
||||
}
|
||||
.candidate-table thead {
|
||||
background-color: #f8f9fa;
|
||||
}
|
||||
.candidate-table th {
|
||||
padding: 0.75rem;
|
||||
text-align: left;
|
||||
font-weight: 600;
|
||||
font-size: 0.875rem;
|
||||
color: #495057;
|
||||
border-bottom: 1px solid #dee2e6;
|
||||
}
|
||||
.candidate-table td {
|
||||
padding: 0.75rem;
|
||||
border-bottom: 1px solid #f1f3f4;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.candidate-table tbody tr:hover {
|
||||
background-color: #f8f9fa;
|
||||
}
|
||||
.candidate-table tbody tr:last-child td {
|
||||
border-bottom: none;
|
||||
}
|
||||
.candidate-name {
|
||||
font-weight: 600;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
.candidate-details {
|
||||
font-size: 0.8rem;
|
||||
color: #6c757d;
|
||||
}
|
||||
.candidate-table-responsive {
|
||||
overflow-x: auto;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
.stage-badge {
|
||||
padding: 0.125rem 0.5rem;
|
||||
border-radius: 0.5rem;
|
||||
font-size: 0.7rem;
|
||||
font-weight: 600;
|
||||
margin-left: 0.375rem;
|
||||
}
|
||||
.stage-Applied {
|
||||
background-color: #e9ecef;
|
||||
color: #495057;
|
||||
}
|
||||
.stage-Exam {
|
||||
background-color: #cce5ff;
|
||||
color: #004085;
|
||||
}
|
||||
.stage-Interview {
|
||||
background-color: #d1ecf1;
|
||||
color: #0c5460;
|
||||
}
|
||||
.stage-Offer {
|
||||
background-color: #d4edda;
|
||||
color: #155724;
|
||||
}
|
||||
.exam-controls {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.375rem;
|
||||
margin-top: 0.375rem;
|
||||
}
|
||||
.exam-controls select,
|
||||
.exam-controls input {
|
||||
font-size: 0.75rem;
|
||||
padding: 0.125rem 0.25rem;
|
||||
}
|
||||
.tier-badge {
|
||||
font-size: 0.7rem;
|
||||
padding: 0.125rem 0.375rem;
|
||||
border-radius: 0.25rem;
|
||||
background-color: rgba(0,0,0,0.1);
|
||||
color: #495057;
|
||||
margin-left: 0.375rem;
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
{% block title %}- {{ job.title }} - ATS{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="container py-4">
|
||||
<div class="container-fluid py-4">
|
||||
<div class="d-flex justify-content-between align-items-center mb-4">
|
||||
<div>
|
||||
<h1 class="h3 mb-1">
|
||||
<i class="fas fa-layer-group me-2"></i>
|
||||
{% trans "Interview" %} - {{ job.title }}
|
||||
<h1 class="h3 mb-1" style="color: var(--kaauh-teal-dark); font-weight: 700;">
|
||||
<i class="fas fa-calendar-alt me-2"></i>
|
||||
{% trans "Interview Management" %} - {{ job.title }}
|
||||
</h1>
|
||||
|
||||
<h2 class="h5 text-muted mb-0">
|
||||
{% trans "Candidates in Interview Stage:" %} <span class="fw-bold">{{ candidates|length }}</span>
|
||||
</h2>
|
||||
</div>
|
||||
<a href="{% url 'job_detail' job.slug %}" class="btn btn-outline-secondary">
|
||||
<i class="fas fa-arrow-left me-1"></i> {% trans "Back to Job" %}
|
||||
</a>
|
||||
</div>
|
||||
<div class="applicant-tracking-timeline">
|
||||
{% include 'jobs/partials/applicant_tracking.html' %}
|
||||
</div>
|
||||
|
||||
<!-- Tier Display -->
|
||||
<h2 class="h4 mb-3 mt-5">{% trans "Candidate Tiers" %}</h2>
|
||||
<div class="candidate-table-responsive" data-signals__ifmissing="{_fetching: false, selections: Array({{ candidates|length }}).fill(false)}">
|
||||
{% url "schedule_interviews" job.slug as bulk_update_candidate_exam_status_url %}
|
||||
{% if candidates %}
|
||||
<button class="btn btn-primary"
|
||||
data-bs-toggle="modal"
|
||||
data-bs-target="#candidateviewModal"
|
||||
data-attr="{disabled: !$selections.filter(Boolean).length}"
|
||||
hx-get="{{bulk_update_candidate_exam_status_url}}"
|
||||
hx-target="#candidateviewModalBody"
|
||||
hx-include="#myform"
|
||||
hx-select=".interview-schedule"
|
||||
>Mark as Pass and move to Interview</button>
|
||||
<button class="btn btn-danger"
|
||||
data-attr="{disabled: !$selections.filter(Boolean).length}"
|
||||
data-on-click="@post('{{bulk_update_candidate_exam_status_url}}',{
|
||||
contentType: 'form',
|
||||
selector: '#myform',
|
||||
headers: {'X-CSRFToken': '{{ csrf_token }}','status': 'fail'}
|
||||
})"
|
||||
>Mark as Failed</button>
|
||||
{% endif %}
|
||||
<form id="myform" action="{{bulk_update_candidate_exam_status_url}}" method="post">
|
||||
<table class="candidate-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>
|
||||
{% if candidates %}
|
||||
<div class="form-check">
|
||||
<input
|
||||
data-bind-_all
|
||||
data-on-change="$selections = Array({{ candidates|length }}).fill($_all)"
|
||||
data-effect="$selections; $_all = $selections.every(Boolean)"
|
||||
data-attr-disabled="$_fetching"
|
||||
type="checkbox" class="form-check-input" id="candidate-{{ candidate.id }}">
|
||||
</div>
|
||||
{% endif %}
|
||||
</th>
|
||||
<th>{% trans "Name" %}</th>
|
||||
<th>{% trans "Contact" %}</th>
|
||||
<th>{% trans "Interview Date" %}</th>
|
||||
<th>{% trans "Interview Link" %}</th>
|
||||
<th>{% trans "Actions" %}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for candidate in candidates %}
|
||||
<tr>
|
||||
<td>
|
||||
<div class="form-check">
|
||||
<input
|
||||
data-bind-selections
|
||||
data-attr-disabled="$_fetching"
|
||||
name="{{ candidate.id }}"
|
||||
<div class="kaauh-card shadow-sm p-3">
|
||||
{% if candidates %}
|
||||
<div class="bulk-action-bar">
|
||||
|
||||
type="checkbox" class="form-check-input" id="candidate-{{ candidate.id }}">
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="candidate-name">{{ candidate.name }}</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="candidate-details">
|
||||
Email: {{ candidate.email }}<br>
|
||||
Phone: {{ candidate.phone }}<br>
|
||||
</div>
|
||||
</td>
|
||||
|
||||
<td>{{candidate.get_latest_meeting.start_time|date:"m-d-Y h:i A"}}</td>
|
||||
<td><a href="{{candidate.get_latest_meeting.join_url}}">{% include "icons/link.html" %}</a></td>
|
||||
<td>
|
||||
<a href="{% url 'schedule_meeting_for_candidate' job.slug candidate.pk %}" class="btn btn-primary btn-sm me-1" title="{% trans 'Schedule Interview' %}">
|
||||
<i class="fas fa-calendar-plus"></i>
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
<form hx-boost="true" hx-include="#candidate-form" action="{% url 'candidate_update_status' job.slug %}" method="post" class="action-group">
|
||||
{% csrf_token %}
|
||||
<select name="mark_as" id="update_status" class="form-select form-select-sm" style="width: 120px;">
|
||||
<option value="Exam">
|
||||
{% trans "To Exam" %}
|
||||
</option>
|
||||
<option value="Offer">
|
||||
{% trans "To Offer" %}
|
||||
</option>
|
||||
</select>
|
||||
<button type="submit" class="btn btn-main-action btn-sm">
|
||||
<i class="fas fa-arrow-right me-1"></i> {% trans "Update" %}
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<div class="vr" style="height: 28px;"></div> <form hx-boost="true" hx-include="#candidate-form" action="{% url 'schedule_interviews' job.slug %}" method="get" class="action-group">
|
||||
<button type="submit" class="btn btn-main-action btn-sm">
|
||||
<i class="fas fa-calendar-plus me-1"></i> {% trans "Schedule Interviews" %}
|
||||
</button>
|
||||
</form>
|
||||
|
||||
</div>
|
||||
<!-- Tab Content -->
|
||||
{% endif %}
|
||||
<form id="candidate-form" action="{% url 'candidate_update_status' job.slug %}" method="get">
|
||||
{% csrf_token %}
|
||||
<table class="table candidate-table align-middle">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>
|
||||
{% if candidates %}
|
||||
<div class="form-check">
|
||||
<input
|
||||
type="checkbox" class="form-check-input" id="selectAllCheckbox">
|
||||
</div>
|
||||
{% endif %}
|
||||
</th>
|
||||
<th>{% trans "Name" %}</th>
|
||||
<th>{% trans "Contact" %}</th>
|
||||
<th>{% trans "Topic" %}</th>
|
||||
<th>{% trans "Duration" %}</th>
|
||||
<th>{% trans "Interview Date" %}</th>
|
||||
<th>{% trans "Interview Link" %}</th>
|
||||
<th>{% trans "Actions" %}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for candidate in candidates %}
|
||||
<tr>
|
||||
<td>
|
||||
<div class="form-check">
|
||||
<input name="candidate_ids" value="{{ candidate.id }}" type="checkbox" class="form-check-input rowCheckbox" id="candidate-{{ candidate.id }}">
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="candidate-name">
|
||||
{{ candidate.name }}
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="candidate-details">
|
||||
<i class="fas fa-envelope me-1"></i> {{ candidate.email }}<br>
|
||||
<i class="fas fa-phone me-1"></i> {{ candidate.phone }}
|
||||
</div>
|
||||
</td>
|
||||
<td class="candidate-details text-muted">{{ candidate.get_latest_meeting.topic }}</td>
|
||||
<td class="candidate-details text-muted"><div class="d-block"><i class="fas fa-clock me-1"></i> {{ candidate.get_latest_meeting.duration }} min</div></td>
|
||||
<td class="candidate-details text-muted">
|
||||
{% with latest_meeting=candidate.get_latest_meeting %}
|
||||
{% if latest_meeting %}
|
||||
{{ latest_meeting.start_time|date:"M d, Y h:i A" }}
|
||||
{% else %}
|
||||
<span class="text-muted">N/A</span>
|
||||
{% endif %}
|
||||
{% endwith %}
|
||||
</td>
|
||||
<td>
|
||||
{% with latest_meeting=candidate.get_latest_meeting %}
|
||||
{% if latest_meeting and latest_meeting.join_url %}
|
||||
<a href="{{ latest_meeting.join_url }}" target="_blank" class="text-primary-theme" title="Join Interview">
|
||||
<i class="fas fa-link"></i>
|
||||
</a>
|
||||
{% else %}
|
||||
<span class="text-muted">--</span>
|
||||
{% endif %}
|
||||
{% endwith %}
|
||||
</td>
|
||||
<td>
|
||||
<button type="button" class="btn btn-outline-secondary btn-sm"
|
||||
data-bs-toggle="modal"
|
||||
data-bs-target="#candidateviewModal"
|
||||
hx-get="{% url 'candidate_criteria_view_htmx' candidate.pk %}"
|
||||
hx-target="#candidateviewModalBody"
|
||||
title="View Profile">
|
||||
<i class="fas fa-eye"></i>
|
||||
</button>
|
||||
{% if candidate.get_latest_meeting %}
|
||||
<button type="button" class="btn btn-outline-secondary btn-sm"
|
||||
data-bs-toggle="modal"
|
||||
data-bs-target="#candidateviewModal"
|
||||
hx-get="{% url 'reschedule_meeting_for_candidate' job.slug candidate.pk candidate.get_latest_meeting.pk %}"
|
||||
hx-target="#candidateviewModalBody"
|
||||
title="Reschedule">
|
||||
<i class="fas fa-redo-alt"></i>
|
||||
</button>
|
||||
<button type="button" class="btn btn-outline-danger btn-sm"
|
||||
data-bs-toggle="modal"
|
||||
data-bs-target="#candidateviewModal"
|
||||
hx-get="{% url 'delete_meeting_for_candidate' job.slug candidate.pk candidate.get_latest_meeting.pk %}"
|
||||
hx-target="#candidateviewModalBody"
|
||||
title="Delete Meeting">
|
||||
<i class="fas fa-trash"></i>
|
||||
</button>
|
||||
|
||||
{% else %}
|
||||
<button type="button" class="btn btn-main-action btn-sm"
|
||||
data-bs-toggle="modal"
|
||||
data-bs-target="#candidateviewModal"
|
||||
hx-get="{% url 'schedule_meeting_for_candidate' job.slug candidate.pk %}"
|
||||
hx-target="#candidateviewModalBody"
|
||||
data-modal-title="{% trans 'Schedule Interview' %}"
|
||||
title="Schedule Interview">
|
||||
<i class="fas fa-calendar-plus"></i>
|
||||
</button>
|
||||
{% endif %}
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
{% if not candidates %}
|
||||
<div class="alert alert-info text-center mt-3 mb-0" role="alert">
|
||||
<i class="fas fa-info-circle me-1"></i>
|
||||
{% trans "No candidates are currently in the Interview stage for this job." %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</form>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="modal fade modal-xl" id="candidateviewModal" tabindex="-1" aria-labelledby="candidateviewModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="candidateviewModalLabel">Form Settings</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div id="candidateviewModalBody" class="modal-body">
|
||||
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Main Meeting Schedule/Reschedule Modal -->
|
||||
<div class="modal fade" id="meetingModal" tabindex="-1" aria-labelledby="meetingModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-dialog-centered">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="meetingModalLabel">
|
||||
{% trans "Schedule Interview" %} <!-- Default title -->
|
||||
<div class="modal-content kaauh-card"> <div class="modal-header" style="border-bottom: 1px solid var(--kaauh-border);">
|
||||
<h5 class="modal-title" id="candidateviewModalLabel" style="color: var(--kaauh-teal-dark);">
|
||||
{% trans "Candidate Details / Bulk Action Form" %}
|
||||
</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div id="meetingModalBody" class="modal-body">
|
||||
<!-- HTMX will load the form here -->
|
||||
<p class="text-center text-muted">{% trans "Loading form..." %}</p>
|
||||
<div id="candidateviewModalBody" class="modal-body">
|
||||
<div class="text-center py-5 text-muted">
|
||||
<i class="fas fa-spinner fa-spin fa-2x"></i><br>
|
||||
{% trans "Loading content..." %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<!-- HTMX might update the button text or add specific actions here if needed -->
|
||||
<!-- For now, the form itself has its own submit and cancel buttons -->
|
||||
<!-- The cancel button inside the form will close the modal -->
|
||||
<div class="modal-footer" style="border-top: 1px solid var(--kaauh-border);">
|
||||
<button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">
|
||||
{% trans "Cancel" %}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% endblock %}
|
||||
|
||||
{% block customJS %}
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const meetingModalElement = document.getElementById('meetingModal');
|
||||
const meetingModalTitle = meetingModalElement.querySelector('#meetingModalLabel');
|
||||
// The submit button is now inside the form snippet loaded by HTMX.
|
||||
// We will pass title info via data-* attributes or rely on the snippet's initial rendering.
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
const selectAllCheckbox = document.getElementById('selectAllCheckbox');
|
||||
const rowCheckboxes = document.querySelectorAll('.rowCheckbox');
|
||||
|
||||
// Add event listeners to buttons that trigger this modal
|
||||
// Using event delegation for dynamically added buttons
|
||||
document.addEventListener('click', function(event) {
|
||||
const button = event.target.closest('button[data-bs-toggle="modal"][data-bs-target="#meetingModal"]');
|
||||
if (button) {
|
||||
event.preventDefault(); // Prevent default if button has an href or type="submit"
|
||||
if (selectAllCheckbox) {
|
||||
|
||||
const modalTitle = button.getAttribute('data-modal-title');
|
||||
const modalSubmitText = button.getAttribute('data-modal-submit-text');
|
||||
// Function to safely update the header checkbox state
|
||||
function updateSelectAllState() {
|
||||
const checkedCount = Array.from(rowCheckboxes).filter(cb => cb.checked).length;
|
||||
const totalCount = rowCheckboxes.length;
|
||||
|
||||
if (meetingModalTitle) {
|
||||
meetingModalTitle.textContent = modalTitle || "{% trans 'Schedule Interview' %}";
|
||||
if (checkedCount === 0) {
|
||||
selectAllCheckbox.checked = false;
|
||||
selectAllCheckbox.indeterminate = false;
|
||||
} else if (checkedCount === totalCount) {
|
||||
selectAllCheckbox.checked = true;
|
||||
selectAllCheckbox.indeterminate = false;
|
||||
} else {
|
||||
// Set to indeterminate state (partially checked)
|
||||
selectAllCheckbox.checked = false;
|
||||
selectAllCheckbox.indeterminate = true;
|
||||
}
|
||||
}
|
||||
// The submit button text is now handled by the meeting_form.html snippet itself,
|
||||
// based on whether 'scheduled_interview' context is passed.
|
||||
|
||||
// Show the modal first, then HTMX will load the content into #meetingModalBody
|
||||
const modal = new bootstrap.Modal(meetingModalElement);
|
||||
modal.show();
|
||||
// 1. Logic for the 'Select All' checkbox (Clicking it updates all rows)
|
||||
selectAllCheckbox.addEventListener('change', function () {
|
||||
const isChecked = selectAllCheckbox.checked;
|
||||
|
||||
// HTMX attributes (hx-get, hx-target, hx-swap) on the button will trigger the fetch
|
||||
// after the modal is shown. HTMX handles this automatically.
|
||||
// Temporarily disable the change listener on rows to prevent cascading events
|
||||
rowCheckboxes.forEach(checkbox => checkbox.removeEventListener('change', updateSelectAllState));
|
||||
|
||||
// Update all row checkboxes
|
||||
rowCheckboxes.forEach(function (checkbox) {
|
||||
checkbox.checked = isChecked;
|
||||
|
||||
// Dispatch event for the framework (data-bind-selections)
|
||||
checkbox.dispatchEvent(new Event('change', { bubbles: true }));
|
||||
});
|
||||
|
||||
// Re-attach the change listeners to the rows
|
||||
rowCheckboxes.forEach(checkbox => checkbox.addEventListener('change', updateSelectAllState));
|
||||
|
||||
// Ensure the header state is correct after forcing all changes
|
||||
updateSelectAllState();
|
||||
});
|
||||
|
||||
// 2. Logic to update 'Select All' state based on row checkboxes
|
||||
// Attach the function to be called whenever a row checkbox changes
|
||||
rowCheckboxes.forEach(function (checkbox) {
|
||||
checkbox.addEventListener('change', updateSelectAllState);
|
||||
});
|
||||
|
||||
// Initial check to set the correct state on load (in case items are pre-checked)
|
||||
updateSelectAllState();
|
||||
}
|
||||
});
|
||||
|
||||
// Optional: Clear HTMX target content if modal is hidden without submission
|
||||
meetingModalElement.addEventListener('hidden.bs.modal', function () {
|
||||
const modalBody = meetingModalElement.querySelector('#meetingModalBody');
|
||||
if (modalBody) {
|
||||
// Reset to a loading message or clear, so next open fetches fresh
|
||||
modalBody.innerHTML = '<p class="text-center text-muted">{% trans "Loading form..." %}</p>';
|
||||
}
|
||||
});
|
||||
});
|
||||
// Handle Meeting Modal Opening (Rescheduling/Scheduling)
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// Renamed to candidateviewModal as that's the ID in the template
|
||||
const candidateviewModalElement = document.getElementById('candidateviewModal');
|
||||
const candidateviewModalLabel = candidateviewModalElement.querySelector('#candidateviewModalLabel');
|
||||
|
||||
// The old JS functions (loadScheduleMeetingForm, loadRescheduleMeetingForm) are no longer needed
|
||||
// as HTMX handles fetching the form. They can be removed if not used elsewhere.
|
||||
// Event listener for dynamic buttons using delegation
|
||||
document.addEventListener('click', function(event) {
|
||||
// Targetting buttons with hx-get that also targets the modal body
|
||||
const button = event.target.closest('button[data-bs-toggle="modal"][data-bs-target="#candidateviewModal"]');
|
||||
if (button) {
|
||||
// Do NOT preventDefault here as hx-get needs to fire.
|
||||
// hx-get will load the content into #candidateviewModalBody.
|
||||
|
||||
const modalTitle = button.getAttribute('data-modal-title');
|
||||
|
||||
// Update the modal title if a custom one is provided (used for scheduling)
|
||||
if (modalTitle && candidateviewModalLabel) {
|
||||
candidateviewModalLabel.textContent = modalTitle;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Clear HTMX target content when modal is hidden
|
||||
candidateviewModalElement.addEventListener('hidden.bs.modal', function () {
|
||||
const modalBody = candidateviewModalElement.querySelector('#candidateviewModalBody');
|
||||
if (modalBody) {
|
||||
// Reset to the loading state message, matching the initial content
|
||||
modalBody.innerHTML = `
|
||||
<div class="text-center py-5 text-muted">
|
||||
<i class="fas fa-spinner fa-spin fa-2x"></i><br>
|
||||
{% trans "Loading content..." %}
|
||||
</div>
|
||||
`;
|
||||
// Reset the modal title to its default state for next use
|
||||
const defaultTitle = "{% trans "Candidate Details / Bulk Action Form" %}";
|
||||
candidateviewModalLabel.textContent = defaultTitle;
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
{% endblock %}
|
||||
{% endblock %}
|
||||
@ -3,184 +3,12 @@
|
||||
|
||||
{% block title %}Candidate Management - {{ job.title }} - University ATS{% endblock %}
|
||||
|
||||
{% block customCSS %}
|
||||
<style>
|
||||
/* KAAT-S UI Variables */
|
||||
:root {
|
||||
--kaauh-teal: #00636e;
|
||||
--kaauh-teal-dark: #004a53;
|
||||
--kaauh-border: #eaeff3;
|
||||
--kaauh-primary-text: #343a40;
|
||||
--kaauh-success: #28a745;
|
||||
--kaauh-info: #17a2b8;
|
||||
--kaauh-danger: #dc3545;
|
||||
--kaauh-warning: #ffc107;
|
||||
}
|
||||
|
||||
/* Primary Color Overrides */
|
||||
.text-primary-theme { color: var(--kaauh-teal) !important; }
|
||||
.bg-primary-theme { background-color: var(--kaauh-teal) !important; }
|
||||
|
||||
/* 1. Main Container & Card Styling */
|
||||
.kaauh-card {
|
||||
border: 1px solid var(--kaauh-border);
|
||||
border-radius: 0.75rem;
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.06);
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
/* Dedicated style for the filter block */
|
||||
.filter-controls {
|
||||
background-color: #f8f9fa;
|
||||
border-radius: 0.75rem;
|
||||
padding: 1.5rem;
|
||||
margin-bottom: 2rem;
|
||||
border: 1px solid var(--kaauh-border);
|
||||
}
|
||||
|
||||
/* 2. Button Styling (Themed for Main Actions) */
|
||||
.btn-main-action {
|
||||
background-color: var(--kaauh-teal);
|
||||
border-color: var(--kaauh-teal);
|
||||
color: white;
|
||||
font-weight: 600;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
.btn-main-action:hover {
|
||||
background-color: var(--kaauh-teal-dark);
|
||||
border-color: var(--kaauh-teal-dark);
|
||||
box-shadow: 0 4px 8px rgba(0,0,0,0.15);
|
||||
}
|
||||
.btn-outline-secondary {
|
||||
color: var(--kaauh-teal-dark);
|
||||
border-color: var(--kaauh-teal);
|
||||
}
|
||||
.btn-outline-secondary:hover {
|
||||
background-color: var(--kaauh-teal-dark);
|
||||
color: white;
|
||||
border-color: var(--kaauh-teal-dark);
|
||||
}
|
||||
/* Style for the Bulk Move button */
|
||||
.btn-bulk-action {
|
||||
background-color: var(--kaauh-teal-dark);
|
||||
border-color: var(--kaauh-teal-dark);
|
||||
color: white;
|
||||
font-weight: 500;
|
||||
}
|
||||
.btn-bulk-action:hover {
|
||||
background-color: #00363e;
|
||||
border-color: #00363e;
|
||||
}
|
||||
|
||||
/* 3. Candidate Table Styling (Aligned with KAAT-S) */
|
||||
.candidate-table {
|
||||
table-layout: fixed;
|
||||
width: 100%;
|
||||
border-collapse: separate;
|
||||
border-spacing: 0;
|
||||
background-color: white;
|
||||
border-radius: 0.5rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
.candidate-table thead {
|
||||
background-color: var(--kaauh-border);
|
||||
}
|
||||
.candidate-table th {
|
||||
padding: 0.75rem 1rem;
|
||||
font-weight: 600;
|
||||
color: var(--kaauh-teal-dark);
|
||||
border-bottom: 2px solid var(--kaauh-teal);
|
||||
font-size: 0.9rem;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.candidate-table td {
|
||||
padding: 0.75rem 1rem;
|
||||
border-bottom: 1px solid var(--kaauh-border);
|
||||
vertical-align: middle;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
.candidate-table tbody tr:hover {
|
||||
background-color: #f1f3f4;
|
||||
}
|
||||
.candidate-table thead th:nth-child(1) { width: 40px; }
|
||||
.candidate-table thead th:nth-child(4) { width: 10%; }
|
||||
.candidate-table thead th:nth-child(7) { width: 100px; }
|
||||
|
||||
.candidate-name {
|
||||
font-weight: 600;
|
||||
color: var(--kaauh-primary-text);
|
||||
}
|
||||
.candidate-details {
|
||||
font-size: 0.8rem;
|
||||
color: #6c757d;
|
||||
}
|
||||
|
||||
/* 4. Badges and Statuses */
|
||||
.ai-score-badge {
|
||||
background-color: var(--kaauh-teal-dark) !important;
|
||||
color: white;
|
||||
font-weight: 700;
|
||||
padding: 0.4em 0.8em;
|
||||
border-radius: 0.4rem;
|
||||
}
|
||||
.status-badge {
|
||||
font-size: 0.75rem;
|
||||
padding: 0.3em 0.7em;
|
||||
border-radius: 0.35rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
.bg-applicant { background-color: #6c757d !important; color: white; }
|
||||
.bg-candidate { background-color: var(--kaauh-success) !important; color: white; }
|
||||
|
||||
/* Stage Badges */
|
||||
.stage-badge {
|
||||
font-size: 0.75rem;
|
||||
padding: 0.25rem 0.6rem;
|
||||
border-radius: 0.3rem;
|
||||
font-weight: 600;
|
||||
display: inline-block;
|
||||
margin-bottom: 0.2rem;
|
||||
}
|
||||
.stage-Applied { background-color: #e9ecef; color: #495057; }
|
||||
.stage-Screening { background-color: var(--kaauh-info); color: white; }
|
||||
.stage-Exam { background-color: var(--kaauh-warning); color: #856404; }
|
||||
.stage-Interview { background-color: #17a2b8; color: white; }
|
||||
.stage-Offer { background-color: var(--kaauh-success); color: white; }
|
||||
|
||||
/* Timeline specific container */
|
||||
.applicant-tracking-timeline {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
/* --- CUSTOM HEIGHT OPTIMIZATION (MAKING INPUTS/BUTTONS SMALLER) --- */
|
||||
.form-control-sm,
|
||||
.btn-sm {
|
||||
/* Reduce vertical padding even more than default Bootstrap 'sm' */
|
||||
padding-top: 0.2rem !important;
|
||||
padding-bottom: 0.2rem !important;
|
||||
/* Ensure a consistent, small height for both */
|
||||
height: 28px !important;
|
||||
font-size: 0.8rem !important; /* Slightly smaller font */
|
||||
}
|
||||
|
||||
.cd_screening{
|
||||
color: #00636e;
|
||||
|
||||
}
|
||||
|
||||
</style>
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
|
||||
<div class="container-fluid py-4">
|
||||
<div class="applicant-tracking-timeline">
|
||||
{% include 'jobs/partials/applicant_tracking.html' %}
|
||||
</div>
|
||||
|
||||
<div class="d-flex justify-content-between align-items-center mb-4">
|
||||
<div>
|
||||
<h1 class="h3 mb-1" style="color: var(--kaauh-teal-dark); font-weight: 700;">
|
||||
<h1 class="h3 mb-1 page-header">
|
||||
<i class="fas fa-layer-group me-2"></i>
|
||||
{% trans "Applicant Screening" %}
|
||||
</h1>
|
||||
@ -194,40 +22,42 @@
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="filter-controls shadow-sm">
|
||||
<h4 class="h6 mb-3 fw-bold" style="color: var(--kaauh-primary-text);">
|
||||
<div class="applicant-tracking-timeline mb-4">
|
||||
{% include 'jobs/partials/applicant_tracking.html' %}
|
||||
</div>
|
||||
|
||||
<div class="filter-controls">
|
||||
<h4 class="h6 mb-3 fw-bold">
|
||||
<i class="fas fa-sort-numeric-up me-1"></i> {% trans "AI Scoring & Top Candidate Filter" %}
|
||||
</h4>
|
||||
|
||||
<form method="GET" class="mb-0 pb-3">
|
||||
{% csrf_token %}
|
||||
<div class="d-flex flex-nowrap g-3 align-items-end" style="overflow-x: auto;">
|
||||
<form method="GET" class="mb-0">
|
||||
<div class="row g-3 align-items-end">
|
||||
|
||||
<div class="p-2">
|
||||
<label for="min_ai_score" class="form-label small text-muted mb-1">
|
||||
{% trans "Min AI Score" %}
|
||||
</label>
|
||||
<input type="number" name="min_ai_score" id="min_ai_score" class="form-control form-control-sm"
|
||||
value="{{ min_ai_score}}" min="0" max="100" step="1"
|
||||
placeholder="e.g., 75" style="min-width: 120px;">
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<label for="min_ai_score" class="form-label small text-muted mb-1">
|
||||
{% trans "Min AI Score" %}
|
||||
</label>
|
||||
<input type="number" name="min_ai_score" id="min_ai_score" class="form-control form-control-sm"
|
||||
value="{{ min_ai_score}}" min="0" max="100" step="1"
|
||||
placeholder="e.g., 75" style="width: 120px;">
|
||||
</div>
|
||||
|
||||
<div class="p-2">
|
||||
<label for="tier1_count" class="form-label small text-muted mb-1">
|
||||
{% trans "Top N" %}
|
||||
</label>
|
||||
<input type="number" name="tier1_count" id="tier1_count" class="form-control form-control-sm"
|
||||
value="{{ tier1_count }}" min="1" max="{{ total_candidates }}" style="min-width: 100px;">
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<label for="tier1_count" class="form-label small text-muted mb-1">
|
||||
{% trans "Top N Candidates" %}
|
||||
</label>
|
||||
<input type="number" name="tier1_count" id="tier1_count" class="form-control form-control-sm"
|
||||
value="{{ tier1_count }}" min="1" max="{{ total_candidates }}" style="width: 120px;">
|
||||
</div>
|
||||
|
||||
<div class="p-2">
|
||||
<label class="form-label small text-muted mb-1 d-block"> </label>
|
||||
<button type="submit" name="update_tiers" class="btn btn-main-action btn-sm w-100" style="min-width: 150px;">
|
||||
<i class="fas fa-sync-alt me-1"></i> {% trans "Update Filters" %}
|
||||
</button>
|
||||
<div class="col-auto">
|
||||
<button type="submit" name="update_tiers" class="btn btn-main-action btn-sm">
|
||||
<i class="fas fa-sync-alt me-1"></i> {% trans "Update Filters" %}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<h2 class="h4 mb-3" style="color: var(--kaauh-primary-text);">
|
||||
@ -235,20 +65,22 @@
|
||||
<span class="badge bg-primary-theme ms-2">{{ candidates|length }} / {{ total_candidates }} Total</span>
|
||||
</h2>
|
||||
|
||||
<div class="kaauh-card shadow-sm p-3">
|
||||
<div class="kaauh-card p-3">
|
||||
{% if candidates %}
|
||||
<form hx-boost="true" hx-include="#candidate-form" action="{% url 'candidate_update_status' job.slug %}" method="post">
|
||||
<div class="d-flex align-items-center">
|
||||
<select name="mark_as" id="update_status" class="form-select form-select-sm" style="height: 3rem;">
|
||||
<option value="Exam">
|
||||
<i class="fas fa-arrow-right me-1"></i> {% trans "Exam" %}
|
||||
</option>
|
||||
<div class="bulk-action-bar">
|
||||
<form hx-boost="true" hx-include="#candidate-form" action="{% url 'candidate_update_status' job.slug %}" method="post" class="action-group">
|
||||
{% csrf_token %}
|
||||
<label for="update_status" class="form-label small mb-0 fw-bold">{% trans "Move Selected To:" %}</label>
|
||||
<select name="mark_as" id="update_status" class="form-select form-select-sm" style="width: auto;">
|
||||
<option value="Exam">
|
||||
{% trans "Exam Stage" %}
|
||||
</option>
|
||||
</select>
|
||||
<button type="submit" class="btn btn-main-action btn-mds ms-2">
|
||||
<i class="fas fa-arrow-right me-1"></i> {% trans "Update" %}
|
||||
</button>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-main-action btn-sm">
|
||||
<i class="fas fa-arrow-right me-1"></i> {% trans "Update Status" %}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<div class="table-responsive">
|
||||
@ -375,7 +207,6 @@
|
||||
const rowCheckboxes = document.querySelectorAll('.rowCheckbox');
|
||||
|
||||
if (selectAllCheckbox) {
|
||||
|
||||
// Function to safely update the header checkbox state
|
||||
function updateSelectAllState() {
|
||||
const checkedCount = Array.from(rowCheckboxes).filter(cb => cb.checked).length;
|
||||
@ -388,40 +219,27 @@
|
||||
selectAllCheckbox.checked = true;
|
||||
selectAllCheckbox.indeterminate = false;
|
||||
} else {
|
||||
// Set to indeterminate state (partially checked)
|
||||
selectAllCheckbox.checked = false;
|
||||
selectAllCheckbox.indeterminate = true;
|
||||
}
|
||||
|
||||
// IMPORTANT: We do NOT fire a change event here to prevent the infinite loop.
|
||||
// Your existing data-bind-_all logic should handle the bulk action status.
|
||||
}
|
||||
|
||||
// 1. Logic for the 'Select All' checkbox (Clicking it updates all rows)
|
||||
selectAllCheckbox.addEventListener('change', function () {
|
||||
const isChecked = selectAllCheckbox.checked;
|
||||
|
||||
// Temporarily disable the change listener on rows to prevent cascading events
|
||||
rowCheckboxes.forEach(checkbox => checkbox.removeEventListener('change', updateSelectAllState));
|
||||
|
||||
// Update all row checkboxes
|
||||
rowCheckboxes.forEach(function (checkbox) {
|
||||
checkbox.checked = isChecked;
|
||||
|
||||
// You must still dispatch the event here so your framework's data-bind-selections
|
||||
// picks up the change on individual elements. This should NOT trigger the updateSelectAllState.
|
||||
checkbox.dispatchEvent(new Event('change', { bubbles: true }));
|
||||
});
|
||||
|
||||
// Re-attach the change listeners to the rows
|
||||
rowCheckboxes.forEach(checkbox => checkbox.addEventListener('change', updateSelectAllState));
|
||||
|
||||
// Ensure the header state is correct after forcing all changes
|
||||
updateSelectAllState();
|
||||
});
|
||||
|
||||
// 2. Logic to update 'Select All' state based on row checkboxes
|
||||
// Attach the function to be called whenever a row checkbox changes
|
||||
rowCheckboxes.forEach(function (checkbox) {
|
||||
checkbox.addEventListener('change', updateSelectAllState);
|
||||
});
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user