Add reorder button and skeletal dialog to model overview

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

@@ -29,6 +29,20 @@ <h2>Models</h2>
     >
       <mat-icon id="add-icon">add</mat-icon>
     </a>
+    <a
+      mat-stroked-button
+      class="!ml-4"
+      (click)="openReorderModelsDialog()"
+      *ngIf="projectUserService.verifyRole('manager')"
+      [matTooltip]="
+        project?.is_archived
+          ? 'You cannot reorder models for an archived project'
+          : 'Reorder models'
+      "
+      [disabled]="project?.is_archived"
+    >
+      <mat-icon>reorder</mat-icon>
+    </a>
   </div>
   <div class="flex flex-wrap">
     <div class="flex" *ngIf="(modelService.models$ | async) === undefined">

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

@@ -14,6 +14,7 @@ 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';
@@ -88,4 +89,11 @@ export class ModelOverviewComponent implements OnInit {
       data: { projectSlug: this.project?.slug, model: model },
     });
   }
+
+  openReorderModelsDialog(): void {
+    this.dialog.open(ReorderModelsComponent, {
+      maxWidth: '100vw',
+      maxHeight: '200vw',
+    });
+  }
 }

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

@@ -0,0 +1,12 @@
+<!--
+ ~ SPDX-FileCopyrightText: Copyright DB Netz AG and the capella-collab-manager contributors
+ ~ SPDX-License-Identifier: Apache-2.0
+ -->
+
+<div class="dialog">
+  <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>

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

@@ -0,0 +1,22 @@
+/*
+ * SPDX-FileCopyrightText: Copyright DB Netz AG and the capella-collab-manager contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { Component, Inject } from '@angular/core';
+import { MAT_DIALOG_DATA } from '@angular/material/dialog';
+
+import { ProjectService } from 'src/app/projects/service/project.service';
+
+@Component({
+  selector: 'app-reorder-models',
+  templateUrl: './reorder-models.component.html',
+  styleUrls: ['./reorder-models.component.css'],
+})
+export class ReorderModelsComponent {
+  constructor(
+    public projectService: ProjectService,
+    @Inject(MAT_DIALOG_DATA)
+    public data: { data: 1 },
+  ) {}
+}