rework page layouts

buggregator · Jun 29, 2024 · c5a1855 · c5a1855
1 parent 6c09e71
commit c5a1855
Show file tree

Hide file tree

Showing 29 changed files with 263 additions and 362 deletions.
diff --git a/app.vue b/app.vue
@@ -1,7 +1,5 @@
 <template>
-  <NuxtLayout>
-    <NuxtPage />
-  </NuxtLayout>
+  <NuxtPage />
 </template>
 
 <script lang="ts" setup>

diff --git a/layouts/default.vue b/layouts/default.vue
@@ -1,13 +1,8 @@
 <script lang="ts" setup>
-import { storeToRefs } from "pinia";
-import { computed, onMounted, watchEffect } from "vue";
-import { LayoutSidebar, PageHeader } from "~/src/widgets/ui";
-import { PAGE_TYPES } from "~/src/shared/constants";
+import { onMounted } from "vue";
+import { LayoutSidebar } from "~/src/widgets/ui";
 import { useEvents } from "~/src/shared/lib/use-events";
 import SfdumpWrap from "~/src/shared/lib/vendor/dumper";
-import { useSettingsStore } from "~/src/shared/stores";
-import type { EventType } from "~/src/shared/types";
-import { BadgeNumber, PauseButton } from "~/src/shared/ui";
 
 SfdumpWrap(window.document);
 
@@ -18,96 +13,18 @@ onMounted(() => {
     events.getAll();
   }
 });
-
-const { events, cachedEvents, getItemsCount } = useEvents();
-const { isVisibleEventCounts } = storeToRefs(useSettingsStore());
-
-const title = "Home";
-const props = {
-  type: PAGE_TYPES.ALL_EVENTS,
-};
-
-const clearEvents = () => {
-  if (props.type === PAGE_TYPES.ALL_EVENTS) {
-    return events.removeAll();
-  }
-
-  // TODO: fix types to sing EVENT_TYPES with PAGE_TYPES
-  return events.removeByType(props.type as unknown as EventType);
-};
-
-const isEventsPaused = computed(
-  () => cachedEvents.idsByType.value[props.type]?.length > 0
-);
-
-const allEvents = computed(() => {
-  if (props.type === PAGE_TYPES.ALL_EVENTS) {
-    return events.items.value;
-  }
-  return events.items.value.filter(({ type }) => type === props.type);
-});
-
-const visibleEvents = computed(() => {
-  if (!isEventsPaused.value) {
-    return allEvents.value;
-  }
-
-  return allEvents.value.filter(({ uuid }) =>
-    cachedEvents.idsByType.value[props.type]?.includes(uuid)
-  );
-});
-
-const hiddenEventsCount = computed(
-  () => events.items.value.length - visibleEvents.value.length
-);
-
-const toggleUpdate = () => {
-  if (isEventsPaused.value) {
-    cachedEvents.runUpdatesByType(props.type);
-  } else {
-    cachedEvents.stopUpdatesByType(props.type);
-  }
-};
-
-const badgeNumber = computed(() =>
-  getItemsCount.value(
-    props.type !== PAGE_TYPES.ALL_EVENTS
-      ? (props.type as unknown as EventType)
-      : undefined
-  )
-);
-
-watchEffect(() => {});
 </script>
 
 <template>
   <div class="main-layout">
-    <LayoutSidebar class="main-layout__sidebar" />
+    <div class="main-layout__sidebar">
+      <slot name="sidebar">
+        <LayoutSidebar />
+      </slot>
+    </div>
 
     <div class="main-layout__header">
-      <PageHeader>
-        <NuxtLink to="/" :disabled="!title">Home</NuxtLink>
-
-        <template v-if="title">
-          <span>&nbsp;/&nbsp;</span>
-          <NuxtLink :disabled="true">{{ title }}</NuxtLink>
-        </template>
-
-        <template #controls>
-          <PauseButton
-            :disabled-pause="visibleEvents.length === 0"
-            :is-paused="isEventsPaused"
-            :total-new-events-count="hiddenEventsCount"
-            @toggle-update="toggleUpdate"
-          />
-
-          <BadgeNumber :number="badgeNumber" :is-visible="isVisibleEventCounts">
-            <button class="main-layout__clear-button" @click="clearEvents">
-              Clear events
-            </button>
-          </BadgeNumber>
-        </template>
-      </PageHeader>
+      <slot name="header" />
     </div>
 
     <div class="main-layout__content">
