wsR185cF

1
2// For full API documentation, including code examples, visit http://wix.to/94BuAAs
3
4import wixData from 'wix-data';
5
6 
7
8// Javascript Class to manage dropdown data filtering
9
10// When an object created from this class is given a dataset with the fields 'service', 'inverterType' and 'supplierName'
11
12// The object will generate unique column lists formatted to be passed directly to a $w.DropDown.options property.
13
14class dropDownData {
15
16    constructor(recordList = []) {
17
18        this.updateRecordList(recordList);
19
20    }
21
22 
23
24    // Call this function to initialise the object data set and reset the column lists.
25
26    updateRecordList(recordList) {
27
28        this.list = recordList;
29
30        this.resetFieldLists();
31
32    }
33
34 
35
36    resetFieldLists() {
37
38        this.departments = [];
39
40        this.courses = [];
41
42    }
43
44 
45
46// Returns a unique list based on the values in the departments column
47
48    // The list contains objects with key value pairs for the keys 'label' and 'value'
49
50    departmentsList() {
51
52        if (this.departments.length === 0) {
53
54            // We haven't initialised serviceList yet yet so set it up
55
56            this.departments = this.uniqueColumnListForField('department');
57
58        }
59
60        return this.departments;
61
62    }
63
64 
65
66    // Returns a unique list based on the values in the inverterType column
67
68    // The list contains objects with key value pairs for the keys 'label' and 'value'
69
70    coursesList() {
71
72        if (this.courses.length === 0) {
73
74            // We haven't initialised inverterList yet yet so set it up
75
76            this.courses = this.uniqueColumnListForField('course');
77
78        }
79
80        return this.courses;
81
82    }
83
84 
85
86    // Helper method for extracting column records and making them unique
87
88    // All list methods use this to generate list containing objects with
89
90    // key value pairs for the keys 'label' and 'value' which is expected
91
92    //by the $w.DropDown.options property
93
94    uniqueColumnListForField(field) {
95
96        let result = [];
97
98        let uniqueValues = []; // Used to ensure values in the list are unique
99
100        this.list.forEach(item => {
101
102            let fieldValue = item[field];
103
104            // Only store field values that we haven't yet seen. Skip null values
105
106            if (fieldValue && !uniqueValues.includes(fieldValue)) {
107
108                uniqueValues.push(fieldValue); // Remember this value to maintain uniqueness
109
110                // Save the resulting information in the format required by the DropDown options list.
111
112                result.push({'label':fieldValue, 'value':fieldValue});
113
114            }
115
116        });
117
118        // Return the list sorted by the label of the options list.
119
120        return sortObjectArrayBy(result, "label");
121
122    }
123
124}
125
126 
127
128let dropDownRecords = new dropDownData();
129
130 
131
132$w.onReady(function () {
133
134    //We initialise the drop downs here once the data we need is available.
135
136    $w('#dataset1').onReady(() => {
137
138        updateDropDownOptions();
139
140    });
141
142});
143
144 
145
146// We update the drop down lists from the currently filtered dataset.
147
148// The data set is filtered by values from the drop down lists
149
150function updateDropDownOptions() {
151
152    // Use getItems to load all items available from the filtered dataset
153
154    // When we apply a filter (see updateRepeaterFilter()) this gets called to reload the drop downs
155
156    $w('#dataset1').getItems(0,$w('#dataset1').getTotalCount())
157
158        .then((results) => {
159
160            // Update our dropdown object with the new data record list
161
162            dropDownRecords.updateRecordList(results.items);
163
164            // Load/Reload dropdown data sets from our dropdown list data object
165
166            $w('#departmentList').options = dropDownRecords.departmentsList();
167
168            $w('#courseList').options = dropDownRecords.coursesList();
169
170        });
171
172}
173
174 
175
176// Function to filter dataset based upon the filter drop down values
177
178function updateRepeaterFilter() {
179
180    // Empty filter will remove existing filters so if none of the dropdowns have values all
181
182    // Table records will be available to the repeater.
183
184    let repeaterFilter = wixData.filter();
185
186    // If we have any filter values we simply join them together using .eq()
187
188    if ($w('#departmentList').value) {
189
190        repeaterFilter = repeaterFilter.eq('department', $w('#departmentList').value);
191
192    }
193
194    if ($w('#courseList').value) {
195
196        repeaterFilter = repeaterFilter.eq('course', $w('#courseList').value);
197
198    }
199
200    // Update the filter on the dataset
201
202    $w('#dataset1').setFilter(repeaterFilter)
203
204    .then(() => {
205
206        // When we get here the dataset will be filtered so we need to reset the drop downs from the
207
208        // newly filtered record list
209
210        updateDropDownOptions();
211
212    });
213
214}
215
216 
217
218// Helper functions triggered when we make a filter list selection in a drop down
219
220export function departmentList_change(event) {
221
222    //Add your code for this event here:
223
224    updateRepeaterFilter();
225
226}
227
228 
229
230export function courseList_change(event) {
231
232    //Add your code for this event here:
233
234    updateRepeaterFilter();
235
236}
237
238 
239
240// Because the filter for the repeater uses multiple fields and these result in restricting the dropdown
241
242// Option lists we need to reset the drop down lists to undefined to get all of the options back and
243
244// repopulate the repeater.
245
246// We could have a reset option as a button next to each drop down or add a drop down option of reset but this
247
248// works for the purposes of this example
249
250export function resetButton_click(event, $w) {
251
252    // Reset the filter list undefined forces the dropdown placeholder text to be displayed.
253
254    $w('#departmentList').selectedIndex = undefined;
255
256    $w('#courseList').selectedIndex = undefined;
257
258    // With no drop down values selected the repeater filter will be cleared and all repeater items
259
260    // will be displayed
261
262    updateRepeaterFilter();
263
264}
265
266// Because the filter for the repeater uses multiple fields and these result in restricting the dropdown
267
268// Dedicated function that can be used to sort an array of objects. It takes the array and the name of the object property to sort by.
269
270function sortObjectArrayBy(objectArray, objectProperty = "label") {
271
272    // Check if we have an array
273
274    let result = objectArray;
275
276    if (objectArray instanceof Array) {
277
278        // We have a valid Array lets get the list of properties
279
280        // We will use the sort function which uses a compare function to determine how to sort the array
281
282        result = objectArray.sort((a,b) => {
283
284            // a and b contain objects from the array to compare.
285
286            // We will sort by the objectProperty so extract the property value to compare with
287
288            let propertyA = a[objectProperty];
289
290            let propertyB = b[objectProperty];
291
292            let compareResult = 0; // Default the same
293
294            if (typeof propertyA === "string" && typeof propertyB === "string") {
295
296                // We have two values to compare
297
298                compareResult = propertyA.localeCompare(propertyB);
299
300            }
301
302            return compareResult;
303
304        });
305
306    }
307
308    return result;
309
310}