Metadata CRUD Views

api/src/main/kotlin/edu/wgu/osmt/collection/CollectionController.kt

@@ -26,6 +26,7 @@ import edu.wgu.osmt.task.CsvTaskV2
 import edu.wgu.osmt.task.PublishTask
 import edu.wgu.osmt.task.PublishTaskV2
 import edu.wgu.osmt.task.RemoveCollectionSkillsTask
+import edu.wgu.osmt.task.RemoveItemTask
 import edu.wgu.osmt.task.Task
 import edu.wgu.osmt.task.TaskMessageService
 import edu.wgu.osmt.task.TaskResult

ui/src/app/app-routing.module.ts

@@ -24,6 +24,10 @@ import { ActionByRoles, ButtonAction } from "./auth/auth-roles"
 import {MyWorkspaceComponent} from "./my-workspace/my-workspace.component"
 import {ConvertToCollectionComponent} from "./my-workspace/convert-to-collection/convert-to-collection.component"
 import { MetadataListComponent } from "./metadata/detail/metadata-list/metadata-list.component"
+import { DetailCardComponent } from "./detail-card/detail-card.component"
+import { MetadataFormComponent } from "./metadata/form/metadata-form.component"
+import { MetadataManageComponent } from "./metadata/detail/metadata-manage/metadata-manage.component"
+import { MetadataPublicComponent } from "./metadata/detail/metadata-public/metadata-public.component"
 
 
 const routes: Routes = [
@@ -82,6 +86,61 @@ const routes: Routes = [
     },
   },
 
+  /* KEYWORDS */
+
+  {path: "metadata",
+    component: MetadataListComponent,
+    canActivate: [AuthGuard],
+  },
+  // create metadata
+  {path: "named-references/create",
+    component: MetadataFormComponent,
+    canActivate: [AuthGuard],
+    data: {
+      roles: ActionByRoles.get(ButtonAction.MetadataCreate)
+    },
+  },
+  {path: "job-codes/create",
+    component: MetadataFormComponent,
+    canActivate: [AuthGuard],
+    data: {
+      roles: ActionByRoles.get(ButtonAction.MetadataCreate)
+    },
+  },
+  // edit metadata
+  {path: "named-references/:id/edit",
+    component: MetadataFormComponent,
+    canActivate: [AuthGuard],
+    data: {
+      roles: ActionByRoles.get(ButtonAction.MetadataUpdate)
+    },
+  },
+  {path: "job-codes/:id/edit",
+    component: MetadataFormComponent,
+    canActivate: [AuthGuard],
+    data: {
+      roles: ActionByRoles.get(ButtonAction.MetadataUpdate)
+    },
+  },
+  // public metadata detail
+  {path: "named-references/:id",
+    component: MetadataPublicComponent,
+    canActivate: [AuthGuard]
+  },
+  {path: "job-codes/:id",
+    component: MetadataPublicComponent,
+    canActivate: [AuthGuard]
+  },
+  // admin metadata detail
+  {path: "named-references/:id/manage",
+    component: MetadataManageComponent,
+    canActivate: [AuthGuard]
+  },
+  {path: "job-codes/:id/manage",
+    component: MetadataManageComponent,
+    canActivate: [AuthGuard]
+  },
+
   /* COLLECTIONS */
 
   // create collection
@@ -168,11 +227,7 @@ const routes: Routes = [
       roles: ActionByRoles.get(ButtonAction.MyWorkspace)
     }
   },
-  {
-    path: "metadata",
-    component: MetadataListComponent,
-    canActivate: [AuthGuard],
-  },
+
   /* PUBLIC VIEWS */
   {path: "skills/:uuid", component: RichSkillPublicComponent},
   {path: "collections/:uuid", component: CollectionPublicComponent},

ui/src/app/app.module.ts

@@ -106,14 +106,20 @@ import { getBaseApi } from "./api-versions"
 import { NoopAnimationsModule } from "@angular/platform-browser/animations"
 import { MatMenuModule } from "@angular/material/menu"
 import { MetadataListComponent } from "./metadata/detail/metadata-list/metadata-list.component"
