add placeholder view for kanban
This commit is contained in:
Vendored
+14
-11
@@ -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 });
|
||||||
|
|||||||
@@ -15,8 +15,7 @@ export function AllObjectsView(
|
|||||||
chat,
|
chat,
|
||||||
chat.objects,
|
chat.objects,
|
||||||
selectedObject,
|
selectedObject,
|
||||||
isShowingObjectModal,
|
isShowingObjectModal
|
||||||
translation.noObjects
|
|
||||||
)
|
)
|
||||||
);
|
);
|
||||||
|
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
@@ -26,8 +26,7 @@ export function NoteObjectsView(
|
|||||||
chat,
|
chat,
|
||||||
notes,
|
notes,
|
||||||
selectedObject,
|
selectedObject,
|
||||||
isShowingObjectModal,
|
isShowingObjectModal
|
||||||
translation.noNotes
|
|
||||||
)
|
)
|
||||||
);
|
);
|
||||||
|
|
||||||
|
|||||||
@@ -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"
|
||||||
|
|||||||
@@ -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>;
|
||||||
|
}
|
||||||
@@ -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",
|
||||||
|
|||||||
Reference in New Issue
Block a user