Merge pull request #6 from marcode24/dev

✨ add delete files

Author: marcode24

src/app/core/components/header/header.component.html

@@ -3,15 +3,31 @@
     <div class="burger" (click)="changeVisibilitySidebar()">
       <i class="bx bx-menu"></i>
     </div>
-    <div class="search">
+    <div class="search" #inputSearch>
       <div class="input-group">
         <input type="text" class="icon" #txtSearch
-          placeholder="Search...">
+          placeholder="Search..." (focus)="focusInputSearch()" (blur)="focusInputSearch()">
         <i class="bx bx-search"></i>
       </div>
     </div>
-    <div class="user">
-      here's user
+    <div class="profile">
+      <div class="user">
+      <div class="user-data" (click)="changeVisibilityOptions()">
+          <div class="user-img">
+            <img [src]="userActive.image" alt="user-image">
+          </div>
+          <span class="name">{{ userActive.name }} {{ userActive.surname }}</span>
+          <div class="icon">
+            <i class="bx bx-chevron-down"></i>
+          </div>
+        </div>
+        <ul class="dropdown-user" #dropdownUser>
+          <li class="item" (click)="logout()">
+            <i class="bx bx-log-out"></i>
+            <span>Cerrar sesión</span>
+          </li>
+        </ul>
+      </div>
     </div>
   </div>
 </header>

src/app/core/components/header/header.component.scss

@@ -9,7 +9,7 @@ header {
   width: -webkit-fill-available;
   background: var(--bg);
   border-bottom: 2px solid #e0e0e0;
-  z-index: 90;
+  z-index: 95;
 
   @include width-medium {
     margin-left: 0;
@@ -23,13 +23,27 @@ header {
     gap: 1rem;
     padding: 0 1rem;
     height: 100%;
+    position: relative;
 
     & .search {
       flex: 1;
       display: flex;
       align-items: center;
       justify-content: space-between;
       gap: 1rem;
+
+      @include width-medium {
+        flex: auto;
+      }
+
+      @include width-small {
+        &.focus {
+          position: absolute;
+          left: 1rem;
+          right: 1rem;
+          z-index: 100;
+        }
+      }
     }
   }
 
@@ -98,9 +112,146 @@ header {
   }
 }
 
-.user {
+.profile {
   flex: 1;
   display: flex;
   align-items: center;
   justify-content: flex-end;
+  position: relative;
+
+  & .user {
+    padding: 0.35rem 0.5rem;
+    border-radius: 1rem;
+    transition: 0.3s ease-in-out;
+
+    &:hover {
+      background: var(--bg-hover-3);
+      cursor: pointer;
+    }
+
+    & .user-data {
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+      gap: 0.5rem;
+
+      & .user-img {
+        width: 38px;
+        height: 38px;
+        border-radius: 50%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        overflow: hidden;
+
+        & img {
+          width: 100%;
+          height: 100%;
+          object-fit: cover;
+        }
+      }
+
+      & .name {
+        @include fs-6;
+        @include fw-500;
+        color: var(--fc-primary);
+        text-overflow: ellipsis;
+        overflow: hidden;
+        white-space: nowrap;
+
+        @include width-small {
+          display: none;
+        }
+      }
+
+      & .icon {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: var(--fc-primary);
+        transition: 0.5s;
+        border-radius: 50%;
+        width: 35px;
+        height: 35px;
+
+        @include width-small {
+          display: none;
+        }
+
+        & i {
+          @include fs-1;
+        }
+      }
+    }
+  }
+}
+
+.dropdown-user {
+  display: none;
+  z-index: 2;
+  list-style-type: none;
+  position: absolute;
+  opacity: 0;
+  top: 55px;
+  right: 0;
+  background-color: #f7f7f7;
+  padding: 0;
+  font-size: 16px;
+  border-radius: 10px;
+  box-shadow: none;
+  visibility: hidden;
+  height: fit-content;
+  transition: visibility 0.2s, opacity 0.2s linear, bottom 0.2s linear,
+  box-shadow 0.2s linear;
+  min-width: 14rem;
+
+  &.active {
+    opacity: 1;
+    bottom: 0;
+    display: block;
+    visibility: visible;
+    box-shadow: 0px 3px 12px 0px rgba(0, 0, 0, 0.25);
+  }
+
+  .item {
+    display: flex;
+    align-items: center;
+    list-style: none;
+    height: 45px;
+    transition: 0.3s ease;
+    padding: 0 1rem;
+    gap: 1rem;
+
+    &:hover {
+      background: var(--bg-hover-3);
+      cursor: pointer;
+    }
+
+    &:first-child {
+      border-radius: 10px 10px 0 0;
+    }
+
+    &:last-child {
+      border-radius: 0 0 10px 10px;
+    }
+
+    &:first-of-type {
+      border-radius: 10px;
+    }
+
+    & span {
+      @include fs-5;
+      @include fw-400;
+      color: var(--fc-primary);
+      text-overflow: ellipsis;
+      overflow: hidden;
+      white-space: nowrap;
+    }
+
+    & i {
+      @include fs-4;
+      @include fw-500;
+      color: var(--fc-primary);
+    }
+  }
 }

src/app/core/components/header/header.component.ts

@@ -1,13 +1,37 @@
-import { Component } from '@angular/core';
+import { Component, ElementRef, ViewChild } from '@angular/core';
+
+import { AuthService } from '@services/auth.service';
 
 @Component({
   selector: 'app-header',
   templateUrl: './header.component.html',
   styleUrls: ['./header.component.scss']
 })
 export class HeaderComponent {
+  @ViewChild('dropdownUser') dropdownUser: ElementRef;
+  @ViewChild('inputSearch') inputSearch: ElementRef;
+  userActive = this.authService.userActive;
+
+  constructor(
+    private authService: AuthService
+  ) { }
+
   changeVisibilitySidebar(): void {
     const sidebarElement = document.querySelector('.sidebar') as HTMLElement;
     sidebarElement.classList.toggle('closed');
+    const overlayElement = document.querySelector('.overlay') as HTMLElement;
+    overlayElement.classList.toggle('opened');
+  }
+
+  changeVisibilityOptions(): void {
+    this.dropdownUser.nativeElement.classList.toggle('active');
+  }
+
+  logout(): void {
+    this.authService.logout();
+  }
+
+  focusInputSearch(): void {
+    this.inputSearch.nativeElement.classList.toggle('focus');
   }
 }

src/app/core/components/sidebar/sidebar.component.html

@@ -30,3 +30,5 @@
     </li>
   </ul>
 </nav>
+
+<div class="overlay" #overlay (click)="changeVisibilitySidebar()"></div>

src/app/core/components/sidebar/sidebar.component.scss

@@ -144,3 +144,25 @@ nav {
     justify-content: center;
   }
 }
+
+.overlay {
+  background-color: rgba(71, 80, 87, 0.4);
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  z-index: 99;
+  transition: left 0.3s ease-in-out;
+
+  &.opened {
+    position: fixed;
+    opacity: 1;
+    left: 250px;
+    transition: left 0.3s ease-in-out;
+  }
+
+  @media (min-width: 769px) {
+    display: none;
+  }
+}

src/app/core/components/sidebar/sidebar.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnDestroy, OnInit } from '@angular/core';
+import { Component, ElementRef, OnDestroy, OnInit, ViewChild } from '@angular/core';
 
 import { Subscription } from 'rxjs';
 
