From cb34c87324e23b7e7a1218c5bdeb2d5c7f64393e Mon Sep 17 00:00:00 2001
From: Damien Trouillet <contact@damien-trouillet.fr>
Date: Sat, 18 Dec 2021 01:15:24 +0100
Subject: [PATCH] Add pipe to sort

---
 src/app/chains/chains.component.ts |  2 +-
 src/app/files/files.component.html |  2 +-
 src/app/shared/shared.module.ts    |  7 +++++--
 src/app/shared/sort.pipe.ts        | 23 +++++++++++++++++++++++
 4 files changed, 30 insertions(+), 4 deletions(-)
 create mode 100644 src/app/shared/sort.pipe.ts

diff --git a/src/app/chains/chains.component.ts b/src/app/chains/chains.component.ts
index 7a1024f77..a49a1947e 100644
--- a/src/app/chains/chains.component.ts
+++ b/src/app/chains/chains.component.ts
@@ -21,7 +21,7 @@ export class ChainsComponent implements AfterViewInit, OnDestroy, OnInit {
   dtOptions: DataTables.Settings = {};
 
   chains: Chain[];
-  columns = []
+  columns = [];
 
   constructor(private environmentsService: EnvironmentsService,
               private chainsService: ChainsService,
diff --git a/src/app/files/files.component.html b/src/app/files/files.component.html
index c8f3cbfdb..a226aff24 100644
--- a/src/app/files/files.component.html
+++ b/src/app/files/files.component.html
@@ -99,7 +99,7 @@
               <a *ngIf="subDir.length > 0" (click)="exploreParentDirectory()" href="javascript:void(0)" class="btn btn-secondary btn-sm">{{'FILE.EXPLORE_UP' | translate}}</a>
             </td>
           </tr>
-          <tr *ngFor="let remotefile of remoteFiles">
+          <tr *ngFor="let remotefile of remoteFiles | sortBy:'asc':'name'">
             <td class="align-middle">
               {{remotefile.name}}
             </td>
diff --git a/src/app/shared/shared.module.ts b/src/app/shared/shared.module.ts
index 5ee251c50..eb0735180 100644
--- a/src/app/shared/shared.module.ts
+++ b/src/app/shared/shared.module.ts
@@ -28,6 +28,7 @@ import {YesNoPipe} from './yesno.pipe';
 import {ToastComponent} from './toast/toast.component';
 import {HasAnyRoleDirective} from './has-any-role/has-any-role.directive';
 import {ShowHideColumnComponent} from './show-hide-column/show-hide-column.component';
+import {SortByPipe} from './sort.pipe';
 
 @NgModule({
     imports: [
@@ -63,7 +64,8 @@ import {ShowHideColumnComponent} from './show-hide-column/show-hide-column.compo
         AvatarPipe,
         YesNoPipe,
         ToastComponent,
-        ShowHideColumnComponent
+        ShowHideColumnComponent,
+        SortByPipe
     ],
     exports: [
         CommonModule,
@@ -86,7 +88,8 @@ import {ShowHideColumnComponent} from './show-hide-column/show-hide-column.compo
         AvatarPipe,
         YesNoPipe,
         ToastComponent,
-        ShowHideColumnComponent
+        ShowHideColumnComponent,
+        SortByPipe
     ],
     providers: [
         DatePipe,
diff --git a/src/app/shared/sort.pipe.ts b/src/app/shared/sort.pipe.ts
new file mode 100644
index 000000000..0c51ef20e
--- /dev/null
+++ b/src/app/shared/sort.pipe.ts
@@ -0,0 +1,23 @@
+import {Pipe, PipeTransform} from '@angular/core';
+import {orderBy} from 'lodash';
+
+@Pipe({name: 'sortBy'})
+export class SortByPipe implements PipeTransform {
+
+    transform(value: any[], order = '', column: string = ''): any[] {
+        if (!value || order === '' || !order) {
+            return value;
+        } // no array
+        if (value.length <= 1) {
+            return value;
+        } // array with only one item
+        if (!column || column === '') {
+            if (order === 'asc') {
+                return value.sort();
+            } else {
+                return value.sort().reverse();
+            }
+        } // sort 1d array
+        return orderBy(value, [column], [order]);
+    }
+}