feat: update models table and functions for display order

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,
 ) -> models.DatabaseCapellaModel:
     model.version = version
     model.nature = nature
@@ -142,6 +145,7 @@ def update_model(
     if name:
         model.name = name
         model.slug = slugify.slugify(name)
+    model.display_order = display_order
     db.commit()
     return model
 

backend/capellacollab/projects/toolmodels/models.py

@@ -46,6 +46,7 @@ class PostCapellaModel(pydantic.BaseModel):
     name: str
     description: str | None = None
     tool_id: int
+    display_order: int | None = None
 
 
 class PatchCapellaModel(pydantic.BaseModel):
@@ -54,6 +55,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):
@@ -75,6 +77,8 @@ class DatabaseCapellaModel(database.Base):
 
     configuration: orm.Mapped[dict[str, str] | None]
 
+    display_order: orm.Mapped[int | None] = orm.mapped_column()
+
     project_id: orm.Mapped[int] = orm.mapped_column(
         sa.ForeignKey("projects.id")
     )
@@ -121,5 +125,6 @@ class CapellaModel(pydantic.BaseModel):
     nature: tools_models.ToolNatureBase | None = None
     git_models: list[GitModel] | None = None
     t4c_models: list[T4CModel] | None = None
+    display_order: int | None = None
 
     restrictions: restrictions_models.ToolModelRestrictions | None = None

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

@@ -184,6 +184,7 @@ export type Model = {
   t4c_models: T4CModel[];
   git_models: GetGitModel[];
   restrictions: ModelRestrictions;
+  display_order: number;
 };
 
 export type PatchModel = {
@@ -192,6 +193,7 @@ export type PatchModel = {
   nature_id?: number;
   version_id?: number;
   project_slug?: string;
+  display_order?: number;
 };
 
 export function getPrimaryGitModel(model: Model): GetGitModel | undefined {

frontend/src/app/projects/project-detail/model-overview/model-overview.component.html

@@ -29,10 +29,10 @@ <h2>Models</h2>
     >
       <mat-icon id="add-icon">add</mat-icon>
     </a>
-    <a
+    <!-- <a
       mat-stroked-button
       class="!ml-4"
-      (click)="openReorderModelsDialog()"
+      (click)="openReorderModelsDialog(modelService.models$ | async)"
       *ngIf="projectUserService.verifyRole('manager')"
       [matTooltip]="
         project?.is_archived
@@ -42,7 +42,7 @@ <h2>Models</h2>
       [disabled]="project?.is_archived"
     >
       <mat-icon>reorder</mat-icon>
-    </a>
+    </a> -->
   </div>
   <div class="flex flex-wrap">
     <div class="flex" *ngIf="(modelService.models$ | async) === undefined">
@@ -60,6 +60,26 @@ <h2>Models</h2>
       </div>
     </div>
 
+    <!-- ====== Reorder component ====== -->
+    <div>
+      <h2>Reorder models</h2>
+      <div>
+        Drag and drop models in the order you would like, then press save. All
+        members of a team will see the updated order.
+      </div>
+      <div cdkDropList (cdkDropListDropped)="drop($event)">
+        <div cdkDrag *ngFor="let model of models">
+          <span>{{ model.name }} ({{ model.tool.name }}</span>
+          <span *ngIf="model.version"> - {{ model.version.name }}</span>
+          <span>)</span>
+        </div>
+      </div>
+      <button mat-stroked-button (click)="updateModelOrder(models)">
+        Update
+      </button>
+    </div>
+    <!-- ====== End reorder component ====== -->
+
     <mat-card
       class="flex min-h-[200px] w-[500px] max-w-[85vw] select-none flex-col"
       *ngFor="let model of modelService.models$ | async"

frontend/src/app/projects/project-detail/model-overview/model-overview.component.ts

@@ -3,6 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
 import { Component, OnInit } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
 import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
@@ -14,7 +15,6 @@ import {
   ModelService,
 } from 'src/app/projects/models/service/model.service';
 import { MoveModelComponent } from 'src/app/projects/project-detail/model-overview/move-model/move-model.component';
-import { ReorderModelsComponent } from 'src/app/projects/project-detail/model-overview/reorder-models/reorder-models.component';
 import { ProjectUserService } from 'src/app/projects/project-detail/project-users/service/project-user.service';
 import { UserService } from 'src/app/services/user/user.service';
 import { SessionService } from 'src/app/sessions/service/session.service';
@@ -29,6 +29,7 @@ import { Project, ProjectService } from '../../service/project.service';
 })
 export class ModelOverviewComponent implements OnInit {
   project?: Project;
+  models?: Model[];
 
   constructor(
     public modelService: ModelService,
@@ -43,6 +44,10 @@ export class ModelOverviewComponent implements OnInit {
     this.projectService.project$
       .pipe(untilDestroyed(this))
       .subscribe((project) => (this.project = project));
+
+    this.modelService.models$.pipe(untilDestroyed(this)).subscribe((models) => {
+      this.models = models;
+    });
   }
 
   getPrimaryWorkingMode(model: Model): string {
@@ -90,10 +95,25 @@ export class ModelOverviewComponent implements OnInit {
     });
   }
 
-  openReorderModelsDialog(): void {
-    this.dialog.open(ReorderModelsComponent, {
-      maxWidth: '100vw',
-      maxHeight: '200vw',
-    });
+  drop(event: CdkDragDrop<Model[]>): void {
+    if (!this.models) {
+      return;
+    }
+    moveItemInArray(this.models, event.previousIndex, event.currentIndex);
+  }
+
+  async updateModelOrder(models: Model[] | undefined) {
+    if (!this.project) {
+      return;
+    }
+    if (!models) {
+      return;
+    }
+
+    for (const [index, model] of models.entries()) {
+      this.modelService.updateModel(this.project.slug, model.slug, {
+        display_order: index,
+      });
+    }
   }
 }

frontend/src/app/projects/project-detail/model-overview/reorder-models/reorder-models.component.html

@@ -9,4 +9,9 @@ <h2>Reorder models</h2>
     Drag and drop models in the order you would like, then press save. All
     members of a team will see the updated order.
   </div>
+  <div *ngIf="(modelService.models$ | async) === undefined">
+    <div *ngFor="let model of modelService.models$ | async">
+      <p>{{ model.name }}</p>
+    </div>
+  </div>
 </div>