Add various fixes for students lists #712 #713

- Display & sort by lastname, firstname
- Remove heading margin
- Adjust margin after header
- Use ';' as emails separator in mailto link
- Show companies on class list as well
- Rename search placeholder
- Invert study course list sort arrow
- Visit dossier addresses instead of absences tab
- Switch presence control grid from breakpoints to CSS grid

src/app/events/components/events-students-course-entry/events-students-course-entry.component.html

@@ -6,10 +6,10 @@
 ></bkd-avatar>
 <a
   class="name"
-  [title]="name()"
+  [title]="entry().name"
   [routerLink]="link()"
   [queryParams]="linkParams()"
-  >{{ name() }}</a
+  >{{ entry().name }}</a
 >
 <div class="study-class">
   {{ multipleStudyClasses() ? entry().studyClass : "" }}

src/app/events/components/events-students-course-entry/events-students-course-entry.component.spec.ts

@@ -19,8 +19,7 @@ describe("EventsStudentsCourseEntryComponent", () => {
 
     fixture.componentRef.setInput("entry", {
       id: 1,
-      firstName: "Jane",
-      lastName: "Doe",
+      name: "Doe Jane",
       email: "[email protected]",
       studyClass: "26a",
       company: "Coop Genossenschaft",
@@ -31,9 +30,9 @@ describe("EventsStudentsCourseEntryComponent", () => {
 
   it("renders firstname/lastname with link to dossier including returnlink", () => {
     const link = element.querySelector<HTMLAnchorElement>("a.name");
-    expect(link?.textContent).toContain("Jane Doe");
+    expect(link?.textContent).toContain("Doe Jane");
     expect(link?.href).toContain(
-      "student/1/absences?returnparams=returnlink%3D%252Fevents%252Fcurrent",
+      "student/1/addresses?returnparams=returnlink%3D%252Fevents%252Fcurrent",
     );
   });
 

src/app/events/components/events-students-course-entry/events-students-course-entry.component.ts

@@ -21,14 +21,10 @@ export class EventsStudentsCourseEntryComponent {
   multipleStudyClasses = input(false);
   returnLink = input<Option<string>>(null);
 
-  name = computed<string>(
-    () => `${this.entry().firstName} ${this.entry().lastName}`,
-  );
-
   link = computed<RouterLink["routerLink"]>(() => [
     "student",
     this.entry().id,
-    "absences",
+    "addresses",
   ]);
   linkParams = computed<Params>(() => {
     const returnlink = this.returnLink();

src/app/events/components/events-students-course-list/events-students-course-list.component.scss

@@ -7,7 +7,7 @@
 
 section.list {
   width: calc(100% + 1px); // Hide right border
-  margin-top: 2 * $spacer;
+  margin-top: 1 * $spacer;
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
 }

src/app/events/components/events-students-header/events-students-header.component.html

@@ -15,7 +15,7 @@ <h1>{{ title() }}</h1>
 <bkd-resettable-input
   class="search"
   [value]="searchTerm()"
-  [placeholder]="'events-students.search-by-name' | translate"
+  [placeholder]="'events-students.search-placeholder' | translate"
   [label]="'events-students.search' | translate"
   (valueChange)="searchTerm.set($event)"
 ></bkd-resettable-input>

src/app/events/components/events-students-header/events-students-header.component.scss

@@ -1,5 +1,9 @@
 @import "../../../../bootstrap-variables";
 
+h1 {
+  margin-bottom: 0;
+}
+
 .search {
   margin-top: $spacer;
   display: flex;

src/app/events/components/events-students-list/events-students-list.component.spec.ts

@@ -38,32 +38,28 @@ describe("EventsStudentsListComponent", () => {
               const entries: ReadonlyArray<StudentEntry> = [
                 {
                   id: 10,
-                  firstName: "Paul",
-                  lastName: "McCartney",
+                  name: "McCartney Paul",
                   email: "[email protected]",
                   studyClass: "26a",
                   company: "Apple Records – Abbey Road Studios",
                 },
                 {
                   id: 20,
-                  firstName: "John",
-                  lastName: "Lennon",
+                  name: "Lennon John",
                   email: "[email protected]",
                   studyClass: "26a",
                   company: undefined,
                 },
                 {
                   id: 30,
-                  firstName: "George",
-                  lastName: "Harrison",
+                  name: "Harrison George",
                   email: "[email protected]",
                   studyClass: "26c",
                   company: undefined,
                 },
                 {
                   id: 40,
-                  firstName: "Ringo",
-                  lastName: "Starr",
+                  name: "Starr Ringo",
                   email: "[email protected]",
                   studyClass: "26c",
                   company: undefined,
@@ -104,10 +100,10 @@ describe("EventsStudentsListComponent", () => {
         element.querySelector("bkd-events-students-course-list"),
       ).not.toBeNull();
       expect(element.querySelector("h1")?.textContent).toContain("English-S3");
-      expect(element.textContent).toContain("Paul McCartney");
-      expect(element.textContent).toContain("John Lennon");
-      expect(element.textContent).toContain("George Harrison");
-      expect(element.textContent).toContain("Ringo Starr");
+      expect(element.textContent).toContain("McCartney Paul");
+      expect(element.textContent).toContain("Lennon John");
+      expect(element.textContent).toContain("Harrison George");
+      expect(element.textContent).toContain("Starr Ringo");
     });
 
     it("renders placeholder if no entries are available", () => {
@@ -129,10 +125,10 @@ describe("EventsStudentsListComponent", () => {
         element.querySelector("bkd-events-students-study-course-list"),
       ).not.toBeNull();
       expect(element.querySelector("h1")?.textContent).toContain("English-S3");
-      expect(element.textContent).toContain("Paul McCartney");
-      expect(element.textContent).toContain("John Lennon");
-      expect(element.textContent).toContain("George Harrison");
-      expect(element.textContent).toContain("Ringo Starr");
+      expect(element.textContent).toContain("McCartney Paul");
+      expect(element.textContent).toContain("Lennon John");
+      expect(element.textContent).toContain("Harrison George");
+      expect(element.textContent).toContain("Starr Ringo");
     });
 
     it("renders placeholder if no entries are available", () => {

src/app/events/components/events-students-study-course-entry/events-students-study-course-entry.component.html

@@ -1,4 +1,4 @@
 <a class="name" [routerLink]="link()" [queryParams]="linkParams()">{{
-  name()
+  entry().name
 }}</a>
 <div class="status">{{ entry().status }}</div>

src/app/events/components/events-students-study-course-entry/events-students-study-course-entry.component.spec.ts

@@ -17,8 +17,7 @@ describe("EventsStudentsStudyCourseEntryComponent", () => {
     element = fixture.debugElement.nativeElement;
     fixture.componentRef.setInput("entry", {
       id: 1,
-      firstName: "Jane",
-      lastName: "Doe",
+      name: "Doe Jane",
       email: "[email protected]",
       studyClasses: ["26a", "26c"],
       company: "Coop Genossenschaft",
@@ -33,7 +32,7 @@ describe("EventsStudentsStudyCourseEntryComponent", () => {
 
   it("renders firstname/lastname with link to dossier including returnlink", () => {
     const link = element.querySelector<HTMLAnchorElement>("a.name");
-    expect(link?.textContent).toBe("Jane Doe");
+    expect(link?.textContent).toBe("Doe Jane");
     expect(link?.href).toContain(
       "student/1/absences?returnparams=returnlink%3D%252Fevents%252Fcurrent",
     );

src/app/events/components/events-students-study-course-entry/events-students-study-course-entry.component.ts

@@ -19,9 +19,6 @@ export class EventsStudentsStudyCourseEntryComponent {
   entry = input.required<StudentEntry>();
   returnLink = input<Option<string>>(null);
 
-  name = computed<string>(
-    () => `${this.entry().firstName} ${this.entry().lastName}`,
-  );
   link = computed<RouterLink["routerLink"]>(() => [
     "student",
     this.entry().id,

src/app/events/components/events-students-study-course-list/events-students-study-course-list.component.scss

@@ -4,14 +4,9 @@
   cursor: pointer;
   display: flex;
   align-items: center;
-  border-top: 1px solid $border-color;
   border-bottom: 2px solid $border-color;
 }
 
-section.list {
-  margin-top: 2 * $spacer;
-}
-
 .name {
   padding: $spacer;
 }

src/app/events/components/events-students-study-course-list/events-students-study-course-list.component.ts

@@ -43,6 +43,6 @@ export class EventsStudentsStudyCourseListComponent {
   getSortDirectionCharacter(
     sortCriteria: SortCriteria<PrimarySortKey>,
   ): string {
-    return sortCriteria.ascending ? "↓" : "↑";
+    return sortCriteria.ascending ? "↑" : "↓";
   }
 }