From f0a60d417e534144861ecce71f871a3c495ef776 Mon Sep 17 00:00:00 2001
From: art <art-nastya@inbox.ru>
Date: Sat, 27 May 2023 01:44:07 +0300
Subject: [PATCH 1/2] added mailable type to ray

---
 .../MailablePayload.stories.ts                | 23 +++++
 .../RayTypesPreview/MailablePayload.vue       | 91 +++++++++++++++++++
 .../RayDumpTypeMapper/RayDumpTypeMapper.vue   |  3 +
 config/constants.ts                           |  1 +
 4 files changed, 118 insertions(+)
 create mode 100644 components/RayDumpPreview/RayTypesPreview/MailablePayload.stories.ts
 create mode 100644 components/RayDumpPreview/RayTypesPreview/MailablePayload.vue

diff --git a/components/RayDumpPreview/RayTypesPreview/MailablePayload.stories.ts b/components/RayDumpPreview/RayTypesPreview/MailablePayload.stories.ts
new file mode 100644
index 00000000..08352965
--- /dev/null
+++ b/components/RayDumpPreview/RayTypesPreview/MailablePayload.stories.ts
@@ -0,0 +1,23 @@
+import { Meta, Story } from "@storybook/vue3";
+import { normalizeRayDumpEvent } from "~/utils/normalize-event";
+import eventMock from '~/mocks/ray-laravel-mailable.json';
+import MailablePayload from "~/components/RayDumpPreview/RayTypesPreview/MailablePayload.vue";
+
+export default {
+  title: "RayDump/Types/Mailable",
+  component: MailablePayload
+} as Meta<typeof MailablePayload>;
+
+const Template: Story = (args) => ({
+  components: { MailablePayload},
+  setup() {
+    return {
+      args,
+    };
+  },
+  template: `<MailablePayload v-bind="args" />`,
+});
+
+export const Mailable = Template.bind({});
+Mailable.args = {payload: normalizeRayDumpEvent(eventMock).payload.payload.payloads[0]};
+
diff --git a/components/RayDumpPreview/RayTypesPreview/MailablePayload.vue b/components/RayDumpPreview/RayTypesPreview/MailablePayload.vue
new file mode 100644
index 00000000..9edb43e6
--- /dev/null
+++ b/components/RayDumpPreview/RayTypesPreview/MailablePayload.vue
@@ -0,0 +1,91 @@
+<template>
+  <div class="ray-type-mailable">
+    <h3 v-if="eventValue.subject" class="font-bold">
+      {{ eventValue.subject }}
+    </h3>
+    <div v-if="eventValue.mailable_class" class="event-ray__mailable-class">
+      {{ eventValue.mailable_class }}
+    </div>
+
+    <div class="text-xs font-semibold mt-3 flex flex-wrap items-center">
+      <div class="flex border border-purple-300 rounded items-center mr-3 mb-2">
+        <div class="px-3 py-1 border-r">From</div>
+        <div class="px-3 py-1 bg-gray-800 text-white font-semibold rounded-r" v-for="email in eventValue.from">{{ email.name }} [{{ email.email }}]</div>
+      </div>
+
+      <div class="flex border border-purple-300 rounded items-center mr-3 mb-2" v-for="email in eventValue.to">
+        <div class="px-3 py-1 border-r">To</div>
+        <div class="px-3 py-1 bg-blue-800 text-white font-semibold rounded-r">{{ email.name }} [{{email.email}}]</div>
+      </div>
+
+      <div class="flex border border-purple-300 rounded items-center mr-3 mb-2" v-for="email in eventValue.cc">
+        <div class="px-3 py-1 border-r">CC</div>
+        <div class="px-3 py-1 bg-red-800 text-white font-semibold rounded-r">{{ email.name }} [{{email.email}}]</div>
+      </div>
+
+      <div class="flex border border-purple-300 rounded items-center mr-3 mb-2" v-for="email in eventValue.bcc">
+        <div class="px-3 py-1 border-r">BCC</div>
+        <div class="px-3 py-1 bg-purple-800 text-white font-semibold rounded-r">{{ email.name }} [{{email.email}}]</div>
+      </div>
+
+      <div class="flex border border-purple-300 rounded items-center mr-3 mb-2" v-for="email in eventValue.reply_to">
+        <div class="px-3 py-1 border-r">Reply to</div>
+        <div class="px-3 py-1 bg-green-800 text-white font-semibold rounded-r">{{ email.name }} [{{email.email}}]</div>
+      </div>
+    </div>
+    <div class="collapsed" :class="{'cursor-pointer': !collapsed}">
+      <h3 class="collapsed__title-wrap" @click="collapsed = !collapsed">
+        HTML
+        <div class="ray-type-mailable__icon">
+          <svg viewBox="0 0 16 16"
+               fill="currentColor"
+               height="100%"
+               width="100%"
+               :class="{'transform rotate-180':  collapsed}"
+          >
+            <path d="M14,11.75a.74.74,0,0,1-.53-.22L8,6.06,2.53,11.53a.75.75,0,0,1-1.06-1.06l6-6a.75.75,0,0,1,1.06,0l6,6a.75.75,0,0,1,0,1.06A.74.74,0,0,1,14,11.75Z"></path>
+          </svg>
+        </div>
+      </h3>
+
+      <div v-if="collapsed" class="collapsed__body">
+        <div v-html="eventValue.html"/>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType } from "vue";
+import { RayPayload } from "~/config/types";
+
+export default defineComponent({
+  props: {
+    payload: {
+      type: Object as PropType<RayPayload>,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      collapsed: true,
+    }
+  },
+  computed: {
+    isEmptyValue() {
+      return this.eventValue === "";
+    },
+    eventValue(): unknown {
+      return this.payload.content || "";
+    },
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+.ray-type-mailable{
+  &__icon {
+    @apply w-5 h-4 border border-purple-300 shadow bg-white dark:bg-gray-600 py-1 rounded;
+  }
+}
+</style>
diff --git a/components/RayDumpTypeMapper/RayDumpTypeMapper.vue b/components/RayDumpTypeMapper/RayDumpTypeMapper.vue
index 6d27422d..585a0ae0 100644
--- a/components/RayDumpTypeMapper/RayDumpTypeMapper.vue
+++ b/components/RayDumpTypeMapper/RayDumpTypeMapper.vue
@@ -17,6 +17,7 @@ import ViewsPayload from "~/components/RayDumpPreview/RayTypesPreview/ViewsPaylo
 import EventPayload from "~/components/RayDumpPreview/RayTypesPreview/EventPayload.vue";
 import JobPayload from "~/components/RayDumpPreview/RayTypesPreview/JobPayload.vue";
 import LockPayload from "~/components/RayDumpPreview/RayTypesPreview/LockPayload.vue";
+import MailablePayload from "~/components/RayDumpPreview/RayTypesPreview/MailablePayload.vue";
 
 export default defineComponent({
   props: {
@@ -55,6 +56,8 @@ export default defineComponent({
         h(JobPayload, {payload}),
       [RAY_EVENT_TYPES.LOCK]: (payload: RayPayload) =>
         h(LockPayload, {payload}),
+      [RAY_EVENT_TYPES.MAILABLE]: (payload: RayPayload) =>
+        h(MailablePayload, {payload}),
     };
 
     if (this.payload.type === 'hide') {
diff --git a/config/constants.ts b/config/constants.ts
index 85bf5e04..e9288f4d 100644
--- a/config/constants.ts
+++ b/config/constants.ts
@@ -21,6 +21,7 @@ export const RAY_EVENT_TYPES = {
   //HIDE: "hide",
   MEASURE: "measure",
   //NOTIFY: "notify",
+  MAILABLE: "mailable",
   TABLE: "table",
   TRACE: "trace",
   QUERY: "executed_query",

From 34bfad110134f258aa2c806a8ce86631ae410d7b Mon Sep 17 00:00:00 2001
From: art <art-nastya@inbox.ru>
Date: Wed, 31 May 2023 01:02:37 +0300
Subject: [PATCH 2/2] fixed style of mailable

---
 components/IconSvg/IconSvg.vue                |  5 +
 components/IconSvg/collapsed.svg              |  3 +
 .../RayTypesPreview/MailablePayload.vue       | 95 ++++++++++---------
 3 files changed, 57 insertions(+), 46 deletions(-)
 create mode 100644 components/IconSvg/collapsed.svg

diff --git a/components/IconSvg/IconSvg.vue b/components/IconSvg/IconSvg.vue
index 2a0b3bf0..b3868912 100644
--- a/components/IconSvg/IconSvg.vue
+++ b/components/IconSvg/IconSvg.vue
@@ -426,6 +426,11 @@
       <path fill-rule="evenodd" clip-rule="evenodd"
             d="M5 0a4 4 0 0 0-4 4v11.27A2 2 0 0 0 0 17v2a3 3 0 0 0 3 3h20a3 3 0 0 0 3-3v-2a2 2 0 0 0-1-1.73V4a4 4 0 0 0-4-4H5Zm18 15V4a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v11h5.5l2 1.5H15l2.25-1.5H23Zm-6.9 3.16L17.87 17H24v2a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1v-2h5.83l1.47 1.1.53.4h5.77l.5-.34Zm3.02-11.35h-2.18v4.38h.87V9.88h1.32A.88.88 0 0 0 20 9V7.69a.88.88 0 0 0-.88-.88ZM17.82 9V7.69h1.3V9h-1.3Zm-6.57-1.31h-.88V6.8H13v.88h-.88v3.5h-.87v-3.5Zm4.81-.88h-2.62v.88h.87v3.5h.88v-3.5h.87V6.8ZM8.63 8.56V6.81h.87v4.38h-.88V9.44h-1.3v1.75h-.88V6.8h.87v1.75h1.32Z"/>
     </svg>
+    <svg
+      v-if="name === 'collapsed'"
+      viewBox="0 0 16 16" fill="currentColor" height="100%" width="100%">
+      <path d="M14,11.75a.74.74,0,0,1-.53-.22L8,6.06,2.53,11.53a.75.75,0,0,1-1.06-1.06l6-6a.75.75,0,0,1,1.06,0l6,6a.75.75,0,0,1,0,1.06A.74.74,0,0,1,14,11.75Z"></path>
+    </svg>
   </div>
 </template>
 
diff --git a/components/IconSvg/collapsed.svg b/components/IconSvg/collapsed.svg
new file mode 100644
index 00000000..64752c90
--- /dev/null
+++ b/components/IconSvg/collapsed.svg
@@ -0,0 +1,3 @@
+<svg viewBox="0 0 16 16" fill="currentColor" height="100%" width="100%">
+  <path d="M14,11.75a.74.74,0,0,1-.53-.22L8,6.06,2.53,11.53a.75.75,0,0,1-1.06-1.06l6-6a.75.75,0,0,1,1.06,0l6,6a.75.75,0,0,1,0,1.06A.74.74,0,0,1,14,11.75Z"></path>
+</svg>
diff --git a/components/RayDumpPreview/RayTypesPreview/MailablePayload.vue b/components/RayDumpPreview/RayTypesPreview/MailablePayload.vue
index 9edb43e6..2293ff7b 100644
--- a/components/RayDumpPreview/RayTypesPreview/MailablePayload.vue
+++ b/components/RayDumpPreview/RayTypesPreview/MailablePayload.vue
@@ -1,54 +1,37 @@
 <template>
   <div class="ray-type-mailable">
-    <h3 v-if="eventValue.subject" class="font-bold">
-      {{ eventValue.subject }}
-    </h3>
-    <div v-if="eventValue.mailable_class" class="event-ray__mailable-class">
-      {{ eventValue.mailable_class }}
-    </div>
-
-    <div class="text-xs font-semibold mt-3 flex flex-wrap items-center">
-      <div class="flex border border-purple-300 rounded items-center mr-3 mb-2">
-        <div class="px-3 py-1 border-r">From</div>
-        <div class="px-3 py-1 bg-gray-800 text-white font-semibold rounded-r" v-for="email in eventValue.from">{{ email.name }} [{{ email.email }}]</div>
-      </div>
-
-      <div class="flex border border-purple-300 rounded items-center mr-3 mb-2" v-for="email in eventValue.to">
-        <div class="px-3 py-1 border-r">To</div>
-        <div class="px-3 py-1 bg-blue-800 text-white font-semibold rounded-r">{{ email.name }} [{{email.email}}]</div>
-      </div>
-
-      <div class="flex border border-purple-300 rounded items-center mr-3 mb-2" v-for="email in eventValue.cc">
-        <div class="px-3 py-1 border-r">CC</div>
-        <div class="px-3 py-1 bg-red-800 text-white font-semibold rounded-r">{{ email.name }} [{{email.email}}]</div>
-      </div>
-
-      <div class="flex border border-purple-300 rounded items-center mr-3 mb-2" v-for="email in eventValue.bcc">
-        <div class="px-3 py-1 border-r">BCC</div>
-        <div class="px-3 py-1 bg-purple-800 text-white font-semibold rounded-r">{{ email.name }} [{{email.email}}]</div>
-      </div>
-
-      <div class="flex border border-purple-300 rounded items-center mr-3 mb-2" v-for="email in eventValue.reply_to">
-        <div class="px-3 py-1 border-r">Reply to</div>
-        <div class="px-3 py-1 bg-green-800 text-white font-semibold rounded-r">{{ email.name }} [{{email.email}}]</div>
-      </div>
-    </div>
-    <div class="collapsed" :class="{'cursor-pointer': !collapsed}">
-      <h3 class="collapsed__title-wrap" @click="collapsed = !collapsed">
-        HTML
+    <EventTable>
+      <EventTableRow v-if="eventValue.subject" title="Subject">
+        {{ eventValue.subject }}
+      </EventTableRow>
+      <EventTableRow v-if="eventValue.mailable_class" title="Mailable class">
+        {{ eventValue.mailable_class }}
+      </EventTableRow>
+      <EventTableRow title="From" v-if="eventValue.from && eventValue.from.length > 0">
+        {{getValuesField(eventValue.from)}}
+      </EventTableRow>
+      <EventTableRow title="To" v-if="eventValue.to && eventValue.to.length > 0">
+        {{getValuesField(eventValue.to)}}
+      </EventTableRow>
+      <EventTableRow title="Cc" v-if="eventValue.cc && eventValue.cc.length > 0">
+        {{getValuesField(eventValue.cc)}}
+      </EventTableRow>
+      <EventTableRow title="Bcc" v-if="eventValue.bcc && eventValue.bcc.length > 0">
+        {{getValuesField(eventValue.bcc)}}
+      </EventTableRow>
+      <EventTableRow title="Reply to" v-if="eventValue.reply_to && eventValue.reply_to.length > 0">
+        {{getValuesField(eventValue.reply_to)}}
+      </EventTableRow>
+    </EventTable>
+    <div class="ray-type-mailable__collapsed" :class="{'cursor-pointer': !collapsed}">
+      <h3 class="ray-type-mailable__collapsed-header" @click="collapsed = !collapsed" >
+        <span>HTML</span>
         <div class="ray-type-mailable__icon">
-          <svg viewBox="0 0 16 16"
-               fill="currentColor"
-               height="100%"
-               width="100%"
-               :class="{'transform rotate-180':  collapsed}"
-          >
-            <path d="M14,11.75a.74.74,0,0,1-.53-.22L8,6.06,2.53,11.53a.75.75,0,0,1-1.06-1.06l6-6a.75.75,0,0,1,1.06,0l6,6a.75.75,0,0,1,0,1.06A.74.74,0,0,1,14,11.75Z"></path>
-          </svg>
+          <IconSvg name="collapsed"  :class="{'transform rotate-180':  collapsed}" />
         </div>
       </h3>
 
-      <div v-if="collapsed" class="collapsed__body">
+      <div v-if="collapsed" class="ray-type-mailable__body">
         <div v-html="eventValue.html"/>
       </div>
     </div>
@@ -58,8 +41,16 @@
 <script lang="ts">
 import { defineComponent, PropType } from "vue";
 import { RayPayload } from "~/config/types";
+import EventTableRow from "~/components/EventTableRow/EventTableRow.vue";
+import EventTable from "~/components/EventTable/EventTable.vue";
+import IconSvg from "~/components/IconSvg/IconSvg.vue";
 
 export default defineComponent({
+  components: {
+    EventTableRow,
+    EventTable,
+    IconSvg,
+  },
   props: {
     payload: {
       type: Object as PropType<RayPayload>,
@@ -79,13 +70,25 @@ export default defineComponent({
       return this.payload.content || "";
     },
   },
+  methods: {
+    getValuesField(values: {name: string, email: string}[]): string {
+      const formattedValues = values!.map(v =>  v.name + '[' + v.email + ']') || [];
+      return formattedValues.join(', ');
+    }
+  }
 });
 </script>
 
 <style lang="scss" scoped>
 .ray-type-mailable{
   &__icon {
-    @apply w-5 h-4 border border-purple-300 shadow bg-white dark:bg-gray-600 py-1 rounded;
+    @apply w-5 h-4 border border-purple-300 shadow bg-white dark:bg-gray-600 py-1 rounded mt-0.5 flex items-center justify-center;
+    .icon-svg {
+      width: 10px;
+    }
+  }
+  &__collapsed-header {
+    @apply flex w-full justify-between my-2;
   }
 }
 </style>