updated supplier page
This commit is contained in:
@@ -1,21 +1,24 @@
|
||||
import {Component, input, Input} from '@angular/core';
|
||||
import {Component, input, Input, output} from '@angular/core';
|
||||
import {NzModalComponent} from "ng-zorro-antd/modal";
|
||||
import {NzButtonComponent} from "ng-zorro-antd/button";
|
||||
|
||||
@Component({
|
||||
selector: 'app-modal-button',
|
||||
selector: 'app-modal-button',
|
||||
imports: [
|
||||
NzModalComponent,
|
||||
NzButtonComponent,
|
||||
],
|
||||
templateUrl: './modal-button.html',
|
||||
styleUrl: './modal-button.css',
|
||||
templateUrl: './modal-button.html',
|
||||
styleUrl: './modal-button.css',
|
||||
})
|
||||
|
||||
export class ModalButton {
|
||||
name = input.required<string>()
|
||||
type = input<"primary" | "default" | "dashed" | "link" | "text">()
|
||||
|
||||
ok = output<void>();
|
||||
cancel = output<void>();
|
||||
|
||||
isVisible = false;
|
||||
isOkLoading = false;
|
||||
|
||||
@@ -26,12 +29,14 @@ export class ModalButton {
|
||||
handleOk(): void {
|
||||
this.isOkLoading = true;
|
||||
setTimeout(() => {
|
||||
this.ok.emit();
|
||||
this.isVisible = false;
|
||||
this.isOkLoading = false;
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
handleCancel(): void {
|
||||
this.cancel.emit();
|
||||
this.isVisible = false;
|
||||
}
|
||||
}
|
||||
@@ -1,5 +1,5 @@
|
||||
<div (click)="showModal()">
|
||||
<nz-icon [nzType]="nameIcon" nzTheme="outline"></nz-icon>
|
||||
<nz-icon [nzType]="nameIcon()" nzTheme="outline"></nz-icon>
|
||||
</div>
|
||||
|
||||
<ng-template #modalContent>
|
||||
@@ -8,7 +8,7 @@
|
||||
|
||||
<nz-modal
|
||||
[(nzVisible)]="isVisible"
|
||||
[nzTitle]="name"
|
||||
[nzTitle]="name()"
|
||||
(nzOnCancel)="handleCancel()"
|
||||
(nzOnOk)="handleOk()"
|
||||
[nzOkLoading]="isOkLoading"
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import {Component, Input, input} from '@angular/core';
|
||||
import {Component, Input, input, output} from '@angular/core';
|
||||
import { NzButtonModule } from 'ng-zorro-antd/button';
|
||||
import { NzModalModule } from 'ng-zorro-antd/modal';
|
||||
import {NzIconDirective} from "ng-zorro-antd/icon";
|
||||
@@ -10,9 +10,10 @@ import {NzIconDirective} from "ng-zorro-antd/icon";
|
||||
styleUrls: ['./modal-nav.css'],
|
||||
})
|
||||
export class ModalNav {
|
||||
@Input() nameIcon: string = '';
|
||||
@Input() name: string = '';
|
||||
|
||||
nameIcon = input.required<string>()
|
||||
name = input.required<string>()
|
||||
ok = output<void>();
|
||||
cancel = output<void>();
|
||||
isVisible = false;
|
||||
isOkLoading = false;
|
||||
|
||||
@@ -23,12 +24,14 @@ export class ModalNav {
|
||||
handleOk(): void {
|
||||
this.isOkLoading = true;
|
||||
setTimeout(() => {
|
||||
this.isVisible = false;
|
||||
this.ok.emit();
|
||||
this.isOkLoading = false;
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
handleCancel(): void {
|
||||
this.isVisible = false;
|
||||
this.cancel.emit();
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import {Component, input} from '@angular/core';
|
||||
import {Component, effect, input} from '@angular/core';
|
||||
import {NzColDirective} from "ng-zorro-antd/grid";
|
||||
import {NzFlexDirective} from "ng-zorro-antd/flex";
|
||||
import {NzFormControlComponent, NzFormDirective, NzFormItemComponent, NzFormLabelComponent} from "ng-zorro-antd/form";
|
||||
@@ -31,6 +31,19 @@ export class SupplierForm {
|
||||
deliveryDelay: new FormControl<string>(null, [Validators.required]),
|
||||
|
||||
})
|
||||
supplier= input.required<GetSupplierDto>()
|
||||
|
||||
supplier= input.required<GetSupplierDto | null>();
|
||||
constructor() {
|
||||
effect(() => {
|
||||
if (this.supplier()) {
|
||||
this.supplierForm.patchValue({
|
||||
name: this.supplier().name,
|
||||
email: this.supplier().email,
|
||||
phone: this.supplier().phone,
|
||||
address: this.supplier().address,
|
||||
city: this.supplier().city,
|
||||
deliveryDelay: this.supplier().deliveryDelay,
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import {Component, inject, signal, viewChild} from '@angular/core';
|
||||
import {Component, inject, OnInit, signal, viewChild} from '@angular/core';
|
||||
import {ModalNav} from "../modal-nav/modal-nav";
|
||||
import {NzDividerComponent} from "ng-zorro-antd/divider";
|
||||
import {NzIconDirective} from "ng-zorro-antd/icon";
|
||||
@@ -8,7 +8,6 @@ import {SupplierForm} from "../supplier-form/supplier-form";
|
||||
import {GetSupplierDto, SuppliersService} from "../../services/api";
|
||||
import {NzNotificationService} from "ng-zorro-antd/notification";
|
||||
import {firstValueFrom} from "rxjs";
|
||||
import {format} from "date-fns";
|
||||
|
||||
@Component({
|
||||
selector: 'app-supplier-table',
|
||||
@@ -24,7 +23,7 @@ import {format} from "date-fns";
|
||||
styleUrl: './supplier-table.css',
|
||||
})
|
||||
|
||||
export class SupplierTable {
|
||||
export class SupplierTable implements OnInit {
|
||||
private suppliersService = inject(SuppliersService);
|
||||
private notificationService = inject(NzNotificationService)
|
||||
suppliers = signal<GetSupplierDto[]>([]);
|
||||
@@ -87,6 +86,7 @@ export class SupplierTable {
|
||||
'Fournisseur modifié'
|
||||
)
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
this.notificationService.error(
|
||||
'Erreur',
|
||||
'Erreur lors de la modification'
|
||||
|
||||
@@ -1,13 +1,18 @@
|
||||
<div class="flex mt-2">
|
||||
<app-modal-button type="primary" name="Ajouter un fournisseur">
|
||||
<app-supplier-form></app-supplier-form>
|
||||
<app-modal-button #modalButton
|
||||
type="primary"
|
||||
name="Ajouter un fournisseur"
|
||||
(ok)="onModalOk()"
|
||||
(cancel)="onModalCancel()">
|
||||
|
||||
<app-supplier-form #supplierForm [supplier]=""></app-supplier-form>
|
||||
</app-modal-button>
|
||||
|
||||
<div class="ml-95 w-150">
|
||||
<app-search class="w-full"></app-search>
|
||||
<app-search></app-search>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-1">
|
||||
<app-supplier-table></app-supplier-table>
|
||||
<app-supplier-table #supplierTable></app-supplier-table>
|
||||
</div>
|
||||
|
||||
@@ -1,8 +1,11 @@
|
||||
import { Component } from '@angular/core';
|
||||
import {Component, inject, viewChild} from '@angular/core';
|
||||
import {Search} from "../../components/search/search";
|
||||
import {ModalButton} from "../../components/modal-button/modal-button";
|
||||
import {SupplierTable} from "../../components/supplier-table/supplier-table";
|
||||
import {SupplierForm} from "../../components/supplier-form/supplier-form";
|
||||
import {SuppliersService} from "../../services/api";
|
||||
import {NzNotificationService} from "ng-zorro-antd/notification";
|
||||
import {firstValueFrom} from "rxjs";
|
||||
|
||||
@Component({
|
||||
selector: 'app-supplier',
|
||||
@@ -16,5 +19,44 @@ import {SupplierForm} from "../../components/supplier-form/supplier-form";
|
||||
styleUrl: './supplier.css',
|
||||
})
|
||||
export class Supplier {
|
||||
modal = viewChild.required<ModalButton>('modalButton');
|
||||
createSupplier = viewChild.required<SupplierForm>('supplierForm');
|
||||
suppliersTable = viewChild.required<SupplierTable>('suppliersTable');
|
||||
private usersService = inject(SuppliersService);
|
||||
private notificationService = inject(NzNotificationService)
|
||||
|
||||
async onModalOk() {
|
||||
await this.addSupplier()
|
||||
this.createSupplier().supplierForm.reset();
|
||||
this.modal().isVisible = false;
|
||||
await this.suppliersTable().fetchSuppliers()
|
||||
}
|
||||
|
||||
onModalCancel() {
|
||||
this.modal().isVisible = false;
|
||||
}
|
||||
|
||||
async addSupplier() {
|
||||
if (this.createSupplier().supplierForm.invalid)
|
||||
{
|
||||
this.notificationService.error(
|
||||
'Erreur',
|
||||
'Erreur d\'écriture dans le formulaire'
|
||||
)
|
||||
}
|
||||
try {
|
||||
const suppliers = this.createSupplier().supplierForm.getRawValue();
|
||||
await firstValueFrom(this.usersService.createSupplierEndpoint(suppliers))
|
||||
|
||||
this.notificationService.success(
|
||||
'Success',
|
||||
'Fournisseur enregistré'
|
||||
)
|
||||
} catch (e) {
|
||||
this.notificationService.error(
|
||||
'Erreur',
|
||||
'Erreur d\'enregistrement'
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
.gitignore
|
||||
.openapi-generator-ignore
|
||||
README.md
|
||||
api.base.service.ts
|
||||
api.module.ts
|
||||
|
||||
@@ -12,7 +12,7 @@ import { CustomHttpParameterCodec } from './encoder';
|
||||
import { Configuration } from './configuration';
|
||||
|
||||
export class BaseService {
|
||||
protected basePath = 'http://localhost:5298';
|
||||
protected basePath = 'https://localhost:44379';
|
||||
public defaultHeaders = new HttpHeaders();
|
||||
public configuration: Configuration;
|
||||
public encoder: HttpParameterCodec;
|
||||
|
||||
Reference in New Issue
Block a user