From 61e7ebdadc58f8f7a8211351a78d8cb499fb2855 Mon Sep 17 00:00:00 2001
From: youssefshibl <youssefshibl000@gmail.com>
Date: Wed, 20 Mar 2024 21:35:24 +0200
Subject: [PATCH] refactor: :recycle: disable bash shell link when container
 not running

---
 frontend/src/components/Container.vue | 21 ++++++++++++++++++---
 frontend/src/pages/Compose.vue        |  1 +
 2 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/Container.vue b/frontend/src/components/Container.vue
index 12f7709..f8696ec 100644
--- a/frontend/src/components/Container.vue
+++ b/frontend/src/components/Container.vue
@@ -15,8 +15,8 @@
                 </div>
             </div>
             <div class="col-5">
-                <div class="function">
-                    <router-link v-if="!isEditMode" class="btn btn-normal" :to="terminalRouteLink" disabled="">
+                <div class="function" :class="{notallowed:!(!isEditMode && active)}">
+                    <router-link v-if="!isEditMode" class="btn btn-normal" :to="terminalRouteLink" :class="{disabledlink:!(!isEditMode && active)}">
                         <font-awesome-icon icon="terminal" />
                         Bash
                     </router-link>
@@ -159,7 +159,11 @@ export default defineComponent({
         status: {
             type: String,
             default: "N/A",
-        }
+        },
+        active: {
+            type: Boolean,
+            default: false,
+        },
     },
     emits: [
     ],
@@ -309,4 +313,15 @@ export default defineComponent({
         justify-content: end;
     }
 }
+
+.disabledlink {
+    pointer-events: none;
+    border: 1px solid #999999;
+    background-color: #cccccc;
+    color: #666666;
+}
+
+.notallowed{
+    cursor: not-allowed;
+}
 </style>
diff --git a/frontend/src/pages/Compose.vue b/frontend/src/pages/Compose.vue
index 7d37854..121ffb4 100644
--- a/frontend/src/pages/Compose.vue
+++ b/frontend/src/pages/Compose.vue
@@ -129,6 +129,7 @@
                             :is-edit-mode="isEditMode"
                             :first="name === Object.keys(jsonConfig.services)[0]"
                             :status="serviceStatusList[name]"
+                            :active="active"
                         />
                     </div>