User Management Page with MVC

 

• Languages: HTML, CSS, Javascript ES5, JSON
• Languages Additional: Javascript ES6 Modules
• Libraries: Bootstrap, Font Awesome
• API Features: DOM Elements, Events, Web Storage API
• Tools: VS Code, Live Server extension, Git (if available)
• Patterns and Practices: Master details, MVC, Separation of concerns
• Copy your User Management page project to a new git repository for the starting point

 

Feature Specification

 

• Same features as User Management page project.

 

• Add a message box at the top of the screen to communicate the success or failure of changes.

 

• Use bootstrap alerts or something similar for the message box, use success and danger.
• Do not worry about alert dismissal for now.
• This message box will display the error message when you throw a JavaScript runtime error.  I.e.,

 

throw new Error(“Some error occurred…”);

 

• Add a global error handler and display any errors in the message box.

 

• The user-details form and the save/cancel buttons should only show up when necessary, and hide otherwise.

 

 

 

Code Design

 

• Create an app.js file for listening to the DOMContentLoaded and Window error events.

 

• Read about DOMContentLoaded and window.addEventListener('error') on MDN.

 

• Initialize and load your page on DOMContentLoaded.

 

• Refactor your code using the MVC Pattern.

 

• Use a single controller for the page with methods for:

 

• load
• new
• save
• cancel
• edit
• delete

 

• The controller should not know anything about the technology used in the view. i.e. window and document.

 

• Create a User's Store object that handles all storage responsibilities (to window.localStorage) with the following methods:

 

• add(object)
• get(id)
• getAll() (returns an array of users)
• update(object)
• remove(id)

 

• Add a view object for the following UI areas:

 

• User Master
• User Details
• Messages

 

• The controller should communicate to the view what data it should display.

 

• Update the User Details view with the following features:

 

• Use spans for all read only fields.
• Use a form element and a button type=submit to allow for HTML5 form validation (form input elements are required).
• Listen to the form submit event and prevent the default. 
• Use a hidden input field for keeping track of the current user's unique id.

 

• Your views, controller, and store objects may be prototyped objects or simple objects {}.

 

• The data object for the user does not need to be a prototyped object.