From 7144554361ff9af44da4de0194b7003a6b2366de Mon Sep 17 00:00:00 2001
From: Bruno Pagno <b.pagno@openproject.com>
Date: Tue, 10 Dec 2024 10:26:14 +0100
Subject: [PATCH] WIP new folder button

---
 .../storage-files/storage-files.service.ts    |  4 +++
 .../location-picker-modal.component.html      | 15 +++++++++++
 .../location-picker-modal.component.ts        | 27 +++++++++++++++++++
 modules/storages/config/locales/js-en.yml     |  1 +
 4 files changed, 47 insertions(+)

diff --git a/frontend/src/app/core/state/storage-files/storage-files.service.ts b/frontend/src/app/core/state/storage-files/storage-files.service.ts
index 5a7d9e9bcb42..b621427704e4 100644
--- a/frontend/src/app/core/state/storage-files/storage-files.service.ts
+++ b/frontend/src/app/core/state/storage-files/storage-files.service.ts
@@ -79,6 +79,10 @@ export class StorageFilesResourceService {
     return this.httpClient.request<IUploadLink>(link.method, link.href, { body: link.payload });
   }
 
+  createFolder(href:string, body:{ name:string, parent_id:ID }):Observable<IStorageFile> {
+    return this.httpClient.post<IStorageFile>(href, body);
+  }
+
   reset():void {
     this.store.reset();
   }
diff --git a/frontend/src/app/shared/components/storages/location-picker-modal/location-picker-modal.component.html b/frontend/src/app/shared/components/storages/location-picker-modal/location-picker-modal.component.html
index 893be4759a44..71b4acfccd03 100644
--- a/frontend/src/app/shared/components/storages/location-picker-modal/location-picker-modal.component.html
+++ b/frontend/src/app/shared/components/storages/location-picker-modal/location-picker-modal.component.html
@@ -44,6 +44,15 @@
           [content]="file"
         ></li>
       </ul>
+      <input
+        *ngIf="addingNewFolder"
+        #newFolderField
+        type="text"
+        id="new_folder_name"
+        name="new_folder_name"
+        placeholder="New folder..."
+        (blur)="newFolderSubmit(newFolderField.value)"
+      />
     </ng-template>
 
     <ng-template #loadingTemplate>
@@ -72,6 +81,12 @@
   </div>
 
   <div class="spot-action-bar">
+    <div class="spot-action-bar--left">
+      <button type="button" class="spot-link spot-action-bar--action" (click)="newFolder()" >
+        <span class="spot-icon spot-icon_folder op-files-tab--icon op-files-tab--icon_forums"></span>
+        <span [textContent]="text.buttons.newFolder"></span>
+      </button>
+    </div>
     <div class="spot-action-bar--right">
       <button
         type="button"
diff --git a/frontend/src/app/shared/components/storages/location-picker-modal/location-picker-modal.component.ts b/frontend/src/app/shared/components/storages/location-picker-modal/location-picker-modal.component.ts
index 6ecfecf518ca..d108d97e2f6c 100644
--- a/frontend/src/app/shared/components/storages/location-picker-modal/location-picker-modal.component.ts
+++ b/frontend/src/app/shared/components/storages/location-picker-modal/location-picker-modal.component.ts
@@ -32,6 +32,7 @@ import {
   Component,
   ElementRef,
   Inject,
+  ViewChild,
 } from '@angular/core';
 
 import { I18nService } from 'core-app/core/i18n/i18n.service';
@@ -57,6 +58,8 @@ import { map } from 'rxjs/operators';
 })
 export class LocationPickerModalComponent extends FilePickerBaseModalComponent {
   public submitted = false;
+  public addingNewFolder = false;
+  @ViewChild('newFolderField') newFolderField!:ElementRef;
 
   public readonly text = {
     header: this.i18n.t('js.storages.select_location'),
@@ -74,6 +77,7 @@ export class LocationPickerModalComponent extends FilePickerBaseModalComponent {
       submitEmptySelection: this.i18n.t('js.storages.file_links.selection_none'),
       cancel: this.i18n.t('js.button_cancel'),
       selectAll: this.i18n.t('js.storages.file_links.select_all'),
+      newFolder: this.i18n.t('js.storages.new_folder'),
     },
     tooltip: {
       directory_not_writeable: this.i18n.t('js.storages.files.directory_not_writeable'),
@@ -170,4 +174,27 @@ export class LocationPickerModalComponent extends FilePickerBaseModalComponent {
 
     return this.text.tooltip.file_not_selectable;
   }
+
+  public newFolder():void {
+    this.addingNewFolder = true;
+    // this.newFolderField?.nativeElement?.focus();
+  }
+
+  public newFolderSubmit(value:string):void {
+    if (!value) {
+      this.addingNewFolder = false;
+      return;
+    }
+
+    this.storageFilesResourceService.createFolder(
+      `${this.storage._links.self.href}/folders`,
+      {
+        name: value,
+        parent_id: this.currentDirectory.id,
+      },
+    ).subscribe((newlyCreatedDirectory) => {
+      this.addingNewFolder = false;
+      this.changeLevel(newlyCreatedDirectory);
+    });
+  }
 }
diff --git a/modules/storages/config/locales/js-en.yml b/modules/storages/config/locales/js-en.yml
index ac9733c3f2d6..ff5c94d3fc69 100644
--- a/modules/storages/config/locales/js-en.yml
+++ b/modules/storages/config/locales/js-en.yml
@@ -13,6 +13,7 @@ en:
       open_storage: "Open %{storageType}"
       select_location: "Select location"
       choose_location: "Choose location"
+      new_folder: "New folder"
 
       types:
         nextcloud: "Nextcloud"