✨ add create folders from root

Author: marcode24

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

@@ -9,3 +9,9 @@ export interface IUserCreated {
   status?: number;
   msg?: string;
 }
+
+export interface IFolderCreated {
+  ok: boolean;
+  folder: Folder;
+  msg: string;
+}

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

@@ -1,9 +1,10 @@
 import { IPermission } from "@interfaces/permision.interface";
 
+import { File } from "./file.model";
 import { User } from "./user.model";
 
 export class Folder {
-  name?: string;
+  name: string;
   size: number;
   permission: IPermission[];
   owner: User;
@@ -12,5 +13,6 @@ export class Folder {
   parent: Folder;
   folders: Folder[];
   files: File[];
+  color: string;
   _id?: string;
 }

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

@@ -5,6 +5,7 @@ import { environment } from 'environments/environment';
 
 import { Observable, catchError, map, of } from 'rxjs';
 
+import { Folder } from '@models/folder.model';
 import { User } from '@models/user.model';
 
 import { IUserCreated } from '@interfaces/response.interface';
@@ -53,6 +54,7 @@ export class AuthService {
     return this.http.get<IUserCreated>(url, this.headers)
       .pipe(map((resp) => {
         this.userActive = resp.user;
+        this.userActive.rootFolder = resp.root as Folder;
         Storage.removeLocalStorage('token');
         Storage.savelocalStorage('token', resp.token);
         return true;

src/app/core/services/folder.service.spec.ts

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

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

@@ -0,0 +1,39 @@
+import { HttpClient } from '@angular/common/http';
+import { EventEmitter, Injectable } from '@angular/core';
+import { environment } from 'environments/environment';
+
+import { Folder } from '@models/folder.model';
+
+import { IFolderCreated } from '@interfaces/response.interface';
+
+import Storage from '@utils/storage.util';
+
+const base_url = environment.base_url;
+
+@Injectable({
+  providedIn: 'root'
+})
+export class FolderService {
+  folderCreated: EventEmitter<Folder> = new EventEmitter();
+
+  get headers() {
+    return {
+      headers: {
+        'x-token': Storage.getLocalStorage('token') || ''
+      }
+    };
+  }
+
+  constructor(
+    private http: HttpClient,
+  ) { }
+
+  createFolder(folderName: string, folderID: string): void {
+    const url = `${base_url}/folder/${folderID}`;
+    this.http.post<IFolderCreated>(url, { name: folderName }, this.headers).subscribe({
+      next: ({ folder }) => {
+        this.folderCreated.emit(folder);
+      }
+    });
+  }
+}

src/app/core/services/modal.service.spec.ts

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

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

@@ -0,0 +1,12 @@
+import { EventEmitter, Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ModalService {
+  openNewFolderModal: EventEmitter<{ open: boolean, folderID: string }> = new EventEmitter();
+
+  openNewFolder(folderID: string): void {
+    this.openNewFolderModal.emit({ open: true, folderID });
+  }
+}

src/app/features/home/components/components.module.ts

@@ -0,0 +1,23 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+
+import { DropdownsModule } from '@shared/dropdowns/dropdowns.module';
+
+import { FileComponent } from './file/file.component';
+import { FolderComponent } from './folder/folder.component';
+
+@NgModule({
+  declarations: [
+    FileComponent,
+    FolderComponent
+  ],
+  imports: [
+    CommonModule,
+    DropdownsModule
+  ],
+  exports: [
+    FileComponent,
+    FolderComponent
+  ],
+})
+export class ComponentsModule { }

src/app/features/home/components/file/file.component.html

@@ -0,0 +1,5 @@
+<div class="icon">
+  <i class="bx bx-file"></i>
+</div>
+<span class="name">{{ file.name }}</span>
+<app-dots-dropdown class="actions"></app-dots-dropdown>

src/app/features/home/components/file/file.component.scss

@@ -0,0 +1,21 @@
+@import 'settings/_colors.scss';
+@import 'settings/_typography.scss';
+
+.name {
+  @include fs-5;
+  @include fw-400;
+  color: var(--fc-primary);
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  flex: 1;
+}
+
+.icon {
+  @include fs-4;
+  color: var(--fc-primary);
+
+  & i {
+    @include fw-600;
+  }
+}