Adding Screen to Search/Filter Metadata

ui/angular.json

@@ -54,6 +54,7 @@
               }
             ],
             "styles": [
+              "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
               "node_modules/@concentricsky/wgu-design-system-patternlibrary/dist/css/screen.css",
               "src/styles.scss"
             ],
@@ -79,7 +80,7 @@
                 {
                   "type": "initial",
                   "maximumWarning": "500kb",
-                  "maximumError": "1mb"
+                  "maximumError": "1.2mb"
                 },
                 {
                   "type": "anyComponentStyle",
@@ -132,6 +133,7 @@
               "src/assets"
             ],
             "styles": [
+              "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
               "src/styles.scss"
             ],
             "scripts": [],

ui/package.json

@@ -17,10 +17,12 @@
   "private": true,
   "dependencies": {
     "@angular/animations": "~12.2.17",
+    "@angular/cdk": "~12.2.13",
     "@angular/common": "~12.2.17",
     "@angular/compiler": "~12.2.17",
     "@angular/core": "~12.2.17",
     "@angular/forms": "~12.2.17",
+    "@angular/material": "~12.2.13",
     "@angular/platform-browser": "~12.2.17",
     "@angular/platform-browser-dynamic": "~12.2.17",
     "@angular/router": "~12.2.17",
@@ -63,4 +65,4 @@
     "tslint": "~6.1.0",
     "typescript": "~4.3.5"
   }
-}
+}

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

