Skip to content
Snippets Groups Projects
Commit aec3d7ad authored by Rafael László's avatar Rafael László :speech_balloon:
Browse files

final documentation

parent 235dcae4
Branches
No related tags found
1 merge request!1Docs
......@@ -4,7 +4,7 @@ This app is currently under development
## Docs
You can generate from `docs/readme.md` using `markdown-pp`.
You can generate from `docs/main.md` using `markdown-pp`.
## Setup
......
output.md
\ No newline at end of file
`Material UI` könyvtár elemeit használja fel az oldal, továbbá a
`Material Table`-t, hogy jobb Material táblázatok legyenek.
A komponensek felelőségüktől függően megfelelő alkönyvtárakba vannak
felosztva. Könyvtár struktúra:
> src/components
> ├── admin
> │ ├── group
> │ │ ├── GroupAdminPanel.tsx
> │ │ ├── GroupDocuments.tsx
> │ │ ├── GroupItems.tsx
> │ │ ├── GroupMembers.tsx
> │ │ └── GroupStorages.tsx
> │ └── GroupAdminContent.tsx
> ├── group
> │ ├── GroupInfo.tsx
> │ ├── GroupsTable.tsx
> │ └── Groups.tsx
> ├── [header](#Header)
> │ ├── DrawerMenu.tsx
> │ ├── Header.tsx
> │ └── UserButton.tsx
> ├── home
> │ ├── BasicStatistics.tsx
> │ ├── GroupHomeDetails.tsx
> │ ├── LoggedInHome.tsx
> │ ├── LoggedOutHome.tsx
> │ └── OwnGroupsTable.tsx
> ├── user
> │ └── OwnProfile.tsx
> ├── utils
> │ ├── CardTable.tsx
> │ ├── GroupNotExists.tsx
> │ ├── Loader.tsx
> │ ├── Loading.tsx
> │ ├── NotAdminOfGroup.tsx
> │ ├── NotAuthorized.tsx
> │ ├── NumberCard.tsx
> │ ├── ShowOnUser.tsx
> │ ├── StyledLink.tsx
> │ └── SwitchComponentByAuth.tsx
> ├── [Content.tsx](#Content)
> ├── Faq.tsx
> └── [Footer.tsx](#Footer)
Eggyel kintebb látható az `App.tsx`, ez az melyet megnyit az alkalmazás
és itt vannak a fő context-ek beállítva.
Innen tovább érünk a `Main.tsx`-re, mely 3 részre osztja az oldalt,
Header, fő tartalom és footer-re, továbbá biztosítja,
hogy a footer mindig az oldal alján legyen flex-t használva.
#### Header
> src/components/header
> ├── DrawerMenu.tsx
> ├── Header.tsx
> └── UserButton.tsx
Két megjelenítést különböztet meg a képernyő méretétől függően.
Material UI által definiált alacsony méretben a `SmallScreen` komponens,
míg nagy méretben a `LargeScreen` jelenik meg.
Menüikonra kattintva megjelenítésre kerül a `DrawerMenu`.
Ide és a header-be statikusan kell felvenni az egyes menü elemeket, alapvetően
nincs olyan sok elem, de a későbbiekben akár valamilyen ciklussal is
lehet generálni őket.
A felhasználó saját progiljához és kilépéshez egy külön gomb van a Header
jobb oldali részén, ehhez külön egy `UserButton` komponens kerül használatra.
Ez a komponens a kapott `children`-t jeleníti meg, mint a felhasználó neve.
#### Footer
Pár szociális elérhetőség ikon van itt, melyek a nézettől függően pozíciót
változtatnak.
#### Content
Ebben kerül megoldásra első lépésben a `Routing`.
Ennek tartalma változik az URL-től függően.
`/groups` - Csoportok listázása
`/gyik` - Oldal használati utasítás (Még nem készült el)
`/profile/me` - Saját profil
`/group/:id/info` - Egy csoport információi
`/group/:id/admin` - Admin oldalt kezelő komponens, itt újabb Routing történik
`/` - Főoldal
`*` -> `/` - Ami nem illeszkedik egyikre sem, az átirányításra
kerül a főoldalra
##### Főoldal
`LoggedInHome` és `LoggedOutHome` komponensek közt van megosztva,
hogy mi jelenik meg.
Ezeken belül dől el, hogy mely statisztikák jelennek meg.
##### Listázó oldalak
Egy jó példa a `components/group/Groups.tsx`, melyben csak a Grid beállítás
látható, innen a mellette lévő `GroupsTable` komponensre hivatkozik.
Innen pedig a megfelelő TypeGraphQL API hívás eredményét átadva a [CardTable](CardTable) komponensnek, megjelenít egy táblát.
Ugyanezt a logikát követi a többi listát megjelenítő komponens is az Admin
résznél, melyek a: `GroupDocuments`, `GroupItems`,
`GroupMembers`, `GroupStorages`
##### CardTable
`/components/utils/CardTable.tsx`
Material Table felüldefiniált verziója, mely benne van egy Material Card-ban,
továbbá magyarosított.
#### Admin oldalak
Ehhez a `/components/admin/GroupAdminContent.tsx` -ben történik a legtöbb dolog.
Itt kerül ellenőrzésre, hogy a felhasználó adminja-e a csoportnak,
továbbá innen kerül tovább adásra a jelenlegi csoport a többi alkomponensének.
Ezen belül is van Routing a `members`, `items`, `storages`, `documents` részre.
Ezek mind 1-1 listázó komponensek, melyek képesek szűrési vagy rendezési
beállításokat átvenni.
#### Utils komponensek
Itt találhatóak a gyakran használt komponenseink, mint a `CardTable`, `Loader`,
hozzáférési üzenet oldalak, `NumberCard`, stb.
Ide érdemes újakat felvenni.
Kontextusba le van tárolva a jelenlegi felhasználó és
annak az adataival dolgozik az alkalmazás onnantól, ezáltal
megspórolva az API hívásokat.
`src/context` látható ennek a definíciója, továbbá
a hozzá tartozó interfész a `types/IContextUser` -ben.
Ennek a beállítása a `Main.tsx` -ben történik.
#### Típusok
`/src/types` mappa
Az alkalmazásban használt típusok a backend-el szinkronban állnak,
ugyanis az ott legenerált sémát kilehet exportálni, majd egy
átalakítás során az összes TypeScript interfészt legenerálni.
Ehhez csak a `types` mappában a `codegen.yml` -t kell felhasználni.
Ugyanebben a mappában találhatóak a `graphqlSchema` fájlban a
legenerált TypeScript típusok.
#### Lekérések
`/src/graphql` mappa
Minden API lekérésnek külön GraphQL definíció található meg.
A nevek követik, hogy mit csinálnak ezek a definíciók.
Mindegyikből a query-n túl egy interfész is exportálva van azzal, hogy mivel
fog visszatérni a query, így később már csak ezt kell
importálni, mikor használjuk.
```
/client/* = Frontend fájljai
```
#### Telepítés
Összes követelmény telepíthető egy `npm install` parancs kiadásával
#### TypeScript, Eslint, Babel és Webpack
Az alkalmazás `webpack`-et használ a futtatáshoz és a production fájlok
létrehozására. Ennek konfigurációja a `webpack.config.js`-ben elérhető.
A `TypeScript` konfigurációja a `tsconfig.json` -ben elérhető, továbbá
`eslint`-et használ a kód validálására és ennek konfigurációs
fájljában `.eslintrc.js` több szabály is be van állítva.
Ami kiemelnék az a `Prettier` és a `sort-imports`. Ezeket
külön a megfelelő IDE-hez fel kell telepíteni, hogy automatikusan működjenek.
A Prettier egy kódformásért, míg a másik a be importált
könyvtárak megfelelő sorrendbe helyezéséért felel.
#### Elindítás Dev és Prod környezetben
`npm run dev` parancs elérhető a fejlesztői környezetben indításhoz.
Ez a helyi gép `1234` -es portjára fogja kihelyezni.
Production-be pedig az `npm run build` paranccsal tudjuk előkészíteni a
fájlokat, majd a létrejövő build mappa tartalmát egy `nginx`-el vagy
bármi erre alkalmas alkalmazással kitudjuk hosztolni.
Ehhez elérhető egy `Dockerfile`.
# InvControl Raktározó webalkalmazás - fejlesztői dokumentáció
## Rövid Összefoglaló
Az alkalmazás raktározó csoportok, tagok, raktárak, tárgyak és dokumentumok
kezelésére ad lehetőséget. Háttérben egy `Typescript`, `Express` alapú
`TypeGraphql`-ben írt alkalmazás nyújtja a logikát.
A felhasználóknak pedig egy szintén `Typescript`-ben írt, `React` keretrendszert
használó Single Page Application áll rendelkezésre.
## Backend
### Követelmények és konfiguráció
!INCLUDE "backend/req_conf.md"
### Adatstruktúrák
!INCLUDE "backend/models.md"
### API és ahhoz kapcsolódó Resolverek
!INCLUDE "backend/api.md"
### Authentikáció
!INCLUDE "backend/auth.md"
## Frontend
### Követelmények és konfiguráció
!INCLUDE "frontend/req_conf.md"
### Komponensek
!INCLUDE "frontend/components.md"
### GraphQL
!INCLUDE "frontend/graphql.md"
### Context
!INCLUDE "frontend/context.md"
This diff is collapsed.
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment