767 lines
36 KiB
HTML
767 lines
36 KiB
HTML
{% extends "layouts/base.html" %}
|
|
{% load i18n %}{% get_current_language as LANG %}
|
|
|
|
{% block title %}{% if edit_user %}{% trans "Edit User" %}{% else %}{% trans "Create User" %}{% endif %} - PX360{% endblock %}
|
|
|
|
{% block extra_css %}
|
|
<style>
|
|
.page-header-gradient {
|
|
background: linear-gradient(135deg, #005696 0%, #0069a8 50%, #007bbd 100%);
|
|
color: white;
|
|
padding: 1.5rem 2rem;
|
|
border-radius: 1rem;
|
|
margin-bottom: 1.5rem;
|
|
box-shadow: 0 10px 15px -3px rgba(0, 86, 150, 0.2);
|
|
}
|
|
|
|
.form-section {
|
|
background: #fff;
|
|
border: 2px solid #e2e8f0;
|
|
border-radius: 1rem;
|
|
padding: 1.5rem;
|
|
margin-bottom: 1.5rem;
|
|
transition: all 0.3s ease;
|
|
}
|
|
.form-section:hover {
|
|
border-color: #005696;
|
|
box-shadow: 0 4px 12px rgba(0, 86, 150, 0.1);
|
|
}
|
|
|
|
.role-item {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 0.75rem;
|
|
padding: 0.75rem 1rem;
|
|
border: 2px solid #e2e8f0;
|
|
border-radius: 0.75rem;
|
|
transition: all 0.2s ease;
|
|
cursor: pointer;
|
|
}
|
|
.role-item:hover {
|
|
border-color: #005696;
|
|
background: #f8fafc;
|
|
}
|
|
.role-item:has(input:checked) {
|
|
border-color: #005696;
|
|
background: #eff6ff;
|
|
}
|
|
.role-item input[type="checkbox"] {
|
|
margin-top: 0.25rem;
|
|
width: 1rem;
|
|
height: 1rem;
|
|
accent-color: #005696;
|
|
}
|
|
|
|
.staff-search-container {
|
|
position: relative;
|
|
}
|
|
.staff-search-results {
|
|
position: absolute;
|
|
top: 100%;
|
|
left: 0;
|
|
right: 0;
|
|
background: white;
|
|
border: 2px solid #e2e8f0;
|
|
border-radius: 0.75rem;
|
|
max-height: 240px;
|
|
overflow-y: auto;
|
|
z-index: 50;
|
|
display: none;
|
|
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
|
|
}
|
|
.staff-search-results.active {
|
|
display: block;
|
|
}
|
|
.staff-search-item {
|
|
padding: 0.75rem 1rem;
|
|
cursor: pointer;
|
|
border-bottom: 1px solid #f1f5f9;
|
|
transition: background 0.15s;
|
|
}
|
|
.staff-search-item:hover {
|
|
background: #f8fafc;
|
|
}
|
|
.staff-search-item:last-child {
|
|
border-bottom: none;
|
|
}
|
|
.staff-chip {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
padding: 0.5rem 1rem;
|
|
background: #eff6ff;
|
|
border: 2px solid #005696;
|
|
border-radius: 0.75rem;
|
|
font-size: 0.875rem;
|
|
font-weight: 600;
|
|
color: #005696;
|
|
}
|
|
.password-wrapper {
|
|
position: relative;
|
|
}
|
|
.password-wrapper input {
|
|
padding-right: 100px;
|
|
}
|
|
.password-actions {
|
|
position: absolute;
|
|
right: 8px;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
display: flex;
|
|
gap: 4px;
|
|
}
|
|
</style>
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="p-6">
|
|
<!-- Page Header -->
|
|
<div class="page-header-gradient">
|
|
<div class="flex items-center gap-2 mb-3">
|
|
<a href="{% url 'config:hospital_users_list' %}"
|
|
class="inline-flex items-center gap-2 px-4 py-2 bg-white/20 backdrop-blur-sm rounded-xl text-white hover:bg-white/30 transition text-sm font-semibold">
|
|
<i data-lucide="arrow-left" class="w-4 h-4"></i> {% trans "Back" %}
|
|
</a>
|
|
</div>
|
|
<h1 class="text-2xl font-bold">
|
|
{% if edit_user %}{% trans "Edit User" %}{% else %}{% trans "Create New User" %}{% endif %}
|
|
</h1>
|
|
<p class="text-white/80 mt-1">
|
|
{% if edit_user %}{% trans "Update user account information and roles" %}{% else %}{% trans "Create a new user account with roles and permissions" %}{% endif %}
|
|
</p>
|
|
</div>
|
|
|
|
{% if form.errors %}
|
|
<div class="mb-6 p-4 bg-red-50 border border-red-200 rounded-xl">
|
|
<div class="flex items-center gap-2 mb-2">
|
|
<i data-lucide="alert-circle" class="w-5 h-5 text-red-600"></i>
|
|
<h6 class="font-bold text-red-700">{% trans "Please correct the errors below" %}</h6>
|
|
</div>
|
|
{% for field, errors in form.errors.items %}
|
|
<p class="text-sm text-red-600 ml-7">{{ field }}: {{ errors.0 }}</p>
|
|
{% endfor %}
|
|
</div>
|
|
{% endif %}
|
|
|
|
<!-- Main Content Grid -->
|
|
<div class="grid grid-cols-12 gap-8">
|
|
<!-- Left Column (Form) -->
|
|
<div class="col-span-8">
|
|
<form method="post" id="userForm" class="space-y-6">
|
|
{% csrf_token %}
|
|
<input type="hidden" name="staff_id" id="staffIdInput" value="">
|
|
|
|
{% if not edit_user %}
|
|
<!-- Link to Staff -->
|
|
<section class="form-section">
|
|
<h3 class="font-bold text-navy mb-6 text-lg flex items-center gap-2">
|
|
<i data-lucide="link" class="w-5 h-5 text-blue"></i>
|
|
{% trans "Link to Staff" %}
|
|
</h3>
|
|
<p class="text-sm text-slate mb-4">{% trans "Optionally link this user account to an existing staff member. Their information will be auto-filled." %}</p>
|
|
|
|
<div id="staffSearchContainer" class="staff-search-container">
|
|
<div id="staffSearchInput-wrap">
|
|
<label class="block text-sm font-semibold text-navy mb-2">{% trans "Search Staff" %}</label>
|
|
<input type="text" id="staffSearchInput"
|
|
class="w-full px-4 py-3 border border-slate-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-navy focus:border-transparent transition bg-white text-sm"
|
|
placeholder="{% trans 'Type name, email, or employee ID...' %}" autocomplete="off">
|
|
</div>
|
|
<div id="staffSearchResults" class="staff-search-results"></div>
|
|
</div>
|
|
|
|
<div id="selectedStaffChip" class="hidden mt-3">
|
|
<div class="staff-chip">
|
|
<i data-lucide="user" class="w-4 h-4"></i>
|
|
<span id="selectedStaffName"></span>
|
|
<button type="button" onclick="clearStaffSelection()" class="ml-1 hover:bg-navy/10 rounded-full p-0.5">
|
|
<i data-lucide="x" class="w-3 h-3"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Create Staff Record -->
|
|
<section class="form-section">
|
|
<h3 class="font-bold text-navy mb-6 text-lg flex items-center gap-2">
|
|
<i data-lucide="user-plus" class="w-5 h-5 text-blue"></i>
|
|
{% trans "Create Staff Record" %}
|
|
</h3>
|
|
<div class="flex items-start gap-3 p-4 bg-light/30 rounded-xl">
|
|
<input type="checkbox" name="create_staff" id="create_staff"
|
|
class="w-5 h-5 text-navy border-slate-300 rounded focus:ring-navy mt-0.5">
|
|
<div>
|
|
<label for="create_staff" class="text-sm font-semibold text-navy block cursor-pointer">{% trans "Also create a staff record" %}</label>
|
|
<p class="text-xs text-slate mt-1">{% trans "Creates a staff directory entry linked to this user. Employee ID is required." %}</p>
|
|
</div>
|
|
</div>
|
|
<div id="createStaffFields" class="hidden mt-4 grid grid-cols-2 gap-4">
|
|
<div>
|
|
<label for="staff_type" class="block text-sm font-semibold text-navy mb-2">{% trans "Staff Type" %} <span class="text-red-500">*</span></label>
|
|
<select name="staff_type" id="staff_type"
|
|
class="w-full px-4 py-3 border border-slate-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-navy focus:border-transparent transition bg-white text-sm">
|
|
<option value="other">{% trans "Other" %}</option>
|
|
<option value="physician">{% trans "Physician" %}</option>
|
|
<option value="nurse">{% trans "Nurse" %}</option>
|
|
<option value="admin">{% trans "Administrative" %}</option>
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label for="staff_job_title" class="block text-sm font-semibold text-navy mb-2">{% trans "Job Title" %} <span class="text-red-500">*</span></label>
|
|
<input type="text" name="staff_job_title" id="staff_job_title"
|
|
class="w-full px-4 py-3 border border-slate-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-navy focus:border-transparent transition bg-white text-sm"
|
|
placeholder="{% trans 'e.g. Registered Nurse' %}">
|
|
</div>
|
|
</div>
|
|
</section>
|
|
{% endif %}
|
|
<section class="form-section">
|
|
<h3 class="font-bold text-navy mb-6 text-lg flex items-center gap-2">
|
|
<i data-lucide="user" class="w-5 h-5 text-blue"></i>
|
|
{% trans "Personal Information" %}
|
|
</h3>
|
|
<div class="grid grid-cols-2 gap-6">
|
|
<div>
|
|
<label for="{{ form.first_name.id_for_label }}" class="block text-sm font-semibold text-navy mb-2">
|
|
{% trans "First Name" %} <span class="text-red-500">*</span>
|
|
</label>
|
|
{{ form.first_name }}
|
|
{% if form.first_name.errors %}
|
|
<div class="text-red-500 text-sm mt-1 flex items-center gap-1">
|
|
<i data-lucide="alert-circle" class="w-4 h-4"></i>
|
|
{{ form.first_name.errors.0 }}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
<div>
|
|
<label for="{{ form.last_name.id_for_label }}" class="block text-sm font-semibold text-navy mb-2">
|
|
{% trans "Last Name" %} <span class="text-red-500">*</span>
|
|
</label>
|
|
{{ form.last_name }}
|
|
{% if form.last_name.errors %}
|
|
<div class="text-red-500 text-sm mt-1 flex items-center gap-1">
|
|
<i data-lucide="alert-circle" class="w-4 h-4"></i>
|
|
{{ form.last_name.errors.0 }}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
{% if not edit_user %}
|
|
<div>
|
|
<label for="{{ form.email.id_for_label }}" class="block text-sm font-semibold text-navy mb-2">
|
|
{% trans "Email" %} <span class="text-red-500">*</span>
|
|
</label>
|
|
{{ form.email }}
|
|
{% if form.email.errors %}
|
|
<div class="text-red-500 text-sm mt-1 flex items-center gap-1">
|
|
<i data-lucide="alert-circle" class="w-4 h-4"></i>
|
|
{{ form.email.errors.0 }}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
{% endif %}
|
|
<div>
|
|
<label for="{{ form.phone.id_for_label }}" class="block text-sm font-semibold text-navy mb-2">
|
|
{% trans "Phone" %}
|
|
</label>
|
|
{{ form.phone }}
|
|
</div>
|
|
<div>
|
|
<label for="{{ form.employee_id.id_for_label }}" class="block text-sm font-semibold text-navy mb-2">
|
|
{% trans "Employee ID" %}
|
|
</label>
|
|
{{ form.employee_id }}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Organization -->
|
|
<section class="form-section">
|
|
<h3 class="font-bold text-navy mb-6 text-lg flex items-center gap-2">
|
|
<i data-lucide="building-2" class="w-5 h-5 text-blue"></i>
|
|
{% trans "Organization" %}
|
|
</h3>
|
|
<div class="grid grid-cols-2 gap-6">
|
|
<div>
|
|
<label for="{{ form.hospital.id_for_label }}" class="block text-sm font-semibold text-navy mb-2">
|
|
{% trans "Hospital" %}
|
|
</label>
|
|
{{ form.hospital }}
|
|
{% if form.hospital.errors %}
|
|
<div class="text-red-500 text-sm mt-1 flex items-center gap-1">
|
|
<i data-lucide="alert-circle" class="w-4 h-4"></i>
|
|
{{ form.hospital.errors.0 }}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
<div>
|
|
<label for="{{ form.department.id_for_label }}" class="block text-sm font-semibold text-navy mb-2">
|
|
{% trans "Department" %}
|
|
</label>
|
|
<select name="{{ form.department.name }}" id="{{ form.department.id_for_label }}" data-tomselect
|
|
class="w-full px-4 py-3 border border-slate-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-navy focus:border-transparent transition bg-white text-sm">
|
|
<option value="">{% trans "Select Department" %}</option>
|
|
{% for choice in form.department.field.choices %}
|
|
{% if choice.0 %}
|
|
<option value="{{ choice.0 }}" {% if form.department.value|stringformat:"s" == choice.0|stringformat:"s" %}selected{% endif %}>{{ choice.1 }}</option>
|
|
{% endif %}
|
|
{% endfor %}
|
|
</select>
|
|
{% if form.department.errors %}
|
|
<div class="text-red-500 text-sm mt-1 flex items-center gap-1">
|
|
<i data-lucide="alert-circle" class="w-4 h-4"></i>
|
|
{{ form.department.errors.0 }}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Roles & Permissions -->
|
|
<section class="form-section">
|
|
<h3 class="font-bold text-navy mb-6 text-lg flex items-center gap-2">
|
|
<i data-lucide="shield" class="w-5 h-5 text-blue"></i>
|
|
{% trans "Roles & Permissions" %}
|
|
</h3>
|
|
<p class="text-sm text-slate mb-4">{% trans "Select the roles this user should have. Roles determine what actions the user can perform in the system." %}</p>
|
|
<div class="grid grid-cols-1 gap-3">
|
|
{% for group in form.groups.field.queryset %}
|
|
<label class="role-item">
|
|
<input type="checkbox" name="groups" value="{{ group.pk }}"
|
|
{% if group in form.groups.initial %}checked{% endif %}>
|
|
<div>
|
|
<span class="text-sm font-semibold text-navy block">{{ group.name }}</span>
|
|
</div>
|
|
</label>
|
|
{% empty %}
|
|
<p class="text-sm text-slate">{% trans "No roles available. Contact your administrator to set up roles." %}</p>
|
|
{% endfor %}
|
|
</div>
|
|
{% if form.groups.errors %}
|
|
<div class="text-red-500 text-sm mt-2 flex items-center gap-1">
|
|
<i data-lucide="alert-circle" class="w-4 h-4"></i>
|
|
{{ form.groups.errors.0 }}
|
|
</div>
|
|
{% endif %}
|
|
</section>
|
|
|
|
{% if not edit_user %}
|
|
<!-- Password -->
|
|
<section class="form-section">
|
|
<h3 class="font-bold text-navy mb-6 text-lg flex items-center gap-2">
|
|
<i data-lucide="lock" class="w-5 h-5 text-blue"></i>
|
|
{% trans "Password" %}
|
|
</h3>
|
|
<div class="grid grid-cols-2 gap-6">
|
|
<div>
|
|
<label for="{{ form.password.id_for_label }}" class="block text-sm font-semibold text-navy mb-2">
|
|
{% trans "Password" %}
|
|
</label>
|
|
<div class="password-wrapper">
|
|
{{ form.password }}
|
|
<div class="password-actions">
|
|
<button type="button" onclick="generatePassword()" class="px-3 py-1.5 bg-navy text-white rounded-lg text-xs font-bold hover:bg-blue transition" title="{% trans 'Generate Random Password' %}">
|
|
<i data-lucide="refresh-cw" class="w-3 h-3 inline"></i> {% trans "Generate" %}
|
|
</button>
|
|
<button type="button" onclick="copyPassword()" class="px-3 py-1.5 bg-slate-100 text-slate rounded-lg text-xs font-bold hover:bg-slate-200 transition" title="{% trans 'Copy Password' %}">
|
|
<i data-lucide="copy" class="w-3 h-3 inline"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
{% if form.password.errors %}
|
|
<div class="text-red-500 text-sm mt-1 flex items-center gap-1">
|
|
<i data-lucide="alert-circle" class="w-4 h-4"></i>
|
|
{{ form.password.errors.0 }}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
<div>
|
|
<label for="{{ form.password_confirm.id_for_label }}" class="block text-sm font-semibold text-navy mb-2">
|
|
{% trans "Confirm Password" %}
|
|
</label>
|
|
{{ form.password_confirm }}
|
|
{% if form.password_confirm.errors %}
|
|
<div class="text-red-500 text-sm mt-1 flex items-center gap-1">
|
|
<i data-lucide="alert-circle" class="w-4 h-4"></i>
|
|
{{ form.password_confirm.errors.0 }}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
<div class="mt-4 p-3 bg-blue-50 border border-blue-100 rounded-lg">
|
|
<p class="text-blue-700 text-xs flex items-start gap-2">
|
|
<i data-lucide="info" class="w-4 h-4 flex-shrink-0 mt-0.5"></i>
|
|
{% trans "Set a password now, or leave blank to send a password setup link via email." %}
|
|
</p>
|
|
</div>
|
|
</section>
|
|
{% endif %}
|
|
|
|
<!-- Status -->
|
|
<section class="form-section">
|
|
<h3 class="font-bold text-navy mb-6 text-lg flex items-center gap-2">
|
|
<i data-lucide="toggle-left" class="w-5 h-5 text-blue"></i>
|
|
{% trans "Status" %}
|
|
</h3>
|
|
<div class="flex items-center gap-3 p-4 bg-light/30 rounded-xl">
|
|
{{ form.is_active }}
|
|
<div>
|
|
<label for="{{ form.is_active.id_for_label }}" class="text-sm font-semibold text-navy block">
|
|
{% trans "Active" %}
|
|
</label>
|
|
<p class="text-xs text-slate">{% trans "Inactive users cannot log in to the system" %}</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Actions -->
|
|
<div class="flex items-center gap-4 pt-4">
|
|
<button type="submit" class="inline-flex items-center gap-2 px-6 py-3 bg-navy text-white rounded-xl font-semibold hover:bg-blue transition">
|
|
<i data-lucide="save" class="w-5 h-5"></i>
|
|
{% trans "Save" %}
|
|
</button>
|
|
<a href="{% url 'config:hospital_users_list' %}"
|
|
class="inline-flex items-center gap-2 px-6 py-3 bg-white text-slate border-2 border-slate-200 rounded-xl font-semibold hover:bg-slate-50 transition">
|
|
<i data-lucide="x" class="w-5 h-5"></i>
|
|
{% trans "Cancel" %}
|
|
</a>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- Right Column (Sidebar) -->
|
|
<div class="col-span-4 space-y-6">
|
|
<!-- Tips -->
|
|
<section class="form-section">
|
|
<h3 class="font-bold text-navy mb-4 text-sm flex items-center gap-2">
|
|
<i data-lucide="lightbulb" class="w-4 h-4 text-blue"></i>
|
|
{% trans "Tips" %}
|
|
</h3>
|
|
<ul class="space-y-3 text-sm text-slate">
|
|
<li class="flex items-start gap-2">
|
|
<i data-lucide="check" class="w-4 h-4 text-green-600 flex-shrink-0 mt-0.5"></i>
|
|
<span>{% trans "All fields marked with * are required" %}</span>
|
|
</li>
|
|
<li class="flex items-start gap-2">
|
|
<i data-lucide="check" class="w-4 h-4 text-green-600 flex-shrink-0 mt-0.5"></i>
|
|
<span>{% trans "Email must be unique and is used for login" %}</span>
|
|
</li>
|
|
<li class="flex items-start gap-2">
|
|
<i data-lucide="check" class="w-4 h-4 text-green-600 flex-shrink-0 mt-0.5"></i>
|
|
<span>{% trans "Assign at least one role for proper access" %}</span>
|
|
</li>
|
|
<li class="flex items-start gap-2">
|
|
<i data-lucide="check" class="w-4 h-4 text-green-600 flex-shrink-0 mt-0.5"></i>
|
|
<span>{% trans "Set a password or leave blank to email a setup link" %}</span>
|
|
</li>
|
|
</ul>
|
|
</section>
|
|
|
|
{% if edit_user %}
|
|
<!-- User Info -->
|
|
<section class="form-section">
|
|
<h3 class="font-bold text-navy mb-4 text-sm flex items-center gap-2">
|
|
<i data-lucide="info" class="w-4 h-4 text-blue"></i>
|
|
{% trans "User Info" %}
|
|
</h3>
|
|
<div class="space-y-2 text-sm">
|
|
<div class="flex justify-between">
|
|
<span class="text-slate">{% trans "Email" %}</span>
|
|
<span class="font-medium text-navy">{{ edit_user.email }}</span>
|
|
</div>
|
|
<div class="flex justify-between">
|
|
<span class="text-slate">{% trans "Joined" %}</span>
|
|
<span class="font-medium text-navy">{{ edit_user.date_joined|date:"M d, Y" }}</span>
|
|
</div>
|
|
<div class="flex justify-between">
|
|
<span class="text-slate">{% trans "Last Login" %}</span>
|
|
<span class="font-medium text-navy">{{ edit_user.last_login|date:"M d, Y"|default:"Never" }}</span>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block extra_js %}
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const hospitalField = document.getElementById('id_hospital');
|
|
const departmentSelect = document.getElementById('id_department');
|
|
|
|
// ===== Department loading =====
|
|
function loadDepartments(hospitalId, selectedDept) {
|
|
if (!departmentSelect) return;
|
|
var ts = departmentSelect.tomselect;
|
|
var placeholderText = '{% trans "Select Department" %}';
|
|
|
|
if (!hospitalId) {
|
|
if (ts) {
|
|
ts.clear();
|
|
ts.clearOptions();
|
|
ts.addOption({value: '', text: placeholderText});
|
|
} else {
|
|
departmentSelect.innerHTML = '<option value="">' + placeholderText + '</option>';
|
|
}
|
|
return;
|
|
}
|
|
|
|
if (ts) { ts.clear(); ts.clearOptions(); ts.addOption({value: '', text: '{% trans "Loading..." %}'}); }
|
|
else { departmentSelect.innerHTML = '<option value="">{% trans "Loading..." %}</option>'; }
|
|
|
|
fetch('/organizations/api/departments/?hospital=' + hospitalId)
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
const results = data.results || data;
|
|
|
|
if (ts) {
|
|
ts.clear();
|
|
ts.clearOptions();
|
|
ts.addOption({value: '', text: placeholderText});
|
|
results.forEach(dept => {
|
|
ts.addOption({
|
|
value: dept.id,
|
|
text: {% if LANG == 'ar' %}dept.name_ar || dept.name{% else %}dept.name{% endif %}
|
|
});
|
|
});
|
|
} else {
|
|
departmentSelect.innerHTML = '<option value="">' + placeholderText + '</option>';
|
|
results.forEach(dept => {
|
|
const option = document.createElement('option');
|
|
option.value = dept.id;
|
|
option.textContent = {% if LANG == 'ar' %}dept.name_ar || dept.name{% else %}dept.name{% endif %};
|
|
departmentSelect.appendChild(option);
|
|
});
|
|
}
|
|
|
|
var selectVal = selectedDept || ('{{ form.department.value }}' || '');
|
|
if (selectVal) {
|
|
if (ts) { ts.setValue(selectVal, true); }
|
|
else { departmentSelect.value = selectVal; }
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('Error loading departments:', error);
|
|
if (ts) {
|
|
ts.clear();
|
|
ts.clearOptions();
|
|
ts.addOption({value: '', text: '{% trans "Error loading departments" %}'});
|
|
} else {
|
|
departmentSelect.innerHTML = '<option value="">{% trans "Error loading departments" %}</option>';
|
|
}
|
|
});
|
|
}
|
|
|
|
if (hospitalField) {
|
|
hospitalField.addEventListener('change', function() {
|
|
loadDepartments(this.value);
|
|
});
|
|
if (hospitalField.value) {
|
|
loadDepartments(hospitalField.value);
|
|
}
|
|
}
|
|
|
|
// ===== Staff Search =====
|
|
const staffSearchInput = document.getElementById('staffSearchInput');
|
|
const staffSearchResults = document.getElementById('staffSearchResults');
|
|
const staffIdInput = document.getElementById('staffIdInput');
|
|
const selectedStaffChip = document.getElementById('selectedStaffChip');
|
|
const selectedStaffName = document.getElementById('selectedStaffName');
|
|
const staffSearchInputWrap = document.getElementById('staffSearchInput-wrap');
|
|
|
|
// ===== Create Staff Toggle =====
|
|
const createStaffCheckbox = document.getElementById('create_staff');
|
|
const createStaffFields = document.getElementById('createStaffFields');
|
|
const staffSearchSection = staffSearchInput ? staffSearchInput.closest('.form-section') : null;
|
|
|
|
if (createStaffCheckbox) {
|
|
createStaffCheckbox.addEventListener('change', function() {
|
|
if (this.checked) {
|
|
createStaffFields.classList.remove('hidden');
|
|
if (staffSearchSection) staffSearchSection.classList.add('hidden');
|
|
if (staffIdInput) staffIdInput.value = '';
|
|
} else {
|
|
createStaffFields.classList.add('hidden');
|
|
if (staffSearchSection) staffSearchSection.classList.remove('hidden');
|
|
}
|
|
lucide.createIcons();
|
|
});
|
|
}
|
|
|
|
function disableCreateStaff() {
|
|
if (createStaffCheckbox) {
|
|
createStaffCheckbox.checked = false;
|
|
createStaffFields.classList.add('hidden');
|
|
}
|
|
}
|
|
|
|
function enableCreateStaff() {
|
|
if (staffSearchSection && createStaffCheckbox && createStaffCheckbox.checked) {
|
|
staffSearchSection.classList.add('hidden');
|
|
}
|
|
}
|
|
|
|
if (staffSearchInput) {
|
|
let debounceTimer;
|
|
|
|
staffSearchInput.addEventListener('input', function() {
|
|
clearTimeout(debounceTimer);
|
|
const query = this.value.trim();
|
|
|
|
if (query.length < 2) {
|
|
staffSearchResults.classList.remove('active');
|
|
return;
|
|
}
|
|
|
|
debounceTimer = setTimeout(() => {
|
|
fetch('/api/staffs/search/?q=' + encodeURIComponent(query))
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.length === 0) {
|
|
staffSearchResults.innerHTML = '<div class="px-4 py-3 text-sm text-slate">{% trans "No staff found" %}</div>';
|
|
} else {
|
|
staffSearchResults.innerHTML = data.map(s =>
|
|
`<div class="staff-search-item" onclick="selectStaff('${s.id}', '${(s.first_name + ' ' + s.last_name).replace(/'/g, "\\'")}', '${(s.employee_id || '').replace(/'/g, "\\'")}')">
|
|
<div class="font-semibold text-navy text-sm">${s.first_name} ${s.last_name}</div>
|
|
<div class="text-xs text-slate">${s.employee_id ? 'ID: ' + s.employee_id : ''}</div>
|
|
</div>`
|
|
).join('');
|
|
}
|
|
staffSearchResults.classList.add('active');
|
|
})
|
|
.catch(() => {
|
|
staffSearchResults.innerHTML = '<div class="px-4 py-3 text-sm text-red-500">{% trans "Search failed" %}</div>';
|
|
staffSearchResults.classList.add('active');
|
|
});
|
|
}, 300);
|
|
});
|
|
|
|
staffSearchInput.addEventListener('focus', function() {
|
|
if (this.value.trim().length >= 2 && staffSearchResults.innerHTML) {
|
|
staffSearchResults.classList.add('active');
|
|
}
|
|
});
|
|
|
|
document.addEventListener('click', function(e) {
|
|
if (!e.target.closest('.staff-search-container')) {
|
|
staffSearchResults.classList.remove('active');
|
|
}
|
|
});
|
|
}
|
|
|
|
// ===== Password Generation =====
|
|
window.generatePassword = function() {
|
|
const chars = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!@#$%^&*';
|
|
let password = '';
|
|
const array = new Uint8Array(16);
|
|
crypto.getRandomValues(array);
|
|
for (let i = 0; i < 16; i++) {
|
|
password += chars[array[i] % chars.length];
|
|
}
|
|
const pwField = document.getElementById('id_password');
|
|
const pwConfirmField = document.getElementById('id_password_confirm');
|
|
if (pwField) pwField.value = password;
|
|
if (pwConfirmField) pwConfirmField.value = password;
|
|
if (pwField) pwField.type = 'text';
|
|
if (pwConfirmField) pwConfirmField.type = 'text';
|
|
setTimeout(() => {
|
|
if (pwField) pwField.type = 'password';
|
|
if (pwConfirmField) pwConfirmField.type = 'password';
|
|
}, 2000);
|
|
};
|
|
|
|
window.copyPassword = function() {
|
|
const pwField = document.getElementById('id_password');
|
|
if (pwField && pwField.value) {
|
|
navigator.clipboard.writeText(pwField.value).then(() => {
|
|
alert('{% trans "Password copied to clipboard" %}');
|
|
});
|
|
}
|
|
};
|
|
|
|
// ===== Staff Selection =====
|
|
window.selectStaff = function(staffId, name, employeeId) {
|
|
fetch('/api/staffs/' + staffId + '/for-user-creation/')
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.error) {
|
|
alert(data.error);
|
|
return;
|
|
}
|
|
|
|
staffIdInput.value = staffId;
|
|
selectedStaffName.textContent = name + (employeeId ? ' (' + employeeId + ')' : '');
|
|
staffSearchInputWrap.classList.add('hidden');
|
|
selectedStaffChip.classList.remove('hidden');
|
|
|
|
disableCreateStaff();
|
|
|
|
// Auto-fill fields
|
|
const fields = {
|
|
'id_first_name': data.first_name,
|
|
'id_last_name': data.last_name,
|
|
'id_email': data.email,
|
|
'id_phone': data.phone,
|
|
'id_employee_id': data.employee_id,
|
|
};
|
|
|
|
Object.entries(fields).forEach(([fieldId, value]) => {
|
|
const field = document.getElementById(fieldId);
|
|
if (field && value) field.value = value;
|
|
});
|
|
|
|
// Set hospital and load departments
|
|
if (data.hospital && hospitalField) {
|
|
hospitalField.value = data.hospital;
|
|
loadDepartments(data.hospital, data.department);
|
|
}
|
|
|
|
lucide.createIcons();
|
|
})
|
|
.catch(error => {
|
|
console.error('Error fetching staff:', error);
|
|
});
|
|
};
|
|
|
|
window.clearStaffSelection = function() {
|
|
staffIdInput.value = '';
|
|
selectedStaffChip.classList.add('hidden');
|
|
staffSearchInputWrap.classList.remove('hidden');
|
|
staffSearchInput.value = '';
|
|
staffSearchResults.classList.remove('active');
|
|
if (createStaffCheckbox && staffSearchSection) {
|
|
staffSearchSection.classList.remove('hidden');
|
|
}
|
|
};
|
|
|
|
// ===== Form Validation =====
|
|
const userForm = document.getElementById('userForm');
|
|
if (userForm && createStaffCheckbox) {
|
|
userForm.addEventListener('submit', function(e) {
|
|
if (createStaffCheckbox.checked) {
|
|
var empId = document.getElementById('id_employee_id');
|
|
var jobTitle = document.getElementById('staff_job_title');
|
|
var staffType = document.getElementById('staff_type');
|
|
var missing = [];
|
|
|
|
if (!empId || !empId.value.trim()) missing.push('{% trans "Employee ID" %}');
|
|
if (!jobTitle || !jobTitle.value.trim()) missing.push('{% trans "Job Title" %}');
|
|
if (!staffType || !staffType.value) missing.push('{% trans "Staff Type" %}');
|
|
|
|
if (missing.length) {
|
|
e.preventDefault();
|
|
alert('{% trans "Please fill in the following required fields:" %} ' + missing.join(', '));
|
|
return false;
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
if (typeof lucide !== 'undefined') {
|
|
lucide.createIcons();
|
|
}
|
|
});
|
|
</script>
|
|
{% endblock %}
|