General: Enhance exercise buttons with exercise type icons

src/main/webapp/app/entities/exercise.model.ts

@@ -152,6 +152,10 @@ export abstract class Exercise implements BaseEntity {
     }
 }
 
+/**
+ * Get an icon for the type of the given exercise.
+ * @param exerciseType {ExerciseType}
+ */
 export function getIcon(exerciseType?: ExerciseType): IconProp {
     if (!exerciseType) {
         return faQuestion as IconProp;

src/main/webapp/app/exam/manage/exams/exam-exercise-import/exam-exercise-import.component.html

@@ -90,7 +90,7 @@ <h4 class="form-check d-flex justify-content-center">
                             </td>
                             <td>{{ exercise.id }}</td>
                             <td>
-                                <fa-icon size="2x" [icon]="getExerciseIcon(exercise)"></fa-icon>
+                                <fa-icon size="2x" [icon]="getExerciseIcon(exercise.type)"></fa-icon>
                             </td>
                             <td>
                                 <input

src/main/webapp/app/exam/manage/exams/exam-exercise-import/exam-exercise-import.component.ts

@@ -5,6 +5,7 @@ import { Exercise, ExerciseType } from 'app/entities/exercise.model';
 import { ExerciseGroup } from 'app/entities/exercise-group.model';
 import { IconProp } from '@fortawesome/fontawesome-svg-core';
 import { SHORT_NAME_PATTERN } from 'app/shared/constants/input.constants';
+import { getIcon } from 'app/entities/exercise.model';
 
 @Component({
     selector: 'jhi-exam-exercise-import',
@@ -37,6 +38,8 @@ export class ExamExerciseImportComponent implements OnInit {
     faKeyboard = faKeyboard;
     faFont = faFont;
 
+    getExerciseIcon = getIcon;
+
     constructor() {}
 
     ngOnInit(): void {
@@ -235,23 +238,4 @@ export class ExamExerciseImportComponent implements OnInit {
         });
         return validConfiguration;
     }
-
-    /**
-     * Get an icon for the type of the given exercise.
-     * @param exercise {Exercise}
-     */
-    getExerciseIcon(exercise: Exercise): IconProp {
-        switch (exercise.type) {
-            case ExerciseType.QUIZ:
-                return this.faCheckDouble;
-            case ExerciseType.FILE_UPLOAD:
-                return this.faFileUpload;
-            case ExerciseType.MODELING:
-                return this.faProjectDiagram;
-            case ExerciseType.PROGRAMMING:
-                return this.faKeyboard;
-            default:
-                return this.faFont;
-        }
-    }
 }

src/main/webapp/app/exam/manage/exercise-groups/exercise-groups.component.html

@@ -45,81 +45,81 @@ <h5 class="group-title font-weight-bold mb-0">{{ exerciseGroup.title }}</h5>
             <div class="d-flex flex-column justify-content-center">
                 <div class="btn-group flex-btn-group-container">
                     <div class="btn-group-vertical me-1 mb-1" *jhiHasAnyAuthority="['ROLE_ADMIN', 'ROLE_INSTRUCTOR', 'ROLE_EDITOR']" style="justify-content: end">
-                        <a *ngIf="course?.isAtLeastEditor" (click)="openImportModal(exerciseGroup, exerciseType.FILE_UPLOAD)" class="btn btn-info btn-sm me-1 mb-1">
-                            <fa-icon [icon]="faFileImport"></fa-icon>
-                            <fa-icon class="d-xl-none" [icon]="faFileUpload"></fa-icon>
-                            <span class="d-none d-xl-inline">{{ 'artemisApp.fileUploadExercise.home.importLabel' | artemisTranslate }}</span>
-                        </a>
                         <a
                             *ngIf="course?.isAtLeastEditor"
                             [routerLink]="[exerciseGroup.id, 'file-upload-exercises', 'new']"
                             class="btn btn-info btn-sm me-1 mb-1"
                             style="max-height: 44%"
                         >
                             <fa-icon [icon]="faPlus"></fa-icon>
-                            <fa-icon class="d-xl-none" [icon]="faFileUpload"></fa-icon>
                             <span class="d-none d-xl-inline">{{ 'artemisApp.fileUploadExercise.home.createLabel' | artemisTranslate }}</span>
+                            <fa-icon [icon]="faFileUpload"></fa-icon>
                         </a>
-                    </div>
-                    <div class="btn-group-vertical me-1 mb-1" *jhiHasAnyAuthority="['ROLE_ADMIN', 'ROLE_INSTRUCTOR', 'ROLE_EDITOR']" style="justify-content: end">
-                        <a *ngIf="course?.isAtLeastEditor" (click)="openImportModal(exerciseGroup, exerciseType.QUIZ)" class="btn btn-info btn-sm me-1 mb-1">
+                        <a *ngIf="course?.isAtLeastEditor" (click)="openImportModal(exerciseGroup, exerciseType.FILE_UPLOAD)" class="btn btn-info btn-sm me-1 mb-1">
                             <fa-icon [icon]="faFileImport"></fa-icon>
-                            <fa-icon class="d-xl-none" [icon]="faCheckDouble"></fa-icon>
-                            <span class="d-none d-xl-inline">{{ 'artemisApp.quizExercise.home.importLabel' | artemisTranslate }}</span>
+                            <span class="d-none d-xl-inline">{{ 'artemisApp.fileUploadExercise.home.importLabel' | artemisTranslate }}</span>
+                            <fa-icon [icon]="faFileUpload"></fa-icon>
                         </a>
+                    </div>
+                    <div class="btn-group-vertical me-1 mb-1" *jhiHasAnyAuthority="['ROLE_ADMIN', 'ROLE_INSTRUCTOR', 'ROLE_EDITOR']" style="justify-content: end">
                         <a
                             *ngIf="course?.isAtLeastEditor"
                             [routerLink]="[exerciseGroup.id, 'quiz-exercises', 'new']"
                             class="add-quiz-exercise btn btn-info btn-sm me-1 mb-1"
                             style="max-height: 44%"
                         >
                             <fa-icon [icon]="faPlus"></fa-icon>
-                            <fa-icon class="d-xl-none" [icon]="faCheckDouble"></fa-icon>
                             <span class="d-none d-xl-inline">{{ 'artemisApp.quizExercise.home.createLabel' | artemisTranslate }}</span>
+                            <fa-icon [icon]="faCheckDouble"></fa-icon>
                         </a>
-                    </div>
-                    <div class="btn-group-vertical me-1 mb-1" *jhiHasAnyAuthority="['ROLE_ADMIN', 'ROLE_INSTRUCTOR', 'ROLE_EDITOR']">
-                        <a *ngIf="course?.isAtLeastEditor" (click)="openImportModal(exerciseGroup, exerciseType.TEXT)" class="btn btn-info btn-sm me-1 mb-1">
+                        <a *ngIf="course?.isAtLeastEditor" (click)="openImportModal(exerciseGroup, exerciseType.QUIZ)" class="btn btn-info btn-sm me-1 mb-1">
                             <fa-icon [icon]="faFileImport"></fa-icon>
-                            <fa-icon class="d-xl-none" [icon]="faFont"></fa-icon>
-                            <span class="d-none d-xl-inline">{{ 'artemisApp.textExercise.home.importLabel' | artemisTranslate }}</span>
+                            <span class="d-none d-xl-inline">{{ 'artemisApp.quizExercise.home.importLabel' | artemisTranslate }}</span>
+                            <fa-icon [icon]="faCheckDouble"></fa-icon>
                         </a>
+                    </div>
+                    <div class="btn-group-vertical me-1 mb-1" *jhiHasAnyAuthority="['ROLE_ADMIN', 'ROLE_INSTRUCTOR', 'ROLE_EDITOR']">
                         <a *ngIf="course?.isAtLeastEditor" [routerLink]="[exerciseGroup.id, 'text-exercises', 'new']" class="add-text-exercise btn btn-info btn-sm me-1 mb-1">
                             <fa-icon [icon]="faPlus"></fa-icon>
-                            <fa-icon class="d-xl-none" [icon]="faFont"></fa-icon>
                             <span class="d-none d-xl-inline">{{ 'artemisApp.textExercise.home.createLabel' | artemisTranslate }}</span>
+                            <fa-icon [icon]="faFont"></fa-icon>
                         </a>
-                    </div>
-                    <div class="btn-group-vertical me-1 mb-1" *jhiHasAnyAuthority="['ROLE_ADMIN', 'ROLE_INSTRUCTOR', 'ROLE_EDITOR']">
-                        <a *ngIf="course?.isAtLeastEditor" (click)="openImportModal(exerciseGroup, exerciseType.MODELING)" class="btn btn-info btn-sm me-1 mb-1">
+                        <a *ngIf="course?.isAtLeastEditor" (click)="openImportModal(exerciseGroup, exerciseType.TEXT)" class="btn btn-info btn-sm me-1 mb-1">
                             <fa-icon [icon]="faFileImport"></fa-icon>
-                            <fa-icon class="d-xl-none" [icon]="faProjectDiagram"></fa-icon>
-                            <span class="d-none d-xl-inline">{{ 'artemisApp.modelingExercise.home.importLabel' | artemisTranslate }}</span>
+                            <span class="d-none d-xl-inline">{{ 'artemisApp.textExercise.home.importLabel' | artemisTranslate }}</span>
+                            <fa-icon [icon]="faFont"></fa-icon>
                         </a>
+                    </div>
+                    <div class="btn-group-vertical me-1 mb-1" *jhiHasAnyAuthority="['ROLE_ADMIN', 'ROLE_INSTRUCTOR', 'ROLE_EDITOR']">
                         <a
                             *ngIf="course?.isAtLeastEditor"
                             [routerLink]="[exerciseGroup.id, 'modeling-exercises', 'new']"
                             class="add-modeling-exercise btn btn-info btn-sm me-1 mb-1"
                         >
                             <fa-icon [icon]="faPlus"></fa-icon>
-                            <fa-icon class="d-xl-none" [icon]="faProjectDiagram"></fa-icon>
                             <span class="d-none d-xl-inline">{{ 'artemisApp.modelingExercise.home.createLabel' | artemisTranslate }}</span>
+                            <fa-icon [icon]="faProjectDiagram"></fa-icon>
                         </a>
-                    </div>
-                    <div class="btn-group-vertical me-1 mb-1" *jhiHasAnyAuthority="['ROLE_ADMIN', 'ROLE_INSTRUCTOR', 'ROLE_EDITOR']">
-                        <a *ngIf="course?.isAtLeastEditor" (click)="openImportModal(exerciseGroup, exerciseType.PROGRAMMING)" class="btn btn-info btn-sm me-1 mb-1">
+                        <a *ngIf="course?.isAtLeastEditor" (click)="openImportModal(exerciseGroup, exerciseType.MODELING)" class="btn btn-info btn-sm me-1 mb-1">
                             <fa-icon [icon]="faFileImport"></fa-icon>
-                            <fa-icon class="d-xl-none" [icon]="faKeyboard"></fa-icon>
-                            <span class="d-none d-xl-inline">{{ 'artemisApp.programmingExercise.home.importLabel' | artemisTranslate }}</span>
+                            <span class="d-none d-xl-inline">{{ 'artemisApp.modelingExercise.home.importLabel' | artemisTranslate }}</span>
+                            <fa-icon [icon]="faProjectDiagram"></fa-icon>
                         </a>
+                    </div>
+                    <div class="btn-group-vertical me-1 mb-1" *jhiHasAnyAuthority="['ROLE_ADMIN', 'ROLE_INSTRUCTOR', 'ROLE_EDITOR']">
                         <a
                             *ngIf="course?.isAtLeastEditor"
                             [routerLink]="[exerciseGroup.id, 'programming-exercises', 'new']"
                             class="add-programming-exercise btn btn-info btn-sm me-1 mb-1"
                         >
                             <fa-icon [icon]="faPlus"></fa-icon>
-                            <fa-icon class="d-xl-none" [icon]="faKeyboard"></fa-icon>
                             <span class="d-none d-xl-inline">{{ 'artemisApp.programmingExercise.home.createLabel' | artemisTranslate }}</span>
+                            <fa-icon [icon]="faKeyboard"></fa-icon>
+                        </a>
+                        <a *ngIf="course?.isAtLeastEditor" (click)="openImportModal(exerciseGroup, exerciseType.PROGRAMMING)" class="btn btn-info btn-sm me-1 mb-1">
+                            <fa-icon [icon]="faFileImport"></fa-icon>
+                            <span class="d-none d-xl-inline">{{ 'artemisApp.programmingExercise.home.importLabel' | artemisTranslate }}</span>
+                            <fa-icon [icon]="faKeyboard"></fa-icon>
                         </a>
                     </div>
                     <div class="btn-group-vertical me-1 mb-1">

src/main/webapp/app/exercises/programming/manage/programming-exercise-create-buttons.component.html

@@ -8,6 +8,7 @@
     >
         <fa-icon [icon]="faPlus"></fa-icon>
         <span class="hidden-sm-down" jhiTranslate="artemisApp.programmingExercise.home.createLabel">Create Programming Exercise</span>
+        <fa-icon [icon]="faKeyboard"></fa-icon>
     </button>
     <button
         id="import-programming-exercise"
@@ -17,5 +18,6 @@
     >
         <fa-icon [icon]="faFileImport"></fa-icon>
         <span class="hidden-sm-down" jhiTranslate="artemisApp.programmingExercise.home.importLabel">Import new Programming Exercise</span>
+        <fa-icon [icon]="faKeyboard"></fa-icon>
     </button>
 </div>

src/main/webapp/app/exercises/programming/manage/programming-exercise-create-buttons.component.ts

@@ -1,7 +1,7 @@
 import { Component, Input } from '@angular/core';
 import { Course } from 'app/entities/course.model';
 import { FeatureToggle } from 'app/shared/feature-toggle/feature-toggle.service';
-import { faFileImport, faPlus } from '@fortawesome/free-solid-svg-icons';
+import { faFileImport, faKeyboard, faPlus } from '@fortawesome/free-solid-svg-icons';
 import { ExerciseImportWrapperComponent } from 'app/exercises/shared/import/exercise-import-wrapper/exercise-import-wrapper.component';
 import { ExerciseType } from 'app/entities/exercise.model';
 import { ProgrammingExercise } from 'app/entities/programming-exercise.model';
@@ -20,6 +20,7 @@ export class ProgrammingExerciseCreateButtonsComponent {
 
     faPlus = faPlus;
     faFileImport = faFileImport;
+    faKeyboard = faKeyboard;
 
     constructor(private router: Router, private modalService: NgbModal) {}
 

src/main/webapp/app/exercises/quiz/manage/quiz-exercise-create-buttons.component.html

@@ -7,14 +7,17 @@
     >
         <fa-icon [icon]="faPlus"></fa-icon>
         <span jhiTranslate="artemisApp.quizExercise.home.createLabel">Create new Quiz</span>
+        <fa-icon [icon]="faCheckDouble"></fa-icon>
     </button>
     <button id="create-dd-quiz" class="btn btn-primary text-truncate mb-1 me-1" [routerLink]="['/course-management', course.id, 'apollon-diagrams']">
         <fa-icon [icon]="faPlus"></fa-icon>
         <span jhiTranslate="artemisApp.quizExercise.home.createModelDragAndDrop">Create new Drag and Drop Model Quiz</span>
+        <fa-icon [icon]="faCheckDouble"></fa-icon>
     </button>
     <button id="import-quiz-exercise" class="btn btn-primary jh-create-entity create-quiz-exercise text-truncate mb-1 me-1" (click)="openImportModal()">
         <fa-icon [icon]="faFileImport"></fa-icon>
         <span class="hidden-sm-down" jhiTranslate="artemisApp.quizExercise.home.importLabel">Import Quiz</span>
+        <fa-icon [icon]="faCheckDouble"></fa-icon>
     </button>
     <button
         *ngIf="quizExercisesCount"
@@ -23,5 +26,6 @@
     >
         <fa-icon [icon]="faFileExport"></fa-icon>
         <span jhiTranslate="artemisApp.quizExercise.home.exportLabel">Export Quiz Exercises</span>
+        <fa-icon [icon]="faCheckDouble"></fa-icon>
     </button>
 </div>

src/main/webapp/app/exercises/quiz/manage/quiz-exercise-create-buttons.component.ts

@@ -1,6 +1,6 @@
 import { Component, Input } from '@angular/core';
 import { Course } from 'app/entities/course.model';
-import { faFileExport, faFileImport, faPlus } from '@fortawesome/free-solid-svg-icons';
+import { faCheckDouble, faFileExport, faFileImport, faPlus } from '@fortawesome/free-solid-svg-icons';
 import { ExerciseImportWrapperComponent } from 'app/exercises/shared/import/exercise-import-wrapper/exercise-import-wrapper.component';
 import { ExerciseType } from 'app/entities/exercise.model';
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
@@ -19,6 +19,7 @@ export class QuizExerciseCreateButtonsComponent {
     faPlus = faPlus;
     faFileImport = faFileImport;
     faFileExport = faFileExport;
+    faCheckDouble = faCheckDouble;
 
     constructor(private router: Router, private modalService: NgbModal) {}
 

src/main/webapp/app/exercises/shared/manage/exercise-create-buttons.component.html

@@ -7,9 +7,11 @@
     >
         <fa-icon [icon]="faPlus"></fa-icon>
         <span [jhiTranslate]="'artemisApp.' + translationLabel + 'Exercise.home.createLabel'">Create new Exercise</span>
+        <fa-icon [icon]="getExerciseTypeIcon(exerciseType)"></fa-icon>
     </button>
     <button [id]="'import-' + exerciseType + '-exercise'" class="btn btn-primary jh-create-entity text-truncate mb-1 me-1" (click)="openImportModal()">
         <fa-icon [icon]="faFileImport"></fa-icon>
         <span [jhiTranslate]="'artemisApp.' + translationLabel + 'Exercise.home.importLabel'">Import Exercise</span>
+        <fa-icon [icon]="getExerciseTypeIcon(exerciseType)"></fa-icon>
     </button>
 </div>

src/main/webapp/app/exercises/shared/manage/exercise-create-buttons.component.ts

@@ -2,6 +2,7 @@ import { Component, Input, OnInit } from '@angular/core';
 import { Course } from 'app/entities/course.model';
 import { faFileImport, faPlus } from '@fortawesome/free-solid-svg-icons';
 import { ExerciseImportWrapperComponent } from 'app/exercises/shared/import/exercise-import-wrapper/exercise-import-wrapper.component';
+import { getIcon } from 'app/entities/exercise.model';
 import { Exercise, ExerciseType } from 'app/entities/exercise.model';
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
 import { Router } from '@angular/router';
@@ -19,6 +20,8 @@ export class ExerciseCreateButtonsComponent implements OnInit {
     faPlus = faPlus;
     faFileImport = faFileImport;
 
+    getExerciseTypeIcon = getIcon;
+
     constructor(private router: Router, private modalService: NgbModal) {}
 
     ngOnInit(): void {

src/test/javascript/spec/component/exam/manage/exam-exercise-import.component.spec.ts

@@ -293,10 +293,10 @@ describe('Exam Exercise Import Component', () => {
     });
 
     it('should correctly return the Exercise Icon', () => {
-        expect(component.getExerciseIcon(modelingExercise)).toEqual(faProjectDiagram);
-        expect(component.getExerciseIcon(textExercise)).toEqual(faFont);
-        expect(component.getExerciseIcon(programmingExercise)).toEqual(faKeyboard);
-        expect(component.getExerciseIcon(quizExercise)).toEqual(faCheckDouble);
-        expect(component.getExerciseIcon(fileUploadExercise)).toEqual(faFileUpload);
+        expect(component.getExerciseIcon(modelingExercise.type)).toEqual(faProjectDiagram);
+        expect(component.getExerciseIcon(textExercise.type)).toEqual(faFont);
+        expect(component.getExerciseIcon(programmingExercise.type)).toEqual(faKeyboard);
+        expect(component.getExerciseIcon(quizExercise.type)).toEqual(faCheckDouble);
+        expect(component.getExerciseIcon(fileUploadExercise.type)).toEqual(faFileUpload);
     });
 });