Challenge Overview
Challenge Summary
Welcome, everyone! The goal of this challenge is to update the frontend app from a given design using Angular.
Project Overview
In this challenge, we are looking to design a user-friendly interface design for Hestia Locations MDM Application. This web-based application will allow an effective process for employees to view, manage, and maintain Locations data.
The Hestia team is currently using a cumbersome spreadsheet and interface to view information about their numerous locations. A large amount of complex data is not easily organized into views that are helpful or efficient for users to extract the information they need. Ferguson is looking for a more robust and user-friendly method to see and manage this wealth of data.
Below are general concepts:
The campus is the parent unit of a location. There may be multiple Locations within that Campus, and multiple Child Locations within that Location. The data can be drilled into 3 distinct hierarchies, with attributes to organize the data in a cascading way. These 3 hierarchies and grouping attributes are:
- Base Structure – Campus > LOB > Child Location (e.g. Showroom, Counter, Warehouse, etc.): Result: List of Locations
- Physical Hierarchy: Region > State > City > Child Location Type > Result: List of Locations
- Management Hierarchy: LOB > Region > District > Area > LOB Cost Center > Inventory Org: Result: List of Locations
Each location will be associated with all of the available attributes and values (from all 3 hierarchy paths). These details will be available for display (or edit) when the user selects a specific Location to view (Locations Detail screen).
In these series of challenges, we want to add the remaining page, here is the previous challenge.
Implement the screens related to
- Edit Address
- Edit Business Info
- Edit Operating Hours
- Edit Contacts
- Other edits
- Manage Addresses
- Manage Calendars
- Manage Employee Roles
- Add Child Location
- Delete child Location Popup
Technology Stack
Angular 9, TypeScript, SCSS, HTML 5
Browser Requirements
Windows: IE 11+, Edge, Chrome latest
Mac: Safari Latest, Edge, Chrome Latest
iOS Mobile & Tablet: Chrome & safari
Android Mobile & Tablet: Chrome
Assets
The following items are shared on the forum
- Design source file developed on Adobe Xd
- Marvel App
Individual Requirements
Authentication: This will be done in the future challenges with Single Sign-On using Azure Active Directory.
Roles: The application will be role-based access control(RBAC). There will be the following roles.
- Normal User: Can view only
- Editor: can view and edit locations data
- Admin: can view, edit, and create new location details as well.
Implement the screens related to
- Edit Address (Editor Only)
- Edit Business Info (Editor Only)
- Edit Operating Hours (Editor Only)
- Edit Contacts (Editor Only)
- Other edits
- Manage Addresses (Admin only)
- Manage Calendars (Admin only)
- Manage Employee Roles (Admin only)
- Add Child Location (Admin only)
- Delete child Location Popup (Admin Only)
The details of the screen with the business flow is shared on the forum. If there is any confusion let's clarify on the forum.
General Requirements
- This application should be a fully responsive app
- Do not use browser alerts
- Add proper code comments
- Implement validation errors.
- Follow angular best practices
- No linting errors.
- No errors with prod build
- Divide the components into meaningful components that can be reusable
- All data should come from a mock API.
Final Submission Guidelines
Submit the zip containing
- Angular source code with a detailed readme and verification guide
- Verification guide should show flow for a different role