From 19fe4274fc13630cf1a32749529b7dd1177d1631 Mon Sep 17 00:00:00 2001 From: marlon-erler Date: Thu, 11 Jul 2024 14:03:15 +0200 Subject: [PATCH] prepare message object content editing --- dist/index.js | 66 ++++++++++++++----------- dist/styles.css | 2 +- src/Model/chatModel.ts | 16 ++++-- src/Views/Objects/objectDetailModal.tsx | 65 +++++++++++++++++------- src/translations.ts | 2 + 5 files changed, 97 insertions(+), 54 deletions(-) diff --git a/dist/index.js b/dist/index.js index 3107a31d..1c5aa0da 100644 --- a/dist/index.js +++ b/dist/index.js @@ -508,16 +508,16 @@ if (channels.indexOf(this.primaryChannel.value) == -1) return; if (data.subscribed != void 0) this.handleSubscription(data.subscribed); if (!data.messageBody) return; - const { sender, body, channel, isoDate, messageObject } = JSON.parse( - data.messageBody - ); - if (messageObject) { - const decrypted = await decryptString( - messageObject, + const message = JSON.parse(data.messageBody); + const { sender, body, channel, isoDate, messageObjectString } = message; + if (messageObjectString) { + const decryptedMessageObjectString = await decryptString( + messageObjectString, this.encryptionKey.value ); - const object = JSON.parse(decrypted); - if (object.id && object.title) return this.handleMessageObject(object); + const messageObject = JSON.parse(decryptedMessageObjectString); + if (messageObject.id && messageObject.title) + return this.handleMessageObject(messageObject); } this.handleMessage({ sender, @@ -545,10 +545,10 @@ const isSent = await this.sendMessage(message); if (isSent == true) this.outbox.remove(message); }); - this.objectOutbox.value.forEach(async (object) => { - const chatMessage = await this.createChatMessage("", object); + this.objectOutbox.value.forEach(async (messageObject) => { + const chatMessage = await this.createChatMessage("", messageObject); const isSent = await this.sendMessage(chatMessage); - if (isSent == true) this.objectOutbox.remove(object.id); + if (isSent == true) this.objectOutbox.remove(messageObject.id); }); }; // messages @@ -568,7 +568,7 @@ isoDate: (/* @__PURE__ */ new Date()).toISOString() }; if (messageObject) - chatMessage.messageObject = await encryptString( + chatMessage.messageObjectString = await encryptString( JSON.stringify(messageObject), this.encryptionKey.value ); @@ -618,7 +618,7 @@ return { id: UUID(), title, - dateLastEdited: /* @__PURE__ */ new Date(), + isoDateLastEdited: (/* @__PURE__ */ new Date()).toISOString(), contentVersions: [] }; }; @@ -626,22 +626,22 @@ this.objects.set(messageObject.id, messageObject); }; updateObject = (id, contents) => { - const object = this.objects.value.get(id); - if (!object) return; - object.contentVersions.push(contents); - this.sendObject(object); + const messageObject = this.objects.value.get(id); + if (!messageObject) return; + messageObject.contentVersions.push(contents); + this.sendObject(messageObject); }; - addObjectAndSend = (object) => { - this.addObject(object); - this.sendObject(object); + addObjectAndSend = (messageObject) => { + this.addObject(messageObject); + this.sendObject(messageObject); }; - sendObject = (object) => { - this.objectOutbox.set(object.id, object); + sendObject = (messageObject) => { + this.objectOutbox.set(messageObject.id, messageObject); this.sendMessagesInOutbox(); }; - deleteObject = (object) => { - this.objects.remove(object.id); - this.objectOutbox.remove(object.id); + deleteObject = (messageObject) => { + this.objects.remove(messageObject.id); + this.objectOutbox.remove(messageObject.id); }; resendObjects = () => { this.objects.value.forEach((messageObject) => { @@ -653,7 +653,10 @@ }; getLatestObjectContent = (messageObject) => { const versions = messageObject.contentVersions; - if (versions.length == 0) return {}; + if (versions.length == 0) + return { + isoDateVersionCreated: (/* @__PURE__ */ new Date()).toISOString() + }; return versions[versions.length - 1]; }; // channel @@ -976,6 +979,7 @@ toggleChatTools: "toggle chat tools", objectTitle: "Object title", objectTitlePlaceholder: "My object", + objectVersion: "Object version", resendObjects: "Resend all objects", deleteObject: "Delete object" }; @@ -1187,26 +1191,28 @@ // src/Views/Objects/objectDetailModal.tsx function ObjectDetailModal(chat, messageObject, isPresented) { + const editingTitle = new State(messageObject.title); function closeModal() { isPresented.value = false; } function saveAndClose() { messageObject.title = editingTitle.value; - chat.updateObject(messageObject.id, {}); + chat.updateObject(messageObject.id, { + isoDateVersionCreated: (/* @__PURE__ */ new Date()).toISOString() + }); closeModal(); } function deleteAndClose() { chat.deleteObject(messageObject); closeModal(); } - const editingTitle = new State(messageObject.title); - return /* @__PURE__ */ createElement("div", { class: "modal", "toggle:open": isPresented }, /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("main", null, /* @__PURE__ */ createElement("h2", null, messageObject.title), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("label", { class: "tile" }, /* @__PURE__ */ createElement("span", { class: "icon" }, "label"), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("span", null, translation.objectTitle), /* @__PURE__ */ createElement( + return /* @__PURE__ */ createElement("div", { class: "modal", "toggle:open": isPresented }, /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("main", null, /* @__PURE__ */ createElement("h2", null, messageObject.title), /* @__PURE__ */ createElement("span", { class: "secondary" }, messageObject.id), /* @__PURE__ */ createElement("hr", null), /* @__PURE__ */ createElement("label", { class: "tile" }, /* @__PURE__ */ createElement("span", { class: "icon" }, "label"), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("span", null, translation.objectTitle), /* @__PURE__ */ createElement( "input", { "bind:value": editingTitle, placeholder: translation.objectTitlePlaceholder } - )))), /* @__PURE__ */ createElement("hr", null), /* @__PURE__ */ createElement("button", { class: "danger", "on:click": deleteAndClose }, translation.deleteObject, /* @__PURE__ */ createElement("span", { class: "icon" }, "delete"))), /* @__PURE__ */ createElement("div", { class: "flex-row" }, /* @__PURE__ */ createElement("button", { class: "flex-1 width-100 danger", "on:click": closeModal }, translation.discard), /* @__PURE__ */ createElement("button", { class: "flex-1 width-100 primary", "on:click": saveAndClose }, translation.save, /* @__PURE__ */ createElement("span", { class: "icon" }, "save"))))); + ))), /* @__PURE__ */ createElement("hr", null), /* @__PURE__ */ createElement("label", { class: "tile" }, /* @__PURE__ */ createElement("span", { class: "icon" }, "history"), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("span", null, translation.objectVersion), /* @__PURE__ */ createElement("select", null, ...messageObject.contentVersions.map((content) => /* @__PURE__ */ createElement("option", null, new Date(content.isoDateVersionCreated).toLocaleString()))), /* @__PURE__ */ createElement("span", { class: "icon" }, "arrow_drop_down"))), /* @__PURE__ */ createElement("hr", null), /* @__PURE__ */ createElement("button", { class: "danger", "on:click": deleteAndClose }, translation.deleteObject, /* @__PURE__ */ createElement("span", { class: "icon" }, "delete"))), /* @__PURE__ */ createElement("div", { class: "flex-row" }, /* @__PURE__ */ createElement("button", { class: "flex-1 width-100 danger", "on:click": closeModal }, translation.discard), /* @__PURE__ */ createElement("button", { class: "flex-1 width-100 primary", "on:click": saveAndClose }, translation.save, /* @__PURE__ */ createElement("span", { class: "icon" }, "save"))))); } // src/Views/Objects/objectListEntry.tsx diff --git a/dist/styles.css b/dist/styles.css index ac93a3ef..634da660 100644 --- a/dist/styles.css +++ b/dist/styles.css @@ -602,7 +602,7 @@ label.tile:has(> span.icon) { padding-left: var(--control-padding); } -label.tile:has(> span.icon) input { +label.tile:has(> span.icon) :is(input, select) { padding-left: 0px; } diff --git a/src/Model/chatModel.ts b/src/Model/chatModel.ts index 012f89f1..312c3ee6 100644 --- a/src/Model/chatModel.ts +++ b/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]; }; diff --git a/src/Views/Objects/objectDetailModal.tsx b/src/Views/Objects/objectDetailModal.tsx index 58c9ca26..36d634c6 100644 --- a/src/Views/Objects/objectDetailModal.tsx +++ b/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 ) { + // state + const editingTitle = new React.State(messageObject.title); + const selectedMessageObject = new React.State( + 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 (

{messageObject.title}

- -
- -
+ {messageObject.id}
- diff --git a/src/translations.ts b/src/translations.ts index 408b7805..798f4375 100644 --- a/src/translations.ts +++ b/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",