[Simon] fix: plus button in notes / tasks of child correctly opens popup again

src/app/child-dev-project/attendance/activities-overview/activities-overview.component.ts

@@ -20,7 +20,7 @@ export class ActivitiesOverviewComponent
   extends RelatedEntitiesComponent<RecurringActivity>
   implements OnInit
 {
-  entityType = RecurringActivity.ENTITY_TYPE;
+  entityCtr = RecurringActivity;
   property = "linkedGroups";
 
   titleColumn: FormFieldConfig = {

src/app/child-dev-project/attendance/activity-attendance-section/activity-attendance-section.component.html

@@ -22,7 +22,7 @@
   [records]="records"
   [customColumns]="columns"
   clickMode="none"
-  (rowClick)="showDetails($event)"
+  (entityClick)="showDetails($event)"
   [getBackgroundColor]="getBackgroundColor"
   [editable]="false"
 >

src/app/child-dev-project/attendance/attendance-details/attendance-details.component.html

@@ -118,7 +118,7 @@ <h1 mat-dialog-title>
     [records]="entity.events"
     [customColumns]="eventsColumns"
     clickMode="none"
-    (rowClick)="showEventDetails($event)"
+    (entityClick)="showEventDetails($event)"
     [editable]="false"
   >
   </app-entities-table>

src/app/child-dev-project/notes/notes-related-to-entity/notes-related-to-entity.component.html

@@ -1,11 +1,11 @@
 <app-entities-table
-  [entityType]="entityConstructor"
-  [records]="records"
-  [customColumns]="columns"
+  [entityType]="entityCtr"
+  [records]="data"
+  [customColumns]="_columns"
   [filter]="filter"
   [newRecordFactory]="newRecordFactory"
   clickMode="none"
-  (rowClick)="showNoteDetails($event)"
+  (entityClick)="showNoteDetails($event)"
   [getBackgroundColor]="getColor"
 >
 </app-entities-table>

src/app/child-dev-project/notes/notes-related-to-entity/notes-related-to-entity.component.spec.ts

@@ -143,6 +143,6 @@ describe("NotesRelatedToEntityComponent", () => {
     expect(mockChildrenService.getNotesRelatedTo).toHaveBeenCalledWith(
       component.entity.getId(true),
     );
-    expect(component.records).toEqual([n1, n2, n3]);
+    expect(component.data).toEqual([n1, n2, n3]);
   }));
 });

src/app/child-dev-project/notes/notes-related-to-entity/notes-related-to-entity.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input, OnInit } from "@angular/core";
+import { Component } from "@angular/core";
 import { Note } from "../model/note";
 import { NoteDetailsComponent } from "../note-details/note-details.component";
 import { ChildrenService } from "../../children/children.service";
@@ -13,66 +13,62 @@ import { ChildSchoolRelation } from "../../children/model/childSchoolRelation";
 import { EntityDatatype } from "../../../core/basic-datatypes/entity/entity.datatype";
 import { EntityArrayDatatype } from "../../../core/basic-datatypes/entity-array/entity-array.datatype";
 import { asArray } from "../../../utils/utils";
-import { UntilDestroy, untilDestroyed } from "@ngneat/until-destroy";
-import { applyUpdate } from "../../../core/entity/model/entity-update";
 import { EntitiesTableComponent } from "../../../core/common-components/entities-table/entities-table.component";
 import { EntityMapperService } from "../../../core/entity/entity-mapper/entity-mapper.service";
-import { ColumnConfig } from "../../../core/common-components/entity-form/FormConfig";
-import { DataFilter } from "../../../core/filter/filters/filters";
+import { FormFieldConfig } from "../../../core/common-components/entity-form/FormConfig";
+import { RelatedEntitiesComponent } from "../../../core/entity-details/related-entities/related-entities.component";
+import { EntityRegistry } from "../../../core/entity/database-entity.decorator";
+import { ScreenWidthObserver } from "../../../utils/media/screen-size-observer.service";
 
 /**
  * The component that is responsible for listing the Notes that are related to a certain entity.
  */
 @DynamicComponent("NotesRelatedToEntity")
 @DynamicComponent("NotesOfChild") // for backward compatibility
-@UntilDestroy()
 @Component({
   selector: "app-notes-related-to-entity",
   templateUrl: "./notes-related-to-entity.component.html",
   imports: [EntitiesTableComponent],
   standalone: true,
 })
