Skip to content

Commit

Permalink
Adding Screen to Search/Filter Metadata (#401)
Browse files Browse the repository at this point in the history
* Adding new services classes for jobCodes and namedReferences

* Renaming package and services name classes. Extending new abstract class from the existing one.

* refactoring JobCode classes and package. Adding CRUD requests

* Adding Enum for MetadataType, Optimizing Imports

* Adding implementation for delete method in Abstract service

* Adding new services classes for jobCodes and namedReferences

* Renaming package and services name classes. Extending new abstract class from the existing one.

* refactoring JobCode classes and package. Adding CRUD requests

* Adding Enum for MetadataType, Optimizing Imports

* updating openapi.yaml to match endpoint definition.

* Correcting Routepath and refactoring web methods

* Refactoring entry points in navigation bar
  • Loading branch information
jchavez137 authored and manuel-delvillar committed Jun 13, 2023
1 parent 049a200 commit 54948e1
Show file tree
Hide file tree
Showing 63 changed files with 1,391 additions and 48 deletions.
7 changes: 3 additions & 4 deletions ui/angular.json
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,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"
],
Expand Down Expand Up @@ -126,6 +127,7 @@
"src/assets"
],
"styles": [
"./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
"src/styles.scss"
],
"scripts": [],
Expand All @@ -145,9 +147,6 @@
}
},
"cli": {
"analytics": false,
"schematicCollections": [
"@angular-eslint/schematics"
]
"analytics": false
}
}
22 changes: 22 additions & 0 deletions ui/package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 2 additions & 0 deletions ui/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@
"@angular/compiler": "^16.0.2",
"@angular/core": "^16.0.2",
"@angular/forms": "^16.0.2",
"@angular/material": "^16.0.2",
"@angular/platform-browser": "^16.0.2",
"@angular/platform-browser-dynamic": "^16.0.2",
"@angular/router": "^16.0.2",
Expand All @@ -45,6 +46,7 @@
"@angular-eslint/eslint-plugin-template": "16.0.2",
"@angular-eslint/schematics": "16.0.2",
"@angular-eslint/template-parser": "16.0.2",
"@angular/cdk": "^16.0.2",
"@angular/cli": "^16.0.2",
"@angular/compiler-cli": "^16.0.2",
"@types/jasmine": "~4.3.2",
Expand Down
6 changes: 6 additions & 0 deletions ui/src/app/app-routing.module.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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 = [
Expand Down Expand Up @@ -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},
Expand Down
22 changes: 19 additions & 3 deletions ui/src/app/app.module.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -229,6 +237,12 @@ export function initializeApp(
CollectionPipe,
ConvertToCollectionComponent,
SizePaginationComponent,
MetadataListComponent,
JobCodeListRowComponent,
JobCodeTableComponent,
NamedReferenceListRowComponent,
NamedReferenceTableComponent,
MetadataSelectorComponent,
],
imports: [
NgIdleKeepaliveModule.forRoot(),
Expand All @@ -241,7 +255,9 @@ export function initializeApp(
OsmtCoreModule,
OsmtFormModule,
FormsModule,
OsmtTableModule
OsmtTableModule,
NoopAnimationsModule,
MatMenuModule
],
providers: [
EnvironmentService,
Expand Down
6 changes: 4 additions & 2 deletions ui/src/app/auth/auth-roles.ts
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,8 @@ export enum ButtonAction {
LibraryExport,
ExportDraftCollection,
DeleteCollection,
MyWorkspace
MyWorkspace,
MetadataAdmin,
}

export const ActionByRoles = new Map<number, string[]>([
Expand All @@ -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
Original file line number Diff line number Diff line change
Expand Up @@ -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({
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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({
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
Original file line number Diff line number Diff line change
@@ -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,
Expand Down
Original file line number Diff line number Diff line change
@@ -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) {
Expand Down
11 changes: 11 additions & 0 deletions ui/src/app/metadata/PaginatedMetadata.ts
Original file line number Diff line number Diff line change
@@ -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
}
}
31 changes: 31 additions & 0 deletions ui/src/app/metadata/abstract-data.service.spec.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
import { TestBed } from "@angular/core/testing"
import { Router } from "@angular/router"
import { HttpClientTestingModule } from "@angular/common/http/testing"
import { Location } from "@angular/common"
import { AbstractDataService } from "./abstract-data.service"
import { EnvironmentService } from "../core/environment.service"
import { AppConfig } from "../app.config"
import { AuthService } from "../auth/auth-service"
import { AuthServiceStub, RouterStub } from "@test/resource/mock-stubs"

describe("AbstractAdminService", () => {
let testService: AbstractDataService

beforeEach(() => {
TestBed.configureTestingModule({
imports: [HttpClientTestingModule],
providers: [
EnvironmentService,
AppConfig,
AbstractDataService,
Location,
{ provide: AuthService, useClass: AuthServiceStub },
{ provide: Router, useClass: RouterStub }
]})
testService = TestBed.inject(AbstractDataService)
})

it("should be created", () => {
expect(testService).toBeTruthy()
})
})
37 changes: 37 additions & 0 deletions ui/src/app/metadata/abstract-data.service.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
import { Location } from "@angular/common"
import { HttpClient, HttpResponse } from "@angular/common/http"
import { 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 { AuthService } from "../auth/auth-service"

@Injectable({ providedIn: "root" })
export abstract class AbstractDataService extends AbstractService {

protected constructor(httpClient: HttpClient, authService: AuthService, router: Router, location: Location) {
super(httpClient, authService, router, location)
}

/**
* Perform a patch request.
*
* const {body, headers, status, type, url} = response
*
* @param path The relative path to the endpoint
* @param headers Json blob defining headers
* @param params Json blob defining path params
* @param body Json blob defining the changes to be applied to the object
*/
patch<T>({path, headers, params, body}: ApiGetParams): Observable<HttpResponse<T>> {
const observable = this.httpClient.patch<T>(this.buildUrl(path + "/update"), body, {
headers: this.wrapHeaders(headers),
params,
observe: "response"}).pipe(share())
observable
.subscribe(() => {}, (err) => { this.redirectToLogin(err) })
return observable
}

}
Original file line number Diff line number Diff line change
@@ -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>


Loading

0 comments on commit 54948e1

Please sign in to comment.