add navigation for calendar

This commit is contained in:
marlon-erler
2024-07-18 17:42:41 +02:00
parent 4e068a8666
commit 788159ffff
10 changed files with 217 additions and 49 deletions
+8 -15
View File
@@ -3,6 +3,8 @@ import * as React from "bloatless-react";
import { Chat, MessageObject } from "../../Model/chatModel";
import { ObjectGridView } from "./objectGridView";
import { DayView } from "./dayView";
import { dayInCalendar } from "../../Model/model";
export function CalendarView(
chat: Chat,
@@ -10,19 +12,10 @@ export function CalendarView(
selectedObject: React.State<MessageObject | undefined>,
isShowingObjectModal: React.State<boolean>
) {
const notes = new React.ListState<MessageObject>();
messageObjects.handleAddition((messageObject) => {
const latest = chat.getMostRecentContent(messageObject);
if (!latest) return;
if (!latest.date) return;
notes.add(messageObject);
messageObjects.handleRemoval(messageObject, () =>
notes.remove(messageObject)
);
});
return <div class="width-100 height-100 scroll-v padding">
{ObjectGridView(chat, notes, selectedObject, isShowingObjectModal)}
</div>;
return <div class="calendar-wrapper">
<div class="month-grid">
<input type="date" bind:value={dayInCalendar}></input>
</div>
{DayView(chat, messageObjects, selectedObject, isShowingObjectModal)}
</div>
}
+59
View File
@@ -0,0 +1,59 @@
import * as React from "bloatless-react";
import { Chat, MessageObject } from "../../Model/chatModel";
import { ObjectEntryView } from "./objectEntryView";
import { dayInCalendar } from "../../Model/model";
export function DayView(
chat: Chat,
messageObjects:
| React.ListState<MessageObject>
| React.MapState<MessageObject>,
selectedObject: React.State<MessageObject | undefined>,
isShowingObjectModal: React.State<boolean>
) {
const objectsForDayView = new React.ListState<MessageObject>();
function processObject(messageObject: MessageObject) {
const latest = chat.getMostRecentContent(messageObject);
if (!latest.date || latest.date != dayInCalendar.value) return;
objectsForDayView.add(messageObject);
messageObjects.handleRemoval(messageObject, () => {
objectsForDayView.remove(messageObject);
})
}
messageObjects.handleAddition(processObject);
dayInCalendar.subscribeSilent(() => {
objectsForDayView.clear();
chat.objects.value.forEach(processObject);
})
const objectConverter: React.StateItemConverter<MessageObject> = (
messageObject
) => {
const latest = chat.getMostRecentContent(messageObject);
const timeString = latest.time ?? "00:00";
const [hour, minute] = timeString.split(":");
const hourInMinutes = parseInt(hour) * 60;
const minutesTotal = parseInt(minute) + hourInMinutes;
const view = ObjectEntryView(
chat,
messageObject,
selectedObject,
isShowingObjectModal
);
view.style.order = minutesTotal;
return view;
};
return (
<div
class="day-view padding flex-column gap"
children:prepend={[objectsForDayView, objectConverter]}
></div>
);
}
-1
View File
@@ -30,7 +30,6 @@ export function KanbanView(
messageObjects.handleAddition((messageObject) => {
const latest = chat.getMostRecentContent(messageObject);
if (!latest) return;
if (!latest.categoryName) return;
const categoryName = latest.categoryName!;
-1
View File
@@ -13,7 +13,6 @@ export function NoteObjectsView(
const notes = new React.ListState<MessageObject>();
messageObjects.handleAddition((messageObject) => {
const latest = chat.getMostRecentContent(messageObject);
if (!latest) return;
if (!latest.noteContent) return;
notes.add(messageObject);
-1
View File
@@ -145,7 +145,6 @@ function StatusHeaderView(chat: Chat, status: StatusData) {
function rename() {
status.items.forEach((messageObject) => {
const latest = chat.getMostRecentContent(messageObject);
if (!latest) return;
latest.status = editingStatus.value;
chat.addObject(messageObject);