Add course tabs to user dashboard

[fnitu]

Show the course cards as tabs:

1. Ongoing
2. Pending
3. Finalized
4. Recommended

Route to be modified: user/dashboard

[TudorPetruToma]

Hello. Am facut task-ul, dar avand putina frica de git, sa nu stric ceva, i-am dat commit pe un new branch ca sa puteti sa vedeti daca este in regula.

Ce am facut:

1. Am utilizat ca parinte si ca si copil;
2. Fiecare tab este generat cu *ngFor;
3. FIecare tab contine numele cursului, cat si progresul facut.
4. La click, duce la curs, folosind metoda goToCourse din dashboard.component.ts;
5. Dpdv stilistic, am dublat in styles\scss\theme-colors.scss niste culor de //nav bar si //card si le-am dat denumiri subestive //user tabs
6. Am mai adaugat un cuvant in assets\translations.js - la dashboard, cuvantul 'progress'

Orice feedback e mai mult decat binevenit,

Cheers!

[razvantudorache]

Salut.

M-am uitat putin peste implementarea facuta si am urmatorul feedback:

1. Pentru culorile #ffffff si #7DC242 aveai variabilele $navBarTextColor si $nabBarBackgroundColor. In theme-colors incercam sa tinem variabilele cat mai generale in ideea de a avea o paleta de culori pe care sa o tot folosim.
2. In ceea ce priveste styling-ul pe care l-ai adaugat, ar fi putut fi scris sub forma de SCSS pentru o mai buna vizualizare a structurii ierarhice de clase si o uniformitate a codului + mai putin cod scris.
3. MatTabsModule ar fi trebuit inclus in SharedModule pentru ca o sa-l folosim in mai multe pagini. Pentru a avea implementari consistente, cred ca trebuia folosit marcajul de mat-tab-group care sa contina mat-tab-uri. Ceea ce ai implementat cred ca este implementarea basic. Un exemplu de cum ar trebui sa fie marcajul.
4. Conform cu ceea ce este descris in acest issue, structura modelului de date pentru cursuri trebuia modificata ca cursurile sa fie impartite pe cele 4 categorii si tu sa afisezi ca si tab-uri categoriile. Din ceea ce am vazut in cod si ceea ce ai explicat mai sus, tu ai facut ca fiecare tab sa fie un curs. Tab-ul fiind o categorie, el poate contine mai multe cursuri.
5. Totodata, discutasem ca fiecare tab sa incarce datele lazy. Asta insemna ca fiecare categorie de curs va contine un link ce va da lista de cursuri. Ex: la incarcarea paginii o sa vad cursurile de pe primul tab (Ongoing) iar request-urile de date pentru celelalte tab-uri nu sunt facute. Cand fac click pe tab, abia atunci mi se face request-ul tab-ului si imi sunt incarcate cursurile respective. { "success": true, "categories": [ { "name": "Ongoing", "link": "/ongoing_link" }, { "name": "Pending", "link": "/pending_link" }, { "name": "Finalized", "link": "/finalized_link" }, { "name": "Recommended", "link": "/recommended_link" } ] } Cam asa vad eu modelul de date pentru tab-uri (@fnitu). By default, primul tab este activ si automat se face request-ul pe link-ul /ongoing_link. Modelul unui curs poate fi in continuare pastrat ca cel din homeCourses.json.

Ca sa ne fie mult mai usor sa putem sa asociem un commit cu un issue, in comentariul commit-ului ar trebui sa pui numele issue-ului. In cazul tau: Add course tabs to user dashboard #28

O zi faina si mult spor!

[fnitu]

Issue implemented.