Skip to content

Commit

Permalink
Allow sorting of files (#443)
Browse files Browse the repository at this point in the history 
* Started working

* Sorting by name works

* size and date working as well

* Respect config values

* Sorting UI

* update sorting icon
  • Loading branch information
@UnchartedBull
UnchartedBull committed Feb 20, 2020
1 parent da73dff commit 9fef3da
Show file tree
Hide file tree
Showing 9 changed files with 230 additions and 11 deletions.
1 change: 0 additions & 1 deletion main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,6 @@ function createWindow() {
backgroundColor: '#353b48',
webPreferences: {
nodeIntegration: true,
webSecurity: false,
},
icon: path.join(__dirname, 'src/assets/icon.png'),
});
Expand Down
12 changes: 10 additions & 2 deletions src/app/config/config.service.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -283,8 +291,8 @@ interface CustomAction {
}

interface FileSorting {
attribute: string;
order: string;
attribute: 'name' | 'date' | 'size';
order: 'asc' | 'dsc';
}

const schema = {
Expand Down
4 changes: 1 addition & 3 deletions src/app/files.service.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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);
},
Expand Down
56 changes: 54 additions & 2 deletions src/app/files/files.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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>
90 changes: 90 additions & 0 deletions src/app/files/files.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}
}
74 changes: 73 additions & 1 deletion src/app/files/files.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand All @@ -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);
}

Expand Down Expand Up @@ -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';
Expand All @@ -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);
Expand Down
2 changes: 1 addition & 1 deletion src/app/settings/settings.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
1 change: 0 additions & 1 deletion src/assets/refresh.svg
View file

This file was deleted.

1 change: 1 addition & 0 deletions src/assets/sort.svg
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 9fef3da

Please sign in to comment.