Feat/137 - My projects/Registration tab layout

src/app/app.routes.ts

@@ -118,9 +118,15 @@ export const routes: Routes = [
                 './features/my-projects/project/files/file-detail/file-detail.component'
               ).then((mod) => mod.FileDetailComponent),
           },
+          {
+            path: 'registrations',
+            loadComponent: () =>
+              import(
+                '@osf/features/my-projects/project/registrations/registrations.component'
+              ).then((mod) => mod.RegistrationsComponent),
+          },
         ],
       },
-
       {
         path: 'settings',
         loadChildren: () =>

src/app/core/components/nav-menu/nav-menu.component.html

@@ -19,6 +19,29 @@
           ></i>
         }
       </a>
+
+      <!-- TODO Add routing and nav for the active project-->
+
+      <!--      @if(item.label === 'My Projects') {-->
+      <!--        <div class="ml-4">-->
+      <!--          <p-panelMenu [model]="projectMenuItems" [multiple]="false">-->
+      <!--            <ng-template #item let-item>-->
+      <!--              <a-->
+      <!--                [routerLink]="item.routerLink"-->
+      <!--                routerLinkActive="active"-->
+      <!--                [routerLinkActiveOptions]="{ exact: item.useExactMatch }"-->
+      <!--                class="nav-link flex"-->
+      <!--              >-->
+      <!--                @if (item.icon) {-->
+      <!--                  <i [class]="item.icon" class="nav-icon"></i>-->
+      <!--                }-->
+      <!--                <span >{{ item.label }}</span>-->
+      <!--              </a>-->
+      <!--            </ng-template>-->
+      <!--          </p-panelMenu>-->
+      <!--        </div>-->
+
+      <!--      }-->
     </ng-template>
   </p-panelMenu>
 </nav>

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

@@ -29,7 +29,7 @@
 
     <osf-search-input
       [searchValue]="searchValue()"
-      (searchValueChange)="searchValue.set($event)"
+      (searchValueChange)="searchValue.set($event || '')"
       placeholder="Search your projects"
     />
 

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

@@ -9,8 +9,8 @@
 
   <div class="flex-column flex flex-1 w-full">
     <p-tabs
-      [value]="selectedTab"
-      (valueChange)="onTabChange(+$event)"
+      [value]="selectedTab()"
+      (valueChange)="selectedTab.set(+$event)"
       class="flex-1"
     >
       @if (!isMobile()) {
@@ -30,7 +30,8 @@
             [options]="tabOptions"
             optionLabel="label"
             optionValue="value"
-            [(ngModel)]="selectedTab"
+            [ngModel]="selectedTab()"
+            (ngModelChange)="selectedTab.set($event)"
           ></p-select>
         }
         <!--My projects-->
@@ -93,7 +94,7 @@
           <osf-search-input
             class="w-full"
             [searchValue]="searchValue()"
-            (searchValueChange)="searchValue.set($event)"
+            (searchValueChange)="searchValue.set($event || '')"
             placeholder="Filter by title, description, and tags"
           />
 
@@ -148,7 +149,7 @@
           <osf-search-input
             class="w-full"
             [searchValue]="searchValue()"
-            (searchValueChange)="searchValue.set($event)"
+            (searchValueChange)="searchValue.set($event || '')"
             placeholder="Filter by title, description, and tags"
           />
 

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

