From 7df2b5a77b91b7f9f36e33fd277978b15e0000ea Mon Sep 17 00:00:00 2001 From: marlon-erler Date: Fri, 12 Jul 2024 01:19:16 +0200 Subject: [PATCH] add placeholder view for kanban --- dist/index.js | 27 +++++++++++++++------------ src/Views/Objects/allObjectsView.tsx | 3 +-- src/Views/Objects/kanbanView.tsx | 23 ++++++++++++++--------- src/Views/Objects/noteObjectsView.tsx | 3 +-- src/Views/Objects/objectGridView.tsx | 8 +++----- src/Views/Objects/placeholderView.tsx | 9 +++++++++ src/translations.ts | 3 --- 7 files changed, 43 insertions(+), 33 deletions(-) create mode 100644 src/Views/Objects/placeholderView.tsx diff --git a/dist/index.js b/dist/index.js index 27f4dd52..0598861a 100644 --- a/dist/index.js +++ b/dist/index.js @@ -489,7 +489,6 @@ viewNotes: "Notes", viewKanban: "Kanban", noObjects: "No objects", - noNotes: "No notes", objectTitle: "Object title", objectTitlePlaceholder: "My object", objectVersion: "Object version", @@ -576,7 +575,6 @@ viewNotes: "Notas", viewKanban: "Kanban", noObjects: "Sin objetos", - noNotes: "Sin notas", objectTitle: "T\xEDtulo", objectTitlePlaceholder: "Mi objeto", objectVersion: "Version del objeto", @@ -661,7 +659,6 @@ viewNotes: "Notizen", viewKanban: "Kanban", noObjects: "Keine Objekte", - noNotes: "Keine Notizen", objectTitle: "Titel", objectTitlePlaceholder: "Mein Objekt", 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 - function ObjectGridView(chat, messageObjects, selectedObject, isShowingObjectModal, placeholderText) { + function ObjectGridView(chat, messageObjects, selectedObject, isShowingObjectModal) { const objectConverter = (messageObject) => { return ObjectEntryView( chat, @@ -1438,7 +1440,7 @@ 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", { class: "width-100 grid gap padding scroll-v", @@ -1456,8 +1458,7 @@ chat, chat.objects, selectedObject, - isShowingObjectModal, - translation.noObjects + isShowingObjectModal ) ); return /* @__PURE__ */ createElement("div", { class: "width-100 height-100", "children:set": content }); @@ -1477,9 +1478,12 @@ 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( - (board) => KanbanBoardView(chat, board, selectedObject, isShowingObjectModal) - ))); + 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) + )) + ); return /* @__PURE__ */ createElement("div", { class: "width-100 height-100 scroll-no", "children:set": content }); } function KanbanBoardView(chat, kanbanBoard, selectedObject, isShowingObjectModal) { @@ -1534,8 +1538,7 @@ chat, notes, selectedObject, - isShowingObjectModal, - translation.noNotes + isShowingObjectModal ) ); 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 489fe5d3..de2dc95e 100644 --- a/src/Views/Objects/allObjectsView.tsx +++ b/src/Views/Objects/allObjectsView.tsx @@ -15,8 +15,7 @@ export function AllObjectsView( chat, chat.objects, selectedObject, - isShowingObjectModal, - translation.noObjects + isShowingObjectModal ) ); diff --git a/src/Views/Objects/kanbanView.tsx b/src/Views/Objects/kanbanView.tsx index fe3d2912..4bce8a94 100644 --- a/src/Views/Objects/kanbanView.tsx +++ b/src/Views/Objects/kanbanView.tsx @@ -4,6 +4,7 @@ import { Chat, MessageObject } from "../../Model/chatModel"; import { ObjectEntryView } from "./objectEntryView"; import { ObjectGridView } from "./objectGridView"; +import { PlaceholderView } from "./placeholderView"; import { translation } from "../../translations"; interface KanbanBoard { @@ -33,15 +34,19 @@ export function KanbanView( }); }); - const content = React.createProxyState([chat.objects], () => ( -
- {...[...boards.value.values()] - .sort((a, b) => a.title.localeCompare(b.title)) - .map((board) => - KanbanBoardView(chat, board, selectedObject, isShowingObjectModal) - )} -
- )); + const content = React.createProxyState([chat.objects], () => + boards.value.size == 0 ? ( + PlaceholderView() + ) : ( +
+ {...[...boards.value.values()] + .sort((a, b) => a.title.localeCompare(b.title)) + .map((board) => + KanbanBoardView(chat, board, selectedObject, isShowingObjectModal) + )} +
+ ) + ); return (
diff --git a/src/Views/Objects/noteObjectsView.tsx b/src/Views/Objects/noteObjectsView.tsx index 58a658d1..a3a5c8f0 100644 --- a/src/Views/Objects/noteObjectsView.tsx +++ b/src/Views/Objects/noteObjectsView.tsx @@ -26,8 +26,7 @@ export function NoteObjectsView( chat, notes, selectedObject, - isShowingObjectModal, - translation.noNotes + isShowingObjectModal ) ); diff --git a/src/Views/Objects/objectGridView.tsx b/src/Views/Objects/objectGridView.tsx index 3134cacf..f1c4f113 100644 --- a/src/Views/Objects/objectGridView.tsx +++ b/src/Views/Objects/objectGridView.tsx @@ -3,6 +3,7 @@ import * as React from "bloatless-react"; import { Chat, MessageObject } from "../../Model/chatModel"; import { ObjectEntryView } from "./objectEntryView"; +import { PlaceholderView } from "./placeholderView"; export function ObjectGridView( chat: Chat, @@ -10,8 +11,7 @@ export function ObjectGridView( | React.ListState | React.MapState, selectedObject: React.State, - isShowingObjectModal: React.State, - placeholderText: string + isShowingObjectModal: React.State ) { const objectConverter: React.StateItemConverter = ( messageObject @@ -25,9 +25,7 @@ export function ObjectGridView( }; return messageObjects.value.size == 0 ? ( -
- {placeholderText} -
+ PlaceholderView() ) : (
+ {translation.noObjects} +
; +} diff --git a/src/translations.ts b/src/translations.ts index 664ab47b..a603dfc5 100644 --- a/src/translations.ts +++ b/src/translations.ts @@ -91,7 +91,6 @@ const englishTranslations = { viewKanban: "Kanban", noObjects: "No objects", - noNotes: "No notes", objectTitle: "Object title", objectTitlePlaceholder: "My object", @@ -205,7 +204,6 @@ const allTranslations: { [key: string]: typeof englishTranslations } = { viewKanban: "Kanban", noObjects: "Sin objetos", - noNotes: "Sin notas", objectTitle: "Título", objectTitlePlaceholder: "Mi objeto", @@ -316,7 +314,6 @@ const allTranslations: { [key: string]: typeof englishTranslations } = { viewKanban: "Kanban", noObjects: "Keine Objekte", - noNotes: "Keine Notizen", objectTitle: "Titel", objectTitlePlaceholder: "Mein Objekt",