@@ -134,15 +51,10 @@ watchEffect(() => {});
 
 .main-layout__content {
   @include layout-body;
-  @apply flex flex-col h-full flex-1 w-full min-h-screen absolute top-0 left-0 pl-10 md:pl-14 lg:pl-16;
+  @apply flex flex-col h-full flex-1 w-full min-h-screen absolute top-0 left-0;
 
   & > div {
     @apply flex flex-col h-full flex-1;
   }
 }
-
-.main-layout__clear-button {
-  @include button;
-  @apply bg-red-800 hover:bg-red-700;
-}
 </style>
diff --git a/pages/http-dump/[id].vue b/pages/http-dump/[id].vue
@@ -54,37 +54,27 @@ onMounted(getEvent);
 </script>
 
 <template>
-  <main class="http-dump-event">
-    <PageEventHeader title="Http dumps" :event-id="eventId" />
+  <NuxtLayout>
+    <template #header>
+      <PageEventHeader title="Http dumps" :event-id="eventId" />
+    </template>
 
     <div v-if="isLoading && !event" class="http-dump-event__loading">
       <div></div>
       <div></div>
       <div></div>
     </div>
 
-    <div class="http-dump-event__body">
-      <HttpDumpPage v-if="event" :event="event" />
-    </div>
-  </main>
+    <HttpDumpPage v-if="event" :event="event" />
+  </NuxtLayout>
 </template>
 
 <style lang="scss" scoped>
 @import "src/assets/mixins";
 .http-dump-event {
-  @include layout;
-}
-
-.http-dump-event__head {
-  @include layout-head;
 }
 
 .http-dump-event__loading {
   @include loading;
-  @include layout-body;
-}
-
-.http-dump-event__body {
-  @include layout-body;
 }
 </style>
diff --git a/pages/http-dump/index.vue b/pages/http-dump/index.vue
@@ -1,8 +1,14 @@
 <script lang="ts" setup>
-import { PageLayout } from "~/src/widgets/ui/page-layout";
+import { PageHeader, PageLayout } from "~/src/widgets/ui";
 import { PAGE_TYPES } from "~/src/shared/constants";
 </script>
 
 <template>
-  <PageLayout :type="PAGE_TYPES.HTTP_DUMP" title="HttpDump" />
+  <NuxtLayout>
+    <template #header>
+      <PageHeader :type="PAGE_TYPES.HTTP_DUMP" title="Http-dump" />
+    </template>
+
+    <PageLayout :type="PAGE_TYPES.HTTP_DUMP" title="Http-dump" />
+  </NuxtLayout>
 </template>
diff --git a/pages/index.vue b/pages/index.vue
@@ -1,9 +1,14 @@
 <script lang="ts" setup>
-// eslint-disable-next-line @conarti/feature-sliced/public-api
-import { PageLayout } from "~/src/widgets/ui/page-layout";
+import { PageHeader, PageLayout } from "~/src/widgets/ui"; // eslint-disable-line @conarti/feature-sliced/public-api
 import { PAGE_TYPES } from "~/src/shared/constants";
 </script>
 
 <template>
-  <PageLayout :type="PAGE_TYPES.ALL_EVENTS" title="" />
+  <NuxtLayout>
+    <template #header>
+      <PageHeader :type="PAGE_TYPES.ALL_EVENTS" title="" />
+    </template>
+
+    <PageLayout :type="PAGE_TYPES.ALL_EVENTS" title="" />
+  </NuxtLayout>
 </template>
diff --git a/pages/inspector/[id].vue b/pages/inspector/[id].vue
@@ -53,37 +53,27 @@ onMounted(getEvent);
 </script>
 
 <template>
-  <main class="inspector-event">
-    <PageEventHeader title="Inspector" :event-id="eventId" />
+  <NuxtLayout>
+    <template #header>
+      <PageEventHeader title="Inspector" :event-id="eventId" />
+    </template>
 
     <div v-if="isLoading && !event" class="inspector-event__loading">
       <div></div>
       <div></div>
       <div></div>
     </div>
 
-    <div class="inspector-event__body">
-      <InspectorPage v-if="event" :event="event" />
-    </div>
-  </main>
+    <InspectorPage v-if="event" :event="event" />
+  </NuxtLayout>
 </template>
 
 <style lang="scss" scoped>
 @import "src/assets/mixins";
 .inspector-event {
-  @include layout;
-}
-
-.inspector-event__head {
-  @include layout-head;
 }
 
 .inspector-event__loading {
   @include loading;
-  @include layout-body;
-}
-
-.inspector-event__body {
-  @include layout-body;
 }
 </style>
