From 7c454ae3fc5c2e9ab708158f0f0b5f9cc9fb287b Mon Sep 17 00:00:00 2001
From: romeonicholas <nicholas.romeo@code.berlin>
Date: Thu, 2 Nov 2023 15:30:34 +0100
Subject: [PATCH] Add reorder button and skeletal dialog to model overview

---
 .../model-overview.component.html             | 14 ++++++++++++
 .../model-overview.component.ts               |  8 +++++++
 .../reorder-models.component.css              |  0
 .../reorder-models.component.html             | 12 ++++++++++
 .../reorder-models.component.ts               | 22 +++++++++++++++++++
 5 files changed, 56 insertions(+)
 create mode 100644 frontend/src/app/projects/project-detail/model-overview/reorder-models/reorder-models.component.css
 create mode 100644 frontend/src/app/projects/project-detail/model-overview/reorder-models/reorder-models.component.html
 create mode 100644 frontend/src/app/projects/project-detail/model-overview/reorder-models/reorder-models.component.ts

diff --git a/frontend/src/app/projects/project-detail/model-overview/model-overview.component.html b/frontend/src/app/projects/project-detail/model-overview/model-overview.component.html
index 3998bf63fb..afa98c2f28 100644
--- a/frontend/src/app/projects/project-detail/model-overview/model-overview.component.html
+++ b/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">
diff --git a/frontend/src/app/projects/project-detail/model-overview/model-overview.component.ts b/frontend/src/app/projects/project-detail/model-overview/model-overview.component.ts
index eec2ca98b0..da9ad82fe1 100644
--- a/frontend/src/app/projects/project-detail/model-overview/model-overview.component.ts
+++ b/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',
+    });
+  }
 }
diff --git a/frontend/src/app/projects/project-detail/model-overview/reorder-models/reorder-models.component.css b/frontend/src/app/projects/project-detail/model-overview/reorder-models/reorder-models.component.css
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/frontend/src/app/projects/project-detail/model-overview/reorder-models/reorder-models.component.html b/frontend/src/app/projects/project-detail/model-overview/reorder-models/reorder-models.component.html
new file mode 100644
index 0000000000..f1dd8685fa
--- /dev/null
+++ b/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>
diff --git a/frontend/src/app/projects/project-detail/model-overview/reorder-models/reorder-models.component.ts b/frontend/src/app/projects/project-detail/model-overview/reorder-models/reorder-models.component.ts
new file mode 100644
index 0000000000..33765e2ff0
--- /dev/null
+++ b/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 },
+  ) {}
+}