add some collection view

.env

@@ -1 +1 @@
-VITE_API_URL=https://geovisio-backend.osc-fr1.scalingo.io/api/search
+VITE_API_URL=https://geovisio-backend.osc-fr1.scalingo.io/api/

package.json

@@ -18,8 +18,10 @@
     "format": "prettier .  --write"
   },
   "dependencies": {
+    "axios": "^1.2.3",
     "geovisio": "^1.4.0",
     "vue": "^3.2.45",
+    "vue-axios": "^3.5.2",
     "vue-eslint-parser": "^9.1.0",
     "vue-i18n": "9",
     "vue-router": "^4.1.6"

src/assets/main.css

@@ -1,9 +1,19 @@
+html {
+  font-size: 62.5%; /* 1rem = 10px */
+}
+
 #app {
   width: 100%;
 }
 
 ul,
-ol {
+ol,
+h1,
+h2,
+h3,
+h4,
+h5 {
+  margin: 0;
   padding: 0;
   list-style: none;
 }

src/components/CollectionList.vue

@@ -0,0 +1,53 @@
+<template>
+  <ul class="collection-list">
+    <li
+      v-for="collection in state.collections"
+      :key="collection.id"
+      class="collection-item"
+    >
+      <span>{{ collection.title }}</span>
+      <span>{{ collection.license }}</span>
+      <p>{{ collection.description }}</p>
+    </li>
+  </ul>
+</template>
+
+<script lang="ts" setup>
+import axios from "axios";
+import { onMounted } from "vue";
+import { reactive } from "vue";
+
+interface Collection {
+  id: string;
+  title: string;
+  description: string;
+  license: string;
+}
+
+const state = reactive<{ collections: Collection[] }>({
+  collections: [],
+});
+
+onMounted(async () => {
+  try {
+    const { data } = await axios.get("collections");
+    state.collections = data.collections.slice(-10);
+  } catch (err) {
+    console.log(err);
+  }
+});
+</script>
+
+<style scoped>
+.collection-list {
+  margin: 0;
+}
+.collection-item {
+  display: flex;
+  flex-direction: column;
+  border: 1px solid black;
+  padding: 10px;
+  border-radius: 5px;
+  margin-bottom: 1rem;
+}
+</style>

src/main.ts

@@ -2,10 +2,13 @@ import { createApp } from "vue";
 import { createI18n } from "vue-i18n";
 import App from "./App.vue";
 import router from "./router";
+import axios from "axios";
+import VueAxios from "vue-axios";
 import fr from "./locales/fr.json";
-
 import "./assets/main.css";
 
+axios.defaults.baseURL = import.meta.env.VITE_API_URL;
+
 const i18n = createI18n({
   locale: "fr",
   globalInjection: true,
@@ -18,5 +21,6 @@ const app = createApp(App);
 
 app.use(i18n);
 app.use(router);
-
+app.use(VueAxios, axios);
+app.provide("axios", app.config.globalProperties.axios);
 app.mount("#app");

src/views/HomeView.vue

@@ -2,20 +2,26 @@
   <link
     rel="stylesheet"
     type="text/css"
-    href="https://geovisio.fr/viewer/lib/index.css"
+    href="https://cdn.jsdelivr.net/npm/geovisio@1.3.1/build/index.css"
   />
-
-  <div id="viewer" class="viewer"></div>
+  <main class="entry-page">
+    <section id="viewer" class="entry-viewer"></section>
+    <section class="entry-collection-list">
+      <h2 class="subtitle">Les dernières collections</h2>
+      <CollectionList />
+    </section>
+  </main>
 </template>
 
 <script lang="ts" setup>
 import { onMounted } from "vue";
 import GeoVisio from "geovisio";
+import CollectionList from "@/components/CollectionList.vue";
 
-onMounted(() => {
+onMounted(async () => {
   new GeoVisio(
     "viewer", // Div ID
-    import.meta.env.VITE_API_URL, // STAC API search endpoint
+    `${import.meta.env.VITE_API_URL}search`, // STAC API search endpoint
     {
       map: {
         startWide: true,
@@ -25,10 +31,20 @@ onMounted(() => {
 });
 </script>
 <style scoped>
-.viewer {
+.entry-page {
+  display: flex;
+  padding: 40px;
+}
+.entry-viewer {
   height: 500px;
-  width: 95%;
+  width: 70%;
   position: relative;
-  margin: auto;
+  margin-right: 20px;
+}
+.entry-collection-list {
+  width: 30%;
+}
+.subtitle {
+  margin-bottom: 2rem;
 }
 </style>

tsconfig.app.json

@@ -1,6 +1,6 @@
 {
   "extends": "@vue/tsconfig/tsconfig.web.json",
-  "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
+  "include": ["env.d.ts", "src/**/*", "src/**/*.vue", "src/locales/*.json"],
   "exclude": ["src/**/__tests__/*"],
   "compilerOptions": {
     "composite": true,

tsconfig.config.json

@@ -7,7 +7,6 @@
     "playwright.config.*"
   ],
   "compilerOptions": {
-    "composite": true,
     "types": ["node", "vite/client"]
   }
 }