gridster.ts

import { FinalGoalState, finalGoalStateName } from './store/final-goal/final-goal.state';
import { Component, OnInit, OnDestroy, ViewChild, ElementRef } from '@angular/core';
import { Select, Store } from '@ngxs/store';
import { Observable, Subscription } from 'rxjs';
import { Navigate } from '@ngxs/router-plugin';
import { LocalStorageUtil } from './utils/local-storage.util';
import { UserState, userStateName } from './store/user/user.state';
import { IUserState } from './store/user/user.models';
import { length } from 'ramda';
import { IFinalGoalState, IFinalGoal } from './store/final-goal/final-goal.models';
import { WeeklyState, weeklyStateName } from './store/weekly/weekly.state';
import { IWeeklyState } from './store/weekly/weekly.models';
import { combineLatest } from 'rxjs/operators';
import { DailyState, dailyStateName } from './store/daily/daily.state';
import { IDailyState } from './store/daily/daily.models';
import {
    CompactType,
    DisplayGrid,
    GridsterComponent,
    GridsterConfig,
    GridsterItem,
    GridsterItemComponentInterface,
    GridType,
} from 'angular-gridster2';
import { debounce } from 'lodash'

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styles: [
        `
            .container-500-500 {
                background: transparent;
                padding: 10px;
                width: 500px;
                height: 500px;
                display: flex;
            }
            .content {
                flex: 1;
                background-color: aqua;
            }
            .container-1000-500 {
                background: transparent;
                padding: 10px;
                width: 1000px;
                height: 500px;
                display: flex;
            }
            .container-500-1000 {
                background: transparent;
                padding: 10px;
                width: 500px;
                height: 1000px;
                display: flex;
            }
            .container-300-300 {
                background: transparent;
                padding: 10px;
                width: 300px;
                height: 300px;
                display: flex;
            }
            .page {
                min-width: 720px;
            }
        `,
    ],
})
export class AppComponent implements OnInit, OnDestroy {
    @Select(UserState)
    userState$: Observable<IUserState>;

    @Select(FinalGoalState)
    finalGoalState$: Observable<IFinalGoalState>;

    @Select(FinalGoalState.goal)
    goal$: Observable<IFinalGoal>;

    @Select(WeeklyState)
    weeklyState$: Observable<IWeeklyState>;

    @Select(DailyState)
    dailyState$: Observable<IDailyState>;

    options: GridsterConfig;

    dashboard: GridsterItem[];

    @ViewChild(GridsterComponent)
    dragContainer: GridsterComponent;

    static eventStop = (
        item: GridsterItem,
        itemComponent: GridsterItemComponentInterface,
        event: MouseEvent,
    ) => {
        console.log(
            itemComponent.gridster.grid.map(grid => ({
                component: grid.el.firstChild.tagName.toLowerCase(),
                config: grid.$item,
            })),
        );
    };

    itemInit = (item: GridsterItem, itemComponent: GridsterItemComponentInterface) => {
        const el: HTMLElement = itemComponent.el.firstChild;
        const tagName = el.tagName;
        if (tagName === 'DIV' || tagName === 'P') {
            const cols = el.offsetWidth / 50;
            const rows = el.offsetHeight / 50;
            itemComponent.$item = { ...{}, ...itemComponent.$item, ...{ cols, rows } };
            this.dragContainer.autoPositionItem(itemComponent);
            this.dragContainer.calculateLayoutDebounce();
        }
    };

    private subscriptions: Subscription[];

    constructor(private store: Store) {
        this.options = {
            gridType: GridType.Fixed,
            compactType: CompactType.CompactLeftAndUp,
            itemInitCallback: this.itemInit,
            margin: 0,
            outerMargin: true,
            outerMarginTop: 10,
            outerMarginRight: 10,
            outerMarginBottom: 10,
            outerMarginLeft: 10,
            mobileBreakpoint: 640,
            minCols: 1,
            maxCols: window.innerWidth / 50,
            minRows: 1,
            maxRows: 100,
            maxItemCols: 100,
            minItemCols: 1,
            maxItemRows: 100,
            minItemRows: 1,
            maxItemArea: 2500,
            minItemArea: 1,
            defaultItemCols: 1,
            defaultItemRows: 1,
            fixedColWidth: 50,
            fixedRowHeight: 50,
            keepFixedHeightInMobile: false,
            keepFixedWidthInMobile: false,
            scrollSensitivity: 10,
            scrollSpeed: 20,
            enableEmptyCellClick: false,
            enableEmptyCellContextMenu: false,
            enableEmptyCellDrop: false,
            enableEmptyCellDrag: false,
            emptyCellDragMaxCols: 50,
            emptyCellDragMaxRows: 50,
            ignoreMarginInRow: false,
            draggable: {
                enabled: true,
                stop: AppComponent.eventStop,
            },
            resizable: {
                enabled: false,
            },
            swap: true,
            pushItems: true,
            disablePushOnDrag: false,
            disablePushOnResize: false,
            pushDirections: { north: true, east: true, south: true, west: true },
            pushResizeItems: false,
            displayGrid: DisplayGrid.Always,
            disableWindowResize: false,
            disableWarnings: false,
            scrollToNewItems: false,
        };

        this.dashboard = [
            {},
            {},
            {},
            { cols: 1, rows: 1 },
            { cols: 1, rows: 1 },
            { cols: 1, rows: 1 },
            {
                cols: 2,
                rows: 2,
            },
            {
                cols: 2,
                rows: 2,
            },
            {
                cols: 2,
                rows: 1,
            },
            {
                cols: 1,
                rows: 1,
            },
            { cols: 1, rows: 1 },
        ] as any;

        window.onresize = debounce(event => {
            this.options.maxCols = window.innerWidth / 50;
            this.options.api.optionsChanged();
            this.dragContainer.calculateLayoutDebounce();
            this.dragContainer.grid.forEach(item => this.dragContainer.autoPositionItem(item));
        }, 500);
    }

    ngOnInit() {
        this.subscriptions = [
            this.finalGoalState$
                .pipe(combineLatest(this.weeklyState$))
                .subscribe(([finalGoalState, weeklyState]) => {
                    const selectedGoal = Boolean(finalGoalState.goal);
                    if (!selectedGoal) {
                        this.store.dispatch(new Navigate(['/welcome']));
                        return;
                    }
                    if (length(weeklyState.plans) === 0) {
                        this.store.dispatch(new Navigate(['/weekly-planing']));
                    }
                }),
            this.dailyState$.subscribe(state => LocalStorageUtil.save(dailyStateName, state)),
            this.weeklyState$.subscribe(state =>
                LocalStorageUtil.save(weeklyStateName, state),
            ),
            this.finalGoalState$.subscribe(state =>
                LocalStorageUtil.save(finalGoalStateName, state),
            ),
            this.userState$.subscribe(state => LocalStorageUtil.save(userStateName, state)),
        ];
    }

    ngOnDestroy() {
        this.subscriptions.forEach(subscription => subscription.unsubscribe());
    }
}