Re-design of login page.

frontend/src/app/pages/publication/publication.component.ts

@@ -0,0 +1,55 @@
+import { Component, OnDestroy, OnInit, inject } from '@angular/core';
+import { PublicationRestService } from '../../core/rest-services/publications/publication.rest-service';
+import { ActivatedRoute } from '@angular/router';
+import { Subscription } from 'rxjs';
+import { Publication } from '../../core/rest-services/publications/model/publication';
+import { MatSnackBar } from '@angular/material/snack-bar';
+import { CommonModule } from '@angular/common';
+import { MatProgressSpinner } from '@angular/material/progress-spinner';
+import { MatTooltip } from '@angular/material/tooltip';
+
+@Component({
+  selector: 'app-publication',
+  standalone: true,
+  imports: [CommonModule, MatProgressSpinner, MatTooltip],
+  templateUrl: './publication.component.html',
+  styleUrl: './publication.component.scss'
+})
+export class PublicationComponent implements OnInit, OnDestroy {
+  private activatedRoute = inject(ActivatedRoute);
+  private publicationRestService = inject(PublicationRestService);
+  private paramMapSubscription?: Subscription;
+  private snackBar = inject(MatSnackBar);
+  isLoading: boolean = false;
+  publication?: Publication;
+
+  ngOnInit(): void {
+    this.paramMapSubscription = this.activatedRoute
+        .paramMap
+        .subscribe(params => {
+          const publicationId = params.get('publicationId');
+
+          if (publicationId) {
+            this.isLoading = true;
+
+            this.publicationRestService.getById(publicationId)
+                .then(publication => {
+                  this.publication = publication;
+                })
+                .catch(error => {
+                  this.snackBar.open('An error occurred while loading publication...', 'Close', { duration: 5000 });
+                  console.error('An error occurred while loading publication...', error);
+                })
+                .finally(() => {
+                  this.isLoading = false;
+                });
+          }
+        });
+
+    // this.publicationRestService.getById()
+  }
+
+  ngOnDestroy(): void {
+    this.paramMapSubscription?.unsubscribe();
+  }
+}