Merge pull request #373 from intersective/task/CORE-6498/form-api-int…

…egration [CORE-6508] fixed type error
intersective · Apr 20, 2024 · 8467e32 · 8467e32
2 parents d910ace + e280e87
commit 8467e32
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 56 deletions.
diff --git a/src/app/metrics/modal-view/modal-view.component.css b/src/app/metrics/modal-view/modal-view.component.css
diff --git 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>
diff --git a/src/app/metrics/modal-view/modal-view.component.scss 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
@@ -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;