Finish source display in all views.

ls1intum · May 20, 2024 · a1a34b5 · a1a34b5
1 parent 140f07c
commit a1a34b5
Show file tree

Hide file tree

Showing 13 changed files with 86 additions and 46 deletions.
diff --git a/...in/standardized-competencies/import/admin-import-standardized-competencies.component.html b/...in/standardized-competencies/import/admin-import-standardized-competencies.component.html
@@ -38,7 +38,12 @@ <h6 class="mb-0">{{ competency.title }}</h6>
             </jhi-knowledge-area-tree>
             @if (selectedCompetency) {
                 <div style="background-color: var(--overview-light-background-color)" class="card d-flex flex-grow-1 w-100 h-100 p-3 ms-1">
-                    <jhi-standardized-competency-detail [competency]="selectedCompetency" [knowledgeAreaTitle]="knowledgeAreaTitle" (onClose)="closeCompetencyDetails()" />
+                    <jhi-standardized-competency-detail
+                        [competency]="selectedCompetency"
+                        [knowledgeAreaTitle]="knowledgeAreaTitle"
+                        [sourceString]="sourceString"
+                        (onClose)="closeCompetencyDetails()"
+                    />
                 </div>
             }
         </div>

diff --git a/...dmin/standardized-competencies/import/admin-import-standardized-competencies.component.ts b/...dmin/standardized-competencies/import/admin-import-standardized-competencies.component.ts
@@ -6,6 +6,7 @@ import {
     KnowledgeAreasForImportDTO,
     StandardizedCompetencyForTree,
     convertToKnowledgeAreaForTree,
+    sourceToString,
 } from 'app/entities/competency/standardized-competency.model';
 import { MAX_FILE_SIZE } from 'app/shared/constants/input.constants';
 import { AlertService } from 'app/core/util/alert.service';
