Skip to content

Commit 20e810a

Browse files
butschsterbutschster
authored
Merge pull request #133 from buggregator/issue/#58-update-components-to-composition-api
Issue/#58 update components to composition api
2 parents 5966bde + 2c39120 commit 20e810a

File tree

99 files changed

+6460
-6712
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

99 files changed

+6460
-6712
lines changed

‎.storybook/preview.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import {createPinia} from 'pinia';
22
import { setup } from '@storybook/vue3';
3-
import "../assets/index.css";
4-
import "../assets/vendor";
3+
import "../src/assets/index.css";
4+
import "../src/assets/vendor";
55
import "./stories.css"
66
import SfdumpWrap from "../src/shared/lib/vendor/dumper";
77
import 'tailwindcss/tailwind.css'

‎app.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,6 @@
55
</template>
66

77
<script lang="ts" setup>
8-
import "./assets/index.css";
9-
import "./assets/vendor";
8+
import "./src/assets/index.css";
9+
import "./src/assets/vendor";
1010
</script>

‎error.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
</template>
1414

1515
<script lang="ts" setup>
16-
import "./assets/tailwind.css";
16+
import "./src/assets/tailwind.css";
1717
import "highlight.js/lib/common";
1818
import { clearError } from "#app";
1919

‎layouts/blank.vue‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,10 @@
44
</div>
55
</template>
66

7-
<script lang="ts">
8-
</script>
7+
<script lang="ts"></script>
98

