From 0e73b57edce6fd6094f95c0a215a3e185239dcf5 Mon Sep 17 00:00:00 2001
From: Kuchuk Andrey <kreezag@gmail.com>
Date: Sun, 3 Mar 2024 16:04:14 +0400
Subject: [PATCH] [#58] update setup script for layout

---
 layouts/default.vue                        | 82 ++++++++++------------
 src/widgets/ui/page-layout/page-layout.vue |  2 +-
 2 files changed, 38 insertions(+), 46 deletions(-)

diff --git a/layouts/default.vue b/layouts/default.vue
index 38dce44f..a6d7159c 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -1,20 +1,5 @@
-<template>
-  <div class="main-layout">
-    <LayoutSidebar
-      class="main-layout__sidebar"
-      :api-version="apiVersion"
-      :client-version="clientVersion"
-    />
-
-    <div class="main-layout__content">
-      <slot />
-    </div>
-  </div>
-</template>
-
-<script lang="ts">
-import { storeToRefs } from "pinia";
-import { defineComponent } from "vue";
+<script lang="ts" setup>
+import { computed, ref, onMounted } from "vue";
 import { LayoutSidebar } from "~/src/widgets/ui";
 import { useEvents } from "~/src/shared/lib/use-events";
 import { useSettings } from "~/src/shared/lib/use-settings";
@@ -22,44 +7,51 @@ import SfdumpWrap from "~/src/shared/lib/vendor/dumper";
 import { version } from "../package.json";
 import { useSettingsStore } from "~/stores/settings";
 
-export default defineComponent({
-  components: {
-    LayoutSidebar,
-  },
-
-  async setup() {
-    SfdumpWrap(window.document);
+SfdumpWrap(window.document);
+useSettingsStore();
 
-    const settingsStore = useSettingsStore();
-    const { themeType, isFixedHeader } = storeToRefs(settingsStore);
+const {
+  api: { getVersion },
+} = useSettings();
 
-    const {
-      api: { getVersion },
-    } = useSettings();
+const apiVersion = ref("");
+const clientVersion = ref(
+  !version || version === "0.0.1" ? "@dev" : `v${version}`
+);
 
-    const apiVersion = await getVersion();
+const getApiVersion = async () => {
+  const data = await getVersion();
 
-    const { events } = useEvents();
+  apiVersion.value = String(data).match(/^[0-9.]+.*$/)
+    ? `v${data}`
+    : `@${data}`;
+};
 
-    if (!events?.items?.value?.length) {
-      events.getAll();
-    }
+onMounted(() => {
+  getApiVersion();
 
-    const clientVersion =
-      !version || version === "0.0.1" ? "@dev" : `v${version}`;
+  const { events } = useEvents();
 
-    return {
-      themeType,
-      isFixedHeader,
-      apiVersion: String(apiVersion).match(/^[0-9.]+.*$/)
-        ? `v${apiVersion}`
-        : `@${apiVersion}`,
-      clientVersion,
-    };
-  },
+  if (!events?.items?.value?.length) {
+    events.getAll();
+  }
 });
 </script>
 
+<template>
+  <div class="main-layout">
+    <LayoutSidebar
+      class="main-layout__sidebar"
+      :api-version="apiVersion"
+      :client-version="clientVersion"
+    />
+
+    <div class="main-layout__content">
+      <slot />
+    </div>
+  </div>
+</template>
+
 <style lang="scss" scoped>
 @import "assets/mixins";
 
diff --git a/src/widgets/ui/page-layout/page-layout.vue b/src/widgets/ui/page-layout/page-layout.vue
index eb6f3b22..575c0f0e 100644
--- a/src/widgets/ui/page-layout/page-layout.vue
+++ b/src/widgets/ui/page-layout/page-layout.vue
@@ -34,7 +34,7 @@ const allEvents = computed(() => {
 });
 
 useHead({
-  title: `${props.title} > ${allEvents.value.length} | Buggregator`,
+  title: `${props.title || "Events"}: ${allEvents.value.length} | Buggregator`,
 });
 
 const visibleEvents = computed(() => {