stash

frontend/src/views/ShortId.vue

@@ -23,6 +23,7 @@
                     <div class="card-header">Expanded</div>
                     <div class="card-body">
                         <router-link v-if="expandedRoute" :to="expandedRoute">{{ expandedRoute }}</router-link>
+                        <span v-else-if="error" class="text-danger">{{ error }}</span>
                         <span v-else>No page exists for kind '{{ deserialized.kind }}'</span>
                     </div>
                 </div>
@@ -61,9 +62,10 @@
 </template>
 
 <script>
+import {mapActions} from 'vuex';
 import BaseLayout from '@/components/BaseLayout.vue';
 import {decodeShortId, deserializeShortId, encodeShortId, serializeShortId} from '@/short-id';
-import {expandedRoute as buildExpandedRoute} from '@/router';
+import {expandedRoute as buildExpandedRoute, NEEDS_IDMAP} from '@/router';
 
 const EXAMPLES = [
     {kind: 'item', owner_identity_id: 7, item_local_id: 42},
@@ -128,6 +130,11 @@ export default {
             required: true
         }
     },
+    data() {
+        return {
+            error: null
+        }
+    },
     computed: {
         decoded() {
             return decodeShortId(this.short_id);
@@ -150,6 +157,27 @@ export default {
                 return {kind, fields, ints, token, bits: shortIdBitSegments(ints)};
             });
         }
+    },
+    watch: {
+        // expandedRoute reads Vuex getters derived from state.idmap (see buildExpandedRoute in
+        // router.js), so it re-evaluates on its own once fetchIdMap resolves below - this just
+        // catches that and finishes the redirect the router's own (synchronous, can't-await)
+        // redirect couldn't.
+        expandedRoute(url) {
+            if (url) {
+                this.$router.replace(url);
+            }
+        }
+    },
+    methods: {
+        ...mapActions(['fetchIdMap'])
+    },
+    mounted() {
+        if (NEEDS_IDMAP.has(this.deserialized.kind) && !this.$store.state.idmapLoaded) {
+            this.fetchIdMap().catch(e => {
+                this.error = e.message;
+            });
+        }
     }
 }
 </script>