👽 detail modal added (#14)

* 👽 detail modal added

* z-index bug fixed

* content improved

* date updated

* 🫥 ui event added, detail table item order changed

* table style improved

components/base-modal.vue

@@ -63,6 +63,8 @@ onUnmounted(() => {
   border-radius: 10px;
   transform: translateY(100%);
   animation: bottomToTop 0.1s forwards ease-out;
+  max-height: 90vh;
+  overflow-y: auto;
   &--mobile {
     width: 100vw;
     height: auto;

components/detail-table.vue

@@ -0,0 +1,64 @@
+<template>
+  <table class="table">
+    <tbody>
+      <tr>
+        <th>Tarih</th>
+        <td>{{ $dayjs(data.Date).format("DD/MM/YYYY HH:MM:ss") }}</td>
+      </tr>
+      <tr>
+        <th>Enlem</th>
+        <td>{{ data.Latitude }}</td>
+      </tr>
+      <tr>
+        <th>Boylam</th>
+        <td>{{ data.Longitude }}</td>
+      </tr>
+      <tr>
+        <th>Derinlik</th>
+        <td>{{ data.Depth }} Km</td>
+      </tr>
+      <tr>
+        <th>Büyüklük</th>
+        <td>{{ data.Magnitude }} MW</td>
+      </tr>
+      <tr>
+        <th>Konum</th>
+        <td>{{ data.Region.District + " - " + data.Region.City }}</td>
+      </tr>
+    </tbody>
+  </table>
+</template>
+<script lang="ts" setup>
+import EarthquakeInterface from "~~/interfaces/earthquake.interface";
+type Props = {
+  data: EarthquakeInterface;
+};
+const { data } = defineProps<Props>();
+const { $dayjs } = useNuxtApp();
+</script>
+
+<style lang="scss" scoped>
+.table {
+  width: 100%;
+  font-size: 13px;
+  margin-bottom: 25px;
+  tr {
+    td,
+    th {
+      width: 100%;
+    }
+    td {
+      border: 1px solid $dark;
+      font-weight: bold;
+      padding: 10px;
+    }
+    th {
+      text-align: left;
+      background-color: $dark;
+      color: $white;
+      width: 30%;
+      padding-left: 15px;
+    }
+  }
+}
+</style>

components/earthquake-list-item.vue

@@ -69,12 +69,35 @@
           @open-chart-detail-modal="openChartDetailModalHandler"
         />
       </BaseModal>
+      <BaseModal
+        v-if="isEarthquakeDetailModalVisible"
+        title="Deprem Detay"
+        @close="closeEarthquakeDetailModalHandler"
+      >
+        <DetailTable :data="data" />
+        <EarthquakesChart
+          v-if="allTimeData?.length"
+          :magnitude-val="getMagnitudeVal"
+          :all-time-data="allTimeData"
+          :width="chartStyle.modal.width"
+          :height="140"
+          :is-has-grid="true"
+          :active-earthquake="data"
+        />
+      </BaseModal>
+      <img
+        class="earthquake-item__detail-icon"
+        src="@/assets/svg/eye.svg"
+        alt="Detail modal icon"
+        @click="openEarthquakeDetailModal"
+      />
     </ClientOnly>
   </article>
 </template>
 <script setup lang="ts">
 import EarthquakesChart from "./earthquakes-chart.vue";
 import BaseModal from "./base-modal.vue";
+import DetailTable from "./detail-table.vue";
 import EarthquakeInterface from "~~/interfaces/earthquake.interface";
 import { magnitudeLevels } from "~~/constants/magnitude.constants";
 import { isMobile } from "~~/utils/screen.util";
@@ -83,9 +106,10 @@ interface Props {
   data: EarthquakeInterface;
   allTimeData: Array<EarthquakeInterface> | undefined;
 }
-const { $dayjs } = useNuxtApp();
+const { $dayjs, $gtm } = useNuxtApp();
 const { data, allTimeData } = defineProps<Props>();
 const isChartDetailModalVisible = ref(false);
+const isEarthquakeDetailModalVisible = ref(false);
 const dateFromNow = $dayjs(data.Date).from(new Date());
 
 const getMagnitudeVal = ((): string => {
@@ -101,7 +125,7 @@ const chartStyle = computed(() => {
   if (process.client) {
     return {
       modal: {
-        width: isMobile() ? window?.innerWidth - 50 : 436,
+        width: isMobile() ? window?.innerWidth - 43 : 436,
       },
       listing: {
         width: isMobile() ? 130 : 240,
@@ -116,6 +140,17 @@ const openChartDetailModalHandler = () => {
 const closeChartDetailModalHandler = () => {
   isChartDetailModalVisible.value = false;
 };
+const openEarthquakeDetailModal = () => {
+  $gtm.pushUIEvent({
+    eventCategory: "Earthquake Detail Click",
+    eventAction: data.Region.City + " " + data.Region.District,
+    eventLabel: "/",
+  });
+  isEarthquakeDetailModalVisible.value = true;
+};
+const closeEarthquakeDetailModalHandler = () => {
+  isEarthquakeDetailModalVisible.value = false;
+};
 </script>
 <style lang="scss" scoped>
 .earthquake-item {
@@ -124,6 +159,7 @@ const closeChartDetailModalHandler = () => {
   justify-content: space-between;
   margin: 10px 0;
   border-radius: 10px;
+  position: relative;
   @include small-device {
     margin: 5px 0;
     height: 100px;
@@ -165,6 +201,11 @@ const closeChartDetailModalHandler = () => {
         color: $red;
       }
     }
+    .detail-icon {
+      position: absolute;
+      width: 30px;
+      left: 0;
+    }
     .content {
       align-items: flex-start;
       height: 80px;
@@ -212,6 +253,17 @@ const closeChartDetailModalHandler = () => {
       margin-right: 5px;
     }
   }
+  &__detail-icon {
+    position: absolute;
+    right: 8px;
+    top: 8px;
+    width: 30px;
+    cursor: pointer;
+    z-index: 1;
+    @include small-device {
+      width: 20px;
+    }
+  }
   .chart-detail-modal {
     text-align: left;
     :deep(.modal__content) {

components/earthquakes-chart.vue

@@ -196,6 +196,5 @@ onMounted(() => {
 }
 .chart-container {
   position: relative;
-  width: 100%;
 }
 </style>