#131 fulfill var-dump page

pages/var-dump/[id].vue

@@ -1,12 +1,12 @@
 <script lang="ts" setup>
 import { computed, onMounted, ref } from "vue";
+import { VarDumpPage } from "~/src/screens/var-dump";
 import { useFetch, useHead, useNuxtApp, useRoute, useRouter } from "#app"; // eslint-disable-line @conarti/feature-sliced/layers-slices
 import { PageHeader } from "~/src/widgets/ui";
 import { useVarDump } from "~/src/entities/var-dump";
 import type { VarDump } from "~/src/entities/var-dump/types";
 import { useEvents } from "~/src/shared/lib/use-events";
-import type { EventId, NormalizedEvent, ServerEvent } from "~/src/shared/types";
-import { ValueDump } from "~/src/shared/ui";
+import type { EventId, ServerEvent } from "~/src/shared/types";
 
 const { normalizeVarDumpEvent } = useVarDump();
 
@@ -73,8 +73,8 @@ onMounted(getEvent);
  <div></div>
  </div>
 
- <div class="var-dump__body">
- {{ JSON.stringify(event) }}
+ <div v-if="event" class="var-dump__body">
+ <VarDumpPage :event="event" />
  </div>
  </main>
 </template>

src/entities/var-dump/types.ts

