feat(frontend:files): improve text viewer with save error handling and updated file upload logic

Author: johaven

frontend/src/app/applications/files/components/viewers/files-viewer-text.component.html

@@ -8,7 +8,7 @@
   <div class="app-top-menu">
     <button
       (click)="toggleReadonly()"
-      [tooltip]="'Read-only' | translate:locale.language"
+      [tooltip]="(isReadonly() ? 'Read-only' : 'Read-write') | translate:locale.language"
       [adaptivePosition]="true"
       container="body"
       class="d-none d-sm-block btn btn-sm btn-secondary me-1"
@@ -40,7 +40,7 @@
     [languages]="languages"
     [language]="currentLanguage"
     [(ngModel)]="content"
-    (change)="isModified.set(true)"
+    (change)="contentChange()"
     [theme]="currentTheme"
     [readonly]="isReadonly()"
     [lineWrapping]="true" />

frontend/src/app/applications/files/components/viewers/files-viewer-text.component.ts

@@ -5,7 +5,7 @@
  */
 
 import { CodeEditor } from '@acrodata/code-editor'
-import { HttpClient } from '@angular/common/http'
+import { HttpClient, HttpErrorResponse } from '@angular/common/http'
 import { Component, inject, input, linkedSignal, OnDestroy, OnInit, signal, ViewEncapsulation } from '@angular/core'
 import { FormsModule } from '@angular/forms'
 import { LanguageDescription } from '@codemirror/language'
@@ -41,29 +41,20 @@ export class FilesViewerTextComponent implements OnInit, OnDestroy {
   isReadonly = linkedSignal(() => this.mode() === 'view')
   isReadable = signal(false)
   isModified = signal(false)
-  protected openSearchPanel = openSearchPanel
+  protected readonly openSearchPanel = openSearchPanel
   protected content: string
   protected currentLanguage = undefined
   protected readonly languages: LanguageDescription[] = languages
   protected currentTheme: any = 'light'
   protected readonly icons = { faFloppyDisk, faLock, faLockOpen, faMagnifyingGlass }
   protected readonly locale = inject<L10nLocale>(L10N_LOCALE)
+  private isContentReady = false
   private readonly layout = inject(LayoutService)
   private readonly http = inject(HttpClient)
   private readonly filesUpload = inject(FilesUploadService)
   private subscription = this.layout.switchTheme.subscribe((layout: string) => (this.currentTheme = layout === themeDark ? 'dark' : 'light'))
   private readonly maxSize = 5242880 // 5MB
 
-  toggleReadonly() {
-    this.isReadonly.update((value) => !value)
-  }
-
-  async save() {
-    const file = new File([new Blob([this.content])], this.file().name, { type: 'text/plain' })
-    await this.filesUpload.addFiles([file], true)
-    this.isModified.set(false)
-  }
-
   ngOnInit() {
     const language: LanguageDescription = LanguageDescription.matchFilename(languages, this.file().name)
     if (language?.name || this.file().size <= this.maxSize) {
@@ -76,6 +67,26 @@ export class FilesViewerTextComponent implements OnInit, OnDestroy {
     }
   }
 
+  toggleReadonly() {
+    this.isReadonly.update((value) => !value)
+  }
+
+  save() {
+    this.filesUpload.uploadOneFile(this.file(), this.content, true).subscribe({
+      next: () => this.isModified.set(false),
+      error: (e: HttpErrorResponse) => this.layout.sendNotification('error', 'Unable to save document', e.error.message)
+    })
+  }
+
+  contentChange() {
+    // Ignore first call
+    if (this.isContentReady) {
+      this.isModified.set(true)
+    } else {
+      this.isContentReady = true
+    }
+  }
+
   ngOnDestroy() {
     if (this.subscription) {
       this.subscription.unsubscribe()

frontend/src/app/applications/files/services/files-upload.service.ts

@@ -12,6 +12,7 @@ import { lastValueFrom, Observable } from 'rxjs'
 import { filter, tap } from 'rxjs/operators'
 import { supportUploadDirectory } from '../../../common/utils/functions'
 import { FileUpload } from '../interfaces/file-upload.interface'
+import { FileModel } from '../models/file.model'
 import { FilesTasksService } from './files-tasks.service'
 import { FilesService } from './files.service'
 
@@ -64,6 +65,14 @@ export class FilesUploadService {
     }
   }
 
+  uploadOneFile(file: FileModel, content: string, overwrite: boolean) {
+    const url = `${API_FILES_OPERATION_UPLOAD}/${file.path}`
+    const fileContent = new File([new Blob([content])], file.name.normalize(), { type: file.mime.replace('-', '/') })
+    const formData = new FormData()
+    formData.append('file', fileContent)
+    return this.http.request<void>(overwrite ? 'put' : 'post', url, { body: formData })
+  }
+
   private uploadFiles(url: string, form: FormData, overwrite: boolean) {
     return this.http.request(overwrite ? 'put' : 'post', url, {
       body: form,