feat(projects): add routing and based ui

package.json

@@ -32,6 +32,7 @@
     "@ngxs/store": "^19.0.0",
     "@primeng/themes": "^19.0.9",
     "primeflex": "^4.0.0",
+    "primeicons": "^7.0.0",
     "primeng": "^19.0.9",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",

src/app/app.routes.ts

@@ -78,6 +78,49 @@ export const routes: Routes = [
             (mod) => mod.MyProjectsComponent,
           ),
       },
+      {
+        path: 'my-projects/:id',
+        loadComponent: () =>
+          import('./features/my-projects/project/project.component').then(
+            (mod) => mod.ProjectComponent,
+          ),
+        children: [
+          {
+            path: '',
+            pathMatch: 'full',
+            redirectTo: 'overview',
+          },
+          {
+            path: 'overview',
+            loadComponent: () =>
+              import(
+                './features/my-projects/project/overview/project-overview.component'
+              ).then((mod) => mod.ProjectOverviewComponent),
+          },
+          {
+            path: 'metadata',
+            loadComponent: () =>
+              import(
+                './features/my-projects/project/metadata/project-metadata.component'
+              ).then((mod) => mod.ProjectMetadataComponent),
+          },
+          {
+            path: 'files',
+            loadComponent: () =>
+              import(
+                './features/my-projects/project/files/project-files.component'
+              ).then((mod) => mod.ProjectFilesComponent),
+          },
+          {
+            path: 'files/:fileId',
+            loadComponent: () =>
+              import(
+                './features/my-projects/project/files/file-detail/file-detail.component'
+              ).then((mod) => mod.FileDetailComponent),
+          },
+        ],
+      },
+
       {
         path: 'settings',
         loadChildren: () =>

src/app/features/my-projects/my-projects.component.html

@@ -38,7 +38,7 @@
           <osf-search-input
             class="w-full"
             [searchValue]="searchValue()"
-            (searchValueChange)="searchValue.set($event)"
+            (searchValueChange)="searchValue.set($any($event))"
             placeholder="Filter by title, description, and tags"
           />
 
@@ -68,7 +68,7 @@
               </tr>
             </ng-template>
             <ng-template #body let-project>
-              <tr>
+              <tr (click)="navigateToProject(project)">
                 <td>
                   <p class="flex align-items-center gap-2">
                     <i

src/app/features/my-projects/my-projects.component.ts

@@ -22,6 +22,7 @@ import { DialogService } from 'primeng/dynamicdialog';
 import { AddProjectFormComponent } from './add-project-form/add-project-form.component';
 import { GetProjects, HomeSelectors } from '@core/store/home';
 import { Store } from '@ngxs/store';
+import { Router, RouterOutlet } from '@angular/router';
 
 @Component({
   selector: 'osf-my-projects',
@@ -40,15 +41,17 @@ import { Store } from '@ngxs/store';
     DatePipe,
     TableModule,
     NgClass,
+    RouterOutlet,
   ],
   templateUrl: './my-projects.component.html',
   styleUrl: './my-projects.component.scss',
   providers: [DialogService],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class MyProjectsComponent implements OnInit {
-  #dialogService = inject(DialogService);
-  #store = inject(Store);
+  readonly #dialogService = inject(DialogService);
+  readonly #store = inject(Store);
+  readonly #router = inject(Router);
   defaultTabValue = 0;
   protected readonly isDesktop = toSignal(inject(IS_WEB));
   protected readonly isTablet = toSignal(inject(IS_MEDIUM));
@@ -64,6 +67,7 @@ export class MyProjectsComponent implements OnInit {
     HomeSelectors.getProjects,
   );
   protected selectedTab = this.defaultTabValue;
+  readonly activeProject = signal<Project | null>(null);
 
   filteredProjects = computed(() => {
     const search = this.searchValue().toLowerCase();
@@ -104,6 +108,11 @@ export class MyProjectsComponent implements OnInit {
     });
   }
 
+  navigateToProject(project: Project): void {
+    this.activeProject.set(project);
+    this.#router.navigate(['/my-projects', project.id]);
+  }
+
   ngOnInit() {
     this.#store.dispatch(GetProjects);
   }

src/app/features/my-projects/project/files/file-detail/file-detail.component.html

@@ -0,0 +1,76 @@
+<osf-sub-header title="filename.doc" />
+
+<div class="flex gap-4 bg-white flex-column h-full flex-1 p-4">
+  <a
+    [routerLink]="['/my-projects/project/files']"
+    class="flex align-items-center gap-2 back-navigation font-semibold"
+  >
+    <i class="pi pi-angle-left text-base"></i>
+    Back to list of files
+  </a>
+
+  <div class="flex sm:flex-column lg:flex-row gap-4 flex-1">
+    <div style="background: #d9d9d9" class="flex flex-1 border-round-md"></div>
+    <div class="flex flex-column gap-4 flex-1">
+      <div class="metadata p-4 flex flex-column gap-5">
+        <div class="flex justify-content-between">
+          <h2>File Metadata</h2>
+
+          <p-button severity="secondary"> Edit</p-button>
+        </div>
+
+        <div class="flex flex-column gap-2">
+          <h3>Title</h3>
+
+          <span>filename.doc</span>
+        </div>
+
+        <div class="flex flex-column gap-2">
+          <h3>Description</h3>
+
+          <div>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+            eiusmod tempor incididunt ut labore et dolore magna aliqua
+          </div>
+        </div>
+
+        <div class="flex flex-column gap-2">
+          <h3>Resource Type</h3>
+
+          <span>Lorem ipsum</span>
+        </div>
+
+        <div class="flex flex-column gap-2">
+          <h3>Resource Language</h3>
+
+          <span>English</span>
+        </div>
+      </div>
+
+      <div class="metadata p-4 flex flex-column gap-5">
+        <div class="flex justify-content-between">
+          <h2>Project Metadata</h2>
+
+          <p-button severity="secondary"> Edit</p-button>
+        </div>
+
+        <div class="flex flex-column gap-2">
+          <h3>Contributors</h3>
+
+          <a href="" class="font-bold">John Doe</a>
+          <a href="" class="font-bold">Jeremy Wolfve</a>
+          <a href="" class="font-bold">Ava Mitra</a>
+        </div>
+
+        <div class="flex flex-column gap-2">
+          <h3>Description</h3>
+
+          <div>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+            eiusmod tempor incididunt ut labore et dolore magna aliqua
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

src/app/features/my-projects/project/files/file-detail/file-detail.component.scss

@@ -0,0 +1,11 @@
+@use "assets/styles/variables" as var;
+
+.back-navigation {
+  color: var(--blue-2);
+}
+
+.metadata {
+  color: var(--dark-blue-1);
+  border: 1px solid var(--grey-2);
+  border-radius: 12px;
+}

src/app/features/my-projects/project/files/file-detail/file-detail.component.ts

@@ -0,0 +1,15 @@
+import { ChangeDetectionStrategy, Component, HostBinding } from '@angular/core';
+import { SubHeaderComponent } from '@shared/components/sub-header/sub-header.component';
+import { RouterLink } from '@angular/router';
+import { Button } from 'primeng/button';
+
+@Component({
+  selector: 'osf-file-detail',
+  imports: [SubHeaderComponent, RouterLink, Button],
+  templateUrl: './file-detail.component.html',
+  styleUrl: './file-detail.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class FileDetailComponent {
+  @HostBinding('class') classes = 'flex flex-column flex-1 gap-4 w-full h-full';
+}

src/app/features/my-projects/project/files/project-files.component.html

@@ -0,0 +1,128 @@
+<!--@if (!selectFile()) {-->
+<!--  <osf-sub-header title="Files" />-->
+
+<!--  <div class="table-container bg-white p-4 h-full">-->
+
+@if (!selectFile()) {
+  <osf-sub-header title="Files"></osf-sub-header>
+
+  <div class="flex flex-column bg-white gap-4 h-full flex-1 p-4">
+    <div class="flex flex-grow-0 w-30rem">
+      <p-floatlabel class="w-full md:w-56" variant="in">
+        <p-select
+          inputId="in_label"
+          [options]="['Storage Location: United State', 'Another Storage']"
+          styleClass="w-full"
+          variant="filled"
+        />
+        <label for="in_label">OSF Storage</label>
+      </p-floatlabel>
+    </div>
+
+    <div class="flex gap-4">
+      <osf-search-input class="w-30rem" placeholder="Search your projects" />
+
+      <div class="sorting-container no-border-dropdown">
+        <p-dropdown
+          placeholder="Sort by name: A-Z"
+          optionLabel="label"
+          optionValue="value"
+        ></p-dropdown>
+      </div>
+
+      <div class="flex gap-2 ml-auto">
+        <div class="outline-button blue">
+          <i class="osf-icon-download"> </i>
+
+          <span>Download As Zip</span>
+        </div>
+
+        <div class="outline-button green">
+          <i class="osf-icon-plus"> </i>
+
+          <span>Create Folder</span>
+        </div>
+
+        <div class="outline-button green">
+          <i class="osf-icon-upload"> </i>
+
+          <span>Upload File</span>
+        </div>
+      </div>
+    </div>
+
+    <div class="files-table">
+      @for (file of files(); track file.downloads) {
+        <div class="files-table-row">
+          <div class="files-table-cell flex gap-2">
+            @if (file.downloadType && file.type !== "folder") {
+              @if (file.downloadType === "doc") {
+                <i style="color: #337ab7" class="osf-icon-doc"></i>
+              } @else {
+                <i style="color: #b73333" class="osf-icon-pdf"></i>
+              }
+            } @else {
+              <i class="osf-icon-folder"></i>
+            }
+
+            <div>
+              {{ file.name }}
+            </div>
+          </div>
+          <div class="files-table-cell">{{ file.downloads }} Downloads</div>
+
+          <div class="files-table-cell">
+            {{ file.size }}
+          </div>
+          <div class="files-table-cell">
+            {{ file.modifiedAt | date: "MMM d, y hh:mm a" }}
+          </div>
+          <div class="files-table-cell">
+            <p-button
+              class="btn-icon-text"
+              size="small"
+              styleClass="w-2rem h-2rem"
+              severity="secondary"
+              icon="pi pi-ellipsis-v"
+              (click)="
+                $event.preventDefault(); $event.stopImmediatePropagation()
+              "
+            ></p-button>
+          </div>
+        </div>
+      }
+    </div>
+  </div>
+}
+
+<!--    <p-table [value]="files()">-->
+<!--      <ng-template #body let-file>-->
+<!--        <tr>-->
+<!--          <td (click)="navigateToFile(file)">{{ file.name }}</td>-->
+<!--          <td>{{ file.downloads }} Downloads</td>-->
+<!--          <td>{{ file.size }}</td>-->
+<!--          <td>{{ file.modifiedAt | date: "MMM d, y hh:mm a" }}</td>-->
+<!--          <td>-->
+<!--            <p-menu-->
+<!--              #menu-->
+<!--              [popup]="true"-->
+<!--              [model]="[-->
+<!--                { label: 'Download', icon: 'pi pi-download' },-->
+<!--                { label: 'Copy', icon: 'pi pi-copy' },-->
+<!--                { label: 'Move', icon: 'pi pi-directions' },-->
+<!--                { label: 'Rename', icon: 'pi pi-pencil' },-->
+<!--                { label: 'Delete', icon: 'pi pi-trash' },-->
+<!--              ]"-->
+<!--            />-->
+
+<!--            <p-button-->
+<!--              size="small"-->
+<!--              severity="secondary"-->
+<!--              class="btn-icon-text"-->
+<!--              icon="pi pi-ellipsis-v"-->
+<!--              (click)="menu.toggle($event)"-->
+<!--            ></p-button>-->
+<!--          </td>-->
+<!--        </tr>-->
+<!--      </ng-template>-->
+<!--    </p-table>-->