fix object editing

This commit is contained in:
marlon-erler
2024-07-11 16:45:45 +02:00
parent a824ad97d5
commit 4cc9201bc5
4 changed files with 145 additions and 101 deletions
+59 -38
View File
@@ -621,25 +621,35 @@
};
// objects
createObjectFromTitle = (title) => {
return {
const firstObjectContent = this.createObjectContent();
const messageObject = {
id: UUID(),
title,
contentVersions: [this.createObjectContent()]
contentVersions: {}
};
this.addObjectContent(messageObject, firstObjectContent);
return messageObject;
};
createObjectContent = () => {
return {
id: UUID(),
isoDateVersionCreated: (/* @__PURE__ */ new Date()).toISOString()
};
};
addObjectContent = (messageObject, content) => {
messageObject.contentVersions[content.id] = content;
};
addObject = (messageObject) => {
const existingObject = this.objects.value.get(messageObject.id);
if (existingObject) {
existingObject.title = messageObject.title;
Object.values(messageObject.contentVersions).forEach((content) => {
this.addObjectContent(existingObject, content);
});
this.objects.set(existingObject.id, existingObject);
} else {
this.objects.set(messageObject.id, messageObject);
};
updateObject = (id, contents) => {
const messageObject = this.objects.value.get(id);
if (!messageObject) return;
if (contents) {
messageObject.contentVersions.push(contents);
messageObject.contentVersions.sort(
(a, b) => a.isoDateVersionCreated > b.isoDateVersionCreated ? 0 : 1
);
}
this.sendObject(messageObject);
};
addObjectAndSend = (messageObject) => {
this.addObject(messageObject);
@@ -661,18 +671,23 @@
clearObjects = () => {
this.objects.clear();
};
getLatestObjectContent = (messageObject) => {
return this.getObjectContentFromIndex(messageObject, 0);
getSortedContents = (messageObject) => {
const contents = Object.values(messageObject.contentVersions);
contents.sort(
(a, b) => a.isoDateVersionCreated > b.isoDateVersionCreated ? 0 : 1
);
return contents;
};
getObjectContentFromIndex = (messageObject, index) => {
const versions = messageObject.contentVersions;
return versions[index] ?? this.createObjectContent();
getMostRecentContentId = (messageObject) => {
const contents = Object.values(messageObject.contentVersions);
return contents[contents.length - 1].id;
};
createObjectContent = () => {
return {
id: UUID(),
isoDateVersionCreated: (/* @__PURE__ */ new Date()).toISOString()
getMostRecentContent = (messageObject) => {
const id = this.getMostRecentContentId(messageObject);
return this.getObjectContentFromId(messageObject, id);
};
getObjectContentFromId = (messageObject, contentId) => {
return messageObject.contentVersions[contentId];
};
// channel
setChannel = () => {
@@ -1209,13 +1224,12 @@
// src/Views/Objects/objectDetailModal.tsx
function ObjectDetailModal(chat, messageObject, isPresented) {
const editingTitle = new State(messageObject.title);
const selectedMessageObjectIndex = new State(0);
const selectedMessageObjectId = new State(
chat.getMostRecentContentId(messageObject)
);
const selectedMessageObject = createProxyState(
[selectedMessageObjectIndex],
() => chat.getObjectContentFromIndex(
messageObject,
selectedMessageObjectIndex.value
)
[selectedMessageObjectId],
() => chat.getObjectContentFromId(messageObject, selectedMessageObjectId.value)
);
const didEditContent = new State(false);
const editingNoteContent = createProxyState(
@@ -1240,14 +1254,14 @@
}
function saveAndClose() {
messageObject.title = editingTitle.value;
chat.updateObject(
messageObject.id,
didEditContent.value == true ? {
if (didEditContent.value == true) {
chat.addObjectContent(messageObject, {
isoDateVersionCreated: (/* @__PURE__ */ new Date()).toISOString(),
id: UUID(),
noteContent: editingNoteContent.value
} : void 0
);
});
}
chat.addObjectAndSend(messageObject);
closeModal();
}
function deleteAndClose() {
@@ -1260,7 +1274,9 @@
"bind:value": editingTitle,
placeholder: translation.objectTitlePlaceholder
}
))), /* @__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", { "bind:value": selectedMessageObjectIndex }, ...messageObject.contentVersions.map((content, index) => /* @__PURE__ */ createElement("option", { value: index }, new Date(content.isoDateVersionCreated).toLocaleString()))), /* @__PURE__ */ createElement("span", { class: "icon" }, "arrow_drop_down"))), /* @__PURE__ */ createElement("label", { class: "tile" }, /* @__PURE__ */ createElement("span", { class: "icon" }, "sticky_note_2"), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("span", null, translation.noteContent), /* @__PURE__ */ createElement(
))), /* @__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", { "bind:value": selectedMessageObjectId }, ...chat.getSortedContents(messageObject).map((content) => /* @__PURE__ */ createElement("option", { value: content.id }, new Date(
content.isoDateVersionCreated
).toLocaleString()))), /* @__PURE__ */ createElement("span", { class: "icon" }, "arrow_drop_down"))), /* @__PURE__ */ createElement("label", { class: "tile" }, /* @__PURE__ */ createElement("span", { class: "icon" }, "sticky_note_2"), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("span", null, translation.noteContent), /* @__PURE__ */ createElement(
"textarea",
{
rows: "5",
@@ -1279,17 +1295,22 @@
function ChatToolView(chat) {
const isShowingObjectModal = new State(false);
const selectedObject = new State(void 0);
const objectModal = createProxyState([selectedObject], () => {
const objectModal = createProxyState(
[chat.objects, selectedObject],
() => {
if (selectedObject.value == void 0) return /* @__PURE__ */ createElement("div", null);
return ObjectDetailModal(chat, selectedObject.value, isShowingObjectModal);
});
return ObjectDetailModal(
chat,
selectedObject.value,
isShowingObjectModal
);
}
);
function createItem() {
const newObject = chat.createObjectFromTitle("New item");
chat.addObjectAndSend(newObject);
}
const itemConverter = (messageObject) => {
const latestObject = chat.getLatestObjectContent(messageObject);
if (!latestObject) return /* @__PURE__ */ createElement("div", null);
function select() {
selectedObject.value = messageObject;
isShowingObjectModal.value = true;
+49 -30
View File
@@ -29,7 +29,7 @@ export interface ChatMessage {
export interface MessageObject {
id: string;
title: string;
contentVersions: MessageObjectContent[];
contentVersions: { [key: string]: MessageObjectContent };
}
export interface MessageObjectContent {
@@ -156,8 +156,8 @@ export class Chat {
if (channels.indexOf(this.primaryChannel.value) == -1) return;
if (data.subscribed != undefined) this.handleSubscription(data.subscribed);
if (!data.messageBody) return;
const message: ChatMessage = JSON.parse(data.messageBody);
const { sender, body, channel, isoDate, messageObjectString } = message;
@@ -197,7 +197,6 @@ export class Chat {
};
// sending
sendMessagesInOutbox = () => {
this.outbox.value.forEach(async (message) => {
const isSent = await this.sendMessage(message);
@@ -298,27 +297,41 @@ export class Chat {
// objects
createObjectFromTitle = (title: string): MessageObject => {
return {
const firstObjectContent = this.createObjectContent();
const messageObject: MessageObject = {
id: React.UUID(),
title,
contentVersions: [this.createObjectContent()],
contentVersions: {},
};
this.addObjectContent(messageObject, firstObjectContent);
return messageObject;
};
createObjectContent = () => {
return {
id: React.UUID(),
isoDateVersionCreated: new Date().toISOString(),
};
};
addObjectContent = (
messageObject: MessageObject,
content: MessageObjectContent
): void => {
messageObject.contentVersions[content.id] = content;
};
addObject = (messageObject: MessageObject): void => {
const existingObject = this.objects.value.get(messageObject.id);
if (existingObject) {
existingObject.title = messageObject.title;
Object.values(messageObject.contentVersions).forEach((content) => {
this.addObjectContent(existingObject, content);
});
this.objects.set(existingObject.id, existingObject);
} else {
this.objects.set(messageObject.id, messageObject);
};
updateObject = (id: string, contents?: MessageObjectContent): void => {
const messageObject = this.objects.value.get(id);
if (!messageObject) return;
if (contents) {
messageObject.contentVersions.push(contents);
messageObject.contentVersions.sort((a, b) =>
a.isoDateVersionCreated > b.isoDateVersionCreated ? 0 : 1
);
}
this.sendObject(messageObject);
};
addObjectAndSend = (messageObject: MessageObject): void => {
@@ -346,25 +359,31 @@ export class Chat {
this.objects.clear();
};
getLatestObjectContent = (
getSortedContents = (
messageObject: MessageObject
): MessageObjectContent => {
return this.getObjectContentFromIndex(messageObject, 0);
): MessageObjectContent[] => {
const contents = Object.values(messageObject.contentVersions);
contents.sort((a, b) =>
a.isoDateVersionCreated > b.isoDateVersionCreated ? 0 : 1
);
return contents;
};
getObjectContentFromIndex = (
getMostRecentContentId = (messageObject: MessageObject): string => {
const contents = Object.values(messageObject.contentVersions);
return contents[contents.length - 1].id;
};
getMostRecentContent = (messageObject: MessageObject): MessageObjectContent => {
const id = this.getMostRecentContentId(messageObject);
return this.getObjectContentFromId(messageObject, id);
}
getObjectContentFromId = (
messageObject: MessageObject,
index: number
contentId: string
): MessageObjectContent => {
const versions = messageObject.contentVersions;
return versions[index] ?? this.createObjectContent();
};
createObjectContent = () => {
return {
id: React.UUID(),
isoDateVersionCreated: new Date().toISOString(),
};
return messageObject.contentVersions[contentId];
};
// channel
+17 -16
View File
@@ -12,14 +12,13 @@ export function ObjectDetailModal(
// state
const editingTitle = new React.State(messageObject.title);
const selectedMessageObjectIndex = new React.State(0);
const selectedMessageObjectId = new React.State(
chat.getMostRecentContentId(messageObject)
);
const selectedMessageObject = React.createProxyState(
[selectedMessageObjectIndex],
[selectedMessageObjectId],
() =>
chat.getObjectContentFromIndex(
messageObject,
selectedMessageObjectIndex.value
)
chat.getObjectContentFromId(messageObject, selectedMessageObjectId.value)
);
const didEditContent = new React.State(false);
@@ -51,18 +50,16 @@ export function ObjectDetailModal(
function saveAndClose() {
messageObject.title = editingTitle.value;
chat.updateObject(
messageObject.id,
didEditContent.value == true
? {
if (didEditContent.value == true) {
chat.addObjectContent(messageObject, {
isoDateVersionCreated: new Date().toISOString(),
id: React.UUID(),
noteContent: editingNoteContent.value,
});
}
: undefined
);
chat.addObjectAndSend(messageObject);
closeModal();
}
@@ -98,10 +95,14 @@ export function ObjectDetailModal(
<span class="icon">history</span>
<div>
<span>{translation.objectVersion}</span>
<select bind:value={selectedMessageObjectIndex}>
{...messageObject.contentVersions.map((content, index) => (
<option value={index}>
{new Date(content.isoDateVersionCreated).toLocaleString()}
<select bind:value={selectedMessageObjectId}>
{...chat
.getSortedContents(messageObject)
.map((content) => (
<option value={content.id}>
{new Date(
content.isoDateVersionCreated
).toLocaleString()}
</option>
))}
</select>
+10 -7
View File
@@ -9,11 +9,18 @@ import { translation } from "../../translations";
export function ChatToolView(chat: Chat) {
const isShowingObjectModal = new React.State(false);
const selectedObject = new React.State<MessageObject | undefined>(undefined);
const objectModal = React.createProxyState([selectedObject], () => {
const objectModal = React.createProxyState(
[chat.objects, selectedObject],
() => {
if (selectedObject.value == undefined) return <div></div>;
return ObjectDetailModal(chat, selectedObject.value, isShowingObjectModal);
});
return ObjectDetailModal(
chat,
selectedObject.value,
isShowingObjectModal
);
}
);
function createItem() {
const newObject = chat.createObjectFromTitle("New item");
@@ -23,10 +30,6 @@ export function ChatToolView(chat: Chat) {
const itemConverter: React.StateItemConverter<MessageObject> = (
messageObject
) => {
const latestObject = chat.getLatestObjectContent(messageObject);
if (!latestObject) return <div></div>; //TODO
function select() {
selectedObject.value = messageObject;
isShowingObjectModal.value = true;