Make Email eventlog behave like eventlog

dashboard/src/views/EmailEventlogView.vue

@@ -39,11 +39,6 @@ async function onRefresh() {
   refreshBusy.value = false;
 }
 
-function onEventLogDetails(id) {
-  if (activeId.value === id) activeId.value = '';
-  else activeId.value = id;
-}
-
 async function onScroll(event) {
   if (event.target.scrollTop + event.target.clientHeight >= event.target.scrollHeight) {
     page.value++;
@@ -93,7 +88,7 @@ onMounted(async () => {
           </thead>
           <tbody>
             <template v-for="eventlog in eventlogs" :key="eventlog._id">
-              <tr @click="onEventLogDetails(eventlog._id)" :class="{ 'active': activeId === eventlog._id }" >
+              <tr  @click="eventlog.isOpen = !eventlog.isOpen" :class="{ 'active': eventlog.isOpen }" >
                 <td class="no-wrap">
                   <i class="fas fa-arrow-circle-left" v-if="eventlog.type === 'sent'" v-tooltip="$t('emails.eventlog.type.outgoing')"></i>
                   <i class="fas fa-history" v-if="eventlog.type === 'deferred'" v-tooltip="$t('emails.eventlog.type.deferred')"></i>
@@ -126,7 +121,7 @@ onMounted(async () => {
                   </span>
                 </td>
               </tr>
-              <tr v-if="activeId === eventlog._id">
+              <tr v-if="eventlog.isOpen">
                 <td colspan="6" class="eventlog-details">
                   <pre>{{ JSON.stringify(eventlog, null, 4) }}</pre>
                 </td>
@@ -138,64 +133,3 @@ onMounted(async () => {
     </div>
   </div>
 </template>
-
-<style scoped>
-
-.eventlog-table {
-  width: 100%;
-  overflow: auto;
-  border-spacing: 0px;
-}
-
-.eventlog-table thead {
-  background-color: var(--pankow-body-background-color);
-  top: 0;
-  position: sticky;
-  z-index: 1; /* avoids see-through table headers if items in the table have opacity set */
-}
-
-.eventlog-table th {
-  text-align: left;
-}
-
-.eventlog-table tbody tr {
-  cursor: pointer;
-}
-
-.eventlog-table tbody tr.active,
-.eventlog-table tbody tr:hover {
-  background-color: var(--pankow-color-background-hover);
-}
-
-.eventlog-table tbody tr.active {
-  font-weight: bold;
-}
-
-.eventlog-table th,
-.eventlog-table td {
-  padding: 5px;
-}
-
-.eventlog-filter {
-  display: flex;
-  gap: 5px;
-  flex-wrap: wrap;
-  margin: 20px 0;
-}
-
-.eventlog-details {
-  background-color: var(--pankow-color-background-hover);
-  cursor: auto;
-}
-
-.eventlog-details pre {
-  white-space: pre-wrap;
-  color: var(--pankow-text-color);
-  font-size: 13px;
-  padding: 6px;
-  margin: 0;
-  border: none;
-  border-radius: var(--pankow-border-radius);
-}
-
-</style>