get all customers done
This commit is contained in:
@@ -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>
|
||||
@@ -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');
|
||||
}
|
||||
|
||||
|
||||
@@ -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>
|
||||
}
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
|
||||
@@ -11,5 +11,6 @@
|
||||
|
||||
export interface CreateCustomerDto {
|
||||
note?: string | null;
|
||||
customerTypeId?: number;
|
||||
}
|
||||
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
|
||||
@@ -12,5 +12,6 @@
|
||||
export interface GetCustomerDto {
|
||||
id?: number;
|
||||
note?: string | null;
|
||||
customerTypeId?: number;
|
||||
}
|
||||
|
||||
|
||||
@@ -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,
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user