multi part uploading added

package.json

@@ -30,6 +30,8 @@
     "aws-amplify": "^6.0.5",
     "cheerio": "^1.0.0-rc.12",
     "cross-domain-storage": "^2.0.7",
+    "http-status-codes": "^2.3.0",
+    "ngx-filesize": "^3.0.3",
     "ngx-logger": "^5.0.12",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",

projects/client/src/app/app.module.ts

@@ -6,6 +6,10 @@ import { SharedModule } from "@globalShared";
 import { HomeModule } from '@modules/home';
 import { AppComponent } from '@app/app.component';
 import { AppRoutingModule } from "@app/app-routing.module";
+import { PersonalVaultModule } from "@modules/personal-vault";
+import { ProfileModule } from "@modules/profile";
+import { SettingsModule } from "@modules/settings";
+import { StorageModule } from "@modules/storage";
 
 
 @NgModule({
@@ -18,7 +22,11 @@ import { AppRoutingModule } from "@app/app-routing.module";
     BrowserModule,
     HttpClientModule,
     HomeModule,
-    BrowserAnimationsModule
+    PersonalVaultModule,
+    ProfileModule,
+    SettingsModule,
+    StorageModule,
+    BrowserAnimationsModule,
   ],
   providers: [],
   bootstrap: [AppComponent]

projects/client/src/app/components/file-manager/file-manager.component.scss

@@ -0,0 +1,222 @@
+
+.file-list-wrap {
+  position: relative;
+  background: var(--mdc-elevated-card-container-color);
+  display: flex;
+  height: calc(100% - 60px);
+  margin: 8px;
+  overflow: auto;
+
+  .file-table-list {
+    width: 100%;
+    overflow: auto;
+
+    .mat-mdc-table {
+      background-color: unset !important;
+      box-shadow: none !important;
+      tr {
+        font-size: 13px;
+        height: 35px;
+        cursor: pointer;
+        transition: all 0.15s ease;
+        .mat-mdc-cell {
+          border: none !important;
+        }
+      }
+    }
+  }
+
+  .file-list {
+    display: flex;
+    flex-wrap: wrap;
+    height: fit-content;
+    row-gap: 8px;
+    column-gap: 4px;
+    padding: 5px;
+
+    .folder-wrap {
+      display: flex;
+      flex-direction: column;
+      justify-content: space-evenly;
+      align-items: center;
+      gap: 6px;
+      padding: 12px 0 4px 0;
+      border-radius: 5px;
+      cursor: pointer;
+      transition: all 0.15s ease;
+
+      .object-icon {
+        width: 50px;
+        height: 50px;
+        font-size: 50px;
+        padding: 0 3px;
+      }
+
+      .image-preview-wrap {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        .image-preview img {
+          max-width: 65px !important;
+          max-height: 50px !important;
+        }
+      }
+
+      .folder-name {
+        width: 80px;
+        max-width: 80px;
+        padding: 0 3px;
+        font-size: 13px;
+        text-align: center;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+    }
+  }
+}
+
+.dnd-area {
+  position: absolute;
+  z-index: 100;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  border-radius: 8px;
+  display: none;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  font-size: 30px;
+  mat-icon {
+    width: 80px;
+    height: 80px;
+    font-size: 80px;
+  }
+}
+
+.fileover .dnd-area {
+  display: flex;
+}
+
+.no-drag {
+  pointer-events: none;
+}
+
+mat-icon {
+  opacity: 0.6;
+}
+
+.custom-file-icon {
+  opacity: 1 !important;
+}
+
+.header-buttons {
+  font-size: 15px !important;
+}
+
+.custom-border-color {
+  border-color: rgba(159, 159, 159, 0.3) !important;
+}
+
+.file-tree-invisible {
+  display: none;
+}
+
+.file-tree ul,
+.file-tree li {
+  margin-top: 0;
+  margin-bottom: 0;
+  list-style-type: none;
+}
+
+/*
+ * This padding sets alignment of the nested nodes.
+ */
+.file-tree .mat-nested-tree-node div[role=group] {
+  padding-left: 30px;
+}
+
+/*
+ * Padding for leaf nodes.
+ * Leaf nodes need to have padding so as to align with other non-leaf nodes
+ * under the same parent.
+ */
+.file-tree div[role=group] > .mat-tree-node {
+  padding-left: 30px;
+}
+
+.file-tree {
+  width: 100%;
+  max-height: calc(100% - 12px);
+  overflow: auto;
+  padding: 15px 15px 15px 5px;
+  background: var(--mat-tree-container-background-color);
+
+  .mat-tree-node {
+    min-height: 35px;
+    min-width: 200px;
+    font-size: 13px;
+    border-radius: 3px;
+    cursor: pointer;
+    user-select: none;
+
+    .object-icon {
+      font-size: 22px !important;
+      margin-right: 6px;
+    }
+
+    .expand-icon {
+      font-size: 18px !important;
+      margin: 0 3px;
+    }
+  }
+}
+
+.theme-dark {
+  .dnd-area {
+    border: 3px dashed #c4c4c4;
+    background: rgba(45, 45, 45, 0.7);
+  }
+  .file-tree, .file-list-wrap {
+    background: color-mix(in srgb, var(--mat-tree-container-background-color), transparent 60%);
+  }
+  .mat-tree-node:hover, .mat-tree-node.active-folder, .folder-wrap:hover {
+    background: rgba(168, 255, 199, 0.15) !important;
+
+    .object-icon {
+      opacity: 1;
+      color: rgb(148, 232, 178);
+    }
+  }
+  .file-table-list tr.mat-mdc-row:hover {
+    background: rgba(185, 255, 210, 0.05) !important;
+    .object-icon {
+      opacity: 0.8;
+      color: rgb(168, 248, 197);
+    }
+  }
+}
+
+.theme-light {
+  .dnd-area {
+    border: 3px dashed #5b5b5b;
+    background: rgba(255, 255, 255, 0.6);
+  }
+  .mat-tree-node:hover, .mat-tree-node.active-folder, .folder-wrap:hover {
+    background: rgba(202, 198, 239, 0.3);
+
+    .object-icon {
+      opacity: 1;
+      color: rgb(125, 116, 222);
+    }
+  }
+  .file-table-list tr.mat-mdc-row:hover {
+    background: rgba(202, 198, 239, 0.15) !important;
+    .object-icon {
+      opacity: 0.8;
+      color: rgb(125, 116, 222);
+    }
+  }
+}

projects/client/src/app/modules/home/components/dashboard/dashboard.component.html

@@ -1,6 +1,6 @@
 <app-header></app-header>
 
-<div class="!mt-14 min-[600px]:!mt-16">
+<div class="!pt-14 min-[600px]:!pt-16">
   @if (navService.isSidenavShown()) {
     <app-sidenav [items]="sidenavItemList"></app-sidenav>
   }

projects/client/src/app/modules/home/components/sidenav/sidenav.component.html

@@ -70,7 +70,7 @@
       }
     </div>
   </mat-sidenav>
-  <mat-sidenav-content [ngClass]="shortSidenav ? '!ml-14' : '!ml-60'" class="min-h-screen py-4 px-5 !transition-all">
+  <mat-sidenav-content [ngClass]="shortSidenav ? '!ml-14' : '!ml-60'" class="py-4 px-5 !transition-all">
     <router-outlet></router-outlet>
   </mat-sidenav-content>
 </mat-sidenav-container>

projects/client/src/app/modules/personal-vault/components/personal-vault/personal-vault.component.html

@@ -1,4 +1,3 @@
-<h2 class="text-4xl font-medium mb-4 text-center pt-16">
-  Personal Vault will be added soon!
-  <button (click)="test()">Test</button>
-</h2>
+
+<app-file-manager [type]="FileManagerType.PersonalVault"></app-file-manager>
+

projects/client/src/app/modules/personal-vault/components/personal-vault/personal-vault.component.ts

@@ -1,16 +1,11 @@
 import { Component } from '@angular/core';
-import { CognitoService } from "@globalShared";
+import { FileManagerType } from "@types";
+
 
 @Component({
   selector: 'app-personal-vault',
   templateUrl: './personal-vault.component.html'
 })
 export class PersonalVaultComponent {
-
-  constructor(private cognitoService: CognitoService) {}
-
-  test() {
-    console.log(this.cognitoService.fetchAuthSession());
-    console.log(this.cognitoService.currentAuthenticatedUser());
-  }
+  protected readonly FileManagerType = FileManagerType;
 }