Merge pull request #1006 from bcgov/bugs/detailView

EDX-1755 Detail-Summary View Fix
bcgov · Sep 1, 2023 · 512713d · 512713d
2 parents ee89059 + 8961610
commit 512713d
Show file tree

Hide file tree

Showing 7 changed files with 106 additions and 76 deletions.
diff --git a/frontend/src/components/sdcCollection/stepThreeVerifyData/CareerProgramsComponent.vue b/frontend/src/components/sdcCollection/stepThreeVerifyData/CareerProgramsComponent.vue
@@ -8,6 +8,7 @@
           id="detailButton"
           size="large"
           class="detail-button"
+          :class="{ 'active-button': reportView === 'detail' }"
           @click="showDetail"
         >
           Detail View
@@ -16,6 +17,7 @@
           id="summaryButton"
           size="large"
           class="summary-button"
+          :class="{ 'active-button': reportView === 'summary' }"
           @click="showSummary"
         >
           Summary View
@@ -67,19 +69,22 @@ export default {
   }
 };
 </script>
-
-      <style scoped>
-      .detail-button {
-        background-color: #003366 !important;
-  color: white !important;
-      }
 
-      .summary-button {
-        color: #003366;
-        border: 1px solid #003366;
-      }
+<style scoped>
+.detail-button {
+  border: 1px solid lightgray;
+}
 
-      </style>
+.summary-button {
+  border: 1px solid lightgray;
+}
+
+.active-button {
+  background-color: #003366 !important;
+  color: white !important;
+  border: 1px solid #003366;
+}
+</style>
 
 
 

diff --git a/frontend/src/components/sdcCollection/stepThreeVerifyData/EnglishLangComponent.vue b/frontend/src/components/sdcCollection/stepThreeVerifyData/EnglishLangComponent.vue
@@ -8,6 +8,7 @@
           id="detailButton"
           size="large"
           class="detail-button"
+          :class="{ 'active-button': reportView === 'detail' }"
           @click="showDetail"
         >
           Detail View
@@ -16,6 +17,7 @@
           id="summaryButton"
           size="large"
           class="summary-button"
+          :class="{ 'active-button': reportView === 'summary' }"
           @click="showSummary"
         >
           Summary View
@@ -67,19 +69,22 @@ export default {
   }
 };
 </script>
-
-      <style scoped>
-      .detail-button {
-        background-color: #003366 !important;
-  color: white !important;
-      }
 
-      .summary-button {
-        color: #003366;
-        border: 1px solid #003366;
-      }
+<style scoped>
+.detail-button {
+  border: 1px solid lightgray;
+}
 
-      </style>
+.summary-button {
+  border: 1px solid lightgray;
+}
+
+.active-button {
+  background-color: #003366 !important;
+  color: white !important;
+  border: 1px solid #003366;
+}
+</style>
 
 
 

diff --git a/frontend/src/components/sdcCollection/stepThreeVerifyData/FTEComponent.vue b/frontend/src/components/sdcCollection/stepThreeVerifyData/FTEComponent.vue
@@ -8,6 +8,7 @@
           id="detailButton"
           size="large"
           class="detail-button"
+          :class="{ 'active-button': reportView === 'detail' }"
           @click="showDetail"
         >
           Detail View
@@ -16,6 +17,7 @@
           id="summaryButton"
           size="large"
           class="summary-button"
+          :class="{ 'active-button': reportView === 'summary' }"
           @click="showSummary"
         >
           Summary View
@@ -75,15 +77,18 @@ export default {
 
       <style scoped>
       .detail-button {
-        background-color: #003366 !important;
-  color: white !important;
+        border: 1px solid lightgray;
       }
-
+      
       .summary-button {
-        color: #003366;
-        border: 1px solid #003366;
+        border: 1px solid lightgray;
       }
 
+      .active-button {
+        background-color: #003366 !important;
+        color: white !important;
+        border: 1px solid #003366;
+      }
       </style>
 
 

diff --git a/frontend/src/components/sdcCollection/stepThreeVerifyData/FrenchProgramsComponent.vue b/frontend/src/components/sdcCollection/stepThreeVerifyData/FrenchProgramsComponent.vue
@@ -8,6 +8,7 @@
           id="detailButton"
           size="large"
           class="detail-button"
+          :class="{ 'active-button': reportView === 'detail' }"
           @click="showDetail"
         >
           Detail View
@@ -16,6 +17,7 @@
           id="summaryButton"
           size="large"
           class="summary-button"
+          :class="{ 'active-button': reportView === 'summary' }"
           @click="showSummary"
         >
           Summary View
@@ -67,19 +69,20 @@ export default {
   }
 };
 </script>
