error message when a corpus is not found

vue/Navigation/ElementNavigation.vue

 <template>
   <div>
-    <div class="field has-addons is-marginless">
-      <FilterBar
-        class="is-expanded"
-        placeholder="Filter elements…"
-        :filters="availableFilters"
-        :disabled="loading"
-        v-if="corpus.id"
-        v-model="selectedFilters"
-        v-on:submit="submitFilters"
-      />
-      <div class="control has-tooltip-bottom" data-tooltip="Sort elements by a field">
-        <span class="select">
-          <select v-model="order" title="Sort field">
-            <option value="position" v-if="elementId">Position</option>
-            <option value="name">Name</option>
-            <option value="created">Creation date</option>
-            <option value="random">Random</option>
-          </select>
-        </span>
+    <div v-if="corpusError" class="notification is-warning">
+      {{ corpusError }}
+    </div>
+    <template v-else>
+      <div class="field has-addons is-marginless">
+        <FilterBar
+          class="is-expanded"
+          placeholder="Filter elements…"
+          :filters="availableFilters"
+          :disabled="loading"
+          v-if="corpus.id"
+          v-model="selectedFilters"
+          v-on:submit="submitFilters"
+        />
+        <div class="control has-tooltip-bottom" data-tooltip="Sort elements by a field">
+          <span class="select">
+            <select v-model="order" title="Sort field">
+              <option value="position" v-if="elementId">Position</option>
+              <option value="name">Name</option>
+              <option value="created">Creation date</option>
+              <option value="random">Random</option>
+            </select>
+          </span>
+        </div>
+        <div class="control has-tooltip-bottom" data-tooltip="Sort direction">
+          <button class="button" v-on:click="toggleOrderDirection" :disabled="order === 'random'">
+            <i :class="`icon-sort-${orderDirection}`"></i>
+          </button>
+        </div>
       </div>
-      <div class="control has-tooltip-bottom" data-tooltip="Sort direction">
-        <button class="button" v-on:click="toggleOrderDirection" :disabled="order === 'random'">
-          <i :class="`icon-sort-${orderDirection}`"></i>
-        </button>
+      <div v-if="error" class="notification is-danger mt-3">
+        {{ error }}
       </div>
-    </div>
-    <div v-if="error" class="notification is-danger mt-3">
-      {{ error }}
-    </div>
-    <Paginator
-      v-else
-      :response="elements"
-      :loading="loading"
-      :page.sync="pageNumber"
-      :page-size="navigationPageSize"
-      bottom-bar
-    >
-      <template v-slot:default="{ results }">
-        <ElementList :elements="results" :max-size="!elementId || !displayDetails" />
-      </template>
-    </Paginator>
+      <Paginator
+        v-else
+        :response="elements"
+        :loading="loading"
+        :page.sync="pageNumber"
+        :page-size="navigationPageSize"
+        bottom-bar
+      >
+        <template v-slot:default="{ results }">
+          <ElementList :elements="results" :max-size="!elementId || !displayDetails" />
+        </template>
+      </Paginator>
+    </template>
   </div>
 </template>
 
@@ -80,6 +85,7 @@ export default {
     pageNumber: 1,
     loading: false,
     error: null,
+    corpusError: null,
 
     /*
      * Beware updating those values as they immediately trigger onFilterUpdate
@@ -276,10 +282,17 @@ export default {
           !this.elementId
         ) {
           // Ensure we have a corpus available
-          const corpus = await this.$store.dispatch('corpora/get', { id: this.corpusId })
-          this.selectedFilters = { top_level: true }
-          if (corpus.top_level_type) this.selectedFilters.type = corpus.top_level_type
-          else this.selectedFilters.folder = true
+          let corpus = null
+          try {
+            corpus = await this.$store.dispatch('corpora/get', { id: this.corpusId })
+          } catch (e) {
+            this.corpusError = errorParser(e)
+          }
+          if (corpus) {
+            this.selectedFilters = { top_level: true }
+            if (corpus.top_level_type) this.selectedFilters.type = corpus.top_level_type
+            else this.selectedFilters.folder = true
+          }
         }
         this.onFilterUpdate({ replaceRoute: true })
       }