add user frontend components
This commit is contained in:
parent
635975207f
commit
e050bf5def
@ -17,8 +17,53 @@ import { EventFormComponent } from './features/events/components/event-form/even
|
||||
import { EventDetailsComponent } from './features/events/components/event-details/event-details.component';
|
||||
import { EventTableComponent } from './features/events/components/event-table/event-table.component';
|
||||
import { EventListComponent } from './features/events/components/event-list/event-list.component';
|
||||
import { UserFormComponent } from './features/user/components/user-form/user-form.component';
|
||||
import { UserDetailsComponent } from './features/user/components/user-details/user-details.component';
|
||||
import { UserTableComponent } from './features/user/components/user-table/user-table.component';
|
||||
import { UserListComponent } from './features/user/components/user-list/user-list.component';
|
||||
|
||||
export const routes: Routes = [
|
||||
{
|
||||
path: 'user/new',
|
||||
component: UserFormComponent,
|
||||
canActivate: [AuthGuard],
|
||||
data: {
|
||||
roles: ['admin'],
|
||||
},
|
||||
},
|
||||
{
|
||||
path: 'user',
|
||||
component: UserListComponent,
|
||||
canActivate: [AuthGuard],
|
||||
data: {
|
||||
roles: ['admin'],
|
||||
},
|
||||
},
|
||||
{
|
||||
path: 'user/table',
|
||||
component: UserTableComponent,
|
||||
canActivate: [AuthGuard],
|
||||
data: {
|
||||
roles: ['admin'],
|
||||
},
|
||||
},
|
||||
{
|
||||
path: 'user/:id',
|
||||
component: UserDetailsComponent,
|
||||
canActivate: [AuthGuard],
|
||||
data: {
|
||||
roles: ['admin'],
|
||||
},
|
||||
},
|
||||
{
|
||||
path: 'user/:id/edit',
|
||||
component: UserFormComponent,
|
||||
canActivate: [AuthGuard],
|
||||
data: {
|
||||
roles: ['admin'],
|
||||
},
|
||||
},
|
||||
|
||||
{
|
||||
path: 'events/new',
|
||||
component: EventFormComponent,
|
||||
|
||||
@ -35,6 +35,14 @@ export class App {
|
||||
svgIcon: `<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="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 0 1 2.25-2.25h13.5A2.25 2.25 0 0 1 21 7.5v11.25m-18 0A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75m-18 0v-7.5A2.25 2.25 0 0 1 5.25 9h13.5A2.25 2.25 0 0 1 21 11.25v7.5" />
|
||||
</svg>
|
||||
`
|
||||
},
|
||||
{
|
||||
menuText: 'Felhasználók',
|
||||
targetUrl: '/user/table',
|
||||
svgIcon: `<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 19.128a9.38 9.38 0 0 0 2.625.372 9.337 9.337 0 0 0 4.121-.952 4.125 4.125 0 0 0-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 0 1 8.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0 1 11.964-3.07M12 6.375a3.375 3.375 0 1 1-6.75 0 3.375 3.375 0 0 1 6.75 0Zm8.25 2.25a2.625 2.625 0 1 1-5.25 0 2.625 2.625 0 0 1 5.25 0Z" />
|
||||
</svg>
|
||||
`
|
||||
}
|
||||
|
||||
|
||||
@ -0,0 +1,46 @@
|
||||
<!-- dvbooking-cli/src/templates/angular/details.component.html.tpl -->
|
||||
|
||||
<!-- Generated by the CLI -->
|
||||
<div class="p-4 md:p-8">
|
||||
<ng-container *ngIf="user$ | async as user; else loading">
|
||||
<div class="card bg-base-100 shadow-xl max-w-2xl mx-auto">
|
||||
<div class="card-body">
|
||||
<h2 class="card-title text-3xl">User Details</h2>
|
||||
|
||||
<div class="overflow-x-auto mt-4">
|
||||
<table class="table w-full">
|
||||
<tbody>
|
||||
<tr>
|
||||
<th>id</th>
|
||||
<td>{{ user.id }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>username</th>
|
||||
<td>{{ user.username }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>email</th>
|
||||
<td>{{ user.email }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>password</th>
|
||||
<td>{{ user.password }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="card-actions justify-end mt-6">
|
||||
<a routerLink="/user" class="btn btn-secondary">Back to List</a>
|
||||
<a routerLink="/user/{{ user.id }}/edit" class="btn btn-primary">Edit</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ng-container>
|
||||
|
||||
<ng-template #loading>
|
||||
<div class="text-center p-8">
|
||||
<span class="loading loading-spinner loading-lg"></span>
|
||||
</div>
|
||||
</ng-template>
|
||||
</div>
|
||||
@ -0,0 +1,34 @@
|
||||
// dvbooking-cli/src/templates/angular/details.component.ts.tpl
|
||||
|
||||
// Generated by the CLI
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { ActivatedRoute, RouterModule } from '@angular/router';
|
||||
import { Observable } from 'rxjs';
|
||||
import { switchMap } from 'rxjs/operators';
|
||||
import { User } from '../../models/user.model';
|
||||
import { UserService } from '../../services/user.service';
|
||||
|
||||
@Component({
|
||||
selector: 'app-user-details',
|
||||
templateUrl: './user-details.component.html',
|
||||
standalone: true,
|
||||
imports: [CommonModule, RouterModule],
|
||||
})
|
||||
export class UserDetailsComponent implements OnInit {
|
||||
user$!: Observable<User>;
|
||||
|
||||
constructor(
|
||||
private route: ActivatedRoute,
|
||||
private userService: UserService
|
||||
) {}
|
||||
|
||||
ngOnInit(): void {
|
||||
this.user$ = this.route.params.pipe(
|
||||
switchMap(params => {
|
||||
const id = params['id'];
|
||||
return this.userService.findOne(id);
|
||||
})
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,18 @@
|
||||
<!-- dvbooking-cli/src/templates/angular/filter.component.html.tpl -->
|
||||
<!-- Generated by the CLI -->
|
||||
<form [formGroup]="filterForm" class="p-4 bg-base-200 rounded-lg shadow">
|
||||
<div class="grid grid-cols-1 md:grid-cols-4 gap-4 items-end">
|
||||
<div class="form-control"><label class="label"><span class="label-text">username</span></label>
|
||||
<input type="text" formControlName="username" class="input input-bordered w-full" placeholder="Filter by username" /></div>
|
||||
|
||||
<div class="form-control"><label class="label"><span class="label-text">email</span></label>
|
||||
<input type="text" formControlName="email" class="input input-bordered w-full" placeholder="Filter by email" /></div>
|
||||
|
||||
<div class="form-control"><label class="label"><span class="label-text">password</span></label>
|
||||
<input type="text" formControlName="password" class="input input-bordered w-full" placeholder="Filter by password" /></div>
|
||||
|
||||
<div class="form-control">
|
||||
<button type="button" (click)="reset()" class="btn btn-secondary">Reset</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
@ -0,0 +1,40 @@
|
||||
// dvbooking-cli/src/templates/angular/filter.component.ts.tpl
|
||||
|
||||
// Generated by the CLI
|
||||
import { Component, EventEmitter, Output } from '@angular/core';
|
||||
import { FormBuilder, FormGroup, ReactiveFormsModule } from '@angular/forms';
|
||||
import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
|
||||
|
||||
@Component({
|
||||
selector: 'app-user-filter',
|
||||
templateUrl: './user-filter.component.html',
|
||||
standalone: true,
|
||||
imports: [ReactiveFormsModule]
|
||||
})
|
||||
export class UserFilterComponent {
|
||||
@Output() filterChanged = new EventEmitter<any>();
|
||||
filterForm: FormGroup;
|
||||
|
||||
constructor(private fb: FormBuilder) {
|
||||
this.filterForm = this.fb.group({
|
||||
username: [''],
|
||||
email: [''],
|
||||
password: [''],
|
||||
hashedRefreshToken: ['']
|
||||
});
|
||||
|
||||
this.filterForm.valueChanges.pipe(
|
||||
debounceTime(300),
|
||||
distinctUntilChanged()
|
||||
).subscribe(values => {
|
||||
const cleanFilter = Object.fromEntries(
|
||||
Object.entries(values).filter(([_, v]) => v != null && v !== '')
|
||||
);
|
||||
this.filterChanged.emit(cleanFilter);
|
||||
});
|
||||
}
|
||||
|
||||
reset() {
|
||||
this.filterForm.reset();
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,34 @@
|
||||
<!-- dvbooking-cli/src/templates/angular/form.component.html.tpl -->
|
||||
|
||||
<!-- Generated by the CLI -->
|
||||
<div class="p-4 md:p-8">
|
||||
<div class="card bg-base-100 shadow-xl max-w-2xl mx-auto">
|
||||
<div class="card-body">
|
||||
<h2 class="card-title text-3xl">
|
||||
{{ isEditMode ? 'Edit' : 'Create' }} User
|
||||
</h2>
|
||||
|
||||
<form [formGroup]="form" (ngSubmit)="onSubmit()" class="space-y-4 mt-4">
|
||||
|
||||
<div class="form-control"><label class="label"><span class="label-text">username</span></label>
|
||||
<input type="text" formControlName="username" class="input input-bordered w-full" /></div>
|
||||
|
||||
<div class="form-control"><label class="label"><span class="label-text">email</span></label>
|
||||
<input type="text" formControlName="email" class="input input-bordered w-full" /></div>
|
||||
|
||||
<div class="form-control"><label class="label"><span class="label-text">password</span></label>
|
||||
<input type="text" formControlName="password" class="input input-bordered w-full" /></div>
|
||||
|
||||
<div class="form-control"><label class="label"><span class="label-text">hashedRefreshToken</span></label>
|
||||
<input type="text" formControlName="hashedRefreshToken" class="input input-bordered w-full" /></div>
|
||||
|
||||
<div class="card-actions justify-end mt-6">
|
||||
<a routerLink="/user" class="btn btn-ghost">Cancel</a>
|
||||
<button type="submit" class="btn btn-primary" [disabled]="form.invalid">
|
||||
{{ isEditMode ? 'Update' : 'Create' }}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,88 @@
|
||||
// dvbooking-cli/src/templates/angular/form.component.ts.tpl
|
||||
|
||||
// Generated by the CLI
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { FormBuilder, FormGroup, Validators, ReactiveFormsModule } from '@angular/forms';
|
||||
import { ActivatedRoute, Router, RouterModule } from '@angular/router';
|
||||
import { Observable, of } from 'rxjs';
|
||||
import { switchMap, tap } from 'rxjs/operators';
|
||||
import { User } from '../../models/user.model';
|
||||
import { UserService } from '../../services/user.service';
|
||||
|
||||
@Component({
|
||||
selector: 'app-user-form',
|
||||
templateUrl: './user-form.component.html',
|
||||
standalone: true,
|
||||
imports: [CommonModule, ReactiveFormsModule, RouterModule],
|
||||
})
|
||||
export class UserFormComponent implements OnInit {
|
||||
form: FormGroup;
|
||||
isEditMode = false;
|
||||
id: number | null = null;
|
||||
|
||||
private numericFields = [];
|
||||
|
||||
constructor(
|
||||
private fb: FormBuilder,
|
||||
private route: ActivatedRoute,
|
||||
private router: Router,
|
||||
private userService: UserService
|
||||
) {
|
||||
this.form = this.fb.group({
|
||||
username: [null],
|
||||
email: [null],
|
||||
password: [null],
|
||||
hashedRefreshToken: [null]
|
||||
});
|
||||
}
|
||||
|
||||
ngOnInit(): void {
|
||||
this.route.params.pipe(
|
||||
tap(params => {
|
||||
if (params['id']) {
|
||||
this.isEditMode = true;
|
||||
this.id = +params['id'];
|
||||
}
|
||||
}),
|
||||
switchMap(() => {
|
||||
if (this.isEditMode && this.id) {
|
||||
return this.userService.findOne(this.id);
|
||||
}
|
||||
return of(null);
|
||||
})
|
||||
).subscribe(user => {
|
||||
if (user) {
|
||||
this.form.patchValue(user);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
onSubmit(): void {
|
||||
if (this.form.invalid) {
|
||||
this.form.markAllAsTouched();
|
||||
return;
|
||||
}
|
||||
|
||||
const payload = { ...this.form.value };
|
||||
|
||||
for (const field of this.numericFields) {
|
||||
if (payload[field] != null && payload[field] !== '') {
|
||||
payload[field] = parseFloat(payload[field]);
|
||||
}
|
||||
}
|
||||
|
||||
let action$: Observable<User>;
|
||||
|
||||
if (this.isEditMode && this.id) {
|
||||
action$ = this.userService.update(this.id, payload);
|
||||
} else {
|
||||
action$ = this.userService.create(payload);
|
||||
}
|
||||
|
||||
action$.subscribe({
|
||||
next: () => this.router.navigate(['/user']),
|
||||
error: (err) => console.error('Failed to save user', err)
|
||||
});
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,62 @@
|
||||
<!-- dvbooking-cli/src/templates/angular/list.component.html.tpl -->
|
||||
|
||||
<!-- Generated by the CLI -->
|
||||
<div class="p-4 md:p-8 space-y-6">
|
||||
<div class="flex justify-between items-center">
|
||||
<h1 class="text-3xl font-bold">Users</h1>
|
||||
<a routerLink="/user/new" class="btn btn-primary">Create New</a>
|
||||
</div>
|
||||
|
||||
<app-user-filter (filterChanged)="onFilterChanged($event)"></app-user-filter>
|
||||
|
||||
<ng-container *ngIf="paginatedResponse$ | async as response; else loading">
|
||||
<div class="overflow-x-auto bg-base-100 rounded-lg shadow">
|
||||
<table class="table w-full">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>id</th>
|
||||
<th>username</th>
|
||||
<th>email</th>
|
||||
<th class="text-right">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr *ngFor="let item of response.data" class="hover">
|
||||
<td>{{ item.id }}</td>
|
||||
<td>{{ item.username }}</td>
|
||||
<td>{{ item.email }}</td>
|
||||
<td class="text-right space-x-2">
|
||||
<a [routerLink]="['/user', item.id]" class="btn btn-sm btn-ghost">View</a>
|
||||
<a [routerLink]="['/user', item.id, 'edit']" class="btn btn-sm btn-ghost">Edit</a>
|
||||
<button (click)="deleteItem(item.id)" class="btn btn-sm btn-error btn-ghost">Delete</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr *ngIf="response.data.length === 0">
|
||||
<td colspan="6" class="text-center">No user found.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- Pagination Controls -->
|
||||
<div *ngIf="response.meta.totalPages > 1" class="flex justify-center mt-4">
|
||||
<div class="join">
|
||||
<button
|
||||
class="join-item btn"
|
||||
(click)="changePage(response.meta.currentPage - 1)"
|
||||
[disabled]="response.meta.currentPage === 1">«</button>
|
||||
<button class="join-item btn">Page {{ response.meta.currentPage }} of {{ response.meta.totalPages }}</button>
|
||||
<button
|
||||
class="join-item btn"
|
||||
(click)="changePage(response.meta.currentPage + 1)"
|
||||
[disabled]="response.meta.currentPage === response.meta.totalPages">»</button>
|
||||
</div>
|
||||
</div>
|
||||
</ng-container>
|
||||
|
||||
<ng-template #loading>
|
||||
<div class="text-center p-8">
|
||||
<span class="loading loading-spinner loading-lg"></span>
|
||||
</div>
|
||||
</ng-template>
|
||||
</div>
|
||||
@ -0,0 +1,70 @@
|
||||
// dvbooking-cli/src/templates/angular/list.component.ts.tpl
|
||||
|
||||
// Generated by the CLI
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { RouterModule } from '@angular/router';
|
||||
import { BehaviorSubject, Observable, combineLatest } from 'rxjs';
|
||||
import { switchMap, startWith } from 'rxjs/operators';
|
||||
import { User } from '../../models/user.model';
|
||||
import { UserService } from '../../services/user.service';
|
||||
import { UserFilterComponent } from '../user-filter/user-filter.component';
|
||||
import { PaginatedResponse } from '../../../../../types';
|
||||
|
||||
|
||||
@Component({
|
||||
selector: 'app-user-list',
|
||||
templateUrl: './user-list.component.html',
|
||||
standalone: true,
|
||||
imports: [CommonModule,RouterModule, UserFilterComponent],
|
||||
})
|
||||
export class UserListComponent implements OnInit {
|
||||
|
||||
private refresh$ = new BehaviorSubject<void>(undefined);
|
||||
private filter$ = new BehaviorSubject<any>({});
|
||||
private page$ = new BehaviorSubject<number>(1);
|
||||
|
||||
paginatedResponse$!: Observable<PaginatedResponse<User>>;
|
||||
|
||||
constructor(private userService: UserService) { }
|
||||
|
||||
ngOnInit(): void {
|
||||
this.paginatedResponse$ = combineLatest([
|
||||
this.refresh$,
|
||||
this.filter$.pipe(startWith({})),
|
||||
this.page$.pipe(startWith(1))
|
||||
]).pipe(
|
||||
switchMap(([_, filter, page]) => {
|
||||
const query = { ...filter, page, limit: 10 };
|
||||
return this.userService.find(query);
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
onFilterChanged(filter: any): void {
|
||||
this.page$.next(1);
|
||||
this.filter$.next(filter);
|
||||
}
|
||||
|
||||
changePage(newPage: number): void {
|
||||
if (newPage > 0) {
|
||||
this.page$.next(newPage);
|
||||
}
|
||||
}
|
||||
|
||||
deleteItem(id: number): void {
|
||||
if (confirm('Are you sure you want to delete this item?')) {
|
||||
this.userService.remove(id).subscribe({
|
||||
next: () => {
|
||||
console.log(`Item with ID ${id} deleted successfully.`);
|
||||
this.refresh$.next();
|
||||
},
|
||||
// --- THIS IS THE FIX ---
|
||||
// Explicitly type 'err' to satisfy strict TypeScript rules.
|
||||
error: (err: any) => {
|
||||
console.error(`Error deleting item with ID ${id}:`, err);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,26 @@
|
||||
// dvbooking-cli/src/templates/angular-generic/data-provider.service.ts.tpl
|
||||
|
||||
// Generated by the CLI
|
||||
import { inject, Injectable } from '@angular/core';
|
||||
import { DataProvider, GetDataOptions, GetDataResponse } from '../../../../components/generic-table/data-provider.interface';
|
||||
import { User } from '../../models/user.model';
|
||||
import { map, Observable } from 'rxjs';
|
||||
import { UserService } from '../../services/user.service';
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root',
|
||||
})
|
||||
export class UserDataProvider implements DataProvider<User> {
|
||||
private userService = inject(UserService);
|
||||
|
||||
getData(options?: GetDataOptions): Observable<GetDataResponse<User>> {
|
||||
const {q,page,limit} = options?.params ?? {};
|
||||
// The generic table's params are compatible with our NestJS Query DTO
|
||||
return this.userService.search(q ?? '',page,limit, ).pipe(
|
||||
map((res) => {
|
||||
// Adapt the paginated response to the GetDataResponse format
|
||||
return { data: res };
|
||||
})
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,11 @@
|
||||
<!-- dvbooking-cli/src/templates/angular-generic/table.component.html.tpl -->
|
||||
|
||||
<!-- Generated by the CLI -->
|
||||
<div class="p-4 md:p-8 space-y-6">
|
||||
<div class="flex justify-between items-center">
|
||||
<h1 class="text-3xl font-bold">Users (Generic Table)</h1>
|
||||
<a routerLink="/user/new" class="btn btn-primary">Create New</a>
|
||||
</div>
|
||||
|
||||
<app-generic-table [config]="tableConfig"></app-generic-table>
|
||||
</div>
|
||||
@ -0,0 +1,105 @@
|
||||
// dvbooking-cli/src/templates/angular-generic/table.component.ts.tpl
|
||||
|
||||
// Generated by the CLI
|
||||
import { Component, inject, OnInit } from '@angular/core';
|
||||
import { Router, RouterModule } from '@angular/router';
|
||||
import { User } from '../../models/user.model';
|
||||
import { UserDataProvider } from './user-data-provider.service';
|
||||
import { ColumnDefinition } from '../../../../components/generic-table/column-definition.interface';
|
||||
import { GenericTable } from '../../../../components/generic-table/generic-table';
|
||||
import { GenericTableConfig } from '../../../../components/generic-table/generic-table.config';
|
||||
import {
|
||||
ActionDefinition,
|
||||
GenericActionColumn,
|
||||
} from '../../../../components/generic-action-column/generic-action-column';
|
||||
import { UserService } from '../../services/user.service';
|
||||
import { BehaviorSubject } from 'rxjs';
|
||||
|
||||
@Component({
|
||||
selector: 'app-user-table',
|
||||
standalone: true,
|
||||
imports: [GenericTable, RouterModule],
|
||||
templateUrl: './user-table.component.html',
|
||||
})
|
||||
export class UserTableComponent implements OnInit {
|
||||
|
||||
private refresh$ = new BehaviorSubject<void>(undefined);
|
||||
private filter$ = new BehaviorSubject<any>({});
|
||||
private page$ = new BehaviorSubject<number>(1);
|
||||
private limit$ = new BehaviorSubject<number>(10);
|
||||
|
||||
router = inject(Router);
|
||||
tableConfig!: GenericTableConfig<User>;
|
||||
|
||||
userDataProvider = inject(UserDataProvider);
|
||||
userService = inject(UserService);
|
||||
|
||||
ngOnInit(): void {
|
||||
const actionHandler = (action: ActionDefinition<User>, item: User) => {
|
||||
switch (action.action) {
|
||||
case 'view':
|
||||
this.router.navigate(['/user', item?.id]);
|
||||
break;
|
||||
case 'edit':
|
||||
this.router.navigate(['/user', item?.id, 'edit']);
|
||||
break;
|
||||
case 'delete':
|
||||
this.deleteItem(item.id);
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
this.tableConfig = {
|
||||
refresh$: this.refresh$,
|
||||
filter$: this.filter$,
|
||||
page$: this.page$,
|
||||
limit$: this.limit$,
|
||||
dataProvider: this.userDataProvider,
|
||||
columns: [
|
||||
{
|
||||
attribute: 'username',
|
||||
headerCell: true,
|
||||
valueCell: true,
|
||||
},
|
||||
{
|
||||
attribute: 'email',
|
||||
headerCell: true,
|
||||
valueCell: true,
|
||||
},
|
||||
{
|
||||
attribute: 'actions',
|
||||
headerCell: { value: 'Actions' },
|
||||
valueCell: {
|
||||
component: GenericActionColumn,
|
||||
componentInputs: item => ({
|
||||
item: item,
|
||||
actions: [
|
||||
{ action: 'view', handler: actionHandler },
|
||||
{ action: 'edit', handler: actionHandler },
|
||||
{ action: 'delete', handler: actionHandler },
|
||||
] as ActionDefinition<User>[],
|
||||
}),
|
||||
},
|
||||
},
|
||||
] as ColumnDefinition<User>[],
|
||||
tableCssClass: 'user-table-container',
|
||||
};
|
||||
}
|
||||
|
||||
deleteItem(id: number): void {
|
||||
if (confirm('Are you sure you want to delete this item?')) {
|
||||
this.userService.remove(id).subscribe({
|
||||
next: () => {
|
||||
console.log(`Item with ID ${id} deleted successfully.`);
|
||||
this.refresh$.next();
|
||||
},
|
||||
// --- THIS IS THE FIX ---
|
||||
// Explicitly type 'err' to satisfy strict TypeScript rules.
|
||||
error: (err: any) => {
|
||||
console.error(`Error deleting item with ID ${id}:`, err);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
9
admin/src/app/features/user/models/user.model.ts
Normal file
9
admin/src/app/features/user/models/user.model.ts
Normal file
@ -0,0 +1,9 @@
|
||||
// dvbooking-cli/src/templates/angular/model.ts.tpl
|
||||
|
||||
// Generated by the CLI
|
||||
export interface User {
|
||||
id: number;
|
||||
username: string;
|
||||
email: string;
|
||||
password: string;
|
||||
}
|
||||
85
admin/src/app/features/user/services/user.service.ts
Normal file
85
admin/src/app/features/user/services/user.service.ts
Normal file
@ -0,0 +1,85 @@
|
||||
// dvbooking-cli/src/templates/angular/service.ts.tpl
|
||||
|
||||
// Generated by the CLI
|
||||
import { Injectable } from '@angular/core';
|
||||
import { HttpClient, HttpParams } from '@angular/common/http';
|
||||
import { Observable } from 'rxjs';
|
||||
import { User } from '../models/user.model';
|
||||
import { ConfigurationService } from '../../../services/configuration.service';
|
||||
import { PaginatedResponse } from '../../../../types';
|
||||
|
||||
|
||||
export interface SearchResponse<T> {
|
||||
data: T[];
|
||||
total: number;
|
||||
}
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
})
|
||||
export class UserService {
|
||||
private readonly apiUrl: string;
|
||||
|
||||
constructor(
|
||||
private http: HttpClient,
|
||||
private configService: ConfigurationService
|
||||
) {
|
||||
this.apiUrl = `${this.configService.getApiUrl()}/user`;
|
||||
}
|
||||
|
||||
/**
|
||||
* Find records with pagination and filtering.
|
||||
*/
|
||||
public find(filter: Record<string, any>): Observable<PaginatedResponse<User>> {
|
||||
// --- THIS IS THE FIX ---
|
||||
// The incorrect line: .filter(([_, v]) for v != null)
|
||||
// is now correctly written with an arrow function.
|
||||
const cleanFilter = Object.fromEntries(
|
||||
Object.entries(filter).filter(([_, v]) => v != null)
|
||||
);
|
||||
// --- END OF FIX ---
|
||||
|
||||
const params = new HttpParams({ fromObject: cleanFilter });
|
||||
return this.http.get<PaginatedResponse<User>>(this.apiUrl, { params });
|
||||
}
|
||||
|
||||
/**
|
||||
* Search across multiple fields with a single term.
|
||||
* @param term The search term (q).
|
||||
*/
|
||||
public search(term: string, page: number = 1, limit: number = 10): Observable<PaginatedResponse<User>> {
|
||||
const params = new HttpParams()
|
||||
.set('q', term)
|
||||
.set('page', page.toString())
|
||||
.set('limit', limit.toString());
|
||||
return this.http.get<PaginatedResponse<User>>(`${this.apiUrl}/search`, { params });
|
||||
}
|
||||
|
||||
/**
|
||||
* Find a single record by its ID.
|
||||
*/
|
||||
public findOne(id: number): Observable<User> {
|
||||
return this.http.get<User>(`${this.apiUrl}/${id}`);
|
||||
}
|
||||
|
||||
/**
|
||||
* Create a new record.
|
||||
*/
|
||||
public create(data: Omit<User, 'id'>): Observable<User> {
|
||||
return this.http.post<User>(this.apiUrl, data);
|
||||
}
|
||||
|
||||
/**
|
||||
* Update an existing record.
|
||||
*/
|
||||
public update(id: number, data: Partial<Omit<User, 'id'>>): Observable<User> {
|
||||
return this.http.patch<User>(`${this.apiUrl}/${id}`, data);
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove a record by its ID.
|
||||
*/
|
||||
public remove(id: number): Observable<any> {
|
||||
return this.http.delete(`${this.apiUrl}/${id}`);
|
||||
}
|
||||
}
|
||||
@ -5,7 +5,6 @@ import { TypeOrmModule } from '@nestjs/typeorm';
|
||||
import { ConfigModule, ConfigService } from '@nestjs/config';
|
||||
import { UserModule } from './user/user.module';
|
||||
import { AuthModule } from './auth/auth.module';
|
||||
import { User } from './entity/user';
|
||||
import { UserGroup } from './entity/user-group';
|
||||
import { UserRole } from './entity/user-role';
|
||||
import { LoggerModule } from './logger/logger.module';
|
||||
@ -13,8 +12,9 @@ import { EventType } from './entity/event-type.entity';
|
||||
import { EventTypesModule } from './event-type/event-type.module';
|
||||
import { Product } from './entity/product.entity';
|
||||
import { ProductsModule } from './product/products.module';
|
||||
import { Event } from "./entity/event.entity";
|
||||
import { EventsModule } from "./event/events.module";
|
||||
import { Event } from './entity/event.entity';
|
||||
import { EventsModule } from './event/events.module';
|
||||
import { User } from './entity/user';
|
||||
|
||||
const moduleTypeOrm = TypeOrmModule.forRootAsync({
|
||||
imports: [ConfigModule],
|
||||
@ -43,8 +43,8 @@ const moduleTypeOrm = TypeOrmModule.forRootAsync({
|
||||
LoggerModule,
|
||||
EventTypesModule,
|
||||
ProductsModule,
|
||||
EventsModule
|
||||
],
|
||||
EventsModule,
|
||||
],
|
||||
controllers: [AppController],
|
||||
providers: [AppService],
|
||||
})
|
||||
|
||||
14
server/src/user/dto/query-user.dto.ts
Normal file
14
server/src/user/dto/query-user.dto.ts
Normal file
@ -0,0 +1,14 @@
|
||||
import {
|
||||
IsOptional,
|
||||
IsString,
|
||||
IsNumber,
|
||||
IsIn,
|
||||
} from 'class-validator';
|
||||
import { Type } from 'class-transformer';
|
||||
|
||||
export class QueryUserDto {
|
||||
@IsOptional() @Type(() => Number) @IsNumber() page?: number;
|
||||
@IsOptional() @Type(() => Number) @IsNumber() limit?: number;
|
||||
@IsOptional() @IsString() sortBy?: string;
|
||||
@IsOptional() @IsIn(['ASC', 'DESC']) order?: 'ASC' | 'DESC';
|
||||
}
|
||||
@ -8,6 +8,9 @@ import {
|
||||
Delete,
|
||||
UseGuards,
|
||||
ValidationPipe,
|
||||
Query,
|
||||
DefaultValuePipe,
|
||||
ParseIntPipe,
|
||||
} from '@nestjs/common';
|
||||
import { UserService } from './user.service';
|
||||
import { CreateUserDto } from './dto/create-user.dto';
|
||||
@ -18,7 +21,7 @@ import { Roles } from '../auth/roles.decorator';
|
||||
import { Role } from '../auth/role.enum';
|
||||
import { RolesGuard } from '../auth/roles.guard';
|
||||
|
||||
@Controller('users')
|
||||
@Controller('user')
|
||||
@UseGuards(JwtAuthGuard, RolesGuard)
|
||||
@Roles(Role.Admin)
|
||||
export class UserController {
|
||||
@ -36,6 +39,15 @@ export class UserController {
|
||||
return this.userService.findAll();
|
||||
}
|
||||
|
||||
@Get('search')
|
||||
search(
|
||||
@Query('q') term: string,
|
||||
@Query('page', new DefaultValuePipe(1), ParseIntPipe) page: number,
|
||||
@Query('limit', new DefaultValuePipe(10), ParseIntPipe) limit: number,
|
||||
) {
|
||||
return this.userService.search(term, { page, limit });
|
||||
}
|
||||
|
||||
@Get(':id')
|
||||
findOne(@Param('id') id: string): Promise<User | null> {
|
||||
return this.userService.findOne(+id);
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import { Injectable } from '@nestjs/common';
|
||||
import { InjectRepository } from '@nestjs/typeorm';
|
||||
import { Repository } from 'typeorm';
|
||||
import { ILike, Repository } from 'typeorm';
|
||||
import { User } from '../entity/user';
|
||||
import * as bcrypt from 'bcrypt';
|
||||
import { FindOptionsRelations } from 'typeorm/find-options/FindOptionsRelations';
|
||||
@ -8,6 +8,8 @@ import { DvbookingLoggerService } from '../logger/dvbooking-logger.service';
|
||||
|
||||
@Injectable()
|
||||
export class UserService {
|
||||
private readonly searchableFields: (keyof User)[] = ['username', 'email'];
|
||||
|
||||
constructor(
|
||||
@InjectRepository(User)
|
||||
private usersRepository: Repository<User>,
|
||||
@ -55,6 +57,40 @@ export class UserService {
|
||||
await this.usersRepository.delete(id);
|
||||
}
|
||||
|
||||
async search(term: string, options: { page: number; limit: number }) {
|
||||
if (this.searchableFields.length === 0) {
|
||||
console.warn('Search is not configured for this entity.');
|
||||
return {
|
||||
data: [],
|
||||
meta: {
|
||||
totalItems: 0,
|
||||
itemCount: 0,
|
||||
itemsPerPage: options.limit,
|
||||
totalPages: 0,
|
||||
currentPage: options.page,
|
||||
},
|
||||
};
|
||||
}
|
||||
const whereConditions = this.searchableFields.map((field) => ({
|
||||
[field]: ILike(`%${term}%`),
|
||||
}));
|
||||
const [data, totalItems] = await this.usersRepository.findAndCount({
|
||||
where: whereConditions,
|
||||
skip: (options.page - 1) * options.limit,
|
||||
take: options.limit,
|
||||
});
|
||||
return {
|
||||
data,
|
||||
meta: {
|
||||
totalItems,
|
||||
itemCount: data.length,
|
||||
itemsPerPage: options.limit,
|
||||
totalPages: Math.ceil(totalItems / options.limit),
|
||||
currentPage: options.page,
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
async setRefreshToken(
|
||||
id: number,
|
||||
refreshToken: string | null,
|
||||
|
||||
Loading…
Reference in New Issue
Block a user