File
|
displayedColumns
|
Type : string[]
|
Default value : [
'service_id',
'nom_service',
'description',
'marchand',
]
|
|
|
import { ServiceService } from 'src/app/_services/service/service.service';
import { Component } from '@angular/core';
import { IService } from 'src/app/_interfaces/servives/service';
import { RouterLink, RouterOutlet, Router } from '@angular/router';
import { FormsModule } from '@angular/forms';
@Component({
selector: 'bgui-create-service',
standalone: true,
imports: [RouterLink, RouterOutlet, FormsModule],
templateUrl: './create-service.component.html',
styleUrl: './create-service.component.scss',
})
export class CreateServiceComponent {
service: IService[] = [];
displayedColumns: string[] = [
'service_id',
'nom_service',
'description',
'marchand',
];
constructor(
private services: ServiceService,
private router: Router
) {}
// ngOnInit(): void {
// this.services.getServices().subscribe((data: IService[]) => {
// this.service = data;
// console.log('service=>', this.service);
// //; this.dataSource.data = this.service;
// });
// }
onSubmit(service: IService) {
this.services.createService(service).subscribe({
next: createdService => {
console.log('Service créé avec succès:', createdService);
// Rediriger vers une autre page après la création du service (par exemple, la liste des services)
this.router.navigate(['/assistances/view-service']);
console.log('service==>', this.service);
},
error: error => {
console.error('Erreur lors de la création du service:', error);
// Gérer les erreurs ici (par exemple, afficher un message à l'utilisateur)
},
});
}
}
<div class="content sm-gutter">
<div class="page-title mb-20">
<h3 style="margin-bottom: 25px">Ajouter Un Service</h3>
</div>
<div class="row">
<div class="col-md-12 col-vlg-12 m-b-10">
<div class="row-fluid">
<div class="span12">
<div class="grid simple">
<div class="card">
<div class="card-title">
<div class="card-body m-3">
<form
(ngSubmit)="onSubmit(serviceForm.value)"
#serviceForm="ngForm"
method="post">
<div class="row justify-content-center">
<div class="col-md-6 mb-2">
<label for="service_id">Id Service</label>
<input
type="text"
id="service_id"
placeholder="ID"
class="form-control"
name="service_id"
ngModel
required />
</div>
<div class="col-md-6 mb-2">
<label for="nom_service">Nom Service</label>
<input
type="text"
id="nom_service"
placeholder="Nom Service"
class="form-control"
name="nom_service"
ngModel
required />
</div>
<div class="col-md-6 mb-2">
<label for="description">Description</label>
<input
type="text"
id="description"
placeholder="Description"
class="form-control"
name="description"
ngModel
required />
</div>
<div class="col-md-6 mb-2">
<label for="marchand">Marchand</label>
<input
type="text"
id="marchand"
placeholder="Marchand"
class="form-control"
name="marchand"
ngModel
required />
</div>
<div class="col-md-12">
<div class="d-flex justify-content-between mt-3">
<a
href="#"
class="btn-round btn btn-secondary btn-sm m-1"
routerLink="/assistances/view-service">
Retour <i class="fa fa-arrow-left"></i>
</a>
<button
type="submit"
class="btn btn-sm btn-success m-1">
Enregistrer <i class="fa fa-save"></i>
</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- <div class="content sm-gutter">
<div class="page-title mb-20">
<h3 style="margin-bottom: 25px">Ajouter Service</h3>
</div>
<div class="row">
<div class="col-md-12 col-vlg-12 m-b-10">
<div class="row-fluid">
<div class="span12">
<div class="grid simple">
<div class="card">
<div class="card-title">
<div class="card-body m-3">
<form method="post">
<div class="row justify-content-center">
<div class="col-md-6 mb-2">
<label for="service_id">Id Service</label>
<input
type="text"
id="service_id"
placeholder="ID"
class="form-control"
name="service_id"
value=""
required="" />
</div>
<div class="col-md-6 mb-2">
<label for="nom_service">Nom Service</label>
<input
type="text"
id="nom_service"
placeholder="Nom Service"
class="form-control"
name="nom_service"
value=""
required="" />
</div>
<div class="col-md-6 mb-2">
<label for="description">Description</label>
<input
type="text"
id="description"
placeholder="Description"
class="form-control"
name="description"
value=""
required="" />
</div>
<div class="col-md-6 mb-2">
<label for="marchand">Marchand</label>
<input
type="text"
id="marchand"
placeholder="Marchand"
class="form-control"
name="marchand"
value=""
required="" />
</div>
<div class="col-md-12">
<div class="d-flex justify-content-between mt-3">
<a
href="#"
class="btn-round btn btn-secondary btn-sm m-1"
[routerLink]="['/assistances/view-service']">
Retour <i class="fa fa-arrow-left"></i>
</a>
<button
class="btn btn-sm btn-success m-1"
id="save_button">
Enregistrer <i class="fa fa-save"></i>
</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div> -->
<!-- <div class="grid">
<div class="col-12">
<div class="card px-6 py-6">
<p-toast></p-toast>
<p-toolbar styleClass="mb-4">
<ng-template pTemplate="left">
<div class="my-2">
<button
pButton
pRipple
label="New"
icon="pi pi-plus"
class="p-button-success mr-2"
(click)="openNew()"></button>
<button
pButton
pRipple
label="Delete"
icon="pi pi-trash"
class="p-button-danger"
(click)="deleteSelectedProducts()"
[disabled]="
!selectedProducts || !selectedProducts.length
"></button>
</div>
</ng-template>
<ng-template pTemplate="right">
<p-fileUpload
mode="basic"
accept="image/*"
[maxFileSize]="1000000"
label="Import"
chooseLabel="Import"
class="mr-2 inline-block"></p-fileUpload>
<button
pButton
pRipple
label="Export"
icon="pi pi-upload"
class="p-button-help"
(click)="dt.exportCSV()"></button>
</ng-template>
</p-toolbar>
<p-table
#dt
[value]="products"
[columns]="cols"
responsiveLayout="scroll"
[rows]="10"
[globalFilterFields]="[
'name',
'country.name',
'representative.name',
'status'
]"
[paginator]="true"
[rowsPerPageOptions]="[10, 20, 30]"
[showCurrentPageReport]="true"
currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries"
[(selection)]="selectedProducts"
selectionMode="multiple"
[rowHover]="true"
dataKey="id">
<ng-template pTemplate="caption">
<div
class="flex flex-column md:flex-row md:justify-content-between md:align-items-center">
<h5 class="m-0">Manage Products</h5>
<span class="block mt-2 md:mt-0 p-input-icon-left">
<i class="pi pi-search"></i>
<input
pInputText
type="text"
(input)="onGlobalFilter(dt, $event)"
placeholder="Search..."
class="w-full sm:w-auto" />
</span>
</div>
</ng-template>
<ng-template pTemplate="header">
<tr>
<th pSortableColumn="code">
Code <p-sortIcon field="code"></p-sortIcon>
</th>
<th pSortableColumn="name">
Name <p-sortIcon field="name"></p-sortIcon>
</th>
<th pSortableColumn="price">
Price <p-sortIcon field="price"></p-sortIcon>
</th>
<th pSortableColumn="category">
Category <p-sortIcon field="category"></p-sortIcon>
</th>
<th pSortableColumn="inventoryStatus">
Status <p-sortIcon field="inventoryStatus"></p-sortIcon>
</th>
<th></th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-product>
<tr>
<td style="width: 14%; min-width: 10rem">
<span class="p-column-title">Code</span>
{{ product.code || product.id }}
</td>
<td style="width: 14%; min-width: 10rem">
<span class="p-column-title">Name</span>
{{ product.name }}
</td>
<td style="width: 14%; min-width: 8rem">
<span class="p-column-title">Price</span>
{{ product.price | currency: 'USD' }}
</td>
<td style="width: 14%; min-width: 10rem">
<span class="p-column-title">Category</span>
{{ product.category }}
</td>
<td style="width: 14%; min-width: 10rem">
<span class="p-column-title">Status</span>
<span
[class]="
'product-badge status-' +
(product.inventoryStatus
? product.inventoryStatus.toLowerCase()
: '')
"
>{{ product.inventoryStatus }}</span
>
</td>
<td>
<div class="flex">
<button
pButton
pRipple
icon="pi pi-pencil"
class="p-button-rounded p-button-success mr-2"
(click)="editProduct(product)"></button>
<button
pButton
pRipple
icon="pi pi-trash"
class="p-button-rounded p-button-warning"
(click)="deleteProduct(product)"></button>
</div>
</td>
</tr>
</ng-template>
</p-table>
</div>
<p-dialog
[(visible)]="productDialog"
[style]="{ width: '450px' }"
header="Product Details"
[modal]="true"
class="p-fluid">
<ng-template pTemplate="content">
<div class="field">
<label for="name">Name</label>
<input
type="text"
pInputText
id="name"
[(ngModel)]="product.name"
required
[ngClass]="{ 'ng-invalid ng-dirty': submitted && !product.name }" />
<small class="ng-dirty ng-invalid" *ngIf="submitted && !product.name"
>Name is required.</small
>
</div>
<div class="field">
<label for="description">Description</label>
<textarea
id="description"
pInputTextarea
[(ngModel)]="product.description"
required
rows="3"
cols="20"></textarea>
</div>
<div class="field">
<label for="status">Inventory Status</label>
<p-dropdown
[(ngModel)]="product.inventoryStatus"
inputId="inventoryStatus"
optionValue="label"
[options]="statuses"
placeholder="Select">
<ng-template pTemplate="selectedItem">
<span
*ngIf="product && product.inventoryStatus"
[class]="
'product-badge status-' +
product.inventoryStatus.toString().toLowerCase()
"
>{{ product.inventoryStatus }}</span
>
</ng-template>
<ng-template let-option pTemplate="item">
<span [class]="'product-badge status-' + option.value">{{
option.label
}}</span>
</ng-template>
</p-dropdown>
</div>
<div class="field">
<label class="mb-3">Category</label>
<div class="formgrid grid">
<div class="field-radiobutton col-6">
<p-radioButton
id="category1"
name="category"
value="Accessories"
[(ngModel)]="product.category"></p-radioButton>
<label for="category1">Accessories</label>
</div>
<div class="field-radiobutton col-6">
<p-radioButton
id="category2"
name="category"
value="Clothing"
[(ngModel)]="product.category"></p-radioButton>
<label for="category2">Clothing</label>
</div>
<div class="field-radiobutton col-6">
<p-radioButton
id="category3"
name="category"
value="Electronics"
[(ngModel)]="product.category"></p-radioButton>
<label for="category3">Electronics</label>
</div>
<div class="field-radiobutton col-6">
<p-radioButton
id="category4"
name="category"
value="Fitness"
[(ngModel)]="product.category"></p-radioButton>
<label for="category4">Fitness</label>
</div>
</div>
</div>
<div class="formgrid grid">
<div class="field col">
<label for="price">Price</label>
<p-inputNumber
id="price"
[(ngModel)]="product.price"
mode="currency"
currency="USD"
locale="en-US"></p-inputNumber>
</div>
<div class="field col">
<label for="quantity">Quantity</label>
<p-inputNumber
id="quantity"
[(ngModel)]="product.quantity"></p-inputNumber>
</div>
</div>
</ng-template>
<ng-template pTemplate="footer">
<button
pButton
pRipple
label="Cancel"
icon="pi pi-times"
class="p-button-text"
(click)="hideDialog()"></button>
<button
pButton
pRipple
label="Save"
icon="pi pi-check"
class="p-button-text"
(click)="saveProduct()"></button>
</ng-template>
</p-dialog>
<p-dialog
[(visible)]="deleteProductDialog"
header="Confirm"
[modal]="true"
[style]="{ width: '450px' }">
<div class="flex align-items-center justify-content-center">
<i class="pi pi-exclamation-triangle mr-3" style="font-size: 2rem"></i>
<span *ngIf="product"
>Are you sure you want to delete <b>{{ product.name }}</b
>?</span
>
</div>
<ng-template pTemplate="footer">
<button
pButton
pRipple
icon="pi pi-times"
class="p-button-text"
label="No"
(click)="deleteProductDialog = false"></button>
<button
pButton
pRipple
icon="pi pi-check"
class="p-button-text"
label="Yes"
(click)="confirmDelete()"></button>
</ng-template>
</p-dialog>
<p-dialog
[(visible)]="deleteProductsDialog"
header="Confirm"
[modal]="true"
[style]="{ width: '450px' }">
<div class="flex align-items-center justify-content-center">
<i class="pi pi-exclamation-triangle mr-3" style="font-size: 2rem"></i>
<span>Are you sure you want to delete selected products?</span>
</div>
<ng-template pTemplate="footer">
<button
pButton
pRipple
icon="pi pi-times"
class="p-button-text"
label="No"
(click)="deleteProductsDialog = false"></button>
<button
pButton
pRipple
icon="pi pi-check"
class="p-button-text"
label="Yes"
(click)="confirmDeleteSelected()"></button>
</ng-template>
</p-dialog>
</div>
</div> -->
Legend
Html element with directive