diff --git a/package-lock.json b/package-lock.json index b5e4de62..48db8ccd 100644 --- a/package-lock.json +++ b/package-lock.json @@ -29,7 +29,7 @@ "ngx-colors": "^3.5.3", "ngx-edu-sharing-api": "^9999.0.2", "ngx-edu-sharing-ui": "^9999.0.3", - "ngx-edu-sharing-wlo-pages": "^0.1.22", + "ngx-edu-sharing-wlo-pages": "^0.1.23", "ngx-slick-carousel": "^17.0.0", "rxjs": "^7.0.0", "slick-carousel": "^1.8.1", @@ -11887,6 +11887,22 @@ "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==", "dev": true }, + "node_modules/echarts": { + "version": "5.5.1", + "resolved": "https://registry.npmjs.org/echarts/-/echarts-5.5.1.tgz", + "integrity": "sha512-Fce8upazaAXUVUVsjgV6mBnGuqgO+JNDlcgF79Dksy4+wgGpQB2lmYoO4TSweFg/mZITdpGHomw/cNBJZj1icA==", + "peer": true, + "dependencies": { + "tslib": "2.3.0", + "zrender": "5.6.0" + } + }, + "node_modules/echarts/node_modules/tslib": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz", + "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==", + "peer": true + }, "node_modules/ee-first": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz", @@ -16909,6 +16925,18 @@ "@angular/forms": ">=15.0.0" } }, + "node_modules/ngx-echarts": { + "version": "18.0.0", + "resolved": "https://registry.npmjs.org/ngx-echarts/-/ngx-echarts-18.0.0.tgz", + "integrity": "sha512-1rJW7vhMTTQMZNO5AhbHfTDorhP7dcvwRsDH5jFk2SPb/gjIFWvXBY9VSNAOKumuSBnopm2+uSz6BRO5oWxovA==", + "peer": true, + "dependencies": { + "tslib": "^2.3.0" + }, + "peerDependencies": { + "echarts": ">=5.0.0" + } + }, "node_modules/ngx-edu-sharing-api": { "version": "9999.0.2", "resolved": "https://registry.npmjs.org/ngx-edu-sharing-api/-/ngx-edu-sharing-api-9999.0.2.tgz", @@ -16942,9 +16970,9 @@ } }, "node_modules/ngx-edu-sharing-wlo-pages": { - "version": "0.1.22", - "resolved": "https://registry.npmjs.org/ngx-edu-sharing-wlo-pages/-/ngx-edu-sharing-wlo-pages-0.1.22.tgz", - "integrity": "sha512-OGaU1xAZ1tHPhz0bW6pn3/8GIpHuwjmfvDcuxv6aWvSoaIWJSOvi9m0Nx/BJ59YzcVcxqxFBcIzcMWkgkM/bGg==", + "version": "0.1.23", + "resolved": "https://registry.npmjs.org/ngx-edu-sharing-wlo-pages/-/ngx-edu-sharing-wlo-pages-0.1.23.tgz", + "integrity": "sha512-/avemWf0LsqYtYvd6IUltA2ehAi/OjhyjqwJI09dOj/1GyxKRyxy/PIEJ1JxDktjyDGlgRDzJ2Iq5BOcHky19Q==", "dependencies": { "tslib": "^2.3.0" }, @@ -16955,7 +16983,9 @@ "@bluehalo/ngx-leaflet": "^18.0.0", "@ngx-translate/core": "^15.0.0", "angular-material-css-vars": "^7.0.0", + "echarts": "^5.5.1", "ngx-colors": "^3.5.3", + "ngx-echarts": "^18.0.0", "ngx-edu-sharing-api": "^9999.0.2", "ngx-edu-sharing-ui": "^9999.0.3", "ngx-edu-sharing-z-api": "^0.0.3", @@ -22198,6 +22228,21 @@ "version": "0.14.7", "resolved": "https://registry.npmjs.org/zone.js/-/zone.js-0.14.7.tgz", "integrity": "sha512-0w6DGkX2BPuiK/NLf+4A8FLE43QwBfuqz2dVgi/40Rj1WmqUskCqj329O/pwrqFJLG5X8wkeG2RhIAro441xtg==" + }, + "node_modules/zrender": { + "version": "5.6.0", + "resolved": "https://registry.npmjs.org/zrender/-/zrender-5.6.0.tgz", + "integrity": "sha512-uzgraf4njmmHAbEUxMJ8Oxg+P3fT04O+9p7gY+wJRVxo8Ge+KmYv0WJev945EH4wFuc4OY2NLXz46FZrWS9xJg==", + "peer": true, + "dependencies": { + "tslib": "2.3.0" + } + }, + "node_modules/zrender/node_modules/tslib": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz", + "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==", + "peer": true } }, "dependencies": { @@ -30634,6 +30679,24 @@ "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==", "dev": true }, + "echarts": { + "version": "5.5.1", + "resolved": "https://registry.npmjs.org/echarts/-/echarts-5.5.1.tgz", + "integrity": "sha512-Fce8upazaAXUVUVsjgV6mBnGuqgO+JNDlcgF79Dksy4+wgGpQB2lmYoO4TSweFg/mZITdpGHomw/cNBJZj1icA==", + "peer": true, + "requires": { + "tslib": "2.3.0", + "zrender": "5.6.0" + }, + "dependencies": { + "tslib": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz", + "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==", + "peer": true + } + } + }, "ee-first": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz", @@ -34333,6 +34396,15 @@ "tslib": "^2.0.0" } }, + "ngx-echarts": { + "version": "18.0.0", + "resolved": "https://registry.npmjs.org/ngx-echarts/-/ngx-echarts-18.0.0.tgz", + "integrity": "sha512-1rJW7vhMTTQMZNO5AhbHfTDorhP7dcvwRsDH5jFk2SPb/gjIFWvXBY9VSNAOKumuSBnopm2+uSz6BRO5oWxovA==", + "peer": true, + "requires": { + "tslib": "^2.3.0" + } + }, "ngx-edu-sharing-api": { "version": "9999.0.2", "resolved": "https://registry.npmjs.org/ngx-edu-sharing-api/-/ngx-edu-sharing-api-9999.0.2.tgz", @@ -34350,9 +34422,9 @@ } }, "ngx-edu-sharing-wlo-pages": { - "version": "0.1.22", - "resolved": "https://registry.npmjs.org/ngx-edu-sharing-wlo-pages/-/ngx-edu-sharing-wlo-pages-0.1.22.tgz", - "integrity": "sha512-OGaU1xAZ1tHPhz0bW6pn3/8GIpHuwjmfvDcuxv6aWvSoaIWJSOvi9m0Nx/BJ59YzcVcxqxFBcIzcMWkgkM/bGg==", + "version": "0.1.23", + "resolved": "https://registry.npmjs.org/ngx-edu-sharing-wlo-pages/-/ngx-edu-sharing-wlo-pages-0.1.23.tgz", + "integrity": "sha512-/avemWf0LsqYtYvd6IUltA2ehAi/OjhyjqwJI09dOj/1GyxKRyxy/PIEJ1JxDktjyDGlgRDzJ2Iq5BOcHky19Q==", "requires": { "tslib": "^2.3.0" } @@ -38173,6 +38245,23 @@ "version": "0.14.7", "resolved": "https://registry.npmjs.org/zone.js/-/zone.js-0.14.7.tgz", "integrity": "sha512-0w6DGkX2BPuiK/NLf+4A8FLE43QwBfuqz2dVgi/40Rj1WmqUskCqj329O/pwrqFJLG5X8wkeG2RhIAro441xtg==" + }, + "zrender": { + "version": "5.6.0", + "resolved": "https://registry.npmjs.org/zrender/-/zrender-5.6.0.tgz", + "integrity": "sha512-uzgraf4njmmHAbEUxMJ8Oxg+P3fT04O+9p7gY+wJRVxo8Ge+KmYv0WJev945EH4wFuc4OY2NLXz46FZrWS9xJg==", + "peer": true, + "requires": { + "tslib": "2.3.0" + }, + "dependencies": { + "tslib": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz", + "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==", + "peer": true + } + } } } } diff --git a/package.json b/package.json index d69c03a2..9083cbfc 100644 --- a/package.json +++ b/package.json @@ -48,7 +48,7 @@ "ngx-colors": "^3.5.3", "ngx-edu-sharing-api": "^9999.0.2", "ngx-edu-sharing-ui": "^9999.0.3", - "ngx-edu-sharing-wlo-pages": "^0.1.22", + "ngx-edu-sharing-wlo-pages": "^0.1.23", "ngx-slick-carousel": "^17.0.0", "rxjs": "^7.0.0", "slick-carousel": "^1.8.1", diff --git a/src/app/wlo-search/template/custom-definitions.ts b/src/app/wlo-search/template/custom-definitions.ts index ebef9796..5350c048 100644 --- a/src/app/wlo-search/template/custom-definitions.ts +++ b/src/app/wlo-search/template/custom-definitions.ts @@ -1,6 +1,8 @@ import { SelectOption } from './swimlane/swimlane-settings-dialog/select-option'; import type { Node } from 'ngx-edu-sharing-api'; +export const defaultLrt: string = 'ccm:oeh_lrt'; + export const defaultMds: string = 'mds_oeh'; export const defaultTopicTextNodeId: string = '2340e5cf-4e9d-4b42-b6df-e64087be7961'; @@ -34,6 +36,39 @@ export const initialTopicColor: string = '#182e5c'; export const ioType: string = 'ccm:io'; +export const lrtBaseUrl: string = + 'https://vocabs.openeduhub.de/w3id.org/openeduhub/vocabs/new_lrt/'; + +export const lrtIdsEvents: string[] = [ + '03ab835b-c39c-48d1-b5af-7611de2f6464', // educational offer vocab + '955590ae-5f06-4513-98e9-91dfa8d5a05e', // event meeting vocab +]; + +export const lrtIdsLessonPlanning: string[] = [ + '7381f17f-50a6-4ce1-b3a0-9d85a482eec0', // methods vocab + '0a79a1d0-583b-47ce-86a7-517ab352d796', // lesson planning vocab +]; + +export const lrtIdsMedia: string[] = [ + 'a6d1ac52-c557-4151-bc6f-0d99b0b96fb9', // images vocab + '7a6e9608-2554-4981-95dc-47ab9ba924de', // video vocab + 'ec2682af-08a9-4ab1-a324-9dca5151e99f', // audio vocab + '4665caac-99d7-4da3-b9fb-498d8ece034f', // interactive vocab +]; + +export const lrtIdsPracticeMaterials: string[] = [ + 'cd625d33-5d7b-4a86-a54a-9a897ded729f', // questionnaire vocab + '588efe4f-976f-48eb-84aa-8bcb45679f85', // learning materials vocab +]; + +export const lrtIdsSources: string[] = [ + '3869b453-d3c1-4b34-8f25-9127e9d68766', // sources vocab +]; + +export const lrtIdsTools: string[] = [ + 'cefccf75-cba3-427d-9a0f-35b4fedcbba1', // tools vocab +]; + export const mapType: string = 'ccm:map'; export const pageConfigAspect: string = 'ccm:page'; diff --git a/src/app/wlo-search/template/template.component.html b/src/app/wlo-search/template/template.component.html index ac27cd1f..b2c260f0 100644 --- a/src/app/wlo-search/template/template.component.html +++ b/src/app/wlo-search/template/template.component.html @@ -109,7 +109,19 @@

