NgMetaWidgetsLib

This library was generated with Angular CLI version 18.0.3. This library provides the widgets for the MetaDataQualityService. A running version of the widgets can be found here.

Dependencies

• Angular 19
• ng2-charts

These are not enforced as peer dependencies, but are required for the widgets to work:

• Angular Material
• ngx-translate

Installation

As the library uses the MatLuxonDateModule, you need to install the adapter according to your material version: npx ng add @angular/material-luxon-adapter (declaring it in peerDependencies would always install the newest version)

Angular >= 17

Then install the library via npm:

npm install ngx-edu-sharing-metaqs2 --save

Usage

Module

This library is provided as an Angular module. To use it in your application, import the NgMetaWidgetsModule in your app.module.ts file:

@NgModule({
  imports: [
    …
    NgMetaWidgetsLibModule.forRoot({
      eduSharingPath: environment.eduSharingPath,
      apiPath: environment.apiPath,
      useDummyValues: environment.useDummyValues,
    })
]})

or in a standalone Application declare the module in the app.config.ts file:

export const appConfig: ApplicationConfig = {
  providers: [
    …
    importProvidersFrom(NgMetaWidgetsLibModule.forRoot({
      eduSharingPath: environment.eduSharingPath,
      apiPath: environment.apiPath,
      useDummyValues: false,
    }))
    ]
};

or as webcomponents in your script.js file (as an example we use the CountsWithHistoryComponent):

import { createRegister, CountsWithHistoryComponent, … } from 'ngx-edu-sharing-metaqs2';

// create the register function once and use it for all component registrations
const register = createRegister({
    eduSharingPath: environment.eduSharingPath,
    apiPath: environment.apiPath,
    production: true
});

// register as many components as you like
register('metaqs2-counts-with-history', CountsWithHistoryComponent);
…

where eduSharingPath and apiPath are the base paths to the edu-sharing frontend (e.g. https://redaktion.openeduhub.net/edu-sharing) and the MetaDataQualityService backend (e.g. https://metaqs-2.staging.openeduhub.net) respectively.

Theming

The library provides mixins for theming. To use them, import the _index.scss file in your main styles.scss file and include the mixins in your own styles:

@use '~ngx-edu-sharing-metaqs2' as metaqs2-widgets;

:root {
    @include metaqs2-widgets.donut-chart-tooltip-background-color(white);
}

Widgets

This library provides the following widgets:

Metadatenvollständigkeit von Sammlungen

TreeCollectionDetailsComponent

• selector: <metaqs2-tree-collection-details />
• inputs:
  • collectionId (required) - the id of the collection to display

Metadatenvollständigkeit von Quellen

QualityMatrixComponent selector: <metaqs2--quality-matrix-v2 />

Sammlungsfüllstand

TreeSearchCountsComponent

• selector: <metaqs2-tree-search-counts />
• inputs:
  • collectionId (required) - the id of the collection to display

Sammlungsverlauf

Übersicht über die Anzahl der Materialien in Sammlungen über die Zeit. CollectionCountHistoryComponent

Lizenzübersicht für Sammlungen

Übersicht der verwendeten Lizenzen in einer Sammlung und ihren Unter-Sammlungen. Diese Komponente leitet sich von CountsWithHistoryComponent ab und benutzt auch deren Template Sie überschreibt die apiMethod und sourceType Eingaben. Sie überschreibt die getCountByDate() Methode und benutzt eigenes css um die icons darzustellen.

TreeLicenseComponent

• selector: <metaqs2-tree-license />
• inputs:
  • collectionId (required) - the id of the collection to display

Counts with History

CountHistoryComponent

• selector: <metaqs2-counts-with-history />.
• inputs:
  • apiMethod (required) - the method to call on the MetaApiService
  • sourceType (optional) - the type of the source ( 'replicationSource' | 'collection')
  • pageTitle (optional) - translation key for the title
  • columnTranslationkey (optional) - translation key for the columns

This is a generic component that can be used to display counts with a history. It can be configered by providing the follwing data structure in it's routing configuration or by providing it as an input to the component:

{
  path: 'content-type-count', 
  component: CountsWithHistoryComponent,
  data: {
      pageTitle: 'pageTitle.content-type-count', // translation key for the title (if not provided or empty, the page header will not be displayed)
      apiMethod: 'getMaterialTypeCountsByReplicationSource', // the method to call on the MetaApiService (required)
      columnTranslationkey: 'issues.', // translation key for the columns (optional)
      sourceType: 'replicationSource' // the type of the source ( 'replicationSource' | 'collection')e
  },
}

Currently the following manifestations are implemented:

Materialtypen nach Quellen

{
  path: 'content-type-count',
  component: CountsWithHistoryComponent,
  data: { pageTitle: 'pageTitle.content-type-count', 
          apiMethod: 'getMaterialTypeCountsByReplicationSource',
          sourceType: 'replicationSource' }
}

Lizenzarten nach Quellen

{
  path: 'license-count-sources',
  component: CountsWithHistoryComponent,
  data: { pageTitle: 'pageTitle.license-count-sources', 
          apiMethod: 'getLicenseCountsByReplicationSource',
          sourceType: 'replicationSource' }
},

Lizenzarten nach Sammlungen

{
  path: 'license-count-collections',
  component: CountsWithHistoryComponent,
  data: { pageTitle: 'pageTitle.license-count-collections', 
          apiMethod: 'getMaterialCountMatrixByLicenseGroup',
          sourceType: 'collection' }
}

Quellen und ihre Qualitätsprobleme

{
    path: 'issues-replicationsources',
    component: CountsWithHistoryComponent,
    data: {
        pageTitle: 'pageTitle.issues-replicationsources',
        apiMethod: 'getCompletenessForReplicationSources', 
        sourceType: 'replicationSource',
        columnTranslationkey: 'issues.'},
},

Fachportale und ihre Qualitätsprobleme

{
  path: 'issues-collections',
  component: CountsWithHistoryComponent,
  data: {
    title: 'pageTitle.issues-collections',
    apiMethod: 'getCompletenessForDisciplinaryPortals',
    sourceType: 'collection',  
    columnTranslationkey: 'issues.',
  }
},

Build

Run ng build ng-meta-widgets-lib -c production to build the project. The build artifacts will be stored in the dist/ directory.

Publishing to npm

1. in gitlab create a new tag
2. in the pipeline select the job publish and run it manually
3. this will update the version in the lib/package.json file and publish to npm

Running unit tests

Run ng test ng-meta-widgets-lib to execute the unit tests via Karma.

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI Overview and Command Reference page.