Skip to content
This repository was archived by the owner on May 5, 2024. It is now read-only.

Commit ec5d8b6

Browse files
author
Mojtabaa.H.N
committed
feat: Moves to composition api and pinia store
1 parent b9398e0 commit ec5d8b6

31 files changed

+762
-712
lines changed

‎README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -107,7 +107,7 @@ public function boot()
107107
- [x] Add option to auto-append new logs (like `tail -f`)
108108
- [x] Lazy-load/Infinite-scroll for big files
109109
- [x] Add guard for accessing routes
110-
- [ ] Move stores to [Pinia](https://pinia.esm.dev/)
110+
- [x] Move stores to [Pinia](https://pinia.esm.dev/)
111111

112112

113113
## Changelog

‎frontend/package-lock.json‎

Lines changed: 38 additions & 11 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎frontend/package.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,8 @@
1515
"core-js": "^3.6.5",
1616
"linkifyjs": "^3.0.0-beta.3",
1717
"lodash": "^4.17.21",
18+
"mitt": "^2.1.0",
19+
"pinia": "^2.0.0-alpha.19",
1820
"postcss": "^8.2.15",
1921
"tailwindcss": "^2.1.2",
2022
"vue": "^3.0.0"

‎frontend/src/App.vue‎

Lines changed: 23 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
<template>
2-
<div class="w-full h-screen dark:bg-gray-900 dark:text-gray-200">
3-
<div class="flex" style="height: calc(100% - 0rem)">
4-
<Nav/>
5-
<Aside />
6-
<Main/>
7-
<log-message-modal/>
8-
<log-exception-modal/>
9-
<setting-modal/>
10-
</div>
2+
<div class="w-full h-screen dark:bg-gray-900 dark:text-gray-200">
3+
<div class="flex" style="height: calc(100% - 0rem)">
4+
<Nav/>
5+
<Aside/>
6+
<Main/>
7+
<log-message-modal/>
8+
<log-exception-modal/>
9+
<setting-modal/>
1110
</div>
11+
</div>
1212
</template>
1313

1414
<script>
@@ -18,16 +18,21 @@ import Nav from "./components/Nav";
1818
import LogMessageModal from "./components/LogMessageModal";
1919
import LogExceptionModal from "./components/LogExceptionModal";
2020
import SettingModal from "./components/SettingModal";
21+
import {useStore} from "./store";
2122
2223
export default {
23-
name: 'App',
24-
components: {
25-
SettingModal,
26-
LogExceptionModal,
27-
LogMessageModal,
28-
Nav,
29-
Main,
30-
Aside,
31-
}
24+
name: 'App',
25+
components: {
26+
SettingModal,
27+
LogExceptionModal,
28+
LogMessageModal,
29+
Nav,
30+
Main,
31+
Aside,
32+
},
33+
setup() {
34+
let store = useStore();
35+
store.setup()
36+
}
3237
}
3338
</script>

‎frontend/src/components/Aside.vue‎

Lines changed: 28 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,39 @@
11
<template>
2-
<div :class="store.aside ? 'flex-grow lg:flex-shrink-0 lg:w-[20rem] lg:flex-grow-0' : 'hidden'" class="border-r border-gray-200 dark:border-gray-700 h-full relative overflow-auto">
3-
<div v-if="store.loading_logs" class="absolute inset-0 w-full h-full flex items-center justify-center">
4-
<Loading/>
5-
</div>
6-
<template v-else>
7-
<div class="p-4 pb-0">
8-
<input type="text" v-model="store.search" class="flex-1 w-full rounded-lg px-3 py-1 dark:bg-gray-700 dark:text-gray-100 border border-gray-200 dark:border-gray-700 cursor:ring-2 cursor:ring-blue-500 dark:cursor:ring-blue-300" placeholder="Search log files..">
9-
</div>
10-
<div class="divide-y divide-gray-200 dark:divide-gray-700 px-4 divide-dashed ">
11-
<button
12-
v-for="log in store.sorted_logs"
13-
class="py-4 text-left w-full dark:text-gray-300 cursor:text-blue-600 dark:cursor:text-blue-300"
14-
:class="{'text-blue-600 dark:text-blue-300' : store.current?.name === log.name}"
15-
@click.prevent="store.openLog(log)"
16-
>
17-
<div class="font-bold">{{ log.name }}</div>
18-
<div class="text-sm text-gray-500 font-bold">Modified
19-
<date :timestamp="log.modified_at"/>
20-
</div>
21-
</button>
22-
</div>
23-
</template>
2+
<div :class="store.aside ? 'flex-grow lg:flex-shrink-0 lg:w-[20rem] lg:flex-grow-0' : 'hidden'" class="border-r border-gray-200 dark:border-gray-700 h-full relative overflow-auto">
3+
<div v-if="store.loading_logs" class="absolute inset-0 w-full h-full flex items-center justify-center">
4+
<Loading/>
245
</div>
6+
<template v-else>
7+
<div class="p-4 pb-0">
8+
<input type="text" v-model="store.search" class="flex-1 w-full rounded-lg px-3 py-1 dark:bg-gray-700 dark:text-gray-100 border border-gray-200 dark:border-gray-700 cursor:ring-2 cursor:ring-blue-500 dark:cursor:ring-blue-300" placeholder="Search log files..">
9+
</div>
10+
<div class="divide-y divide-gray-200 dark:divide-gray-700 px-4 divide-dashed ">
11+
<button
12+
v-for="log in store.sorted_logs"
13+
class="py-4 text-left w-full dark:text-gray-300 cursor:text-blue-600 dark:cursor:text-blue-300"
14+
:class="{'text-blue-600 dark:text-blue-300' : store.current?.name === log.name}"
15+
@click.prevent="store.openLog(log)"
16+
>
17+
<div class="font-bold">{{ log.name }}</div>
18+
<div class="text-sm text-gray-500 font-bold">Modified
19+
<date :timestamp="log.modified_at"/>
20+
</div>
21+
</button>
22+
</div>
23+
</template>
24+
</div>
2525
</template>
2626

2727
<script>
2828
import Loading from "./Loading";
2929
import Date from "./Date";
30+
import {useStore} from "../store";
3031
3132
export default {
32-
name: 'Aside',
33-
components: {Date, Loading},
33+
name: 'Aside',
34+
components: {Date, Loading},
35+
setup() {
36+
return {store: useStore()}
37+
}
3438
}
3539
</script>

‎frontend/src/components/Date.vue‎

Lines changed: 18 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,26 @@
11
<template>
2-
<div class="inline" :title="unixToString(unixTimestamp)">{{ unixToDiff(unixTimestamp) }}</div>
2+
<div :key="key" class="inline" :title="unixToString(unixTimestamp)">{{ unixToDiff(unixTimestamp) }}</div>
33
</template>
44
<script>
5-
import {defineComponent} from "vue";
5+
import {computed, defineComponent, onUnmounted, ref} from "vue";
6+
import {unixToDiff, unixToString} from "../utils";
67
78
export default defineComponent({
8-
props: {
9-
timestamp: {},
10-
parse: {
11-
default: false,
12-
}
13-
},
14-
computed: {
15-
unixTimestamp() {
16-
if (this.parse) {
17-
return Date.parse(this.timestamp) / 1000
18-
}
19-
return this.timestamp
20-
}
21-
},
22-
created() {
23-
this.store.dateComponents.add(this)
24-
},
25-
unmounted() {
26-
this.store.dateComponents.delete(this)
9+
props: {
10+
timestamp: {},
11+
parse: {
12+
default: false,
2713
}
14+
},
15+
setup(props, context) {
16+
let key = ref(0)
17+
let refreshCallback = () => key.value++
18+
window.bus.on('refresh-dates', refreshCallback)
19+
onUnmounted(() => window.bus.off('refresh-dates', refreshCallback))
20+
21+
let unixTimestamp = computed(() => props.parse ? Date.parse(props.timestamp) / 1000 : props.timestamp)
22+
23+
return {unixTimestamp, unixToDiff, unixToString, key}
24+
}
2825
})
2926
</script>

‎frontend/src/components/FilterEnv.vue‎

Lines changed: 30 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,40 @@
11
<template>
2-
<popper position="bottom-end">
3-
<template #trigger="{toggle}">
4-
<button class="form-button" @click="toggle">
5-
{{ label }}
6-
</button>
7-
</template>
8-
<div class="bg-white dark:bg-gray-900 rounded border border-gray-200 dark:border-gray-700 shadow-md w-[12rem] mt-[2px]">
9-
<button @click.prevent="store.toggle_env(env)" v-for="env in store.envs" class="block w-full text-left capitalize px-3 py-2 cursor:bg-blue-50 dark:cursor:bg-gray-700">
10-
<i :class="store.env_is_checked(env) ? 'bxs-check-square text-blue-600 dark:text-blue-300' : 'bx-square'" class="bx relative top-[3px] text-xl mr-1"></i>
11-
<span>{{ env }}</span>
12-
</button>
13-
</div>
14-
</popper>
2+
<popper position="bottom-end">
3+
<template #trigger="{toggle}">
4+
<button class="form-button" @click="toggle">
5+
{{ label }}
6+
</button>
7+
</template>
8+
<div class="bg-white dark:bg-gray-900 rounded border border-gray-200 dark:border-gray-700 shadow-md w-[12rem] mt-[2px]">
9+
<button @click.prevent="store.toggle_env(env)" v-for="env in store.envs" class="block w-full text-left capitalize px-3 py-2 cursor:bg-blue-50 dark:cursor:bg-gray-700">
10+
<i :class="store.env_is_checked(env) ? 'bxs-check-square text-blue-600 dark:text-blue-300' : 'bx-square'" class="bx relative top-[3px] text-xl mr-1"></i>
11+
<span>{{ env }}</span>
12+
</button>
13+
</div>
14+
</popper>
1515
</template>
1616
<script>
17-
import {defineComponent} from "vue";
17+
import {defineComponent, computed} from "vue";
1818
import Popper from "./Popper";
19+
import {useStore} from "../store";
1920
2021
export default defineComponent({
21-
components: {Popper},
22-
computed: {
23-
label() {
24-
if (this.store.filter_envs.length === 0 || this.store.filter_envs.length === this.store.envs.length) {
25-
return 'All Environments'
26-
}
27-
if (this.store.filter_envs.length === 1) {
28-
return this.store.filter_envs[0]
29-
}
22+
components: {Popper},
23+
setup(props, context) {
24+
let store = useStore();
25+
let label = computed(() => {
26+
if (store.filter_envs.length === 0 || store.filter_envs.length === store.envs.length) {
27+
return 'All Environments'
28+
}
29+
if (store.filter_envs.length === 1) {
30+
return store.filter_envs[0]
31+
}
3032
31-
return this.store.filter_envs.length + ' Environments'
33+
return store.filter_envs.length + ' Environments'
3234
}
33-
}
35+
)
36+
37+
return {store: store, label}
38+
}
3439
})
3540
</script>

0 commit comments

Comments
 (0)