Allow sorting of files

main.js

@@ -31,7 +31,6 @@ function createWindow() {
         backgroundColor: '#353b48',
         webPreferences: {
             nodeIntegration: true,
-            webSecurity: false,
         },
         icon: path.join(__dirname, 'src/assets/icon.png'),
     });

src/app/config/config.service.ts

@@ -211,6 +211,14 @@ export class ConfigService {
     public getFilamentDensity(): number {
         return this.config.filament.density;
     }
+
+    public getDefaultSortingAttribute(): 'name' | 'date' | 'size' {
+        return this.config.octodash.fileSorting.attribute;
+    }
+
+    public getDefaultSortingOrder(): 'asc' | 'dsc' {
+        return this.config.octodash.fileSorting.order;
+    }
 }
 
 export interface Config {
@@ -283,8 +291,8 @@ interface CustomAction {
 }
 
 interface FileSorting {
-    attribute: string;
-    order: string;
+    attribute: 'name' | 'date' | 'size';
+    order: 'asc' | 'dsc';
 }
 
 const schema = {

src/app/files.service.ts

@@ -64,6 +64,7 @@ export class FilesService {
                                     type: 'file',
                                     path: '/' + fileOrFolder.path,
                                     name: fileOrFolder.name,
+                                    date: fileOrFolder.date,
                                     size: this.service.convertByteToMegabyte(fileOrFolder.size),
                                     printTime: this.service.convertSecondsToHours(
                                         fileOrFolder.gcodeAnalysis.estimatedPrintTime,
@@ -73,9 +74,6 @@ export class FilesService {
                             }
                         });
                         data = null;
-                        folder.sort((a, b): number =>
-                            a.type === b.type ? (a.name > b.name ? 1 : -1) : a.type === 'folder' ? -1 : 1,
-                        );
 
                         resolve(folder);
                     },

src/app/files/files.component.html

@@ -6,8 +6,8 @@
         <td class="top-bar__center">
             <img src="assets/folder.svg" class="top-bar__center-icon">
         </td>
-        <td class="top-bar__next" (click)="openFolder(currentFolder)" matRipple [matRippleUnbounded]="false">
-            refresh<img src="assets/refresh.svg" class="top-bar__next-icon">
+        <td class="top-bar__next" (click)="openSorting()" matRipple [matRippleUnbounded]="false">
+            sort<img src="assets/sort.svg" class="top-bar__next-icon">
         </td>
     </tr>
 </table>
@@ -107,3 +107,55 @@
         can't load file.
     </div>
 </div>
+
+<div class="sorting" id="sortingView" *ngIf="showSorting">
+    <div class="sorting-wrapper">
+        <img src="assets/error.svg" class="sorting-close" (click)="closeSorting()">
+        <span class="sorting-heading">sort files</span>
+        <table class="sorting-selection">
+            <tr>
+                <td>
+                    <span style="font-size: 2.9vw">sort by</span> <br>
+                    <div class="sorting__checkbox-container"
+                        (click)="sortingAttribute = 'name'">
+                        <span class="sorting__checkbox">
+                            <span class="sorting__checkbox-checked"
+                                *ngIf="sortingAttribute === 'name'"></span>
+                        </span> <span class="sorting__checkbox-descriptor">Name</span>
+                    </div> <br>
+                    <div class="sorting__checkbox-container"
+                        (click)="sortingAttribute = 'date'">
+                        <span class="sorting__checkbox">
+                            <span class="sorting__checkbox-checked"
+                                *ngIf="sortingAttribute === 'date'"></span>
+                        </span> <span class="sorting__checkbox-descriptor">Date</span>
+                    </div> <br>
+                    <div class="sorting__checkbox-container"
+                        (click)="sortingAttribute = 'size'">
+                        <span class="sorting__checkbox">
+                            <span class="sorting__checkbox-checked"
+                                *ngIf="sortingAttribute === 'size'"></span>
+                        </span> <span class="sorting__checkbox-descriptor">Size</span>
+                    </div> <br>
+                </td>
+                <td>
+                    <span style="font-size: 2.9vw">order</span> <br>
+                    <div class="sorting__checkbox-container"
+                        (click)="sortingOrder = 'asc'">
+                        <span class="sorting__checkbox">
+                            <span class="sorting__checkbox-checked"
+                                *ngIf="sortingOrder === 'asc'"></span>
+                        </span> <span class="sorting__checkbox-descriptor">Ascending</span>
+                    </div> <br>
+                    <div class="sorting__checkbox-container"
+                        (click)="sortingOrder = 'dsc'">
+                        <span class="sorting__checkbox">
+                            <span class="sorting__checkbox-checked"
+                                *ngIf="sortingOrder === 'dsc'"></span>
+                        </span> <span class="sorting__checkbox-descriptor">Descending</span>
+                    </div> <br>
+                </td>
+            </tr>
+        </table>
+    </div>
+</div>

src/app/files/files.component.scss

@@ -264,3 +264,93 @@
         }
     }
 }
