From b9cda5b1ef9d35c84c73f3641e43433e81c85f64 Mon Sep 17 00:00:00 2001
From: nhertz <nhertz@nrao.edu>
Date: Mon, 12 Apr 2021 15:17:35 -0600
Subject: [PATCH] Extracted status button out into its own component; might end
 up changing this later

---
 .../request-header.component.html             | 10 ++++------
 .../request-header.component.scss             | 19 +++++++------------
 .../app/workspaces/workspaces.component.ts    |  1 -
 .../src/app/workspaces/workspaces.module.ts   |  8 +++++++-
 4 files changed, 18 insertions(+), 20 deletions(-)

diff --git a/apps/web/src/app/workspaces/components/capability-request/components/request-header/request-header.component.html b/apps/web/src/app/workspaces/components/capability-request/components/request-header/request-header.component.html
index 80f8e478c..d6858405d 100644
--- a/apps/web/src/app/workspaces/components/capability-request/components/request-header/request-header.component.html
+++ b/apps/web/src/app/workspaces/components/capability-request/components/request-header/request-header.component.html
@@ -1,11 +1,9 @@
 <div id="request-id-and-status">
-  <h2 id="request-id" class="left-aligned">Request #7</h2>
-  <button id="request-status-button" type="button" class="btn btn-success right-aligned">
-    Running<span class="fas fa-play"></span>
-  </button>
+  <h2 id="request-id">Request #7</h2>
+  <app-running-status-button id="request-status"></app-running-status-button>
 </div>
 
 <div id="created-and-updated-timestamps">
-  <h4 id="created-time" class="left-aligned timestamp">Created 2 hours ago</h4>
-  <h4 id="last-updated-time" class="right-aligned timestamp">Updated 2 seconds ago</h4>
+  <h5 id="created-time" class="timestamp">Created 2 hours ago</h5>
+  <h5 id="last-updated-time" class="timestamp">Updated 2 seconds ago</h5>
 </div>
diff --git a/apps/web/src/app/workspaces/components/capability-request/components/request-header/request-header.component.scss b/apps/web/src/app/workspaces/components/capability-request/components/request-header/request-header.component.scss
index 8813f9c0b..adafcc23a 100644
--- a/apps/web/src/app/workspaces/components/capability-request/components/request-header/request-header.component.scss
+++ b/apps/web/src/app/workspaces/components/capability-request/components/request-header/request-header.component.scss
@@ -5,12 +5,6 @@ div {
   grid-template-columns: repeat(2, 1fr);
 }
 
-.left-aligned {
-  justify-self: left;
-}
-.right-aligned {
-  justify-self: right;
-}
 .timestamp {
   color: #757575;
 }
@@ -19,19 +13,20 @@ div {
   grid-template-areas: "id status";
   border-bottom: 1px solid #e0e0e0;
 }
-
 #request-id {
   grid-area: id;
+  justify-self: left;
 }
-
-#request-status-button {
-  grid-area: status;
+#request-status {
+  justify-self: right;
 }
-
 #created-and-updated-timestamps {
   grid-template-areas: "created updated";
   border-bottom: 1px solid #bdbdbd;
 }
-
 #created-time {
+  justify-self: left;
+}
+#last-updated-time {
+  justify-self: right;
 }
diff --git a/apps/web/src/app/workspaces/workspaces.component.ts b/apps/web/src/app/workspaces/workspaces.component.ts
index 13d66cfa4..f9158c0a6 100644
--- a/apps/web/src/app/workspaces/workspaces.component.ts
+++ b/apps/web/src/app/workspaces/workspaces.component.ts
@@ -1,5 +1,4 @@
 import { Component, OnInit } from "@angular/core";
-import { FormsModule } from "@angular/forms";
 import { CapabilityLauncherService } from "./services/capability-launcher.service";
 import { CapabilityRequest } from "./model/capability-request";
 import { CapabilityExecution } from "./model/capability-execution";
diff --git a/apps/web/src/app/workspaces/workspaces.module.ts b/apps/web/src/app/workspaces/workspaces.module.ts
index d1743d81d..1e9d79da6 100644
--- a/apps/web/src/app/workspaces/workspaces.module.ts
+++ b/apps/web/src/app/workspaces/workspaces.module.ts
@@ -5,9 +5,15 @@ import { WorkspacesComponent } from "./workspaces.component";
 import { FormsModule, ReactiveFormsModule } from "@angular/forms";
 import { CapabilityRequestComponent } from "./components/capability-request/capability-request.component";
 import { RequestHeaderComponent } from "./components/capability-request/components/request-header/request-header.component";
+import { RunningStatusButtonComponent } from "./components/capability-request/components/status-buttons/running-status-button/running-status-button.component";
 
 @NgModule({
-  declarations: [WorkspacesComponent, CapabilityRequestComponent, RequestHeaderComponent],
+  declarations: [
+    WorkspacesComponent,
+    CapabilityRequestComponent,
+    RequestHeaderComponent,
+    RunningStatusButtonComponent,
+  ],
   imports: [CommonModule, WorkspacesRoutingModule, ReactiveFormsModule, FormsModule],
 })
 export class WorkspacesModule {}
-- 
GitLab