Amirou17 · Amirou17 · Feb 26, 2021 · Feb 26, 2021 · Feb 26, 2021 · Feb 27, 2021
diff --git a/testapi/package-lock.json b/testapi/package-lock.json
diff --git a/testapi/package.json b/testapi/package.json
@@ -8,8 +8,13 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "axios": "^0.21.1",
+    "bootstrap": "^4.6.0",
+    "bootstrap-vue": "^2.21.2",
     "core-js": "^3.6.5",
-    "vue": "^2.6.11"
+    "leaflet": "^1.7.1",
+    "vue": "^2.6.12",
+    "vue2-leaflet": "^2.6.0"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "~4.5.0",

diff --git a/testapi/src/App.vue b/testapi/src/App.vue
@@ -1,28 +1,32 @@
 <template>
   <div id="app">
-    <img alt="Vue logo" src="./assets/logo.png">
-    <HelloWorld msg="Welcome to Your Vue.js App"/>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
+    <Module1 msg="Welcome to Your Vue.js App"/>
   </div>
 </template>
 
 <script>
-import HelloWorld from './components/HelloWorld.vue'
+import Module1 from './components/Module2.vue'
+import Vue from 'vue'
+import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'
+
+// Import Bootstrap an BootstrapVue CSS files (order is important)
+import 'bootstrap/dist/css/bootstrap.css'
+import 'bootstrap-vue/dist/bootstrap-vue.css'
+
+// Make BootstrapVue available throughout your project
+Vue.use(BootstrapVue)
+// Optionally install the BootstrapVue icon components plugin
+Vue.use(IconsPlugin)
 
 export default {
   name: 'App',
   components: {
-    HelloWorld
+    Module1
   }
 }
 </script>
 
 <style>
-#app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-  margin-top: 60px;
-}
+
 </style>
diff --git a/testapi/src/components/HelloWorld.vue b/testapi/src/components/HelloWorld.vue
diff --git a/testapi/src/components/Module1.vue b/testapi/src/components/Module1.vue
@@ -0,0 +1,43 @@
+<template>
+  <div class="container pt-5">
+    <h2 class="bg-info text-muted sticky-top">Les 10 premières entreprises à fort potentiel d'embauche se trouvant à Paris ou Marseille</h2>
+    <div class="row row-cols-1 row-cols-md-2 pt-5">
+      <div class="container" :key="index" v-for="(entreprise, index) in entreprise">
+        <div class="jumbotron col mb-7">
+          <h3>{{ entreprise.name }}</h3>
+          <hr>
+          <h5>Nombre d'étoiles : <span class="badge badge-info">{{ entreprise.stars }}</span></h5>
+          <h6>Adresse : {{ entreprise.address }}</h6>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import axios from 'axios'
+export default {
+  name: 'module1',
+  data(){
+    return{
+      config : {
+        headers: {
+          'Authorization' : 'Bearer GofhkL21L3x75t_-vWyPw2-vKuM'
+        }
+      },
+      entreprise: null
+    }
+  },
+  mounted() {
+    axios
+        .get('https://api.emploi-store.fr/partenaire/labonneboite/v1/company/?rome_codes_keyword_search=Informatique&page=1&page_size=10&departments=75,13', this.config)
+        .then((reponse) => {
+          this.entreprise = reponse.data.companies;
+          //console.log(this.entreprise)
+        }).catch((reason) => {console.log(reason)});
+  }
+}
+</script>
+
+<style scoped>
+</style>
diff --git a/testapi/src/components/Module2.vue b/testapi/src/components/Module2.vue
@@ -0,0 +1,77 @@
+<template>
+  <div class="container w-75 pt-3">
+    <div class="list row">
+      <div class="col">
+        <h4 class="pb-3">Listes des entreprises à fort potentiel d'embauche se trouvant à Paris ou Marseille</h4>
+        <ul class="list-group" id="tutorials-list">
+          <li
+              class="list-group-item"
+              :class="{ active: index === currentIndex }"
+              v-for="(entreprise, index) in entreprises"
+              :key="index"
+          >
+            <strong>{{ entreprise.name }}</strong> --- <span class="badge badge-info">{{ entreprise.stars }}</span> étoiles --- Adresse : {{ entreprise.address }}
+          </li>
+        </ul>
+      </div>
+      <div class="col-md-12 pt-2 ">
+        <b-pagination
+            v-model="page"
+            :total-rows="count"
+            :per-page="pageSize"
+            prev-text="Prev"
+            next-text="Next"
+            @change="handlePageChange"
+        ></b-pagination>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import axios from 'axios'
+export default {
+  name: 'Moduel2',
+  data(){
+    return {
+      config : {
+        headers: {
+          'Authorization' : 'Bearer pT1gt5QI36V7zYN9DRvms4zwcyk'
+        }
+      },
+      entreprise: null,
+      entreprises: [],
+      currentIndex: -1,
+      page: 1,
+      count: 0,
+      pageSize: 10,
+
+    }
+  },
+  methods: {
+    handlePageChange(value) {
+      this.page = value;
+      this.retrieveEntreprises();
+    },
+    retrieveEntreprises(){
+      axios
+          .get('https://api.emploi-store.fr/partenaire/labonneboite/v1/company/?rome_codes_keyword_search=Informatique&page='+this.page+'&page_size=10&departments=75,13', this.config)
+          .then((reponse) => {
+            this.entreprises = reponse.data.companies;
+            this.count = reponse.data.companies_count;
+          }).catch((reason) => {
+        this.count = 200;
+        console.log(reason)
+      });
+    }
+  },
+  mounted(){
+    this.retrieveEntreprises();
+  }
+}
+
+</script>
+
+<style scoped>
+
+</style>
diff --git a/testapi/yarn.lock b/testapi/yarn.lock
@@ -1812,6 +1812,13 @@ aws4@^1.8.0:
   resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.11.0.tgz#d61f46d83b2519250e2784daf5b09479a8b41c59"
   integrity sha512-xh1Rl34h6Fi1DC2WWKfxUTVqRsNnr6LsKz2+hfwDxQJWmrx8+c7ylaqBMcHfl1U1r2dsifOvKX3LQuLNZ+XSvA==
 
