add user to idgo catalog request & handle error

src/services/misc-api.js

@@ -6,18 +6,22 @@ const baseUrl = store.state.configuration.VUE_APP_DJANGO_API_BASE;
 
 const miscAPI = {
 
-  async getIdgoCatalog() {
-    const response = await axios.get(
-      `${baseUrl}idgo-catalog/`
-    );
-    if (
-      response.status === 200 &&
-      response.data
-    ) {
-      return response.data;
-    } else {
-      return null;
-    }
+  async getIdgoCatalog(username) {
+    try {
+      const response = await axios.get(
+        `${baseUrl}idgo-catalog/?user=${username}`
+      );
+      if (
+        response.status === 200 &&
+        response.data
+        ) {
+          return response.data;
+        } else {
+          return null;
+        }
+      } catch (err) {
+        return err;
+      }
   },
 
   async getExternalGeojson(queryParams) {

src/views/Catalog.vue

@@ -11,9 +11,9 @@
         <div>Dataset</div>
         <div>Ressource</div>
       </div>
-      <div>
+      <div v-if="resources && resources.length > 0" >
         <div
-          v-for="(resource, index) in paginatedRessources"
+          v-for="(resource, index) in paginatedResources"
           :key="`${resource.resource_name}-${index}`"
           @click="selectResource(resource)"
           :class="[
@@ -29,6 +29,7 @@
           <div>{{ resource.resource_name }}</div>
         </div>
       </div>
+      <div class="no-response" v-else>Pas de données trouvées pour l'utilisateur {{this.user.username}}</div>
     </div>
 
     <div class="pagination_wrapper">
@@ -39,7 +40,7 @@
       >
         Affichage de l'élément {{ pagination.start + 1 }} à
         {{ displayedPageEnd }}
-        sur {{ ressources.length }} éléments
+        sur {{ resources.length }} éléments
       </div>
       <div
         v-if="nbPages.length > 1"
@@ -96,7 +97,7 @@
 </template>
 
 <script>
-import { mapGetters } from "vuex";
+import { mapGetters, mapState } from "vuex";
 import miscAPI from "@/services/misc-api";
 
 export default {
@@ -104,7 +105,7 @@ export default {
 
   data() {
     return {
-      ressources: [],
+      resources: [],
       pagination: {
         currentPage: 1,
         pagesize: 15,
@@ -116,15 +117,16 @@ export default {
   },
 
   computed: {
+    ...mapState(["user"]),
     ...mapGetters(["project", "permissions"]),
     ...mapGetters("feature_type", ["feature_type"]),
 
-    paginatedRessources() {
-      return this.ressources.slice(this.pagination.start, this.pagination.end);
+    paginatedResources() {
+      return this.resources.slice(this.pagination.start, this.pagination.end);
     },
 
     nbPages() {
-      let N = Math.ceil(this.ressources.length / this.pagination.pagesize);
+      let N = Math.ceil(this.resources.length / this.pagination.pagesize);
       const arr = [...Array(N).keys()].map(function (x) {
         ++x;
         return x;
@@ -133,8 +135,8 @@ export default {
     },
 
     displayedPageEnd() {
-      return this.ressources.length <= this.pagination.end
-        ? this.ressources.length
+      return this.resources.length <= this.pagination.end
+        ? this.resources.length
         : this.pagination.end;
     },
   },
@@ -160,7 +162,7 @@ export default {
     },
 
     toNextPage() {
-      if (this.pagination.end < this.ressources.length) {
+      if (this.pagination.end < this.resources.length) {
         this.pagination.start += this.pagination.pagesize;
         this.pagination.end += this.pagination.pagesize;
         this.pagination.currentPage += 1;
@@ -192,9 +194,9 @@ export default {
   mounted() {
     this.$store.commit("DISPLAY_LOADER", "Interrogation du catologue datasud.");
     this.$store.dispatch("GET_PROJECT_INFO", this.$route.params.slug);
-    miscAPI.getIdgoCatalog().then((data) => {
+    miscAPI.getIdgoCatalog(this.user.username).then((data) => {
+      if (data && data.layers) this.resources = data.layers;
       this.$store.commit("DISCARD_LOADER");
-      this.ressources = data.layers;
     });
   },
 };
@@ -237,6 +239,12 @@ h1 {
   background-color: #e0e0e0;
 }
 
+.no-response {
+  padding: 1rem;
+  text-align: center;
+  color: #585858;
+}
+
 .import {
   display: flex;
   align-items: center;