Merge pull request #2333 from Aam-Digital/master

Release 3.34.2

Author: sleidig

package-lock.json

@@ -161,6 +161,22 @@ describe("AdminEntityFieldComponent", () => {
       generateIdFromLabel("test label"),
     );
   }));
+  it("should generate manually created 'additional' value for configurable-enum", fakeAsync(() => {
+    const dataTypeForm = component.schemaFieldsForm.get("dataType");
+    dataTypeForm.setValue(ConfigurableEnumDatatype.dataType);
+    tick();
+
+    let newAdditional;
+    component
+      .createNewAdditionalOptionAsync("newEnumId")
+      .then((result) => (newAdditional = result));
+    tick();
+
+    expect(newAdditional).toEqual({
+      label: "newEnumId",
+      value: "newEnumId",
+    });
+  }));
 
   it("should init 'additional' options for entity datatypes", fakeAsync(() => {
     const mockEntityTypes = [Entity, RecurringActivity];

src/app/core/admin/admin-entity-details/admin-entity-field/admin-entity-field.component.spec.ts

@@ -198,7 +198,7 @@ export class AdminEntityFieldComponent implements OnChanges {
   objectToValue = (v: SimpleDropdownValue) => v?.value;
   createNewAdditionalOption: (input: string) => SimpleDropdownValue;
   createNewAdditionalOptionAsync = async (input) =>
-    this.createNewAdditionalOptionAsync(input);
+    this.createNewAdditionalOption(input);
 
   private updateDataTypeAdditional(dataType: string) {
     this.resetAdditional();

src/app/core/admin/admin-entity-details/admin-entity-field/admin-entity-field.component.ts

@@ -29,6 +29,8 @@ import { FontAwesomeTestingModule } from "@fortawesome/angular-fontawesome/testi
 import { EntityMapperService } from "../../entity/entity-mapper/entity-mapper.service";
 import { EntityActionsService } from "../../entity/entity-actions/entity-actions.service";
 import { EntitySchemaField } from "../../entity/schema/entity-schema-field";
+import { ActivatedRoute } from "@angular/router";
+import { of } from "rxjs";
 
 describe("AdminEntityComponent", () => {
   let component: AdminEntityComponent;
@@ -59,7 +61,9 @@ describe("AdminEntityComponent", () => {
       [viewConfigId]: { component: "EntityDetails", config: viewConfig },
       [entityConfigId]: {},
     };
-
+    const mockActivatedRoute = {
+      queryParams: of({ mode: "list" }),
+    };
     mockConfigService = jasmine.createSpyObj(["getConfig"]);
     mockConfigService.getConfig.and.returnValue(config[viewConfigId]);
 
@@ -88,6 +92,10 @@ describe("AdminEntityComponent", () => {
           provide: EntityActionsService,
           useValue: jasmine.createSpyObj(["showSnackbarConfirmationWithUndo"]),
         },
+        {
+          provide: ActivatedRoute,
+          useValue: mockActivatedRoute,
+        },
       ],
     });
     fixture = TestBed.createComponent(AdminEntityComponent);

src/app/core/admin/admin-entity/admin-entity.component.spec.ts

@@ -28,7 +28,7 @@ import {
   MatSidenavContent,
 } from "@angular/material/sidenav";
 import { FaIconComponent } from "@fortawesome/angular-fontawesome";
-import { RouterLink } from "@angular/router";
+import { RouterLink, ActivatedRoute } from "@angular/router";
 import { MatListItem, MatNavList } from "@angular/material/list";
 import { AdminEntityDetailsComponent } from "../admin-entity-details/admin-entity-details/admin-entity-details.component";
 
@@ -72,10 +72,18 @@ export class AdminEntityComponent implements OnInit {
     private location: Location,
     private entityMapper: EntityMapperService,
     private entityActionsService: EntityActionsService,
+    private routes: ActivatedRoute,
   ) {}
 
   ngOnInit(): void {
     this.init();
+    this.routes.queryParams.subscribe((params) => {
+      if (params.mode === "details") {
+        this.mode = "details";
+      } else if (params.mode === "list") {
+        this.mode = "list";
+      }
+    });
   }
 
   private init() {

src/app/core/admin/admin-entity/admin-entity.component.ts

@@ -1,17 +1,34 @@
 <mat-tab-group [preserveContent]="true" #matTabGroup>
   <mat-tab *ngFor="let tab of tabs; index as tabIndex">
     <ng-template mat-tab-label>
-      @if (tabIndex === matTabGroup.selectedIndex) {
-        <app-admin-section-header
-          [(title)]="tab['title'] ?? tab['name']"
-          (remove)="
-            tabs.splice(tabIndex, 1); matTabGroup.selectedIndex = tabIndex - 1
-          "
-        ></app-admin-section-header>
-      } @else {
-        <!-- only current tab can be renamed -->
-        {{ tab["title"] ?? tab["name"] }}
-      }
+      <div
+        class="drop-list flex-row"
+        [id]="'tabs-' + tabIndex"
+        cdkDropList
+        cdkDropListOrientation="horizontal"
+        (cdkDropListDropped)="drop($event)"
+        [cdkDropListConnectedTo]="getAllTabs(tabIndex)"
+      >
+        <div
+          cdkDrag
+          cdkDragLockAxis="x"
+          class="flex-row align-center drop-item gap-small"
+        >
+          <fa-icon icon="grip-vertical" size="xl" class="drag-handle"></fa-icon>
+          @if (tabIndex === matTabGroup.selectedIndex) {
+            <app-admin-section-header
+              [(title)]="tab['title'] ?? tab['name']"
+              (remove)="
+                tabs.splice(tabIndex, 1);
+                matTabGroup.selectedIndex = tabIndex - 1
+              "
+            ></app-admin-section-header>
+          } @else {
+            <!-- only current tab can be renamed -->
+            {{ tab["title"] ?? tab["name"] }}
+          }
+        </div>
+      </div>
     </ng-template>
 
     <ng-template matTabContent>

src/app/core/admin/building-blocks/admin-tabs/admin-tabs.component.html

@@ -1,3 +1,4 @@
+@use "variables/colors";
 
 :host ::ng-deep .mat-mdc-tab {
   // adjust tab header height to properly display mat-form-field for editing tab label
@@ -6,3 +7,28 @@
 app-admin-section-header {
   margin-bottom: -1em;
 }
+.drag-handle {
+  cursor: move;
+  margin: auto;
+  color: colors.$accent;
+}
+
+.cdk-drag-preview {
+  box-sizing: border-box;
+  border-radius: 4px;
+  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
+  0 8px 10px 1px rgba(0, 0, 0, 0.14),
+  0 3px 14px 2px rgba(0, 0, 0, 0.12);
+}
+
+.cdk-drag-placeholder {
+  opacity: 0;
+}
+
+.cdk-drag-animating {
+  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+}
+
+.drop-list.cdk-drop-list-dragging .drop-item:not(.cdk-drag-placeholder) {
+  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+}

src/app/core/admin/building-blocks/admin-tabs/admin-tabs.component.scss

@@ -19,6 +19,11 @@ import {
 } from "@angular/material/tabs";
 import { MatTooltip } from "@angular/material/tooltip";
 import { AdminTabTemplateDirective } from "./admin-tab-template.directive";
+import {
+  CdkDragDrop,
+  DragDropModule,
+  moveItemInArray,
+} from "@angular/cdk/drag-drop";
 
 /**
  * Building block for drag&drop form builder to let an admin user manage multiple tabs.
@@ -50,6 +55,7 @@ import { AdminTabTemplateDirective } from "./admin-tab-template.directive";
     MatTabLabel,
     MatTooltip,
     AdminTabTemplateDirective,
+    DragDropModule,
   ],
   templateUrl: "./admin-tabs.component.html",
   styleUrl: "./admin-tabs.component.scss",
@@ -76,4 +82,40 @@ export class AdminTabsComponent<
       this.tabGroup.focusTab(newTabIndex);
     });
   }
+
+  /**
+   * A list of tab element ids required for linking drag&drop targets
+   * due to the complex template of tab headers.
+   * @param index
+   */
+  getAllTabs(index: number) {
+    const allTabs = [];
+    for (let i = 0; i < this.tabs?.length; i++) {
+      if (i != index) {
+        allTabs.push("tabs-" + i);
+      }
+    }
+
+    return allTabs;
+  }
+
+  drop(event: CdkDragDrop<string[]>) {
+    const previousIndex = parseInt(
+      event.previousContainer.id.replace("tabs-", ""),
+    );
+    const currentIndex = parseInt(event.container.id.replace("tabs-", ""));
+
+    const previouslySelectedTab = this.tabs[this.tabGroup.selectedIndex];
+
+    moveItemInArray(this.tabs, previousIndex, currentIndex);
+
+    // re-select the previously selected tab, even after its index shifted
+    let shiftedSelectedIndex = this.tabs.indexOf(previouslySelectedTab);
+    if (shiftedSelectedIndex !== this.tabGroup.selectedIndex) {
+      this.tabGroup.selectedIndex = shiftedSelectedIndex;
+      this.tabGroup.focusTab(shiftedSelectedIndex);
+    }
+
+    this.tabs = JSON.parse(JSON.stringify(this.tabs)); // Needed to avoid Angular Ivy render bug
+  }
 }

src/app/core/admin/building-blocks/admin-tabs/admin-tabs.component.ts

@@ -63,7 +63,7 @@ describe("SyncService", () => {
     tick(SyncService.SYNC_INTERVAL);
   }));
 
-  it("should try auto-login if fetch fails and fetch again", async () => {
+  it("should try auto-login if fetch fails and fetch again", fakeAsync(() => {
     // Make sync call pass
     spyOn(
       TestBed.inject(Database) as PouchDatabase,
@@ -83,13 +83,17 @@ describe("SyncService", () => {
     });
     mockAuthService.login.and.resolveTo();
     const initSpy = spyOn(service["remoteDatabase"], "initRemoteDB");
-    await service.startSync();
+    service.startSync();
+    tick();
     // taking fetch function from init call
     const fetch = initSpy.calls.mostRecent().args[1];
 
     const url = "/db/_changes";
     const opts = { headers: {} };
-    await expectAsync(fetch(url, opts)).toBeResolved();
+    let fetchResult;
+    fetch(url, opts).then((res) => (fetchResult = res));
+    tick();
+    expect(fetchResult).toBeDefined();
 
     expect(PouchDB.fetch).toHaveBeenCalledTimes(2);
     expect(PouchDB.fetch).toHaveBeenCalledWith(url, opts);
@@ -98,5 +102,6 @@ describe("SyncService", () => {
     expect(mockAuthService.addAuthHeader).toHaveBeenCalledTimes(2);
 
     service.liveSyncEnabled = false;
-  });
+    tick(SyncService.SYNC_INTERVAL);
+  }));
 });

src/app/core/database/sync.service.spec.ts

@@ -32,6 +32,8 @@
     <button
       mat-menu-item
       [routerLink]="['/admin/entity', record?.getType()]"
+      [queryParams]="{ mode: 'details' }"
+      queryParamsHandling="merge"
       *ngIf="'update' | ablePure: 'Config' | async"
     >
       <fa-icon