@@ -34,6 +35,7 @@ export class AdminImportStandardizedCompetenciesComponent {
     protected selectedCompetency?: StandardizedCompetencyForTree;
     //the title of the knowledge area belonging to the selected competency
     protected knowledgeAreaTitle = '';
+    protected sourceString = '';
     protected importData?: KnowledgeAreasForImportDTO;
     protected importCount?: ImportCount;
     protected dataSource = new MatTreeNestedDataSource<KnowledgeAreaForTree>();
@@ -111,11 +113,14 @@ export class AdminImportStandardizedCompetenciesComponent {
     }
 
     protected openCompetencyDetails(competency: StandardizedCompetencyForTree, knowledgeAreaTitle: string) {
+        const source = this.importData?.sources.find((source) => source.id === competency.sourceId);
+        this.sourceString = source ? sourceToString(source) : '';
         this.knowledgeAreaTitle = knowledgeAreaTitle;
         this.selectedCompetency = competency;
     }
 
     protected closeCompetencyDetails() {
+        this.sourceString = '';
         this.knowledgeAreaTitle = '';
         this.selectedCompetency = undefined;
     }

diff --git a/...in/webapp/app/admin/standardized-competencies/standardized-competency-edit.component.html b/...in/webapp/app/admin/standardized-competencies/standardized-competency-edit.component.html
@@ -81,19 +81,15 @@ <h4 jhiTranslate="artemisApp.standardizedCompetency.details.titleCreate"></h4>
         </div>
         <div class="form-group">
             <label for="source-select" jhiTranslate="artemisApp.standardizedCompetency.model.source"></label>
-            @if (isEditing) {
-                <select id="source-select" class="form-select" formControlName="sourceId">
-                    <option [ngValue]="undefined"></option>
-                    @for (source of sources; track source.id) {
-                        <option [ngValue]="source.id">
-                            <!-- TODO: what to display here. Author aswell? -->
-                            {{ source.title }}
-                        </option>
-                    }
-                </select>
-            } @else {
-                <!-- TODO: add the correct source display component here.-->
-            }
+            <select id="source-select" class="form-select" formControlName="sourceId">
+                <option [ngValue]="undefined"></option>
+                @for (source of sources; track source.id) {
+                    <option [ngValue]="source.id">
+                        <!-- omit uri to keep the select short -->
+                        {{ source.author ? source.author + '. ' : '' }}"{{ source.title }}"
+                    </option>
+                }
+            </select>
         </div>
     </div>
     @if (isEditing) {

diff --git a/...main/webapp/app/admin/standardized-competencies/standardized-competency-edit.component.ts b/...main/webapp/app/admin/standardized-competencies/standardized-competency-edit.component.ts
@@ -56,7 +56,7 @@ export class StandardizedCompetencyEditComponent {
 
     private _isEditing: boolean;
     private _competency: StandardizedCompetencyDTO;
-    form: FormGroup<{
+    protected form: FormGroup<{
         title: FormControl<string | undefined>;
         description: FormControl<string | undefined>;
         taxonomy: FormControl<CompetencyTaxonomy | undefined>;
@@ -65,10 +65,10 @@ export class StandardizedCompetencyEditComponent {
     }>;
 
     // icons
-    readonly faPencil = faPencil;
-    readonly faTrash = faTrash;
-    readonly faBan = faBan;
-    readonly faSave = faSave;
+    protected readonly faPencil = faPencil;
+    protected readonly faTrash = faTrash;
+    protected readonly faBan = faBan;
+    protected readonly faSave = faSave;
     // other constants
     protected readonly ButtonSize = ButtonSize;
     protected readonly ButtonType = ButtonType;

diff --git a/...ebapp/app/admin/standardized-competencies/standardized-competency-management.component.ts b/...ebapp/app/admin/standardized-competencies/standardized-competency-management.component.ts
@@ -69,10 +69,10 @@ export class StandardizedCompetencyManagementComponent extends StandardizedCompe
         const getKnowledgeAreasObservable = this.standardizedCompetencyService.getAllForTreeView();
         const getSourcesObservable = this.standardizedCompetencyService.getSources();
         forkJoin([getKnowledgeAreasObservable, getSourcesObservable]).subscribe({
-            next: ([knowledgeAreaResponse, sourceResponse]) => {
-                this.sourcesForSelect = sourceResponse.body!;
+            next: ([knowledgeAreasResponse, sourcesResponse]) => {
+                this.sourcesForSelect = sourcesResponse.body!;
 
-                const knowledgeAreas = knowledgeAreaResponse.body!;
+                const knowledgeAreas = knowledgeAreasResponse.body!;
                 const knowledgeAreasForTree = knowledgeAreas.map((knowledgeArea) => convertToKnowledgeAreaForTree(knowledgeArea));
                 this.dataSource.data = knowledgeAreasForTree;
                 this.treeControl.dataNodes = knowledgeAreasForTree;
@@ -85,7 +85,6 @@ export class StandardizedCompetencyManagementComponent extends StandardizedCompe
             },
             error: (errorResponse: HttpErrorResponse) => onError(this.alertService, errorResponse),
         });
-        //TODO: add a component that displays the source text nicely
     }
 
     ngOnDestroy(): void {

diff --git a/...s/import-standardized-competencies/course-import-standardized-competencies.component.html b/...s/import-standardized-competencies/course-import-standardized-competencies.component.html
@@ -38,6 +38,7 @@ <h6 class="mb-0">{{ competency.title }}</h6>
                 <div style="background-color: var(--overview-light-background-color)" class="card d-flex flex-grow-1 w-100 h-100 p-3 ms-1">
                     <jhi-standardized-competency-detail
                         [competency]="selectedCompetency"
+                        [sourceString]="sourceString"
                         [knowledgeAreaTitle]="selectedCompetency.knowledgeAreaTitle ?? ''"
                         (onClose)="closeCompetencyDetails()"
                     />

diff --git a/...ies/import-standardized-competencies/course-import-standardized-competencies.component.ts b/...ies/import-standardized-competencies/course-import-standardized-competencies.component.ts
@@ -1,11 +1,18 @@
 import { getIcon } from 'app/entities/competency.model';
 import { ButtonSize, ButtonType } from 'app/shared/components/button.component';
-import { KnowledgeAreaDTO, KnowledgeAreaForTree, StandardizedCompetencyDTO, StandardizedCompetencyForTree } from 'app/entities/competency/standardized-competency.model';
+import {
+    KnowledgeAreaDTO,
+    KnowledgeAreaForTree,
+    Source,
+    StandardizedCompetencyDTO,
+    StandardizedCompetencyForTree,
+    sourceToString,
+} from 'app/entities/competency/standardized-competency.model';
 import { faBan, faDownLeftAndUpRightToCenter, faFileImport, faSort, faTrash, faUpRightAndDownLeftFromCenter } from '@fortawesome/free-solid-svg-icons';
 import { ActivatedRoute, Router } from '@angular/router';
 import { Component, HostListener, OnInit } from '@angular/core';
 import { onError } from 'app/shared/util/global.utils';
-import { map } from 'rxjs';
+import { forkJoin, map } from 'rxjs';
 import { HttpErrorResponse } from '@angular/common/http';
 import { AlertService } from 'app/core/util/alert.service';
 import { StandardizedCompetencyFilterPageComponent } from 'app/shared/standardized-competencies/standardized-competency-filter-page.component';
@@ -32,7 +39,9 @@ interface KnowledgeAreaForImport extends KnowledgeAreaForTree {
 export class CourseImportStandardizedCompetenciesComponent extends StandardizedCompetencyFilterPageComponent implements OnInit, ComponentCanDeactivate {
     protected selectedCompetencies: StandardizedCompetencyForImport[] = [];
     protected selectedCompetency?: StandardizedCompetencyForImport;
+    protected sourceString = '';
     private courseId: number;
+    private sources: Source[];
     protected isLoading = false;
     protected isSubmitted = false;
 
@@ -62,30 +71,36 @@ export class CourseImportStandardizedCompetenciesComponent extends StandardizedC
 
     ngOnInit(): void {
         this.isLoading = true;
-        this.standardizedCompetencyService
-            .getAllForTreeView()
-            .pipe(map((response) => response.body!))
-            .subscribe({
-                next: (knowledgeAreas) => {
-                    const knowledgeAreasForImport = knowledgeAreas.map((knowledgeArea) => this.convertToKnowledgeAreaForImport(knowledgeArea));
-                    this.dataSource.data = knowledgeAreasForImport;
-                    this.treeControl.dataNodes = knowledgeAreasForImport;
-                    knowledgeAreasForImport.forEach((knowledgeArea) => {
-                        this.addSelfAndDescendantsToMap(knowledgeArea);
-                        this.addSelfAndDescendantsToSelectArray(knowledgeArea);
-                    });
-                    this.isLoading = false;
-                },
-                error: (errorResponse: HttpErrorResponse) => onError(this.alertService, errorResponse),
-            });
+        const getKnowledgeAreasObservable = this.standardizedCompetencyService.getAllForTreeView();
+        const getSourcesObservable = this.standardizedCompetencyService.getSources();
+        forkJoin([getKnowledgeAreasObservable, getSourcesObservable]).subscribe({
+            next: ([knowledgeAreasResponse, sourcesResponse]) => {
+                const knowledgeAreas = knowledgeAreasResponse.body!;
+                const knowledgeAreasForImport = knowledgeAreas.map((knowledgeArea) => this.convertToKnowledgeAreaForImport(knowledgeArea));
+                this.dataSource.data = knowledgeAreasForImport;
+                this.treeControl.dataNodes = knowledgeAreasForImport;
+                knowledgeAreasForImport.forEach((knowledgeArea) => {
+                    this.addSelfAndDescendantsToMap(knowledgeArea);
+                    this.addSelfAndDescendantsToSelectArray(knowledgeArea);
+                });
+
+                this.sources = sourcesResponse.body!;
+
+                this.isLoading = false;
+            },
+            error: (errorResponse: HttpErrorResponse) => onError(this.alertService, errorResponse),
+        });
         this.courseId = Number(this.activatedRoute.snapshot.paramMap.get('courseId'));
     }
 
     protected openCompetencyDetails(competency: StandardizedCompetencyForImport) {
+        const source = this.sources.find((source) => source.id === competency.sourceId);
+        this.sourceString = source ? sourceToString(source) : '';
         this.selectedCompetency = competency;
     }
 
     protected closeCompetencyDetails() {
+        this.sourceString = '';
         this.selectedCompetency = undefined;
     }
 

diff --git a/src/main/webapp/app/entities/competency/standardized-competency.model.ts b/src/main/webapp/app/entities/competency/standardized-competency.model.ts
@@ -83,6 +83,18 @@ export interface StandardizedCompetencyForTree extends StandardizedCompetencyDTO
     isVisible: boolean;
 }
 
+export function sourceToString(source: Source) {
+    const author = source.author ?? '';
+    const title = source.title ?? '';
+    const uri = source.uri ?? '';
+
+    if (!author) {
+        return `"${title}". ${uri}`;
+    } else {
+        return `${author}. "${title}". ${uri}`;
+    }
+}
+
 export function convertToStandardizedCompetencyForTree(competencyDTO: StandardizedCompetencyDTO, isVisible: boolean) {
     const competencyForTree: StandardizedCompetencyForTree = { ...competencyDTO, isVisible: isVisible };
     return competencyForTree;

diff --git a/...webapp/app/shared/standardized-competencies/standardized-competency-detail.component.html b/...webapp/app/shared/standardized-competencies/standardized-competency-detail.component.html
@@ -8,7 +8,7 @@ <h4 jhiTranslate="artemisApp.standardizedCompetency.details.title"></h4>
     <div class="detail-body d-flex flex-column">
         <div class="detail-row">
             <h5 jhiTranslate="artemisApp.standardizedCompetency.model.title"></h5>
-            <p class="mb-0" id="competency-detail-title">{{ competency.title }}</p>
+            <p class="mb-0">{{ competency.title }}</p>
         </div>
         <div class="detail-row">
             <h5 jhiTranslate="artemisApp.standardizedCompetency.model.description"></h5>
@@ -20,8 +20,11 @@ <h5 jhiTranslate="artemisApp.standardizedCompetency.model.taxonomy"></h5>
         </div>
         <div class="detail-row">
             <h5 jhiTranslate="artemisApp.standardizedCompetency.model.knowledgeArea"></h5>
-            <p class="mb-0" id="competency-detail-knowledge-area">{{ knowledgeAreaTitle }}</p>
+            <p class="mb-0">{{ knowledgeAreaTitle }}</p>
+        </div>
+        <div class="detail-row">
+            <h5 jhiTranslate="artemisApp.standardizedCompetency.model.source"></h5>
+            <p class="mb-0">{{ sourceString }}</p>
         </div>
-        <!-- TODO: add source handling in follow-up PR -->
     </div>
 </div>
diff --git a/...n/webapp/app/shared/standardized-competencies/standardized-competency-detail.component.ts b/...n/webapp/app/shared/standardized-competencies/standardized-competency-detail.component.ts
@@ -11,6 +11,7 @@ export class StandardizedCompetencyDetailComponent {
     // values for the knowledge area select
     @Input({ required: true }) competency: StandardizedCompetencyDTO;
     @Input() knowledgeAreaTitle = '';
+    @Input() sourceString = '';
 
     @Output() onClose = new EventEmitter<void>();
 

diff --git a/src/main/webapp/i18n/de/standardizedCompetency.json b/src/main/webapp/i18n/de/standardizedCompetency.json
@@ -7,7 +7,8 @@
                 "description": "Beschreibung",
                 "taxonomy": "Taxonomie",
                 "knowledgeArea": "Wissensgebiet",
-                "version": "Version"
+                "version": "Version",
+                "source": "Quelle"
             },
             "details": {
                 "title": "Standardisierte Kompetenz (Details)",

diff --git a/src/main/webapp/i18n/en/standardizedCompetency.json b/src/main/webapp/i18n/en/standardizedCompetency.json
@@ -7,7 +7,8 @@
                 "description": "Description",
                 "taxonomy": "Taxonomy",
                 "knowledgeArea": "Knowledge Area",
-                "version": "Version"
+                "version": "Version",
+                "source": "Source"
             },
             "details": {
                 "title": "Standardized Competency Details",

diff --git a/...mponent/standardized-competencies/detail/standardized-competency-detail-stub.component.ts b/...mponent/standardized-competencies/detail/standardized-competency-detail-stub.component.ts
@@ -9,6 +9,7 @@ export class StandardizedCompetencyDetailStubComponent {
     // values for the knowledge area select
     @Input({ required: true }) competency: StandardizedCompetencyDTO;
     @Input() knowledgeAreaTitle = '';
+    @Input() sourceString = '';
 
     @Output() onClose = new EventEmitter<void>();
 }