+
+.sorting {
+    display: block;
+    position: fixed;
+    background-color: rgba(0, 0, 0, .85);
+    left: 0;
+    top: 0;
+    width: 100vw;
+    height: 100vh;
+    opacity: 0;
+    z-index: 10;
+    transition: opacity ease-in-out .5s;
+
+    &-close {
+        position: absolute;
+        right: 1.5vw;
+        top: 2vh;
+        width: 4vw;
+    }
+
+    &-wrapper {
+        position: fixed;
+        left: 25vw;
+        top: 24vh;
+        width: 50vw;
+        height: 47vh;
+        background-color: #353b48;
+        z-index: 10;
+        border-radius: 2vw;
+        padding: 2vh 1.5vw;
+        box-shadow: 8px 4px 18px 0 rgba(0, 0, 0, 0.75);
+    }
+
+    &-heading {
+        display: block;
+        font-size: 3.5vw;
+        margin-bottom: 1vh;
+        font-weight: 500;
+    }
+
+    &-selection {
+        padding-left: 4vw;
+        display: block;
+
+        & td {
+            width: 30vw;
+        }
+    }
+
+    &__checkbox {
+        position: absolute;
+        top: 0;
+        left: 0;
+        height: 3vw;
+        width: 3vw;
+        background-color: transparent;
+        border: 2px solid #dcdde1;
+        border-radius: 1vw;
+
+        &-container {
+            display: inline-block;
+            position: relative;
+            user-select: none;
+            padding-left: 5vw;
+            height: 4.5vw;
+            margin-top: 1.4vh;
+            cursor: pointer;
+            overflow: visible;
+        }
+
+        &-checked {
+            background-color: #2196F3;
+            width: 1.8vw;
+            height: 1.8vw;
+            display: block;
+            margin-left: .6vw;
+            margin-top: .6vw;
+            border-radius: .4vw;
+
+            &-disabled {
+                background-color: rgba(255, 255, 255, .5)
+            }
+        }
+
+        &-descriptor {
+            font-size: 2.5vw;
+            vertical-align: 2vh;
+        }
+    }
+}

src/app/files/files.component.ts

@@ -3,6 +3,7 @@ import { Router } from '@angular/router';
 import { NgxSpinnerService } from 'ngx-spinner';
 
 import { AppService } from '../app.service';
+import { ConfigService } from '../config/config.service';
 import { File, FilesService, Folder } from '../files.service';
 import { JobService } from '../job.service';
 
