From 88969111adb09b078f254fbadbbdfed9fcd5e5dd Mon Sep 17 00:00:00 2001 From: HumanoidSandvichDispenser Date: Thu, 19 Dec 2024 18:03:10 -0800 Subject: [PATCH] feat: Add vue-content-loader for loaders --- availabili.tf/package-lock.json | 10 +++ availabili.tf/package.json | 1 + availabili.tf/src/assets/base.css | 1 + .../src/components/TeamsListSidebar.vue | 27 +++++++- availabili.tf/src/stores/auth.ts | 17 ++++- availabili.tf/src/stores/client.ts | 12 +++- availabili.tf/src/views/TeamDetailsView.vue | 13 +++- .../views/TeamSettings/IntegrationsView.vue | 10 ++- .../src/views/TeamSettings/MatchesView.vue | 66 +++++++++---------- backend-flask/models/event.py | 7 +- 10 files changed, 120 insertions(+), 44 deletions(-) diff --git a/availabili.tf/package-lock.json b/availabili.tf/package-lock.json index 9ba0704..62f854d 100644 --- a/availabili.tf/package-lock.json +++ b/availabili.tf/package-lock.json @@ -20,6 +20,7 @@ "pinia": "^2.2.4", "radix-vue": "^1.9.10", "vue": "^3.5.12", + "vue-content-loader": "^2.0.1", "vue-router": "^4.4.5", "vue-select": "^4.0.0-beta.6", "vue3-tooltip": "^2.2.4" @@ -7657,6 +7658,15 @@ "dev": true, "license": "MIT" }, + "node_modules/vue-content-loader": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/vue-content-loader/-/vue-content-loader-2.0.1.tgz", + "integrity": "sha512-pkof4+q2xmzNEdhqelxtJejeP/vQUJtLle4/v2ueG+HURqM9Q/GIGC8GJ2bVVWeLfTDET51jqimwQdmxJTlu0g==", + "license": "MIT", + "peerDependencies": { + "vue": "^3" + } + }, "node_modules/vue-eslint-parser": { "version": "9.4.3", "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-9.4.3.tgz", diff --git a/availabili.tf/package.json b/availabili.tf/package.json index 9d182ad..e6434b0 100644 --- a/availabili.tf/package.json +++ b/availabili.tf/package.json @@ -27,6 +27,7 @@ "pinia": "^2.2.4", "radix-vue": "^1.9.10", "vue": "^3.5.12", + "vue-content-loader": "^2.0.1", "vue-router": "^4.4.5", "vue-select": "^4.0.0-beta.6", "vue3-tooltip": "^2.2.4" diff --git a/availabili.tf/src/assets/base.css b/availabili.tf/src/assets/base.css index 7798ac5..2a9e1e8 100644 --- a/availabili.tf/src/assets/base.css +++ b/availabili.tf/src/assets/base.css @@ -34,6 +34,7 @@ --surface-0: #ccd0da; --base: #eff1f5; + --base-extra: #f5f6f7; --mantle: #e6e9ef; --crust: #dce0e8; diff --git a/availabili.tf/src/components/TeamsListSidebar.vue b/availabili.tf/src/components/TeamsListSidebar.vue index 7f1c7f5..e4cdcba 100644 --- a/availabili.tf/src/components/TeamsListSidebar.vue +++ b/availabili.tf/src/components/TeamsListSidebar.vue @@ -1,16 +1,25 @@ @@ -34,8 +43,20 @@ onMounted(() => {
Log in to view your teams.
+
+ + + + + + + + + + +
diff --git a/availabili.tf/src/stores/auth.ts b/availabili.tf/src/stores/auth.ts index 8a1bd15..b9866df 100644 --- a/availabili.tf/src/stores/auth.ts +++ b/availabili.tf/src/stores/auth.ts @@ -2,11 +2,13 @@ import { defineStore } from "pinia"; import { ref } from "vue"; import { useClientStore } from "./client"; import { useRouter, type LocationQuery } from "vue-router"; +import { type PlayerSchema } from "@/client"; export const useAuthStore = defineStore("auth", () => { const clientStore = useClientStore(); const client = clientStore.client; + const user = ref(null); const steamId = ref(""); const username = ref(""); const isLoggedIn = ref(false); @@ -16,16 +18,27 @@ export const useAuthStore = defineStore("auth", () => { const router = useRouter(); async function getUser() { - hasCheckedAuth.value = true; + if (hasCheckedAuth.value) { + if (!isLoggedIn.value) { + throw new Error("Not logged in"); + } + + return user.value; + } + return clientStore.call( getUser.name, () => client.default.getUser(), (response) => { + hasCheckedAuth.value = true; isLoggedIn.value = true; steamId.value = response.steamId; username.value = response.username; + user.value = response; return response; - } + }, + undefined, + () => hasCheckedAuth.value = true, ); } diff --git a/availabili.tf/src/stores/client.ts b/availabili.tf/src/stores/client.ts index 89e0add..dbbcd00 100644 --- a/availabili.tf/src/stores/client.ts +++ b/availabili.tf/src/stores/client.ts @@ -11,7 +11,9 @@ export const useClientStore = defineStore("client", () => { function call( key: string, apiCall: () => CancelablePromise, - thenOnce?: (result: T) => T + thenOnce?: (result: T) => T, + catchOnce?: (error: any) => any, + finallyOnce?: () => void, ): Promise { console.log("Fetching call " + key); if (!calls.has(key)) { @@ -26,6 +28,14 @@ export const useClientStore = defineStore("client", () => { promise.then(thenOnce); } + if (catchOnce) { + promise.catch(catchOnce); + } + + if (finallyOnce) { + promise.finally(finallyOnce); + } + return promise; } return calls.get(key) as Promise; diff --git a/availabili.tf/src/views/TeamDetailsView.vue b/availabili.tf/src/views/TeamDetailsView.vue index 15f1595..b8b3292 100644 --- a/availabili.tf/src/views/TeamDetailsView.vue +++ b/availabili.tf/src/views/TeamDetailsView.vue @@ -10,6 +10,7 @@ import EventList from "@/components/EventList.vue"; import { useTeamsEventsStore } from "@/stores/teams/events"; import MatchCard from "@/components/MatchCard.vue"; import { useMatchesStore } from "@/stores/matches"; +import { ContentLoader } from "vue-content-loader"; const route = useRoute(); const teamsStore = useTeamsStore(); @@ -28,14 +29,17 @@ const key = computed(() => route.query.key); const teamsEventsStore = useTeamsEventsStore(); const events = computed(() => teamsEventsStore.teamEvents[teamId.value]); const matches = computed(() => matchesStore.recentMatches); +const isLoading = ref(false); onMounted(() => { + isLoading.value = true; let doFetchTeam = () => { teamsStore.fetchTeam(teamId.value) .then(() => { teamsStore.fetchTeamMembers(teamId.value); teamsEventsStore.fetchTeamEvents(teamId.value); matchesStore.fetchRecentMatchesForTeam(teamId.value, 5); + isLoading.value = false; }); }; @@ -55,7 +59,14 @@ onMounted(() => {

- {{ team.teamName }} + +

Formed on {{ creationDate }} diff --git a/availabili.tf/src/views/TeamSettings/IntegrationsView.vue b/availabili.tf/src/views/TeamSettings/IntegrationsView.vue index cc84a58..3f65ce9 100644 --- a/availabili.tf/src/views/TeamSettings/IntegrationsView.vue +++ b/availabili.tf/src/views/TeamSettings/IntegrationsView.vue @@ -6,6 +6,7 @@ import { useTeamDetails } from "@/composables/team-details"; import { useTeamsStore } from "@/stores/teams"; import { useIntegrationsStore } from "@/stores/teams/integrations"; import { onMounted, ref } from "vue"; +import { ContentLoader } from "vue-content-loader"; const teamsStore = useTeamsStore(); const integrationsStore = useIntegrationsStore(); @@ -32,7 +33,14 @@ onMounted(() => {