feat(messagelist): Implement paging and improve styling for nativemessagelist

Author: tadzik

src/app/messagelist/nativemessagelist.component.html

@@ -1,29 +1,30 @@
-<style>
-.messageButton {
-    text-align: left;
-    width:      100%;
-}
-
-.firstRow {
-    display: flex;
-    justify-content: space-between;
-}
-</style>
-<div>
+<div id="nativemessagelist">
+    <div *ngIf="rowsDisplayed < rowCount">
+        Showing messages {{ offset + 1 }}..{{ upto }} out of {{ rowCount }}
+    </div>
+    <button mat-stroked-button class="pagingButton" *ngIf="offset > 0" (click)="scrollUp()">
+        Show previous {{ rowsDisplayed }} messages
+    </button>
     <button mat-stroked-button
         *ngFor="let row of shownRows; index as i"
-        [ngClass]="{ 'messageButton': true, 'selectedFolder': rows.openedRowIndex == i }"
-        (click)="openMessage(i)"
+        [ngClass]="{ 'messageButton': true, 'selectedFolder': rows.openedRowIndex == row.rowid }"
+        (click)="openMessage(row.rowid)"
     >
         <div class="firstRow">
             <div>
-                {{ row[columnsByName["From"]] }}
+                {{ row.from }}
             </div>
             <div>
-                {{ row[columnsByName["Date"]] }}
+                {{ row.date }}
             </div>
         </div>
-        <strong> {{ row[columnsByName["Subject"]] }} </strong>
+        <div class="subjectRow">
+            <div class="subject"> {{ row.subject }} </div>
+            <div *ngIf="row.unread"> <em>UNREAD</em> </div>
+        </div>
+    </button>
+    <button mat-stroked-button class="pagingButton" *ngIf="remaining > 0" (click)="scrollDown()">
+        Show next {{ rowsDisplayed }} messages
     </button>
 </div>
 <!--

src/app/messagelist/nativemessagelist.ts

@@ -25,9 +25,18 @@ import { AppComponent } from '../app.component';
 import { Subject } from 'rxjs';
 import { CanvasTableColumn } from '../canvastable/canvastablecolumn';
 
+interface Message {
+    rowid: number;
+    from: string;
+    date: string;
+    subject: string;
+    unread: boolean;
+}
+
 @Component({
     selector: 'app-nativemessagelist',
     templateUrl: 'nativemessagelist.component.html',
+    styleUrls: ['nativemessagelist.component.scss'],
 })
 export class NativeMessageListComponent implements MessageListComponent {
     sortColumn = 2;
@@ -38,7 +47,13 @@ export class NativeMessageListComponent implements MessageListComponent {
     visibleRowsChanged: Subject<number[]> = new Subject();
     rowSelected: EventEmitter<RowSelection> = new EventEmitter();
     rows: MessageDisplay;
-    shownRows: any[] = [];
+    shownRows: Message[] = [];
+
+    offset = 0;
+    rowsDisplayed = 10;
+    upto: number;
+    rowCount: number;
+    remaining: number;
 
     columns: CanvasTableColumn[];
     columnNames: string[];
@@ -49,20 +64,28 @@ export class NativeMessageListComponent implements MessageListComponent {
             return;
         }
         this.shownRows = [];
-        let limit = 25;
-        if (this.rows.rowCount() < 25) {
-            limit = this.rows.rowCount();
+        this.upto = this.offset + this.rowsDisplayed;
+        this.rowCount = this.rows.rowCount();
+        if (this.rowCount < this.upto) {
+            this.upto = this.rowCount;
         }
-        for (let i = 0; i < limit; i++) {
+        for (let i = this.offset; i < this.upto; i++) {
             const row = this.columns.map(c => {
                 let value = c.getValue(i);
                 if (c.getFormattedValue) {
                     value = c.getFormattedValue(value);
                 }
                 return value;
             });
-            this.shownRows.push(row);
+            this.shownRows.push({
+                rowid:   i,
+                from:    row[this.columnsByName['From']],
+                subject: row[this.columnsByName['Subject']],
+                date:    row[this.columnsByName['Date']],
+                unread:  this.rows.getRowSeen(i),
+            });
         }
+        this.remaining = this.rowCount - this.upto;
     }
 
     resetColumns(app: AppComponent): void {
@@ -89,7 +112,16 @@ export class NativeMessageListComponent implements MessageListComponent {
         });
     }
 
-    scrollDown(): void {}
-    scrollUp(): void {}
-    scrollTop(): void {}
+    scrollDown(): void {
+        this.offset += this.rowsDisplayed;
+        this.detectChanges();
+    }
+    scrollUp(): void {
+        this.offset -= this.rowsDisplayed;
+        this.detectChanges();
+    }
+    scrollTop(): void {
+        this.offset = 0;
+        this.detectChanges();
+    }
 }