Mercurial > packages > framework

annotate publishable/resources/js/ServerTable.js @ 7:e6132a1e8e24 default tip

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Adding better support for test among other base changes.
author Luka Sitas <sitas.luka.97@gmail.com>
date Thu, 25 Sep 2025 19:58:32 -0400
parents 6ded573b0a61
children
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
rev   line source
4
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
1 class ServerTable {
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
2 /**
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
3 * @param {HTMLElement} rootEl - The container element for the table
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
4 * @param {Object} options - Configuration options
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
5 * @param {string} options.endpoint - API endpoint for data
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
6 * @param {Array} options.columns - Array of column configs: [{name, label, ...}]
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
7 * @param {number} [options.pageSize=10] - Default rows per page
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
8 * @param {Array} [options.initialSort=[]] - Default sort: [{col, dir}]
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
9 * @param {Object} [options.headers={}] - Additional headers for requests
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
10 * @param {string} [options.groupBy={}] - Which column to group by
7
e6132a1e8e24 Adding better support for test among other base changes.
Luka Sitas <sitas.luka.97@gmail.com>
parents: 6
diff changeset
11 * @param {Function} [options.postRender={}] - Function to call after rendering
4
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
12 * @param {Function} [options.groupRender={}] - Function to render the grouping
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
13 */
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
14 constructor(rootEl, options) {
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
15 this.rootEl = rootEl;
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
16 this.endpoint = options.endpoint;
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
17 this.columns = options.columns || [];
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
18 this.pageSize = options.pageSize || 10;
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
19 this.sort = options.initialSort || [];
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
20 this.filters = options.filters || {};
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
21 this.currentPage = 1;
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
22 this.headers = options.headers || {};
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
23 this.groupBy = options.groupBy;
7
e6132a1e8e24 Adding better support for test among other base changes.
Luka Sitas <sitas.luka.97@gmail.com>
parents: 6
diff changeset
24 this.postRender = options.postRender || null ;
4
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
25 this.groupRender =
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
26 options.groupRender ||
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
27 ((g, rows) =>
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
28 `<tr class="st-group-row"><td colspan="${this.columns.length}">Group: ${g}</td></tr>`);
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
29
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
30 this.skeleton = options.skeleton || `
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
31 <div class="st-table-container">
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
32 <table>
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
33 <thead>
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
34 </thead>
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
35 <tbody>
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
36 <!-- Data rows will go here -->
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
37 </tbody>
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
38 </table>
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
39 <div class="st-controls">
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
40 <span class="st-pagination"></span>
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
41 <span class="st-status"></span>
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
42 </div>
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
43 </div>
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
44 `;
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
45
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
46 this.state = {
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
47 loading: false,
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
48 error: null,
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
49 totalRecords: 0,
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
50 records: [],
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
51 };
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
52
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
53 // Render initial skeleton and fetch initial data
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
54 this.renderSkeleton();
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
55 this.fetchData();
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
56 }
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
57
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
58 renderSkeleton() {
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
59 // Build base structure: table shell, controls area
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
60 this.rootEl.innerHTML = this.skeleton;
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
61 // Store references
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
62 this.head = this.rootEl.querySelector("thead");
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
63 this.tbody = this.rootEl.querySelector("tbody");
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
64 this.statusEl = this.rootEl.querySelector(".st-status");
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
65 this.paginationEl = this.rootEl.querySelector(".st-pagination");
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
66
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
67 // Draw the header
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
68 this.head.innerHTML = `
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
69 <tr>
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
70 ${this.columns.map((col) => `<th scope="col">${col.label || col.name}</th>`).join("")}
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
71 </tr>
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
72 `;
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
73 }
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
74
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
75 async fetchData() {
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
76 this.setLoading(true);
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
77 const payload = {
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
78 page: this.currentPage,
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
79 page_size: this.pageSize,
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
80 sort: this.sort,
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
81 filters: this.filters,
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
82 };
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
83
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
84 try {
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
85 const res = await fetch(this.endpoint, {
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
86 method: "POST",
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
87 headers: {
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
88 ...this.headers,
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
89 "Content-Type": "application/json",
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
90 },
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
91 body: JSON.stringify(payload),
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
92 });
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
93
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
94 if (!res.ok) {
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
95 throw new Error(`Server responded with ${res.status}`);
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
96 }
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
97
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
98 const data = await res.json();
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
99 // Minimal shape validation
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
100 if (
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
101 !Array.isArray(data.records) ||
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
102 typeof data.total_records !== "number"
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
103 ) {
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
104 throw new Error("Malformed server response");
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
105 }
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
106
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
107 // Save data in state
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
108 this.state.records = data.records;
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
109 this.state.totalRecords = data.total_records;
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
110 this.state.error = null;
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
111
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
112 this.renderRows();
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
113 this.updateControls();
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
114 } catch (err) {
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
115 this.state.error = err.message;
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
116 this.renderError();
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
117 } finally {
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
118 this.setLoading(false);
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
119 }
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
120 }
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
121
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
122 setLoading(loading) {
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
123 this.state.loading = loading;
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
124 this.statusEl.textContent = loading ? "Loading..." : "";
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
125 }
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
126
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
127 renderRows() {
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
128 const { records } = this.state;
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
129 const cols = this.columns;
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
130 const groupBy = this.groupBy;
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
131 const groupRender =
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
132 typeof this.groupRender === "function"
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
133 ? this.groupRender
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
134 : (g, rows) =>
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
135 `<tr class="st-group-row"><td colspan="${cols.length}">Project: ${g}</td></tr>`;
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
136
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
137 if (!records || records.length === 0) {
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
138 this.tbody.innerHTML = `<tr><td colspan="${cols.length}">No data</td></tr>`;
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
139 return;
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
140 }
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
141
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
142 // Group if needed
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
143 if (groupBy) {
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
144 // Find grouping field or function
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
145 const getGroupValue =
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
146 typeof groupBy === "function" ? groupBy : (row) => row[groupBy];
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
147 let lastGroup = undefined;
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
148 let out = "";
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
149 let groupRows = [];
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
150
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
151 for (let i = 0; i < records.length; i++) {
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
152 const row = records[i];
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
153 const groupVal = getGroupValue(row);
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
154
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
155 // On group transition, flush previous group
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
156 if (i === 0 || groupVal !== lastGroup) {
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
157 if (i > 0) {
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
158 // Optionally do something with groupRows if groupRender wants it
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
159 }
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
160 // Insert group header row
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
161 out += groupRender(groupVal, []);
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
162 lastGroup = groupVal;
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
163 groupRows = [];
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
164 }
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
165
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
166 groupRows.push(row);
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
167
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
168 out += `<tr>${cols
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
169 .map((col, ci) => {
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
170 // If grouping by this column, suppress repeated values (leave blank except for first row in group)
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
171 if (
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
172 typeof groupBy === "string" &&
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
173 col.name === groupBy &&
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
174 groupVal === lastGroup &&
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
175 groupRows.length > 1
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
176 ) {
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
177 return `<td></td>`;
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
178 }
5
f282c6ef1671 better support for server side tables
luka
parents: 4
diff changeset
179 return `<td class='${ typeof col.class === "string" ? col.class : '' }' >${
4
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
180 typeof col.render === "function"
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
181 ? col.render(row, col, i)
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
182 : row[col.name]
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
183 }</td>`;
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
184 })
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
185 .join("")}</tr>`;
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
186 }
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
187 this.tbody.innerHTML = out;
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
188 } else {
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
189 // No grouping
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
190 this.tbody.innerHTML = records
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
191 .map(
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
192 (row, i) =>
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
193 `<tr>${cols
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
194 .map(
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
195 (col) =>
5
f282c6ef1671 better support for server side tables
luka
parents: 4
diff changeset
196 `<td class='${ typeof col.class === "string" ? col.class : '' }' >${
4
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
197 typeof col.render === "function"
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
198 ? col.render(row, col, i)
6
6ded573b0a61 updating the server tables to show blank on null by default
luka
parents: 5
diff changeset
199 : row[col.name] === null ? '' : row[col.name]
4
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
200 }</td>`,
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
201 )
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
202 .join("")}</tr>`,
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
203 )
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
204 .join("");
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
205 }
7
e6132a1e8e24 Adding better support for test among other base changes.
Luka Sitas <sitas.luka.97@gmail.com>
parents: 6
diff changeset
206 if(typeof this.postRender === "function") this.postRender();
4
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
207 }
7
e6132a1e8e24 Adding better support for test among other base changes.
Luka Sitas <sitas.luka.97@gmail.com>
parents: 6
diff changeset
208
4
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
209 renderError() {
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
210 this.tbody.innerHTML = `<tr><td colspan="${this.columns.length}" style="color:red">${this.state.error}</td></tr>`;
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
211 }
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
212
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
213 updateControls() {
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
214 // Basic pagination info (full controls to come later)
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
215 const from = 1 + (this.currentPage - 1) * this.pageSize;
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
216 const to = Math.min(
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
217 this.currentPage * this.pageSize,
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
218 this.state.totalRecords,
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
219 );
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
220 this.paginationEl.textContent = `Showing ${from}-${to} of ${this.state.totalRecords}`;
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
221 }
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
222
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
223 // PUBLIC: force reload
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
224 reload() {
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
225 this.fetchData();
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
226 }
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
227
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
228 // PUBLIC: update filters, resets to page 1
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
229 setFilters(newFilters) {
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
230 this.filters = newFilters;
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
231 this.currentPage = 1;
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
232 this.fetchData();
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
233 }
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
234 }
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
235
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
236 // Example usage (not part of module export):
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
237 /*
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
238 const table = new ServerTable(document.getElementById('my-table'), {
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
239 endpoint: '/tickets/get_data',
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
240 columns: [
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
241 {name: 'id', label: 'ID'},
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
242 {name: 'subject', label: 'Subject'},
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
243 {name: 'project', label: 'Project'},
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
244 {name: 'created_at', label: 'Created At'},
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
245 ],
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
246 pageSize: 10,
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
247 initialSort: [{col: 'created_at', dir: 'desc'}]
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
248 });
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
249 */
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
250
84c75d9d90be Changing usage to be bootstrap 5, not everything is reviewed but it's been started
luka
parents:
diff changeset
251 window.ServerTable = ServerTable;