Creare/editare produse

1. Crearea unui Layout pentru utilizatoric cu rol de admin

Pe langa layout-ul ProtectedRoute.jsx și AdminRoute.jsx avem nevoie de încă unul pentru utilizatorii cu rol de admin, astfel încât doar anumiți utilizatori să le poată accesa.

2. Actualizare router astfel încât să includă rutele pentru creat și actualizat un produs

3. Adăugarea tuturor metodelor de tip CRUD pentru produse

Mergem în fișierul product.routes.js din frontend și adăugăm și restul metodelor CRUD

4. Actualizarea componentei de listare a produselor

După ce am adăugat toate metodele CRUD pentru produse, trebuie să adăugăm funcționalitate pe iconițele de Create, Edit și Delete.

Modul de afișare a unui produs

5. CreateProductPage.jsx

CreateProductPage este pagina care permite crearea unui produs nou în aplicație. Aceasta folosește componenta reutilizabilă CreateEditProductForm și se ocupă de logica de submit către API-ul backend. După crearea produsului, utilizatorul este redirecționat către lista de produse, iar în caz de succes sau eroare sunt afișate notificări folosind toast.

circle-info

Explicații

  • Utilizează useNavigate pentru redirecționare după crearea produsului.

  • toast afișează notificări de succes sau eroare.

  • CreateEditProductForm este reutilizabil și gestionează toate câmpurile produsului.

  • Pagina nu conține logica formularului, doar gestionează submit-ul și redirecționarea.

6. EditProductPage.jsx

EditProductPage permite editarea unui produs existent. Folosește useParams pentru a prelua ID-ul produsului din URL, iar useEffect pentru a încărca datele produsului de la API. Similar cu pagina de creare, utilizează CreateEditProductForm pentru afișarea și validarea formularului.

circle-info

Explicații

  • useParams preia id-ul produsului din URL.

  • useEffect realizează fetch-ul datelor pentru editare.

  • În caz de eroare, utilizatorul este redirecționat către lista de produse după 2 secunde.

  • Formularul reutilizează CreateEditProductForm și afișează datele existente.

7. Formularul pentru creat/actualizat un produs

CreateEditProductForm este un formular reutilizabil pentru crearea și editarea produselor. Gestionează toate câmpurile (name, description, price, category, image, stock), oferă validări de bază și afișează un preview al imaginii.

circle-info

Explicații

  • Poate fi utilizat atât pentru create, cât și pentru edit, în funcție de prop-ul product.

  • Include validări de bază pentru toate câmpurile esențiale.

  • Permite previzualizarea imaginii dacă se introduce un URL valid.

  • submitLoading gestionează starea butonului de submit și afișează mesajul „Saving...” dacă se procesează.

  • Butonul Cancel redirecționează automat către lista de produse.

Formular creat/editat produse

Last updated