Add reorder button and skeletal dialog to model overview

feat: update models table and functions for display order

fix: Get reorder path working

fix: Bad merge

fix: Hide reorder button from non-managers

refactor: remove unused comments

style: Clean up reorder modal

feat: Add function to update a group of models, use for model reordering

fix: Remove unused imports

feat: order models by id when no display order has been set

docs: Add missing license headers

fix: Remove excess declaration and format files

fix: Rename angular functions to meet linter standards

fix: eslint styling

fix: Move display order out of post model

test: Add test to patch model display order

fix: Revert unecessary angular function name changes

This reverts commit e876fed.

build: Update frontend versions

build(deps-dev): bump alembic from 1.12.0 to 1.12.1 in /backend

Bumps [alembic](https://github.com/sqlalchemy/alembic) from 1.12.0 to 1.12.1.
- [Release notes](https://github.com/sqlalchemy/alembic/releases)
- [Changelog](https://github.com/sqlalchemy/alembic/blob/main/CHANGES)
- [Commits](https://github.com/sqlalchemy/alembic/commits)

---
updated-dependencies:
- dependency-name: alembic
  dependency-type: direct:production
  update-type: version-update:semver-patch
...

Signed-off-by: dependabot[bot] <[email protected]>

docs(user): Add instructions for secondary click on macOS

The usual option to press `Control` while clicking doesn't work
in RDP-sessions on macOS. The `Control` can't be evaluated and mapped
properly. It's passed to the Linux container, which can't handle the
`Control` key.

refactor: Create floating window mgr component

feat: Add tiling window manager with slider

build: Update frontend versions

fix(session-viewer): Disable pointer event while resizing sessions

This commit fixes a small bug that was introduced in #1150.

When the pointer events are not disabled on the iframe, some pointer events
are "stolen" by the iframe. Therefore, they can not be used by our event handlers.
This led to a "jumpy" behaviour while resizing.

fix: Get reorder path working

fix: Undo rebase errors

feat: Add tiling window manager with slider

fix: Get reorder path working

Revert "build: Update frontend versions"

This reverts commit 800f6ce.

build: Update frontend versions

build(deps-dev): bump alembic from 1.12.0 to 1.12.1 in /backend

Bumps [alembic](https://github.com/sqlalchemy/alembic) from 1.12.0 to 1.12.1.
- [Release notes](https://github.com/sqlalchemy/alembic/releases)
- [Changelog](https://github.com/sqlalchemy/alembic/blob/main/CHANGES)
- [Commits](https://github.com/sqlalchemy/alembic/commits)

---
updated-dependencies:
- dependency-name: alembic
  dependency-type: direct:production
  update-type: version-update:semver-patch
...

Signed-off-by: dependabot[bot] <[email protected]>

docs(user): Add instructions for secondary click on macOS

The usual option to press `Control` while clicking doesn't work
in RDP-sessions on macOS. The `Control` can't be evaluated and mapped
properly. It's passed to the Linux container, which can't handle the
`Control` key.

refactor: Create floating window mgr component

feat: Add tiling window manager with slider

build: Update frontend versions

fix(session-viewer): Disable pointer event while resizing sessions

This commit fixes a small bug that was introduced in #1150.

When the pointer events are not disabled on the iframe, some pointer events
are "stolen" by the iframe. Therefore, they can not be used by our event handlers.
This led to a "jumpy" behaviour while resizing.

fix: Migrate logic for button showing to Angular 17 blocks

fix: replace if statement with rxjs filtering

fix: Remove unused matdialog declaration

fix: Shift logic for project check to come before sending data

fix: Refactor data model for reordering view

fix: Rename all related instances of reorderModels to reorderModelsDialog

fix: Update for loop of models to Angular 17 format

fix: Separate out patchModel to reduce duplication in model updates

fix: Manually format html

fix: use model ids in place of names and rename patch function

backend/capellacollab/alembic/versions/0e2028f83156_add_user_determined_display_order_to_.py

@@ -0,0 +1,24 @@
+# SPDX-FileCopyrightText: Copyright DB Netz AG and the capella-collab-manager contributors
+# SPDX-License-Identifier: Apache-2.0
+
+"""Add user-determined display order to models
+
+Revision ID: 0e2028f83156
+Revises: ac0e6e0f77ee
+Create Date: 2023-11-12 14:47:12.295103
+
+"""
+import sqlalchemy as sa
+from alembic import op
+
+# revision identifiers, used by Alembic.
+revision = "0e2028f83156"
+down_revision = "ac0e6e0f77ee"
+branch_labels = None
+depends_on = None
+
+
+def upgrade():
+    op.add_column(
+        "models", sa.Column("display_order", sa.Integer(), nullable=True)
+    )

backend/capellacollab/projects/toolmodels/crud.py

@@ -83,6 +83,7 @@ def create_model(
     version: tools_models.DatabaseVersion | None = None,
     nature: tools_models.DatabaseNature | None = None,
     configuration: dict[str, str] | None = None,
+    display_order: int | None = None,
 ) -> models.DatabaseCapellaModel:
     restrictions = restrictions_models.DatabaseToolModelRestrictions()
 
@@ -96,6 +97,7 @@ def create_model(
         nature=nature,
         restrictions=restrictions,
         configuration=configuration,
+        display_order=display_order,
     )
     db.add(restrictions)
     db.add(model)
@@ -133,6 +135,7 @@ def update_model(
     version: tools_models.DatabaseVersion,
     nature: tools_models.DatabaseNature,
     project: projects_model.DatabaseProject,
+    display_order: int | None,
 ) -> models.DatabaseCapellaModel:
     model.version = version
     model.nature = nature
@@ -142,6 +145,8 @@ def update_model(
     if name:
         model.name = name
         model.slug = slugify.slugify(name)
+    if display_order:
+        model.display_order = display_order
     db.commit()
     return model
 

backend/capellacollab/projects/toolmodels/models.py

@@ -54,6 +54,7 @@ class PatchCapellaModel(pydantic.BaseModel):
     version_id: int | None = None
     nature_id: int | None = None
     project_slug: str | None = None
+    display_order: int | None = None
 
 
 class ToolDetails(pydantic.BaseModel):
@@ -72,6 +73,7 @@ class DatabaseCapellaModel(database.Base):
     name: orm.Mapped[str] = orm.mapped_column(index=True)
     slug: orm.Mapped[str]
     description: orm.Mapped[str]
+    display_order: orm.Mapped[int | None]
 
     configuration: orm.Mapped[dict[str, str] | None]
 
@@ -116,6 +118,7 @@ class CapellaModel(pydantic.BaseModel):
     slug: str
     name: str
     description: str
+    display_order: int | None
     tool: tools_models.ToolBase
     version: tools_models.ToolVersionBase | None = None
     nature: tools_models.ToolNatureBase | None = None

backend/capellacollab/projects/toolmodels/routes.py

@@ -183,7 +183,14 @@ def patch_tool_model(
         new_project = model.project
 
     return crud.update_model(
-        db, model, body.description, body.name, version, nature, new_project
+        db,
+        model,
+        body.description,
+        body.name,
+        version,
+        nature,
+        new_project,
+        body.display_order,
     )
 
 

backend/tests/projects/toolmodels/test_toolmodel_routes.py

@@ -86,3 +86,21 @@ def test_rename_toolmodel_where_name_already_exists(
         assert response.status_code == 409
         assert "A model with a similar name already exists" in response.text
         mock_get_model_by_slugs.assert_called_once()
+
+
+def test_update_toolmodel_order_successful(
+    capella_model: toolmodels_models.DatabaseCapellaModel,
+    project: projects_models.DatabaseProject,
+    client: testclient.TestClient,
+    executor_name: str,
+    db: orm.Session,
+):
+    users_crud.create_user(db, executor_name, users_models.Role.ADMIN)
+
+    response = client.patch(
+        f"/api/v1/projects/{project.slug}/models/{capella_model.slug}",
+        json={"display_order": 1},
+    )
+
+    assert response.status_code == 200
+    assert "1" in response.text

frontend/src/app/app.module.ts

@@ -98,6 +98,7 @@ import { EditProjectMetadataComponent } from './projects/project-detail/edit-pro
 import { ModelComplexityBadgeComponent } from './projects/project-detail/model-overview/model-complexity-badge/model-complexity-badge.component';
 import { ModelOverviewComponent } from './projects/project-detail/model-overview/model-overview.component';
 import { MoveModelComponent } from './projects/project-detail/model-overview/move-model/move-model.component';
+import { ReorderModelsDialogComponent } from './projects/project-detail/model-overview/reorder-models-dialog/reorder-models-dialog.component';
 import { ProjectDetailsComponent } from './projects/project-detail/project-details.component';
 import { ProjectMetadataComponent } from './projects/project-detail/project-metadata/project-metadata.component';
 import { AddUserToProjectDialogComponent } from './projects/project-detail/project-users/add-user-to-project/add-user-to-project.component';
@@ -215,6 +216,7 @@ import { UsersProfileComponent } from './users/users-profile/users-profile.compo
     ProjectUserSettingsComponent,
     ProjectWrapperComponent,
     PureVariantsComponent,
+    ReorderModelsDialogComponent,
     SessionComponent,
     SessionIFrameComponent,
     SessionOverviewComponent,

frontend/src/app/projects/models/service/model.service.ts

@@ -10,7 +10,7 @@ import {
   AsyncValidatorFn,
   ValidationErrors,
 } from '@angular/forms';
-import { BehaviorSubject, map, Observable, take, tap } from 'rxjs';
+import { BehaviorSubject, forkJoin, map, Observable, take, tap } from 'rxjs';
 import slugify from 'slugify';
 import { ModelRestrictions } from 'src/app/projects/models/model-restrictions/service/model-restrictions.service';
 import { T4CModel } from 'src/app/projects/models/model-source/t4c/service/t4c-model.service';
@@ -92,24 +92,48 @@ export class ModelService {
       );
   }
 
+  private applyModelPatch(
+    projectSlug: string,
+    modelSlug: string,
+    patchData: PatchModel,
+  ): Observable<Model> {
+    return this.http.patch<Model>(
+      `${this.base_url}${projectSlug}/models/${modelSlug}/`,
+      patchData,
+    );
+  }
+
   updateModel(
     projectSlug: string,
     modelSlug: string,
     patchModel: PatchModel,
   ): Observable<Model> {
-    return this.http
-      .patch<Model>(
-        `${this.base_url}${projectSlug}/models/${modelSlug}/`,
-        patchModel,
-      )
-      .pipe(
-        tap({
-          next: (model) => {
-            this.loadModels(projectSlug);
-            this._model.next(model);
-          },
-        }),
-      );
+    return this.applyModelPatch(projectSlug, modelSlug, patchModel).pipe(
+      tap({
+        next: (model) => {
+          this.loadModels(projectSlug);
+          this._model.next(model);
+        },
+      }),
+    );
+  }
+
+  updateModels(
+    projectSlug: string,
+    modelUpdates: { modelSlug: string; patchModel: PatchModel }[],
+  ): Observable<Model[]> {
+    const updateObservables = modelUpdates.map(({ modelSlug, patchModel }) =>
+      this.applyModelPatch(projectSlug, modelSlug, patchModel),
+    );
+
+    return forkJoin(updateObservables).pipe(
+      tap({
+        next: (models: Model[]) => {
+          this.loadModels(projectSlug);
+          this._model.next(models[models.length - 1]);
+        },
+      }),
+    );
   }
 
   deleteModel(projectSlug: string, modelSlug: string): Observable<void> {
@@ -184,6 +208,7 @@ export type Model = {
   t4c_models: T4CModel[];
   git_models: GetGitModel[];
   restrictions: ModelRestrictions;
+  display_order: number;
 };
 
 export type PatchModel = {
@@ -192,6 +217,7 @@ export type PatchModel = {
   nature_id?: number;
   version_id?: number;
   project_slug?: string;
+  display_order?: number;
 };
 
 export function getPrimaryGitModel(model: Model): GetGitModel | undefined {