💄 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/interfaces/response.interface.ts

@@ -15,3 +15,8 @@ export interface IFolderCreated {
   folder: Folder;
   msg: string;
 }
+
+export interface IFolderResponse {
+  ok: boolean,
+  folder: Folder,
+}

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

@@ -2,9 +2,11 @@ import { HttpClient } from '@angular/common/http';
 import { EventEmitter, Injectable } from '@angular/core';
 import { environment } from 'environments/environment';
 
+import { Observable, map } from 'rxjs';
+
 import { Folder } from '@models/folder.model';
 
-import { IFolderCreated } from '@interfaces/response.interface';
+import { IFolderCreated, IFolderResponse } from '@interfaces/response.interface';
 
 import Storage from '@utils/storage.util';
 
@@ -36,4 +38,9 @@ export class FolderService {
       }
     });
   }
+
+  getFolder(folderID: string): Observable<Folder> {
+    const url = `${base_url}/folder/${folderID}`;
+    return this.http.get<IFolderResponse>(url, this.headers).pipe(map(resp => resp.folder));
+  }
 }

src/app/core/utils/mongo.util.ts

@@ -0,0 +1,3 @@
+const MONGO_ID = /^[0-9a-fA-F]{24}$/;
+
+export const isMongoId = (id: string): boolean => MONGO_ID.test(id);

src/app/features/features.module.ts

@@ -5,6 +5,7 @@ import { RouterModule } from '@angular/router';
 import { ComponentsModule } from '@components/components.module';
 
 import { FeaturesComponent } from './features.component';
+import { FolderModule } from './folder/folder.module';
 import { HomeModule } from './home/home.module';
 
 @NgModule({
@@ -15,7 +16,8 @@ import { HomeModule } from './home/home.module';
     CommonModule,
     RouterModule,
     ComponentsModule,
-    HomeModule
+    HomeModule,
+    FolderModule
   ]
 })
 export class FeaturesModule { }

src/app/features/features.routing.ts

@@ -13,6 +13,13 @@ const routes: Routes = [
     loadChildren: () => import('./home/home.routing')
       .then(m => m.HomeRoutingModule),
   },
+  {
+    path: 'folder',
+    component: FeaturesComponent,
+    canActivate: [AuthGuard],
+    loadChildren: () => import('./folder/folder.routing')
+      .then(m => m.FolderRoutingModule)
+  }
 ];
 
 @NgModule({

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

@@ -0,0 +1,17 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+
+import { TableFilesComponent } from './table-files/table-files.component';
+
+@NgModule({
+  declarations: [
+    TableFilesComponent
+  ],
+  imports: [
+    CommonModule
+  ],
+  exports: [
+    TableFilesComponent,
+  ]
+})
+export class ComponentsModule { }

src/app/features/folder/components/table-files/table-files.component.html

@@ -0,0 +1,19 @@
+<div class="items">
+  <div class="item">
+    <div class="icon">
+      <i class="bx bx-file"></i>
+    </div>
+    <div class="name">
+      <span>Ejemplo de dock</span>
+    </div>
+    <div class="type">
+      <span>mp4</span>
+    </div>
+    <div class="size">
+      <span>7 mb</span>
+    </div>
+    <div class="actions">
+      ...
+    </div>
+  </div>
+</div>

src/app/features/folder/components/table-files/table-files.component.scss

@@ -0,0 +1,59 @@
+@import 'settings/_colors.scss';
+@import 'settings/_typography.scss';
+
+.items {
+  display: flex;
+  flex-direction: column;
+
+  & .item {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    height: 3.2rem;
+    padding: 0 0.5rem;
+    gap: 1rem;
+    border-radius: 1rem;
+    transition: 0.3s ease;
+    cursor: pointer;
+
+    &:hover {
+      background: var(--bg-hover-2);
+    }
+
+    & .icon {
+      @include fs-3;
+      width: 2.5rem;
+      height: 2.5rem;
+      border-radius: 50%;
+      background: var(--bg-2);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    & .name, & .type, & .size {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    & .name {
+      @include fs-5;
+      @include fw-400;
+      flex: 2;
+      color: var(--fc-primary);
+    }
+
+    & .type, & .size {
+      @include fs-6;
+      flex: 1;
+      color: var(--fc-secondary);
+      text-align: center;
+    }
+
+    & .actions {
+      flex: 1;
+      text-align: center;
+    }
+  }
+}

src/app/features/folder/components/table-files/table-files.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TableFilesComponent } from './table-files.component';
+
+describe('TableFilesComponent', () => {
+  let component: TableFilesComponent;
+  let fixture: ComponentFixture<TableFilesComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ TableFilesComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TableFilesComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});