Simple Managment webapp [LLM]
This commit is contained in:
@@ -0,0 +1,148 @@
|
||||
import { Component, inject, signal, OnInit } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { Router } from '@angular/router';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { NzCardModule } from 'ng-zorro-antd/card';
|
||||
import { NzButtonModule } from 'ng-zorro-antd/button';
|
||||
import { NzIconModule } from 'ng-zorro-antd/icon';
|
||||
import { NzDescriptionsModule } from 'ng-zorro-antd/descriptions';
|
||||
import { NzTagModule } from 'ng-zorro-antd/tag';
|
||||
import { NzSpinModule } from 'ng-zorro-antd/spin';
|
||||
import { NzProgressModule } from 'ng-zorro-antd/progress';
|
||||
import { NzPopconfirmModule } from 'ng-zorro-antd/popconfirm';
|
||||
import { NzModalModule } from 'ng-zorro-antd/modal';
|
||||
import { NzFormModule } from 'ng-zorro-antd/form';
|
||||
import { NzInputModule } from 'ng-zorro-antd/input';
|
||||
import { NzDividerModule } from 'ng-zorro-antd/divider';
|
||||
import { ApiService } from '../../../core/services/api.service';
|
||||
import { AuthService } from '../../../core/services/auth.service';
|
||||
import { NotificationService } from '../../../core/services/notification.service';
|
||||
import { UserWithExtra } from '../../../core/models';
|
||||
import { RelativeTimePipe } from '../../../shared/pipes/relative-time.pipe';
|
||||
|
||||
@Component({
|
||||
selector: 'app-account-info',
|
||||
standalone: true,
|
||||
imports: [
|
||||
CommonModule,
|
||||
FormsModule,
|
||||
NzCardModule,
|
||||
NzButtonModule,
|
||||
NzIconModule,
|
||||
NzDescriptionsModule,
|
||||
NzTagModule,
|
||||
NzSpinModule,
|
||||
NzProgressModule,
|
||||
NzPopconfirmModule,
|
||||
NzModalModule,
|
||||
NzFormModule,
|
||||
NzInputModule,
|
||||
NzDividerModule,
|
||||
RelativeTimePipe,
|
||||
],
|
||||
templateUrl: './account-info.component.html',
|
||||
styleUrl: './account-info.component.scss'
|
||||
})
|
||||
export class AccountInfoComponent implements OnInit {
|
||||
private apiService = inject(ApiService);
|
||||
private authService = inject(AuthService);
|
||||
private notification = inject(NotificationService);
|
||||
private router = inject(Router);
|
||||
|
||||
user = signal<UserWithExtra | null>(null);
|
||||
loading = signal(true);
|
||||
deleting = signal(false);
|
||||
|
||||
// Edit username modal
|
||||
showEditModal = signal(false);
|
||||
editUsername = '';
|
||||
saving = signal(false);
|
||||
|
||||
ngOnInit(): void {
|
||||
this.loadUser();
|
||||
}
|
||||
|
||||
loadUser(): void {
|
||||
const userId = this.authService.getUserId();
|
||||
if (!userId) return;
|
||||
|
||||
this.loading.set(true);
|
||||
this.apiService.getUser(userId).subscribe({
|
||||
next: (user) => {
|
||||
this.user.set(user);
|
||||
this.loading.set(false);
|
||||
},
|
||||
error: () => {
|
||||
this.loading.set(false);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
getQuotaPercent(): number {
|
||||
const user = this.user();
|
||||
if (!user || user.quota_max === 0) return 0;
|
||||
return Math.round((user.quota_used / user.quota_max) * 100);
|
||||
}
|
||||
|
||||
getQuotaStatus(): 'success' | 'normal' | 'exception' {
|
||||
const percent = this.getQuotaPercent();
|
||||
if (percent >= 90) return 'exception';
|
||||
if (percent >= 70) return 'normal';
|
||||
return 'success';
|
||||
}
|
||||
|
||||
// Edit username
|
||||
openEditModal(): void {
|
||||
const user = this.user();
|
||||
this.editUsername = user?.username || '';
|
||||
this.showEditModal.set(true);
|
||||
}
|
||||
|
||||
closeEditModal(): void {
|
||||
this.showEditModal.set(false);
|
||||
}
|
||||
|
||||
saveUsername(): void {
|
||||
const userId = this.authService.getUserId();
|
||||
if (!userId) return;
|
||||
|
||||
this.saving.set(true);
|
||||
this.apiService.updateUser(userId, {
|
||||
username: this.editUsername || undefined
|
||||
}).subscribe({
|
||||
next: () => {
|
||||
this.notification.success('Username updated');
|
||||
this.closeEditModal();
|
||||
this.saving.set(false);
|
||||
this.loadUser();
|
||||
},
|
||||
error: () => {
|
||||
this.saving.set(false);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Logout
|
||||
logout(): void {
|
||||
this.authService.logout();
|
||||
this.router.navigate(['/login']);
|
||||
}
|
||||
|
||||
// Delete account
|
||||
deleteAccount(): void {
|
||||
const userId = this.authService.getUserId();
|
||||
if (!userId) return;
|
||||
|
||||
this.deleting.set(true);
|
||||
this.apiService.deleteUser(userId).subscribe({
|
||||
next: () => {
|
||||
this.notification.success('Account deleted');
|
||||
this.authService.logout();
|
||||
this.router.navigate(['/login']);
|
||||
},
|
||||
error: () => {
|
||||
this.deleting.set(false);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user