-export class NotesRelatedToEntityComponent implements OnInit {
-  @Input() entity: Entity;
-  records: Array<Note>;
-
-  @Input() columns: ColumnConfig[] = [
+export class NotesRelatedToEntityComponent extends RelatedEntitiesComponent<Note> {
+  override entityCtr = Note;
+  override _columns: FormFieldConfig[] = [
     { id: "date", visibleFrom: "xs" },
     { id: "subject", visibleFrom: "xs" },
     { id: "text", visibleFrom: "md" },
     { id: "authors", visibleFrom: "md" },
     { id: "warningLevel", visibleFrom: "md" },
   ];
-  @Input() filter: DataFilter<Note> = {};
 
   /**
    * returns the color for a note; passed to the entity subrecord component
    * @param note note to get color for
    */
   getColor = (note: Note) => note?.getColor();
-  newRecordFactory: () => Note;
-
-  entityConstructor = Note;
+  newRecordFactory = this.generateNewRecordFactory();
 
   constructor(
     private childrenService: ChildrenService,
-    private entityMapper: EntityMapperService,
     private formDialog: FormDialogService,
     private filterService: FilterService,
-  ) {}
+    entityMapper: EntityMapperService,
+    entities: EntityRegistry,
+    screenWidthOberserver: ScreenWidthObserver,
+  ) {
+    super(entityMapper, entities, screenWidthOberserver);
+  }
 
-  ngOnInit(): void {
+  override ngOnInit() {
     if (this.entity.getType() === Child.ENTITY_TYPE) {
       // When displaying notes for a child, use attendance color highlighting
       this.getColor = (note: Note) => note?.getColorForId(this.entity.getId());
     }
-    this.newRecordFactory = this.generateNewRecordFactory();
-    this.initNotesOfEntity();
-    this.listenToEntityUpdates();
+    return super.ngOnInit();
   }
 
-  private async initNotesOfEntity() {
-    this.records = await this.childrenService
+  override async initData() {
+    this.data = await this.childrenService
       .getNotesRelatedTo(this.entity.getId(true))
       .then((notes: Note[]) => {
         notes.sort((a, b) => {
@@ -86,15 +82,6 @@ export class NotesRelatedToEntityComponent implements OnInit {
       });
   }
 
-  private listenToEntityUpdates() {
-    this.entityMapper
-      .receiveUpdates(this.entityConstructor)
-      .pipe(untilDestroyed(this))
-      .subscribe((next) => {
-        this.records = applyUpdate(this.records, next);
-      });
-  }
-
   generateNewRecordFactory() {
     return () => {
       const newNote = new Note(Date.now().toString());

src/app/core/common-components/entities-table/entities-table.component.html

@@ -64,7 +64,7 @@
         <app-entity-create-button
           [entityType]="_entityType"
           [newRecordFactory]="newRecordFactory"
-          (entityCreate)="showEntity($event)"
+          (entityCreate)="showEntity($event); entityClick.emit($event)"
           [iconOnly]="true"
         ></app-entity-create-button>
       </th>

src/app/core/common-components/entities-table/entities-table.component.spec.ts

@@ -183,7 +183,7 @@ describe("EntitiesTableComponent", () => {
 
   it("should notify when an entity is clicked", (done) => {
     const child = new Child();
-    component.rowClick.subscribe((entity) => {
+    component.entityClick.subscribe((entity) => {
       expect(entity).toEqual(child);
       done();
     });

src/app/core/common-components/entities-table/entities-table.component.ts

@@ -202,7 +202,10 @@ export class EntitiesTableComponent<T extends Entity> implements AfterViewInit {
   idForSavingPagination: string;
 
   @Input() clickMode: "popup" | "navigate" | "none" = "popup";
-  @Output() rowClick: EventEmitter<T> = new EventEmitter<T>();
+  /**
+   * Emits the entity being clicked in the table - or the newly created entity from the "create" button.
+   */
+  @Output() entityClick = new EventEmitter<T>();
 
   /**
    * BULK SELECT
@@ -262,7 +265,7 @@ export class EntitiesTableComponent<T extends Entity> implements AfterViewInit {
     }
 
     this.showEntity(row.record);
-    this.rowClick.emit(row.record);
+    this.entityClick.emit(row.record);
   }
 
   showEntity(entity: T) {

src/app/core/entity-details/related-entities/related-entities.component.ts

@@ -34,7 +34,9 @@ export class RelatedEntitiesComponent<E extends Entity> implements OnInit {
   @Input() entity: Entity;
 
   /** entity type of the related entities to be displayed */
-  @Input() entityType: string;
+  @Input() set entityType(value: string) {
+    this.entityCtr = this.entityRegistry.get(value) as EntityConstructor<E>;
+  }
 
   /**
    * property name of the related entities (type given in this.entityType) that holds the entity id
@@ -80,25 +82,16 @@ export class RelatedEntitiesComponent<E extends Entity> implements OnInit {
   }
 
   protected async initData() {
-    this.entityCtr = this.entityRegistry.get(
-      this.entityType,
-    ) as EntityConstructor<E>;
     this.isArray = isArrayProperty(this.entityCtr, this.property);
 
-    this.data = (await this.entityMapper.loadType<E>(this.entityType)).filter(
-      (e) =>
-        this.isArray
-          ? e[this.property]?.includes(this.entity.getId())
-          : e[this.property] === this.entity.getId(),
-    );
     this.filter = {
       ...this.filter,
       [this.property]: this.isArray
         ? { $elemMatch: { $eq: this.entity.getId() } }
         : this.entity.getId(),
     };
 
-    this.data = (await this.entityMapper.loadType<E>(this.entityType)).filter(
+    this.data = (await this.entityMapper.loadType<E>(this.entityCtr)).filter(
       (e) =>
         this.isArray
           ? e[this.property]?.includes(this.entity.getId())

src/app/core/entity-list/entity-list/entity-list.component.html

@@ -108,7 +108,7 @@ <h2>{{ title }}</h2>
     [customColumns]="columns"
     [editable]="false"
     [clickMode]="clickMode"
-    (rowClick)="onRowClick($event)"
+    (entityClick)="onRowClick($event)"
     [columnsToDisplay]="columnsToDisplay"
     [filter]="filterObj"
     [sortBy]="defaultSort"

src/app/features/matching-entities/matching-entities/matching-entities.component.html

@@ -106,7 +106,7 @@
         [customColumns]="side.columns"
         [editable]="false"
         clickMode="none"
-        (rowClick)="side.selectMatch($event)"
+        (entityClick)="side.selectMatch($event)"
         [filter]="side.filterObj"
       ></app-entities-table>
     </div>

src/app/features/todos/todos-related-to-entity/todos-related-to-entity.component.html

@@ -1,10 +1,10 @@
 <app-entities-table
   [entityType]="entityCtr"
-  [records]="entries"
-  [customColumns]="columns"
+  [records]="data"
+  [customColumns]="_columns"
   [newRecordFactory]="getNewEntryFunction()"
   clickMode="none"
   [filter]="filter"
-  (rowClick)="showDetails($event)"
+  (entityClick)="showDetails($event)"
   [getBackgroundColor]="backgroundColorFn"
 ></app-entities-table>

src/app/features/todos/todos-related-to-entity/todos-related-to-entity.component.ts

@@ -1,6 +1,5 @@
-import { Component, Input, OnInit } from "@angular/core";
+import { Component } from "@angular/core";
 import { FormFieldConfig } from "../../../core/common-components/entity-form/FormConfig";
-import { Entity } from "../../../core/entity/model/entity";
 import { Todo } from "../model/todo";
 import { DatabaseIndexingService } from "../../../core/entity/database-indexing/database-indexing.service";
 import { DynamicComponent } from "../../../core/config/dynamic-components/dynamic-component.decorator";
@@ -10,6 +9,10 @@ import { MatSlideToggleModule } from "@angular/material/slide-toggle";
 import { FormsModule } from "@angular/forms";
 import { EntitiesTableComponent } from "../../../core/common-components/entities-table/entities-table.component";
 import { DataFilter } from "../../../core/filter/filters/filters";
+import { RelatedEntitiesComponent } from "../../../core/entity-details/related-entities/related-entities.component";
+import { EntityMapperService } from "../../../core/entity/entity-mapper/entity-mapper.service";
+import { EntityRegistry } from "../../../core/entity/database-entity.decorator";
+import { ScreenWidthObserver } from "../../../utils/media/screen-size-observer.service";
 
 @DynamicComponent("TodosRelatedToEntity")
 @Component({
@@ -19,12 +22,9 @@ import { DataFilter } from "../../../core/filter/filters/filters";
   standalone: true,
   imports: [EntitiesTableComponent, MatSlideToggleModule, FormsModule],
 })
-export class TodosRelatedToEntityComponent implements OnInit {
-  entries: Todo[];
-  entityCtr = Todo;
-
-  @Input() entity: Entity;
-  @Input() columns: FormFieldConfig[] = [
+export class TodosRelatedToEntityComponent extends RelatedEntitiesComponent<Todo> {
+  override entityCtr = Todo;
+  override _columns: FormFieldConfig[] = [
     { id: "deadline" },
     { id: "subject" },
     { id: "startDate" },
@@ -38,10 +38,8 @@ export class TodosRelatedToEntityComponent implements OnInit {
   /** the property name of the Todo that contains the ids referencing related entities */
   private referenceProperty: keyof Todo & string = "relatedEntities";
 
-  showInactive: boolean;
-
   // TODO: filter by current user as default in UX? --> custom filter component or some kind of variable interpolation?
-  filter: DataFilter<Todo> = { isActive: true };
+  override filter: DataFilter<Todo> = { isActive: true };
   backgroundColorFn = (r: Todo) => {
     if (!r.isActive) {
       return "#e0e0e0";
@@ -53,7 +51,11 @@ export class TodosRelatedToEntityComponent implements OnInit {
   constructor(
     private formDialog: FormDialogService,
     private dbIndexingService: DatabaseIndexingService,
+    entityMapper: EntityMapperService,
+    entities: EntityRegistry,
+    screenWidthOberserver: ScreenWidthObserver,
   ) {
+    super(entityMapper, entities, screenWidthOberserver);
     // TODO: move this generic index creation into schema
     this.dbIndexingService.generateIndexOnProperty(
       "todo_index",
@@ -63,8 +65,8 @@ export class TodosRelatedToEntityComponent implements OnInit {
     );
   }
 
-  async ngOnInit() {
-    this.entries = await this.loadDataFor(this.entity.getId(true));
+  override async initData() {
+    this.data = await this.loadDataFor(this.entity.getId(true));
   }
 
   private async loadDataFor(entityId: string): Promise<Todo[]> {