summaryrefslogtreecommitdiff
path: root/assets/js/src/Board.js
blob: 9aa58a078db114dc1db4151b89b60b6f6bb4119e (plain)
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
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
function Board(app) {
    this.app = app;
    this.checkInterval = null;
}

Board.prototype.execute = function() {
    this.app.swimlane.refresh();
    this.app.swimlane.listen();
    this.restoreColumnViewMode();
    this.compactView();
    this.poll();
    this.keyboardShortcuts();
    this.resizeColumnHeight();
    this.listen();
    this.dragAndDrop();

    $(window).resize(this.resizeColumnHeight);
};

Board.prototype.poll = function() {
    var interval = parseInt($("#board").attr("data-check-interval"));

    if (interval > 0) {
        this.checkInterval = window.setInterval(this.check.bind(this), interval * 1000);
    }
};

Board.prototype.reloadFilters = function(search) {
    this.app.showLoadingIcon();

    $.ajax({
        cache: false,
        url: $("#board").data("reload-url"),
        contentType: "application/json",
        type: "POST",
        processData: false,
        data: JSON.stringify({
            search: search
        }),
        success: this.refresh.bind(this),
        error: this.app.hideLoadingIcon.bind(this)
    });
};

Board.prototype.check = function() {
    if (this.app.isVisible()) {

        var self = this;
        this.app.showLoadingIcon();

        $.ajax({
            cache: false,
            url: $("#board").data("check-url"),
            statusCode: {
                200: function(data) { self.refresh(data); },
                304: function () { self.app.hideLoadingIcon(); }
            }
        });
    }
};

Board.prototype.save = function(taskId, columnId, position, swimlaneId) {
    this.app.showLoadingIcon();

    $.ajax({
        cache: false,
        url: $("#board").data("save-url"),
        contentType: "application/json",
        type: "POST",
        processData: false,
        data: JSON.stringify({
            "task_id": taskId,
            "column_id": columnId,
            "swimlane_id": swimlaneId,
            "position": position
        }),
        success: this.refresh.bind(this),
        error: this.app.hideLoadingIcon.bind(this)
    });
};

Board.prototype.refresh = function(data) {
    $("#board-container").replaceWith(data);

    this.app.refresh();
    this.app.swimlane.refresh();
    this.app.swimlane.listen();
    this.resizeColumnHeight();
    this.app.hideLoadingIcon();
    this.listen();
    this.dragAndDrop();
    this.compactView();
    this.restoreColumnViewMode();
};

Board.prototype.resizeColumnHeight = function() {
    if ($(".board-swimlane").length > 1) {
        $(".board-task-list").each(function() {
            if ($(this).height() > 500) {
                $(this).height(500);
            }
            else {
                $(this).css("min-height", 320); // Min height is the height of the menu dropdown
            }
        });
    }
    else {
        $(".board-task-list").height($(window).height() - 145);
    }
};

Board.prototype.dragAndDrop = function() {
    var self = this;
    $(".board-task-list").sortable({
        forcePlaceholderSize: true,
        delay: 300,
        distance: 5,
        connectWith: ".board-task-list",
        placeholder: "draggable-placeholder",
        items: ".draggable-item",
        stop: function(event, ui) {
            ui.item.removeClass("draggable-item-selected");
            self.save(
                ui.item.attr('data-task-id'),
                ui.item.parent().attr("data-column-id"),
                ui.item.index() + 1,
                ui.item.parent().attr('data-swimlane-id')
            );
        },
        start: function(event, ui) {
            ui.item.addClass("draggable-item-selected");
            ui.placeholder.height(ui.item.height());
        }
    });
};

Board.prototype.listen = function() {
    var self = this;

    $(document).on("click", ".task-board", function(e) {
        if (e.target.tagName != "A") {
            window.location = $(this).data("task-url");
        }
    });

    $(document).on('click', ".filter-toggle-scrolling", function(e) {
        e.preventDefault();
        self.toggleCompactView();
    });

    $(document).on("click", ".board-column-title", function() {
        self.toggleColumnViewMode($(this).data("column-id"));
    });
};

Board.prototype.toggleCompactView = function() {
    var scrolling = localStorage.getItem("horizontal_scroll") || 1;
    localStorage.setItem("horizontal_scroll", scrolling == 0 ? 1 : 0);
    this.compactView();
};

Board.prototype.compactView = function() {
    if (localStorage.getItem("horizontal_scroll") == 0) {
        $(".filter-wide").show();
        $(".filter-compact").hide();

        $("#board-container").addClass("board-container-compact");
        $("#board th:not(.board-column-header-collapsed)").addClass("board-column-compact");
    }
    else {
        $(".filter-wide").hide();
        $(".filter-compact").show();

        $("#board-container").removeClass("board-container-compact");
        $("#board th").removeClass("board-column-compact");
    }
};

Board.prototype.toggleCollapsedMode = function() {
    var self = this;
    this.app.showLoadingIcon();

    $.ajax({
        cache: false,
        url: $('.filter-display-mode:not([style="display: none;"]) a').attr('href'),
        success: function(data) {
            $('.filter-display-mode').toggle();
            self.refresh(data);
        }
    });
};

Board.prototype.restoreColumnViewMode = function() {
    var self = this;

    $("tr:first th").each(function() {
        var columnId = $(this).data('column-id');
        if (localStorage.getItem("hidden_column_" + columnId)) {
            self.hideColumn(columnId);
        }
    });
};

Board.prototype.toggleColumnViewMode = function(columnId) {
    if (localStorage.getItem("hidden_column_" + columnId)) {
        this.showColumn(columnId);
    }
    else {
        this.hideColumn(columnId);
    }
};

Board.prototype.hideColumn = function(columnId) {
    $(".board-column-" + columnId + " .board-column-expanded").hide();
    $(".board-column-" + columnId + " .board-column-collapsed").show();
    $(".board-column-header-" + columnId + " .board-column-expanded").hide();
    $(".board-column-header-" + columnId + " .board-column-collapsed").show();

    $(".board-column-header-" + columnId).each(function() {
        $(this).removeClass("board-column-compact");
        $(this).addClass("board-column-header-collapsed");
    });

    $(".board-column-" + columnId ).each(function() {
        $(this).addClass("board-column-task-collapsed");
    });

    $(".board-column-" + columnId + " .board-rotation").each(function() {
        var position = $(".board-swimlane").position();
        $(this).css("width", $(".board-column-" + columnId + "").height());
    });

    localStorage.setItem("hidden_column_" + columnId, 1);
};

Board.prototype.showColumn = function(columnId) {
    $(".board-column-" + columnId + " .board-column-expanded").show();
    $(".board-column-" + columnId + " .board-column-collapsed").hide();
    $(".board-column-header-" + columnId + " .board-column-expanded").show();
    $(".board-column-header-" + columnId + " .board-column-collapsed").hide();

    $(".board-column-header-" + columnId).removeClass("board-column-header-collapsed");
    $(".board-column-" + columnId).removeClass("board-column-task-collapsed");

    if (localStorage.getItem("horizontal_scroll") == 0) {
        $(".board-column-header-" + columnId).addClass("board-column-compact");
    }

    localStorage.removeItem("hidden_column_" + columnId);
};

Board.prototype.keyboardShortcuts = function() {
    var self = this;

    Mousetrap.bind("c", function() { self.toggleCompactView(); });
    Mousetrap.bind("s", function() { self.toggleCollapsedMode(); });

    Mousetrap.bind("n", function() {
        self.app.popover.open($("#board").data("task-creation-url"));
    });
};