From 0da40ebf422a6a8289d7d212ca3c7373983d72aa Mon Sep 17 00:00:00 2001
From: Lucien Cartier-Tilet <lucien@phundrak.com>
Date: Sat, 10 Feb 2024 18:30:47 +0100
Subject: [PATCH] feat: beginning work on managing campaigns

---
 .eslintrc.cjs                    |  2 +-
 src/components/LoggedInHome.vue  | 24 +++++++++++++-
 src/router/index.ts              |  5 +++
 src/views/CreateCampaignView.vue | 57 ++++++++++++++++++++++++++++++++
 4 files changed, 86 insertions(+), 2 deletions(-)
 create mode 100644 src/views/CreateCampaignView.vue

diff --git a/.eslintrc.cjs b/.eslintrc.cjs
index ef3c017..9b2e332 100644
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -12,5 +12,5 @@ module.exports = {
   parserOptions: {
     ecmaVersion: 'latest',
   },
-  ignorePatterns: ['node_modules/', '**/node_modules/'],
+  ignorePatterns: ['pocketbase/'],
 };
diff --git a/src/components/LoggedInHome.vue b/src/components/LoggedInHome.vue
index 7396d84..9ae10ed 100644
--- a/src/components/LoggedInHome.vue
+++ b/src/components/LoggedInHome.vue
@@ -1,6 +1,28 @@
-<template>Bonjour {{ pbStore.username }}&nbsp;!</template>
+<template>
+  <div class="h3">Bonjour {{ pbStore.auth.username }}&nbsp;!</div>
+
+  <div class="campagnes flex-col-center gap-2rem">
+    <h1>Campagnes</h1>
+    <RouterLink :to="{ name: 'new-campaign' }" class="button">Créer une campagne</RouterLink>
+    <ul v-if="campaigns.length > 0">
+      <li v-for="campaign in campaigns" :key="campaign.id">{{ campaign }}</li>
+    </ul>
+    <div v-else>Pas de campagnes pour l’instant</div>
+  </div>
+</template>
 
 <script setup="" lang="ts">
 import { usePocketbaseStore } from '@/stores/pocketbase';
+import { type RecordModel } from 'pocketbase';
+import { onMounted, ref } from 'vue';
+import { RouterLink } from 'vue-router';
 const pbStore = usePocketbaseStore();
+
+const campaigns = ref<RecordModel[]>([]);
+
+onMounted(() => {
+  pbStore.campaign.listCampaigns().subscribe({
+    next: (result) => (campaigns.value = result),
+  });
+});
 </script>
diff --git a/src/router/index.ts b/src/router/index.ts
index 9d6ff49..4af8478 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -13,6 +13,11 @@ const router = createRouter({
       name: 'account',
       component: () => import('@/views/AccountView.vue'),
     },
+    {
+      path: '/new-campaign',
+      name: 'new-campaign',
+      component: () => import('@/views/CreateCampaignView.vue'),
+    },
   ],
 });
 
diff --git a/src/views/CreateCampaignView.vue b/src/views/CreateCampaignView.vue
new file mode 100644
index 0000000..fd7663f
--- /dev/null
+++ b/src/views/CreateCampaignView.vue
@@ -0,0 +1,57 @@
+<template>
+  <h1>Création d’une campagne</h1>
+  <div class="h3 card" v-if="campaign.name">
+    {{ campaign.name }}
+  </div>
+  <form @submit.prevent="createCampaign" class="flex-col gap-2rem card">
+    <label for="campaign-name" class="flex-col gap-1rem">Nom de la nouvelle campagne</label>
+    <input
+      name="campaign-name"
+      type="text"
+      v-model="campaign.name"
+      placeholder="Nom de la nouvelle campagne" />
+
+    <div class="buttons gap-1rem">
+      <RouterLink :to="{ name: 'home' }" class="button faded">Annuler</RouterLink>
+      <button type="submit">Envoyer</button>
+    </div>
+  </form>
+</template>
+
+<script setup lang="ts">
+import router from '@/router';
+import { usePocketbaseStore, type NewCampaign } from '@/stores/pocketbase';
+import { type RecordModel } from 'pocketbase';
+import { onMounted, ref } from 'vue';
+
+const pbStore = usePocketbaseStore();
+const simpleUsers = ref<RecordModel[]>([]);
+
+const campaign = ref<NewCampaign>({
+  name: null,
+  game_master: pbStore.auth.userId,
+  players: null,
+});
+
+const createCampaign = () => {
+  pbStore.campaign.createCampaign(campaign.value).subscribe({
+    next: () => {
+      router.push({ name: 'home' });
+      router.go(0);
+    },
+  });
+};
+
+onMounted(() => {
+  pbStore.users.simpleUserList().subscribe({
+    next: (result) => (simpleUsers.value = result),
+    error: (err) => console.error('Failed to create campaign:', err),
+  });
+});
+</script>
+
+<style scoped lang="less">
+form {
+  min-width: 90%;
+}
+</style>