Update with new components
This commit is contained in:
@@ -0,0 +1,248 @@
|
||||
<app-menu></app-menu>
|
||||
<div class="container mt-4">
|
||||
<!-- Header Actions -->
|
||||
<div class="d-flex justify-content-between mb-3">
|
||||
<div>
|
||||
<button *ngIf="!showJobForm && !showApplications" class="btn btn-primary" (click)="showJobFormModal()">
|
||||
<i class="fa fa-plus"></i> New Job
|
||||
</button>
|
||||
<button *ngIf="showJobForm" class="btn btn-secondary" (click)="hideJobForm()">
|
||||
<i class="fa fa-arrow-left"></i> Back to Jobs
|
||||
</button>
|
||||
<button *ngIf="showApplications" class="btn btn-secondary" (click)="hideApplications()">
|
||||
<i class="fa fa-arrow-left"></i> Back to Jobs
|
||||
</button>
|
||||
</div>
|
||||
<div *ngIf="!showJobForm && !showApplications">
|
||||
<span class="badge badge-info">Total Jobs: {{ jobs.length }}</span>
|
||||
<span class="badge badge-warning ml-2">Total Applications: {{ applications.length }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Job Form -->
|
||||
<div *ngIf="showJobForm" class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="mb-0">{{ editing ? 'Edit Job' : 'Create New Job' }}</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<form [formGroup]="jobForm" (ngSubmit)="saveJob()">
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="form-group">
|
||||
<label for="title" class="text-primary">Job Title *</label>
|
||||
<input type="text" id="title" class="form-control" formControlName="title" placeholder="Enter job title">
|
||||
<div *ngIf="jobForm.get('title')?.invalid && jobForm.get('title')?.touched" class="text-danger">
|
||||
Job title is required.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="form-group">
|
||||
<label for="department" class="text-primary">Department *</label>
|
||||
<input type="text" id="department" class="form-control" formControlName="department" placeholder="Enter department">
|
||||
<div *ngIf="jobForm.get('department')?.invalid && jobForm.get('department')?.touched" class="text-danger">
|
||||
Department is required.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="form-group">
|
||||
<label for="location" class="text-primary">Location *</label>
|
||||
<input type="text" id="location" class="form-control" formControlName="location" placeholder="Enter location">
|
||||
<div *ngIf="jobForm.get('location')?.invalid && jobForm.get('location')?.touched" class="text-danger">
|
||||
Location is required.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="form-group">
|
||||
<label for="type" class="text-primary">Job Type *</label>
|
||||
<select id="type" class="form-control" formControlName="type">
|
||||
<option value="">Select job type</option>
|
||||
<option value="Full-time">Full-time</option>
|
||||
<option value="Part-time">Part-time</option>
|
||||
<option value="Contract">Contract</option>
|
||||
<option value="Rotational">Rotational</option>
|
||||
<option value="Observership">Observership</option>
|
||||
</select>
|
||||
<div *ngIf="jobForm.get('type')?.invalid && jobForm.get('type')?.touched" class="text-danger">
|
||||
Job type is required.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="form-group">
|
||||
<label for="experience" class="text-primary">Experience Required *</label>
|
||||
<input type="text" id="experience" class="form-control" formControlName="experience" placeholder="e.g., MBBS + MS preferred">
|
||||
<div *ngIf="jobForm.get('experience')?.invalid && jobForm.get('experience')?.touched" class="text-danger">
|
||||
Experience requirement is required.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="form-group">
|
||||
<label for="salary" class="text-primary">Salary *</label>
|
||||
<input type="text" id="salary" class="form-control" formControlName="salary" placeholder="e.g., As per hospital norms">
|
||||
<div *ngIf="jobForm.get('salary')?.invalid && jobForm.get('salary')?.touched" class="text-danger">
|
||||
Salary information is required.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="description" class="text-primary">Job Description *</label>
|
||||
<textarea id="description" class="form-control" formControlName="description" rows="4" placeholder="Enter job description"></textarea>
|
||||
<div *ngIf="jobForm.get('description')?.invalid && jobForm.get('description')?.touched" class="text-danger">
|
||||
Job description is required.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="requirements" class="text-primary">Requirements</label>
|
||||
<textarea id="requirements" class="form-control" formControlName="requirements" rows="3" placeholder="Enter requirements separated by commas"></textarea>
|
||||
<small class="form-text text-muted">Separate multiple requirements with commas</small>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="responsibilities" class="text-primary">Responsibilities</label>
|
||||
<textarea id="responsibilities" class="form-control" formControlName="responsibilities" rows="3" placeholder="Enter responsibilities separated by commas"></textarea>
|
||||
<small class="form-text text-muted">Separate multiple responsibilities with commas</small>
|
||||
</div>
|
||||
|
||||
<div class="form-check mb-3">
|
||||
<input type="checkbox" class="form-check-input" id="isActive" formControlName="isActive">
|
||||
<label class="form-check-label text-primary" for="isActive">Active (visible to applicants)</label>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<button type="submit" class="btn btn-primary" [disabled]="jobForm.invalid">
|
||||
<i class="fa fa-save"></i> {{ editing ? 'Update Job' : 'Create Job' }}
|
||||
</button>
|
||||
<button type="button" class="btn btn-secondary ml-2" (click)="resetJobForm()">
|
||||
<i class="fa fa-times"></i> Cancel
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Applications View -->
|
||||
<div *ngIf="showApplications && selectedJobForApplications" class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="mb-0">Applications for: {{ selectedJobForApplications.title }}</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div *ngIf="applications.length > 0">
|
||||
<table class="table table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Applicant</th>
|
||||
<th>Email</th>
|
||||
<th>Phone</th>
|
||||
<th>Experience</th>
|
||||
<th>Status</th>
|
||||
<th>Applied Date</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr *ngFor="let application of applications">
|
||||
<td>{{ application.fullName }}</td>
|
||||
<td>{{ application.email }}</td>
|
||||
<td>{{ application.phone }}</td>
|
||||
<td>{{ application.experience }}</td>
|
||||
<td>
|
||||
<span class="badge" [ngClass]="getStatusBadgeClass(application.status || 'pending')">
|
||||
{{ application.status || 'PENDING' }}
|
||||
</span>
|
||||
</td>
|
||||
<td>{{ application.createdDate | date:'short' }}</td>
|
||||
<td>
|
||||
<div class="btn-group" dropdown>
|
||||
<button type="button" class="btn btn-sm btn-outline-primary dropdown-toggle" data-toggle="dropdown">
|
||||
Status
|
||||
</button>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" (click)="updateApplicationStatus(application, 'PENDING')">Pending</a>
|
||||
<a class="dropdown-item" (click)="updateApplicationStatus(application, 'REVIEWED')">Reviewed</a>
|
||||
<a class="dropdown-item" (click)="updateApplicationStatus(application, 'SHORTLISTED')">Shortlisted</a>
|
||||
<a class="dropdown-item" (click)="updateApplicationStatus(application, 'INTERVIEWED')">Interviewed</a>
|
||||
<a class="dropdown-item" (click)="updateApplicationStatus(application, 'HIRED')">Hired</a>
|
||||
<a class="dropdown-item" (click)="updateApplicationStatus(application, 'REJECTED')">Rejected</a>
|
||||
</div>
|
||||
</div>
|
||||
<button class="btn btn-sm btn-danger ml-1" (click)="deleteApplication(application)">
|
||||
<i class="fa fa-trash"></i>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div *ngIf="applications.length === 0" class="alert alert-info">
|
||||
No applications found for this job.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Jobs List -->
|
||||
<div *ngIf="!showJobForm && !showApplications">
|
||||
<div *ngIf="jobs.length > 0">
|
||||
<table class="table table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Title</th>
|
||||
<th>Department</th>
|
||||
<th>Location</th>
|
||||
<th>Type</th>
|
||||
<th>Status</th>
|
||||
<th>Applications</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr *ngFor="let job of jobs">
|
||||
<td>
|
||||
<strong>{{ job.title }}</strong>
|
||||
<br>
|
||||
<small class="text-muted">{{ job.experience }}</small>
|
||||
</td>
|
||||
<td>{{ job.department }}</td>
|
||||
<td>{{ job.location }}</td>
|
||||
<td>
|
||||
<span class="badge badge-secondary">{{ job.type }}</span>
|
||||
</td>
|
||||
<td>
|
||||
<span *ngIf="job.isActive" class="badge badge-success">Active</span>
|
||||
<span *ngIf="!job.isActive" class="badge badge-danger">Inactive</span>
|
||||
</td>
|
||||
<td>
|
||||
<button class="btn btn-sm btn-info" (click)="viewApplications(job)">
|
||||
View Applications
|
||||
<span class="badge badge-light ml-1">{{ getApplicationCount(job.id) }}</span>
|
||||
</button>
|
||||
</td>
|
||||
<td>
|
||||
<button class="btn btn-info btn-sm mr-2" (click)="editJob(job)">
|
||||
<i class="fa fa-edit"></i> Edit
|
||||
</button>
|
||||
<button class="btn btn-danger btn-sm" (click)="deleteJob(job)">
|
||||
<i class="fa fa-trash"></i> Delete
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div *ngIf="jobs.length === 0" class="alert alert-info">
|
||||
No jobs available. Please create a new job.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
Reference in New Issue
Block a user