From 80f72e7dc9e2ca795990acc78c48614fcf47b582 Mon Sep 17 00:00:00 2001
From: isUnknown <adrien.payet@outlook.com>
Date: Thu, 11 Jul 2024 12:42:29 +0200
Subject: [PATCH] Finish to setup data access

---
 README.md                                 |  8 ++++--
 public/site/controllers/site.php          |  9 +++++++
 public/site/snippets/footer.php           |  9 ++-----
 public/site/snippets/generic-template.php |  3 +++
 public/site/templates/default.php         |  2 +-
 public/site/templates/home.json.php       |  7 ++++++
 public/site/templates/home.php            |  4 +--
 src/App.vue                               | 30 +++++++++--------------
 src/stores/api.js                         | 26 ++++++++++++++++++--
 src/views/Home.vue                        | 11 ++++++---
 10 files changed, 73 insertions(+), 36 deletions(-)
 create mode 100644 public/site/controllers/site.php
 create mode 100644 public/site/snippets/generic-template.php
 create mode 100644 public/site/templates/home.json.php

diff --git a/README.md b/README.md
index 574aa5f..fe7117f 100644
--- a/README.md
+++ b/README.md
@@ -1,7 +1,11 @@
 The project is based on [Kirby CMS](https://getkirby.com), [Vite](https://vitejs.dev/) + [Vue](https://fr.vuejs.org/) and [Pinia](https://pinia.vuejs.org/) as a state manager.
 Vue is used following the composition API approach.
 
-## First setup :
+# Development
+
+## Development environment
+
+### First setup :
 
 - **From the `/public` directory**, install the Kirby dependencies : `composer install`
 - **From the root directory**, install the Node dependencies : `npm install`
@@ -15,7 +19,7 @@ VITE_USERNAME=mail@example.com
 VITE_PASSWORD=your-private-password
 ```
 
-## Development environment
+### Servers
 
 - **From the `/public` directory**, launch the PHP server : `php -S localhost:8888 kirby/router.php`
 - In another terminal tab, **from the root directory**, launch the Vite server : `vite`
diff --git a/public/site/controllers/site.php b/public/site/controllers/site.php
new file mode 100644
index 0000000..596e4d4
--- /dev/null
+++ b/public/site/controllers/site.php
@@ -0,0 +1,9 @@
+<?php
+
+return function ($page) {
+  $data = $page->toArray();
+  $data['template'] = (string) $page->template();
+  return [
+    'genericData' => $data,
+  ];
+};
\ No newline at end of file
diff --git a/public/site/snippets/footer.php b/public/site/snippets/footer.php
index 6cd780f..7e82b3b 100644
--- a/public/site/snippets/footer.php
+++ b/public/site/snippets/footer.php
@@ -1,8 +1,3 @@
-    <script>
-      const kirbyData = {
-        pageUri: '<?= $page->uri() ?>',
-        pageTemplate: '<?= $page->template() ?>',
-      }
-    </script>
-  </body>
+  
+</body>
 </html>
\ No newline at end of file
diff --git a/public/site/snippets/generic-template.php b/public/site/snippets/generic-template.php
new file mode 100644
index 0000000..f7d9cc5
--- /dev/null
+++ b/public/site/snippets/generic-template.php
@@ -0,0 +1,3 @@
+<?php snippet('header') ?>
+  <div id="app"></div>
+<?php snippet('footer') ?>
\ No newline at end of file
diff --git a/public/site/templates/default.php b/public/site/templates/default.php
index 74e38ae..a3ce869 100644
--- a/public/site/templates/default.php
+++ b/public/site/templates/default.php
@@ -1 +1 @@
-<h1><?= $page->title() ?></h1>
+<h1><?= $page->title() ?></h1>
\ No newline at end of file
diff --git a/public/site/templates/home.json.php b/public/site/templates/home.json.php
new file mode 100644
index 0000000..522ef8c
--- /dev/null
+++ b/public/site/templates/home.json.php
@@ -0,0 +1,7 @@
+<?php
+
+$specificData = [];
+
+$data = array_merge($genericData, $specificData);
+
+echo json_encode($data);
\ No newline at end of file
diff --git a/public/site/templates/home.php b/public/site/templates/home.php
index f7d9cc5..4ed6305 100644
--- a/public/site/templates/home.php
+++ b/public/site/templates/home.php
@@ -1,3 +1 @@
-<?php snippet('header') ?>
-  <div id="app"></div>
-<?php snippet('footer') ?>
\ No newline at end of file
+<?php snippet('generic-template') ?>
\ No newline at end of file
diff --git a/src/App.vue b/src/App.vue
index f630237..8172e23 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,23 +1,17 @@
-<script setup>
-import Home from "./views/Home.vue";
-import { useApiStore } from "./stores/api";
+<template>
+  <component :is="components[data.template]" v-if="data" :data="data" />
+</template>
 
-const templates = {
-  home: {
-    component: Home,
-    query: {
-      title: true,
-    },
-  },
+<script setup>
+import home from "./views/Home.vue";
+import { useApiStore } from "./stores/api";
+import { ref } from "vue";
+
+const components = {
+  home,
 };
 
+const data = ref(null);
 const api = useApiStore();
-const pageTemplate = kirbyData.pageTemplate;
-const pageUri = kirbyData.pageUri;
-
-api.fetchData();
+api.fetchPageData().then((res) => (data.value = res));
 </script>
-
-<template>
-  <component :is="templates[pageTemplate].component" />
-</template>
diff --git a/src/stores/api.js b/src/stores/api.js
index d04dbaf..9774a37 100644
--- a/src/stores/api.js
+++ b/src/stores/api.js
@@ -1,7 +1,29 @@
 import { defineStore } from "pinia";
 
 export const useApiStore = defineStore("counter", () => {
-  function fetchData() {
+  async function fetchPageData() {
+    const isHomePage = window.location.pathname === "/";
+    const url = isHomePage
+      ? `${window.location.href}home.json`
+      : `${window.location.href}.json`;
+
+    try {
+      const response = await fetch(url);
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`);
+      }
+      const data = await response.json();
+      return data;
+    } catch (error) {
+      console.error(
+        "Une erreur s'est produite lors de la récupération des données :",
+        error
+      );
+      throw error;
+    }
+  }
+
+  function fetchDataThroughKQL() {
     const api = "/api/query";
 
     const username = import.meta.env.VITE_USERNAME;
@@ -42,5 +64,5 @@ export const useApiStore = defineStore("counter", () => {
       });
   }
 
-  return { fetchData };
+  return { fetchDataThroughKQL, fetchPageData };
 });
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 3ea8fa9..0e3188a 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -1,3 +1,8 @@
-<script setup></script>
-<template></template>
-<style scoped></style>
+<template>
+  <h1>{{ data.content.title }}</h1>
+</template>
+<script setup>
+const { data } = defineProps({
+  data: Object,
+});
+</script>