Project Overview
In my project, there is a system for managing small product orders. Users have the ability to add order lines and attach one or more products to each order line. While it may be uncommon to have multiple products on the same order line, this functionality is supported in the system.
The selection of products for each line is structured based on a hierarchy. As an example:
Sample Product Hierarchy
T-Shirts
V-neck
Round-neck
String vest
Data Structure (JSON)
$scope.products = [
{
id: 1,
name: 'T Shirts',
children: [
{ id: 4, name: 'Round-neck', children: [] },
{ id: 5, name: 'V-neck', children: [] },
{ id: 6, name: 'String vest (exclude)', children: [] }
]
},
{
id: 2,
name: 'Jackets',
children: [
{ id: 7, name: 'Denim jacket', children: [] },
{ id: 8, name: 'Glitter jacket', children: [] }
]
},
{
id: 3,
name: 'Shoes',
children: [
{ id: 9, name: 'Oxfords', children: [] },
{ id: 10, name: 'Brogues', children: [] },
{ id: 11, name: 'Trainers (exclude)', children: []}
]
}
];
While T-Shirts are not directly selectable, their child products can be added to the order line.
Objective
The primary goal is to implement a 'select all' button that automatically populates the order line with all three child products when clicked.
Additionally, the 'select all' functionality should exclude specific products based on their IDs as defined in the exclusion array.
A working demonstration of the shopping cart setup and desired behavior can be viewed on Plunker.
Current Functionality:
- Add or remove order lines
- Add or remove products
- Select all products within a section while excluding those listed in the exclusions array
Issue Faced
An existing problem revolves around checkbox input elements not triggering the expected ng-change action when checked via the 'select all' feature:
<table class="striped table">
...
JavaScript Enhancements
Efforts were made to ensure smoother integration by refactoring the code to avoid excessive DOM manipulation. The revised approach involved introducing a 'checked' property within the product data structure to accurately reflect selections and update the view accordingly.
This new method, though effective, poses potential challenges related to increased data payload due to storing information about all products for every order line, regardless of selection status.
Noteworthy was the learning point regarding object/array references in JavaScript versus creating new copies.
Solution Implementation
Javascript snippet outline:
var myApp = angular.module('myApp', []);
...
Explore the updated Plunker for a detailed solution overview.