Add answered and folder column and fixed message data fn

src/app/app.component.html

@@ -467,7 +467,21 @@ <h3 class="noMessageSelectedNotification">No Message Selected</h3>
                       </app-sort-button>
                       <app-resizable-button [(width)]="widths.size"/>
                     </th>
+                    <th
+                      *ngIf="displayFolderColumn"
+                      style="width: 8ch"
+                      [ngStyle]="{ width: widths.folder + 'px'}">
+                      <!-- Sort does not work for folders -->
+                      <app-sort-button
+                        [data]="folder"
+                        [(order)]="orderSelectionModel.selected"
+                      >
+                        Folder
+                      </app-sort-button>
+                      <app-resizable-button [(width)]="widths.folder"/>
+                    </th>
                     <th><span class="sr-only">Attachments</span></th>
+                    <th><span class="sr-only">Answered</span></th>
                     <th><span class="sr-only">Flagged</span></th>
                   </thead>
                 </ng-template>
@@ -559,6 +573,11 @@ <h3 class="noMessageSelectedNotification">No Message Selected</h3>
                       <td class="sm-hidden">
                         {{item.size | humanBytes}}
                       </td>
+                      <td
+                        *ngIf="displayFolderColumn"
+                      >
+                        {{item.folder}}
+                      </td>
                       <td class="sm-hidden">
                         <mat-icon
                           style="transform: rotate(90deg);"
@@ -568,6 +587,14 @@ <h3 class="noMessageSelectedNotification">No Message Selected</h3>
                           svgIcon="attachment">
                         </mat-icon>
                       </td>
+                      <td class="sm-hidden">
+                        <mat-icon
+                          *ngIf="item.answered"
+                          aria-label="answered"
+                          mat-list-icon
+                          svgIcon="reply">
+                        </mat-icon>
+                      </td>
                       <td class="sm-hidden">
                         <mat-icon
                           *ngIf="item.flagged"

src/app/app.component.scss

@@ -112,6 +112,10 @@ canvastablecontainer {
         padding-top: var(--cell-y-spacing);
     }
 
+    & tbody {
+        cursor: pointer;
+    }
+
     & tbody.checked {
         background-color: var(--checked-color);
     }
@@ -189,3 +193,4 @@ canvastablecontainer {
         background-position: -200% 0;
     }
 }
+

src/app/app.component.ts

@@ -1484,7 +1484,7 @@ export class AppComponent implements OnInit, AfterViewInit, CanvasTableSelectLis
   }
 
   updateRows() {
-    this.rows = this.canvastable?.rows?.rows ?? []
+    this.rows = [...this.canvastable?.rows?.rows] ?? []
 
     return this.enrichRows()
   }
@@ -1493,22 +1493,9 @@ export class AppComponent implements OnInit, AfterViewInit, CanvasTableSelectLis
     const { start, end } = this.renderedRange;
 
     for (let index = start; index < end; index++) {
-      const item = {
-        ...this.rows[index],
-        id: this.canvastable.rows.getRowMessageId(index),
-        size: this.canvastable.columns[4].getValue(index),
-        messageDate: this.canvastable.columns[1].getFormattedValue(this.canvastable.columns[1].getValue(index)),
-        plaintext: this.canvastable.columns[3].getContentPreviewText(index), // Only when preview is active.
-        subject: this.canvastable.columns[3].getValue(index),
-        attachment: this.canvastable.columns[5].getValue(index),
-        from: this.canvastable.columns[2].getValue(index),
-        flagged: this.canvastable.columns[7].getValue(index),
-        answered: this.canvastable.columns[6].getValue(index),
-        // unseen: false,
-        unseen: !this.canvastable.rows.getRowSeen(index),
-      }
+      if (index >= this.rows.length) break
 
-      this.rows[index] = item
+      this.rows[index] = this.canvastable.rows.getRowData(index, this)
     }
 
     this.rows = Object.create(this.rows)

src/app/common/messagedisplay.ts

@@ -203,4 +203,5 @@ export abstract class MessageDisplay {
 
   // columns
   abstract getCanvasTableColumns(app: any): CanvasTableColumn[];
+  abstract getRowData(index: number, app: any): any;
 }

