feat: complete pocketbase store some more

Refactor some CSS

Get App title from environment

src/assets/_mixins.less

@@ -62,3 +62,8 @@
   .gen-margin(@n, (@i + 1));
 }
 .gen-margin(10);
+
+.buttons {
+  .flex-row;
+  justify-content: end;
+}

src/components/AppHeader.vue

@@ -1,7 +1,7 @@
 <template>
   <header class="flex-row-center flex-spread">
-    <RouterLink class="title h4" :to="{ name: 'home' }">GéDR</RouterLink>
-    <div class="buttons flex-row gap-1rem">
+    <RouterLink class="title h4" :to="{ name: 'home' }">{{ appTitle }}</RouterLink>
+    <div class="buttons gap-1rem">
       <button @click="toggleDark()" class="secondary">{{ isDark ? 'Dark' : 'Light' }}</button>
       <button v-if="!loggedIn" @click="login()" class="secondary">Login</button>
       <RouterLink v-else :to="{ name: 'account' }" class="button secondary">Account</RouterLink>
@@ -16,14 +16,16 @@ import { usePocketbaseStore } from '@/stores/pocketbase';
 import { ref } from 'vue';
 import router from '@/router';
 
+const appTitle = import.meta.env.VITE_NAME;
+
 const isDark = useDark();
 const toggleDark = useToggle(isDark);
 
 const pbStore = usePocketbaseStore();
-const loggedIn = ref(pbStore.loggedIn);
+const loggedIn = ref(pbStore.auth.loggedIn);
 
 const login = () => {
-  pbStore.login().subscribe({
+  pbStore.auth.login().subscribe({
     next: () => router.go(0),
   });
 };

src/components/AppModal.vue

@@ -13,7 +13,7 @@
         <button v-if="props.type === 'info'" class="accent" type="button" @click="close">
           Fermer
         </button>
-        <div v-else class="flex-row gap-1rem action-buttons">
+        <div v-else class="gap-1rem buttons">
           <button class="faded" type="button" @click="close">Annuler</button>
           <button type="button" @click="agree">OK</button>
         </div>
@@ -96,8 +96,4 @@ const agree = () => {
   background: transparent;
   .themed(color, @light-background, @dark-text);
 }
-
-.action-buttons {
-  justify-content: flex-end;
-}
 </style>

src/main.ts

@@ -12,7 +12,7 @@ const app = createApp(App);
 
 router.beforeEach((to, from, next) => {
   const pbStore = usePocketbaseStore();
-  if (!pbStore.loggedIn && ['home', 'login'].every((path) => path != to.name)) {
+  if (!pbStore.auth.loggedIn && ['home', 'login'].every((path) => path != to.name)) {
     next({ name: 'home' });
   } else {
     next();

src/stores/pocketbase.ts

@@ -3,12 +3,24 @@ import { defineStore } from 'pinia';
 import { from, map, Observable, tap } from 'rxjs';
 import { computed, ref } from 'vue';
 
+export interface NewCampaign {
+  name: string | null;
+  game_master: string | null;
+  players: string[] | null;
+}
+
 export const usePocketbaseStore = defineStore('pocketbase', () => {
   const pb = new PocketBase(import.meta.env.VITE_PB_URL);
+
+  /////////////////////////////////////////////////////////////////////////////
+  //                              Authentication                             //
+  /////////////////////////////////////////////////////////////////////////////
+
   const authData = ref<RecordAuthResponse<RecordModel> | null>(null);
   const authStore = computed<BaseAuthStore>(() => pb.authStore);
   const loggedIn = computed<boolean>(() => pb.authStore.isValid);
   const username = computed<string | null>(() => authStore.value.model?.username);
+  const userId = computed<string | null>(() => authStore.value.model?.id);
 
   function login(): Observable<RecordAuthResponse<RecordModel>> {
     return from(pb.collection('users').authWithOAuth2({ provider: 'discord' })).pipe(
@@ -35,14 +47,48 @@ export const usePocketbaseStore = defineStore('pocketbase', () => {
     );
   }
 
+  function simpleUserList(): Observable<RecordModel[]> {
+    return from(
+      pb.collection('public_users').getFullList({
+        sort: 'username',
+      })
+    );
+  }
+
+  /////////////////////////////////////////////////////////////////////////////
+  //                                Campaigns                                //
+  /////////////////////////////////////////////////////////////////////////////
+
+  function listCampaigns(): Observable<RecordModel[]> {
+    return from(
+      pb.collection('campaign').getFullList({
+        sort: 'name',
+      })
+    );
+  }
+
+  function createCampaign(campaign: NewCampaign): Observable<RecordModel> {
+    return from(pb.collection('campaign').create(campaign));
+  }
+
   return {
-    authData,
-    authStore,
-    loggedIn,
-    username,
-    login,
-    refresh,
-    logout,
-    deleteAccount,
+    auth: {
+      authData,
+      authStore,
+      loggedIn,
+      username,
+      userId,
+      login,
+      refresh,
+      logout,
+      deleteAccount,
+    },
+    campaign: {
+      listCampaigns,
+      createCampaign,
+    },
+    users: {
+      simpleUserList,
+    },
   };
 });

src/views/AccountView.vue

@@ -37,11 +37,11 @@ import AppModal from '@/components/AppModal.vue';
 import { ref } from 'vue';
 
 const pbStore = usePocketbaseStore();
-const username = pbStore.username;
+const username = pbStore.auth.username;
 const showModal = ref<boolean>(false);
 
 const logout = () => {
-  pbStore.logout();
+  pbStore.auth.logout();
   router.go(0);
 };
 
@@ -54,10 +54,10 @@ const closeModal = () => {
 };
 
 const deleteAccount = () => {
-  pbStore.deleteAccount().subscribe({
+  pbStore.auth.deleteAccount().subscribe({
     next: () => {
       closeModal();
-      pbStore.logout();
+      pbStore.auth.logout();
       router.go(0);
     },
   });

src/views/HomeView.vue

@@ -1,5 +1,5 @@
 <template>
-  <LoggedInHome v-if="pbStore.loggedIn" />
+  <LoggedInHome v-if="pbStore.auth.loggedIn" />
   <LoggedOutHome v-else />
 </template>
 
@@ -10,7 +10,7 @@ import LoggedOutHome from '@/components/LoggedOutHome.vue';
 import LoggedInHome from '@/components/LoggedInHome.vue';
 
 const pbStore = usePocketbaseStore();
-pbStore.refresh().subscribe({
+pbStore.auth.refresh().subscribe({
   error: (err) => console.log('Could not refresh account data:', err),
 });
 </script>