Skip to content

H
Hire-Guru
Commit 7c84e134 authored by Aravind RK's avatar Aravind RK
Browse files
Options

feat : CRUD for student

parent 09fd6813
Show whitespace changes
Inline Side-by-side
Showing with 1005 additions and 535 deletions
Frontend/src/app/pages/admin/users/users.css
View file @ 7c84e134
......@@ -104,23 +104,23 @@ color: var(--text-secondary);
.users-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
gap: 16px;
}
.user-card {
display: flex;
align-items: center;
gap: 16px;
padding: 20px;
gap: 12px;
padding: 16px 20px;
background: var(--bg-card);
border: 1px solid var(--border-color);
border-radius: 16px;
text-decoration: none;
transition: all 0.25s;
cursor: pointer;
overflow: hidden;
min-width: 0;
}
.user-card:hover {
......@@ -152,6 +152,8 @@ color: var(--text-primary);
align-items: center;
gap: 8px;
margin-bottom: 4px;
flex-wrap: nowrap;
overflow: hidden;
}
.user-card-info h4 {
......@@ -159,6 +161,9 @@ color: var(--text-primary);
font-size: 15px;
font-weight: 600;
margin: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.user-card-info p {
......@@ -200,15 +205,16 @@ color: var(--text-secondary);
background: transparent;
border: none;
border-radius: 8px;
width: 32px;
height: 32px;
width: 30px;
height: 30px;
min-width: 30px;
display: flex;
align-items: center;
justify-content: center;
color: var(--text-muted);
cursor: pointer;
transition: all 0.2s;
margin-left: 8px;
flex-shrink: 0;
}
.action-btn .material-symbols-rounded {
......@@ -221,13 +227,14 @@ color: var(--text-secondary);
}
.level-badge {
padding: 4px 12px;
padding: 3px 10px;
border-radius: 20px;
font-size: 11px;
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
flex-shrink: 0;
white-space: nowrap;
}
.level-badge[data-level="beginner"] {
......@@ -259,3 +266,99 @@ color: var(--text-secondary);
grid-template-columns: 1fr;
}
}
/* ─── Student Modal Overlay ─────────────────────────────────── */
.student-modal-overlay {
position: fixed;
inset: 0;
z-index: 1000;
background: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
animation: fadeInOverlay 0.2s ease;
}
@keyframes fadeInOverlay {
from { opacity: 0; }
to { opacity: 1; }
}
.student-modal-container {
background: var(--bg-card, #fff);
border: 1px solid var(--border-color, #e2e8f0);
border-radius: 20px;
width: 100%;
max-width: 480px;
box-shadow: 0 25px 60px rgba(0, 0, 0, 0.25);
animation: slideInModal 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
overflow: hidden;
}
@keyframes slideInModal {
from { transform: scale(0.92) translateY(12px); opacity: 0; }
to { transform: scale(1) translateY(0); opacity: 1; }
}
.student-modal-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 24px 28px 0;
}
.student-modal-header h2 {
font-size: 20px;
font-weight: 700;
color: var(--text-primary);
margin: 0;
}
.student-modal-close {
background: transparent;
border: none;
width: 36px;
height: 36px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
color: var(--text-secondary);
transition: all 0.2s;
}
.student-modal-close:hover {
background: var(--bg-hover, rgba(0,0,0,0.06));
color: var(--text-primary);
}
.student-modal-body {
padding: 24px 28px;
display: flex;
flex-direction: column;
gap: 16px;
}
.student-modal-footer {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 12px;
padding: 0 28px 24px;
}
.form-hint {
color: var(--text-secondary);
font-size: 12px;
margin-top: 4px;
display: block;
}
.text-primary:hover {
background: rgba(102, 126, 234, 0.1);
color: #667eea;
}
\ No newline at end of file
Frontend/src/app/pages/admin/users/users.html
View file @ 7c84e134
<div class="page-container animate-fade-in">
<div class="page-header" style="display: flex; align-items: center; gap: 16px;">
<div class="page-header" style="display: flex; align-items: center; justify-content: space-between;">
<div style="display: flex; align-items: center; gap: 16px;">
<button class="icon-btn" (click)="goBack()" style="background: var(--bg-card); border: 1px solid var(--border-color); padding: 8px; border-radius: 12px; cursor: pointer; color: var(--text-primary); transition: all 0.2s; display: flex; align-items: center; justify-content: center;" onmouseover="this.style.background='var(--bg-hover)'" onmouseout="this.style.background='var(--bg-card)'">
<span class="material-symbols-rounded">arrow_back</span>
</button>
......@@ -8,6 +9,10 @@
<p style="margin: 4px 0 0;" class="page-subtitle">View and manage registered students</p>
</div>
</div>
<button class="btn btn-primary" (click)="openCreateModal()">
<span class="material-symbols-rounded">person_add</span> Create Student
</button>
</div>
<div class="filter-tabs">
<button class="tab" [class.active]="showAll()" (click)="toggleFilter(true)">All Students</button>
......@@ -43,7 +48,10 @@
<div class="status-dot" [class.online]="user.isLoggedIn" title="Online Status"></div>
<button class="action-btn text-danger ml-auto" (click)="$event.preventDefault(); $event.stopPropagation(); deleteUser(user._id)" title="Delete Student">
<button class="action-btn text-primary ml-auto" style="margin-right: 8px;" (click)="$event.preventDefault(); $event.stopPropagation(); openEditModal(user)" title="Edit Student">
<span class="material-symbols-rounded">edit</span>
</button>
<button class="action-btn text-danger" (click)="$event.preventDefault(); $event.stopPropagation(); deleteUser(user._id)" title="Delete Student">
<span class="material-symbols-rounded">delete</span>
</button>
......@@ -52,4 +60,50 @@
}
</div>
}
</div>
<!-- ─── Create / Edit Student Modal ───────────────────────────── -->
@if (showUserModal()) {
<div class="student-modal-overlay" (click)="closeModal()">
<div class="student-modal-container" (click)="$event.stopPropagation()">
<div class="student-modal-header">
<h2>{{ isEditMode() ? 'Edit Student' : 'Create Student' }}</h2>
<button class="student-modal-close" (click)="closeModal()">
<span class="material-symbols-rounded">close</span>
</button>
</div>
<div class="student-modal-body">
<div class="form-group">
<label class="form-label">Full Name *</label>
<input class="form-input" [(ngModel)]="userForm.name" placeholder="Enter student's full name">
</div>
<div class="form-group">
<label class="form-label">Email Address *</label>
<input class="form-input" type="email" [(ngModel)]="userForm.email" placeholder="student@example.com">
</div>
<div class="form-group">
<label class="form-label">Password {{ isEditMode() ? '(Optional)' : '*' }}</label>
<input class="form-input" type="password" [(ngModel)]="userForm.password" [placeholder]="isEditMode() ? 'Leave blank to keep current password' : 'Enter initial password'">
@if (isEditMode()) {
<small class="form-hint">Change this only if the student forgot their password.</small>
}
</div>
</div>
<div class="student-modal-footer">
<button class="btn btn-outline" (click)="closeModal()">Cancel</button>
<button class="btn btn-primary" (click)="saveUser()" [disabled]="savingUser()">
@if (savingUser()) {
<div class="spinner spinner-sm"></div> Saving...
} @else {
<span class="material-symbols-rounded">save</span>
{{ isEditMode() ? 'Save Changes' : 'Create Student' }}
}
</button>
</div>
</div>
</div>
}
Frontend/src/app/pages/admin/users/users.ts
View file @ 7c84e134
......@@ -2,13 +2,14 @@ import { Component, OnInit, signal } from '@angular/core';
import { Location } from '@angular/common';
import { CommonModule } from '@angular/common';
import { RouterLink } from '@angular/router';
import { FormsModule } from '@angular/forms';
import { AuthService } from '../../../services/auth.service';
import { QuizService } from '../../../services/quiz.service';
@Component({
selector: 'app-admin-users',
standalone: true,
imports: [CommonModule, RouterLink],
imports: [CommonModule, RouterLink, FormsModule],
templateUrl: './users.html',
styleUrl: './users.css'
})
......@@ -17,6 +18,18 @@ export class AdminUsersComponent implements OnInit {
loading = signal<boolean>(true);
showAll = signal<boolean>(true);
// Modal State
showUserModal = signal<boolean>(false);
isEditMode = signal<boolean>(false);
savingUser = signal<boolean>(false);
editingUserId = signal<string | null>(null);
userForm = {
name: '',
email: '',
password: ''
};
constructor(public authService: AuthService, private quizService: QuizService, private location: Location) {}
goBack(): void {
......@@ -69,6 +82,72 @@ export class AdminUsersComponent implements OnInit {
}
}
openCreateModal(): void {
this.isEditMode.set(false);
this.editingUserId.set(null);
this.userForm = { name: '', email: '', password: '' };
this.showUserModal.set(true);
}
openEditModal(user: any): void {
this.isEditMode.set(true);
this.editingUserId.set(user._id);
this.userForm = { name: user.name, email: user.email, password: '' };
this.showUserModal.set(true);
}
closeModal(): void {
this.showUserModal.set(false);
}
saveUser(): void {
if (!this.userForm.name || !this.userForm.email) {
alert('Name and email are required');
return;
}
if (!this.isEditMode() && !this.userForm.password) {
alert('Password is required when creating a new student');
return;
}
this.savingUser.set(true);
if (this.isEditMode() && this.editingUserId()) {
// Edit User
const payload: any = { name: this.userForm.name, email: this.userForm.email };
if (this.userForm.password) {
payload.password = this.userForm.password;
}
this.quizService.editUser(this.editingUserId()!, payload).subscribe({
next: () => {
this.savingUser.set(false);
this.closeModal();
this.loadUsers();
},
error: (err) => {
console.error('Failed to update user', err);
alert(err.error?.message || 'Failed to update user');
this.savingUser.set(false);
}
});
} else {
// Create User
this.authService.register(this.userForm.name, this.userForm.email, this.userForm.password).subscribe({
next: () => {
this.savingUser.set(false);
this.closeModal();
this.loadUsers();
},
error: (err) => {
console.error('Failed to create user', err);
alert(err.error?.message || 'Failed to create user');
this.savingUser.set(false);
}
});
}
}
logout(): void {
this.authService.logout();
}
......
Frontend/src/app/pages/hr/users/users.css
View file @ 7c84e134
......@@ -103,23 +103,23 @@ color: var(--text-secondary);
.users-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
gap: 16px;
}
.user-card {
display: flex;
align-items: center;
gap: 16px;
padding: 20px;
gap: 12px;
padding: 16px 20px;
background: var(--bg-card);
border: 1px solid var(--border-color);
border-radius: 16px;
text-decoration: none;
transition: all 0.25s;
cursor: pointer;
overflow: hidden;
min-width: 0;
}
.user-card:hover {
......@@ -151,6 +151,8 @@ color: var(--text-primary);
align-items: center;
gap: 8px;
margin-bottom: 4px;
flex-wrap: nowrap;
overflow: hidden;
}
.user-card-info h4 {
......@@ -158,6 +160,9 @@ color: var(--text-primary);
font-size: 15px;
font-weight: 600;
margin: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.user-card-info p {
......@@ -199,15 +204,16 @@ color: var(--text-secondary);
background: transparent;
border: none;
border-radius: 8px;
width: 32px;
height: 32px;
width: 30px;
height: 30px;
min-width: 30px;
display: flex;
align-items: center;
justify-content: center;
color: var(--text-muted);
cursor: pointer;
transition: all 0.2s;
margin-left: 8px;
flex-shrink: 0;
}
.action-btn .material-symbols-rounded {
......@@ -219,14 +225,20 @@ color: var(--text-secondary);
color: #ef4444;
}
.text-primary:hover {
background: rgba(102, 126, 234, 0.1);
color: #667eea;
}
.level-badge {
padding: 4px 12px;
padding: 3px 10px;
border-radius: 20px;
font-size: 11px;
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
flex-shrink: 0;
white-space: nowrap;
}
.level-badge[data-level="beginner"] {
......@@ -258,3 +270,94 @@ color: var(--text-secondary);
grid-template-columns: 1fr;
}
}
/* ─── Student Modal Overlay ─────────────────────────────────── */
.student-modal-overlay {
position: fixed;
inset: 0;
z-index: 1000;
background: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
animation: fadeInOverlay 0.2s ease;
}
@keyframes fadeInOverlay {
from { opacity: 0; }
to { opacity: 1; }
}
.student-modal-container {
background: var(--bg-card, #fff);
border: 1px solid var(--border-color, #e2e8f0);
border-radius: 20px;
width: 100%;
max-width: 480px;
box-shadow: 0 25px 60px rgba(0, 0, 0, 0.25);
animation: slideInModal 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
overflow: hidden;
}
@keyframes slideInModal {
from { transform: scale(0.92) translateY(12px); opacity: 0; }
to { transform: scale(1) translateY(0); opacity: 1; }
}
.student-modal-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 24px 28px 0;
}
.student-modal-header h2 {
font-size: 20px;
font-weight: 700;
color: var(--text-primary);
margin: 0;
}
.student-modal-close {
background: transparent;
border: none;
width: 36px;
height: 36px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
color: var(--text-secondary);
transition: all 0.2s;
}
.student-modal-close:hover {
background: var(--bg-hover, rgba(0,0,0,0.06));
color: var(--text-primary);
}
.student-modal-body {
padding: 24px 28px;
display: flex;
flex-direction: column;
gap: 16px;
}
.student-modal-footer {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 12px;
padding: 0 28px 24px;
}
.form-hint {
color: var(--text-secondary);
font-size: 12px;
margin-top: 4px;
display: block;
}
\ No newline at end of file
Frontend/src/app/pages/hr/users/users.html
View file @ 7c84e134
<div class="page-container animate-fade-in">
<div class="page-header">
<div class="page-header" style="display: flex; align-items: center; justify-content: space-between;">
<div>
<h1>Student Users</h1>
<p>View and manage registered students</p>
<p class="page-subtitle">View and manage registered students</p>
</div>
<button class="btn btn-primary" (click)="openCreateModal()">
<span class="material-symbols-rounded">person_add</span> Create Student
</button>
</div>
<div class="filter-tabs">
......@@ -38,7 +43,10 @@
<div class="status-dot" [class.online]="user.isLoggedIn" title="Online Status"></div>
<button class="action-btn text-danger ml-auto" (click)="$event.preventDefault(); $event.stopPropagation(); deleteUser(user._id)" title="Delete Student">
<button class="action-btn text-primary ml-auto" style="margin-right: 8px;" (click)="$event.preventDefault(); $event.stopPropagation(); openEditModal(user)" title="Edit Student">
<span class="material-symbols-rounded">edit</span>
</button>
<button class="action-btn text-danger" (click)="$event.preventDefault(); $event.stopPropagation(); deleteUser(user._id)" title="Delete Student">
<span class="material-symbols-rounded">delete</span>
</button>
......@@ -48,3 +56,47 @@
</div>
}
</div>
<!-- ─── Create / Edit Student Modal ───────────────────────────── -->
@if (showUserModal()) {
<div class="student-modal-overlay" (click)="closeModal()">
<div class="student-modal-container" (click)="$event.stopPropagation()">
<div class="student-modal-header">
<h2>{{ isEditMode() ? 'Edit Student' : 'Create Student' }}</h2>
<button class="student-modal-close" (click)="closeModal()">
<span class="material-symbols-rounded">close</span>
</button>
</div>
<div class="student-modal-body">
<div class="form-group">
<label class="form-label">Full Name *</label>
<input class="form-input" [(ngModel)]="userForm.name" placeholder="Enter student's full name">
</div>
<div class="form-group">
<label class="form-label">Email Address *</label>
<input class="form-input" type="email" [(ngModel)]="userForm.email" placeholder="student@example.com">
</div>
<div class="form-group">
<label class="form-label">Password {{ isEditMode() ? '(Optional)' : '*' }}</label>
<input class="form-input" type="password" [(ngModel)]="userForm.password" [placeholder]="isEditMode() ? 'Leave blank to keep current password' : 'Enter initial password'">
@if (isEditMode()) {
<small class="form-hint">Change this only if the student forgot their password.</small>
}
</div>
</div>
<div class="student-modal-footer">
<button class="btn btn-outline" (click)="closeModal()">Cancel</button>
<button class="btn btn-primary" (click)="saveUser()" [disabled]="savingUser()">
@if (savingUser()) {
<div class="spinner spinner-sm"></div> Saving...
} @else {
<span class="material-symbols-rounded">save</span>
{{ isEditMode() ? 'Save Changes' : 'Create Student' }}
}
</button>
</div>
</div>
</div>
}
Frontend/src/app/pages/hr/users/users.ts
View file @ 7c84e134
import { Component, OnInit, signal } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterLink } from '@angular/router';
import { FormsModule } from '@angular/forms';
import { AuthService } from '../../../services/auth.service';
import { QuizService } from '../../../services/quiz.service';
@Component({
selector: 'app-users',
imports: [CommonModule, RouterLink],
imports: [CommonModule, RouterLink, FormsModule],
templateUrl: './users.html',
styleUrl: './users.css',
})
......@@ -15,6 +16,18 @@ export class Users {
loading = signal<boolean>(true);
showAll = signal<boolean>(true);
// Modal State
showUserModal = signal<boolean>(false);
isEditMode = signal<boolean>(false);
savingUser = signal<boolean>(false);
editingUserId = signal<string | null>(null);
userForm = {
name: '',
email: '',
password: ''
};
constructor(public authService: AuthService, private quizService: QuizService) {}
ngOnInit(): void {
......@@ -63,6 +76,72 @@ export class Users {
}
}
openCreateModal(): void {
this.isEditMode.set(false);
this.editingUserId.set(null);
this.userForm = { name: '', email: '', password: '' };
this.showUserModal.set(true);
}
openEditModal(user: any): void {
this.isEditMode.set(true);
this.editingUserId.set(user._id);
this.userForm = { name: user.name, email: user.email, password: '' };
this.showUserModal.set(true);
}
closeModal(): void {
this.showUserModal.set(false);
}
saveUser(): void {
if (!this.userForm.name || !this.userForm.email) {
alert('Name and email are required');
return;
}
if (!this.isEditMode() && !this.userForm.password) {
alert('Password is required when creating a new student');
return;
}
this.savingUser.set(true);
if (this.isEditMode() && this.editingUserId()) {
// Edit User
const payload: any = { name: this.userForm.name, email: this.userForm.email };
if (this.userForm.password) {
payload.password = this.userForm.password;
}
this.quizService.editUser(this.editingUserId()!, payload).subscribe({
next: () => {
this.savingUser.set(false);
this.closeModal();
this.loadUsers();
},
error: (err) => {
console.error('Failed to update user', err);
alert(err.error?.message || 'Failed to update user');
this.savingUser.set(false);
}
});
} else {
// Create User
this.authService.register(this.userForm.name, this.userForm.email, this.userForm.password).subscribe({
next: () => {
this.savingUser.set(false);
this.closeModal();
this.loadUsers();
},
error: (err) => {
console.error('Failed to create user', err);
alert(err.error?.message || 'Failed to create user');
this.savingUser.set(false);
}
});
}
}
logout(): void {
this.authService.logout();
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment