Pourquoi ?
--
-
- Créer ses personnages -
- Gérer ses fiche personnage -
- Faire évoluer ses personnage +
- Créer ses personnages +
- Gérer ses fiche personnage +
- Faire évoluer ses personnage
-
+
- ;
}
-export interface User extends SimpleUser {
- avatar?: string;
+export interface IUser extends SimpleUser {
email?: string;
emailVisibility: boolean;
verified: boolean;
}
-export function displayName(user: SimpleUser): string {
- if (user.name && user.name.trim() !== '') {
- return user.name;
+export class SimpleUser extends CRecordModel implements ISimpleUser {
+ avatar?: string;
+ username: string;
+ name?: string;
+ expand?: { [key: string]: any };
+
+ constructor(from: ISimpleUser) {
+ super(from);
+ this.username = from.username;
+ this.name = from.name;
+ this.expand = from.expand;
+ this.avatar = from.avatar;
+ }
+
+ displayName(): string {
+ if (this.name && this.name.trim() !== '') {
+ return this.name;
+ }
+ return this.username;
+ }
+
+ avatarLink(pbStore: any, thumbSize: number = 100): Observable {
+ return this.avatar
+ ? (pbStore.users.avatar(this.id, thumbSize) as Observable)
+ : of(null);
+ }
+}
+
+export class User extends SimpleUser implements IUser {
+ email?: string;
+ emailVisibility: boolean;
+ verified: boolean;
+
+ constructor(from: IUser) {
+ super(from);
+ this.email = from.email;
+ this.emailVisibility = from.emailVisibility;
+ this.verified = from.verified;
}
- return user.username;
}
diff --git a/src/router/index.ts b/src/router/index.ts
index 7c0dcdb..dd12e5f 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -16,13 +16,18 @@ const router = createRouter({
{
path: '/campaigns',
name: 'campaigns',
- component: () => import('@/views/CampaignsView.vue'),
+ component: () => import('@/views/ListCampaignsView.vue'),
},
{
path: '/new-campaign',
name: 'new-campaign',
component: () => import('@/views/CreateCampaignView.vue'),
},
+ {
+ path: '/campaign/:campaignId',
+ name: 'edit-campaign',
+ component: () => import('@/views/CampaignView.vue'),
+ },
],
});
diff --git a/src/stores/pocketbase.ts b/src/stores/pocketbase.ts
index f7ffa3e..918e346 100644
--- a/src/stores/pocketbase.ts
+++ b/src/stores/pocketbase.ts
@@ -3,11 +3,12 @@ import { defineStore } from 'pinia';
import { from, map, Observable, tap } from 'rxjs';
import { computed, ref } from 'vue';
-import type { Campaign, NewCampaign } from '@/models/Campaign';
-import type { SimpleUser } from '@/models/User';
+import { Campaign, type ICampaign, type NewCampaign } from '@/models/Campaign';
+import { SimpleUser, type IUser } from '@/models/User';
export const usePocketbaseStore = defineStore('pocketbase', () => {
const pb = new PocketBase(import.meta.env.VITE_PB_URL);
+ pb.autoCancellation(false);
/////////////////////////////////////////////////////////////////////////////
// Authentication //
@@ -50,15 +51,23 @@ export const usePocketbaseStore = defineStore('pocketbase', () => {
function listCampaigns(): Observable {
return from(
- pb.collection('campaigns_simple_view').getFullList({
+ pb.collection('campaigns_simple_view').getFullList({
sort: 'name',
expand: 'players,game_master',
})
+ ).pipe(map((campaigns) => campaigns.map((campaign) => new Campaign(campaign))));
+ }
+
+ function createCampaign(campaign: NewCampaign): Observable {
+ return from(pb.collection('campaign').create(campaign)).pipe(
+ map((campaign) => new Campaign(campaign))
);
}
- function createCampaign(campaign: NewCampaign): Observable {
- return from(pb.collection('campaign').create(campaign));
+ function getCampaignById(id: string): Observable {
+ return from(pb.collection('campaign').getOne(id)).pipe(
+ map((campaign) => new Campaign(campaign))
+ );
}
/////////////////////////////////////////////////////////////////////////////
@@ -70,10 +79,21 @@ export const usePocketbaseStore = defineStore('pocketbase', () => {
pb.collection('public_users').getFullList({
sort: 'username',
})
+ ).pipe(map((users) => users.map((user) => new SimpleUser(user))));
+ }
+
+ function userAvatar(userId: string, thumbSize: number = 100): Observable {
+ return from(pb.collection('users').getOne(userId)).pipe(
+ map((user) => {
+ return user.avatar
+ ? pb.files.getUrl(user, user.avatar, { thumb: `${thumbSize}x${thumbSize}` })
+ : null;
+ })
);
}
return {
+ pb,
auth: {
authStore,
loggedIn,
@@ -84,12 +104,14 @@ export const usePocketbaseStore = defineStore('pocketbase', () => {
logout,
deleteAccount,
},
- campaign: {
- listCampaigns,
- createCampaign,
+ campaigns: {
+ list: listCampaigns,
+ create: createCampaign,
+ get: getCampaignById,
},
users: {
- allUsersSimple,
+ listSimple: allUsersSimple,
+ avatar: userAvatar,
},
};
});
diff --git a/src/views/AccountView.vue b/src/views/AccountView.vue
index b8a066f..8ea4293 100644
--- a/src/views/AccountView.vue
+++ b/src/views/AccountView.vue
@@ -3,7 +3,7 @@
- {{ props.campaign.name }}
+
+
+
diff --git a/src/components/UserAvatar.vue b/src/components/UserAvatar.vue
new file mode 100644
index 0000000..99c4246
--- /dev/null
+++ b/src/components/UserAvatar.vue
@@ -0,0 +1,41 @@
+
+
+
-
+ {{ props.campaign.name }}
+
+
+
+ Maître jeu
+
+
+
+
Joueurs
+ -
+
-
+
+
+
- {{ displayName(props.campaign.expand!.game_master!) }}
-
- -
-
- - {{ displayName(player) }} - -
+ ![]()
+
+
+
+
+
+
+
diff --git a/src/components/UserAvatarAndName.vue b/src/components/UserAvatarAndName.vue
new file mode 100644
index 0000000..a30ebd7
--- /dev/null
+++ b/src/components/UserAvatarAndName.vue
@@ -0,0 +1,33 @@
+
+
+
+
+
+
+
+
diff --git a/src/models/Base.ts b/src/models/Base.ts
new file mode 100644
index 0000000..07cf24d
--- /dev/null
+++ b/src/models/Base.ts
@@ -0,0 +1,18 @@
+import type { RecordModel } from "pocketbase"
+
+export class CRecordModel implements RecordModel {
+ [key: string]: any;
+ id: string;
+ created: string;
+ updated: string;
+ collectionId: string;
+ collectionName: string;
+
+ constructor(from: RecordModel) {
+ this.id = from.id;
+ this.created = from.created;
+ this.updated = from.updated;
+ this.collectionId = from.collectionId;
+ this.collectionName = from.collectionName;
+ }
+}
diff --git a/src/models/Campaign.ts b/src/models/Campaign.ts
index 49bca5d..d9f89f0 100644
--- a/src/models/Campaign.ts
+++ b/src/models/Campaign.ts
@@ -1,18 +1,49 @@
import { type RecordModel } from 'pocketbase';
-import { type User } from './User';
+import { User, type IUser } from './User';
+import { CRecordModel } from './Base';
-interface CampaignDetails {
- game_master?: User;
- players?: User[];
+interface ICampaignDetails {
+ game_master?: IUser;
+ players?: IUser[];
}
-export interface Campaign extends RecordModel {
+export interface ICampaign extends RecordModel {
expand?: CampaignDetails;
game_master: string;
name: string;
players: string[];
}
+class CampaignDetails implements ICampaignDetails {
+ game_master?: User;
+ players: User[] = [];
+
+ constructor(from: ICampaignDetails) {
+ if (from.game_master) {
+ this.game_master = new User(from.game_master);
+ }
+ if (from.players) {
+ from.players.forEach((player) => this.players.push(new User(player)));
+ }
+ }
+}
+
+export class Campaign extends CRecordModel implements ICampaign {
+ expand?: CampaignDetails;
+ game_master: string;
+ name: string;
+ players: string[];
+
+ constructor(from: ICampaign) {
+ super(from);
+ this.expand = undefined;
+ this.game_master = from.game_master;
+ this.name = from.name;
+ this.players = from.players;
+ this.expand = from.expand ? new CampaignDetails(from.expand) : undefined;
+ }
+}
+
export interface NewCampaign {
game_master: string | null;
name: string | null;
diff --git a/src/models/User.ts b/src/models/User.ts
index dd46889..5af1089 100644
--- a/src/models/User.ts
+++ b/src/models/User.ts
@@ -1,20 +1,58 @@
-import type { RecordModel } from 'pocketbase';
+import { type RecordModel } from 'pocketbase';
+import { CRecordModel } from './Base';
+import { of, type Observable } from 'rxjs';
-export interface SimpleUser extends RecordModel {
+export interface ISimpleUser extends RecordModel {
username: string;
name?: string;
+ avatar?: string;
+ expand?: { [key: string]: any };
+ avatarLink: (pbStore: any) => ObservableHello {{ username }} !
Actions
--
+
- diff --git a/src/views/CampaignView.vue b/src/views/CampaignView.vue new file mode 100644 index 0000000..7fafd32 --- /dev/null +++ b/src/views/CampaignView.vue @@ -0,0 +1,23 @@ + +
-
-
-
- -
+
+
+ -
-
-
- -
+
+
+
+
+
+
+
diff --git a/src/views/CreateCampaignView.vue b/src/views/CreateCampaignView.vue
index 7b6b3f2..49ac516 100644
--- a/src/views/CreateCampaignView.vue
+++ b/src/views/CreateCampaignView.vue
@@ -11,7 +11,7 @@
@@ -27,7 +27,7 @@ import { onMounted, ref } from 'vue';
import router from '@/router';
import { usePocketbaseStore } from '@/stores/pocketbase';
import { type NewCampaign } from '@/models/Campaign';
-import { type SimpleUser, displayName } from '@/models/User';
+import { type SimpleUser } from '@/models/User';
const pbStore = usePocketbaseStore();
const users = refGestion de campagne
+{{ campaign?.name }}
+Campagnes
+
+ Créer une campagne
+
-
- Créer une campagne
-
Campagnes que je gère
-
-
+ -
-
-
+
Pas de campagne pour l’instant
- Pas de campagne pour l’instant
Campagnes où je joue
-
-
+ -
-
Pas de campagne pour l’instant
- -
+
Pas de campagne pour l’instant