@@ -25,6 +25,7 @@ import {BatchImportComponent} from "./richskill/import/batch-import.component"
 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"
 
 
 const routes: Routes = [
@@ -181,6 +182,11 @@ 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

@@ -16,8 +16,8 @@ import {HeaderComponent} from "./navigation/header.component"
 import {FooterComponent} from "./navigation/footer.component"
 import {SkillCollectionsDisplayComponent} from "./richskill/form/skill-collections-display.component"
 import {ToastComponent} from "./toast/toast.component"
-import {PillComponent} from "./core/pill/pill.component";
-import {PillGroupComponent} from "./core/pill/group/pill-group.component";
+import {PillComponent} from "./core/pill/pill.component"
+import {PillGroupComponent} from "./core/pill/group/pill-group.component"
 import {AuthService} from "./auth/auth-service"
 import {AuthGuard} from "./auth/auth.guard"
 import {CommoncontrolsComponent} from "./navigation/commoncontrols.component"
@@ -110,6 +110,14 @@ import { OsmtFormModule } from "./form/osmt-form.module"
 import { ConvertToCollectionComponent } from "./my-workspace/convert-to-collection/convert-to-collection.component"
 import { SizePaginationComponent } from "./table/skills-library-table/size-pagination/size-pagination.component"
 import {OsmtTableModule} from "./table/osmt-table.module"
+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"
 
 export function initializeApp(
   appConfig: AppConfig,
@@ -229,6 +237,12 @@ export function initializeApp(
     CollectionPipe,
     ConvertToCollectionComponent,
     SizePaginationComponent,
+    MetadataListComponent,
+    JobCodeListRowComponent,
+    JobCodeTableComponent,
+    NamedReferenceListRowComponent,
+    NamedReferenceTableComponent,
+    MetadataSelectorComponent,
   ],
   imports: [
     NgIdleKeepaliveModule.forRoot(),
@@ -241,7 +255,9 @@ export function initializeApp(
     OsmtCoreModule,
     OsmtFormModule,
     FormsModule,
-    OsmtTableModule
+    OsmtTableModule,
+    NoopAnimationsModule,
+    MatMenuModule
   ],
   providers: [
     EnvironmentService,

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

@@ -14,7 +14,8 @@ export enum ButtonAction {
   LibraryExport,
   ExportDraftCollection,
   DeleteCollection,
-  MyWorkspace
+  MyWorkspace,
+  MetadataAdmin,
 }
 
 export const ActionByRoles = new Map<number, string[]>([
@@ -28,7 +29,8 @@ export const ActionByRoles = new Map<number, string[]>([
   [ButtonAction.LibraryExport,          [OSMT_ADMIN]],
   [ButtonAction.ExportDraftCollection,  [OSMT_ADMIN]],
   [ButtonAction.DeleteCollection,       [OSMT_ADMIN]],
-  [ButtonAction.MyWorkspace,            [OSMT_ADMIN, OSMT_CURATOR]]
+  [ButtonAction.MyWorkspace,            [OSMT_ADMIN, OSMT_CURATOR]],
+  [ButtonAction.MetadataAdmin,          [OSMT_ADMIN]],
 ])
 
 //TODO migrate  AuthServiceWgu & AuthService.hasRole & isEnabledByRoles into a singleton here. HDN Sept 15, 2022

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 "../../../job-codes/Jobcode"
+import { ApiJobCode, IJobCode } from "../../../metadata/job-codes/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 "../../../job-codes/Jobcode"
+import { IJobCode } from "../../../metadata/job-codes/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 "../../../job-codes/Jobcode"
+import { ApiJobCode, IJobCode } from "../../../metadata/job-codes/Jobcode"
 import {FormFieldJobCodeSearchSelect} from "./form-field-jobcode-search-select.component"
 
 @Component({

ui/src/app/form/form-field-search-select/jobcode/form-field-jobcode-search-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 "../../../job-codes/Jobcode"
+import { IJobCode } from "../../../metadata/job-codes/Jobcode"
 import {isJobCode} from "./form-field-jobcode-search-select.utilities"
 import {areSearchResultsEqual, labelFor, searchResultFromString} from "./form-field-jobcode-search-select.utilities"
 import {AbstractFormFieldSearchSingleSelect} from "../abstract-form-field-search-single-select.component"

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

@@ -1,6 +1,6 @@
 // noinspection LocalVariableNamingConventionJS
 import {async, ComponentFixture, TestBed} from "@angular/core/testing"
-import {IJobCode} from "../../../job-codes/Jobcode"
+import { IJobCode } from "../../../metadata/job-codes/Jobcode"
 import {createMockJobcode} from "../../../../../test/resource/mock-data"
 import {
   areSearchResultsEqual,

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

@@ -1,4 +1,4 @@
-import {IJobCode} from "../../../job-codes/Jobcode"
+import { IJobCode } from "../../../metadata/job-codes/Jobcode"
 
 export const areSearchResultsEqual = (result1: IJobCode, result2: IJobCode): boolean => {
   if (result1 && result2) {

ui/src/app/metadata/PaginatedMetadata.ts

@@ -0,0 +1,11 @@
+import { ApiJobCode } from "./job-codes/Jobcode"
+import { ApiNamedReference } from "./named-references/NamedReference"
+
+export class PaginatedMetadata {
+  totalCount = 0
+  metadata: ApiJobCode[]|ApiNamedReference[] = []
+  constructor(metadata: ApiJobCode[]|ApiNamedReference[], totalCount: number) {
+    this.metadata = metadata
+    this.totalCount = totalCount
+  }
+}

ui/src/app/metadata/detail/metadata-list/metadata-list.component.html

@@ -0,0 +1,83 @@
+
+<div class="l-stickyBar">
+
+  <div class="l-container t-padding-large t-padding-top">
+
+    <!--    {{render '@listheading'}}-->
+    <div class="t-margin-medium t-margin-bottom">
+      <form [formGroup]="searchForm" (ngSubmit)="handleDefaultSubmit()">
+        <div class="m-text">
+          <svg class="m-text-x-icon t-icon" (click)="clearSearch()">
+            <use xlink:href="/assets/images/svg-defs.svg#icon-dismiss"></use>
+          </svg>
+          <input type="text" placeholder="Search Metadata" [formControl]="searchForm.controls.search">
+          <app-metadata-selector [isVisible]="getSelectAllEnabled" [control]="typeControl" [currentSelection]="selectedMetadataType">
+          </app-metadata-selector>
+        </div>
+      </form>
+    </div>
+    <div class="l-container l-container-mobile t-margin-medium t-margin-bottom">
+      <h2 *ngIf="title" class="t-type-heading1 t-margin-small t-margin-bottom">{{title}}</h2>
+      <p class="t-type-bodyLarge t-type-text3">
+        {{metadataCountLabel}}
+
+          <span *ngIf="matchingQuery">
+            found based on
+            query: "{{matchingQuery}}"
+          </span>
+        <ng-template [ngIf]="totalCount > 0">
+          Viewing {{firstRecordNo}}-{{lastRecordNo}}.
+        </ng-template>
+      </p>
+    </div>
+
+    <div class="t-margin-medium t-margin-bottom">
+      <app-blocking-loader [observables]="[resultsLoaded]">
+        <p class="t-visuallyHidden">Select one or more records in the table, or select all in the table heading, then use the action menu to delete the selected ones.</p>
+        <app-job-code-table
+          *ngIf="isJobCodeDataSelected"
+          [allowSorting]="true"
+          [items]="getJobCodes()"
+          [currentSort]="columnSort"
+          [rowActions]="rowActions()"
+          [selectAllCount]="getSelectAllCount()"
+          [selectAllEnabled]="getSelectAllEnabled()"
+          [clearSelected]="clearSelectedItemsFromTable.asObservable()"
+          (selectAllSelected)="handleSelectAll($event)"
+          (rowSelected)="handleNewSelection($event)"
+          (columnSorted)="handleHeaderColumnSort($event)"
+          (focusActionBar)="focusActionBar()"
+        ></app-job-code-table>
+
+        <app-named-reference-table
+          *ngIf="!isJobCodeDataSelected"
+          [allowSorting]="true"
+          [items]="getNamedReferences()"
+          [currentSort]="columnSort"
+          [rowActions]="rowActions()"
+          [selectAllCount]="getSelectAllCount()"
+          [selectAllEnabled]="getSelectAllEnabled()"
+          [clearSelected]="clearSelectedItemsFromTable.asObservable()"
+          (selectAllSelected)="handleSelectAll($event)"
+          (rowSelected)="handleNewSelection($event)"
+          (columnSorted)="handleHeaderColumnSort($event)"
+          (focusActionBar)="focusActionBar()"
+        ></app-named-reference-table>
+
+        <app-empty-message *ngIf="emptyResults && !showSearchEmptyMessage">
+          <p class="m-emptyMessage-x-message">No Metadata found. Try adjusting your search criteria.</p>
+        </app-empty-message>
+      </app-blocking-loader>
+    </div>
+
+    <app-pagination
+      [currentPage]="currentPageNo"
+      [totalPages]="totalPageCount"
+      (pageClicked)="handlePageClicked($event)"
+    ></app-pagination>
+
+  </div>
+
+</div>
+
+