@@ -15,17 +16,23 @@ export class FilesComponent {
     public currentFolder: string;
     public folderContent: (File | Folder)[];
     public fileDetail: File;
+    public sortingAttribute: 'name' | 'date' | 'size';
+    public sortingOrder: 'asc' | 'dsc';
+    public showSorting: boolean = false;
 
     public constructor(
         private filesService: FilesService,
         private spinner: NgxSpinnerService,
         private service: AppService,
         private router: Router,
         private jobService: JobService,
+        private configService: ConfigService,
     ) {
         this.showLoader();
         this.folderContent = [];
         this.currentFolder = '/';
+        this.sortingAttribute = this.configService.getDefaultSortingAttribute();
+        this.sortingOrder = this.configService.getDefaultSortingOrder();
         this.openFolder(this.currentFolder);
     }
 
@@ -54,16 +61,63 @@ export class FilesComponent {
                 .then((data): void => {
                     this.folderContent = data;
                     this.currentFolder = folderPath;
+                    this.sortFolder(this.sortingAttribute, this.sortingOrder);
                     this.spinner.hide();
                 })
-                .catch(({}): void => {
+                .catch((err): void => {
+                    console.error(err);
                     this.folderContent = null;
                     this.currentFolder = folderPath;
                     this.spinner.hide();
                 });
         }, 300);
     }
 
+    public sortFolder(by: 'name' | 'date' | 'size' = 'name', order: 'asc' | 'dsc' = 'asc'): void {
+        switch (by) {
+            case 'name': {
+                this.folderContent.sort((a, b): number =>
+                    a.type === b.type
+                        ? (order === 'asc'
+                            ? a.name > b.name
+                            : a.name < b.name)
+                            ? 1
+                            : -1
+                        : a.type === 'folder'
+                        ? -1
+                        : 1,
+                );
+                break;
+            }
+            case 'date': {
+                this.sortFolder('name', order);
+                this.folderContent.sort((a, b): number => {
+                    if (a.type === b.type && a.type === 'file') {
+                        const aFile = (a as unknown) as File;
+                        const bFile = (b as unknown) as File;
+                        return (order === 'asc' ? aFile.date > bFile.date : aFile.date < bFile.date) ? 1 : -1;
+                    } else {
+                        return a.type === 'folder' ? -1 : 1;
+                    }
+                });
+                break;
+            }
+            case 'size': {
+                this.sortFolder('name', order);
+                this.folderContent.sort((a, b): number => {
+                    if (a.type === b.type && (a as File).type) {
+                        const aFile = (a as unknown) as File;
+                        const bFile = (b as unknown) as File;
+                        return (order === 'asc' ? aFile.size > bFile.size : aFile.size < bFile.size) ? 1 : -1;
+                    } else {
+                        return 1;
+                    }
+                });
+                break;
+            }
+        }
+    }
+
     public closeDetails(): void {
         const fileDOMElement = document.getElementById('fileDetailView');
         fileDOMElement.style.opacity = '0';
@@ -73,6 +127,24 @@ export class FilesComponent {
         }, 500);
     }
 
+    public openSorting(): void {
+        this.showSorting = true;
+        setTimeout((): void => {
+            const sortingDOMElement = document.getElementById('sortingView');
+            sortingDOMElement.style.opacity = '1';
+        }, 50);
+    }
+
+    public closeSorting(): void {
+        const sortingDOMElement = document.getElementById('sortingView');
+        sortingDOMElement.style.opacity = '0';
+        this.sortFolder(this.sortingAttribute, this.sortingOrder);
+        setTimeout((): void => {
+            sortingDOMElement.style.display = 'none';
+            this.showSorting = false;
+        }, 500);
+    }
+
     public loadFile(filePath: string): void {
         setTimeout((): void => {
             this.filesService.loadFile(filePath);

src/app/settings/settings.component.html

@@ -325,12 +325,12 @@
                         <li>"joystick" by ProSymbols from thenounproject.com</li>
                         <li>"Settings" by Karan from thenounproject.com</li>
                         <li>"help" by Rainbow Designs from thenounproject.com</li>
-                        <li>"Refresh" by Nawicon from thenounproject.com</li>
                         <li>"Upload" by Nikita Tcherednikov from thenounproject.com</li>
                         <li>"print" by Delta from thenounproject.com</li>
                         <li>"Delete" by Daily icons from thenounproject.com</li>
                         <li>"Heat" by Adrien Coquet from thenounproject.com</li>
                         <li>"cubes" by artworkbean from thenounproject.com</li>
+                        <li>"Sort" by Adrien Coquet from thenounproject.com</li>
                     </ul>
                     <span class="settings__heading-2">Special Thanks</span>
                     <p class="settings__text">