fix: permissions are correctly applied in popup form

src/app/child-dev-project/schools/activities-overview/activities-overview.component.html

@@ -1,5 +1,5 @@
 <app-entity-subrecord
-  [records]="records"
+  [(records)]="records"
   [columns]="columns"
   [getBackgroundColor]="null"
   [newRecordFactory]="generateNewRecordFactory()"

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

@@ -1,4 +1,9 @@
-import { ComponentFixture, TestBed } from "@angular/core/testing";
+import {
+  ComponentFixture,
+  fakeAsync,
+  TestBed,
+  tick,
+} from "@angular/core/testing";
 import { RecurringActivity } from "app/child-dev-project/attendance/model/recurring-activity";
 import { EntityMapperService } from "app/core/entity/entity-mapper.service";
 import {
@@ -10,6 +15,8 @@ import { Subject } from "rxjs";
 import { School } from "../model/school";
 
 import { ActivitiesOverviewComponent } from "./activities-overview.component";
+import { SchoolsModule } from "../schools.module";
+import { MockedTestingModule } from "../../../utils/mocked-testing.module";
 
 describe("ActivitiesOverviewComponent", () => {
   let component: ActivitiesOverviewComponent;
@@ -20,14 +27,15 @@ describe("ActivitiesOverviewComponent", () => {
   beforeEach(async () => {
     entityMapper = mockEntityMapper();
     await TestBed.configureTestingModule({
-      declarations: [ActivitiesOverviewComponent],
+      imports: [SchoolsModule, MockedTestingModule.withState()],
       providers: [{ provide: EntityMapperService, useValue: entityMapper }],
     }).compileComponents();
   });
 
   beforeEach(() => {
     fixture = TestBed.createComponent(ActivitiesOverviewComponent);
     component = fixture.componentInstance;
+    component.entity = new School();
     fixture.detectChanges();
   });
 
@@ -55,20 +63,24 @@ describe("ActivitiesOverviewComponent", () => {
     expect(newRecurringActivity().linkedGroups).toEqual(["school1"]);
   });
 
-  it("should remove the recurring activity from the table view if the current school is removed as a group of this recurring activity", async () => {
+  it("should remove the recurring activity from the table view if the current school is removed as a group of this recurring activity", fakeAsync(() => {
     const school1 = new School("school1");
     const activity1 = new RecurringActivity();
     activity1.linkedGroups = ["school1"];
     const activity2 = new RecurringActivity();
-    activity1.linkedGroups = ["school1", "school2", "school3"];
+    activity2.linkedGroups = ["school1", "school2", "school3"];
     entityMapper.addAll([activity1, activity2]);
     const subject = new Subject<UpdatedEntity<RecurringActivity>>();
     spyOn(entityMapper, "receiveUpdates").and.returnValue(subject);
-    await component.onInitFromDynamicConfig({ entity: school1 });
+    component.onInitFromDynamicConfig({ entity: school1 });
+    tick();
+
+    expect(component.records).toEqual([activity1, activity2]);
 
     activity2.linkedGroups = ["school2", "school3"];
     subject.next({ entity: activity2, type: "update" });
+    tick();
 
     expect(component.records).toEqual([activity1]);
-  });
+  }));
 });

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

@@ -6,6 +6,7 @@ import { EntityMapperService } from "app/core/entity/entity-mapper.service";
 import { Entity } from "app/core/entity/model/entity";
 import { DynamicComponent } from "app/core/view/dynamic-components/dynamic-component.decorator";
 import { OnInitDynamicComponent } from "app/core/view/dynamic-components/on-init-dynamic-component.interface";
+import { delay } from "rxjs";
 
 @DynamicComponent("ActivitiesOverview")
 @Component({
@@ -24,7 +25,6 @@ export class ActivitiesOverviewComponent implements OnInitDynamicComponent {
   entity: Entity;
   records: RecurringActivity[] = [];
   listConfig: EntityListConfig;
-  activityConstructor = RecurringActivity;
 
   constructor(private entityMapper: EntityMapperService) {}
 
@@ -37,8 +37,11 @@ export class ActivitiesOverviewComponent implements OnInitDynamicComponent {
     this.records = (
       await this.entityMapper.loadType<RecurringActivity>(RecurringActivity)
     ).filter((activity) => activity.linkedGroups.includes(this.entity.getId()));
+
     this.entityMapper
       .receiveUpdates(RecurringActivity)
+      // using short delay to make sure the EntitySubrecord's `receiveUpdates` code is executed before this
+      .pipe(delay(0))
       .subscribe((updateEntity) => {
         if (updateEntity.type === "update") {
           this.records = this.records.filter((activity) =>

src/app/core/entity-components/entity-subrecord/entity-subrecord/entity-subrecord.component.ts

@@ -1,8 +1,10 @@
 import {
   Component,
+  EventEmitter,
   Input,
   OnChanges,
   OnInit,
+  Output,
   SimpleChanges,
   ViewChild,
 } from "@angular/core";
@@ -72,9 +74,9 @@ export class EntitySubrecordComponent<T extends Entity>
   _columns: FormFieldConfig[] = [];
   filteredColumns: FormFieldConfig[] = [];
 
-  /** data to be displayed */
+  /** data to be displayed, can also be used as two-way-binding */
   @Input()
-  set records(value: Array<T>) {
+  set records(value: T[]) {
     this._records = value;
     this.recordsDataSource.data = this._records.map((rec) => {
       return {
@@ -86,7 +88,9 @@ export class EntitySubrecordComponent<T extends Entity>
         new (this._records[0].getConstructor() as EntityConstructor<T>)();
     }
   }
-  private _records: Array<T> = [];
+  private _records: T[] = [];
+
+  @Output() recordsChange = new EventEmitter<T[]>();
 
   /**
    * factory method to create a new instance of the displayed Entity type
@@ -318,11 +322,13 @@ export class EntitySubrecordComponent<T extends Entity>
     this.records = this._records.filter(
       (rec) => rec.getId() !== deleted.getId()
     );
+    this.recordsChange.emit(this._records);
   }
 
   private addToTable(record: T) {
     // use setter so datasource is also updated
     this.records = [record].concat(this._records);
+    this.recordsChange.emit(this._records);
   }
 
   /**

src/app/core/entity-components/entity-subrecord/row-details/row-details.component.html

@@ -60,16 +60,14 @@
   <button
     mat-raised-button
     (click)="save()"
-    *appDisabledEntityOperation="{
-      operation: 'update',
-      entity: data.entity
-    }"
+    [disabled]="form.disabled"
     i18n="Save button for forms"
   >
     Save
   </button>
 
   <button
+    *ngIf="editMode === 'update'"
     mat-icon-button
     [matMenuTriggerFor]="additional"
   >

src/app/core/entity-components/entity-subrecord/row-details/row-details.component.spec.ts

@@ -16,6 +16,7 @@ import { EntitySubrecordModule } from "../entity-subrecord.module";
 import { FontAwesomeTestingModule } from "@fortawesome/angular-fontawesome/testing";
 import { EntityFormService } from "../../entity-form/entity-form.service";
 import { AlertService } from "../../../alerts/alert.service";
+import { EntityAbility } from "../../../permissions/ability/entity-ability";
 
 describe("RowDetailsComponent", () => {
   let component: RowDetailsComponent<any>;
@@ -37,6 +38,7 @@ describe("RowDetailsComponent", () => {
         { provide: MatDialogRef, useValue: {} },
       ],
     }).compileComponents();
+    spyOn(TestBed.inject(EntityAbility), "cannot").and.returnValue(true);
   });
 
   beforeEach(() => {
@@ -77,4 +79,8 @@ describe("RowDetailsComponent", () => {
     expect(alertSpy).toHaveBeenCalledWith(message);
     expect(closeSpy).not.toHaveBeenCalled();
   }));
+
+  it("should not disable the form when creating a new entity", () => {
+    expect(component.form.disabled).toBeFalsy();
+  });
 });

src/app/core/entity-components/entity-subrecord/row-details/row-details.component.ts

@@ -12,6 +12,7 @@ import {
   RemoveResult,
 } from "../../../entity/entity-remove.service";
 import { AlertService } from "../../../alerts/alert.service";
+import { EntityAction } from "../../../permissions/permission-types";
 
 /**
  * Data interface that must be given when opening the dialog
@@ -38,6 +39,7 @@ export class RowDetailsComponent<E extends Entity> {
 
   viewOnlyColumns: FormFieldConfig[];
   tempEntity: Entity;
+  editMode: EntityAction = "update";
 
   constructor(
     @Inject(MAT_DIALOG_DATA) public data: DetailsComponentData<E>,
@@ -48,7 +50,13 @@ export class RowDetailsComponent<E extends Entity> {
     private alertService: AlertService
   ) {
     this.form = this.formService.createFormGroup(data.columns, data.entity);
-    if (this.ability.cannot("update", data.entity)) {
+    if (!this.data.entity._rev) {
+      this.editMode = "create";
+    }
+    if (
+      this.editMode === "update" &&
+      this.ability.cannot("update", data.entity)
+    ) {
       this.form.disable();
     }
     this.tempEntity = this.data.entity;