finish object version handling

src/Model/chatModel.ts

@@ -35,6 +35,9 @@ export interface MessageObject {
 
 export interface MessageObjectContent {
   isoDateVersionCreated: string;
+  id: string;
+
+  noteContent?: string;
 }
 
 // chat
@@ -300,7 +303,7 @@ export class Chat {
       id: React.UUID(),
       title,
       isoDateLastEdited: new Date().toISOString(),
-      contentVersions: [],
+      contentVersions: [this.createObjectContent()],
     };
   };
 
@@ -308,10 +311,15 @@ export class Chat {
     this.objects.set(messageObject.id, messageObject);
   };
 
-  updateObject = (id: string, contents: MessageObjectContent): void => {
+  updateObject = (id: string, contents?: MessageObjectContent): void => {
     const messageObject = this.objects.value.get(id);
     if (!messageObject) return;
-    messageObject.contentVersions.push(contents);
+    if (contents) {
+      messageObject.contentVersions.push(contents);
+      messageObject.contentVersions.sort((a, b) =>
+        a.isoDateVersionCreated > b.isoDateVersionCreated ? 0 : 1
+      );
+    }
     this.sendObject(messageObject);
   };
 
@@ -342,13 +350,23 @@ export class Chat {
 
   getLatestObjectContent = (
     messageObject: MessageObject
+  ): MessageObjectContent => {
+    return this.getObjectContentFromIndex(messageObject, 0);
+  };
+
+  getObjectContentFromIndex = (
+    messageObject: MessageObject,
+    index: number
   ): MessageObjectContent => {
     const versions = messageObject.contentVersions;
-    if (versions.length == 0)
-      return {
-        isoDateVersionCreated: new Date().toISOString(),
-      };
-    return versions[versions.length - 1];
+    return versions[index] ?? this.createObjectContent();
+  };
+
+  createObjectContent = () => {
+    return {
+      id: React.UUID(),
+      isoDateVersionCreated: new Date().toISOString(),
+    };
   };
 
   // channel

src/Views/Objects/objectDetailModal.tsx

@@ -1,10 +1,6 @@
 import * as React from "bloatless-react";
 
-import {
-  Chat,
-  MessageObject,
-  MessageObjectContent,
-} from "../../Model/chatModel";
+import { Chat, MessageObject } from "../../Model/chatModel";
 
 import { translation } from "../../translations";
 
@@ -15,20 +11,59 @@ export function ObjectDetailModal(
 ) {
   // state
   const editingTitle = new React.State(messageObject.title);
-  const selectedMessageObject = new React.State<MessageObjectContent>(
-    chat.getLatestObjectContent(messageObject)
+
+  const selectedMessageObjectIndex = new React.State(0);
+  selectedMessageObjectIndex.subscribe(console.log);
+  const selectedMessageObject = React.createProxyState(
+    [selectedMessageObjectIndex],
+    () =>
+      chat.getObjectContentFromIndex(
+        messageObject,
+        selectedMessageObjectIndex.value
+      )
+  );
+
+  const didEditContent = new React.State(false);
+  const editingNoteContent = React.createProxyState(
+    [selectedMessageObject],
+    () => selectedMessageObject.value.noteContent ?? ""
+  );
+  React.bulkSubscribe(
+    [editingNoteContent],
+    () => (didEditContent.value = true)
   );
 
   // methods
+  function handleKeyDown(e: KeyboardEvent) {
+    if (!e.metaKey && !e.ctrlKey) return;
+
+    switch (e.key) {
+      case "s":
+        e.preventDefault();
+        saveAndClose();
+        break;
+    }
+  }
+
   function closeModal() {
     isPresented.value = false;
   }
 
   function saveAndClose() {
     messageObject.title = editingTitle.value;
-    chat.updateObject(messageObject.id, {
-      isoDateVersionCreated: new Date().toISOString(),
-    });
+
+    chat.updateObject(
+      messageObject.id,
+      didEditContent.value == true
+        ? {
+            isoDateVersionCreated: new Date().toISOString(),
+            id: React.UUID(),
+
+            noteContent: editingNoteContent.value,
+          }
+        : undefined
+    );
+
     closeModal();
   }
 
@@ -38,7 +73,7 @@ export function ObjectDetailModal(
   }
 
   return (
-    <div class="modal" toggle:open={isPresented}>
+    <div class="modal" toggle:open={isPresented} on:keydown={handleKeyDown}>
       <div>
         <main>
           <h2>{messageObject.title}</h2>
@@ -63,9 +98,9 @@ export function ObjectDetailModal(
             <span class="icon">history</span>
             <div>
               <span>{translation.objectVersion}</span>
-              <select>
-                {...messageObject.contentVersions.map((content) => (
-                  <option>
+              <select bind:value={selectedMessageObjectIndex}>
+                {...messageObject.contentVersions.map((content, index) => (
+                  <option value={index}>
                     {new Date(content.isoDateVersionCreated).toLocaleString()}
                   </option>
                 ))}
@@ -74,6 +109,18 @@ export function ObjectDetailModal(
             </div>
           </label>
 
+          <label class="tile">
+            <span class="icon">sticky_note_2</span>
+            <div>
+              <span>{translation.noteContent}</span>
+              <textarea
+                rows="5"
+                bind:value={editingNoteContent}
+                placeholder={translation.noteContentPlaceholder}
+              ></textarea>
+            </div>
+          </label>
+
           <hr></hr>
 
           <button class="danger width-input" on:click={deleteAndClose}>

src/translations.ts

@@ -71,8 +71,10 @@ const englishTranslations = {
 
   objectTitle: "Object title",
   objectTitlePlaceholder: "My object",
-  
+
   objectVersion: "Object version",
+  noteContent: "Note",
+  noteContentPlaceholder: "Take a note...",
 
   resendObjects: "Resend all objects",
   deleteObject: "Delete object",