add placeholder view for kanban

This commit is contained in:
marlon-erler
2024-07-12 01:19:16 +02:00
parent 5d645a084a
commit 7df2b5a77b
7 changed files with 43 additions and 33 deletions
+14 -11
View File
@@ -489,7 +489,6 @@
viewNotes: "Notes", viewNotes: "Notes",
viewKanban: "Kanban", viewKanban: "Kanban",
noObjects: "No objects", noObjects: "No objects",
noNotes: "No notes",
objectTitle: "Object title", objectTitle: "Object title",
objectTitlePlaceholder: "My object", objectTitlePlaceholder: "My object",
objectVersion: "Object version", objectVersion: "Object version",
@@ -576,7 +575,6 @@
viewNotes: "Notas", viewNotes: "Notas",
viewKanban: "Kanban", viewKanban: "Kanban",
noObjects: "Sin objetos", noObjects: "Sin objetos",
noNotes: "Sin notas",
objectTitle: "T\xEDtulo", objectTitle: "T\xEDtulo",
objectTitlePlaceholder: "Mi objeto", objectTitlePlaceholder: "Mi objeto",
objectVersion: "Version del objeto", objectVersion: "Version del objeto",
@@ -661,7 +659,6 @@
viewNotes: "Notizen", viewNotes: "Notizen",
viewKanban: "Kanban", viewKanban: "Kanban",
noObjects: "Keine Objekte", noObjects: "Keine Objekte",
noNotes: "Keine Notizen",
objectTitle: "Titel", objectTitle: "Titel",
objectTitlePlaceholder: "Mein Objekt", objectTitlePlaceholder: "Mein Objekt",
objectVersion: "Version des Objekts", objectVersion: "Version des Objekts",
@@ -1428,8 +1425,13 @@
); );
} }
// src/Views/Objects/placeholderView.tsx
function PlaceholderView() {
return /* @__PURE__ */ createElement("div", { class: "flex-column width-100 height-100 align-center justify-center secondary" }, translation.noObjects);
}
// src/Views/Objects/objectGridView.tsx // src/Views/Objects/objectGridView.tsx
function ObjectGridView(chat, messageObjects, selectedObject, isShowingObjectModal, placeholderText) { function ObjectGridView(chat, messageObjects, selectedObject, isShowingObjectModal) {
const objectConverter = (messageObject) => { const objectConverter = (messageObject) => {
return ObjectEntryView( return ObjectEntryView(
chat, chat,
@@ -1438,7 +1440,7 @@
isShowingObjectModal isShowingObjectModal
); );
}; };
return messageObjects.value.size == 0 ? /* @__PURE__ */ createElement("div", { class: "flex-column width-100 height-100 align-center justify-center secondary" }, placeholderText) : /* @__PURE__ */ createElement( return messageObjects.value.size == 0 ? PlaceholderView() : /* @__PURE__ */ createElement(
"div", "div",
{ {
class: "width-100 grid gap padding scroll-v", class: "width-100 grid gap padding scroll-v",
@@ -1456,8 +1458,7 @@
chat, chat,
chat.objects, chat.objects,
selectedObject, selectedObject,
isShowingObjectModal, isShowingObjectModal
translation.noObjects
) )
); );
return /* @__PURE__ */ createElement("div", { class: "width-100 height-100", "children:set": content }); return /* @__PURE__ */ createElement("div", { class: "width-100 height-100", "children:set": content });
@@ -1477,9 +1478,12 @@
boards.value.get(boardTitle)?.items.push(messageObject); boards.value.get(boardTitle)?.items.push(messageObject);
}); });
}); });
const content = createProxyState([chat.objects], () => /* @__PURE__ */ createElement("div", { class: "flex-row large-gap width-100 height-100 scroll-v scroll-h padding" }, ...[...boards.value.values()].sort((a, b) => a.title.localeCompare(b.title)).map( const content = createProxyState(
[chat.objects],
() => boards.value.size == 0 ? PlaceholderView() : /* @__PURE__ */ createElement("div", { class: "flex-row large-gap width-100 height-100 scroll-v scroll-h padding" }, ...[...boards.value.values()].sort((a, b) => a.title.localeCompare(b.title)).map(
(board) => KanbanBoardView(chat, board, selectedObject, isShowingObjectModal) (board) => KanbanBoardView(chat, board, selectedObject, isShowingObjectModal)
))); ))
);
return /* @__PURE__ */ createElement("div", { class: "width-100 height-100 scroll-no", "children:set": content }); return /* @__PURE__ */ createElement("div", { class: "width-100 height-100 scroll-no", "children:set": content });
} }
function KanbanBoardView(chat, kanbanBoard, selectedObject, isShowingObjectModal) { function KanbanBoardView(chat, kanbanBoard, selectedObject, isShowingObjectModal) {
@@ -1534,8 +1538,7 @@
chat, chat,
notes, notes,
selectedObject, selectedObject,
isShowingObjectModal, isShowingObjectModal
translation.noNotes
) )
); );
return /* @__PURE__ */ createElement("div", { class: "width-100 height-100", "children:set": content }); return /* @__PURE__ */ createElement("div", { class: "width-100 height-100", "children:set": content });
+1 -2
View File
@@ -15,8 +15,7 @@ export function AllObjectsView(
chat, chat,
chat.objects, chat.objects,
selectedObject, selectedObject,
isShowingObjectModal, isShowingObjectModal
translation.noObjects
) )
); );
+7 -2
View File
@@ -4,6 +4,7 @@ import { Chat, MessageObject } from "../../Model/chatModel";
import { ObjectEntryView } from "./objectEntryView"; import { ObjectEntryView } from "./objectEntryView";
import { ObjectGridView } from "./objectGridView"; import { ObjectGridView } from "./objectGridView";
import { PlaceholderView } from "./placeholderView";
import { translation } from "../../translations"; import { translation } from "../../translations";
interface KanbanBoard { interface KanbanBoard {
@@ -33,7 +34,10 @@ export function KanbanView(
}); });
}); });
const content = React.createProxyState([chat.objects], () => ( const content = React.createProxyState([chat.objects], () =>
boards.value.size == 0 ? (
PlaceholderView()
) : (
<div class="flex-row large-gap width-100 height-100 scroll-v scroll-h padding"> <div class="flex-row large-gap width-100 height-100 scroll-v scroll-h padding">
{...[...boards.value.values()] {...[...boards.value.values()]
.sort((a, b) => a.title.localeCompare(b.title)) .sort((a, b) => a.title.localeCompare(b.title))
@@ -41,7 +45,8 @@ export function KanbanView(
KanbanBoardView(chat, board, selectedObject, isShowingObjectModal) KanbanBoardView(chat, board, selectedObject, isShowingObjectModal)
)} )}
</div> </div>
)); )
);
return ( return (
<div class="width-100 height-100 scroll-no" children:set={content}></div> <div class="width-100 height-100 scroll-no" children:set={content}></div>
+1 -2
View File
@@ -26,8 +26,7 @@ export function NoteObjectsView(
chat, chat,
notes, notes,
selectedObject, selectedObject,
isShowingObjectModal, isShowingObjectModal
translation.noNotes
) )
); );
+3 -5
View File
@@ -3,6 +3,7 @@ import * as React from "bloatless-react";
import { Chat, MessageObject } from "../../Model/chatModel"; import { Chat, MessageObject } from "../../Model/chatModel";
import { ObjectEntryView } from "./objectEntryView"; import { ObjectEntryView } from "./objectEntryView";
import { PlaceholderView } from "./placeholderView";
export function ObjectGridView( export function ObjectGridView(
chat: Chat, chat: Chat,
@@ -10,8 +11,7 @@ export function ObjectGridView(
| React.ListState<MessageObject> | React.ListState<MessageObject>
| React.MapState<MessageObject>, | React.MapState<MessageObject>,
selectedObject: React.State<MessageObject | undefined>, selectedObject: React.State<MessageObject | undefined>,
isShowingObjectModal: React.State<boolean>, isShowingObjectModal: React.State<boolean>
placeholderText: string
) { ) {
const objectConverter: React.StateItemConverter<MessageObject> = ( const objectConverter: React.StateItemConverter<MessageObject> = (
messageObject messageObject
@@ -25,9 +25,7 @@ export function ObjectGridView(
}; };
return messageObjects.value.size == 0 ? ( return messageObjects.value.size == 0 ? (
<div class="flex-column width-100 height-100 align-center justify-center secondary"> PlaceholderView()
{placeholderText}
</div>
) : ( ) : (
<div <div
class="width-100 grid gap padding scroll-v" class="width-100 grid gap padding scroll-v"
+9
View File
@@ -0,0 +1,9 @@
import * as React from "bloatless-react";
import { translation } from "../../translations";
export function PlaceholderView() {
return <div class="flex-column width-100 height-100 align-center justify-center secondary">
{translation.noObjects}
</div>;
}
-3
View File
@@ -91,7 +91,6 @@ const englishTranslations = {
viewKanban: "Kanban", viewKanban: "Kanban",
noObjects: "No objects", noObjects: "No objects",
noNotes: "No notes",
objectTitle: "Object title", objectTitle: "Object title",
objectTitlePlaceholder: "My object", objectTitlePlaceholder: "My object",
@@ -205,7 +204,6 @@ const allTranslations: { [key: string]: typeof englishTranslations } = {
viewKanban: "Kanban", viewKanban: "Kanban",
noObjects: "Sin objetos", noObjects: "Sin objetos",
noNotes: "Sin notas",
objectTitle: "Título", objectTitle: "Título",
objectTitlePlaceholder: "Mi objeto", objectTitlePlaceholder: "Mi objeto",
@@ -316,7 +314,6 @@ const allTranslations: { [key: string]: typeof englishTranslations } = {
viewKanban: "Kanban", viewKanban: "Kanban",
noObjects: "Keine Objekte", noObjects: "Keine Objekte",
noNotes: "Keine Notizen",
objectTitle: "Titel", objectTitle: "Titel",
objectTitlePlaceholder: "Mein Objekt", objectTitlePlaceholder: "Mein Objekt",