feat(files): add overwrite confirmation dialog for file rename and update API to support overwrite behavior

Author: johaven

backend/src/applications/files/dto/file-operations.dto.ts

@@ -18,8 +18,12 @@ export class CopyMoveFileDto {
   @IsOptional()
   @IsString()
   @RejectIfMatch(regExpInvalidFileName, { message: 'Forbidden characters' })
-  // renaming use case
+  // Renaming scenario
   dstName?: string
+
+  @IsOptional()
+  @IsBoolean()
+  overwrite? = false
 }
 
 export class DownloadFileDto {

backend/src/applications/files/services/files-methods.service.ts

@@ -165,7 +165,7 @@ export class FilesMethods {
     let dstSpace: SpaceEnv
     try {
       dstSpace = await this.spacesManager.spaceEnv(user, dstUrl.split('/'))
-      await this.filesManager.copyMove(user, space, dstSpace, isMove)
+      await this.filesManager.copyMove(user, space, dstSpace, isMove, copyMoveFileDto.overwrite)
     } catch (e) {
       this.handleError(space, isMove ? FILE_OPERATION.MOVE : FILE_OPERATION.COPY, e, dstSpace)
     }

frontend/src/app/applications/files/components/dialogs/files-overwrite-dialog.component.html

@@ -7,17 +7,27 @@
 <div class="modal-header">
   <h4 class="modal-title" l10nTranslate>
     <fa-icon [icon]="icons.faFileShield" class="me-1"></fa-icon>
-    <span l10nTranslate>Overwrite Existing File(s)</span>
+    @if (renamedTo) {
+      <span l10nTranslate>Replace Existing File</span>
+    } @else {
+      <span l10nTranslate>Overwrite Existing File(s)</span>
+    }
   </h4>
   <button (click)="layout.closeDialog()" aria-label="Close" class="btn-close btn-close-white" type="button"></button>
 </div>
 <div class="modal-body">
-  <div l10nTranslate>Do you want to replace the existing file(s)?</div>
-  <ul class="my-2" style="padding-left: inherit">
-    @for (file of files; track $index) {
-      <li><b>{{ file.name }}</b></li>
-    }
-  </ul>
+  @if (renamedTo) {
+    <div
+      [innerHTML]="'RenameFileToExisting' | translate:locale.language:{ old: files[0].name, new: renamedTo }">
+    </div>
+  } @else {
+    <div l10nTranslate>Do you want to replace the existing file(s)?</div>
+    <ul class="my-2" style="padding-left: inherit">
+      @for (file of files; track $index) {
+        <li><b>{{ file.name }}</b></li>
+      }
+    </ul>
+  }
 </div>
 <div class="modal-footer">
   <button (click)="onAction(false)" class="btn btn-sm btn-secondary" data-dismiss="modal" type="button" l10nTranslate>Cancel</button>

frontend/src/app/applications/files/components/dialogs/files-overwrite-dialog.component.ts

@@ -7,17 +7,19 @@
 import { Component, HostListener, inject, Input, output } from '@angular/core'
 import { FaIconComponent } from '@fortawesome/angular-fontawesome'
 import { faFileShield } from '@fortawesome/free-solid-svg-icons'
-import { L10nTranslateDirective } from 'angular-l10n'
+import { L10N_LOCALE, L10nLocale, L10nTranslateDirective, L10nTranslatePipe } from 'angular-l10n'
 import { LayoutService } from '../../../../layout/layout.service'
 
 @Component({
   selector: 'app-files-overwrite-dialog',
-  imports: [FaIconComponent, L10nTranslateDirective],
+  imports: [FaIconComponent, L10nTranslateDirective, L10nTranslatePipe],
   templateUrl: 'files-overwrite-dialog.component.html'
 })
 export class FilesOverwriteDialogComponent {
   @Input() files: File[] = []
+  @Input() renamedTo: string
   public overwrite = output<boolean>()
+  protected readonly locale = inject<L10nLocale>(L10N_LOCALE)
   protected layout = inject(LayoutService)
   protected readonly icons = { faFileShield }
   protected submitted = false

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

@@ -33,7 +33,7 @@ import type { FileRecent } from '@sync-in-server/backend/src/applications/files/
 import { API_SPACES_TREE } from '@sync-in-server/backend/src/applications/spaces/constants/routes'
 import { forbiddenChars, isValidFileName } from '@sync-in-server/backend/src/common/shared'
 import { BsModalRef } from 'ngx-bootstrap/modal'
-import { firstValueFrom, map, Observable, Subject } from 'rxjs'
+import { EMPTY, firstValueFrom, map, Observable, Subject } from 'rxjs'
 import { downloadWithAnchor } from '../../../common/utils/functions'
 import { TAB_MENU } from '../../../layout/layout.interfaces'
 import { LayoutService } from '../../../layout/layout.service'
@@ -115,17 +115,11 @@ export class FilesService {
     }
   }
 
-  rename(file: FileModel, name: string) {
-    if (!this.isValidName(name)) return
+  rename(file: FileModel, name: string, overwrite = false): Observable<Pick<FileTask, 'name'>> {
+    if (!this.isValidName(name)) return EMPTY
     const dstDirectory = file.path.split('/').slice(0, -1).join('/') || '.'
-    const op: CopyMoveFileDto = { dstDirectory: dstDirectory, dstName: name }
-    this.http.request<Pick<FileTask, 'name'>>(FILE_OPERATION.MOVE, file.dataUrl, { body: op }).subscribe({
-      next: (dto: Pick<FileTask, 'name'>) => {
-        file.rename(dto.name)
-        file.isEditable = false
-      },
-      error: (e: HttpErrorResponse) => this.layout.sendNotification('error', 'Rename', file.name, e)
-    })
+    const op: CopyMoveFileDto = { dstDirectory: dstDirectory, dstName: name, overwrite: overwrite }
+    return this.http.request<Pick<FileTask, 'name'>>(FILE_OPERATION.MOVE, file.dataUrl, { body: op })
   }
 
   delete(files: FileModel[]) {
@@ -212,10 +206,11 @@ export class FilesService {
     )
   }
 
-  async openOverwriteDialog(files: File[]): Promise<boolean> {
+  async openOverwriteDialog(files: File[] | FileModel[], renamedTo?: string): Promise<boolean> {
     const overwriteDialog: BsModalRef<FilesOverwriteDialogComponent> = this.layout.openDialog(FilesOverwriteDialogComponent, null, {
       initialState: {
-        files: files
+        files: files,
+        renamedTo: renamedTo
       } as FilesOverwriteDialogComponent
     })
     return new Promise<boolean>((resolve) => {

frontend/src/app/applications/spaces/components/spaces-browser.component.ts

@@ -40,7 +40,7 @@ import { FILE_OPERATION } from '@sync-in-server/backend/src/applications/files/c
 import type { CompressFileDto } from '@sync-in-server/backend/src/applications/files/dto/file-operations.dto'
 import type { FileProps } from '@sync-in-server/backend/src/applications/files/interfaces/file-props.interface'
 import type { FileSpace } from '@sync-in-server/backend/src/applications/files/interfaces/file-space.interface'
-import { FileTaskStatus } from '@sync-in-server/backend/src/applications/files/models/file-task'
+import { type FileTask, FileTaskStatus } from '@sync-in-server/backend/src/applications/files/models/file-task'
 import { SHARE_TYPE } from '@sync-in-server/backend/src/applications/shares/constants/shares'
 import { SPACE_OPERATION, SPACE_REPOSITORY } from '@sync-in-server/backend/src/applications/spaces/constants/spaces'
 import type { SpaceFiles } from '@sync-in-server/backend/src/applications/spaces/interfaces/space-files.interface'
@@ -476,14 +476,32 @@ export class SpacesBrowserComponent implements OnInit, AfterViewInit, OnDestroy
     this.selection[0].isRenamed = !this.selection[0].isRenamed
   }
 
-  renameFile(ev: { object: FileModel; name: string }) {
+  async renameFile(ev: { object: FileModel; name: string }) {
     const f: FileModel = ev.object
-    const name = ev.name
-    if (this.files.find((file) => file.name === name)) {
-      this.layout.sendNotification('error', 'Rename', 'The destination already exists')
-      return
-    }
-    this.filesService.rename(f, name)
+    const renamedTo = ev.name
+    let overwrite = false
+    const fileExists = this.files.find((file) => file.name.toLowerCase() === renamedTo.toLowerCase() && file.id !== f.id)
+    if (fileExists) {
+      overwrite = await this.filesService.openOverwriteDialog([f], renamedTo)
+      if (!overwrite) return
+    }
+    this.filesService
+      .rename(f, renamedTo, overwrite)
+      .pipe(take(1))
+      .subscribe({
+        next: (dto: Pick<FileTask, 'name'>) => {
+          f.rename(dto.name)
+          f.isEditable = false
+          if (overwrite) {
+            this.sortBy(
+              this.sortTable.sortParam.column,
+              false,
+              this.files.filter((file) => file.id !== fileExists.id)
+            )
+          }
+        },
+        error: (e: HttpErrorResponse) => this.layout.sendNotification('error', 'Rename', f.name, e)
+      })
   }
 
   setRenamingInProgress(ev: boolean) {
@@ -557,32 +575,32 @@ export class SpacesBrowserComponent implements OnInit, AfterViewInit, OnDestroy
   }
 
   async onUploadFiles(ev: { files: File[] }, isDirectory = false) {
-    let doOverwrite = false
+    let overwrite = false
     if (isDirectory) {
       const dirName = ev.files[0].webkitRelativePath.split('/')[0]
-      const dirExist = this.files.find((f) => f.name.toLowerCase() === dirName.toLowerCase())
-      if (dirExist) {
-        doOverwrite = await this.filesService.openOverwriteDialog([{ name: dirName } as File])
-        if (!doOverwrite) return
+      const dirExists = this.files.find((f) => f.name.toLowerCase() === dirName.toLowerCase())
+      if (dirExists) {
+        overwrite = await this.filesService.openOverwriteDialog([dirExists])
+        if (!overwrite) return
       }
     } else {
       const exist: File[] = [...ev.files].filter((f: File) => this.files.some((x) => x.name.toLowerCase() === f.name.toLowerCase()))
       if (exist.length > 0) {
-        doOverwrite = await this.filesService.openOverwriteDialog(exist)
-        if (!doOverwrite) return
+        overwrite = await this.filesService.openOverwriteDialog(exist)
+        if (!overwrite) return
       }
     }
-    this.filesUpload.addFiles(ev.files, doOverwrite).catch(console.error)
+    this.filesUpload.addFiles(ev.files, overwrite).catch(console.error)
   }
 
   async onDropFiles(ev: { dataTransfer: { files: File[] } }) {
-    let doOverwrite = false
+    let overwrite = false
     const exist: File[] = [...ev.dataTransfer.files].filter((f: File) => this.files.some((x) => x.name.toLowerCase() === f.name.toLowerCase()))
     if (exist.length > 0) {
-      doOverwrite = await this.filesService.openOverwriteDialog(exist)
-      if (!doOverwrite) return
+      overwrite = await this.filesService.openOverwriteDialog(exist)
+      if (!overwrite) return
     }
-    this.filesUpload.onDropFiles(ev, doOverwrite)
+    this.filesUpload.onDropFiles(ev, overwrite)
   }
 
   decompressFile() {

frontend/src/i18n/de.json

@@ -597,5 +597,7 @@
   "Keep these codes in a safe place. They will allow you to access your account if you lose access to your two-factor authentication.": "Bewahren Sie diese Codes an einem sicheren Ort auf. Sie ermöglichen Ihnen den Zugriff auf Ihr Konto, falls Sie den Zugriff auf Ihre Zwei‑Faktor‑Authentifizierung verlieren.",
   "These recovery codes are for one-time use only and will only be displayed here once.": "Diese Wiederherstellungscodes sind nur einmal verwendbar und werden hier nur einmal angezeigt.",
   "Overwrite Existing File(s)": "Vorhandene Datei(en) überschreiben",
-  "Do you want to replace the existing file(s)?": "Möchten Sie die vorhandene(n) Datei(en) ersetzen?"
+  "Replace Existing File": "Vorhandene Datei ersetzen",
+  "Do you want to replace the existing file(s)?": "Möchten Sie die vorhandene(n) Datei(en) ersetzen?",
+  "RenameFileToExisting": "Möchten Sie <b>{{ old }}</b> in <b>{{ new }}</b> umbenennen?"
 }

frontend/src/i18n/en.json

@@ -20,5 +20,6 @@
   "scheduler_unit_day": "scheduler_unit_day",
   "no_selection": "no item selected",
   "one_selection": "{{ nb }} item selected",
-  "nb_selections": "{{ nb }} items selected"
+  "nb_selections": "{{ nb }} items selected",
+  "RenameFileToExisting": "Do you want to rename <b>{{ old }}</b> to <b>{{ new }}</b>?"
 }

frontend/src/i18n/es.json

@@ -597,5 +597,7 @@
   "Keep these codes in a safe place. They will allow you to access your account if you lose access to your two-factor authentication.": "Guarde estos códigos en un lugar seguro. Le permitirán acceder a su cuenta si pierde el acceso a su autenticación de dos factores.",
   "These recovery codes are for one-time use only and will only be displayed here once.": "Estos códigos de recuperación son de un solo uso y solo se mostrarán aquí una vez.",
   "Overwrite Existing File(s)": "Sobrescribir archivo(s) existente(s)",
-  "Do you want to replace the existing file(s)?": "¿Desea reemplazar el/los archivo(s) existente(s)?"
+  "Replace Existing File": "Reemplazar archivo existente",
+  "Do you want to replace the existing file(s)?": "¿Desea reemplazar el/los archivo(s) existente(s)?",
+  "RenameFileToExisting": "¿Desea renombrar <b>{{ old }}</b> a <b>{{ new }}</b>?"
 }

frontend/src/i18n/fr.json

@@ -597,5 +597,7 @@
   "Keep these codes in a safe place. They will allow you to access your account if you lose access to your two-factor authentication.": "Conservez ces codes en lieu sûr. Ils vous permettront d’accéder à votre compte si vous perdez l’accès à votre authentification à deux facteurs.",
   "These recovery codes are for one-time use only and will only be displayed here once.": "Ces codes de récupération sont à usage unique et ne seront affichés qu’une seule fois ici.",
   "Overwrite Existing File(s)": "Écraser le(s) fichier(s) existant(s)",
-  "Do you want to replace the existing file(s)?": "Voulez-vous remplacer le(s) fichier(s) existant(s) ?"
+  "Replace Existing File": "Remplacer le fichier existant",
+  "Do you want to replace the existing file(s)?": "Voulez-vous remplacer le(s) fichier(s) existant(s) ?",
+  "RenameFileToExisting": "Souhaitez-vous renommer <b>{{ old }}</b> en <b>{{ new }}</b> ?"
 }