diff --git a/dist/index.js b/dist/index.js index 467962be..14d4b301 100644 --- a/dist/index.js +++ b/dist/index.js @@ -1271,8 +1271,8 @@ return /* @__PURE__ */ createElement("button", { class: "tile justify-start", "on:click": select }, /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("b", null, chat.getObjectTitle(messageObject)), /* @__PURE__ */ createElement("hr", null), /* @__PURE__ */ createElement("span", { class: "flex-column gap height-100 flex secondary ellipsis " }, ...fieldElements))); } - // src/Views/Objects/allObjectsView.tsx - function AllObjectsView(chat, selectedObject, isShowingObjectModal) { + // src/Views/Objects/objectGridView.tsx + function ObjectGridView(chat, messageObjects, selectedObject, isShowingObjectModal, placeholderText) { const objectConverter = (messageObject) => { return ObjectEntryView( chat, @@ -1281,15 +1281,26 @@ isShowingObjectModal ); }; + return messageObjects.value.size == 0 ? /* @__PURE__ */ createElement("div", { class: "flex-column width-100 height-100 align-center justify-center secondary" }, placeholderText) : /* @__PURE__ */ createElement( + "div", + { + class: "grid gap padding", + style: "grid-template-columns: repeat(auto-fill, minmax(200px, 1fr))", + "children:prepend": [messageObjects, objectConverter] + } + ); + } + + // src/Views/Objects/allObjectsView.tsx + function AllObjectsView(chat, selectedObject, isShowingObjectModal) { const content = createProxyState( [chat.objects], - () => chat.objects.value.size == 0 ? /* @__PURE__ */ createElement("div", { class: "flex-column width-100 height-100 align-center justify-center secondary" }, translation.noObjects) : /* @__PURE__ */ createElement( - "div", - { - class: "grid gap padding", - style: "grid-template-columns: repeat(auto-fill, minmax(350px, 1fr))", - "children:prepend": [chat.objects, objectConverter] - } + () => ObjectGridView( + chat, + chat.objects, + selectedObject, + isShowingObjectModal, + translation.noObjects ) ); return /* @__PURE__ */ createElement("div", { class: "width-100 height-100", "children:set": content }); @@ -1297,14 +1308,6 @@ // src/Views/Objects/noteObjectsView.tsx function NoteObjectsView(chat, selectedObject, isShowingObjectModal) { - const objectConverter = (messageObject) => { - return ObjectEntryView( - chat, - messageObject, - selectedObject, - isShowingObjectModal - ); - }; const notes = new ListState(); chat.objects.subscribe(() => { notes.clear(); @@ -1316,13 +1319,12 @@ }); const content = createProxyState( [chat.objects], - () => notes.value.size == 0 ? /* @__PURE__ */ createElement("div", { class: "flex-column width-100 height-100 align-center justify-center secondary" }, translation.noNotes) : /* @__PURE__ */ createElement( - "div", - { - class: "grid gap padding", - style: "grid-template-columns: repeat(auto-fill, minmax(350px, 1fr))", - "children:prepend": [notes, objectConverter] - } + () => ObjectGridView( + chat, + notes, + selectedObject, + isShowingObjectModal, + translation.noNotes ) ); return /* @__PURE__ */ createElement("div", { class: "width-100 height-100", "children:set": content }); diff --git a/src/Views/Objects/allObjectsView.tsx b/src/Views/Objects/allObjectsView.tsx index 730ab634..489fe5d3 100644 --- a/src/Views/Objects/allObjectsView.tsx +++ b/src/Views/Objects/allObjectsView.tsx @@ -2,7 +2,7 @@ import * as React from "bloatless-react"; import { Chat, MessageObject } from "../../Model/chatModel"; -import { ObjectEntryView } from "./objectEntryView"; +import { ObjectGridView } from "./objectGridView"; import { translation } from "../../translations"; export function AllObjectsView( @@ -10,28 +10,13 @@ export function AllObjectsView( selectedObject: React.State, isShowingObjectModal: React.State ) { - const objectConverter: React.StateItemConverter = ( - messageObject - ) => { - return ObjectEntryView( - chat, - messageObject, - selectedObject, - isShowingObjectModal - ); - }; - const content = React.createProxyState([chat.objects], () => - chat.objects.value.size == 0 ? ( -
- {translation.noObjects} -
- ) : ( -
+ ObjectGridView( + chat, + chat.objects, + selectedObject, + isShowingObjectModal, + translation.noObjects ) ); diff --git a/src/Views/Objects/noteObjectsView.tsx b/src/Views/Objects/noteObjectsView.tsx index 17a8eaea..d7088cec 100644 --- a/src/Views/Objects/noteObjectsView.tsx +++ b/src/Views/Objects/noteObjectsView.tsx @@ -3,6 +3,7 @@ import * as React from "bloatless-react"; import { Chat, MessageObject } from "../../Model/chatModel"; import { ObjectEntryView } from "./objectEntryView"; +import { ObjectGridView } from "./objectGridView"; import { translation } from "../../translations"; export function NoteObjectsView( @@ -10,17 +11,6 @@ export function NoteObjectsView( selectedObject: React.State, isShowingObjectModal: React.State ) { - const objectConverter: React.StateItemConverter = ( - messageObject - ) => { - return ObjectEntryView( - chat, - messageObject, - selectedObject, - isShowingObjectModal - ); - }; - const notes = new React.ListState(); chat.objects.subscribe(() => { notes.clear(); @@ -33,16 +23,12 @@ export function NoteObjectsView( }); const content = React.createProxyState([chat.objects], () => - notes.value.size == 0 ? ( -
- {translation.noNotes} -
- ) : ( -
+ ObjectGridView( + chat, + notes, + selectedObject, + isShowingObjectModal, + translation.noNotes ) ); diff --git a/src/Views/Objects/objectGridView.tsx b/src/Views/Objects/objectGridView.tsx new file mode 100644 index 00000000..45661fc6 --- /dev/null +++ b/src/Views/Objects/objectGridView.tsx @@ -0,0 +1,39 @@ +import * as React from "bloatless-react"; + +import { Chat, MessageObject } from "../../Model/chatModel"; + +import { ObjectEntryView } from "./objectEntryView"; +import { icons } from "../../icons"; + +export function ObjectGridView( + chat: Chat, + messageObjects: + | React.ListState + | React.MapState, + selectedObject: React.State, + isShowingObjectModal: React.State, + placeholderText: string +) { + const objectConverter: React.StateItemConverter = ( + messageObject + ) => { + return ObjectEntryView( + chat, + messageObject, + selectedObject, + isShowingObjectModal + ); + }; + + return messageObjects.value.size == 0 ? ( +
+ {placeholderText} +
+ ) : ( +
+ ); +}