Feature/mailable

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>
 

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]};
+

components/RayDumpPreview/RayTypesPreview/MailablePayload.vue

@@ -0,0 +1,94 @@
+<template>
+  <div class="ray-type-mailable">
+    <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">
+          <IconSvg name="collapsed"  :class="{'transform rotate-180':  collapsed}" />
+        </div>
+      </h3>
+
+      <div v-if="collapsed" class="ray-type-mailable__body">
+        <div v-html="eventValue.html"/>
+      </div>
+    </div>
+  </div>
+</template>
+
+<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>,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      collapsed: true,
+    }
+  },
+  computed: {
+    isEmptyValue() {
+      return this.eventValue === "";
+    },
+    eventValue(): unknown {
+      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 mt-0.5 flex items-center justify-center;
+    .icon-svg {
+      width: 10px;
+    }
+  }
+  &__collapsed-header {
+    @apply flex w-full justify-between my-2;
+  }
+}
+</style>

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') {

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",