Chore/141 my profile UI ux

src/app/app.routes.ts

@@ -145,6 +145,16 @@ export const routes: Routes = [
           provideStates([ResourceFiltersState, ResourceFiltersOptionsState]),
         ],
       },
+      {
+        path: 'my-profile',
+        loadComponent: () =>
+          import('./features/my-profile/my-profile.component').then(
+            (mod) => mod.MyProfileComponent,
+          ),
+        providers: [
+          provideStates([ResourceFiltersState, ResourceFiltersOptionsState]),
+        ],
+      },
     ],
   },
 ];

src/app/core/components/breadcrumb/breadcrumb.component.html

@@ -1,8 +1,12 @@
-<div class="breadcrumbs">
-  @for (url of parsedUrl(); track url; let l = $last) {
-    {{ url }}
-    @if (!l) {
-      /
+@if (parsedUrl()[0] !== "home") {
+  <div class="breadcrumbs flex column-gap-2">
+    <i class="osf-icon-home"></i>
+    <p>/</p>
+    @for (url of parsedUrl(); track url; let l = $last) {
+      {{ url }}
+      @if (!l) {
+        /
+      }
     }
-  }
-</div>
+  </div>
+}

src/app/core/components/breadcrumb/breadcrumb.component.ts

@@ -13,8 +13,11 @@ export class BreadcrumbComponent {
   #destroyRef = inject(DestroyRef);
   protected readonly url = signal(this.#router.url);
   protected readonly parsedUrl = computed(() => {
-    const cleanUrl = this.url().split('?')[0].split('#')[0];
-    return cleanUrl.replace('-', ' ').split('/').filter(Boolean);
+    return this.url()
+      .split('?')[0]
+      .split('/')
+      .filter(Boolean)
+      .map((segment) => segment.replace(/-/g, ' '));
   });
 
   constructor() {

src/app/core/components/header/header.component.html

@@ -1,2 +1,11 @@
 <osf-breadcrumb />
-<a [routerLink]="authButtonLink()" class="p-button">{{ authButtonText() }}</a>
+<!--<a [routerLink]="authButtonLink()" class="p-button">{{ authButtonText() }}</a>-->
+
+<div class="dropdown-button ml-auto" style="min-width: 7rem">
+  <p-button (click)="menu.toggle($event)">
+    {{ currentUser()?.fullName }}
+    <i class="pi pi-chevron-down"></i>
+  </p-button>
+
+  <p-menu #menu [model]="items" popup></p-menu>
+</div>

src/app/core/components/header/header.component.scss

@@ -2,7 +2,7 @@
 
 :host {
   position: absolute;
-  height: 4.5rem;
+  height: 4rem;
   padding: 0 1.7rem;
   width: 100%;
   @include mix.flex-center-between;

src/app/core/components/header/header.component.ts

@@ -8,17 +8,32 @@ import { Router, RouterLink } from '@angular/router';
 import { toSignal } from '@angular/core/rxjs-interop';
 import { map } from 'rxjs';
 import { BreadcrumbComponent } from '@core/components/breadcrumb/breadcrumb.component';
+import { MenuModule } from 'primeng/menu';
+import { ButtonModule } from 'primeng/button';
+import { Store } from '@ngxs/store';
+import { UserSelectors } from '@core/store/user/user.selectors';
 
 @Component({
   standalone: true,
   selector: 'osf-header',
-  imports: [RouterLink, BreadcrumbComponent],
+  imports: [RouterLink, BreadcrumbComponent, MenuModule, ButtonModule],
   templateUrl: './header.component.html',
   styleUrl: './header.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class HeaderComponent {
-  #router = inject(Router);
+  readonly #store = inject(Store);
+  readonly #router = inject(Router);
+  readonly currentUser = this.#store.selectSignal(UserSelectors.getCurrentUser);
+
+  items = [
+    {
+      label: 'My profile',
+      command: () => this.#router.navigate(['my-profile']),
+    },
+    { label: 'Settings', command: () => console.log('Settings') },
+    { label: 'Log out', command: () => console.log('Log out') },
+  ];
 
   #currentUrl = toSignal(this.#router.events.pipe(map(() => this.#router.url)));
 

src/app/core/components/root/root.component.html

@@ -14,6 +14,9 @@
     <div class="content-wrapper">
       <main class="content">
         <osf-topnav></osf-topnav>
+        @if (!isMobile()) {
+          <osf-breadcrumb class="breadcrumb"></osf-breadcrumb>
+        }
         <osf-main-content></osf-main-content>
         <osf-footer></osf-footer>
       </main>

src/app/core/components/root/root.component.scss

@@ -46,5 +46,9 @@
         flex: 1;
       }
     }
+
+    .breadcrumb {
+      padding: 2.5rem 2.5rem 0 2.5rem;
+    }
   }
 }

src/app/core/components/root/root.component.ts

@@ -5,9 +5,10 @@ import { HeaderComponent } from '@core/components/header/header.component';
 import { MainContentComponent } from '@core/components/main-content/main-content.component';
 import { FooterComponent } from '@core/components/footer/footer.component';
 import { TopnavComponent } from '@core/components/topnav/topnav.component';
-import { IS_WEB } from '@shared/utils/breakpoints.tokens';
+import { IS_WEB, IS_XSMALL } from '@shared/utils/breakpoints.tokens';
 import { toSignal } from '@angular/core/rxjs-interop';
 import { ConfirmDialog } from 'primeng/confirmdialog';
+import { BreadcrumbComponent } from '@core/components/breadcrumb/breadcrumb.component';
 
 @Component({
   selector: 'osf-root',
@@ -20,12 +21,13 @@ import { ConfirmDialog } from 'primeng/confirmdialog';
     FooterComponent,
     TopnavComponent,
     ConfirmDialog,
+    BreadcrumbComponent,
   ],
   templateUrl: './root.component.html',
   styleUrls: ['./root.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class RootComponent {
-  #isWeb$ = inject(IS_WEB);
-  isWeb = toSignal(this.#isWeb$);
+  isWeb = toSignal(inject(IS_WEB));
+  isMobile = toSignal(inject(IS_XSMALL));
 }

src/app/core/services/json-api/json-api.service.ts

@@ -9,8 +9,7 @@ import { JsonApiResponse } from '@core/services/json-api/json-api.entity';
 export class JsonApiService {
   http: HttpClient = inject(HttpClient);
   readonly #token =
-    'Bearer 2rjFZwmdDG4rtKj7hGkEMO6XyHBM2lN7XBbsA1e8OqcFhOWu6Z7fQZiheu9RXtzSeVrgOt';
-  // OBJoUomBgbUuDgQo5JoaSKNya6XaYcd0ojAX1XOLmWi6J2arQPzByxyEi81fHE60drQUWv
+    'Bearer UlO9O9GNKgVzJD7pUeY53jiQTKJ4U2znXVWNvh0KZQruoENuILx0IIYf9LoDz7Duq72EIm';
   readonly #headers = new HttpHeaders({
     Authorization: this.#token,
     Accept: 'application/vnd.api+json',

src/app/core/services/json-api/underscore-entites/user/user-us.entity.ts

@@ -6,7 +6,41 @@ export interface UserUS {
     given_name: string;
     family_name: string;
     email: string;
+    date_registered: string;
+    social: {
+      orcid: string;
+      github: string;
+      scholar: string;
+      twitter: string;
+      linkedIn: string;
+      impactStory: string;
+      researcherId: string;
+    };
+    employment: {
+      title: string;
+      endYear: number;
+      ongoing: boolean;
+      endMonth: number;
+      startYear: number;
+      department: string;
+      startMonth: number;
+      institution: string;
+    }[];
+    education: {
+      degree: string;
+      department: string;
+      institution: string;
+      startYear: number;
+      startMonth: number;
+      endYear: number;
+      endMonth: number;
+      ongoing: boolean;
+    }[];
   };
   relationships: Record<string, unknown>;
-  links: Record<string, string>;
+  links: {
+    html: string;
+    profile_image: string;
+    iri: string;
+  };
 }

src/app/core/services/mappers/users/users.mapper.ts

@@ -8,5 +8,29 @@ export function mapUserUStoUser(user: UserUS): User {
     givenName: user.attributes.given_name,
     familyName: user.attributes.family_name,
     email: user.attributes.email,
+    dateRegistered: new Date(user.attributes.date_registered),
+    link: user.links.html,
+    iri: user.links.iri,
+    socials: user.attributes.social,
+    employment: user.attributes.employment?.map((emp) => ({
+      title: emp.title,
+      department: emp.department,
+      institution: emp.institution,
+      startDate: new Date(emp.startYear, emp.startMonth - 1),
+      endDate: emp.ongoing
+        ? new Date()
+        : new Date(emp.endYear, emp.endMonth - 1),
+      ongoing: emp.ongoing,
+    })),
+    education: user.attributes.education?.map((edu) => ({
+      degree: edu.degree,
+      department: edu.department,
+      institution: edu.institution,
+      startDate: new Date(edu.startYear, edu.startMonth - 1),
+      endDate: edu.ongoing
+        ? new Date()
+        : new Date(edu.endYear, edu.endMonth - 1),
+      ongoing: edu.ongoing,
+    })),
   };
 }

src/app/core/services/user/user.entity.ts

@@ -4,4 +4,32 @@ export interface User {
   givenName: string;
   familyName: string;
   email?: string;
+  dateRegistered: Date;
+  link?: string;
+  iri?: string;
+  socials?: {
+    orcid?: string;
+    github?: string;
+    scholar?: string;
+    twitter?: string;
+    linkedIn?: string;
+    impactStory?: string;
+    researcherId?: string;
+  };
+  employment?: {
+    title: string;
+    department: string;
+    institution: string;
+    startDate: Date;
+    endDate: Date;
+    ongoing: boolean;
+  }[];
+  education?: {
+    degree: string;
+    department: string;
+    institution: string;
+    startDate: Date;
+    endDate: Date;
+    ongoing: boolean;
+  }[];
 }