Tutorial groups: Redesign overview page

src/main/webapp/app/course/tutorial-groups/shared/tutorial-group-detail/tutorial-group-detail.component.html

@@ -5,10 +5,144 @@ <h2>{{ tutorialGroup.title }}</h2>
         <ng-template [ngTemplateOutlet]="header" [ngTemplateOutletContext]="{ $implicit: tutorialGroup }" />
         <hr />
     }
-    @if (tutorialDetailSections) {
-        <jhi-detail-overview-list [sections]="tutorialDetailSections" />
-    }
-    <div class="mt-1">
+    <div class="row align-items-stretch">
+        <div class="col-12 col-lg-4">
+            <jhi-icon-card [headerIcon]="faUserCheck" headline="artemisApp.entities.tutorialGroup.teachingAssistant">
+                <div class="text-center">
+                    <div class="mb-2">
+                        @if (tutorialGroup.teachingAssistantImageUrl) {
+                            <img class="tutorial-group-detail-tutor-image rounded-3" [alt]="tutorialGroup.teachingAssistantName" [src]="tutorialGroup.teachingAssistantImageUrl" />
+                        } @else {
+                            <strong class="tutorial-group-detail-tutor-default-image rounded-3" [ngStyle]="{ 'background-color': tutorDefaultProfilePictureHue }">{{
+                                tutorInitials
+                            }}</strong>
+                        }
+                    </div>
+
+                    <div>
+                        <span class="text-secondary" jhiTranslate="artemisApp.entities.tutorialGroup.name"></span><span class="text-secondary">:</span>
+                        {{ tutorialGroup.teachingAssistantName }}
+                    </div>
+
+                    @if (tutorialGroup.channel && isMessagingEnabled) {
+                        <div>
+                            <span class="text-secondary" jhiTranslate="artemisApp.entities.tutorialGroup.channel"></span><span class="text-secondary">:</span>
+                            @if (tutorialGroup.channel.isMember) {
+                                <a [routerLink]="['/courses', course.id!, 'communication']" [queryParams]="{ conversationId: tutorialGroup.channel.id }">
+                                    {{ tutorialGroup.channel.name }}
+                                </a>
+                            } @else {
+                                <span> {{ tutorialGroup.channel.name }} </span>
+                            }
+                        </div>
+                    }
+                </div>
+            </jhi-icon-card>
+        </div>
+
+        <div class="col-12 col-lg-4 mt-3 mt-lg-0">
+            <jhi-icon-card [headerIcon]="faPercent" headline="artemisApp.entities.tutorialGroup.utilization">
+                <div>
+                    <div>
+                        <span class="text-secondary" jhiTranslate="artemisApp.entities.tutorialGroup.averageAttendanceDetail"></span><span class="text-secondary">:</span>
+                        {{ (tutorialGroup.averageAttendance && Math.round(tutorialGroup.averageAttendance)) ?? '-' }}
+                        <fa-icon
+                            class="text-secondary"
+                            [icon]="faQuestionCircle"
+                            ngbTooltip="{{ 'artemisApp.entities.tutorialGroup.averageAttendanceHelpDetail' | artemisTranslate }}"
+                        />
+                    </div>
+
+                    <div>
+                        <span class="text-secondary" jhiTranslate="artemisApp.entities.tutorialGroup.capacity"></span><span class="text-secondary">:</span>
+                        {{ tutorialGroup.capacity }}
+                    </div>
+
+                    <div>
+                        <span class="text-secondary" jhiTranslate="artemisApp.entities.tutorialGroup.registrations"></span><span class="text-secondary">:</span>
+                        {{ !tutorialGroup.numberOfRegisteredUsers || tutorialGroup.numberOfRegisteredUsers === 0 ? '-' : tutorialGroup.numberOfRegisteredUsers }}
+                    </div>
+
+                    <div class="mt-2">
+                        <span class="text-secondary" jhiTranslate="artemisApp.entities.tutorialGroup.utilization"></span><span class="text-secondary">:</span>
+                        <fa-icon class="text-secondary" [icon]="faQuestionCircle" ngbTooltip="{{ 'artemisApp.entities.tutorialGroup.utilizationHelpDetail' | artemisTranslate }}" />
+
+                        @if (utilization) {
+                            <div class="progress" role="progressbar" [attr.aria-valuenow]="utilization" aria-valuemin="0" aria-valuemax="100">
+                                <div
+                                    class="progress-bar"
+                                    [ngClass]="{ 'bg-warning': utilization >= 60 && utilization < 90, 'bg-danger': utilization >= 90 }"
+                                    [ngStyle]="{ width: utilization + '%' }"
+                                >
+                                    {{ utilization }}%
+                                </div>
+                            </div>
+                        } @else {
+                            <div class="progress" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
+                                <div class="progress-bar bg-secondary" style="width: 100%">-</div>
+                            </div>
+                        }
+                    </div>
+                </div>
+            </jhi-icon-card>
+        </div>
+
+        <div class="col-12 col-lg-4 mt-3 mt-lg-0">
+            <jhi-icon-card [headerIcon]="faCircleInfo" headline="artemisApp.entities.tutorialGroup.information">
+                <div>
+                    <div>
+                        <span class="text-secondary" jhiTranslate="artemisApp.entities.tutorialGroup.language"></span><span class="text-secondary">:</span>
+                        {{ tutorialGroup.language }}
+                    </div>
+
+                    <div>
+                        <span class="text-secondary" jhiTranslate="artemisApp.entities.tutorialGroup.campus"></span><span class="text-secondary">:</span>
+                        {{ tutorialGroup.campus }}
+                    </div>
+
+                    <div>
+                        <span class="text-secondary" jhiTranslate="artemisApp.entities.tutorialGroup.schedule"></span><span class="text-secondary">:</span>
+                        {{ getTutorialTimeSlotString() }}
+                    </div>
+
+                    <div class="mt-2">
+                        <span
+                            class="text-secondary"
+                            [jhiTranslate]="
+                                tutorialGroup.isOnline ? 'artemisApp.forms.scheduleForm.locationInput.labelOnline' : 'artemisApp.forms.scheduleForm.locationInput.labelOffline'
+                            "
+                        ></span
+                        ><span class="text-secondary">:</span>
+
+                        {{ tutorialGroup.tutorialGroupSchedule?.location }}
+                    </div>
+
+                    <div>
+                        @if (tutorialGroup.isOnline) {
+                            <fa-icon class="text-success" [icon]="faCircle" />
+                            <span class="text-success" jhiTranslate="artemisApp.entities.tutorialGroup.isOnline"></span>
+                        } @else {
+                            <fa-icon class="text-secondary" [icon]="faCircleXmark" />
+                            <span class="text-secondary" jhiTranslate="artemisApp.entities.tutorialGroup.isNotOnline"></span>
+                        }
+                    </div>
+                </div>
+            </jhi-icon-card>
+        </div>
+
+        @if (formattedAdditionalInformation) {
+            <div class="col-12 mt-3">
+                <div class="card">
+                    <div class="card-body">
+                        <div><span class="text-secondary" jhiTranslate="artemisApp.entities.tutorialGroup.additionalInformation"></span><span class="text-secondary">:</span></div>
+
+                        <div class="markdown-preview" [innerHTML]="formattedAdditionalInformation"></div>
+                    </div>
+                </div>
+            </div>
+        }
+    </div>
+    <div class="mt-3">
         <strong jhiTranslate="artemisApp.entities.tutorialGroup.sessions"></strong>
     </div>
     @if (sessions && sessions.length) {

src/main/webapp/app/course/tutorial-groups/shared/tutorial-group-detail/tutorial-group-detail.component.scss

@@ -1,3 +1,5 @@
+$tutor-image-size: 4.5rem;
+
 .tutorial-group-detail {
     .scrollbar {
         position: relative;
@@ -8,4 +10,25 @@
     .table-wrapper-scroll-y {
         display: block;
     }
+
+    .markdown-preview {
+        margin-bottom: -1rem;
+    }
+}
+
+.tutorial-group-detail-tutor-image {
+    width: $tutor-image-size;
+    height: $tutor-image-size;
+    object-fit: cover;
+}
+
+.tutorial-group-detail-tutor-default-image {
+    width: $tutor-image-size;
+    height: $tutor-image-size;
+    font-size: 2rem;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    background-color: var(--gray-400);
+    color: var(--white);
 }

src/main/webapp/app/course/tutorial-groups/shared/tutorial-group-detail/tutorial-group-detail.component.ts

@@ -5,10 +5,8 @@ import { SafeHtml } from '@angular/platform-browser';
 import { ArtemisMarkdownService } from 'app/shared/markdown.service';
 import { getDayTranslationKey } from '../weekdays';
 import { TutorialGroupSession, TutorialGroupSessionStatus } from 'app/entities/tutorial-group/tutorial-group-session.model';
-import { faQuestionCircle } from '@fortawesome/free-solid-svg-icons';
-import { DetailOverviewSection, DetailType } from 'app/detail-overview-list/detail-overview-list.component';
 import { TranslateService } from '@ngx-translate/core';
-import { Detail } from 'app/detail-overview-list/detail.model';
+import { faCircle, faCircleInfo, faCircleXmark, faPercent, faQuestionCircle, faUserCheck } from '@fortawesome/free-solid-svg-icons';
 import dayjs from 'dayjs/esm';
 import { SortService } from 'app/shared/service/sort.service';
 import { getInitialsFromString } from 'app/utils/text.utils';
@@ -32,12 +30,22 @@ export class TutorialGroupDetailComponent implements OnChanges {
     course: Course;
     formattedAdditionalInformation?: SafeHtml;
 
-    faQuestionCircle = faQuestionCircle;
     readonly Math = Math;
 
     sessions: TutorialGroupSession[] = [];
 
-    tutorialDetailSections: DetailOverviewSection[];
+    tutorInitials: string;
+    tutorDefaultProfilePictureHue: string;
+    isMessagingEnabled: boolean;
+    utilization: number | undefined;
+
+    // Icons
+    faUserCheck = faUserCheck;
+    faPercent = faPercent;
+    faCircleInfo = faCircleInfo;
+    faQuestionCircle = faQuestionCircle;
+    faCircle = faCircle;
+    faCircleXmark = faCircleXmark;
 
     constructor(
         private artemisMarkdownService: ArtemisMarkdownService,
@@ -60,7 +68,7 @@ export class TutorialGroupDetailComponent implements OnChanges {
                 this.changeDetectorRef.detectChanges();
             }
         }
-        this.getTutorialDetailSections();
+        this.getTutorialDetail();
     }
 
     getTutorialTimeSlotString(): string | undefined {
@@ -79,80 +87,17 @@ export class TutorialGroupDetailComponent implements OnChanges {
         return `${day} ${start}-${end}, ${repetition}`;
     }
 
-    getTutorialDetailSections() {
+    getTutorialDetail() {
         const tutorialGroup = this.tutorialGroup;
-        const tutorialDetails: Detail[] = [
-            { type: DetailType.Link, title: 'artemisApp.entities.tutorialGroup.course', data: { text: tutorialGroup.courseTitle, routerLink: ['../..'] } },
-            { type: DetailType.Text, title: 'artemisApp.entities.tutorialGroup.title', data: { text: tutorialGroup.title } },
-            { type: DetailType.Text, title: 'artemisApp.entities.tutorialGroup.teachingAssistant', data: { text: tutorialGroup.teachingAssistantName } },
-            tutorialGroup.teachingAssistantImageUrl
-                ? {
-                      type: DetailType.Image,
-                      title: 'artemisApp.entities.tutorialGroup.profilePicture',
-                      data: { imageUrl: tutorialGroup.teachingAssistantImageUrl, altText: 'Profile picture of ' + tutorialGroup.teachingAssistantName },
-                  }
-                : {
-                      type: DetailType.DefaultProfilePicture,
-                      title: 'artemisApp.entities.tutorialGroup.profilePicture',
-                      data: {
-                          color: getBackgroundColorHue(tutorialGroup.teachingAssistantId ? tutorialGroup.teachingAssistantId.toString() : 'default'),
-                          initials: getInitialsFromString(tutorialGroup.teachingAssistantName ?? 'NA'),
-                      },
-                  },
-            {
-                type: DetailType.Text,
-                title: 'artemisApp.entities.tutorialGroup.utilization',
-                titleHelpText: 'artemisApp.entities.tutorialGroup.utilizationHelpDetail',
-                data: { text: tutorialGroup.averageAttendance && tutorialGroup.capacity && Math.round((tutorialGroup.averageAttendance / tutorialGroup.capacity) * 100) },
-            },
-            {
-                type: DetailType.Text,
-                title: 'artemisApp.entities.tutorialGroup.averageAttendanceDetail',
-                titleHelpText: 'artemisApp.entities.tutorialGroup.averageAttendanceHelpDetail',
-                data: { text: tutorialGroup.averageAttendance && Math.round(tutorialGroup.averageAttendance) },
-            },
-            { type: DetailType.Text, title: 'artemisApp.entities.tutorialGroup.capacity', data: { text: tutorialGroup.capacity } },
-            { type: DetailType.Text, title: 'artemisApp.entities.tutorialGroup.registrations', data: { text: tutorialGroup.numberOfRegisteredUsers } },
-            { type: DetailType.Boolean, title: 'artemisApp.entities.tutorialGroup.isOnline', data: { boolean: tutorialGroup.isOnline } },
-            { type: DetailType.Text, title: 'artemisApp.entities.tutorialGroup.language', data: { text: tutorialGroup.language } },
-            { type: DetailType.Text, title: 'artemisApp.entities.tutorialGroup.campus', data: { text: tutorialGroup.campus } },
-            { type: DetailType.Markdown, title: 'artemisApp.entities.tutorialGroup.additionalInformation', data: { innerHtml: this.formattedAdditionalInformation } },
-            { type: DetailType.Text, title: 'artemisApp.entities.tutorialGroup.schedule', data: { text: this.getTutorialTimeSlotString() } },
-        ];
-
-        // inserting optional details in reversed order, so no index calculation is needed
-        if (tutorialGroup.isOnline) {
-            tutorialDetails.splice(12, 0, {
-                type: DetailType.Text,
-                title: 'artemisApp.forms.scheduleForm.locationInput.labelOnline',
-                data: { text: tutorialGroup.tutorialGroupSchedule?.location },
-            });
-        } else {
-            tutorialDetails.splice(12, 0, {
-                type: DetailType.Text,
-                title: 'artemisApp.forms.scheduleForm.locationInput.labelOffline',
-                data: { text: tutorialGroup.tutorialGroupSchedule?.location },
-            });
-        }
 
-        if (tutorialGroup.channel && isMessagingEnabled(this.course)) {
-            tutorialDetails.splice(2, 0, {
-                type: DetailType.Link,
-                title: 'artemisApp.entities.tutorialGroup.channel',
-                data: {
-                    text: tutorialGroup.channel.name,
-                    routerLink: tutorialGroup.channel.isMember ? ['/courses', this.course.id!, 'communication'] : undefined,
-                    queryParams: { conversationId: tutorialGroup.channel.id },
-                },
-            });
+        this.tutorDefaultProfilePictureHue = getBackgroundColorHue(tutorialGroup.teachingAssistantId ? tutorialGroup.teachingAssistantId.toString() : 'default');
+        this.tutorInitials = getInitialsFromString(tutorialGroup.teachingAssistantName ?? 'NA');
+        this.isMessagingEnabled = isMessagingEnabled(this.course);
+        if (tutorialGroup.averageAttendance && tutorialGroup.capacity) {
+            this.utilization = Math.round((tutorialGroup.averageAttendance / tutorialGroup.capacity) * 100);
+        } else {
+            this.utilization = undefined;
         }
-
-        this.tutorialDetailSections = [
-            {
-                headline: 'artemisApp.pages.courseTutorialGroupDetail.sections.general',
-                details: tutorialDetails,
-            },
-        ];
     }
 
     recalculateAttendanceDetails() {
@@ -166,6 +111,6 @@ export class TutorialGroupDetailComponent implements OnChanges {
             this.tutorialGroup.averageAttendance = Math.round(averageAttendance);
         }
 
-        this.getTutorialDetailSections();
+        this.getTutorialDetail();
     }
 }

src/main/webapp/app/course/tutorial-groups/shared/tutorial-groups-shared.module.ts

@@ -13,9 +13,10 @@ import { TutorialGroupUtilizationIndicatorComponent } from './tutorial-group-uti
 import { RemoveSecondsPipe } from 'app/course/tutorial-groups/shared/remove-seconds.pipe';
 import { MeetingPatternPipe } from 'app/course/tutorial-groups/shared/meeting-pattern.pipe';
 import { DetailModule } from 'app/detail-overview-list/detail.module';
+import { IconCardComponent } from 'app/shared/icon-card/icon-card.component';
 
 @NgModule({
-    imports: [ArtemisSharedModule, RouterModule, ArtemisSidePanelModule, VerticalProgressBarModule, DetailModule],
+    imports: [ArtemisSharedModule, RouterModule, ArtemisSidePanelModule, VerticalProgressBarModule, DetailModule, IconCardComponent],
     declarations: [
         TutorialGroupsTableComponent,
         TutorialGroupDetailComponent,

src/main/webapp/app/shared/icon-card/icon-card.component.html

@@ -0,0 +1,12 @@
+<div class="icon-card card h-100">
+    <div class="card-body">
+        <div class="text-center d-flex align-items-center justify-content-center">
+            <fa-icon size="lg" class="text-secondary me-2" [icon]="headerIcon()" />
+            <strong class="icon-card-title text-secondary mb-0" [jhiTranslate]="headline()"></strong>
+        </div>
+
+        <hr />
+
+        <ng-content></ng-content>
+    </div>
+</div>

src/main/webapp/app/shared/icon-card/icon-card.component.ts

@@ -0,0 +1,18 @@
+import { Component, input } from '@angular/core';
+import { faCircleInfo } from '@fortawesome/free-solid-svg-icons';
+import { IconDefinition } from '@fortawesome/fontawesome-common-types';
+import { ArtemisSharedCommonModule } from 'app/shared/shared-common.module';
+import { ArtemisSharedPipesModule } from 'app/shared/pipes/shared-pipes.module';
+
+@Component({
+    selector: 'jhi-icon-card',
+    templateUrl: './icon-card.component.html',
+    styleUrl: './icon-card.component.scss',
+    standalone: true,
+    imports: [ArtemisSharedCommonModule, ArtemisSharedPipesModule],
+})
+export class IconCardComponent {
+    headerIcon = input<IconDefinition>(faCircleInfo);
+
+    headline = input<string>('Title');
+}

src/main/webapp/i18n/de/tutorialGroups.json

@@ -55,7 +55,10 @@
                 "averageAttendanceDetail": "Durchschnittliche Anwesenheit",
                 "averageAttendanceHelpDetail": "Durchschnittliche Anwesenheit in den letzten drei Sitzungen. Falls keine Anwesenheit eingetragen wurde, wird die entsprechende Sitzung ignoriert und die Berechnung mit zwei, bzw. einer Sitzung durchgeführt.",
                 "profilePicture": "Tutor:in Profilbild",
-                "profilePictureAlt": "Profilbild von {{ user }}"
+                "profilePictureAlt": "Profilbild von {{ user }}",
+                "name": "Name",
+                "information": "Information",
+                "isNotOnline": "Nicht Online"
             },
             "tutorialGroupSchedule": {
                 "dayOfWeek": "Wochentag",

src/main/webapp/i18n/en/tutorialGroups.json

@@ -55,7 +55,10 @@
                 "averageAttendanceDetail": "Average Attendance",
                 "averageAttendanceHelpDetail": "Average attendance in the last three sessions. If no attendance is entered, the corresponding session is ignored and the calculation is performed with two or one session.",
                 "profilePicture": "Tutor Profile Picture",
-                "profilePictureAlt": "Profile picture of {{ user }}"
+                "profilePictureAlt": "Profile picture of {{ user }}",
+                "name": "Name",
+                "information": "Information",
+                "isNotOnline": "Not Online"
             },
             "tutorialGroupSchedule": {
                 "dayOfWeek": "Day of Week",