From c4a5178a3e050e0bde42a887f68284936a102e67 Mon Sep 17 00:00:00 2001 From: NazarMykhalkevych Date: Thu, 17 Jul 2025 18:32:53 +0300 Subject: [PATCH] feat(registration): get token from local storage, change drag and drop file components --- src/app/core/interceptors/auth.interceptor.ts | 7 +- .../files-tree/files-tree.component.html | 178 +++++++++--------- .../files-tree/files-tree.component.scss | 6 +- .../files-tree/files-tree.component.ts | 23 ++- 4 files changed, 119 insertions(+), 95 deletions(-) diff --git a/src/app/core/interceptors/auth.interceptor.ts b/src/app/core/interceptors/auth.interceptor.ts index 174408c69..92dbd5630 100644 --- a/src/app/core/interceptors/auth.interceptor.ts +++ b/src/app/core/interceptors/auth.interceptor.ts @@ -9,11 +9,12 @@ export const authInterceptor: HttpInterceptorFn = ( const authToken = 'UlO9O9GNKgVzJD7pUeY53jiQTKJ4U2znXVWNvh0KZQruoENuILx0IIYf9LoDz7Duq72EIm'; // UlO9O9GNKgVzJD7pUeY53jiQTKJ4U2znXVWNvh0KZQruoENuILx0IIYf9LoDz7Duq72EIm kyrylo // 2rjFZwmdDG4rtKj7hGkEMO6XyHBM2lN7XBbsA1e8OqcFhOWu6Z7fQZiheu9RXtzSeVrgOt roman nastyuk - - if (authToken) { + const localStorageToken = localStorage.getItem('authToken'); + const token = localStorageToken || authToken; + if (token) { const authReq = req.clone({ setHeaders: { - Authorization: `Bearer ${authToken}`, + Authorization: `Bearer ${token}`, Accept: req.responseType === 'text' ? '*/*' : 'application/vnd.api+json', 'Content-Type': 'application/vnd.api+json', }, diff --git a/src/app/shared/components/files-tree/files-tree.component.html b/src/app/shared/components/files-tree/files-tree.component.html index f02951db3..0e1119685 100644 --- a/src/app/shared/components/files-tree/files-tree.component.html +++ b/src/app/shared/components/files-tree/files-tree.component.html @@ -1,94 +1,102 @@ -@if (!viewOnly()) { -
- @if (isDragOver()) { -
- -

{{ 'project.files.dropText' | translate }}

-
- } -
-} - -@if (isLoading()) { -
- -
-} @else { -
- + @if (!viewOnly()) { +
- - @if (file.previousFolder) { -
-
-
- - - {{ file.name ?? '' }} -
-
-
- } @else { -
-
- @if (file.kind !== 'folder') { -
- - {{ file?.name ?? '' }} -
- } @else { - -
- {{ file?.name ?? '' }} -
- } -
- -
- @if (file.extra.downloads) { - {{ file.kind === 'file' ? file.extra.downloads + ' ' + ('common.labels.downloads' | translate) : '' }} - } -
+ @if (isDragOver()) { +
+ +

{{ 'project.files.dropText' | translate }}

+
+ } +
+ } -
- {{ file.size | fileSize }} + @if (isLoading()) { +
+ +
+ } @else { +
+ + + @if (file.previousFolder) { +
+
+
+ + + {{ file.name ?? '' }} +
+
+ } @else { +
+
+ @if (file.kind !== 'folder') { +
+ + {{ file?.name ?? '' }} +
+ } @else { + +
+ {{ file?.name ?? '' }} +
+ } +
-
- {{ file.dateModified | date: 'MMM d, y hh:mm a' }} -
+
+ @if (file.extra.downloads) { + {{ file.kind === 'file' ? file.extra.downloads + ' ' + ('common.labels.downloads' | translate) : '' }} + } +
- @if (!viewOnly() && !viewOnlyDownloadable()) { -
- +
+ {{ file.size | fileSize }}
- } @else if (viewOnly() && viewOnlyDownloadable()) { +
- + {{ file.dateModified | date: 'MMM d, y hh:mm a' }}
- } -
- } - - - @if (!files().length) { -
-

{{ 'project.files.emptyState' | translate }}

-
- } -
-} + @if (!viewOnly() && !viewOnlyDownloadable()) { +
+ +
+ } @else if (viewOnly() && viewOnlyDownloadable()) { +
+ +
+ } +
+ } + + + + @if (!files().length) { +
+

{{ 'project.files.emptyState' | translate }}

+
+ } +
+ } +
diff --git a/src/app/shared/components/files-tree/files-tree.component.scss b/src/app/shared/components/files-tree/files-tree.component.scss index 864001576..922feb710 100644 --- a/src/app/shared/components/files-tree/files-tree.component.scss +++ b/src/app/shared/components/files-tree/files-tree.component.scss @@ -1,6 +1,10 @@ @use "assets/styles/variables" as var; @use "assets/styles/mixins" as mix; +:host { + min-height: 200px; +} + .files-table { display: flex; flex-direction: column; @@ -68,7 +72,7 @@ } .drop-zone { - position: fixed; + position: absolute; top: 0; left: 0; width: 100%; diff --git a/src/app/shared/components/files-tree/files-tree.component.ts b/src/app/shared/components/files-tree/files-tree.component.ts index 5ce87dfb2..4f4debb9d 100644 --- a/src/app/shared/components/files-tree/files-tree.component.ts +++ b/src/app/shared/components/files-tree/files-tree.component.ts @@ -9,17 +9,19 @@ import { catchError } from 'rxjs/operators'; import { DatePipe } from '@angular/common'; import { + AfterViewInit, ChangeDetectionStrategy, Component, computed, effect, + ElementRef, HostBinding, inject, input, OnDestroy, - OnInit, output, signal, + viewChild, } from '@angular/core'; import { ActivatedRoute, Router } from '@angular/router'; @@ -38,8 +40,9 @@ import { CustomConfirmationService, FilesService, ToastService } from '@shared/s styleUrl: './files-tree.component.scss', changeDetection: ChangeDetectionStrategy.OnPush, }) -export class FilesTreeComponent implements OnInit, OnDestroy { +export class FilesTreeComponent implements OnDestroy, AfterViewInit { @HostBinding('class') classes = 'relative'; + private dropZoneContainerRef = viewChild('dropZoneContainer'); readonly filesService = inject(FilesService); readonly router = inject(Router); readonly toastService = inject(ToastService); @@ -78,15 +81,15 @@ export class FilesTreeComponent implements OnInit, OnDestroy { } }); - ngOnInit(): void { - window.addEventListener('dragenter', this.onGlobalDragEnter); + ngAfterViewInit(): void { + this.dropZoneContainerRef()!.nativeElement.addEventListener('dragenter', this.dragEnterHandler); } ngOnDestroy(): void { - window.removeEventListener('dragenter', this.onGlobalDragEnter); + this.dropZoneContainerRef()!.nativeElement.removeEventListener('dragenter', this.dragEnterHandler); } - onGlobalDragEnter = (event: DragEvent) => { + private dragEnterHandler = (event: DragEvent) => { if (event.dataTransfer?.types?.includes('Files')) { this.isDragOver.set(true); } @@ -94,12 +97,20 @@ export class FilesTreeComponent implements OnInit, OnDestroy { onDragOver(event: DragEvent) { event.preventDefault(); + event.stopPropagation(); event.dataTransfer!.dropEffect = 'copy'; this.isDragOver.set(true); } + onDragLeave(event: Event) { + event.preventDefault(); + event.stopPropagation(); + this.isDragOver.set(false); + } + onDrop(event: DragEvent) { event.preventDefault(); + event.stopPropagation(); this.isDragOver.set(false); const files = event.dataTransfer?.files;