prepare message object content editing

src/Model/chatModel.ts

@@ -29,11 +29,13 @@ export interface ChatMessage {
 export interface MessageObject {
   id: string;
   title: string;
-  dateLastEdited: Date;
+  isoDateLastEdited: string;
   contentVersions: MessageObjectContent[];
 }
 
-export interface MessageObjectContent {}
+export interface MessageObjectContent {
+  isoDateVersionCreated: string;
+}
 
 // chat
 export class Chat {
@@ -163,7 +165,8 @@ export class Chat {
         this.encryptionKey.value
       );
       const messageObject = JSON.parse(decryptedMessageObjectString);
-      if (messageObject.id && messageObject.title) return this.handleMessageObject(messageObject);
+      if (messageObject.id && messageObject.title)
+        return this.handleMessageObject(messageObject);
     }
 
     this.handleMessage({
@@ -296,7 +299,7 @@ export class Chat {
     return {
       id: React.UUID(),
       title,
-      dateLastEdited: new Date(),
+      isoDateLastEdited: new Date().toISOString(),
       contentVersions: [],
     };
   };
@@ -341,7 +344,10 @@ export class Chat {
     messageObject: MessageObject
   ): MessageObjectContent => {
     const versions = messageObject.contentVersions;
-    if (versions.length == 0) return {};
+    if (versions.length == 0)
+      return {
+        isoDateVersionCreated: new Date().toISOString(),
+      };
     return versions[versions.length - 1];
   };
 

src/Views/Objects/objectDetailModal.tsx

@@ -1,6 +1,10 @@
 import * as React from "bloatless-react";
 
-import { Chat, MessageObject } from "../../Model/chatModel";
+import {
+  Chat,
+  MessageObject,
+  MessageObjectContent,
+} from "../../Model/chatModel";
 
 import { translation } from "../../translations";
 
@@ -9,13 +13,22 @@ export function ObjectDetailModal(
   messageObject: MessageObject,
   isPresented: React.State<boolean>
 ) {
+  // state
+  const editingTitle = new React.State(messageObject.title);
+  const selectedMessageObject = new React.State<MessageObjectContent>(
+    chat.getLatestObjectContent(messageObject)
+  );
+
+  // methods
   function closeModal() {
     isPresented.value = false;
   }
 
   function saveAndClose() {
     messageObject.title = editingTitle.value;
-    chat.updateObject(messageObject.id, {});
+    chat.updateObject(messageObject.id, {
+      isoDateVersionCreated: new Date().toISOString(),
+    });
     closeModal();
   }
 
@@ -24,30 +37,46 @@ export function ObjectDetailModal(
     closeModal();
   }
 
-  const editingTitle = new React.State(messageObject.title);
-
   return (
     <div class="modal" toggle:open={isPresented}>
       <div>
         <main>
           <h2>{messageObject.title}</h2>
-
-          <div>
-            <label class="tile">
-              <span class="icon">label</span>
-              <div>
-                <span>{translation.objectTitle}</span>
-                <input
-                  bind:value={editingTitle}
-                  placeholder={translation.objectTitlePlaceholder}
-                ></input>
-              </div>
-            </label>
-          </div>
+          <span class="secondary">{messageObject.id}</span>
 
           <hr></hr>
 
-          <button class="danger" on:click={deleteAndClose}>
+          <label class="tile">
+            <span class="icon">label</span>
+            <div>
+              <span>{translation.objectTitle}</span>
+              <input
+                bind:value={editingTitle}
+                placeholder={translation.objectTitlePlaceholder}
+              ></input>
+            </div>
+          </label>
+
+          <hr></hr>
+
+          <label class="tile">
+            <span class="icon">history</span>
+            <div>
+              <span>{translation.objectVersion}</span>
+              <select>
+                {...messageObject.contentVersions.map((content) => (
+                  <option>
+                    {new Date(content.isoDateVersionCreated).toLocaleString()}
+                  </option>
+                ))}
+              </select>
+              <span class="icon">arrow_drop_down</span>
+            </div>
+          </label>
+
+          <hr></hr>
+
+          <button class="danger width-input" on:click={deleteAndClose}>
             {translation.deleteObject}
             <span class="icon">delete</span>
           </button>

src/translations.ts

@@ -71,6 +71,8 @@ const englishTranslations = {
 
   objectTitle: "Object title",
   objectTitlePlaceholder: "My object",
+  
+  objectVersion: "Object version",
 
   resendObjects: "Resend all objects",
   deleteObject: "Delete object",