@@ -13,6 +13,8 @@ import { FileService } from '@services/file.service';
 export class SidebarComponent implements OnDestroy, OnInit {
   userActive = this.authService.userActive;
   private totalSizeSubscription: Subscription;
+  @ViewChild('overlay') overlay: ElementRef;
+
   constructor(
     private authService: AuthService,
     private fileService: FileService
@@ -36,5 +38,6 @@ export class SidebarComponent implements OnDestroy, OnInit {
   changeVisibilitySidebar(): void {
     const sidebarElement = document.querySelector('.sidebar') as HTMLElement;
     sidebarElement.classList.toggle('closed');
+    this.overlay.nativeElement.classList.toggle('opened');
   }
 }

src/app/core/interfaces/response.interface.ts

@@ -28,5 +28,6 @@ export interface IFolderResponse {
 export interface IFileResponse {
   ok: boolean,
   msg: string,
-  files: File[]
+  files: File[],
+  file: File,
 }

src/app/core/services/auth.service.ts

@@ -60,4 +60,9 @@ export class AuthService {
         return true;
     }), catchError(() => of(false)));
   }
+
+  logout(): void {
+    Storage.removeLocalStorage('token');
+    this.router.navigateByUrl('/login');
+  }
 }

src/app/core/services/file.service.ts

@@ -17,6 +17,7 @@ const base_url = environment.base_url;
 })
 export class FileService {
   filesCreated: EventEmitter<FileModel[]> = new EventEmitter();
+  fileDeleted: EventEmitter<FileModel> = new EventEmitter();
   updateTotalSize: EventEmitter<number> = new EventEmitter();
 
   get headers() {
@@ -47,4 +48,14 @@ export class FileService {
     const url = `${base_url}/file/download/${fileID}`;
     return this.http.get(url, { responseType: 'blob', ...this.headers });
   }
+
+  deleteFile(fileID: string): Observable<boolean> {
+    const url = `${base_url}/file/${fileID}`;
+    return this.http.delete<IFileResponse>(url, this.headers).pipe(map(resp => {
+      this.fileDeleted.emit(resp.file);
+      this.updateTotalSize.emit(-resp.file.size);
+      return resp.ok;
+    }));
+  }
+
 }

src/app/features/folder/folder.component.html

@@ -1,5 +1,5 @@
+<app-actions [folder]="folder"></app-actions>
 <div class="fluid-container" *ngIf="!loading && folder">
-  <app-actions [folder]="folder"></app-actions>
   <div class="not-items" *ngIf="!allFiles.length">
     <img src="assets/images/no-files.svg" alt="no-files-image">
     <span class="description">Agrega tu primer archivo o carpeta</span>