sebclem/Claptrap-ui
1
0
Fork 0
Code Issues 1 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

🔨 Redirect if guild is not available

Browse Source
This commit is contained in:
SebClem 2022-06-16 12:23:36 +02:00
parent d460a2d5b0
commit 3511bedaec
Signed by: sebclem
GPG Key ID: 5A4308F6A359EA50
5 changed files with 86 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
.vscode/settings.json vendored
View File

@ -13,5 +13,7 @@
"javascript.inlayHints.propertyDeclarationTypes.enabled": true, "javascript.inlayHints.propertyDeclarationTypes.enabled": true,
"javascript.inlayHints.parameterNames.suppressWhenArgumentMatchesName": true, "javascript.inlayHints.parameterNames.suppressWhenArgumentMatchesName": true,
"javascript.inlayHints.parameterNames.enabled": "literals", "javascript.inlayHints.parameterNames.enabled": "literals",
"emmet.includeLanguages": {
"vue": "html"
}
} }

2
src/stores/mutualGuilds.ts
View File

@ -6,7 +6,7 @@ export const useMutualGuildsStore = defineStore({
state: () => ({ state: () => ({
guilds: [] as Array<Guild>, guilds: [] as Array<Guild>,
loaded: false, loaded: false,
lastGuildId: "", lastGuildId: undefined as string | undefined,
}), }),
getters: {}, getters: {},
actions: { actions: {

20
src/tools/GuildTools.ts Normal file
View File

@ -0,0 +1,20 @@
import type { Guild } from "@/data/Guild";
import { useMutualGuildsStore } from "@/stores/mutualGuilds";
import type { Router } from "vue-router";
function redirectIfNoGuild(guild: Guild | undefined, router: Router) {
const guildStore = useMutualGuildsStore();
if (!guild) {
guildStore.lastGuildId = guildStore.guilds[0]?.id;
if (guildStore.lastGuildId) {
router.push({
name: "guildHome",
params: { guildId: guildStore.lastGuildId },
});
} else {
router.push({ name: "home" });
}
}
}
export { redirectIfNoGuild };

83
src/views/GuildHomeView.vue
View File

@ -1,58 +1,67 @@
<template> <template>
<v-row> <div>
<v-col> <v-row>
<v-card> <v-col>
<v-card-title class="d-flex"> <v-card>
<v-avatar :color="guild?.iconUrl ? '' : 'grey-darken-3'" class="mr-3"> <v-card-title class="d-flex">
<v-img v-if="guild?.iconUrl" :src="guild.iconUrl"></v-img> <v-avatar
<template v-if="!guild?.iconUrl">{{ guild?.name[1] }}</template> :color="guild?.iconUrl ? '' : 'grey-darken-3'"
</v-avatar> class="mr-3"
<span class="mr-auto">{{ guild?.name }}</span> >
<v-icon <v-img v-if="guild?.iconUrl" :src="guild.iconUrl"></v-img>
icon="mdi-account-wrench" <template v-if="!guild?.iconUrl">{{ guild?.name[1] }}</template>
color="green" </v-avatar>
v-if="guild?.canManage" <span class="mr-auto">{{ guild?.name }}</span>
></v-icon> <v-icon
</v-card-title> icon="mdi-account-wrench"
</v-card> color="green"
</v-col> v-if="guild?.canManage"
</v-row> ></v-icon>
<v-row> </v-card-title>
<v-col> </v-card>
<v-container> </v-col>
<v-row> </v-row>
<v-col cols="6"> <v-row>
<MusicPreviewComponent></MusicPreviewComponent> <v-col>
</v-col> <v-container>
<v-col cols="6"> <v-row>
<StatsPreviewComponent></StatsPreviewComponent> <v-col cols="6">
</v-col> <MusicPreviewComponent></MusicPreviewComponent>
<v-col cols="6"> </v-col>
<SettingPreviewComponent /> <v-col cols="6">
</v-col> <StatsPreviewComponent></StatsPreviewComponent>
</v-row> </v-col>
</v-container> <v-col cols="6">
</v-col> <SettingPreviewComponent />
</v-row> </v-col>
</v-row>
</v-container>
</v-col>
</v-row>
</div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { useMutualGuildsStore } from "@/stores/mutualGuilds"; import { useMutualGuildsStore } from "@/stores/mutualGuilds";
import { ref, watch } from "vue"; import { ref, watch } from "vue";
import { useRoute } from "vue-router"; import { useRoute, useRouter } from "vue-router";
import SettingPreviewComponent from "../components/guild/home/SettingPreviewComponent.vue"; import SettingPreviewComponent from "../components/guild/home/SettingPreviewComponent.vue";
import MusicPreviewComponent from "../components/guild/home/MusicPreviewComponent.vue"; import MusicPreviewComponent from "../components/guild/home/MusicPreviewComponent.vue";
import StatsPreviewComponent from "../components/guild/home/StatsPreviewComponent.vue"; import StatsPreviewComponent from "../components/guild/home/StatsPreviewComponent.vue";
import { redirectIfNoGuild } from "@/tools/GuildTools";
const guildStore = useMutualGuildsStore(); const guildStore = useMutualGuildsStore();
const route = useRoute(); const route = useRoute();
const router = useRouter();
const guild = ref(guildStore.getGuild(route.params.guildId as string)); const guild = ref(guildStore.getGuild(route.params.guildId as string));
redirectIfNoGuild(guild.value, router);
watch( watch(
() => route.params.guildId, () => route.params.guildId,
(value, oldValue) => { (value, oldValue) => {
guild.value = guildStore.getGuild(value as string); guild.value = guildStore.getGuild(value as string);
guildStore.lastGuildId = guild.value?.id;
redirectIfNoGuild(guild.value, router);
} }
); );
</script> </script>

28
src/views/HomeView.vue
View File

@ -1,11 +1,13 @@
<template> <template>
<v-row v-if="!userStore.isLoggedIn"> <div>
<v-col> <v-row v-if="!userStore.isLoggedIn">
<v-btn to="/oauth2/redirect" prepend-icon="mdi-discord" color="primary"> <v-col>
Login <v-btn to="/oauth2/redirect" prepend-icon="mdi-discord" color="primary">
</v-btn> Login
</v-col> </v-btn>
</v-row> </v-col>
</v-row>
</div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
@ -20,12 +22,14 @@ const router = useRouter();
onBeforeMount(() => { onBeforeMount(() => {
if (userStore.isLoggedIn) { if (userStore.isLoggedIn) {
if (!mutualGuildStore.lastGuildId) { if (!mutualGuildStore.lastGuildId) {
mutualGuildStore.lastGuildId = mutualGuildStore.guilds[0].id; mutualGuildStore.lastGuildId = mutualGuildStore.guilds[0]?.id;
}
if (mutualGuildStore.lastGuildId) {
router.push({
name: "guildHome",
params: { guildId: mutualGuildStore.lastGuildId },
});
} }
router.push({
name: "guildHome",
params: { guildId: mutualGuildStore.lastGuildId },
});
} }
}); });
</script> </script>