Hoherberg Ski School Frontend Code Challenge Series #3 - Products and Instructors Build

App environment:
- ASP.Net MVC Core

Basic requirements for this challenge:
- Continue build ASP.Net MVC Core application based on storyboard design with focus on Products and Instructors Build
- Make sure your submission running okay on IE11, test existing and new pages
- Important: We running parallel challenge to build another pages on the frontend. Your updated code as possible need use separate folder for this challenge, to make easier for us when merge all codes later.

Challenge Overview
Hoherberg Ski School is very excited to see how the application look on real life based on previous winning storyboard. This web application need build using ASP.Net MVC Core with focus on desktop resolution only.

This is the 3rd of Hoherberg Ski School Frontend Challenge Series. For this challenge we need you to focus specifically on the Products & Instructors section and remain use "code structure" from previous challenge. Expected submission from this challenge need appear as one set of application that follow existing code format and rules.

Good luck and let's discuss any questions you have. See you in the challenge forum!

Technology Stack
- ASP.Net MVC Core
- HTML5
- CSS3
- Javascript
- Jquery
- Do not use Bootstrap!

Deployment environment requirements
- localhost
- Heroku

Ragnar:
Check challenge forum to see the url.

Challenge Assets:
Source File : https://drive.google.com/open?id=0BxNVnWK-ZGA6bl80eVdjVWZDTVk
Fonts: https://fonts.google.com/?selection.family=Roboto:300,400,500

Note:
Adobe XD is free and cross-platform (MacOS and Windows)
You can download Adobe XD for FREE here: https://www.adobe.com/products/xd.html

MarvelApp Flow
https://marvelapp.com/4gjed11

General Requirements:
- You must use ASP.Net MVC Core for this base of app.
- Getting started on ASP.Net MVC Core here: https://docs.microsoft.com/en-us/aspnet/core/getting-started/?view=aspnetcore-2.1&tabs=macos
- You can choose some ASP.Net MVC Core library to help build your submission. As long they are open source.
- Suggest best practice developing this application on ASP.Net MVC Core. You can start read this article and implement on your submission: https://www.codemag.com/article/1405071/10-Good-Practices-for-ASP.NET-MVC-Apps
- You may use open source frameworks/libraries (MIT or similar licensed). Let us know if need confirmation. You can start from this url: https://github.com/quozd/awesome-dotnet
- Use SCSS variables and mixins from the global stylesheets.
- Make sure you submission support unit testings
- Right now you can set min-width for 1366px as storyboard screen, but application must support fluid width.
- Important: Application performance must fast and lightweight! Keep in mind when you build the app.

Individual Requirements
1) Instructors

• This is Instructors page look (Screenshot: 07_Instructors_A_1.png)
• Add New Instructor button take user to Add New Instructor page below
• The user can type in the selection box to search for instructor names. In the actual application, the drop-down list will be filtered as the user types in the box.
• Details on the bottom will be change based on selected Instructor
• Boxes grouped by Instructor Profile, Teaching Range & Skills also the Base Schedule
• Click POD need load tree-view selection
• Match fields content like storyboard
• Need able to add multiple language
• Need able to add multiple Teaching Age Rage And Skill Level
• Base schedule displayed start and end date
• User can select daily availability
• User need able to revert changes and Save change
• Click revert changes need load the confirmation modal window
• Follow the success and error message based on storyboard
• Click save need load the information modal window

1a) POD Management modal window

• This modal show up when click POD Management button
• POD Management need load the modal window that will be able to manage the POD (Screenshot: 07_Instructors_A_2.png)
• Save change need save the pod and display success message (Screenshot: 07_Instructors_A_3.png)
• Revert change need save the pod and display success message (Screenshot: 07_Instructors_A_4.png)
• Click Add new POD need clear the form values and able to add new POD (Screenshot: 07_Instructors_A_5.png)
• Match POD level structure on the left side
• Need able to expand/collapse the tree view (Screenshot: 07_Instructors_A_6.png)
• Use custom scrollbar like on existing implementation
• This is dropdown that will contains tree view to select parent POD (Screenshot: 07_Instructors_A_7.png)
• This is checked on the Active checkbox
• Click Save change need load the success message (Screenshot: 07_Instructors_A_9.png)
• If editing existing structure, need load this success message (Screenshot: 07_Instructors_A_10.png)
• Revert change button need load confirmation modal window (Screenshot: 07_Instructors_A_11.png)
• Create how error design look in page (Screenshot: 07_Instructors_A_12.png)