-
-      <style scoped>
-      .detail-button {
-        background-color: #003366 !important;
-  color: white !important;
-      }
 
-      .summary-button {
-        color: #003366;
-        border: 1px solid #003366;
-      }
-
-      </style>
+<style scoped>
+.detail-button {
+  border: 1px solid lightgray;
+}
+.summary-button {
+  border: 1px solid lightgray;
+}
+.active-button {
+  background-color: #003366 !important;
+  color: white !important;
+  border: 1px solid #003366;
+}
+</style>
 
 
 

diff --git a/frontend/src/components/sdcCollection/stepThreeVerifyData/IndSupportProgramsComponent.vue b/frontend/src/components/sdcCollection/stepThreeVerifyData/IndSupportProgramsComponent.vue
@@ -8,6 +8,7 @@
           id="detailButton"
           size="large"
           class="detail-button"
+          :class="{ 'active-button': reportView === 'detail' }"
           @click="showDetail"
         >
           Detail View
@@ -16,6 +17,7 @@
           id="summaryButton"
           size="large"
           class="summary-button"
+          :class="{ 'active-button': reportView === 'summary' }"
           @click="showSummary"
         >
           Summary View
@@ -67,20 +69,20 @@ export default {
   }
 };
 </script>
-
-      <style scoped>
-      .detail-button {
-        background-color: #003366 !important;
-  color: white !important;
-      }
 
-      .summary-button {
-        color: #003366;
-        border: 1px solid #003366;
-      }
+<style scoped>
+.detail-button {
+  border: 1px solid lightgray;
+}
+
+.summary-button {
+  border: 1px solid lightgray;
+}
+
+.active-button {
+  background-color: #003366 !important;
+  color: white !important;
+  border: 1px solid #003366;
+}
+</style>
 
-      </style>
-
-
-
-
diff --git a/frontend/src/components/sdcCollection/stepThreeVerifyData/RefugeeComponent.vue b/frontend/src/components/sdcCollection/stepThreeVerifyData/RefugeeComponent.vue
@@ -8,6 +8,7 @@
           id="detailButton"
           size="large"
           class="detail-button"
+          :class="{ 'active-button': reportView === 'detail' }"
           @click="showDetail"
         >
           Detail View
@@ -16,6 +17,7 @@
           id="summaryButton"
           size="large"
           class="summary-button"
+          :class="{ 'active-button': reportView === 'summary' }"
           @click="showSummary"
         >
           Summary View
@@ -67,19 +69,22 @@ export default {
   }
 };
 </script>
-
-      <style scoped>
-      .detail-button {
-        background-color: #003366 !important;
-  color: white !important;
-      }
 
-      .summary-button {
-        color: #003366;
-        border: 1px solid #003366;
-      }
+<style scoped>
+.detail-button {
+  border: 1px solid lightgray;
+}
 
-      </style>
+.summary-button {
+  border: 1px solid lightgray;
+}
+
+.active-button {
+  background-color: #003366 !important;
+  color: white !important;
+  border: 1px solid #003366;
+}
+</style>
 
 
 

diff --git a/frontend/src/components/sdcCollection/stepThreeVerifyData/SpecialEduComponent.vue b/frontend/src/components/sdcCollection/stepThreeVerifyData/SpecialEduComponent.vue
@@ -8,6 +8,7 @@
           id="detailButton"
           size="large"
           class="detail-button"
+          :class="{ 'active-button': reportView === 'detail' }"
           @click="showDetail"
         >
           Detail View
@@ -16,6 +17,7 @@
           id="summaryButton"
           size="large"
           class="summary-button"
+          :class="{ 'active-button': reportView === 'summary' }"
           @click="showSummary"
         >
           Summary View
@@ -67,19 +69,22 @@ export default {
   }
 };
 </script>
-
-      <style scoped>
-      .detail-button {
-        background-color: #003366 !important;
-  color: white !important;
-      }
 
-      .summary-button {
-        color: #003366;
-        border: 1px solid #003366;
-      }
+<style scoped>
+.detail-button {
+  border: 1px solid lightgray;
+}
 
-      </style>
+.summary-button {
+  border: 1px solid lightgray;
+}
+
+.active-button {
+  background-color: #003366 !important;
+  color: white !important;
+  border: 1px solid #003366;
+}
+</style>