diff --git a/pages/inspector/index.vue b/pages/inspector/index.vue
@@ -1,8 +1,14 @@
 <script lang="ts" setup>
-import { PageLayout } from "~/src/widgets/ui/page-layout";
+import { PageHeader, PageLayout } from "~/src/widgets/ui";
 import { PAGE_TYPES } from "~/src/shared/constants";
 </script>
 
 <template>
-  <PageLayout :type="PAGE_TYPES.INSPECTOR" title="Inspector" />
+  <NuxtLayout>
+    <template #header>
+      <PageHeader :type="PAGE_TYPES.INSPECTOR" title="Inspector" />
+    </template>
+
+    <PageLayout :type="PAGE_TYPES.INSPECTOR" title="Inspector" />
+  </NuxtLayout>
 </template>
diff --git a/pages/login.vue b/pages/login.vue
@@ -22,31 +22,33 @@ const redirect = async () => {
 </script>
 
 <template>
-  <div class="login-page">
-    <div class="login-form-container">
-      <IconSvg class="login-form--logo" name="logo" />
-      <div class="login-form">
-        <div class="login-form-left-block">
-          <h1 class="login-form--title">Welcome Back</h1>
-          <p class="pb-2 text-center text-sm text-gray-800">
-            Let's get you signed in.
-          </p>
-          <button class="login-form--button" @click="redirect">
-            <IconSvg class="w-6" name="lock" fill="currentcolor" />
-            Continue to SSO
-          </button>
+  <NuxtLayout>
+    <div class="login-page">
+      <div class="login-form-container">
+        <IconSvg class="login-form--logo" name="logo" />
+        <div class="login-form">
+          <div class="login-form-left-block">
+            <h1 class="login-form--title">Welcome Back</h1>
+            <p class="pb-2 text-center text-sm text-gray-800">
+              Let's get you signed in.
+            </p>
+            <button class="login-form--button" @click="redirect">
+              <IconSvg class="w-6" name="lock" fill="currentcolor" />
+              Continue to SSO
+            </button>
+          </div>
+          <div
+            class="login-form-right-block"
+            style="
+              background: url('/bg.jpg');
+              background-size: cover;
+              background-position: center center;
+            "
+          ></div>
         </div>
-        <div
-          class="login-form-right-block"
-          style="
-            background: url('/bg.jpg');
-            background-size: cover;
-            background-position: center center;
-          "
-        ></div>
       </div>
     </div>
-  </div>
+  </NuxtLayout>
 </template>
 
 <style lang="scss" scoped>

diff --git a/pages/monolog/[id].vue b/pages/monolog/[id].vue
@@ -49,34 +49,31 @@ onMounted(getEvent);
 </script>
 
 <template>
-  <main class="monolog">
-    <PageEventHeader title="Monolog" :event-id="eventId" />
+  <NuxtLayout>
+    <template #header>
+      <PageEventHeader title="Monolog" :event-id="eventId" />
+    </template>
 
     <div v-if="isLoading && !event" class="monolog__loading">
       <div></div>
       <div></div>
       <div></div>
     </div>
 
-    <div v-if="event" class="monolog__body">
+    <div v-if="event">
       <MonologPage :event="event" />
     </div>
-  </main>
+  </NuxtLayout>
 </template>
 
 <style lang="scss" scoped>
 @import "src/assets/mixins";
 
 .monolog {
-  @include layout;
 }
 
 .monolog__loading {
   @include loading;
   @include layout-body;
 }
-
-.monolog__body {
-  @include layout-body;
-}
 </style>
diff --git a/pages/monolog/index.vue b/pages/monolog/index.vue
@@ -1,8 +1,14 @@
 <script lang="ts" setup>
-import { PageLayout } from "~/src/widgets/ui/page-layout";
+import { PageHeader, PageLayout } from "~/src/widgets/ui";
 import { PAGE_TYPES } from "~/src/shared/constants";
 </script>
 
 <template>
-  <PageLayout :type="PAGE_TYPES.MONOLOG" title="Monolog" />
+  <NuxtLayout>
+    <template #header>
+      <PageHeader :type="PAGE_TYPES.MONOLOG" title="Monolog" />
+    </template>
+
+    <PageLayout :type="PAGE_TYPES.MONOLOG" title="Monolog" />
+  </NuxtLayout>
 </template>