Suggestion on Filelist sort order

jay_s_uk

@stuartofmt just click the column name and it will sort by that

stuartofmt

Which column name are you referring to ? I'm using DueUI. I do not see any column names in the widget ??

stuartofmt

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>

jay_s_uk

@stuartofmt sorry, my bad. Missed this was in the dueui category.
Disregard my comment

stuartofmt

@jay_s_uk

NP - in an active forum like this - it's easy to do

gtj0

I can add that to the config for the widget.

stuartofmt

@gtj0

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.

stuartofmt

@gtj0

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>
		},

stuartofmt

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();
}

stuartofmt

I woke this morning recognizing the two main if statements - in the above - can now be merged - making the whole thing quite tidy.