Merge pull request #4 from marcode24/dev

💄 add UI for specific folder

Author: marcode24

src/app/app.module.ts

@@ -9,7 +9,7 @@ import { FeaturesModule } from './features/features.module';
 
 @NgModule({
   declarations: [
-    AppComponent
+    AppComponent,
   ],
   imports: [
     BrowserModule,

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

@@ -33,7 +33,7 @@ header {
 
   & input.icon {
     background: var(--bg-sidebar);
-    border: var(--border-input);
+    border: 1px solid transparent;
     border-radius: 1rem;
     width: 100%;
     min-width: 0;
@@ -43,6 +43,13 @@ header {
     transition: 0.2s;
     box-shadow: var(--box-shadow);
 
+    &:focus {
+      border: 1px solid var(--border-input);
+      background: var(--bg-2);
+      color: var(--fc-primary);
+      outline: 0;
+    }
+
     & ~ i {
       top: 15px;
       left: 20px;

src/app/core/constants/file.constant.ts

@@ -0,0 +1,24 @@
+export const MAX_FILE_SIZE = 2000000;
+export const ALLOWED_FILE_TYPES = [
+  'image/png',
+  'image/jpeg',
+  'image/jpg',
+  'application/pdf',
+  'application/vnd.openxmlformats-officedocument.wordprocessingml.document', // .docx
+];
+
+export const ICONS = {
+  png: 'bxs-file-png',
+  jpg: 'bxs-file-jpg',
+  jpeg: 'bxs-file-image',
+  pdf: 'bxs-file-pdf',
+  docx: 'bxs-file',
+} as const;
+
+export const ALLOWED_FILE_EXTENSIONS = [
+  'png',
+  'jpg',
+  'jpeg',
+  'pdf',
+  'docx',
+];

src/app/core/guards/folder.guard.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { FolderGuard } from './folder.guard';
+
+describe('FolderGuard', () => {
+  let guard: FolderGuard;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    guard = TestBed.inject(FolderGuard);
+  });
+
+  it('should be created', () => {
+    expect(guard).toBeTruthy();
+  });
+});

src/app/core/guards/folder.guard.ts

@@ -0,0 +1,30 @@
+import { Injectable } from '@angular/core';
+import { ActivatedRouteSnapshot, CanActivate, Router, UrlTree } from '@angular/router';
+
+import { Observable, tap } from 'rxjs';
+
+import { FolderService } from '@services/folder.service';
+
+import { isMongoId } from '@utils/mongo.util';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class FolderGuard implements CanActivate {
+
+  constructor(
+    private folderService: FolderService,
+    private router: Router
+  ) {}
+
+  canActivate(route: ActivatedRouteSnapshot)
+    : Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
+    const folderId = route.params['folderId'];
+    if(!isMongoId(folderId)) return this.router.navigate(['/']);
+    return this.folderService.getFolder(folderId).pipe(tap((hasAccess: boolean) => {
+      if(!hasAccess) {
+        return this.router.navigate(['/']);
+      }
+    }));
+  }
+}

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

@@ -1,3 +1,4 @@
+import { File } from "@models/file.model";
 import { Folder } from "@models/folder.model";
 import { User } from "@models/user.model";
 
@@ -15,3 +16,14 @@ export interface IFolderCreated {
   folder: Folder;
   msg: string;
 }
+
+export interface IFolderResponse {
+  ok: boolean,
+  folder: Folder,
+}
+
+export interface IFileResponse {
+  ok: boolean,
+  msg: string,
+  files: File[]
+}

src/app/core/models/file.model.ts

@@ -12,5 +12,6 @@ export class File {
   createdAt: Date;
   updatedAt: Date;
   folder: Folder;
+  type: string;
   _id?: string;
 }

src/app/core/models/folder.model.ts

@@ -11,6 +11,7 @@ export class Folder {
   createdAt: Date;
   updatedAt: Date;
   parent: Folder;
+  type: string;
   folders: Folder[];
   files: File[];
   color: string;

src/app/core/pipes/file-size.pipe.spec.ts

@@ -0,0 +1,9 @@
+import { FileSizePipe } from './file-size.pipe';
+
+describe('FileSizePipe', () => {
+  it('create an instance', () => {
+    const pipe = new FileSizePipe();
+
+    expect(pipe).toBeTruthy();
+  });
+});

src/app/core/pipes/file-size.pipe.ts

@@ -0,0 +1,23 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'fileSize'
+})
+export class FileSizePipe implements PipeTransform {
+
+  transform(value: string | number): string {
+    return this.formatBytes(+value);
+  }
+
+  private formatBytes(bytes: number, decimals = 2): string {
+    if (bytes === 0) {
+      return '0 Bytes';
+    }
+    const k = 1024;
+    const dm = decimals < 0 ? 0 : decimals;
+    const sizes = ['Bytes', 'KB', 'MB'];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
+  }
+
+}