Previous instances dialog resolve userIds to displayNames

html/src/app.js

@@ -463,13 +463,13 @@ speechSynthesis.getVoices();
                         type: 'error'
                     });
                     $app.avatarDialog.visible = false;
-                    throw new Error("404: Can't find avatarǃ");
+                    throw new Error(`404: Can't find avatarǃ ${endpoint}`);
                 }
                 if (init.method === 'GET' && status === 404) {
                     this.failedGetRequests.set(endpoint, Date.now());
                 }
                 if (status === 404 && endpoint.substring(0, 6) === 'users/') {
-                    throw new Error("404: Can't find user!");
+                    throw new Error(`404: Can't find user! ${endpoint}`);
                 }
                 if (
                     status === 404 &&
@@ -977,6 +977,51 @@ speechSynthesis.getVoices();
         }
     });
 
+    Vue.component('display-name', {
+        template:
+            '<span @click="showUserDialog" class="x-link">{{ username }}</span>',
+        props: {
+            username: String,
+            userid: String,
+            location: String,
+            key: Number
+        },
+        data() {
+            return {
+                username: this.username
+            };
+        },
+        methods: {
+            async parse() {
+                this.username = this.userid;
+                if (this.userid) {
+                    var args = await API.getCachedUser({ userId: this.userid });
+                }
+                if (
+                    typeof args !== 'undefined' &&
+                    typeof args.json !== 'undefined' &&
+                    typeof args.json.displayName !== 'undefined'
+                ) {
+                    this.username = args.json.displayName;
+                }
+            },
+            showUserDialog() {
+                $app.showUserDialog(this.userid);
+            }
+        },
+        watch: {
+            location() {
+                this.parse();
+            },
+            key() {
+                this.parse();
+            }
+        },
+        mounted() {
+            this.parse();
+        }
+    });
+
     // API: User
 
     // changeUserName: PUT users/${userId} {displayName: string, currentPassword: string}
@@ -18910,6 +18955,7 @@ speechSynthesis.getVoices();
     $app.data.previousInstancesUserDialog = {
         visible: false,
         loading: false,
+        forceUpdate: 0,
         userRef: {}
     };
 
@@ -18940,6 +18986,7 @@ speechSynthesis.getVoices();
             array.sort(compareByCreatedAt);
             this.previousInstancesUserDialogTable.data = array;
             D.loading = false;
+            workerTimers.setTimeout(() => D.forceUpdate++, 150);
         });
     };
 
@@ -19007,6 +19054,7 @@ speechSynthesis.getVoices();
     $app.data.previousInstancesWorldDialog = {
         visible: false,
         loading: false,
+        forceUpdate: 0,
         worldRef: {}
     };
 
@@ -19037,6 +19085,7 @@ speechSynthesis.getVoices();
             array.sort(compareByCreatedAt);
             this.previousInstancesWorldDialogTable.data = array;
             D.loading = false;
+            workerTimers.setTimeout(() => D.forceUpdate++, 150);
         });
     };
 

html/src/index.pug

@@ -2805,7 +2805,7 @@ html
                             location(:location="scope.row.location" :hint="scope.row.name")
                     el-table-column(label="Instance Creator" prop="location" width="160")
                         template(v-once #default="scope")
-                            span.x-link(v-text="getDisplayNameFromUserId(scope.row.$location.userId)" @click="showUserDialog(scope.row.$location.userId)" style="cursor:pointer")
+                            display-name(:userid="scope.row.$location.userId" :location="scope.row.$location.tag" :key="previousInstancesUserDialog.forceUpdate")
                     el-table-column(label="Time" prop="time" width="90" sortable)
                         template(v-once #default="scope")
                             span(v-text="scope.row.timer")
@@ -2836,7 +2836,7 @@ html
                                 i.el-icon-lock(v-if="scope.row.$location.strict" style="display:inline-block;margin-left:5px")
                     el-table-column(label="Instance Creator" prop="location")
                         template(v-once #default="scope")
-                            span.x-link(v-text="getDisplayNameFromUserId(scope.row.$location.userId)" @click="showUserDialog(scope.row.$location.userId)" style="cursor:pointer")
+                            display-name(:userid="scope.row.$location.userId" :location="scope.row.$location.tag" :key="previousInstancesWorldDialog.forceUpdate")
                     el-table-column(label="Time" prop="time" width="90" sortable)
                         template(v-once #default="scope")
                             span(v-text="scope.row.timer")