-import { JobCodeListRowComponent } from "./metadata/job-codes/job-code-list-row/job-code-list-row.component"
-import { JobCodeTableComponent } from "./metadata/job-codes/job-code-table/job-code-table.component"
-import { NamedReferenceListRowComponent } from "./metadata/named-references/named-reference-list-row/named-reference-list-row.component"
-import { NamedReferenceTableComponent } from "./metadata/named-references/named-reference-table/named-reference-table.component"
-import { MetadataSelectorComponent } from "./metadata/detail/metadata-selector/metadata-selector.component"
+import { JobCodeListRowComponent } from "./metadata/job-code/job-code-list-row/job-code-list-row.component"
+import { JobCodeTableComponent } from "./metadata/job-code/job-code-table/job-code-table.component"
+import { NamedReferenceListRowComponent } from "./metadata/named-reference/named-reference-list-row/named-reference-list-row.component"
+import { NamedReferenceTableComponent } from "./metadata/named-reference/named-reference-table/named-reference-table.component"
+import { MetadataSelectorComponent } from "./metadata/detail/metadata-selector/metadata-selector.component";
+import { MetadataFormComponent } from "./metadata/form/metadata-form.component";
+import { MetadataManageComponent } from "./metadata/detail/metadata-manage/metadata-manage.component";
+import { MetadataPublicComponent } from "./metadata/detail/metadata-public/metadata-public.component";
 import { InlineHeadingComponent } from './richskill/import/inline-heading/inline-heading.component'
 import { InlineErrorComponent } from "./richskill/import/inline-error/inline-error.component"
 import { JobCodeParentsPipe } from "./pipes"