Themenbaum von {{ topic() }}

> - Inhalt von {{ menuItems.statistics }} folgt. +

Inhalte von {{ topic() }}

+ + > + + + Inhalt von {{ menuItems.feedback }} folgt. diff --git a/src/app/wlo-search/template/template.component.ts b/src/app/wlo-search/template/template.component.ts index 1c9b2569..427f568d 100644 --- a/src/app/wlo-search/template/template.component.ts +++ b/src/app/wlo-search/template/template.component.ts @@ -5,35 +5,54 @@ import { ActivatedRoute } from '@angular/router'; import { ApiRequestConfiguration, AuthenticationService, + CollectionReference, + CollectionService, + FacetsDict, + HOME_REPOSITORY, MdsValue, MdsWidget, Node, NodeEntries, NodeService, + ReferenceEntries, + SearchService, } from 'ngx-edu-sharing-api'; +import { Facet } from 'ngx-edu-sharing-api/lib/api/models/facet'; import { ParentEntries } from 'ngx-edu-sharing-api/lib/api/models/parent-entries'; +import { SearchResultNode } from 'ngx-edu-sharing-api/lib/api/models/search-result-node'; +import { Value } from 'ngx-edu-sharing-api/lib/api/models/value'; import { SpinnerComponent } from 'ngx-edu-sharing-ui'; import { CollapsibleMenuItemComponent, FilterBarComponent, SideMenuWrapperComponent, + StatisticChart, + StatisticsSummaryComponent, TopicHeaderComponent, TopicsColumnBrowserComponent, } from 'ngx-edu-sharing-wlo-pages'; -import { firstValueFrom } from 'rxjs'; -import { filter } from 'rxjs/operators'; +import { firstValueFrom, Observable } from 'rxjs'; +import { filter, shareReplay } from 'rxjs/operators'; import { environment } from 'src/environments/environment'; import { v4 as uuidv4 } from 'uuid'; import { ViewService } from '../core/view.service'; import { SearchModule } from '../search/search.module'; import { SharedModule } from '../shared/shared.module'; import { + defaultLrt, defaultMds, defaultTopicTextNodeId, defaultTopicsColumnBrowserNodeId, initialLocaleString, initialTopicColor, ioType, + lrtBaseUrl, + lrtIdsEvents, + lrtIdsLessonPlanning, + lrtIdsMedia, + lrtIdsPracticeMaterials, + lrtIdsSources, + lrtIdsTools, mapType, pageConfigPropagateType, pageConfigRefType, @@ -68,6 +87,7 @@ import { Swimlane } from './swimlane/swimlane'; SharedModule, SideMenuWrapperComponent, SpinnerComponent, + StatisticsSummaryComponent, SwimlaneComponent, TemplateComponent, TopicHeaderComponent, @@ -78,14 +98,23 @@ import { Swimlane } from './swimlane/swimlane'; styleUrls: ['./template.component.scss'], }) export class TemplateComponent implements OnInit { + private readonly facets$: Observable = this.searchService + .observeFacets([defaultLrt], { includeActiveFilters: true }) + .pipe(shareReplay(1)); + constructor( private apiRequestConfig: ApiRequestConfiguration, private authService: AuthenticationService, + private collectionService: CollectionService, private dialog: MatDialog, private nodeApi: NodeService, private route: ActivatedRoute, + private searchService: SearchService, private viewService: ViewService, - ) {} + ) { + // Subscribe early, so required data will be fetched with search requests. + this.facets$.subscribe(); + } @HostBinding('style.--topic-color') topicColor: string = initialTopicColor; @@ -126,6 +155,25 @@ export class TemplateComponent implements OnInit { topicTree: 'Themenbaum', }; + // statistics related variables + searchResultCount: number = 0; + searchUrl: string = ''; + lrtMapping: Map = new Map(); + // TODO: find better option for line breaks than
+ statistics: StatisticChart[] = [ + new StatisticChart('Medien', 'collections', lrtIdsMedia), + new StatisticChart('Unterrichts
planung', 'import_contacts', lrtIdsLessonPlanning), + new StatisticChart( + 'Praxis
materialien', + 'sentiment_satisfied_alt', + lrtIdsPracticeMaterials, + ), + new StatisticChart('Quellen', 'language', lrtIdsSources), + new StatisticChart('Tools', 'home_repair_service', lrtIdsTools), + new StatisticChart('Bildungs
angebote', 'school', lrtIdsEvents), + ]; + statisticsLoaded: boolean = false; + get filterBarReady(): boolean { const sameNumberOfValues = this.selectDimensions.size === this.selectedDimensionValues.length; @@ -136,7 +184,13 @@ export class TemplateComponent implements OnInit { return this.selectedDimensionValues.map((value: MdsValue) => value.id); } - ngOnInit(): void { + async ngOnInit(): Promise { + // retrieve the learning resource types for the statistics + for (const statistic of this.statistics) { + await this.retrieveAndSetLrtVocab(statistic); + } + // retrieve the search URL + this.searchUrl = this.retrieveSearchUrl(); // set the default language for API requests this.apiRequestConfig.setLocale(initialLocaleString); // set the topic based on the query param "collectionID" @@ -145,6 +199,32 @@ export class TemplateComponent implements OnInit { .subscribe(async (params) => { // due to reconnect with queryParams, this might be called twice, thus, initializedWithParams is important if (params.collectionId && !this.initializedWithParams) { + // request the references of the collection (retrieved from wirlernenonline-theme/page-templates/template_themenseite.php L.135) + const referenceEntries: ReferenceEntries = await firstValueFrom( + this.collectionService.getReferences({ + repository: HOME_REPOSITORY, + collection: params.collectionId, + sortProperties: ['ccm:collection_ordered_position'], + sortAscending: [true], + }), + ); + // filter out deleted references + const nonDeletedReferences: CollectionReference[] = + referenceEntries.references.filter( + (ref: CollectionReference) => !!ref.originalId, + ); + // post process those + this.statistics.forEach((statistic: StatisticChart) => { + const filteredReferences: CollectionReference[] = this.filterContents( + nonDeletedReferences, + statistic.vocab, + ); + statistic.data.editorialCount = filteredReferences.length; + statistic.data.oerCount = + filteredReferences.filter((ref: CollectionReference) => this.isOer(ref)) + ?.length ?? 0; + }); + // set the topicCollectionID this.topicCollectionID.set(params.collectionId); this.initializedWithParams = true; // 0) login for local development @@ -167,6 +247,29 @@ export class TemplateComponent implements OnInit { // TODO: use a color from the palette defined in the collection // set the background to some random (but deterministic) color, just for visuals this.topicColor = this.stringToColour(this.topic()); + // perform search to retrieve the number of search results + const searchResult: SearchResultNode = await this.performSearch(this.topic()); + this.searchResultCount = searchResult.pagination.total; + + // use facets to retrieve the number of items for different learning resource types + const facets: Value[] = + searchResult.facets?.find((facet: Facet) => facet.property === defaultLrt) + ?.values ?? []; + this.statistics.forEach((statistic: StatisticChart) => { + let count: number = 0; + facets.forEach((facet: Value) => { + if (statistic.vocab.includes(facet.value)) { + count += facet.count; + } + }); + statistic.data.totalCount = count; + // TODO: This is caused by the use of different methods to calculate these counts. + // This workaround should not be necessary, if a reliable solution does exist. + if (statistic.data.totalCount < statistic.data.editorialCount) { + statistic.data.totalCount = statistic.data.editorialCount; + } + }); + this.statisticsLoaded = true; // 2) retrieve the page config node either by checking the node itself or by iterating the parents of the collectionNode this.pageConfigNode = await this.retrievePageConfigNode(this.collectionNode); @@ -251,6 +354,97 @@ export class TemplateComponent implements OnInit { }); } + /** + * Helper function to request a learning resource type with a given ID. + * + * @param lrtId + */ + private async getNewLrtList(lrtId: string): Promise { + let newLrtList: string[] = []; + if (!this.lrtMapping.get(lrtId)) { + const url: string = lrtBaseUrl + lrtId + '.json'; + try { + const response: Response = await fetch(url); + if (!response.ok) { + throw new Error(`Response status: ${response.status}`); + } + const vocabJson = await response.json(); + newLrtList.push(vocabJson.id); + + if (vocabJson.narrower?.length > 0) { + vocabJson.narrower.forEach((narrow) => { + newLrtList.push(narrow.id); + }); + } + this.lrtMapping.set(lrtId, newLrtList); + } catch (error) { + console.error(error.message); + } + } + + return this.lrtMapping.get(lrtId) ?? []; + } + + /** + * Helper function to retrieve the learning resource types including narrow elements and store them into the given statistic object. + * + * @param statistic + */ + private async retrieveAndSetLrtVocab(statistic: StatisticChart): Promise { + let vocab: string[] = []; + + for (const lrtId of statistic.relatedLrtIds) { + const lrtVocab: string[] = await this.getNewLrtList(lrtId); + vocab = vocab.concat(lrtVocab); + } + + statistic.vocab = vocab; + } + + /** + * Helper function to filter a given content array with given vocab IDs. + * + * @param contentArray + * @param vocabIds + */ + private filterContents( + contentArray: CollectionReference[], + vocabIds: string[], + ): CollectionReference[] { + const filteredContent: CollectionReference[] = []; + contentArray.forEach((content: CollectionReference) => { + if ( + content.properties?.[defaultLrt]?.some((lrtId: string) => vocabIds.includes(lrtId)) + ) { + filteredContent.push(content); + } + }); + return filteredContent; + } + + /** + * Helper function to decide, whether a given node contains OER content or not. + * + * @param node + */ + private isOer(node: CollectionReference): boolean { + const oerLicenses: string[] = ['CC_0', 'CC_BY', 'CC_BY_SA', 'PDM']; + const nodeLicense: string = node.properties?.['ccm:commonlicense_key']?.[0] ?? ''; + return oerLicenses.includes(nodeLicense); + } + + /** + * Helper function to retrieve the search URL. + */ + private retrieveSearchUrl(): string { + // take into account potential sub-paths, e.g., due to language switch + const pathNameArray: string[] = window.location.pathname.split('/'); + // example pathNameArray = [ "", "de", "template" ] + const suffix: string = + pathNameArray.length > 2 && pathNameArray[1] !== '' ? '/' + pathNameArray[1] : ''; + return window.location.origin + suffix + '/search'; + } + private checkUserAccess(node: Node): void { this.userHasEditRights.set(node.access.includes('Write')); } @@ -346,6 +540,37 @@ export class TemplateComponent implements OnInit { // TODO: Add created config nodes to the swimlane } + /** + * Helper function to perform a search for a given search term and max items. + * + * @param searchTerm + * @param maxItems + */ + private async performSearch( + searchTerm: string, + maxItems: number = 0, + ): Promise { + const criteria = [ + { + property: 'ngsearchword', + values: [searchTerm], + }, + ]; + return this.searchService + .search({ + query: 'ngsearch', + repository: HOME_REPOSITORY, + maxItems, + contentType: 'ALL', + metadataset: this.defaultMds, + body: { + criteria, + resolveCollections: true, + }, + }) + .toPromise(); + } + private async retrievePageConfigNode(node: Node): Promise { // check, whether the node itself has a pageConfigRef let pageRef = node.properties[pageConfigRefType]?.[0];