109
<style lang="scss" scoped>
11-
@import "assets/mixins";
10+
@import "src/assets/mixins";
1211
1312
.main-layout {
1413
@apply flex min-h-screen items-stretch relative;

‎layouts/default.vue‎

Lines changed: 41 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -1,71 +1,62 @@
1-
<template>
2-
<div class="main-layout">
3-
<LayoutSidebar
4-
class="main-layout__sidebar"
5-
:api-version="apiVersion"
6-
:client-version="clientVersion"
7-
:profile="profile"
8-
/>
9-
10-
<div class="main-layout__content">
11-
<slot />
12-
</div>
13-
</div>
14-
</template>
15-
16-
<script lang="ts">
1+
<script lang="ts" setup>
172
import { storeToRefs } from "pinia";
18-
import { defineComponent } from "vue";
3+
import { ref, onMounted } from "vue";
194
import { LayoutSidebar } from "~/src/widgets/ui";
205
import { useEvents } from "~/src/shared/lib/use-events";
216
import { useSettings } from "~/src/shared/lib/use-settings";
227
import SfdumpWrap from "~/src/shared/lib/vendor/dumper";
8+
import { useProfileStore, useSettingsStore } from "~~/src/shared/stores";
239
import { version } from "../package.json";
24-
import {useProfileStore} from "~/stores/profile";
25-
import { useSettingsStore } from "~/stores/settings";
26-
27-
export default defineComponent({
28-
components: {
29-
LayoutSidebar,
30-
},
3110
32-
async setup() {
33-
SfdumpWrap(window.document);
11+
useSettingsStore();
12+
SfdumpWrap(window.document);
13+
const { profile } = storeToRefs(useProfileStore());
3414
35-
const settingsStore = useSettingsStore();
36-
const profileStore = useProfileStore();
37-
const { themeType, isFixedHeader } = storeToRefs(settingsStore);
15+
const {
16+
api: { getVersion },
17+
} = useSettings();
3818
39-
const {
40-
api: { getVersion },
41-
} = useSettings();
19+
const apiVersion = ref("");
20+
const clientVersion = ref(
21+
!version || version === "0.0.1" ? "@dev" : `v${version}`
22+
);
4223
43-
const apiVersion = await getVersion();
24+
const getApiVersion = async () => {
25+
const data = await getVersion();
4426
45-
const { events } = useEvents();
27+
apiVersion.value = String(data).match(/^[0-9.]+.*$/)
28+
? `v${data}`
29+
: `@${data}`;
30+
};
4631
47-
if (!events?.items?.value?.length) {
48-
events.getAll();
49-
}
32+
onMounted(() => {
33+
getApiVersion();
5034
51-
const clientVersion =
52-
!version || version === "0.0.1" ? "@dev" : `v${version}`;
35+
const { events } = useEvents();
5336
54-
return {
55-
themeType,
56-
isFixedHeader,
57-
apiVersion: String(apiVersion).match(/^[0-9.]+.*$/)
58-
? `v${apiVersion}`
59-
: `@${apiVersion}`,
60-
clientVersion,
61-
profile: profileStore.profile,
62-
};
63-
},
37+
if (!events?.items?.value?.length) {
38+
events.getAll();
39+
}
6440
});
6541
</script>
6642

43+
<template>
44+
<div class="main-layout">
45+
<LayoutSidebar
46+
class="main-layout__sidebar"
47+
:api-version="apiVersion"
48+
:client-version="clientVersion"
49+
:profile="profile"
50+
/>
51+
52+
<div class="main-layout__content">
53+
<slot />
54+
</div>
55+
</div>
56+
</template>
57+
6758
<style lang="scss" scoped>
68-
@import "assets/mixins";
59+
@import "src/assets/mixins";
6960
7061
.main-layout {
7162
@apply flex min-h-screen items-stretch relative;

‎middleware/auth.global.ts‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
1-
import { useNuxtApp, navigateTo } from "#app"
1+
import { useNuxtApp, navigateTo, defineNuxtRouteMiddleware } from "#app";
22
import { useSettings } from "~/src/shared/lib/use-settings";
3-
import { useProfileStore } from "~/stores/profile"
3+
import { useProfileStore } from "~/src/shared/stores/profile"
44

55
export default defineNuxtRouteMiddleware(async (to) => {
66
const app = useNuxtApp()
77

88
if (!app.$appSettings.auth.enabled) {
9-
return
9+
return undefined
1010
}
1111

1212
const store = useProfileStore()
@@ -16,7 +16,7 @@ export default defineNuxtRouteMiddleware(async (to) => {
1616
const {api: {getProfile}} = useSettings();
1717
const profile = await getProfile();
1818
store.setProfile(profile)
19-
return
19+
return undefined
2020
}
2121

2222
if (to.name !== 'login' && !store.isAuthenticated) {
@@ -27,4 +27,6 @@ export default defineNuxtRouteMiddleware(async (to) => {
2727
store.setToken(to.query.token)
2828
return navigateTo('/')
2929
}
30+
31+
return undefined
3032
})

‎nuxt.config.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ export default defineNuxtConfig({
3030
'~/plugins/auth',
3131
],
3232
dir: {
33-
static: 'static',
33+
static: 'src/static',
3434
},
3535
imports: {
3636
dirs: [
@@ -43,7 +43,7 @@ export default defineNuxtConfig({
4343
autoprefixer: {},
4444
},
4545
},
46-
css: ["~/assets/index.css"],
46+
css: ["~/src/assets/index.css"],
4747
modules: [
4848
'@nuxtjs/tailwindcss',
4949
'@pinia/nuxt',

‎pages/http-dumps/[id].vue‎

Lines changed: 65 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,65 @@
1+
<script lang="ts" setup>
2+
import { computed, onMounted, ref } from "vue";
3+
import { HttpDumpPage } from "~/src/screens/http-dump";
4+
import { useFetch, useRoute, useRouter, useHead, useNuxtApp } from "#app"; // eslint-disable-line @conarti/feature-sliced/layers-slices
5+
import { PageHeader } from "~/src/widgets/ui";
6+
import { useHttpDump } from "~/src/entities/http-dump";
7+
import type { HttpDump } from "~/src/entities/http-dump/types";
8+
import { useEvents } from "~/src/shared/lib/use-events";
9+
import type { EventId, ServerEvent } from "~/src/shared/types";
10+
11+
const { normalizeHttpDumpEvent } = useHttpDump();
12+
13+
const { params } = useRoute();
14+
const router = useRouter();
15+
const eventId = params.id as EventId;
16+
17+
useHead({
18+
title: `Http dumps > ${eventId} | Buggregator`,
19+
});
20+
21+
const { events } = useEvents();
22+
const { $authToken } = useNuxtApp();
23+
24+
const isLoading = ref(false);
25+
const serverEvent = ref<Event | null>(null);
26+
27+
const event = computed(() =>
28+
serverEvent.value
29+
? normalizeHttpDumpEvent(
30+
serverEvent.value as unknown as ServerEvent<HttpDump>
31+
)
32+
: null
33+
);
34+
35+
const onDelete = () => {
36+
events.removeById(eventId);
37+
38+
router.push("/");
39+
};
40+
41+
const getEvent = async () => {
42+
await useFetch(events.getUrl(eventId), {
43+
headers: { "X-Auth-Token": $authToken.token || "" },
44+
onRequest() {
45+
isLoading.value = true;
46+
},
47+
onResponse({ response: { _data } }) {
48+
serverEvent.value = _data;
49+
isLoading.value = false;
50+
},
51+
onResponseError() {
52+
router.push("/404");
53+
},
54+
onRequestError() {
55+
router.push("/404");
56+
},
57+
});
58+
};
59+
60+
onMounted(getEvent);
61+
</script>
62+
163
<template>
264
<main class="http-dumps-event">
365
<PageHeader
@@ -7,10 +69,10 @@
769
>
870
<NuxtLink to="/">Home</NuxtLink>&nbsp;/
971
<NuxtLink to="/http-dumps">Http dumps</NuxtLink>&nbsp;/
10-
<NuxtLink :disabled="true">{{ event.id }}</NuxtLink>
72+
<NuxtLink :disabled="true">{{ eventId }}</NuxtLink>
1173
</PageHeader>
1274

13-
<div v-if="pending && !event" class="http-dumps-event__loading">
75+
<div v-if="isLoading && !event" class="http-dumps-event__loading">
1476
<div></div>
1577
<div></div>
1678
<div></div>
@@ -22,75 +84,8 @@
2284
</main>
2385
</template>
2486

25-
<script lang="ts">
26-
import { defineComponent } from "vue";
27-
import { useFetch, useRoute, useRouter, useNuxtApp } from "#app"; // eslint-disable-line @conarti/feature-sliced/layers-slices
28-
import { PageHeader } from "~/src/widgets/ui";
29-
import { useHttpDump } from "~/src/entities/http-dump";
30-
import type { HttpDump } from "~/src/entities/http-dump/types";
31-
import { useEvents } from "~/src/shared/lib/use-events";
32-
import type { EventId, ServerEvent } from "~/src/shared/types";
33-
import { HttpDumpPage } from "~/src/screens/http-dump";
34-
35-
const { normalizeHttpDumpEvent } = useHttpDump();
36-
37-
export default defineComponent({
38-
components: { HttpDumpPage, PageHeader },
39-
40-
async setup() {
41-
const route = useRoute();
42-
const router = useRouter();
43-
const nuxtApp = useNuxtApp();
44-
const eventId = route.params.id as EventId;
45-
46-
const { events } = useEvents();
47-
48-
const { data: event, pending } = await useFetch(events.getUrl(eventId), {
49-
headers: {"X-Auth-Token": nuxtApp.$authToken.token},
50-
onResponse({ response }) {
51-
return response.data;
52-
},
53-
onResponseError() {
54-
router.push("/404");
55-
},
56-
onRequestError() {
57-
router.push("/404");
58-
},
59-
});
60-
61-
return {
62-
serverEvent: event,
63-
pending,
64-
eventId,
65-
clearEvent: () => events.removeById(eventId),
66-
};
67-
},
68-
head() {
69-
return {
70-
title: `Http dumps > ${this.eventId} | Buggregator`,
71-
};
72-
},
73-
computed: {
74-
event() {
75-
return this.serverEvent
76-
? normalizeHttpDumpEvent(
77-
this.serverEvent as unknown as ServerEvent<HttpDump>
78-
)
79-
: null;
80-
},
81-
},
82-
methods: {
83-
onDelete() {
84-
this.clearEvent();
85-
86-
this.$router.push("/");
87-
},
88-
},
89-
});
90-
</script>
91-
9287
<style lang="scss" scoped>
93-
@import "assets/mixins";
88+
@import "src/assets/mixins";
9489
.http-dumps-event {
9590
@include layout;
9691
}

‎pages/http-dumps/index.vue‎

Lines changed: 6 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,8 @@
1-
<script lang="ts">
2-
import { defineComponent } from "vue";
1+
<script lang="ts" setup>
2+
import { PageLayout } from "~/src/widgets/ui/page-layout";
33
import { PAGE_TYPES } from "~/src/shared/constants";
4-
import { useEvents } from "~/src/shared/lib/use-events";
5-
import PageIndex from "../index.vue"; // eslint-disable-line @conarti/feature-sliced/layers-slices
6-
7-
export default defineComponent({
8-
extends: PageIndex,
9-
setup() {
10-
const { events } = useEvents();
11-
12-
if (!events?.items?.value?.length) {
13-
events.getAll();
14-
}
15-
16-
return {
17-
events: events.items,
18-
title: "Http dumps",
19-
type: PAGE_TYPES.HTTP_DUMP,
20-
};
21-
},
22-
head() {
23-
return {
24-
title: `Http dumps [${this.events.length}] | Buggregator`,
25-
};
26-
},
27-
});
284
</script>
5+
6+
<template>
7+
<PageLayout :type="PAGE_TYPES.HTTP_DUMP" title="HttpDump" />
8+
</template>

0 commit comments

Comments
 (0)