The Objective of this level of Keep is to cover the following areas :
- Components Design
- Components Interaction
- Named Router Outlets
- Testing
- Fork this boilerplate repository
- Clone the boilerplate repository and cd into it
- Install dependencies
npm install
- Run the backend
npm run serve
which shall run on port:3000 - Run the frontend
npm run start
which shall run on port:4200
On running npm run serve
, following apis would be available for your use -
- To authenticate user - POST - http://localhost:3000/auth/v1 - expecting data - { username, password }
- To check if user is authenticated - POST - http://localhost:3000/auth/v1/isAuthenticated - expecting header - { 'Authorization',
Bearer ${token}
} - To get notes - GET - http://localhost:3000/api/v1/notes - expecting header - { 'Authorization',
Bearer ${token}
} - To add a note - POST - http://localhost:3000/api/v1/notes - expecting header - { 'Authorization',
Bearer ${token}
} and data - { note }
Keep to include following -
- Notes View - collection of notes
- List View - collection of notes but classified into three lists based on their
state
values- Not Started
- Started
- Completed
- Edit Note View - Both the NotesView and the ListView should be able to edit notes and should be able to update the list and notes view.
- Note Taker Component: Both the NotesView and the ListView should have a common NoteTakerComponent present in the DashboardComponent.
- Add more Unit test cases for all the Components.
- Add Unit test cases for all the Services.
- Add more E2E test cases to the application.
- You are expected to use
Note
class for Note model AppModule
shall be the root module- Application to have following routes -
3.1.dashboard
mapped toDashboardComponent
3.2.dashboard/view/noteview
mapped toNoteViewComponent
3.3.dashboard/view/listview
mapped toListViewComponent
3.4.login
mapped toLoginComponent
3.5.note/:noteId/edit
mapped toEditNoteOpenerComponent
rendered innoteEditOutlet
named router outlet
dashboard/view/noteview
being the default route AppComponent
as the bootstrapping componentHeaderComponent
to have a propertyisNoteView
which is set based on the route rendered and two icons as shown in the template to switch between List View and Note View.LoginComponent
same as implemented inKeep Level 2
DashboardComponent
calls notesService.fetchNotesFromServer() on initialization and renders components based on router outlets mentioned in the templateNoteTakerComponent
has the same implementation of Expansion panel to add new notes fromDashboardComponent
ofKeep Level 2
NoteViewComponent
displays the notes collection with each note rendered as a separate NoteComponent, the component class subscribes to notesService.getNotes() and populates the response in itsnotes
propertyNoteComponent
displays a single note as a Material Card, with card title set to note title and card content set to note text. On click of this card, user is navigated to Edit View of the same note.ListViewComponent
to have three properties in the component class as -notStartedNotes
,startedNotes
,completedNotes
into which the updated collection of notes is classified based on thestate
property of Note objects.EditNoteOpenerComponent
which gets rendered when application is routed to Edit View. This component extracts noteId from query parameter and passed same as data while opening EditNoteViewComponent in a Material Dialog.EditNoteViewComponent
enables editing of a note by fetching the entire note using notesService.getNoteById() based on noteId provided in the data while opening this component in a Material Dialog.onSave()
persists the updated note via notesService.editNote() and the dialog is closed after which the previous route is rendered by calling routerService.routeBack(). In case of any server error, the template has a label with classerror-message
, the text of which is set with the error object's message property.CanActivateRouteGuard
same as implemented inKeep Level 2
AuthenticationService
same as implemented inKeep Level 2
NotesService
with two properties ->notes
which is array of all the updated notes andnotesSubject
which is a BehaviourSubject of array of all updated notes and helps to emit changes to this array across subscribers, the service has methods as below -
16.1.fetchNotesFromServer()
to fetch notes from backend and update thenotes
andnotesSubject
likewise in the service
INPUT - no params
URL -http://localhost:3000/api/v1/notes
METHOD -GET
RETURN TYPE - void
16.2.getNotes()
to return thenotesSubject
of the service
INPUT - no params
RETURN TYPE -BehaviorSubject<Array<Note>>
16.3.addNote()
to persist the new note created with server and update thenotes
andnotesSubject
of the service
INPUT - Note
URL -http://localhost:3000/api/v1/notes
METHOD -POST
RETURN TYPE -Observable<Note>
16.4.editNote()
to persist the updated note with server and update thenotes
andnotesSubject
of the service
INPUT - Note
URL -http://localhost:3000/api/v1/notes/${note.id}
METHOD -PUT
RETURN TYPE -Observable<Note>
16.5.getNoteById()
to fetch the note matching provided Id fromnotes
collection of the service
INPUT - Number (noteId)
RETURN TYPE - NoteRouterService
to navigate user to available routes -
17.1.routeToDashboard()
to navigate to dashboard route
17.2.routeToLogin()
to navigate to login route
17.3.routeToEditNoteView()
to navigate to edit view of the note of given noteId
17.4.routeBack()
to navigate back to previous route
17.5.routeToNoteView()
to navigate to notes view
17.6.routeToListView()
to navigate to list view- Ensure following commands succeed in your local machine before submitting your code for Preliminary automated review as described next -
npm install npm run build npm run lint
- Ensure unit test cases pass -
npm run test
- Ensure e2e test cases pass -
npm run serve
(backend shall be running before executing e2e test cases)
npm run e2e
- Open
https://hobbes-cts.stackroute.in/#/
and login into the platform - Under
Assignment repository
selectangular-keep-level-3-assignment
, and branchmaster
- Under
Your solution repository
select your own repository and branch - Press
Submit
- Press
click here
for the feedback - Evaluation will take around 5 mins to complete after which you need to refresh your browser and get the updated status
- Watch out for your total score and detailed status on each test and eslint errors in the coloured blocks on the screen
- Fix failing test cases as well as eslint errors and re-submit your solution (you may skip any eslint errors reported in the provided spec files)
-
You add the respective Mentor as a Reporter/Master into your Assignment Repository
-
You have checked your Assignment on the Automated Evaluation Tool - Hobbes (Check for necessary steps in your Boilerplate - README.md file. ) and got the required score - Check with your mentor about the Score you must achieve before it is accepted for Manual Submission.
-
Intimate your Mentor on Slack and/or Send an Email to [email protected] - with your Git URL - Once you are done working and are ready for final submission.