WIP: adding /publications/new and /publications/:pubId pages

webapp-ng/src/app/app-routing.module.ts

@@ -7,6 +7,8 @@ import { AuthGuard } from '@auth0/auth0-angular';
 import { PublicationListComponent } from './components/publication-list/publication-list.component';
 import {LoginSuccessComponent} from "./pages/login-success/login-success.component";
 import {AdminComponent} from "./pages/admin/admin.component";
+import {PublicationNewComponent} from "./components/publication-new/publication-new.component";
+import {PublicationDetailComponent} from "./components/publication-detail/publication-detail.component";
 
 const routes: Routes = [
   {
@@ -24,6 +26,16 @@ const routes: Routes = [
     component: PublicationListComponent,
     canActivate: [AuthGuard],
   },
+  {
+    path: 'publications/new',
+    component: PublicationNewComponent,
+    canActivate: [AuthGuard],
+  },
+  {
+    path: 'publications/:pubId',
+    component: PublicationDetailComponent,
+    canActivate: [AuthGuard],
+  },
   {
     path: 'error',
     component: ErrorComponent,

webapp-ng/src/app/app.module.ts

@@ -56,7 +56,6 @@ export function apiConfigFactory(baseuriConfigService: BaseuriConfigService) {
     LoadingComponent,
     LoginSuccessComponent,
     PublicationListComponent,
-    PublicationEditComponent,
     VcellIdentityComponent,
     ErrorComponent
   ],
@@ -85,6 +84,7 @@ export function apiConfigFactory(baseuriConfigService: BaseuriConfigService) {
     ApiModule,
     MatCardModule,
     MatCheckboxModule,
+    PublicationEditComponent,
   ],
   providers: [
     {
@@ -120,5 +120,8 @@ export function apiConfigFactory(baseuriConfigService: BaseuriConfigService) {
 
   ],
   bootstrap: [AppComponent],
+  exports: [
+    PublicationEditComponent
+  ]
 })
 export class AppModule {}

webapp-ng/src/app/components/publication-detail/publication-detail.component.html

@@ -0,0 +1 @@
+<p>publication-detail works!</p>

webapp-ng/src/app/components/publication-detail/publication-detail.component.spec.ts

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

webapp-ng/src/app/components/publication-detail/publication-detail.component.ts

@@ -0,0 +1,13 @@
+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'app-publication-detail',
+  standalone: true,
+  imports: [CommonModule],
+  templateUrl: './publication-detail.component.html',
+  styleUrl: './publication-detail.component.css'
+})
+export class PublicationDetailComponent {
+
+}

webapp-ng/src/app/components/publication-edit/publication-edit.component.ts

@@ -1,21 +1,54 @@
 import { Component, Input, Output, EventEmitter } from '@angular/core';
-import { Publication } from 'src/app/core/modules/openapi/model/publication'; // Adjust the import path as necessary
+import { Publication } from 'src/app/core/modules/openapi/model/publication';
+import {PublicationService} from "../publication-list/publication.service";
+import {FormsModule} from "@angular/forms"; // Adjust the import path as necessary
 
 @Component({
   selector: 'app-publication-edit',
   templateUrl: './publication-edit.component.html',
+  standalone: true,
+  imports: [
+    FormsModule
+  ],
   styleUrls: ['./publication-edit.component.css']
 })
 export class PublicationEditComponent {
   @Input() publication!: Publication;// The publication to edit
   @Output() save = new EventEmitter<Publication>(); // Event to emit when the publication is saved
   @Output() cancel = new EventEmitter<void>(); // Event to emit when the edit is canceled
 
+  constructor(private publicationService: PublicationService) {
+  }
+
   onSave() {
     this.save.emit(this.publication);
   }
 
   onCancel() {
     this.cancel.emit();
   }
+
+  saveEdit(pub: Publication) {
+    // Call the service to save the publication
+    this.publicationService.updatePublication(pub).subscribe({
+      next: () => {
+        // show message that the record was saved
+        console.log("Publication saved");
+      },
+      error: (err) => {
+        // show error message
+        console.error("Error saving publication", err);
+      }
+    });
+  }
+
+  onDelete(pub: Publication) {
+    // nothing to do
+    this.publicationService.deletePublication(pub.pubKey!).subscribe((pub) => {
+      console.log(pub);
+    });
+
+  }
+
+
 }

webapp-ng/src/app/components/publication-list/publication-list.component.html

@@ -1,9 +1,21 @@
 <h1>Publications</h1>
-<input matInput (keyup)="applyFilterTarget($event.target)" placeholder="Filter"/>
+<ng-container *ngIf="isCurator$ | async">
+  <div class="new-button-container">
+    <button mat-raised-button [routerLink]="['/publications/new']">
+      <mat-icon>add</mat-icon> New Publication
+    </button>
+  </div>
+</ng-container>
+<mat-form-field appearance="outline">
+  <mat-label>Filter</mat-label>
+  <input matInput (keyup)="applyFilterTarget($event.target)" placeholder="Filter"/>
+</mat-form-field>
 <mat-table [dataSource]="publications" matSort>
   <ng-container matColumnDef="pubKey">
     <th mat-header-cell *matHeaderCellDef mat-sort-header> PubKey</th>
-    <td mat-cell *matCellDef="let row"> {{ row.pubKey }}</td>
+    <td mat-cell *matCellDef="let row">
+      <a [routerLink]="['/publications', row.pubKey]">{{ row.pubKey }}</a>
+    </td>
   </ng-container>
   <ng-container matColumnDef="title">
     <th mat-header-cell *matHeaderCellDef mat-sort-header> Title</th>
@@ -64,36 +76,8 @@ <h1>Publications</h1>
     <td mat-cell *matCellDef="let row"> {{ row.date }}</td>
   </ng-container>
 
-  <ng-container matColumnDef="edit">
-    <th mat-header-cell *matHeaderCellDef> Edit</th>
-    <td mat-cell *matCellDef="let row">
-      <button mat-raised-button (click)="onEdit(row)">Edit</button>
-    </td>
-  </ng-container>
-  <ng-container matColumnDef="delete">
-    <th mat-header-cell *matHeaderCellDef> Delete</th>
-    <td mat-cell *matCellDef="let row">
-      <button mat-raised-button (click)="onDelete(row)">Delete</button>
-    </td>
-  </ng-container>
-
-  <ng-container *ngIf="isCurator$ | async">
-    <tr mat-header-row *matHeaderRowDef="displayedColumns.concat(['edit', 'delete']);"></tr>
-    <tr mat-row *matRowDef="let row; columns: displayedColumns.concat(['edit', 'delete']);"></tr>
-  </ng-container>
-
-  <ng-container *ngIf="!(isCurator$ | async)">
-    <tr mat-header-row *matHeaderRowDef="displayedColumns;"></tr>
-    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
-  </ng-container>
+  <tr mat-header-row *matHeaderRowDef="displayedColumns;"></tr>
+  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
 
 </mat-table>
 <mat-paginator [pageSizeOptions]="[10, 20]" showFirstLastButtons></mat-paginator>
-<ng-container *ngIf="isCurator$ | async">
-  <button (click)="onNew()">New</button>
-</ng-container>
-<div>
-  <app-publication-edit *ngIf="editingPublication" [publication]="editingPublication"
-      (save)="saveEdit($event)" (cancel)="cancelEdit()">
-  </app-publication-edit>
-</div>

webapp-ng/src/app/components/publication-list/publication-list.component.less

@@ -14,3 +14,9 @@ body, html {
   white-space: normal !important;
   word-wrap: break-word !important;
 }
+
+.new-button-container {
+  display: flex;
+  justify-content: flex-end;
+  margin-bottom: 10px;
+}

webapp-ng/src/app/components/publication-list/publication-list.component.ts

@@ -17,7 +17,7 @@ export class PublicationListComponent implements OnInit {
   publications = new MatTableDataSource<Publication>();
   // displayedColumns = [ "pubKey", "title", "authors", "year", "citation", "pubmedid", "doi", "endnoteid", "url",
   //   "wittid", "biomodelRefs", "mathmodelRefs", "date"];
-  displayedColumns = [ "title", "authors", "year", "citation", "pubmedid",
+  displayedColumns = [ "pubKey", "title", "authors", "year", "citation", "pubmedid",
     "biomodelRefs", "mathmodelRefs", "date"];
   editingPublication: Publication | null = null;
   isCurator$: Observable<boolean>;
@@ -39,44 +39,6 @@ export class PublicationListComponent implements OnInit {
     this.publicationService.refresh();
   }
 
-  onNew() {
-    const pub: Publication = {
-      title: "title",
-      authors: [
-        "string"
-      ],
-      year: 2023,
-      citation: "citation",
-      pubmedid: "pubmed-id",
-      doi: "doi",
-      endnoteid: 0,
-      url: "url",
-      wittid: 0,
-      biomodelRefs: [
-
-      ],
-      mathmodelRefs: [
-
-      ],
-      date: "2023-12-28"
-    };
-    this.startEdit(pub);
-  }
-
-  onEdit(pub: Publication) {
-    // nothing to do
-    console.log("editing publication "+pub.title);
-    this.startEdit(pub)
-  }
-
-  onDelete(pub: Publication) {
-    // nothing to do
-    this.publicationService.deletePublication(pub.pubKey!).subscribe((pub) => {
-      console.log(pub);
-    });
-
-  }
-
   applyFilter(filterText: string) {
     this.publications.filter = filterText.toLowerCase();
   }
@@ -88,22 +50,6 @@ export class PublicationListComponent implements OnInit {
     this.publications.filter = filterValue.toLowerCase();
   }
 
-startEdit(pub: Publication) {
-  const clonedPub = { ...pub };
-  this.editingPublication = clonedPub;
-}
-
-saveEdit(pub: Publication) {
-  // Call the service to save the publication
-  this.publicationService.updatePublication(pub).subscribe(() => {
-    // Handle successful save
-    this.editingPublication = null;
-  });
-}
-
-cancelEdit() {
-  this.editingPublication = null;
-}
 
   protected readonly async = async;
 }

webapp-ng/src/app/components/publication-new/publication-new.component.html

@@ -0,0 +1,2 @@
+<p>publication-new works!</p>
+<app-publication-edit [publication]="newPublication"></app-publication-edit>

webapp-ng/src/app/components/publication-new/publication-new.component.spec.ts

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

webapp-ng/src/app/components/publication-new/publication-new.component.ts

@@ -0,0 +1,52 @@
+import {Component} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {Publication} from "../../core/modules/openapi";
+import {PublicationService} from "../publication-list/publication.service";
+import {PublicationEditComponent} from "../publication-edit/publication-edit.component";
+
+@Component({
+  selector: 'app-publication-new',
+  standalone: true,
+  imports: [CommonModule, PublicationEditComponent],
+  templateUrl: './publication-new.component.html',
+  styleUrl: './publication-new.component.css'
+})
+export class PublicationNewComponent {
+  newPublication: Publication;
+
+  constructor(private publicationService: PublicationService) {
+    this.newPublication = this.onNew();
+  }
+
+  onNew(): Publication {
+    return {
+      title: "title",
+      authors: [
+        "string"
+      ],
+      year: 2023,
+      citation: "citation",
+      pubmedid: "pubmed-id",
+      doi: "doi",
+      endnoteid: 0,
+      url: "url",
+      wittid: 0,
+      biomodelRefs: [],
+      mathmodelRefs: [],
+      date: "2023-12-28"
+    };
+  }
+
+  saveEdit(pub: Publication) {
+    // Call the service to save the publication
+    this.publicationService.updatePublication(pub).subscribe({
+      next: () => {
+        console.log("saved publication");
+      },
+      error: (err) => {
+        console.error("Error saving publication", err);
+      }
+    });
+  }
+
+}