Feat/toast

src/app/app.component.html

@@ -1 +1,2 @@
 <router-outlet />
+<osf-toast></osf-toast>

src/app/app.component.ts

@@ -5,9 +5,11 @@ import { RouterOutlet } from '@angular/router';
 
 import { GetCurrentUser } from '@core/store/user';
 
+import { ToastComponent } from './shared';
+
 @Component({
   selector: 'osf-root',
-  imports: [RouterOutlet],
+  imports: [RouterOutlet, ToastComponent],
   templateUrl: './app.component.html',
   styleUrl: './app.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,

src/app/app.config.ts

@@ -3,7 +3,7 @@ import { provideStore } from '@ngxs/store';
 
 import { TranslateModule } from '@ngx-translate/core';
 
-import { ConfirmationService } from 'primeng/api';
+import { ConfirmationService, MessageService } from 'primeng/api';
 import { providePrimeNG } from 'primeng/config';
 
 import { provideHttpClient } from '@angular/common/http';
@@ -38,6 +38,7 @@ export const appConfig: ApplicationConfig = {
     provideAnimations(),
     provideHttpClient(),
     ConfirmationService,
+    MessageService,
     importProvidersFrom(TranslateModule.forRoot(provideTranslation())),
   ],
 };

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

@@ -32,7 +32,7 @@
 
     .footer-socials {
       @include mix.flex-center;
-      gap: 0.2rem;
+      gap: 0.4285rem;
     }
   }
 

src/app/features/my-profile/components/resources/components/resource-card/my-profile-resource-card.component.html

