first gql request, displaying concernements as a liste

package.json

@@ -13,12 +13,15 @@
     "vue-router": "^4.1.5"
   },
   "devDependencies": {
+    "@rollup/plugin-graphql": "^2.0.0",
     "@rushstack/eslint-patch": "^1.1.4",
     "@vitejs/plugin-vue": "^3.0.3",
     "@vue/eslint-config-prettier": "^7.0.0",
     "axios": "^1.0.0",
     "eslint": "^8.22.0",
     "eslint-plugin-vue": "^9.3.0",
+    "graphql": "^16.6.0",
+    "graphql-tag": "^2.12.6",
     "prettier": "^2.7.1",
     "querystring-es3": "^0.2.1",
     "vite": "^3.0.9"

src/App.vue

@@ -10,7 +10,7 @@
   const userStore = UserStore()
 
   onMounted(() => {
-    console.log('APP onBeforeMount')
+    console.log('APP onMounted')
     userStore.checkUser()
   })
 
@@ -22,7 +22,6 @@
     <h1>Où atterrir</h1>
     <UserBlock/>
   </header>
-
   <RouterView />
 </template>
 

src/api/gql/concernement.fragment.gql

@@ -0,0 +1,25 @@
+fragment ConcernementFields on Concernement {
+  id
+  texte
+  title
+  recit {
+    file {
+      fid
+      filename
+      url
+      filemime
+      filesize
+    }
+    description
+  }
+  author
+  entites {
+    menacemaintien
+    prise
+    actuelfuture
+    entite {
+      title
+      id
+    }
+  }
+}

src/api/graphql-axios.js

@@ -6,7 +6,7 @@ import axios from 'axios'
 console.log(window.location)
 
 const MGQ = axios.create({
-  baseURL: `${window.location.origin}/api/mgq`,
+  baseURL: `${window.location.origin}/api/gql`,
   withCredentials: true,
   headers: {
     Accept: 'application/json',

src/components/ConcernementMapItem.vue

@@ -0,0 +1,42 @@
+<script>
+
+// import { mapActions, mapState } from 'pinia'
+// import { ConcernementsStore } from '@/stores/concernements'
+
+
+// import LoginBlock from '@components/block/LoginBlock.vue'
+// import UserTools from '@components/block/UserTools.vue'
+
+// import MA from '/api/ma-axios'
+
+export default {
+  props: ['concernement'],
+  // data(){
+  //   return {
+  //     block: null
+  //   }
+  // },
+  // computed: {
+  //   ...mapState(UserStore,['isloggedin'])
+  // },
+  created () {
+    console.log("ConcernementsMapItem created");
+  },
+  methods: {
+    // ...mapActions(ConcernementsStore,['loadConcernements'])
+  }
+  // components: {
+  //   LoginBlock,
+  //   UserTools
+  // }
+}
+
+</script>
+
+<template>
+    <span>{{ concernement.title }}</span>
+</template>
+
+<style lang="css" scoped>
+
+</style>

src/components/MapConcernements.vue

@@ -0,0 +1,52 @@
+<script>
+
+import { mapActions, mapState } from 'pinia'
+import { ConcernementsStore } from '@/stores/concernements'
+import ConcernementMapItem from '@components/ConcernementMapItem.vue'
+
+// import LoginBlock from '@components/block/LoginBlock.vue'
+// import UserTools from '@components/block/UserTools.vue'
+
+// import MA from '/api/ma-axios'
+
+export default {
+  // data(){
+  //   return {
+  //     block: null
+  //   }
+  // },
+  computed: {
+    ...mapState(ConcernementsStore,['concernements'])
+  },
+  created () {
+    console.log("mapConcernements created");
+    this.loadConcernements()
+  },
+  methods: {
+    ...mapActions(ConcernementsStore,['loadConcernements'])
+  },
+  components: {
+    ConcernementMapItem
+  }
+}
+
+</script>
+
+<template>
+  <div id="map-concernements">
+    <h1>Concernements</h1>
+    <!-- <canvas rel="canvas-map"></canvas> -->
+    <ul>
+      <li
+        v-for="concernement in concernements"
+        v-bind:key="concernement.id"
+      >
+        <ConcernementMapItem :concernement="concernement"/>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<style lang="css" scoped>
+
+</style>

src/components/block/LoginBlock.vue

@@ -57,7 +57,7 @@ export default {
   <form action="" @submit.prevent="onSubmitLogin">
     <input type="email" placeholder="email" name="email" v-model="mail">
     <input type="password" placeholder="mot de passe" name="passwd" v-model="passwd">
-    <input type="submit" value="login">
+    <input type="submit" value="se connecter">
     <p v-if="loginMessage">{{ loginMessage }}</p>
   </form>
 </template>

src/components/block/UserBlock.vue

@@ -31,7 +31,6 @@ export default {
 </script>
 
 <template>
-  <h1>UserBlock</h1>
   <UserTools v-if="isloggedin" />
   <LoginBlock v-else/>
 </template>

src/router/index.js

@@ -1,13 +1,14 @@
 import { createRouter, createWebHistory } from 'vue-router'
+import HomeView from '@views/Home.vue'
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
   routes: [
-    // {
+    {
-    //   path: '/',
+      path: '/',
-    //   name: 'home',
+      name: 'home',
-    //   component: HomeView
+      component: HomeView
-    // },
+    }
     // {
     //   path: '/about',
     //   name: 'about',

src/stores/concernements.js

@@ -0,0 +1,43 @@
+import { defineStore } from 'pinia'
+import { print } from 'graphql/language/printer'
+import gql from 'graphql-tag'
+
+// import REST from '@api/rest-axios'
+import GQL from '@api/graphql-axios'
+// import JSONAPI from '@api/json-axios'
+
+import ConcernementFields from '@api/gql/concernement.fragment.gql'
+
+export const ConcernementsStore = defineStore({
+  id: 'concernements',
+  state: () => ({
+    concernements: []
+  }),
+  getters: {
+    
+  },
+  actions: {
+    loadConcernements () {
+      console.log('concernements store loadConcernements');
+      return new Promise((resolve, reject) => {
+        const ast = gql`{
+          allconcernements {
+            ...ConcernementFields
+          }
+        }
+        ${ConcernementFields}
+        `
+        console.log('ast', ast);
+        GQL.post('', { query: print(ast) })
+          .then(({ data : { data  : { allconcernements } } }) => {
+            console.log('loadconcernements loaded', allconcernements)
+            this.concernements = allconcernements
+          })
+          .catch(error => {
+            console.warn('Issue with loadConcernements', error)
+            Promise.reject(error)
+          })
+      })
+    }
+  }
+})

src/views/Home.vue

@@ -0,0 +1,33 @@
+<script>
+
+import { mapState } from 'pinia'
+import { UserStore } from '@/stores/user'
+import MapConcernements from '@components/MapConcernements.vue'
+
+
+export default {
+  // data(){
+  //   return {
+  //     block: null
+  //   }
+  // },
+  computed: {
+    ...mapState(UserStore,['isloggedin'])
+  },
+  methods: {
+    
+  },
+  components: {
+    MapConcernements
+  }
+}
+
+</script>
+
+<template>
+  <MapConcernements v-if="isloggedin"/>
+</template>
+
+<style lang="css" scoped>
+
+</style>

vite.config.js

@@ -2,14 +2,16 @@ import { fileURLToPath, URL } from 'node:url'
 
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
+import graphql from '@rollup/plugin-graphql';
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [vue()],
+  plugins: [vue(), graphql()],
   resolve: {
     alias: {
       '@': fileURLToPath(new URL('./src', import.meta.url)),
       '@components': fileURLToPath(new URL('./src/components', import.meta.url)),
+      '@views': fileURLToPath(new URL('./src/views', import.meta.url)),
       '@api': fileURLToPath(new URL('./src/api', import.meta.url))
     }
   }