From e280e8780a0ec50f5472c8a13496b46f706acf4f Mon Sep 17 00:00:00 2001
From: chaw <3895281+trtshen@users.noreply.github.com>
Date: Sat, 20 Apr 2024 13:47:03 +0800
Subject: [PATCH] [CORE-6508] fixed type error

---
 .../modal-view/modal-view.component.css       | 44 ----------------
 .../modal-view/modal-view.component.html      | 52 +++++++++++++++----
 .../modal-view/modal-view.component.scss      |  8 +++
 .../modal-view/modal-view.component.ts        |  2 +-
 4 files changed, 50 insertions(+), 56 deletions(-)
 delete mode 100644 src/app/metrics/modal-view/modal-view.component.css
 create mode 100644 src/app/metrics/modal-view/modal-view.component.scss

diff --git a/src/app/metrics/modal-view/modal-view.component.css b/src/app/metrics/modal-view/modal-view.component.css
deleted file mode 100644
index 1996849e..00000000
--- a/src/app/metrics/modal-view/modal-view.component.css
+++ /dev/null
@@ -1,44 +0,0 @@
-ion-header {
-  background-color: #f5f5f5;
-  color: #333;
-  padding: 16px;
-  border-bottom: 1px solid #ddd;
-}
-
-ion-title {
-  font-size: 18px;
-  font-weight: bold;
-}
-
-ion-content {
-  --background: #fff;
-}
-
-ion-toolbar {
-  --background: transparent;
-  --padding-start: 0;
-  --padding-end: 0;
-}
-
-ion-icon {
-  font-size: 24px;
-}
-
-p {
-  font-size: 16px;
-  margin: 0;
-  padding: 16px;
-}
-
-.metric-details {
-  background-color: #f5f5f5;
-  padding: 16px;
-}
-
-.metric-details p {
-  margin-bottom: 8px;
-}
-
-.metric-details p:last-child {
-  margin-bottom: 0;
-}
\ No newline at end of file
diff --git a/src/app/metrics/modal-view/modal-view.component.html b/src/app/metrics/modal-view/modal-view.component.html
index 7976a657..8acf23e1 100644
--- a/src/app/metrics/modal-view/modal-view.component.html
+++ b/src/app/metrics/modal-view/modal-view.component.html
@@ -10,14 +10,44 @@
 </ion-header>
 
 <ion-content>
-  <div class="metric-details">
-    <p><strong>Title: </strong>{{ data.name }}</p>
-    <p><strong>Description: </strong> {{ data.description }}</p>
-    <p><strong>Data Source: </strong>{{ data.dataSource }}</p>
-    <p><strong>Aggregation Technique: </strong>{{ data.aggregation }}</p>
-    <p><strong>Filter: </strong>{{ data.filterType }}</p>
-    <p><strong>Public: </strong>{{ data.isPublic }}</p>
-    <p><strong>Status: </strong>{{ data.status }}</p>
-    <p><strong>Value: </strong>{{ data.filterValue }}</p>
-  </div>
-</ion-content>
+  <ion-card>
+    <ion-card-header>
+      <ion-card-title>{{ data.name }}</ion-card-title>
+      <ion-card-subtitle>Status: {{ data.status }}</ion-card-subtitle>
+    </ion-card-header>
+    <ion-card-content>
+      <ion-list lines="none">
+        <ion-item>
+          <ion-label class="ion-text-wrap">
+            <strong>Description:</strong> {{ data.description }}
+          </ion-label>
+        </ion-item>
+        <ion-item>
+          <ion-label class="ion-text-wrap">
+            <strong>Data Source:</strong> {{ data.dataSource }}
+          </ion-label>
+        </ion-item>
+        <ion-item>
+          <ion-label class="ion-text-wrap">
+            <strong>Aggregation Technique:</strong> {{ data.aggregation }}
+          </ion-label>
+        </ion-item>
+        <ion-item>
+          <ion-label class="ion-text-wrap">
+            <strong>Filter Role:</strong> {{ data.filterRole }}
+          </ion-label>
+        </ion-item>
+        <ion-item>
+          <ion-label class="ion-text-wrap">
+            <strong>Filter Status:</strong> {{ data.filterStatus }}
+          </ion-label>
+        </ion-item>
+        <ion-item>
+          <ion-label class="ion-text-wrap">
+            <strong>Public:</strong> {{ data.isPublic ? 'Yes' : 'No' }}
+          </ion-label>
+        </ion-item>
+      </ion-list>
+    </ion-card-content>
+  </ion-card>
+</ion-content>
\ No newline at end of file
diff --git a/src/app/metrics/modal-view/modal-view.component.scss b/src/app/metrics/modal-view/modal-view.component.scss
new file mode 100644
index 00000000..9c7c5308
--- /dev/null
+++ b/src/app/metrics/modal-view/modal-view.component.scss
@@ -0,0 +1,8 @@
+ion-card {
+  padding: 10px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+}
+
+ion-label {
+  font-size: 16px;
+}
diff --git a/src/app/metrics/modal-view/modal-view.component.ts b/src/app/metrics/modal-view/modal-view.component.ts
index ec69e88f..4c748857 100644
--- a/src/app/metrics/modal-view/modal-view.component.ts
+++ b/src/app/metrics/modal-view/modal-view.component.ts
@@ -5,7 +5,7 @@ import { Metric } from '../metrics.service';
 @Component({
   selector: 'app-metric-view',
   templateUrl: './modal-view.component.html',
-  styleUrls: ['./modal-view.component.css'],
+  styleUrls: ['./modal-view.component.scss'],
 })
 export class MetricModalViewComponent {
   @Input() data: Metric;