add navigation for calendar
This commit is contained in:
@@ -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>
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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!;
|
||||
|
||||
@@ -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);
|
||||
|
||||
@@ -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);
|
||||
|
||||
Reference in New Issue
Block a user