From 4bb3c9a61dc03019d5e3cd18d0e48f078bba45ba Mon Sep 17 00:00:00 2001
From: Matthew Evans <git@ml-evs.science>
Date: Tue, 22 Aug 2023 21:36:10 +0100
Subject: [PATCH] Fix last modified timezone and make value dynamic

---
 .../pydatalab/routes/v0_1/collections.py      |  2 +-
 webapp/src/views/CollectionPage.vue           | 23 ++++++++++++------
 webapp/src/views/EditPage.vue                 | 24 ++++++++++++-------
 3 files changed, 32 insertions(+), 17 deletions(-)

diff --git a/pydatalab/pydatalab/routes/v0_1/collections.py b/pydatalab/pydatalab/routes/v0_1/collections.py
index 81512057a..676070803 100644
--- a/pydatalab/pydatalab/routes/v0_1/collections.py
+++ b/pydatalab/pydatalab/routes/v0_1/collections.py
@@ -130,7 +130,7 @@ def create_collection():
             409,  # 409: Conflict
         )
 
-    data["date"] = data.get("date", datetime.datetime.now())
+    data["last_modified"] = data.get("last_modified", datetime.datetime.now().isoformat())
 
     try:
         data_model = Collection(**data)
diff --git a/webapp/src/views/CollectionPage.vue b/webapp/src/views/CollectionPage.vue
index 8e0850755..6e85abebc 100644
--- a/webapp/src/views/CollectionPage.vue
+++ b/webapp/src/views/CollectionPage.vue
@@ -18,8 +18,8 @@
       <span v-if="data_loaded && !savedStatus" class="navbar-text unsaved-warning">
         Unsaved changes
       </span>
-      <span v-if="data_loaded" class="navbar-text small mx-2"
-        ><i>Last saved {{ lastModified }}</i></span
+      <span v-if="data_loaded && lastModified" class="navbar-text small mx-2"
+        ><i>Last saved: {{ lastModified }}</i></span
       >
       <font-awesome-icon
         icon="save"
@@ -52,6 +52,7 @@ export default {
       data_loaded: false,
       isMenuDropdownVisible: false,
       isLoadingNewBlock: false,
+      lastModified: null,
     };
   },
   methods: {
@@ -60,16 +61,28 @@ export default {
       console.log("save clicked!");
       tinymce.editors.forEach((editor) => editor.save());
       saveCollection(this.collection_id);
+      this.lastModified = "just now";
     },
     async getCollection() {
       await getCollectionData(this.collection_id);
       this.data_loaded = true;
+      this.setLastModified();
     },
     leavePageWarningListener(event) {
       event.preventDefault;
       return (event.returnValue =
         "Unsaved changes present. Would you like to leave without saving?");
     },
+    setLastModified() {
+      let item_date = this.collection_data.last_modified || this.collection_data.date;
+      if (item_date == null) {
+        this.lastModified = "Unknown";
+      } else {
+        // API dates are in UTC but missing Z suffix
+        const save_date = new Date(item_date + "Z");
+        this.lastModified = formatDistanceToNow(save_date, { addSuffix: true });
+      }
+    },
   },
   computed: {
     itemTypeEntry() {
@@ -84,14 +97,10 @@ export default {
     savedStatus() {
       return this.$store.state.saved_status_collections[this.collection_id];
     },
-    lastModified() {
-      let item_date = this.collection_data.last_modified;
-      const save_date = new Date(item_date);
-      return formatDistanceToNow(save_date, new Date(), { addSuffix: true });
-    },
   },
   created() {
     this.getCollection();
+    this.interval = setInterval(() => this.setLastModified(), 30000);
   },
   components: {
     CollectionInformation,
diff --git a/webapp/src/views/EditPage.vue b/webapp/src/views/EditPage.vue
index c02b4fc43..304b330cf 100644
--- a/webapp/src/views/EditPage.vue
+++ b/webapp/src/views/EditPage.vue
@@ -46,7 +46,7 @@
       <span v-if="itemDataLoaded && !savedStatus" class="navbar-text unsaved-warning">
         Unsaved changes
       </span>
-      <span v-if="itemDataLoaded" class="navbar-text small mx-2"
+      <span v-if="itemDataLoaded && lastModified" class="navbar-text small mx-2"
         ><i>Last saved: {{ lastModified }}</i></span
       >
       <font-awesome-icon
@@ -119,6 +119,7 @@ export default {
       isLoadingRemoteTree: false,
       isLoadingRemoteFiles: false,
       isLoadingNewBlock: false,
+      lastModified: null,
     };
   },
   methods: {
@@ -170,6 +171,7 @@ export default {
         editor.isDirty() && editor.save();
       });
       saveItem(this.item_id);
+      this.lastModified = "just now";
     },
     getSampleData() {
       getItemData(this.item_id).then(() => {
@@ -180,6 +182,7 @@ export default {
           console.log(`calling update on block ${block_id}`);
           updateBlockFromServer(this.item_id, block_id, this.item_data.blocks_obj[block_id]);
         });
+        this.setLastModified();
       });
     },
     leavePageWarningListener(event) {
@@ -187,6 +190,16 @@ export default {
       return (event.returnValue =
         "Unsaved changes present. Would you like to leave without saving?");
     },
+    setLastModified() {
+      let item_date = this.item_data.last_modified || this.item_data.date;
+      if (item_date == null) {
+        this.lastModified = "Unknown";
+      } else {
+        // API dates are in UTC but missing Z suffix
+        const save_date = new Date(item_date + "Z");
+        this.lastModified = formatDistanceToNow(save_date, { addSuffix: true });
+      }
+    },
   },
   computed: {
     itemType() {
@@ -214,14 +227,6 @@ export default {
       );
       return allBlocksAreSaved && this.$store.state.saved_status_items[this.item_id];
     },
-    lastModified() {
-      let item_date = this.item_data.last_modified || this.item_data.date;
-      if (item_date == null) {
-        return "Unknown";
-      }
-      const save_date = new Date(item_date);
-      return formatDistanceToNow(save_date, { addSuffix: true });
-    },
     files() {
       return this.item_data.files;
     },
@@ -234,6 +239,7 @@ export default {
   },
   created() {
     this.getSampleData();
+    this.interval = setInterval(() => this.setLastModified(), 30000);
   },
   components: {
     TinyMceInline,