From 2c7934c249f181ba32c013ac61ba516c7da6677c Mon Sep 17 00:00:00 2001
From: appel_c <christian.appel@psi.ch>
Date: Fri, 31 Jan 2025 14:06:28 +0100
Subject: [PATCH] fix: fix updateUserData and patch

---
 .../src/app/core/remote-data.service.ts       | 34 ++++++----
 .../app/scan-table/scan-table.component.html  | 64 +++++++++++--------
 .../app/scan-table/scan-table.component.scss  | 24 ++++++-
 .../app/scan-table/scan-table.component.ts    | 26 ++++++++
 4 files changed, 107 insertions(+), 41 deletions(-)

diff --git a/frontend/bec_atlas/src/app/core/remote-data.service.ts b/frontend/bec_atlas/src/app/core/remote-data.service.ts
index 21cebd8..0a34fe3 100644
--- a/frontend/bec_atlas/src/app/core/remote-data.service.ts
+++ b/frontend/bec_atlas/src/app/core/remote-data.service.ts
@@ -58,18 +58,26 @@ export class RemoteDataService {
   /**
    * Base method for making a PATCH request to the server
    * @param path path to the endpoint
+   * @param paramId unique identifier for the resource
    * @param payload payload to send
    * @param headers additional headers
    * @returns response from the server
    */
-  protected patch<T>(path: string, payload: any, headers: HttpHeaders) {
-    return this.httpClient.patch<T>(
-      this.serverSettings.getServerAddress() + path,
-      payload,
-      {
-        headers,
-      }
-    );
+  protected patch<T>(
+    path: string,
+    paramInput: Record<string, string>,
+    payload: any,
+    headers: HttpHeaders
+  ) {
+    let param = Object.keys(paramInput);
+    let id = paramInput[param[0]];
+    let fullPath =
+      this.serverSettings.getServerAddress() + path + '?' + param[0] + '=' + id;
+    console.log('Full path', fullPath, 'payload', payload);
+
+    return this.httpClient.patch<T>(fullPath, payload, {
+      headers,
+    });
   }
 }
 
@@ -209,8 +217,8 @@ export class ScanCountService extends RemoteDataService {
 
   /**
    * Method for updating the user data for a scan
-   * @param scanId Unique identifier for the scan
-   * @param userData User data to update
+   * @param scanId Unique identifier for the scan, type string
+   * @param userData User data to update, type ScanUserData
    * @returns response from the server
    * @throws HttpErrorResponse if the request fails
    * @throws TimeoutError if the request takes too long
@@ -218,9 +226,11 @@ export class ScanCountService extends RemoteDataService {
   updateUserData(scanId: string, userData: ScanUserData) {
     let headers = new HttpHeaders();
     headers = headers.set('Content-Type', 'application/json; charset=utf-8');
-    return this.post<string>(
+    console.log('Updating user data', userData);
+    return this.patch<string>(
       'scans/user_data',
-      { scan_id: scanId, ...userData },
+      { scan_id: scanId },
+      userData,
       headers
     );
   }
diff --git a/frontend/bec_atlas/src/app/scan-table/scan-table.component.html b/frontend/bec_atlas/src/app/scan-table/scan-table.component.html
index 09d3747..54cc340 100644
--- a/frontend/bec_atlas/src/app/scan-table/scan-table.component.html
+++ b/frontend/bec_atlas/src/app/scan-table/scan-table.component.html
@@ -1,5 +1,7 @@
+<!-- Table -->
 <div class="table-container">
     <mat-card>
+        <!-- Toolbar -->
         <mat-toolbar color="primary"> 
             Table with Scan Data
             <span class="spacer"></span>
@@ -12,39 +14,45 @@
             <button mat-icon-button (click)="openDialog()">
                 <mat-icon>settings</mat-icon>
             </button>
-<!--             
-            <mat-menu #menu="matMenu">
-                @for (column of availableColumns(); track column) {
-                    <mat-checkbox class="checkbox" (change)="handleColumnSelection(column)">{{ column }}</mat-checkbox>
-                }
-            </mat-menu> -->
         </mat-toolbar>
-            <table mat-table *ngIf="tableData() as data" [dataSource]="data" class="mat-elevation-z8">
+        <!-- Table -->
+        <table mat-table *ngIf="tableData() as data" [dataSource]="data" class="mat-elevation-z8">
+            @for (column of displayedColumns(); track column) {
+                <ng-container [matColumnDef]="column">
+                    <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ column | titlecase }}</th>
+                    <td mat-cell class="table-cell" *matCellDef="let element">
+                        @if (column === 'timestamp') {
+                            {{ element[column] * 1000 | date :'HH:mm:ss'}} 
+                            <br>
+                            {{ element[column] * 1000 | date :'dd/MM/yyyy'}}
+                        }
+                        @else if (column === 'user_rating') {
+                            <star-rating 
+                                [starType]="'svg'" 
+                                [hoverEnabled]="true" 
+                                (ratingChange)="handleOnRatingChanged($event, element)"
+                                [rating]="element[column]">
+                            </star-rating>
+                        }
+                        @else if (column === 'user_comments') {
+                            <mat-form-field appearance="outline">
+                                <textarea matInput ></textarea>
+                            </mat-form-field>
 
-            <!-- Create table data dynamically -->
-            <ng-container *ngFor="let column of displayedColumns()" [matColumnDef]="column">
-                <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ column | titlecase }} </th>
-                <td mat-cell *matCellDef="let element">
-                    @if (column === 'timestamp') {
-                        {{ element[column] * 1000 | date :'HH:mm:ss'}} 
-                        <br>
-                        {{ element[column] * 1000 | date :'dd/MM/yyyy'}}
-                    }
-                    @else if (column === 'user_rating') {
-                        <star-rating [starType]="'svg'" [rating]="element[column]"></star-rating>
-                    }
-                    @else{
-                        <p> {{ element[column] }}</p>
-                    }
-            </ng-container>
-        
-        <!-- Header Row -->
-        <tr mat-header-row *matHeaderRowDef="displayedColumns(); sticky: true"></tr>
-        <!-- Data Rows -->
-        <tr mat-row *matRowDef="let row; columns: displayedColumns()"></tr>
+                        }
+                        @else{
+                            <p> {{ element[column] }}</p>
+                        }
+                </ng-container>
+            }
+            <!-- Header Row -->
+            <tr mat-header-row *matHeaderRowDef="displayedColumns(); sticky: true"></tr>
+            <!-- Data Rows -->
+            <tr mat-row *matRowDef="let row; columns: displayedColumns()"></tr>
         </table>
     </mat-card> 
 </div>
+<!-- Paginator -->
 <div class="table-paginator">   
     <mat-paginator 
         #paginator 
diff --git a/frontend/bec_atlas/src/app/scan-table/scan-table.component.scss b/frontend/bec_atlas/src/app/scan-table/scan-table.component.scss
index 33d750e..d4a5d63 100644
--- a/frontend/bec_atlas/src/app/scan-table/scan-table.component.scss
+++ b/frontend/bec_atlas/src/app/scan-table/scan-table.component.scss
@@ -14,4 +14,26 @@
 
 .spacer {
     flex: 1 1 auto;
-}
\ No newline at end of file
+}
+
+
+.table-cell {
+    max-height: 200px
+}
+
+textarea {
+    resize: none;
+    min-height: 32px; /* Initial height */
+    max-height: 200px; /* Maximum height */
+    overflow-y: auto; /* Enable scroll when max height is reached */
+    width: 100%;
+    padding:0px;
+    border: none;
+  }
+
+  mat-form-field {
+    font-size: 12px;
+    line-height: 1.2;
+    padding-top: 16px;
+    max-height: var(max-height);
+  }
\ No newline at end of file
diff --git a/frontend/bec_atlas/src/app/scan-table/scan-table.component.ts b/frontend/bec_atlas/src/app/scan-table/scan-table.component.ts
index 872ae4b..feb1a5a 100644
--- a/frontend/bec_atlas/src/app/scan-table/scan-table.component.ts
+++ b/frontend/bec_atlas/src/app/scan-table/scan-table.component.ts
@@ -29,6 +29,8 @@ import { MatMenuModule } from '@angular/material/menu';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatDialog } from '@angular/material/dialog';
 import { ColumnSelectionDialogComponent } from './column-selection-dialog/column-selection-dialog.component';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
 
 export interface ResourceStatus {
   status: any;
@@ -55,6 +57,8 @@ export interface ResourceLoaderParams {
     MatProgressSpinnerModule,
     MatMenuModule,
     MatCheckboxModule,
+    MatFormFieldModule,
+    MatInputModule,
   ],
   templateUrl: './scan-table.component.html',
   styleUrl: './scan-table.component.scss',
@@ -67,6 +71,7 @@ export class ScanTableComponent {
   sessionId = signal<string>('');
   dialog = inject(MatDialog);
   pageEvent: PageEvent = new PageEvent();
+  isEditingUserComments: boolean = false;
   sorting: number = -1;
   displayedColumns = signal<string[]>([
     'scan_number',
@@ -77,6 +82,7 @@ export class ScanTableComponent {
     'dataset_number',
     'timestamp',
     'user_rating',
+    'user_comments',
   ]);
   allColumns: string[] = [
     'scan_id',
@@ -135,6 +141,7 @@ export class ScanTableComponent {
           ? 'user_data'
           : element
       );
+      columns.push('scan_id'); // always include scan_id
       console.log('Columns', columns);
       return firstValueFrom(
         this.scanData.getScanData(
@@ -227,4 +234,23 @@ export class ScanTableComponent {
   }
 
   handleColumnSelection(event: any) {}
+
+  toggleAllEdit() {}
+
+  async handleOnRatingChanged(event: any, element: ScanDataResponse) {
+    console.log('Event', event, 'Element', element);
+    let scanId = element.scan_id;
+    let userData = {
+      user_rating: event.rating,
+      user_comments: element.user_comments || '',
+      system_rating: element.system_rating || 0,
+      system_comments: element.system_comments || '',
+      name: element.name || '',
+    };
+    console.log('Scan ID', scanId);
+    if (scanId) {
+      console.log('Updating user data', userData);
+      await firstValueFrom(this.scanData.updateUserData(scanId, userData));
+    }
+  }
 }