flowforge/resources/js/flowforge.js at 2c00d26c96d991454e9030d97265811187fef7ab · relaticle/flowforge · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
export default function flowforge({state}) {
    return {
        state,
        isLoading: {},
        fullyLoaded: {},
        collapsedSwimlanes: {},

        init() {
            this.$wire.$on('kanban-items-loaded', (event) => {
                const { columnId, isFullyLoaded } = event;
                if (isFullyLoaded) {
                    this.fullyLoaded[columnId] = true;
                }
            });

            // Restore collapsed swimlane state from localStorage
            if (this.state.swimlanes) {
                this._restoreSwimlaneState();
            }
        },

        handleSortableEnd(event) {
            const newOrder = event.to.sortable.toArray();
            let cardId = event.item.getAttribute('x-sortable-item');

            // Fallback to data-card-id if x-sortable-item is missing (edge case safety)
            if (!cardId) {
                cardId = event.item.getAttribute('data-card-id');
                if (!cardId) {
                    console.error('Flowforge: Could not determine card ID for move operation');
                    return;
                }
            }

            const targetColumn = event.to.getAttribute('data-column-id');
            if (!targetColumn) {
                console.error('Flowforge: Target column ID is missing');
                return;
            }

            const cardElement = event.item;

            this.setCardState(cardElement, true);

            const cardIndex = newOrder.indexOf(cardId);
            const afterCardId = cardIndex > 0 ? newOrder[cardIndex - 1] : null;
            const beforeCardId = cardIndex < newOrder.length - 1 ? newOrder[cardIndex + 1] : null;

            this.$wire.moveCard(cardId, targetColumn, afterCardId, beforeCardId)
                .then(() => this.setCardState(cardElement, false))
                .catch(() => this.setCardState(cardElement, false));
        },

        setCardState(cardElement, disabled) {
            cardElement.style.opacity = disabled ? '0.7' : '';
            cardElement.style.pointerEvents = disabled ? 'none' : '';
        },

        isLoadingColumn(columnId) {
            return this.isLoading[columnId] || false;
        },

        isColumnFullyLoaded(columnId) {
            return this.fullyLoaded[columnId] || false;
        },

        handleSmoothScroll(columnId) {
            if (this.isLoadingColumn(columnId) || this.isColumnFullyLoaded(columnId)) {
                return;
            }

            this.isLoading[columnId] = true;

            this.$wire.loadMoreItems(columnId)
                .then(() => setTimeout(() => this.isLoading[columnId] = false, 100))
                .catch(() => this.isLoading[columnId] = false);
        },

        handleColumnScroll(event, columnId) {
            if (this.isColumnFullyLoaded(columnId)) return;

            const { scrollTop, scrollHeight, clientHeight } = event.target;
            const scrollPercentage = (scrollTop + clientHeight) / scrollHeight;

            if (scrollPercentage >= 0.8 && !this.isLoadingColumn(columnId)) {
                this.handleSmoothScroll(columnId);
            }
        },

        // --- Swimlane collapse/expand ---

        toggleSwimlane(swimlaneId) {
            this.collapsedSwimlanes[swimlaneId] = !this.collapsedSwimlanes[swimlaneId];
            this._saveSwimlaneState();
        },

        isSwimlaneCollapsed(swimlaneId) {
            return this.collapsedSwimlanes[swimlaneId] || false;
        },

        _getSwimlaneStorageKey() {
            // Use the page URL path as a board-specific key
            return 'flowforge:swimlanes:' + window.location.pathname;
        },

        _saveSwimlaneState() {
            try {
                localStorage.setItem(
                    this._getSwimlaneStorageKey(),
                    JSON.stringify(this.collapsedSwimlanes)
                );
            } catch (e) {
                // localStorage may be unavailable; ignore silently
            }
        },

        _restoreSwimlaneState() {
            try {
                const stored = localStorage.getItem(this._getSwimlaneStorageKey());
                if (stored) {
                    this.collapsedSwimlanes = JSON.parse(stored);
                }
            } catch (e) {
                this.collapsedSwimlanes = {};
            }
        },
    }
}