improved file table

Author: mariotaku

package-lock.json

@@ -34,6 +34,7 @@
   },
   "dependencies": {
     "@electron/remote": "1.1.0",
+    "@swimlane/ngx-datatable": "20.0.0",
     "@webosose/ares-cli": "2.1.0",
     "async-lock": "1.3.0",
     "electron-dl": "3.2.1",

package.json

@@ -29,6 +29,7 @@ import {SharedModule} from './shared/shared.module';
 import {UpdateDetailsComponent} from './update-details/update-details.component';
 import {AttrsPermissionsPipe} from './shared/pipes/attrs-permissions.pipe';
 import {NgxFilesizeModule} from 'ngx-filesize';
+import {NgxDatatableModule} from '@swimlane/ngx-datatable';
 
 // AoT requires an exported function for factories
 export function HttpLoaderFactory(http: HttpClient): TranslateHttpLoader {
@@ -65,6 +66,7 @@ export function HttpLoaderFactory(http: HttpClient): TranslateHttpLoader {
     ReactiveFormsModule,
     NgbModule,
     NgLetModule,
+    NgxDatatableModule,
     TranslateModule.forRoot({
       loader: {
         provide: TranslateLoader,

src/app/app.module.ts

@@ -200,6 +200,18 @@ export class DeviceManagerService {
     });
   }
 
+  async newSession2(name: string): Promise<NovacomSession> {
+    return new Promise<NovacomSession>((resolve, reject) => {
+      const session: any = new this.novacom.Session(name, (error: any) => {
+        if (error) {
+          reject(error);
+        } else {
+          resolve(new NovacomSession(session as Session));
+        }
+      });
+    });
+  }
+
   async sftpSession(name: string): Promise<SFTPSession> {
     return this.newSession(name).then(session => new Promise((resolve, reject) => {
       session.ssh.sftp((err, sftp) => {
@@ -291,6 +303,26 @@ export class CrashReport {
   }
 }
 
+export class NovacomSession {
+  constructor(private session: Session) {
+  }
+
+  public async get(inPath: string, outPath: string): Promise<void> {
+    return new Promise<void>((resolve, reject) => this.session.get(inPath, outPath, (err, result) => {
+      if (err) {
+        reject(err);
+      } else {
+        resolve(result);
+      }
+    }));
+  }
+
+  public end() {
+    this.session.end();
+    cleanupSession();
+  }
+}
+
 export class SFTPSession {
   constructor(private sftp: SFTPWrapper) {
   }

src/app/core/services/device-manager.service.ts

@@ -6,42 +6,45 @@
     <form class="form-inline">
     </form>
   </nav>
-  <div class="w-100 h-100 flex-fill overflow-auto">
-    <table class="files-table table table-striped">
-      <thead>
-      <tr>
-        <th>Name</th>
-        <th>Size</th>
-        <th>Permission</th>
-        <th>Owner</th>
-      </tr>
-      </thead>
-      <tbody>
-      <tr *ngFor="let file of (files$ | async)" (click)="onselect(file)">
-        <td class="name-col text-truncate">
-          <span class="pr-2" [ngSwitch]="file.type">
-            <i class="bi-folder-fill" *ngSwitchCase="'dir'"></i>
-            <i class="bi-file-earmark-fill" *ngSwitchCase="'file'"></i>
-            <i class="bi-gear-fill" *ngSwitchCase="'device'"></i>
-            <i class="bi-file-earmark-x-fill" *ngSwitchCase="'invalid'"></i>
-            <i class="bi-file-earmark-fill" *ngSwitchDefault></i>
-          </span>
-          <span>{{file.filename}}</span>
-          <span *ngIf="file.link" class="text-secondary">
-            <i class="bi-arrow-right-short px-1"></i>
-            {{file.link.target}}
-          </span>
-        </td>
-        <td class="property-col text-nowrap">
+  <div class="w-100 h-100 flex-fill position-relative">
+    <ngx-datatable class="files-table bootstrap position-absolute" [rows]="(files$ | async) || []" [columns]="columns"
+                   [rowHeight]="40" scrollbarH="true" scrollbarV="true" [sortType]="SortType.single"
+                   [selectionType]="SelectionType.single"
+                   (activate)="itemActivated($event.row, $event.type)">
+      <ngx-datatable-column name="Name" width="400" [sortable]="true" [canAutoResize]="true" [comparator]="compareName">
+        <ng-template let-file="row" ngx-datatable-cell-template>
+          <div class="text-nowrap">
+            <span class="pr-2" [ngSwitch]="file.type">
+              <i class="bi-folder-fill" *ngSwitchCase="'dir'"></i>
+              <i class="bi-file-earmark-fill" *ngSwitchCase="'file'"></i>
+              <i class="bi-gear-fill" *ngSwitchCase="'device'"></i>
+              <i class="bi-file-earmark-x-fill" *ngSwitchCase="'invalid'"></i>
+              <i class="bi-file-earmark-fill" *ngSwitchDefault></i>
+            </span>
+            <span>{{file.filename}}</span>
+            <span *ngIf="file.link" class="text-secondary">
+              <i class="bi-arrow-right-short px-1"></i>
+              {{file.link.target}}
+            </span>
+          </div>
+        </ng-template>
+      </ngx-datatable-column>
+      <ngx-datatable-column name="Size" [sortable]="false" [canAutoResize]="true" [comparator]="compareSize">
+        <ng-template let-file="row" ngx-datatable-cell-template>
           <span *ngIf="file.type === 'file'">{{file.attrs?.size | filesize:sizeOptions}}</span>
-        </td>
-        <td class="property-col text-nowrap">
+        </ng-template>
+      </ngx-datatable-column>
+      <ngx-datatable-column name="Permission" [sortable]="false" [canAutoResize]="true">
+        <ng-template let-file="row" ngx-datatable-cell-template>
           {{file.attrs?.mode | attrsPermissions}}
-        </td>
-        <td class="property-col text-nowrap">{{file.attrs?.uid}}</td>
-      </tr>
-      </tbody>
-    </table>
+        </ng-template>
+      </ngx-datatable-column>
+      <ngx-datatable-column name="Owner" [sortable]="false" [canAutoResize]="true">
+        <ng-template let-file="row" ngx-datatable-cell-template>
+          {{file.attrs?.uid}}
+        </ng-template>
+      </ngx-datatable-column>
+    </ngx-datatable>
   </div>
   <div class="stat-bar">
     <nav class="h-100 overflow-hidden float-right" aria-label="breadcrumb">

src/app/home/files/files.component.html

@@ -26,22 +26,14 @@
 }
 
 .files-table {
-  overflow-y: auto;
-  table-layout: fixed;
-
-  .name-col {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    width: auto;
-  }
-
-  .property-col {
-    width: 50px;
-  }
-
-  td {
-    vertical-align: middle;
-    padding-top: 5px;
-    padding-bottom: 5px;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+
+  datatable-body-cell {
+    padding-top: 0 !important;
+    padding-bottom: 0 !important;
+    vertical-align: center;
   }
 }

src/app/home/files/files.component.scss

@@ -4,8 +4,10 @@ import {Device} from "../../../types/novacom";
 import {BehaviorSubject, Observable, Subject} from "rxjs";
 import {Attributes, FileEntry} from 'ssh2-streams';
 import * as path from 'path';
+import * as fs from 'fs';
 import {MessageDialogComponent} from "../../shared/components/message-dialog/message-dialog.component";
 import {NgbModal} from "@ng-bootstrap/ng-bootstrap";
+import {SelectionType, SortType, TableColumn} from "@swimlane/ngx-datatable";
 
 @Component({
   selector: 'app-files',
@@ -17,15 +19,20 @@ export class FilesComponent implements OnInit {
   pwd: string;
   files$: Observable<FileItem[]>;
   sizeOptions = {base: 2, standard: "jedec"};
-  private dialog: Electron.Dialog;
+  columns: TableColumn[] = [{prop: 'filename', name: 'Name'}];
+  SortType = SortType;
+  SelectionType = SelectionType;
+  private remote: Electron.Remote;
   private filesSubject: Subject<FileItem[]>;
+  private fs: typeof fs;
 
   constructor(
     private modalService: NgbModal,
     private deviceManager: DeviceManagerService,
     private electron: ElectronService,
   ) {
-    this.dialog = electron.remote.dialog;
+    this.remote = electron.remote;
+    this.fs = electron.fs;
     deviceManager.selected$.subscribe((selected) => {
       this.device = selected;
       this.cd('/media/developer');
@@ -38,6 +45,7 @@ export class FilesComponent implements OnInit {
   }
 
   async cd(dir: string): Promise<void> {
+    if (!this.device) return;
     dir = path.normalize(dir);
     const sftp = await this.deviceManager.sftpSession(this.device.name);
     let list: FileItem[];
@@ -59,28 +67,58 @@ export class FilesComponent implements OnInit {
       return;
     }
     this.pwd = dir;
-    this.filesSubject.next(list.sort((a, b) => {
-      const dirDiff = (b.type == 'dir' ? 1000 : 0) - (a.type == 'dir' ? 1000 : 0);
-      return dirDiff + (a.filename > b.filename ? 1 : -1);
-    }));
+    this.filesSubject.next(list.sort(this.compareName.bind(this)));
   }
 
-  async onselect(file: FileItem): Promise<void> {
-    if (file.type == 'dir') {
-      await this.cd(path.resolve(this.pwd, file.filename));
-    } else if (file.type == 'file') {
-      const returnValue = await this.dialog.showSaveDialog({defaultPath: file.filename});
-      if (returnValue.canceled) return;
-      const sftp = await this.deviceManager.sftpSession(this.device.name);
-      await sftp.fastGet(file.abspath, returnValue.filePath).finally(() => sftp.end())
-        .catch((e) => MessageDialogComponent.open(this.modalService, {
-          title: 'Failed to download file',
-          message: e.message ?? String(e),
-          positive: 'OK',
-        }));
+  compareName(a: FileItem, b: FileItem): number {
+    const dirDiff = (b.type == 'dir' ? 1000 : 0) - (a.type == 'dir' ? 1000 : 0);
+    return dirDiff + (a.filename > b.filename ? 1 : -1);
+  }
+
+  compareSize(a: FileItem, b: FileItem): number {
+    return (a.type == 'file' ? (a.attrs?.size ?? 0) : 0) - (b.type == 'file' ? (b.attrs.size ?? 0) : 0);
+  }
+
+  async selectItem(file: FileItem): Promise<void> {
+
+  }
+
+  async openItem(file: FileItem): Promise<void> {
+    switch (file.type) {
+      case 'dir': {
+        await this.cd(path.resolve(this.pwd, file.filename));
+        break;
+      }
+      case 'file': {
+        return await this.openFile(file);
+      }
     }
   }
 
+  private async openFile(file: FileItem) {
+    const tempDir = path.join(this.remote.app.getPath('temp'), `devmgr`);
+    if (!this.fs.existsSync(tempDir)) {
+      this.fs.mkdirSync(tempDir);
+    }
+    const tempPath = path.join(tempDir, `${Date.now()}_${file.filename}`);
+    const session = await this.deviceManager.newSession2(this.device.name);
+    await session.get(file.abspath, tempPath).finally(() => session.end());
+    await this.remote.shell.openPath(tempPath);
+  }
+
+  private async downloadFile(file: FileItem) {
+    const returnValue = await this.remote.dialog.showSaveDialog({defaultPath: file.filename});
+    if (returnValue.canceled) return;
+    const session = await this.deviceManager.newSession2(this.device.name);
+    await session.get(file.abspath, returnValue.filePath).finally(() => session.end())
+      .catch((e) => MessageDialogComponent.open(this.modalService, {
+        title: 'Failed to download file',
+        message: e.message ?? String(e),
+        positive: 'OK',
+      }));
+    return;
+  }
+
   async breadcrumbNav(segs: string[]): Promise<void> {
     await this.cd(segs.length > 1 ? path.join('/', ...segs) : '/');
   }
@@ -133,13 +171,20 @@ export class FilesComponent implements OnInit {
       abspath: path.resolve(dir, file.filename),
     };
   }
+
+  async itemActivated(file: FileItem, type: string): Promise<void> {
+    switch (type) {
+      case 'dblclick':
+        return this.openItem(file);
+    }
+  }
 }
 
 type FileType = 'file' | 'dir' | 'device' | 'special' | 'invalid';
 
 declare interface FileItem {
   filename: string;
-  attrs: Attributes;
+  attrs: Attributes | null;
   link?: LinkInfo;
   type: FileType;
   abspath: string;

src/app/home/files/files.component.ts

@@ -1,5 +1,8 @@
 @import '~bootstrap/scss/bootstrap';
 @import "~bootstrap-icons/font/bootstrap-icons.css";
+@import '~@swimlane/ngx-datatable/index.css';
+@import '~@swimlane/ngx-datatable/assets/icons.css';
+@import '~@swimlane/ngx-datatable/themes/bootstrap.css';
 @import "./styles/no-select.scss";
 @import "./styles/app-item.scss";
 @import "./styles/overflow.scss";

src/styles.scss

@@ -54,5 +54,9 @@ export interface Session {
 
   run(cmd: string, stdin: Readable | null, stdout: RunOutput, stderr: RunOutput, next: (error: any, result: any) => void): void;
 
+  get(inPath: string, outPath: string, next: (error: any, result: any) => void): void;
+
+  put(inPath: string, outPath: string, next: (error: any, result: any) => void): void;
+
   end(): void;
 }