Social status history

html/src/app.js

@@ -7127,6 +7127,14 @@ speechSynthesis.getVoices();
         },
         layout: 'table'
     };
+    $app.data.socialStatusHistoryTable = {
+        data: [],
+        tableProps: {
+            stripe: true,
+            size: 'mini'
+        },
+        layout: 'table'
+    };
     $app.data.visits = 0;
     $app.data.openVR = configRepository.getBool('openVR');
     $app.data.openVRAlways = configRepository.getBool('openVRAlways');
@@ -9380,11 +9388,29 @@ speechSynthesis.getVoices();
     $app.methods.showSocialStatusDialog = function () {
         this.$nextTick(() => adjustDialogZ(this.$refs.socialStatusDialog.$el));
         var D = this.socialStatusDialog;
+        var { statusHistory } = API.currentUser;
+        var statusHistoryArray = [];
+        for (var i = 0; i < statusHistory.length; ++i) {
+            var addStatus = {
+                no: i + 1,
+                status: statusHistory[i]
+            }
+            statusHistoryArray.push(addStatus);
+        }
+        this.socialStatusHistoryTable.data = statusHistoryArray;
         D.status = API.currentUser.status;
         D.statusDescription = API.currentUser.statusDescription;
         D.visible = true;
     };
 
+    $app.methods.setSocialStatusFromHistory = function (val) {
+        if (val === null) {
+            return;
+        }
+        var D = this.socialStatusDialog;
+        D.statusDescription = val.status;
+    };
+
     // App: Language Dialog
 
     $app.data.languageDialog = {

html/src/index.pug

@@ -1467,7 +1467,14 @@ html
             //- dialog: social status
             el-dialog.x-dialog(ref="socialStatusDialog" :visible.sync="socialStatusDialog.visible" title="Social Status" width="400px")
                 div(v-loading="socialStatusDialog.loading")
-                    el-select(v-model="socialStatusDialog.status" style="dispaly:block")
+                    el-collapse(style="border:0")
+                        el-collapse-item
+                            template(slot="title")
+                                span(style="font-size:16px") History
+                            data-tables(v-bind="socialStatusHistoryTable" @row-click="setSocialStatusFromHistory" style="cursor:pointer")
+                                el-table-column(label="No" prop="no" width="40")
+                                el-table-column(label="Status" prop="status")
+                    el-select(v-model="socialStatusDialog.status" style="dispaly:block;margin-top:10px")
                         el-option(label="Online" value="active").
                             #[i.x-user-status.online] Online
                         el-option(label="Join Me" value="join me").