+import { MetadataCardComponent } from "./metadata/detail/metadata-card/metadata-card.component"
+import { ManageMetadataActionBarVerticalComponent } from "./metadata/detail/metadata-manage/action-bar-vertical/metadata-manage-action-bar-vertical.component"
+import { PublicMetadataActionBarVerticalComponent } from "./metadata/detail/metadata-public/action-bar-vertical/metadata-public-action-bar-vertical.component"
 
 export function initializeApp(
   appConfig: AppConfig,
@@ -232,8 +238,15 @@ export function initializeApp(
     NamedReferenceListRowComponent,
     NamedReferenceTableComponent,
     MetadataSelectorComponent,
+    MetadataCardComponent,
+    MetadataFormComponent,
+    MetadataManageComponent,
+    MetadataPublicComponent,
+    ManageMetadataActionBarVerticalComponent,
+    PublicMetadataActionBarVerticalComponent,
     InlineHeadingComponent,
     JobCodeParentsPipe,
+    InlineHeadingComponent
   ],
   imports: [
     NgIdleKeepaliveModule.forRoot(),

ui/src/app/auth/auth-roles.ts

@@ -16,6 +16,8 @@ export enum ButtonAction {
   DeleteCollection,
   MyWorkspace,
   MetadataAdmin,
+  MetadataCreate,
+  MetadataUpdate
 }
 
 export const ActionByRoles = new Map<number, string[]>([
@@ -31,6 +33,8 @@ export const ActionByRoles = new Map<number, string[]>([
   [ButtonAction.DeleteCollection,       [OSMT_ADMIN]],
   [ButtonAction.MyWorkspace,            [OSMT_ADMIN, OSMT_CURATOR]],
   [ButtonAction.MetadataAdmin,          [OSMT_ADMIN]],
+  [ButtonAction.MetadataCreate,         [OSMT_ADMIN]],
+  [ButtonAction.MetadataUpdate,         [OSMT_ADMIN]],
 ])
 
 //TODO migrate  AuthServiceWgu & AuthService.hasRole & isEnabledByRoles into a singleton here. HDN Sept 15, 2022

ui/src/app/data/abstract-data.service.spec.ts

@@ -9,7 +9,7 @@ import { AuthService } from "../auth/auth-service"
 import { AuthServiceStub, RouterStub } from "@test/resource/mock-stubs"
 import { getBaseApi } from "../api-versions"
 
-describe("AbstractAdminService", () => {
+describe("AbstractDataService", () => {
   let testService: AbstractDataService
 
   beforeEach(() => {

ui/src/app/data/abstract-data.service.ts

@@ -1,14 +1,23 @@
 import { Location } from "@angular/common"
-import { HttpClient, HttpResponse } from "@angular/common/http"
+import { HttpClient, HttpHeaders, HttpResponse } from "@angular/common/http"
 import { Inject, Injectable } from "@angular/core"
 import { Router } from "@angular/router"
+
 import { Observable } from "rxjs"
-import { share } from "rxjs/operators"
-import { AbstractService, ApiGetParams } from "../abstract.service"
+import { map, share } from "rxjs/operators"
+
+import { AbstractService, ApiGetParams, IRelatedSkillsService } from "../abstract.service"
 import { AuthService } from "../auth/auth-service"
+import { PublishStatus } from "../PublishStatus"
+import { ApiSortOrder } from "../richskill/ApiSkill"
+import { ApiSearch, PaginatedSkills } from "../richskill/service/rich-skill-search.service"
+import { ApiSkillSummary } from "../richskill/ApiSkillSummary"
 
 @Injectable({ providedIn: "root" })
-export abstract class AbstractDataService extends AbstractService {
+export abstract class AbstractDataService extends AbstractService 
+    implements IRelatedSkillsService<number> {
+
+  protected abstract serviceUrl: string;
 
   protected constructor(
     httpClient: HttpClient,
@@ -17,7 +26,7 @@ export abstract class AbstractDataService extends AbstractService {
     location: Location,
     @Inject("BASE_API") baseApi: string
   ) {
-    super(httpClient, authService, router, location, baseApi)
+    super(httpClient, authService, router, location, baseApi);
   }
 
   /**
@@ -34,10 +43,60 @@ export abstract class AbstractDataService extends AbstractService {
     const observable =  this.httpClient.patch<T>(this.buildUrl(path + "/update"), body, {
       headers: this.wrapHeaders(headers),
       params,
-      observe: "response"}).pipe(share())
+      observe: "response"}).pipe(share());
     observable
-      .subscribe(() => {}, (err) => { this.redirectToLogin(err) })
-    return observable
+      .subscribe(() => {}, (err) => { this.redirectToLogin(err) });
+    return observable;
+  }
+
+  getDataById(id: number): Observable<any> {
+    return new Observable<any>;
+  }
+
+  getRelatedSkills(
+    entityId: number,
+    size: number,
+    from: number,
+    statusFilters: Set<PublishStatus>,
+    sort?: ApiSortOrder,
+  ): Observable<PaginatedSkills> {
+    const errorMsg = `Could not find skills for metadata [${entityId}]`;
+
+    return this.get<ApiSkillSummary[]>({
+      path: `${this.serviceUrl}/${entityId}/skills`,
+      headers: new HttpHeaders({
+        Accept: "application/json"
+      }),
+      params: this.buildTableParams(size, from, statusFilters, sort),
+    })
+      .pipe(share())
+      .pipe(map(({body, headers}) =>
+        new PaginatedSkills(this.safeUnwrapBody(body, errorMsg), Number(headers.get("X-Total-Count")))
+      ));
+  }
+
+  searchRelatedSkills(
+    entityId: number,
+    size: number,
+    from: number,
+    statusFilters: Set<PublishStatus>,
+    sort?: ApiSortOrder,
+    apiSearch?: ApiSearch
+  ): Observable<PaginatedSkills> {
+    const errorMsg = `Could not find skills for metadata [${entityId}]`;
+
+    return this.post<ApiSkillSummary[]>({
+      path: `${this.serviceUrl}/${entityId}/skills`,
+      headers: new HttpHeaders({
+        Accept: "application/json"
+      }),
+      params: this.buildTableParams(size, from, statusFilters, sort),
+      body: apiSearch ?? new ApiSearch({})
+    })
+      .pipe(share())
+      .pipe(map(({body, headers}) =>
+        new PaginatedSkills(this.safeUnwrapBody(body, errorMsg), Number(headers.get("X-Total-Count")))
+      ));
   }
 
 }

ui/src/app/detail-card/detail-card.component.ts

@@ -1,6 +1,6 @@
-import { Component, Input, OnInit } from "@angular/core"
-import { IDetailCardSectionData } from "./section/section.component"
-import {PublishStatus} from "../PublishStatus";
+import { Component, Input, OnInit } from "@angular/core";
+
+import { IDetailCardSectionData } from "./section/section.component";
 
 @Component({
   selector: "app-detail-card",
@@ -14,12 +14,11 @@ export class DetailCardComponent implements OnInit {
   @Input() authors = ""
   @Input() publishDate = ""
   @Input() archiveDate = ""
-  @Input() status = PublishStatus.Draft
+  @Input() status = ""
 
-  constructor() { }
+  constructor() {}
 
-  ngOnInit(): void {
-  }
+  ngOnInit(): void {}
 
   cardTypeLabel(): string {
     return "RichSkillDescriptor"

ui/src/app/detail-card/section/section.component.html

@@ -0,0 +1,9 @@
+<div class="t-margin-extraSmall t-margin-bottom">
+  <div class="m-sectionLabel">{{data.label}}</div>
+</div>
+<ng-template [ngIf]="!!data.bodyString">
+  <p class="t-type-body" [innerHTML]="data.bodyString"></p>
+</ng-template>
+<ng-template [ngIf]="!!data.bodyTemplate">
+  <ng-container *ngTemplateOutlet="data.bodyTemplate"></ng-container>
+</ng-template>

ui/src/app/detail-card/section/section.component.ts

@@ -1,4 +1,4 @@
-import {Component, Input, OnInit, TemplateRef} from "@angular/core"
+import { Component, Input, OnInit, TemplateRef } from "@angular/core";
 
 export interface IDetailCardSectionData {
   label: string
@@ -9,17 +9,7 @@ export interface IDetailCardSectionData {
 
 @Component({
   selector: "app-detail-card-section",
-  template: `
-    <div class="t-margin-extraSmall t-margin-bottom">
-      <div class="m-sectionLabel">{{data.label}}</div>
-    </div>
-    <ng-template [ngIf]="!!data.bodyString">
-      <p class="t-type-body" [innerHTML]="data.bodyString"></p>
-    </ng-template>
-    <ng-template [ngIf]="!!data.bodyTemplate">
-      <ng-container *ngTemplateOutlet="data.bodyTemplate"></ng-container>
-    </ng-template>
-  `
+  templateUrl: "./section.component.html"
 })
 export class DetailCardSectionComponent {
 
@@ -31,4 +21,7 @@ export class DetailCardSectionComponent {
   }
 
   constructor() {}
+
+  ngOnInit(): void {
+  }
 }

ui/src/app/detail-card/title/card-detail-title.component.html

@@ -2,7 +2,7 @@
   <div class="m-sectionLabel">{{cardType}}</div>
 </div>
 <h2 class="t-type-heading1 t-margin-extraSmall t-margin-bottom" tabindex="0">{{title}}</h2>
-<div class="t-margin-medium t-margin-bottom">
+<div class="t-margin-medium t-margin-bottom" *ngIf="authors">
   <p class="t-type-body">Authors: {{authors}}</p>
 </div>
 

ui/src/app/detail-card/title/card-detail-title.component.ts

@@ -1,5 +1,5 @@
-import {Component, Input, OnInit} from "@angular/core"
-import {PublishStatus} from "../../PublishStatus";
+import {Component, Input, OnInit} from "@angular/core";
+
 
 @Component({
   selector: "app-card-detail-title",
@@ -10,11 +10,11 @@ export class CardDetailTitleComponent implements OnInit {
   @Input() cardType = ""
   @Input() title = ""
   @Input() authors = ""
-  @Input() status: PublishStatus = PublishStatus.Draft
+  @Input() status = ""
   @Input() publishDate = ""
   @Input() archiveDate = ""
 
-  constructor() { }
+  constructor() {}
 
   ngOnInit(): void {
   }

ui/src/app/form/form-field-search-select/jobcode/form-field-jobcode-search-multi-select.component.spec.ts

@@ -10,7 +10,7 @@ import {EnvironmentService} from "src/app/core/environment.service"
 import {ActivatedRouteStubSpec} from "test/util/activated-route-stub.spec"
 import {KeywordSearchService} from "../../../richskill/service/keyword-search.service"
 import {KeywordSearchServiceStub} from "../../../../../test/resource/mock-stubs"
-import { ApiJobCode, IJobCode } from "../../../metadata/job-codes/Jobcode"
+import { ApiJobCode, IJobCode } from "../../../metadata/job-code/Jobcode"
 import {FormFieldJobCodeSearchMultiSelect} from "./form-field-jobcode-search-multi-select.component"
 
 @Component({

ui/src/app/form/form-field-search-select/jobcode/form-field-jobcode-search-multi-select.component.ts

@@ -2,7 +2,7 @@ import {Component} from "@angular/core"
 import {Observable} from "rxjs"
 import {map} from "rxjs/operators"
 import {KeywordSearchService} from "../../../richskill/service/keyword-search.service"
-import { IJobCode } from "../../../metadata/job-codes/Jobcode"
+import { IJobCode } from "../../../metadata/job-code/Jobcode"
 import {isJobCode} from "./form-field-jobcode-search-select.utilities"
 import {areSearchResultsEqual, labelFor, searchResultFromString} from "./form-field-jobcode-search-select.utilities"
 import {AbstractFormFieldSearchMultiSelect} from "../abstract-form-field-search-multi-select.component"

ui/src/app/form/form-field-search-select/jobcode/form-field-jobcode-search-select.component.spec.ts

@@ -10,7 +10,7 @@ import {EnvironmentService} from "src/app/core/environment.service"
 import {ActivatedRouteStubSpec} from "test/util/activated-route-stub.spec"
 import {KeywordSearchService} from "../../../richskill/service/keyword-search.service"
 import {KeywordSearchServiceStub} from "../../../../../test/resource/mock-stubs"
-import { ApiJobCode, IJobCode } from "../../../metadata/job-codes/Jobcode"
+import { ApiJobCode, IJobCode } from "../../../metadata/job-code/Jobcode"
 import {FormFieldJobCodeSearchSelect} from "./form-field-jobcode-search-select.component"
 
 @Component({