Initial commit
This commit is contained in:
dahoud
258
app/(main)/materiels/search/page.tsx
Normal file
258
app/(main)/materiels/search/page.tsx
Normal file
@@ -0,0 +1,258 @@
|
||||
'use client';
|
||||
|
||||
import React, { useState, useRef } from 'react';
|
||||
import { DataTable } from 'primereact/datatable';
|
||||
import { Column } from 'primereact/column';
|
||||
import { Button } from 'primereact/button';
|
||||
import { InputText } from 'primereact/inputtext';
|
||||
import { Dropdown } from 'primereact/dropdown';
|
||||
import { Card } from 'primereact/card';
|
||||
import { Toast } from 'primereact/toast';
|
||||
import { Tag } from 'primereact/tag';
|
||||
import { FilterMatchMode } from 'primereact/api';
|
||||
import { materielService } from '../../../../services/api';
|
||||
import { Materiel, TypeMateriel, StatutMateriel } from '../../../../types/btp';
|
||||
import { formatCurrency } from '../../../../utils/formatters';
|
||||
|
||||
const RechercheMaterielsPage = () => {
|
||||
const [materiels, setMateriels] = useState<Materiel[]>([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [searchParams, setSearchParams] = useState({
|
||||
nom: '',
|
||||
type: '',
|
||||
marque: '',
|
||||
statut: '',
|
||||
localisation: ''
|
||||
});
|
||||
const toast = useRef<Toast>(null);
|
||||
const dt = useRef<DataTable<Materiel[]>>(null);
|
||||
|
||||
const typeOptions = [
|
||||
{ label: 'Tous les types', value: '' },
|
||||
...Object.values(TypeMateriel).map(type => ({
|
||||
label: type.replace('_', ' '),
|
||||
value: type
|
||||
}))
|
||||
];
|
||||
|
||||
const statutOptions = [
|
||||
{ label: 'Tous les statuts', value: '' },
|
||||
...Object.values(StatutMateriel).map(statut => ({
|
||||
label: statut.replace('_', ' '),
|
||||
value: statut
|
||||
}))
|
||||
];
|
||||
|
||||
const rechercher = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const data = await materielService.search(searchParams);
|
||||
setMateriels(data);
|
||||
|
||||
toast.current?.show({
|
||||
severity: 'success',
|
||||
summary: 'Recherche effectuée',
|
||||
detail: `${data.length} résultat(s) trouvé(s)`,
|
||||
life: 3000
|
||||
});
|
||||
} catch (error) {
|
||||
toast.current?.show({
|
||||
severity: 'error',
|
||||
summary: 'Erreur',
|
||||
detail: 'Erreur lors de la recherche',
|
||||
life: 3000
|
||||
});
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const exportCSV = () => {
|
||||
dt.current?.exportCSV();
|
||||
};
|
||||
|
||||
const onInputChange = (e: React.ChangeEvent<HTMLInputElement>, name: string) => {
|
||||
const val = (e.target && e.target.value) || '';
|
||||
setSearchParams(prev => ({ ...prev, [name]: val }));
|
||||
};
|
||||
|
||||
const onDropdownChange = (e: any, name: string) => {
|
||||
setSearchParams(prev => ({ ...prev, [name]: e.value }));
|
||||
};
|
||||
|
||||
const typeBodyTemplate = (rowData: Materiel) => {
|
||||
return (
|
||||
<Tag
|
||||
value={rowData.type?.replace('_', ' ')}
|
||||
severity={getTypeSeverity(rowData.type)}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
const statutBodyTemplate = (rowData: Materiel) => {
|
||||
return (
|
||||
<Tag
|
||||
value={rowData.statut?.replace('_', ' ')}
|
||||
severity={getStatutSeverity(rowData.statut)}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
const valeurBodyTemplate = (rowData: Materiel) => {
|
||||
return formatCurrency(rowData.valeurActuelle || rowData.valeurAchat);
|
||||
};
|
||||
|
||||
const getTypeSeverity = (type?: TypeMateriel) => {
|
||||
switch (type) {
|
||||
case TypeMateriel.ENGIN_CHANTIER:
|
||||
return 'danger';
|
||||
case TypeMateriel.OUTIL_ELECTRIQUE:
|
||||
return 'warning';
|
||||
case TypeMateriel.EQUIPEMENT_SECURITE:
|
||||
return 'success';
|
||||
case TypeMateriel.VEHICULE:
|
||||
return 'info';
|
||||
default:
|
||||
return undefined;
|
||||
}
|
||||
};
|
||||
|
||||
const getStatutSeverity = (statut?: StatutMateriel) => {
|
||||
switch (statut) {
|
||||
case StatutMateriel.DISPONIBLE:
|
||||
return 'success';
|
||||
case StatutMateriel.UTILISE:
|
||||
return 'warning';
|
||||
case StatutMateriel.MAINTENANCE:
|
||||
return 'info';
|
||||
case StatutMateriel.HORS_SERVICE:
|
||||
return 'danger';
|
||||
default:
|
||||
return undefined;
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="grid">
|
||||
<div className="col-12">
|
||||
<Toast ref={toast} />
|
||||
|
||||
<h2 className="mb-4">Recherche de Matériel</h2>
|
||||
|
||||
<Card className="mb-4">
|
||||
<h5>Critères de recherche</h5>
|
||||
<div className="formgrid grid">
|
||||
<div className="field col-12 md:col-4">
|
||||
<label htmlFor="nom">Nom</label>
|
||||
<InputText
|
||||
id="nom"
|
||||
value={searchParams.nom}
|
||||
onChange={(e) => onInputChange(e, 'nom')}
|
||||
placeholder="Nom du matériel"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="field col-12 md:col-4">
|
||||
<label htmlFor="marque">Marque</label>
|
||||
<InputText
|
||||
id="marque"
|
||||
value={searchParams.marque}
|
||||
onChange={(e) => onInputChange(e, 'marque')}
|
||||
placeholder="Marque"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="field col-12 md:col-4">
|
||||
<label htmlFor="localisation">Localisation</label>
|
||||
<InputText
|
||||
id="localisation"
|
||||
value={searchParams.localisation}
|
||||
onChange={(e) => onInputChange(e, 'localisation')}
|
||||
placeholder="Localisation"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="field col-12 md:col-6">
|
||||
<label htmlFor="type">Type</label>
|
||||
<Dropdown
|
||||
id="type"
|
||||
value={searchParams.type}
|
||||
onChange={(e) => onDropdownChange(e, 'type')}
|
||||
options={typeOptions}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="field col-12 md:col-6">
|
||||
<label htmlFor="statut">Statut</label>
|
||||
<Dropdown
|
||||
id="statut"
|
||||
value={searchParams.statut}
|
||||
onChange={(e) => onDropdownChange(e, 'statut')}
|
||||
options={statutOptions}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
label="Rechercher"
|
||||
icon="pi pi-search"
|
||||
className="p-button-text p-button-rounded"
|
||||
onClick={rechercher}
|
||||
loading={loading}
|
||||
/>
|
||||
<Button
|
||||
label="Effacer"
|
||||
icon="pi pi-times"
|
||||
severity="secondary"
|
||||
className="p-button-text p-button-rounded"
|
||||
onClick={() => setSearchParams({
|
||||
nom: '',
|
||||
type: '',
|
||||
marque: '',
|
||||
statut: '',
|
||||
localisation: ''
|
||||
})}
|
||||
/>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
{materiels.length > 0 && (
|
||||
<Card>
|
||||
<div className="flex justify-content-between align-items-center mb-4">
|
||||
<h5>Résultats ({materiels.length})</h5>
|
||||
<Button
|
||||
label="Exporter"
|
||||
icon="pi pi-upload"
|
||||
severity="help"
|
||||
className="p-button-text p-button-rounded"
|
||||
onClick={exportCSV}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<DataTable
|
||||
ref={dt}
|
||||
value={materiels}
|
||||
paginator
|
||||
rows={10}
|
||||
rowsPerPageOptions={[5, 10, 25]}
|
||||
paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown"
|
||||
currentPageReportTemplate="Affichage {first} à {last} de {totalRecords} matériels"
|
||||
emptyMessage="Aucun résultat trouvé."
|
||||
>
|
||||
<Column field="nom" header="Nom" sortable />
|
||||
<Column field="marque" header="Marque" sortable />
|
||||
<Column field="modele" header="Modèle" sortable />
|
||||
<Column field="type" header="Type" body={typeBodyTemplate} sortable />
|
||||
<Column field="statut" header="Statut" body={statutBodyTemplate} sortable />
|
||||
<Column field="localisation" header="Localisation" sortable />
|
||||
<Column field="valeurActuelle" header="Valeur" body={valeurBodyTemplate} sortable />
|
||||
</DataTable>
|
||||
</Card>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default RechercheMaterielsPage;
|
||||
Reference in New Issue
Block a user