Description
Objective: To work with our Teams API on the client-side to produce a rich user interface for accessing data. We will practice using well-known CSS/JS code and libraries including Lodash, Moment.js, jQuery & Bootstrap Specification: For this assignment, we will be focusing specifically on Employees of the system. We will create a single, searchable table that shows a subset of the employee data (ie: columns: First Name, Last Name & Position). When the user clicks on a specific employee (row) in the table, they will be shown a modal window that contains additional detail about the employee. We will be making use of the Bootstrap framework to render our HTML, jQuery to work with the DOM and Lodash / Moment.js to format the data. The Solution Directory The directory for your solution should have the following folders / files: This is assuming that you wish to use SASS (.scss) to manage your .css (If you do not wish to use .scss, you do not need the “scss” directory). You can also grab the bootstrap-header-table.css file from our Code Examples located here Using the “bootstrap-header-table” .html & .css will help us to create a table structure using the Bootstrap Responsive Grid Classes that will only scroll the “body rows” of the “table” and not the “header row”. A solution like this is necessary for our UI simply because we wish to render so many employees (all 300) Creating the Static HTML: The first step in developing the solution is to create some Static HTML as a framework for our dynamic content. You may use your “index.html” file from Assignment 1 as a starting point: Navbar Assignment 2 will use a similar navbar, only without the dropdown menu on the right-hand side. • To fully remove the dropdown, we will remove the “navbar-toggle-collapsed” button, all elements with the class “icon-bar” and the
element with class “modal-title”. We will be using jQuery to populate this with the selected Employee’s First & Last Names • Remove the
element with the text “One fine body…” from the
• Next, Invoke the template function and provide the “employees” array as part of the parameter. • Add the results from invoking the template function (this should be a string containing 300 “body-row” elements – one per employee) as a child of the “employees-table” element. • NOTE: It is vital that the “employees-table” is cleared of any existing “body-row” elements, before adding any new ones. Function: getFilteredEmployeesModel(filterString) When invoked, this function will perform the following actions, pertaining to the global “employeesModel” array: • Returns a filtered version of the “employeesModel” array using the following rule: o Any employee object in the “employeesModel” array whose .FirstName, .LastName, or .Position.PositionName properties contain the local “filterString” (provided to the function) will be added to the filtered array. This will allow the user to filter all 3 columns of the table with a single string. o NOTE: This operation is not case sensitive • Hint: The Lodash _.filter() method is perfect for this type of operation Function: getEmployeeModelById(id) When invoked, this function will search the global “employeesModel” array for an Employee whose _id matches the local “id” (provided to the function). • If the employee is found, a deep copy of the employee object is returned • If the employee is not found, null is returned jQuery DOM “ready” function: $(function() { … }); When the DOM is ready, we need to perform some initial tasks including, wiring up events and populating the page with data. This includes: • Invoking the initializeEmployeesModel() function to fetch the data and populate our employees table • Wiring up the “keyup” event for the Search Field (“employee-search”) that performs the following actions when triggered: o Invokes the getFilteredEmployeesModel() function with the current value of the “Search Field” (this will return a filtered array using the “Search Field” string) o Next, invokes the refreshEmployeeRows() function with the filtered array – this will show only “filtered” rows to the user, ie: • Wiring up the “click” event for every single (current and future) element with the class “bodyrow” that performs the following actions when triggered: o Gets a copy of the clicked employee by invoking the getEmployeeModelById function with the value of the “data-id” attribute of the clicked element (recall, every “body-row” element has a “data-id” attribute that stores that particular employee’s _id value) o Convert the HireDate property of the clicked employee (returned from getEmployeeModelById) into a more readable format using Moment.js (for example: “November 7, 2010”) o Define a Lodash template using “escape” delimiters to produce the following html structure for a clicked employee. NOTE: The [ … ] represents a placeholder for a specific value: Address: [all “Address” fields for the employee]
Phone Number: [the phone number and extension for the employee]
Hire Date: [The hire date formatted in a readable way] o Invoke the template function and provide the clicked employee as part of the parameter. Be sure to store the result (html string) for the next step. o Invoke the showGenericModal function using the clicked employee’s First & Last Name for the “title” parameter and the result from invoking the template function, for the “message” parameter. This will show the following modal window to the user (for Zsa zsa Mannering, for example): Assignment Submission: • Add the following declaration at the top of your main.js file /********************************************************************************* * WEB422 – Assignment 2 * I declare that this assignment is my own work in accordance with Seneca Academic Policy. * No part of this assignment has been copied manually or electronically from any other source * (including web sites) or distributed to other students. * * Name: ______________________ Student ID: __________________ Date: ____________________ * * ********************************************************************************/ • Compress (.zip) the files in your Visual Studio working directory (this is the folder that you opened in Visual Studio to create your client side code). Important Note: • NO LATE SUBMISSIONS for assignments. Late assignment submissions will not be accepted and will receive a grade of zero (0). • After the end (11:59PM) of the due date, the assignment submission link on My.Seneca will no longer be available. • Submitted assignments must run locally, ie: start up errors causing the assignment/app to fail on startup will result in a grade of zero (0) for the assignment.