Skip to content

Commit

Permalink
Refactor of Category dertail view for metadata
Browse files Browse the repository at this point in the history
  • Loading branch information
Corpratespaz committed Jul 12, 2023
1 parent dee8fbb commit c455f2e
Show file tree
Hide file tree
Showing 16 changed files with 485 additions and 30 deletions.
48 changes: 43 additions & 5 deletions ui/src/app/app-routing.module.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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 = [
Expand Down Expand Up @@ -82,6 +86,44 @@ const routes: Routes = [
},
},

/* KEYWORDS */

{path: "metadata",
component: MetadataListComponent,
canActivate: [AuthGuard],
},
{path: "named-references/create",
component: MetadataFormComponent,
canActivate: [AuthGuard],
data: {
roles: ActionByRoles.get(ButtonAction.MetadataCreate)
},
},
{path: "jobcodes/create",
component: MetadataFormComponent,
canActivate: [AuthGuard],
data: {
roles: ActionByRoles.get(ButtonAction.MetadataCreate)
},
},
// detail
{path: "named-references/:id",
component: MetadataPublicComponent,
canActivate: [AuthGuard]
},
{path: "jobcode/:id",
component: MetadataPublicComponent,
canActivate: [AuthGuard]
},
{path: "named-reference/:id/manage",
component: MetadataManageComponent,
canActivate: [AuthGuard]
},
{path: "jobcode/:id/manage",
component: MetadataManageComponent,
canActivate: [AuthGuard]
},

/* COLLECTIONS */

// create collection
Expand Down Expand Up @@ -168,11 +210,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},
Expand Down
8 changes: 7 additions & 1 deletion ui/src/app/app.module.ts
Original file line number Diff line number Diff line change
Expand Up @@ -110,7 +110,10 @@ import { JobCodeListRowComponent } from "./metadata/job-codes/job-code-list-row/
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 { 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"
Expand Down Expand Up @@ -232,6 +235,9 @@ export function initializeApp(
NamedReferenceListRowComponent,
NamedReferenceTableComponent,
MetadataSelectorComponent,
MetadataFormComponent,
MetadataManageComponent,
MetadataPublicComponent,
InlineHeadingComponent,
JobCodeParentsPipe
],
Expand Down
13 changes: 6 additions & 7 deletions ui/src/app/detail-card/detail-card.component.ts
Original file line number Diff line number Diff line change
@@ -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",
Expand All @@ -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"
Expand Down
9 changes: 9 additions & 0 deletions ui/src/app/detail-card/section/section.component.html
Original file line number Diff line number Diff line change
@@ -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>
17 changes: 5 additions & 12 deletions ui/src/app/detail-card/section/section.component.ts
Original file line number Diff line number Diff line change
@@ -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
Expand All @@ -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 {

Expand All @@ -31,4 +21,7 @@ export class DetailCardSectionComponent {
}

constructor() {}

ngOnInit(): void {
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand Down
8 changes: 4 additions & 4 deletions ui/src/app/detail-card/title/card-detail-title.component.ts
Original file line number Diff line number Diff line change
@@ -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",
Expand All @@ -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 {
}
Expand Down
Empty file.
101 changes: 101 additions & 0 deletions ui/src/app/metadata/detail/abstract-metadata-detail.component.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,101 @@
import { Component, Input, OnInit} from "@angular/core";
import { Title } from "@angular/platform-browser";
import { ActivatedRoute } from "@angular/router";

import { IDetailCardSectionData } from "src/app/detail-card/section/section.component";
import { ApiJobCode } from "../job-codes/Jobcode";
import { ApiNamedReference } from "../named-references/NamedReference";
import { MetadataType } from "../rsd-metadata.enum";
import { QuickLinksHelper } from "../../core/quick-links-helper";

@Component({
template: ``
})
export abstract class AbstractMetadataDetailComponent extends QuickLinksHelper implements OnInit {

idParam: string | null;
metadata?: ApiNamedReference | ApiJobCode;

constructor(
protected route: ActivatedRoute,
protected titleService: Title
) {
super();
this.idParam = this.route.snapshot.paramMap.get("id");
}

ngOnInit(): void {

}

protected loadMetadata() {
if (this.idParam) {
// this.categoryService.getById(this.idParam).subscribe(
// (m: ApiNamedReference | ApiJobCode) => this.setMetadata(m));
} else {
this.clearMetadata();
}
}

protected setMetadata(metadata: ApiNamedReference | ApiJobCode) {
this.metadata = metadata;

// this.titleService.setTitle(`${category.name} | Category | ${this.whitelabel.toolName}`)
this.loadSkills();
}

protected loadSkills(): void {
if (this.metadata) {
// this.skillTableControl.loadSkills(this.metadata.id);
} else {
this.clearSkills();
}
}

protected clearMetadata() {
this.metadata = undefined;
this.titleService.setTitle(
`${this.getMetadataType()} | ${this.whitelabel.toolName}`);
this.loadSkills();
}

protected clearSkills() {
// this.skillTableControl.clearSkills();
}

getId(): number {
return this.metadata?.id ?? -1;
}

getCardFormat(): IDetailCardSectionData[] {
return [];
}

getMetadataName(): string {
return "Fine Arts";
}

getMetadataType(): string {
if (this.metadata instanceof ApiNamedReference) {
return this.metadata.type ?? "";
}
else if (this.metadata instanceof ApiJobCode) {
return MetadataType.JobCode;
}
else {
return "";
}
}

getPublishStatus(): string {
return "";
}

getArchivedDate(): string {
return "";
}

getPublishedDate(): string {
return "";
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
<div class="m-skillBackground m-skillBackground-detail m-skillBackground-collection l-skillBackground">
<div class="t-margin-extraSmall t-margin-bottom">
<div class="m-sectionLabel">Category</div>
</div>
<h2 class="t-type-heading1 t-margin-extraSmall t-margin-bottom" tabindex="0">{{categoryName}}</h2>
<p *ngIf="showSkillCount" class="t-type-body">{{categorySkillsLabel}}</p>
</div>
Loading

0 comments on commit c455f2e

Please sign in to comment.