@@ -52,7 +52,7 @@ export class MyProjectsComponent implements OnInit {
   readonly #dialogService = inject(DialogService);
   readonly #store = inject(Store);
   readonly #router = inject(Router);
-  defaultTabValue = 0;
+  protected readonly defaultTabValue = 0;
   protected readonly isDesktop = toSignal(inject(IS_WEB));
   protected readonly isTablet = toSignal(inject(IS_MEDIUM));
   protected readonly isMobile = toSignal(inject(IS_XSMALL));
@@ -66,7 +66,7 @@ export class MyProjectsComponent implements OnInit {
   protected readonly projects = this.#store.selectSignal(
     HomeSelectors.getProjects,
   );
-  protected selectedTab = this.defaultTabValue;
+  protected readonly selectedTab = signal<number>(this.defaultTabValue);
   readonly activeProject = signal<Project | null>(null);
 
   filteredProjects = computed(() => {
@@ -87,10 +87,6 @@ export class MyProjectsComponent implements OnInit {
       .join(', ');
   }
 
-  onTabChange(index: number): void {
-    this.selectedTab = index;
-  }
-
   createProject(): void {
     let dialogWidth = '850px';
 

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

@@ -1,4 +1,10 @@
 @use "assets/styles/variables" as var;
+@use "assets/styles/mixins" as mix;
+
+:host {
+  @include mix.flex-column;
+  flex: 1;
+}
 
 .files-table {
   display: flex;

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

@@ -38,7 +38,7 @@ import { Menu } from 'primeng/menu';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ProjectFilesComponent {
-  @HostBinding('class') classes = 'flex flex-column flex-1 gap-4 w-full h-full';
+  @HostBinding('class') classes = 'flex flex-column flex-1 w-full h-full';
   protected readonly files = signal(FILES);
   protected readonly folderOpened = signal(false);
   protected readonly selectFile = signal<FileItem | null>(null);

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

@@ -12,6 +12,6 @@ import { RouterLink } from '@angular/router';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ProjectMetadataComponent {
-  @HostBinding('class') classes = 'flex flex-1 flex-column gap-4 w-full h-full';
+  @HostBinding('class') classes = 'flex flex-1 flex-column w-full h-full';
   protected readonly metadataTemplates = metadataTemplates;
 }

src/app/features/my-projects/project/overview/project-overview.component.scss

@@ -1,5 +1,9 @@
 @use "assets/styles/variables" as var;
 
+.desktop {
+  margin-top: 4.5rem;
+}
+
 .wiki,
 .component,
 .linked-projects,

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

@@ -11,5 +11,5 @@ import { NgOptimizedImage } from '@angular/common';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ProjectOverviewComponent {
-  @HostBinding('class') classes = 'flex flex-column gap-4 w-full h-full';
+  @HostBinding('class') classes = 'flex flex-column w-full h-full';
 }

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

@@ -1 +1,3 @@
-<router-outlet />
+<div [class.desktop]="isDesktop()">
+  <router-outlet />
+</div>

src/app/features/my-projects/project/project.component.scss

@@ -0,0 +1,3 @@
+.desktop {
+  margin-top: 4.5rem;
+}

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

@@ -1,6 +1,13 @@
-import { ChangeDetectionStrategy, Component, HostBinding } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  HostBinding,
+  inject,
+} from '@angular/core';
 import { RouterOutlet } from '@angular/router';
 import { CommonModule } from '@angular/common';
+import { toSignal } from '@angular/core/rxjs-interop';
+import { IS_WEB } from '@shared/utils/breakpoints.tokens';
 
 @Component({
   selector: 'osf-project',
@@ -10,5 +17,6 @@ import { CommonModule } from '@angular/common';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ProjectComponent {
-  @HostBinding('class') classes = 'flex flex-1 flex-column gap-4 w-full h-full';
+  protected readonly isDesktop = toSignal(inject(IS_WEB));
+  @HostBinding('class') classes = 'flex flex-1 flex-column w-full h-full';
 }

src/app/features/my-projects/project/registrations/registration-card/registration-card.component.html

@@ -0,0 +1,129 @@
+@if (registrationData()) {
+  <section class="registration-card">
+    <p-card>
+      <div class="flex gap-3 flex-column">
+        <div class="flex gap-2 w-full">
+          @if (registrationData()?.status === "withdrawn") {
+            <i class="osf-icon-padlock"></i>
+          }
+
+          @if (registrationData()?.status === "in_progress") {
+            <i class="osf-icon-padlock-unlock"></i>
+          }
+
+          <h2 class="align-self-center">{{ registrationData()?.title }}</h2>
+
+          @if (registrationData()?.status === "in_progress") {
+            <p-tag class="ml-3" severity="warn" value="Update In Progress" />
+          }
+
+          @if (registrationData()?.status === "withdrawn") {
+            <p-tag class="ml-3" severity="secondary" value="Withdrawn" />
+          }
+        </div>
+
+        <div
+          [class.mobile]="isMobile()"
+          class="flex sm:flex-column lg:flex-row justify-content-between gap-5"
+        >
+          <div class="flex gap-3 flex-column w-full">
+            <div class="flex gap-2 mt-1">
+              <strong>Registration template:</strong>
+              <span>{{ registrationData()?.template }}</span>
+            </div>
+
+            <div class="flex gap-2">
+              <strong>Registry:</strong>
+              <span>{{ registrationData()?.registry }}</span>
+            </div>
+
+            <div class="flex gap-2">
+              <strong>Registered:</strong>
+              <span>{{ registrationData()?.registeredDate }}</span>
+            </div>
+
+            <div class="flex gap-2">
+              <strong>Last Updated:</strong>
+              <span>{{ registrationData()?.lastUpdated }}</span>
+            </div>
+
+            <div class="flex gap-2">
+              <strong>Contributors:</strong>
+              <span class="contributors">
+                @for (
+                  contributor of registrationData()?.contributors;
+                  track contributor.name
+                ) {
+                  <a [href]="contributor.link">{{ contributor.name }}</a>
+                  @if (!$last) {
+                    <span>, </span>
+                  }
+                }
+              </span>
+            </div>
+
+            <div class="flex gap-2">
+              <strong>Description:</strong>
+              <p>{{ registrationData()?.description }}</p>
+            </div>
+
+            <div class="flex gap-2 mt-1">
+              @if (registrationData()?.status === "draft") {
+                <p-button
+                  severity="primary"
+                  label="Review"
+                  [class.btn-full-width]="isMobile()"
+                ></p-button>
+                <p-button
+                  severity="secondary"
+                  label="Edit"
+                  [class.btn-full-width]="isMobile()"
+                ></p-button>
+                <p-button
+                  severity="danger"
+                  label="Delete"
+                  class="md:ml-auto"
+                  [class.btn-full-width]="isMobile()"
+                ></p-button>
+              } @else {
+                <p-button severity="primary" label="View"></p-button>
+                @if (registrationData()?.status === "in_progress") {
+                  <p-button severity="secondary" label="Update"></p-button>
+                }
+              }
+            </div>
+          </div>
+
+          @if (registrationData()?.status !== "draft") {
+            <div class="flex flex-column gap-3 pr-4 w-auto">
+              <h3 class="mb-2">Open Resources</h3>
+
+              <div class="icon-links flex flex-wrap lg:flex-column gap-3">
+                <a class="icon-container" [href]="'#'">
+                  <i class="osf-icon-data text-4xl"></i>
+                  <h3>Data</h3>
+                </a>
+                <a class="icon-container" [href]="'#'">
+                  <i class="osf-icon-code text-4xl"></i>
+                  <h3>Analytic Code</h3>
+                </a>
+                <a class="icon-container" [href]="'#'">
+                  <i class="osf-icon-materials text-4xl"></i>
+                  <h3>Materials</h3>
+                </a>
+                <a class="icon-container" [href]="'#'">
+                  <i class="osf-icon-papers text-4xl"></i>
+                  <h3>Papers</h3>
+                </a>
+                <a class="icon-container" [href]="'#'">
+                  <i class="osf-icon-supplements text-4xl"></i>
+                  <h3>Supplements</h3>
+                </a>
+              </div>
+            </div>
+          }
+        </div>
+      </div>
+    </p-card>
+  </section>
+}

src/app/features/my-projects/project/registrations/registration-card/registration-card.component.scss

@@ -0,0 +1,26 @@
+@use "../../../../../../assets/styles/mixins" as mix;
+
+:host {
+  .icon-container {
+    color: black;
+    @include mix.flex-align-center;
+    gap: 0.8rem;
+
+    h3 {
+      white-space: nowrap;
+    }
+  }
+}
+.mobile {
+  flex-wrap: wrap;
+  flex-direction: column;
+}
+
+//.mobile-btns {
+//  p-button {
+//    width: 100%;
+//   button {
+//     width: 100%;
+//   }
+//  }
+//}

src/app/features/my-projects/project/registrations/registration-card/registration-card.component.spec.ts

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