+axios@^0.21.1:
+  version "0.21.1"
+  resolved "https://registry.yarnpkg.com/axios/-/axios-0.21.1.tgz#22563481962f4d6bde9a76d516ef0e5d3c09b2b8"
+  integrity sha512-dKQiRHxGD9PPRIUNIWvZhPTPpl1rf/OxTYKsqKUDjBwYylTvV7SjSHJb9ratfyzM6wCdLCOYLzs73qpg5c4iGA==
+  dependencies:
+    follow-redirects "^1.10.0"
+
 babel-eslint@^10.1.0:
   version "10.1.0"
   resolved "https://registry.yarnpkg.com/babel-eslint/-/babel-eslint-10.1.0.tgz#6968e568a910b78fb3779cdd8b6ac2f479943232"
@@ -3884,7 +3891,7 @@ flush-write-stream@^1.0.0:
     inherits "^2.0.3"
     readable-stream "^2.3.6"
 
-follow-redirects@^1.0.0:
+follow-redirects@^1.0.0, follow-redirects@^1.10.0:
   version "1.13.2"
   resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.13.2.tgz#dd73c8effc12728ba5cf4259d760ea5fb83e3147"
   integrity sha512-6mPTgLxYm3r6Bkkg0vNM0HTjfGrOEtsfbhagQvbxDEsEkpNhw582upBaoRZylzen6krEmxXJgt9Ju6HiI4O7BA==
@@ -5064,6 +5071,11 @@ launch-editor@^2.2.1:
     chalk "^2.3.0"
     shell-quote "^1.6.1"
 
+leaflet@^1.7.1:
+  version "1.7.1"
+  resolved "https://registry.yarnpkg.com/leaflet/-/leaflet-1.7.1.tgz#10d684916edfe1bf41d688a3b97127c0322a2a19"
+  integrity sha512-/xwPEBidtg69Q3HlqPdU3DnrXQOvQU/CCHA1tcDQVzOwm91YMYaILjNp7L4Eaw5Z4sOYdbBz6koWyibppd8Zqw==
+
 levn@^0.3.0, levn@~0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/levn/-/levn-0.3.0.tgz#3b09924edf9f083c0490fdd4c0bc4421e04764ee"
@@ -8135,6 +8147,11 @@ vue-template-es2015-compiler@^1.9.0:
   resolved "https://registry.yarnpkg.com/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.9.1.tgz#1ee3bc9a16ecbf5118be334bb15f9c46f82f5825"
   integrity sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==
 
+vue2-leaflet@^2.6.0:
+  version "2.6.0"
+  resolved "https://registry.yarnpkg.com/vue2-leaflet/-/vue2-leaflet-2.6.0.tgz#c83c60a745fbc2a74d9dbd0f75b2a5ae07d220a9"
+  integrity sha512-JG+w9TtNuk1yRpPta+RjzH6J+opdRUPzSo8UuBnwk+a/6XD0f2tsaB6g3D6ZpBgIE4wZA2dbZ0dZFz2ulYMj3A==
+
 vue@^2.6.11:
   version "2.6.12"
   resolved "https://registry.yarnpkg.com/vue/-/vue-2.6.12.tgz#f5ebd4fa6bd2869403e29a896aed4904456c9123"