2) Add New Instructor

• Screenshot: 07_Instructors_B_1.png
• This is add new instructor screen, user landed here from Add New Instructor button
• Boxes grouped by Instructor Profile, Teaching Range & Skills also the Base Schedule
• User filled some data (Screenshot: 07_Instructors_B_2.png)
• POD dropdown need load the POD tree view (Screenshot: 07_Instructors_B_3.png)
• User select Add Range & Skills (Screenshot: 07_Instructors_B_4.png & Screenshot: 07_Instructors_B_5.png)
• Need able to delete the Range and Skills (Screenshot: 07_Instructors_B_6.png)
• Need able to add Additional Instructor Notes
• User can toggles each days (Screenshot: 07_Instructors_B_7.png)

3) Products

• This is Products page look (Screenshot: 08_Product_A_1.png)
• Add New Product button take user to Add New Product page below
• Product Category Management need load the modal window that will be able to manage the Product Category
• The user can type in the selection box to search for product names. In the actual application, the drop-down list will be filtered as the product types in the box.
• Details on the bottom will be change based on selected product
• Boxes grouped by Product Profile, Product Schedule & Skills Level also the Assignment Grouping
• Click Product Category need load tree-view selection
• Change scheduling pattern need load different condition. Capture all separate screens
• Assignment Grouping need able to change from Seasonal, Private or Other
• Need able to Add Date Specific Buffers
• Datepicker and buffer text displayed in page
• User need able to remove the Instructor Buffer row
• Assigned user will display the instructor name
• User need able to revert changes and Save change
• If there’s Scheduling conflicts need able to see the details via modal window (Screenshot: 08_Product_A_11.png)
• Revert change need display the confirmation modal (Screenshot: 08_Product_A_12.png)
• Revert change need revert the values, display success message (Screenshot: 08_Product_A_13.png)
• Create error message (Screenshot: 08_Product_A_14.png)
• Need able to Unassigned and Swap
• Click Swap need load the Swap Instructor

3a) Add new Product Category modal window

• This is modal window that allow user to create new Product Category
• User landed to this screen after click the Add New Category button on Product Category Management
• Click category need load the tree view (Screenshot: 08_Product_A_3.png)
• Need able to expand the tree view (Screenshot: 08_Product_A_4.png)
• Need allow user to set the Category Color. (Screenshot: 08_Product_A_5.png)
• Need able to check the Days checkboxes (Screenshot: 08_Product_A_6.png)
• Create success message after new product added (Screenshot: 08_Product_A_7.png)

3a) Product Category Management modal window

• This modal show up when click Product Category Management button (Screenshot: 08_Product_A_8.png)
• This will contains Product Category details
• Click Add new Category need clear the from as design explained above
• Save change need display the success message (Screenshot: 08_Product_A_9.png)
• Revert change need revert the values (Screenshot: 08_Product_A_10.png)

4) Add New Product

• This is add new Product screen (Screenshot: 08_Product_B_1.png)
• Boxes grouped by Product Profile, Product Schedule & Skills Level also the Assignment Grouping
• Select Dropdown need load the product (Screenshot: 08_Product_B_1.png)
• Need able to expand the tree view (Screenshot: 08_Product_B_2.png)
• User filled some data (Screenshot: 08_Product_B_3.png)
• Change Scheduling pattern will display different fields (Screenshot: 08_Product_B_4.png)
• This is for Any option, user can pick multi-selection date (Screenshot: 08_Product_B_5.png)
• Click Add button need generate the selection date below (Screenshot: 08_Product_B_6.png)
• Assignment grouping also have different content based on selection
• This is for Seasonal (Screenshot: 08_Product_B_7.png)
• This is for Private (Screenshot: 08_Product_B_8.png)
• And this is for Other option (Screenshot: 08_Product_B_9.png)
• Need able to add Instructor (Screenshot: 08_Product_B_10.png)
• If there’s Scheduling conflicts need displayed in page
• Click unassign need remove the instructor
• Click Swap need load the modal window. You can reuse existing modal window like here: https://marvelapp.com/9dd26a4/screen/48612710

Web Browsers Requirements
Your submission must look and work consistently across these following browsers on the latest versions:  
- IE11
- Chrome,
- Edge,
- Safari,
- Firefox
 

Final Submission Guidelines

What To Submit?
- Patch file of updated source code based on the latest repo
- Upload your submission to live site for client review, Include the link on your README.md
- We need Video Demo of your submission!