get all customers done

This commit is contained in:
2025-12-11 14:32:46 +01:00
parent ecb098a34f
commit 2ff47263a1
12 changed files with 143 additions and 42 deletions

View File

@@ -2,14 +2,8 @@
<div nz-row [nzGutter]="10" style="gap: 30px">
@for (customer of customers(); track customer.id)
{
<nz-card style="width:400px;">
<h2 style="text-align: center; font-weight: bold">Utilisateur n°{{ customer.id }}</h2>
<p>Nom/Prénom : {{ customer.name }} {{ customer.firstName }}</p>
<p>Téléphone : {{ customer.phone }}</p>
<p>Email : {{ customer.email }}</p>
<p>Adresse : {{ customer.address }}</p>
<p>Note : {{ customer.note }}</p>
</nz-card>
<!-- Passage de la donnée du parent vers l'enfant + signal à émettre -->
<app-get-all-customers-card [customer]="customer" (triggerEdited)="fetchCustomers()" />
}
</div>
</div>
</div>

View File

@@ -1,22 +1,28 @@
import {Component, inject, signal} from '@angular/core';
import {Router} from "@angular/router";
import {firstValueFrom} from "rxjs";
import {Component, inject, OnInit, signal} from '@angular/core';
import { Router } from '@angular/router';
import {CustomersService, GetCustomerDto} from "../../../services/api";
import {NzNotificationService} from "ng-zorro-antd/notification";
import {firstValueFrom} from "rxjs";
import {ReactiveFormsModule} from "@angular/forms";
import {NzFormModule} from "ng-zorro-antd/form";
import {NzSpaceComponent} from "ng-zorro-antd/space";
import {GetAllCustomersCard} from "../get-all-customers-card/get-all-customers-card";
@Component({
selector: 'app-customers-get-all',
imports: [],
imports: [ReactiveFormsModule, NzFormModule, GetAllCustomersCard, GetAllCustomersCard],
templateUrl: './customers-get-all.html',
styleUrl: './customers-get-all.css',
})
export class CustomersGetAll {
private customerService = inject(CustomersService);
private customersService = inject(CustomersService);
private notificationService = inject(NzNotificationService)
router = inject(Router);
customers = signal<GetCustomerDto[]>([]);
customersLoading = signal<boolean>(false);
async ngOnInit() {
await this.fetchCustomers();
}
@@ -24,10 +30,9 @@ export class CustomersGetAll {
async fetchCustomers() {
this.customersLoading.set(true);
try {
const customer = await firstValueFrom(this.customerService.getAllCustomersEndpoint())
this.customers.set(customer)
} catch (e)
{
const customers = await firstValueFrom(this.customersService.getAllCustomerEndpoint())
this.customers.set(customers)
} catch (e) {
this.notificationService.error('Erreur', 'Erreur de communication avec l\'API');
}

View File

@@ -0,0 +1,29 @@
@if (edit() == false) {
<nz-card style="width:400px;" [nzActions]="[edit, delete]">
<h2 style="text-align: center; font-weight: bold">Client n°{{ customer().id }}</h2>
<p>Note : {{ customer().note }}</p>
</nz-card>
<ng-template #edit>
<nz-icon (click)="Edit()" nzType="edit" nzTheme="fill" />
</ng-template>
<ng-template #delete>
<nz-icon (click)="Delete()" nzType="delete" nzTheme="fill" />
</ng-template>
} @else {
<nz-card style="width:400px;" [nzActions]="[back, check]">
<form nz-form nzLayout="horizontal" [formGroup]="customerForm">
<nz-form-item>
<nz-form-label nzSpan="5" nzRequired> Note </nz-form-label>
<nz-form-control nzSpan="22" nzErrorTip="Ce champ est requis !">
<input nz-input placeholder="Note" formControlName="note">
</nz-form-control>
</nz-form-item>
</form>
</nz-card>
<ng-template #back>
<nz-icon (click)="Back()" nzType="backward" nzTheme="fill" />
</ng-template>
<ng-template #check>
<nz-icon (click)="submitForm()" nzType="check" nzTheme="outline" />
</ng-template>
}

View File

@@ -0,0 +1,89 @@
import {Component, inject, input, output, signal} from '@angular/core';
import {NzIconDirective} from "ng-zorro-antd/icon";
import {FormControl, FormGroup, ReactiveFormsModule, Validators} from "@angular/forms";
import {NzFormModule} from "ng-zorro-antd/form";
import {NzCardComponent} from "ng-zorro-antd/card";
import {NzInputDirective} from "ng-zorro-antd/input";
import {CustomersService, GetCustomerDto, UpdateCustomerDto} from "../../../services/api";
import {NzNotificationService} from "ng-zorro-antd/notification";
import {firstValueFrom} from "rxjs";
@Component({
selector: 'app-get-all-customers-card',
imports: [ReactiveFormsModule, NzFormModule, NzCardComponent, NzIconDirective, NzInputDirective],
templateUrl: './get-all-customers-card.html',
styleUrl: './get-all-customers-card.css',
})
export class GetAllCustomersCard {
private customersService = inject(CustomersService);
private notificationService = inject(NzNotificationService)
customerEdit = signal<UpdateCustomerDto>(null);
customersLoading = signal<boolean>(false);
customerForm = new FormGroup({
id: new FormControl(null, [Validators.required]),
note: new FormControl<string>(null, [Validators.required]),
})
async submitForm() {
this.customersLoading.set(true);
const customerValue = {
note: this.customerForm.value.note,
}
try {
const customer = await firstValueFrom(this.customersService.updateCustomer(this.customer().id,customerValue));
this.customerEdit.set(customer);
console.log(customer);
this.customerForm.reset();
this.edit.set(false);
this.triggerEdited.emit();
} catch (e)
{
this.notificationService.error('Erreur', ' (ou Erreur de communication avec l\'API)');
}
this.customersLoading.set(false);
}
customer = input<GetCustomerDto>(null);
edit = signal(false)
triggerEdited = output<void>();
protected Edit() {
this.edit.set(true)
}
protected Back() {
this.edit.set(false)
this.customerForm.reset();
}
async Delete() {
this.customersLoading.set(true);
try {
const customer = await firstValueFrom(this.customersService.deleteCustomerEndpoint(this.customer().id));
this.customerEdit.set(customer);
this.customerForm.reset();
this.triggerEdited.emit();
} catch (e)
{
this.notificationService.error('Erreur de recherche', "L\'auteur n\'existe pas !");
this.notificationService.error('Erreur', ' (ou Erreur de communication avec l\'API)');
}
this.customersLoading.set(false);
}
}

View File

@@ -10,27 +10,4 @@ import {firstValueFrom} from "rxjs";
styleUrl: './providers-get-all.css',
})
export class ProvidersGetAll {
private providersService = inject(ProvidersService);
private notificationService = inject(NzNotificationService)
router = inject(Router);
providers = signal<GetProviderDto[]>([]);
providersLoading = signal<boolean>(false);
async ngOnInit() {
await this.fetchProviders();
}
async fetchProviders() {
this.providersLoading.set(true);
try {
const providers = await firstValueFrom(this.providersService.getAllProvidersEndpoint())
this.providers.set(providers)
} catch (e)
{
this.notificationService.error('Erreur', 'Erreur de communication avec l\'API');
}
this.providersLoading.set(false);
}
}

View File

@@ -15,6 +15,8 @@ export interface CreateContactDto {
phoneNumber?: string | null;
email?: string | null;
address?: string | null;
city?: string | null;
role?: string | null;
customerId?: number | null;
}

View File

@@ -11,5 +11,6 @@
export interface CreateCustomerDto {
note?: string | null;
customerTypeId?: number;
}

View File

@@ -16,6 +16,8 @@ export interface GetContactDto {
phoneNumber?: string | null;
email?: string | null;
address?: string | null;
city?: string | null;
role?: string | null;
customerId?: number | null;
}

View File

@@ -12,5 +12,6 @@
export interface GetCustomerDto {
id?: number;
note?: string | null;
customerTypeId?: number;
}

View File

@@ -18,7 +18,6 @@ export const MethodImplAttributes = {
NUMBER_1: 1,
NUMBER_2: 2,
NUMBER_3: 3,
NUMBER_32: 3,
NUMBER_4: 4,
NUMBER_42: 4,
NUMBER_8: 8,

View File

@@ -15,6 +15,8 @@ export interface UpdateContactDto {
phoneNumber?: string | null;
email?: string | null;
address?: string | null;
city?: string | null;
role?: string | null;
customerTypeId?: number | null;
}