import { action, makeObservable, observable, runInAction } from "mobx"; import { computedFn } from "mobx-utils"; // helpers import { ChartDataType, TGanttViews } from "@/components/gantt-chart"; import { currentViewDataWithView } from "@/components/gantt-chart/data"; // types export interface IGanttStore { // observables currentView: TGanttViews; currentViewData: ChartDataType | undefined; activeBlockId: string | null; renderView: any; // computed functions isBlockActive: (blockId: string) => boolean; // actions updateCurrentView: (view: TGanttViews) => void; updateCurrentViewData: (data: ChartDataType | undefined) => void; updateActiveBlockId: (blockId: string | null) => void; updateRenderView: (data: any[]) => void; } export class GanttStore implements IGanttStore { // observables currentView: TGanttViews = "month"; currentViewData: ChartDataType | undefined = undefined; activeBlockId: string | null = null; renderView: any[] = []; constructor() { makeObservable(this, { // observables currentView: observable.ref, currentViewData: observable, activeBlockId: observable.ref, renderView: observable, // actions updateCurrentView: action.bound, updateCurrentViewData: action.bound, updateActiveBlockId: action.bound, updateRenderView: action.bound, }); this.initGantt(); } /** * @description check if block is active * @param {string} blockId */ isBlockActive = computedFn((blockId: string): boolean => this.activeBlockId === blockId); /** * @description update current view * @param {TGanttViews} view */ updateCurrentView = (view: TGanttViews) => { this.currentView = view; }; /** * @description update current view data * @param {ChartDataType | undefined} data */ updateCurrentViewData = (data: ChartDataType | undefined) => { this.currentViewData = data; }; /** * @description update active block * @param {string | null} block */ updateActiveBlockId = (blockId: string | null) => { this.activeBlockId = blockId; }; /** * @description update render view * @param {any[]} data */ updateRenderView = (data: any[]) => { this.renderView = data; }; /** * @description initialize gantt chart with month view */ initGantt = () => { const newCurrentViewData = currentViewDataWithView(this.currentView); runInAction(() => { this.currentViewData = newCurrentViewData; }); }; }