Suggestion on Filelist sort order
-
@stuartofmt just click the column name and it will sort by that
-
Which column name are you referring to ? I'm using DueUI. I do not see any column names in the widget ??
-
This is the quick hack I made to Dueui_widget.js (see comments) -- but it's not exactly configurable .....
class DueuiFileDropdownWidget extends DueuiSelectWidget { constructor(config, parent){ super($.extend(true, { }, config), parent); this.refresh(); //Added to force sort by date this.sort="date"; <snip> async refresh() { this.jq.empty(); let files = await dueui.getFileList(this.directory); let options = []; this.jq.append(`<option value="#####">Select a file...</option>`) for (let fe of files) { //added date element to allow sorting options.push({"value": fe.name, "label": this.formatName(fe.name), "date": fe.date}); } if (this.sort && (this.sort === "label" || this.sort === "file")) { if (this.sort === "file") { this.sort = "value"; } options.sort((a, b) => { return a[this.sort].localeCompare(b[this.sort]); }); //else if added for date sorting } else if (this.sort === "date"){ options.sort(); options.reverse(); } else { options.sort(); } <snip>
-
@stuartofmt sorry, my bad. Missed this was in the dueui category.
Disregard my comment -
NP - in an active forum like this - it's easy to do
-
I can add that to the config for the widget.
-
I just realized that changing the sort setting in the config file to:
"element_configs": [ { "id": "selectafile", "type": "file_select", "directory": "/gcodes/", <snip> "sort": "date", <snip>
and also making the suggested changes to dueui_widget.js (without the line this.sort="date" ) makes it easily switchable.
-
Since I have been fiddling to gain a better working knowledge of js. Thought I'd pass on my attempt to rewrite the relevant portion of the filelist code.
If it's useful / saves you some time - great. If not, it was an interesting exercise.async refresh() { this.jq.empty(); let files = await dueui.getFileList(this.directory); let options = []; this.jq.append(`<option value="#####">Select a file...</option>`) for (let fe of files) { let element = {}; element["value"] = fe.name; element["label"] = this.formatName(fe.name); if (this.sort === ("date"||"size")) { //the current possible values are only type, name, size, date element[this.sort] = fe[this.sort]; } options.push(element); } // Set the sort element if (this.sort !== ("date"||"size")) { this.sort = "value"; } // Sort ascending by default options.sort((a, b) => {return a[this.sort].localeCompare(b[this.sort]);}); // Reverse it if necessary if (this.ascending === false) { options.reverse(); }
The default (no sort or ascending variable) as alphabetic ascending.
For descending by date - I add these values in my config file.
"element_configs": [ { "id": "selectafile", "type": "file_select", "directory": "/gcodes/", <snip> "sort": "date", "ascending": false, <snip> },
-
Of course - as I went to sleep, I realized that (1) the if statement inside the iteration loop was not a good idea and (2) at a practical level, there were only three use-cases and (3) the sort on size was wrong.
So here is at least a better attempt.async refresh() { this.jq.empty(); let files = await dueui.getFileList(this.directory); let options = []; this.jq.append(`<option value="#####">Select a file...</option>`) if (this.sort === "date") { for (let fe of files) { options.push({"value": fe.name, "label": this.formatName(fe.name), "date": fe.date}); } } else if (this.sort === "size"){ for (let fe of files) { options.push({"value": fe.name, "label": this.formatName(fe.name), "size": fe.size}); } } else { for (let fe of files) { options.push({"value": fe.name, "label": this.formatName(fe.name)}); } } // Set the sort element if (this.sort === "date") { options.sort((a, b) => {return a[this.sort].localeCompare(b[this.sort]);}); } else if (this.sort === "size") { options.sort((a, b) => {return parseInt(a[this.sort]) - parseInt(b[this.sort]);}); } else { this.sort = "value"; options.sort((a, b) => {return a[this.sort].localeCompare(b[this.sort]);}); } // Sorted ascending by above // Reverse it if necessary if (this.ascending === false) { options.reverse(); }
-
I woke this morning recognizing the two main if statements - in the above - can now be merged - making the whole thing quite tidy.