prepare message object content editing

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>