@@ -13,8 +13,7 @@
             @if (item()?.resourceType === ResourceType.File && item()?.fileName) {
               <a class="title" [href]="item()?.id">{{ item()?.fileName }}</a>
             } @else if (item()?.title && item()?.title) {
-              @let id = item()?.id;
-              @let url = id ? '/my-projects/' + id.split('/')?.pop() + '/overview' : '';
+              @let url = item()?.id ? '/my-projects/' + item()?.id?.split('/')?.pop() + '/overview' : '';
               <a class="title" [routerLink]="url">{{ item()?.title }}</a>
             }
             @if (item()?.orcid) {

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

@@ -18,7 +18,6 @@ import { ResourceTab } from '@shared/entities/resource-card/resource-tab.enum';
 
 @Component({
   selector: 'osf-my-profile',
-  standalone: true,
   imports: [
     Button,
     DatePipe,

src/app/features/project/analytics/analytics.component.html

@@ -1,31 +1,7 @@
 <osf-sub-header [title]="'navigation.project.analytics' | translate"></osf-sub-header>
 
 <section class="flex flex-column bg-white flex-1 h-full p-5 gap-4">
-  <div class="flex flex-column sm:flex-row sm:justify-content-between gap-3 sm:gap-4">
-    <osf-analytics-kpi
-      [isLoading]="isRelatedCountsLoading()"
-      [title]="'project.analytics.kpi.forks'"
-      [value]="relatedCounts()?.forksCount"
-      [showButton]="true"
-      [buttonLabel]="'project.analytics.kpi.viewForks'"
-    ></osf-analytics-kpi>
-
-    <osf-analytics-kpi
-      [isLoading]="isRelatedCountsLoading()"
-      [title]="'project.analytics.kpi.linksToThisProject'"
-      [value]="relatedCounts()?.linksToCount"
-      [showButton]="true"
-      [buttonLabel]="'project.analytics.kpi.viewLinks'"
-    ></osf-analytics-kpi>
-
-    <osf-analytics-kpi
-      [isLoading]="isRelatedCountsLoading()"
-      [title]="'project.analytics.kpi.templateCopies'"
-      [value]="relatedCounts()?.templateCount"
-    ></osf-analytics-kpi>
-  </div>
-
-  <div class="flex align-items-center justify-content-end mt-6">
+  <div class="flex align-items-center justify-content-end">
     <label class="date-range-label" for="date-range">{{ 'project.analytics.charts.showAnalytics' | translate }}</label>
 
     <p-select
@@ -47,7 +23,7 @@
     </p-select>
   </div>
 
-  <div class="flex flex-column xl:flex-row flex-wrap gap-4" [class]="{ disabled: isMetricsError() }">
+  <div class="flex flex-column flex-wrap gap-4 xl:flex-row" [class]="{ disabled: isMetricsError() }">
     <osf-line-chart
       class="chart xl-half-width"
       [isLoading]="isMetricsLoading()"
@@ -82,4 +58,28 @@
       [datasets]="popularPagesDataset"
     ></osf-bar-chart>
   </div>
+
+  <div class="flex flex-column gap-3 mt-6 sm:flex-row sm:justify-content-between sm:gap-4">
+    <osf-analytics-kpi
+      [isLoading]="isRelatedCountsLoading()"
+      [title]="'project.analytics.kpi.forks'"
+      [value]="relatedCounts()?.forksCount"
+      [showButton]="true"
+      [buttonLabel]="'project.analytics.kpi.viewForks'"
+    ></osf-analytics-kpi>
+
+    <osf-analytics-kpi
+      [isLoading]="isRelatedCountsLoading()"
+      [title]="'project.analytics.kpi.linksToThisProject'"
+      [value]="relatedCounts()?.linksToCount"
+      [showButton]="true"
+      [buttonLabel]="'project.analytics.kpi.viewLinks'"
+    ></osf-analytics-kpi>
+
+    <osf-analytics-kpi
+      [isLoading]="isRelatedCountsLoading()"
+      [title]="'project.analytics.kpi.templateCopies'"
+      [value]="relatedCounts()?.templateCount"
+    ></osf-analytics-kpi>
+  </div>
 </section>

src/app/shared/components/index.ts

@@ -7,5 +7,5 @@ export { PasswordInputHintComponent } from './password-input-hint/password-input
 export { PieChartComponent } from './pie-chart/pie-chart.component';
 export { SearchInputComponent } from './search-input/search-input.component';
 export { SubHeaderComponent } from './sub-header/sub-header.component';
-export * from './view-only-table/view-only-table.component';
+export { ToastComponent } from './toast/toast.component';
 export * from './view-only-table/view-only-table.component';

src/app/shared/components/toast/toast.component.html

@@ -0,0 +1 @@
+<p-toast position="top-right" [baseZIndex]="2302" />

src/app/shared/components/toast/toast.component.spec.ts

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

src/app/shared/components/toast/toast.component.ts

@@ -0,0 +1,12 @@
+import { ToastModule } from 'primeng/toast';
+
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+
+@Component({
+  selector: 'osf-toast',
+  imports: [ToastModule],
+  templateUrl: './toast.component.html',
+  styleUrl: './toast.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ToastComponent {}

src/app/shared/services/index.ts

@@ -0,0 +1,3 @@
+export { FiltersOptionsService } from './filters-options.service';
+export { SearchService } from './search.service';
+export { ToastService } from './toast.service';

src/app/shared/services/toast.service.ts

@@ -0,0 +1,22 @@
+import { MessageService } from 'primeng/api';
+
+import { inject, Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class ToastService {
+  private messageService = inject(MessageService);
+
+  showSuccess(summary: string) {
+    this.messageService.add({ severity: 'success', summary });
+  }
+
+  showWarn(summary: string) {
+    this.messageService.add({ severity: 'warn', summary });
+  }
+
+  showError(summary: string) {
+    this.messageService.add({ severity: 'error', summary });
+  }
+}

src/assets/styles/_base.scss

@@ -65,10 +65,6 @@
     @include mix.flex-center;
   }
 
-  button {
-    color: var.$white;
-  }
-
   dl {
     margin-bottom: 1.7rem;
     padding: 0;

src/assets/styles/_mixins.scss

@@ -1,7 +1,8 @@
+@use "sass:math";
 @use "assets/styles/variables" as var;
 
 @function rem($px) {
-  @return ($px / var.$base-font-size) * 1rem;
+  @return math.div($px, var.$base-font-size) * 1rem;
 }
 
 @mixin flex-center {

src/assets/styles/overrides/toast.scss

@@ -0,0 +1,36 @@
+.p-toast-message-icon {
+  display: none;
+}
+
+.p-toast-summary {
+  --p-toast-summary-font-weight: 700;
+}
+
+.p-toast-detail {
+  display: none;
+}
+
+.p-toast-close-button {
+  margin: -10% 0 0 0;
+}
+
+.p-toast-message-success {
+  --p-toast-success-border-color: transparent;
+  --p-toast-success-color: var(--white);
+  --p-toast-success-background: var(--green-1);
+  --p-toast-success-close-button-hover-background: var(--green-2);
+}
+
+.p-toast-message-warn {
+  --p-toast-warn-border-color: transparent;
+  --p-toast-warn-color: var(--white);
+  --p-toast-warn-background: var(--yellow-1);
+  --p-toast-warn-close-button-hover-background: var(--yellow-2);
+}
+
+.p-toast-message-error {
+  --p-toast-error-border-color: transparent;
+  --p-toast-error-color: var(--white);
+  --p-toast-error-background: var(--red-1);
+  --p-toast-error-close-button-hover-background: var(--red-2);
+}

src/assets/styles/styles.scss

@@ -34,3 +34,4 @@
 @use "./overrides/spinner";
 @use "./overrides/password";
 @use "./overrides/tooltip";
+@use "./overrides/toast";