Számlázó
A következő feladatban egy egyszerűsített számlázó programot kell megvalósítanod
Minta
A minta a link végén lévő figma terv
Backend
A fullstack alap segítségével a kapott backend-et üzemeld be.
Route-ok
| Útvonal neve | Komponens | Url | Paraméterek |
|---|---|---|---|
index | IndexPage | / | |
invoices | InvoicesIndexPage | /invoices | |
singleInvoice | SingleInvoiceIndexPage | /invoices/:id | id: A számla azonosítója |
partners | PartnersIndexPage | /partners | |
singlePartner | SinglePartnerPage | /partners/:id | id: A partner azonosítója |
Tárolók
InvoiceStore
Tárolja el a felhasználó adatait invoices nevű állapotba.
Készíts getInvoices(), getInvoice(id), createInvoice(invoiceData), updateInvoice(id, invoiceData) és deleteInvoice(id) függvényeket, amelyek a paraméterek alapján elvégzik a megfelelő CRUD műveletet és megfelően módosítják az invoices állapotot. Módosítás alól kivétel az egyetlen számlát lekérdező függvény, ő adja vissza a lekért számlát.
PartnerStore
Tárolja el a felhasználó adatait partners nevű állapotba.
Készíts getPartners(), getPartner(id), createPartner(partnerData), updatePartner(id, partnerData) és deletePartner(id) függvényeket, amelyek a paraméterek alapján elvégzik a megfelelő CRUD műveletet és megfelően módosítják az partners állapotot. Módosítás alól kivétel az egyetlen partnert lekérdező függvény, ő adja vissza a lekért partnert.
Layoutok kialakítása
FullPageLayout
Ez a layout fejlécelemben (header) tartalmazza a navigációs sávot (BaseNavbar)
A főtartalmi tárolót (main) alakítsd ki reszponzív bootstrapes tárolóként. Ebben az elemben helyezd el a slot elemet.
SidebarLayout
A FullPageLayout-ra épüljön ez a nézet. Készíts egy Bootstrapes rácsot, amely kis nézetben 1:1 arányban, nagy nézettől felfele 1:3 arányban tartalmaz két oszlopot. Az első oszlop az oldalsávot fogja tartalmazni, míg a második a tartalmat fogja megjeleníteni, így helyezz el egy slot elemet ide.
CSS segítségével oldja meg, hogy a kis és közepes nézetben az oldalsáv a tartalom mögött jelenjen meg.
Oldalak kialakítása
Főoldal
A FullPageLayout-ra épülve készüljön el az oldal.
Jelenítse meg kártyák segítségével az elkészült számlákat egy Bootstrapes sorban.
Kis méretben 1, közepes mérettől 2, xl mérettől pedig 4 kártya jelenjen meg egy oszlopban.
A kártya címe a számla száma legyen, a szövege pedig a partner neve, valamint tartalmazzon egy gombot, amley átvisz az adott számla oldalára.
Partnerek oldal
A FullPageLayout-ra épülve készüljön el az oldal.
Készíts egy táblázatot amelyben megjeleníted a partnerek adatait.
Egy partner oldala
A SidebarLayout-ra épülve készüljön el az oldal.
Egy számla oldala
A SidebarLayout-ra épülve készüljön el az oldal.
\pagebreak