Skip to content

Latest commit

 

History

History
94 lines (72 loc) · 5.47 KB

README.md

File metadata and controls

94 lines (72 loc) · 5.47 KB
Raw

Kanban Board with React and ASP.NET Core

Npm package version Npm package version Npm package version Npm package version Npm package version

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