src/app/common/messagelist.ts

@@ -157,4 +157,22 @@ export class MessageList extends MessageDisplay {
 
     return columns;
   }
+
+  getRowData(rowIndex, app) {
+    const row = this.rows[rowIndex]
+
+    return {
+      id: row.id,
+      messageDate: MessageTableRowTool.formatTimestamp(row.messageDate.toJSON()),
+      from: app.selectedFolder === 'Sent'
+        ? this.getToColumnValueForRow(rowIndex)
+        : this.getFromColumnValueForRow(rowIndex),
+      subject: row.subject,
+      size: row.size,
+      attachment: row.attachment ,
+      answered: row.answeredFlag ,
+      flagged: row.flaggedFlag ,
+      plaintext: row.plaintext?.trim(),
+    }; 
+  }
 }

src/app/sort-button/sort-button.component.ts

@@ -62,6 +62,7 @@ export interface OrderEvent {
         border: none;
         font-size: inherit;
         font-weight: inherit;
+        padding-left: 0;
       }
 
       .sort-button:hover {
@@ -97,7 +98,6 @@ export class SortButtonComponent {
   ]);
 
   get directionIcon() {
-
     return (this.data === this.order?.data)
       ? this.directionIconMap.get(this.order?.direction)
       : this.directionIconMap.get(Direction.None);

src/app/websocketsearch/websocketsearchmaillist.ts

@@ -98,4 +98,15 @@ export class WebSocketSearchMailList extends MessageDisplay {
         return columns;
     }
 
+    getRowData(rowIndex, app) {
+      return {
+        id: this.getRowMessageId(rowIndex),
+        selectbox: this.isSelectedRow(rowIndex),
+        messageDate: this.getRow(rowIndex).dateTime,
+        from: this.getRow(rowIndex).fromName,
+        subject: this.getRow(rowIndex).subject,
+        size: this.getRow(rowIndex).size,
+      };
+    }
+
 }

src/app/xapian/searchmessagedisplay.ts

@@ -46,7 +46,7 @@ export class SearchMessageDisplay extends MessageDisplay {
     } catch (e) {
       // This shouldnt happen, it means something changed the stored
       // data without updating the messagedisplay rows.
-      console.log('Tried to lookup ' + index + ' in searchIndex, isnt there! ' + e);
+      console.error('Tried to lookup ' + index + ' in searchIndex, isnt there! ' + e);
     }
     return msgId;
   }
@@ -215,4 +215,36 @@ export class SearchMessageDisplay extends MessageDisplay {
     }
     return columns;
   }
+
+  public getRowData(index: number, app: any) {
+    const rowData: any = {
+      id: this.getRowMessageId(index),
+      messageDate: MessageTableRowTool.formatTimestampFromStringWithoutSeparators(this.searchService.api.getStringValue(this.getRowId(index), 2)),
+      from: app.selectedFolder.indexOf('Sent') === 0 && !app.displayFolderColumn
+        ? this.searchService.getDocData(this.getRowId(index)).recipients.join(', ')
+        : this.searchService.getDocData(this.getRowId(index)).from,
+      subject: this.searchService.getDocData(this.getRowId(index)).subject,
+      plaintext: this.searchService.getDocData(this.getRowId(index)).textcontent?.trim(),
+      size: this.searchService.api.getNumericValue(this.getRowId(index), 3),
+      attachment: this.searchService.getDocData(this.getRowId(index)).attachment ? true : false,
+      answered: this.searchService.getDocData(this.getRowId(index)).answered ? true : false,
+      flagged: this.searchService.getDocData(this.getRowId(index)).flagged ? true : false,
+      folder: this.searchService.getDocData(this.getRowId(index)).folder,
+    };
+
+    if (app.viewmode === 'conversations') {
+      const row = this.getRow(index);
+      if (!row[2]) {
+        const conversationId = this.searchService.api.getStringValue(row[0], 1);
+        const results = this.searchService.api.sortedXapianQuery(
+          `conversation:${conversationId}..${conversationId}`,
+          1, 0, 0, 1000, 1
+        );
+        row[2] = `${results[0][1] + 1}`;
+      }
+      rowData.count = row[2];
+    } 
+
+    return rowData;
+  }
 }