refactor(files-tree): added shared service and drop zone

Author: nsemets

src/app/shared/components/files-drop-zone/files-drop-zone.component.html

@@ -0,0 +1,20 @@
+<div
+  class="drop-zone-container flex flex-1"
+  (dragenter)="onDragEnter($event)"
+  (dragleave)="onDragLeave($event)"
+  (dragover)="onDragOver($event)"
+  (drop)="onDrop($event)"
+>
+  @if (enabled()) {
+    <div class="drop-zone" [class.active]="isDragOver()">
+      @if (isDragOver()) {
+        <div class="flex flex-column gap-2 align-items-center pointer-events-none">
+          <i class="fa-solid fa-cloud-arrow-up text-5xl"></i>
+          <p class="drop-text text-xl">{{ 'files.dropText' | translate }}</p>
+        </div>
+      }
+    </div>
+  }
+
+  <ng-content></ng-content>
+</div>

src/app/shared/components/files-drop-zone/files-drop-zone.component.scss

@@ -0,0 +1,27 @@
+.drop-zone-container {
+  position: relative;
+}
+
+.drop-zone {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--white);
+  transition:
+    background 0.3s ease,
+    backdrop-filter 0.3s ease;
+  pointer-events: none;
+  background: transparent;
+
+  &.active {
+    backdrop-filter: blur(0.3rem);
+    background: rgba(132, 174, 210, 0.5);
+    pointer-events: all;
+  }
+}

src/app/shared/components/files-drop-zone/files-drop-zone.component.ts

@@ -0,0 +1,73 @@
+import { TranslatePipe } from '@ngx-translate/core';
+
+import { ChangeDetectionStrategy, Component, input, output, signal } from '@angular/core';
+
+@Component({
+  selector: 'osf-files-drop-zone',
+  imports: [TranslatePipe],
+  templateUrl: './files-drop-zone.component.html',
+  styleUrl: './files-drop-zone.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class FilesDropZoneComponent {
+  enabled = input<boolean>(true);
+  filesDropped = output<File[]>();
+  isDragOver = signal(false);
+
+  private dragDepth = 0;
+
+  onDragEnter(event: DragEvent): void {
+    if (!this.enabled()) {
+      return;
+    }
+
+    if (event.dataTransfer?.types?.includes('Files')) {
+      this.dragDepth += 1;
+      this.isDragOver.set(true);
+    }
+  }
+
+  onDragOver(event: DragEvent): void {
+    if (!this.enabled()) {
+      return;
+    }
+
+    event.preventDefault();
+    event.stopPropagation();
+    if (event.dataTransfer) {
+      event.dataTransfer.dropEffect = 'copy';
+    }
+    this.isDragOver.set(true);
+  }
+
+  onDragLeave(event: Event): void {
+    if (!this.enabled()) {
+      return;
+    }
+
+    event.preventDefault();
+    event.stopPropagation();
+    this.dragDepth = Math.max(0, this.dragDepth - 1);
+    if (this.dragDepth === 0) {
+      this.isDragOver.set(false);
+    }
+  }
+
+  onDrop(event: DragEvent): void {
+    event.preventDefault();
+    event.stopPropagation();
+    this.dragDepth = 0;
+    this.isDragOver.set(false);
+
+    if (!this.enabled()) {
+      return;
+    }
+
+    const files = event.dataTransfer?.files;
+    if (!files || files.length === 0) {
+      return;
+    }
+
+    this.filesDropped.emit(Array.from(files));
+  }
+}

src/app/shared/components/files-tree/files-tree.component.html

@@ -1,21 +1,8 @@
-<div #dropZoneContainer class="drop-zone-container flex flex-1">
-  @if (!hasViewOnly() && supportUpload()) {
-    <div
-      class="drop-zone"
-      [class.active]="isDragOver()"
-      (dragleave)="onDragLeave($event)"
-      (dragover)="onDragOver($event)"
-      (drop)="onDrop($event)"
-    >
-      @if (isDragOver()) {
-        <div class="flex flex-column gap-2 align-items-center pointer-events-none">
-          <i class="fa-solid fa-cloud-arrow-up text-5xl"></i>
-          <p class="drop-text text-xl">{{ 'files.dropText' | translate }}</p>
-        </div>
-      }
-    </div>
-  }
-
+<osf-files-drop-zone
+  class="flex flex-1"
+  [enabled]="!hasViewOnly() && supportUpload()"
+  (filesDropped)="onDropFiles($event)"
+>
   @if (isLoading() && !isLoadingMore()) {
     <div class="flex flex-1">
       <osf-loading-spinner></osf-loading-spinner>
@@ -30,7 +17,6 @@
           [lazy]="true"
           [loading]="isLoadingMore()"
           [selectionMode]="selectionMode()"
-          [selection]="selectedNodes()"
           [scrollHeight]="scrollHeight()"
           [value]="nodes()"
           [virtualScroll]="true"
@@ -84,8 +70,8 @@
                   {{ file.dateModified | date: 'MMM d, y hh:mm a' }}
                 </div>
 
-                @if (isSomeFileActionAllowed && !selectedFiles().length) {
-                  <div class="relative ml-auto">
+                @if (canShowMenu()) {
+                  <div class="ml-auto">
                     <osf-file-menu
                       (action)="onFileMenuAction($event, file)"
                       [isFolder]="file.kind === 'folder'"
@@ -115,4 +101,4 @@ <h3 class="font-normal mb-4 text-no-transform">{{ 'files.emptyState' | translate
       </div>
     </div>
   }
-</div>
+</osf-files-drop-zone>

src/app/shared/components/files-tree/files-tree.component.scss

@@ -62,27 +62,3 @@
     padding: 0;
   }
 }
-
-.drop-zone {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  z-index: 1000;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--white);
-  transition:
-    background 0.3s ease,
-    backdrop-filter 0.3s ease;
-  pointer-events: none;
-  background: transparent;
-
-  &.active {
-    backdrop-filter: blur(0.3rem);
-    background: rgba(132, 174, 210, 0.5);
-    pointer-events: all;
-  }
-}