@@ -5,10 +5,16 @@ export interface VarDump {
  },
  context: {
  timestamp: number,
- cli: {
+ cli?: {
  command_line: string,
  identifier: string
  },
+ request?: {
+ identifier?: string,
+ method?: string,
+ uri?: string,
+ controller?: string,
+ },
  source: {
  name: string,
  file: string,

src/screens/var-dump/index.ts

@@ -0,0 +1 @@
+export * from './ui'

src/screens/var-dump/ui/index.ts

@@ -0,0 +1 @@
+export * from './var-dump-page'

src/screens/var-dump/ui/var-dump-page/index.ts

@@ -0,0 +1 @@
+export { default as VarDumpPage } from './var-dump-page.vue';

src/screens/var-dump/ui/var-dump-page/var-dump-page.stories.ts

@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from "@storybook/vue3";
+import { useVarDump } from "~/src/entities/var-dump";
+import { varDumpObjectMock } from '~/src/entities/var-dump/mocks';
+import VarDump from './var-dump-page.vue';
+
+const { normalizeVarDumpEvent } = useVarDump();
+
+export default {
+ title: "Screens/VarDump/VarDumpPage",
+ component: VarDump
+} as Meta<typeof VarDump>;
+
+
+export const Default: StoryObj<typeof VarDump> = {
+ args: {
+ event: normalizeVarDumpEvent(varDumpObjectMock),
+ }
+}

src/screens/var-dump/ui/var-dump-page/var-dump-page.vue

@@ -0,0 +1,114 @@
+<script lang="ts" setup>
+import moment from "moment/moment";
+import { computed } from "vue";
+import type { VarDump } from "~/src/entities/var-dump/types";
+import type { NormalizedEvent } from "~/src/shared/types";
+import { TableBase, TableBaseRow, ValueDump } from "~/src/shared/ui";
+
+type Props = {
+ event: NormalizedEvent<VarDump>;
+};
+
+const props = defineProps<Props>();
+
+const title = computed(() => {
+ const type = String(props.event.payload.payload.type || "Unknown type");
+
+ return type[0].toUpperCase() + type.slice(1);
+});
+
+const date = computed(() =>
+ moment(props.event.date).format("DD.MM.YYYY HH:mm:ss")
+);
+</script>
+
+<template>
+ <div ref="main" class="var-dump">
+ <main class="var-dump__in">
+ <header class="var-dump__header">
+ <h2 class="var-dump__header-title">
+ {{ title }}
+ </h2>
+ <div class="var-dump__header-meta">
+ <span class="var-dump__header-date">{{ date }}</span>
+ </div>
+ </header>
+
+ <section class="var-dump__body">
+ <ValueDump
+ :value="event.payload.payload.value"
+ :type="event.payload.payload.type"
+ />
+ </section>
+
+ <section class="var-dump__body">
+ <h3 class="var-dump__body-text">Source</h3>
+ <TableBase class="var-dump__body-table">
+ <TableBaseRow
+ v-for="(value, name) in event.payload.context.source"
+ :key="name"
+ :title="String(name)"
+ >
+ {{ value }}
+ </TableBaseRow>
+ </TableBase>
+ </section>
+
+ <section class="var-dump__body">
+ <h3 class="var-dump__body-text">Request</h3>
+ <TableBase class="var-dump__body-table">
+ <template
+ v-for="(value, name) in event.payload.context.request"
+ :key="name"
+ >
+ <TableBaseRow v-if="name && value" :title="String(name)">
+ {{ value }}
+ </TableBaseRow>
+ </template>
+ </TableBase>
+ </section>
+ </main>
+ </div>
+</template>
+
+<style lang="scss" scoped>
+@import "src/assets/mixins";
+
+.var-dump {
+ @apply relative;
+}
+
+.var-dump__in {
+ @apply flex flex-col h-full flex-grow py-5 px-4 md:px-6 lg:px-8;
+}
+
+.var-dump__header {
+ @apply flex flex-col md:flex-row justify-between items-center mb-5;
+}
+
+.var-dump__header-meta {
+ @apply flex flex-col md:flex-row items-center gap-x-5;
+}
+
+.var-dump__header-title {
+ @apply text-sm sm:text-base md:text-lg lg:text-2xl;
+}
+
+.var-dump__header-date {
+ @include text-muted;
+ @apply text-sm font-semibold;
+}
+
+.var-dump__body {
+ @apply py-5;
+}
+
+.var-dump__body-text {
+ @include text-muted;
+ @apply font-bold uppercase text-sm mb-5;
+}
+
+.var-dump__body-table {
+ @apply mt-3;
+}
+</style>

src/shared/ui/code-snippet/code-snippet.vue

@@ -7,12 +7,13 @@ import { IconSvg } from "../icon-svg";
 const CodeHighlight = highlightPlugin.component;
 
 type Props = {
- code: string | unknown;
- language: string;
+ code?: string;
+ language?: string;
 };
 
 const props = withDefaults(defineProps<Props>(), {
  language: "plaintext",
+ code: "",
 });
 
 const isCopied = ref(false);
@@ -51,7 +52,7 @@ const copyCode = (): void => {
  :class="{ 'code-snippet__copy--active': isCopied }"
  @click="copyCode"
  >
- <IconSvg name="copy" class="code-snippet__copy-icon"/>
+ <IconSvg name="copy" class="code-snippet__copy-icon" />
  Copy
  </button>
  </div>

src/shared/ui/value-dump/value-dump.vue

@@ -1,37 +1,39 @@
 <script lang="ts" setup>
 import isString from "lodash/isString";
-import { onMounted } from "vue";
+import { computed, onMounted } from "vue";
 import SfdumpWrap from "../../lib/vendor/dumper";
 import { CodeSnippet } from "../code-snippet";
 
 type Props = {
- value: string;
- type: string;
- language: string;
+ value: string | number | boolean;
+ type?: string;
+ language?: string;
 };
 
 const props = withDefaults(defineProps<Props>(), {
  type: "",
  language: "plaintext",
 });
 
-const isValueString = isString(props.value) && props.type === "string";
-const isValueCode = isString(props.value) && (props.type === "code");
+const isValueString = computed(
+ () => isString(props.value) && props.type === "string"
+);
+const isValueCode = computed(
+ () => isString(props.value) && props.type === "code"
+);
 
 const dumpId = String(props.value).match(/(sf-dump-[0-9]+)/i)?.[0] || null;
-const makeDumpBody = () => {
+const dumpBody = computed(() => {
  if (props.type === "boolean") {
  return props.value === "1" ? "true" : "false";
  }
 
- if (isValueString && !props.value.replace(/\s/g, '').length) {
+ if (isValueString.value) {
  return `"${props.value}"`;
  }
 
  return props.value;
-};
-
-const dumpBody = makeDumpBody();
+});
 
 onMounted(() => {
  const sfdump = SfdumpWrap(window.document);
@@ -44,8 +46,16 @@ onMounted(() => {
 
 <template>
  <div class="value-dump">
- <CodeSnippet v-if="isValueString || isValueCode" :language="language" :code="dumpBody"/>
- <div v-else class="value-dump__html" v-html="dumpBody"/>
+ <CodeSnippet
+ v-if="isValueString || isValueCode"
+ :language="language"
+ :code="dumpBody"
+ />
+ <div
+ v-if="!isValueString && !isValueCode"
+ class="value-dump__html"
+ v-html="dumpBody"
+ />
  </div>
 </template>