Kanban Board with React and ASP.NET Core

Teendőket kezelő webalkalmazás

A projekt célja, hogy egy működő Kanban Board-ot valósítson meg. Frontendből és backendből tevődik össze.

A böngészőben jelenik meg a React alapon elkészült frontend. Felületén teendők kártyákat lehet hozzáadni, módosítani, mozgatni az oszlopok között, illetve törölni azokat.

A frontend-en történő módosítás össze van kötve megfelelő API végpontokkal így az adatok egyből perzistens módon tárolódnak el. Az adatok tárolására egy SQL adatbázis gondoskodik.

A tábla felépítése

• Oszlop: A táblán négy oszlop található, ami a teendőket segíti csoportosítani oszlopokba
• Teendő: Egy teendőnek van egy prioritása, címe, feladat leírása, határideje
  • Prioritás: A teendő fontosságát jelöli, ami lehet CRITICAL-piros, HIGH-narancs, MEDIUM-kék, LOW-zöld
  • Cím: Teendő rövid ismertetője
  • Feladat leírás: Teendő részletesen kifejtve
  • Határidő: Teendőnek beállított határidő

Kezelőfelület

• Teendő hozzáadása az adott oszlop tetején levő ➕ gombbal lehetséges. Egy felugró ablakban lehet megadni az adatokat a beviteli mezőkbe. Nem lehet üresen hagyni a beviteli mezőket ellenkező esetben sikertelen lesz a teendő hozzáadása, amit az ablak egyből jelez.

  

• Drag and Drop modul szolgál a teendők mozgatására. A teendők a prioritás által kerülnek sorrendbe. Amennyiben azonos a sorrend két prioritás között ott a felhasználó is tud sorrendet cserélni a teendő megragadásával és fel-/lemozgatásával. Továbbá az oszlopokat is változtatni a teendők oldal írányú mozgatásával.

• Szerkesztés, lehetőség van egy teendő adatainak megváltoztatására egyszerű rákattintással, ami egy felugró ablak segítségével könnyedén szerkeszthetővé válik. A létező adatokat betölti a szerver az adatbázisból a beviteli mezőkbe.

• Beviteli mezők amelyekből négy darab van és mindegyik különböző.

  • Címhez egy sima text típusú mező tartozik
  • Prioritáshoz egy legördülő menüből lehet választani (alapértelmezett a Critical)
  • Leíráshoz egy textarea típusú mező tartozik
  • Dátumhoz pedig egy date time típusú mező gondoskodik

• Bootstap modul felhasználásával lett elkészítve a weboldal a letisztult designért.

Strukturális felépítése

Frontend

Öt lényegi React komponensből áll össze

• Board a fő komponens. Inicializálja majd eltárolja az adatokat a state-ben. Legenerálja a négy BoardNoteTable oszlopot a megfelelő propertikkel
• BoardNoteTable megkapja az oszlopban szereplő teendőket és annak az adatait, majd amennyit tartalmaz annyi Note teendőt létrehoz
• Note egy teendőt reprezentál az oldalon.
• NoteModal felugró ablak szolgál egy Note lérehozására, szerksztésére
• NameModal egy felugró ablak amennyiben szeretnénk átírni a oszlop címét

Backend

ASP.NET Core keretrendszer SQL adatbázissal

• TodoItemsController fogadja az API hívásokat, majd végrehajtódik ennek megfelelő a függvény.
• TodoContext adatbázis-kontextus.
• TodoItem egy teendő adatosztályát reprezentálja.
• Program inicializálja valamint beállítja az adatbázist.
• SQL tárol egy TodoContext adatbázist egy Todo táblával benne a megfelelő TodoItem-ekkel.

APIs

METHOD	DESCRIPTIONS	URL
POST	Új teendő hozzadása	api/todoitems
GET	Összes teendő lekérdezése	api/todoitems
GET	ID alapján teendő lekérdezés	api/todoitems/{id}
PUT	ID alapján teendő frissítés	api/todoitems/{id}
PUT	ID alapján teendő oszlop frissítés	api/todoitems/column/{id}
DELETE	ID alapján teendő törlése	api/todoitems/{id}

Használata

Frontend

Node.js telepítés után a projekt könyvtárában egy terminál ablakban az alábbi parancsok kiadásával indítható program. Első futtatáskor a node modulok telepítése szükséges.

npm install

Projekt indítása.

npm start

Az alkalmazás a https://localhost:3000 porton fut.

Backend

.NET Core Runtime telepítés után a ToDoReactWithBackend\react-backend mappában egy terminál ablakban az alábbi parancs kiadásával indítható el az adatbázis.

dotnet watch run