Eszközök

Minta

Mintaként a megadott figma tervet tudod felhasználni:

https://www.figma.com/file/YzfvsO8lSKznfRiG6WlNFR

Előkészületek

Készítsd el a következő útvonalakat:

A navigációs sávot alakítsd át úgy, hogy sikeres típusú legyen. Két elemet tartalmazzon a sáv:

1. Főoldal: A HomePage-et töltsd be RouterLink segítségével
2. Új eszköz: A CreateDevicePage-et töltsd be RouterLink segítségével

Tárolók

DeviceStore

Készíts egy devices nevű állapotot.

Készíts getDevices() függvényt, amely lekéri az eszközöket a devices végpontról axios segítségével és eltárolja az előbbi állapotban.

Készíts getDevice(id) függvényt, amely paraméterként egy id-t vesz át paraméterként. A paraméter alapján kérj le egy adott eszközt a devices/{id} végpontról és add vissza.

Készíts createDevice(deviceData) fügvényt, amely egy deviceData nevű paramétert kap. A paraméter csak és kizárólag azokat az adatokat tartalmazza, amelyeket a backend számára továbbítani kell! Végezd el axios segítségével a továbbítást a devices végpontra és mentsd el az állapotba a visszaérkező példányt.

Készíts updateDevice(id, deviceData) függvényt, amely a következő két paramétert tartalmazza:

• id: frissítendő eszköz azonosítója
• deviceData: a frissített adatok.

A deviceData már csak és kizárólag olyan adatot kap, amelyet továbbítani kell a backend számára. Ezt az axios segítségével a devices/{id} végponton tudod megtenni. Gondoskodj róla, hogy a helyi tömbben is frissüljön az adat!

Legyen egy deleteDevice(id) függvényed amely a paraméterként kapott id alapján törli az eszközt. A devices/{id} végpontot használd fel ehhez axios segítségével. Ügyelj rá, hogy a helyi tömbből is törlődjön az adat!

A gyökérkomponens betöltésére fusson le a getDevices() függvény.

DeviceTypeStore

Készíts egy állapotot deviceTypes néven.

Készíts egy getDeviceTypes() függvényt, amely lekéri a device-types végpontról axios segítségével a összes tárolt eszköz típust.

A gyökérkomponens betöltésére fusson le a getDeviceTypes() függvény.

Oldalak

HomePage

A BaseTable komponenst felhasználva készítsd el a táblázatot, amelyben megjeleníted a DeviceStore-ban található devices állapotban tárolt eszközöket.

SingleDevicePage

Az oldal elrendezését alakítsd ki két sorral.

Az első sorban jelenjen meg az eszköz Gyártója és modellje kettősponttal elválasztva főcímként középre igazítva. A főcímtől jobbra legyen egy figyelmeztető típúsú gomb, "Módosít" szövegezéssel, amely RouterLink segítségével átvezet az eszköz módosítás oldalára. Valamint egy veszélyes típusú gomb "Törlés" cimkével, amely a DevicesStore segítségével törli az eszközt. Ezt követően átirányít a főoldalra (this.$router)

A második sorban az oszlopokat következőképpen alakítsd ki:

• Kis nézeten minden oszlop töltse ki a teljes sort
• Közepes nézettől felfelé, minden sorban 2-2 oszlop jelenjen meg
• Nagy nézettől felfelé az első sor 2-2 oszlopot tartalmazzon, a második pedig 4-et

CreateDevicePage és EditDevicePage

Készíts két soros elrendezést. Az első sorban egy főcímet helyezz el, amely az oldaltól függően a következő szöveget tartalmazza:

A következő sorban helyezz el egy FormKit alapú űrlapot az alábbi mezőkkel. Az űrlap esetén add meg, hogy az alapértelmezett műveletek legyenek letiltva.

Módosítás esetén töltsd be az adott eszköz adatait az űrlapba.

A DeviceTypeStore deviceTypes állapota alapján töltsd fel a Típusa mezőt.

A DevicesStore megfelelő függvényével végezd el az űrlap küldésekor a létrehozás vagy módosítás műveletét.

Létrehozás esetén irányítsd át a felhasználót a a főoldalra, módosítás után az adott eszközhöz tartozó oldalra.

Komponensek

BaseTable

Készíts a components könyvtárba egy BaseTable nevű komponest.

A komponens egy bootstrap formázású csíkozott táblázatot tartalmazzon.

Vegyél fel öt oszlopot, amelyek rendre a következő adatokat tartalmazzák:

1. Gyártó
2. Model
3. Eszköz típusa
4. Nettó ár
5. Megtekintés

Vegyen át a szülőtől egy devices állapotot, mely tömb típusú. Ez alapján generáld ki a táblázat sorait a megfelelő adatokkal.

A műveletek oszlop egy RouterLink-et tartalmazzon, amely a megnyitja az adott eszközöhöz tartozó oldalt. Formázd meg sikeres gombként. Szövege "Megtekintés" legyen.

BaseCard

Készíts a components könyvtárba komponenst BaseCard néven.

A komponens egy Boostrapes kártyát valósítson meg, fejléccel ellátva.

A komponens vegyen át két állapotot a szülőtől (title, content). Ezeket jelenítsd meg a fejlécben valamint a kártya törzsében bekezdésként.

\pagebreak