Skip to content

Commit aec3cb4

Browse files
CollinBeczakCollinBeczak
committed
run formatting
1 parent 474e436 commit aec3cb4

File tree

3 files changed

+119
-130
lines changed

3 files changed

+119
-130
lines changed

‎src/components/HOCs/WithFilterCriteria/WithFilterCriteria.jsx‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -53,20 +53,20 @@ export default function WithFilterCriteria(
5353

5454
updateCriteria = (newCriteria) => {
5555
const criteria = _cloneDeep(this.state.criteria);
56-
57-
if (newCriteria.hasOwnProperty('sortCriteria')) {
56+
57+
if (newCriteria.hasOwnProperty("sortCriteria")) {
5858
criteria.sortCriteria = newCriteria.sortCriteria;
5959
}
60-
if (newCriteria.hasOwnProperty('page')) {
60+
if (newCriteria.hasOwnProperty("page")) {
6161
criteria.page = newCriteria.page;
6262
}
63-
if (newCriteria.hasOwnProperty('filters')) {
63+
if (newCriteria.hasOwnProperty("filters")) {
6464
criteria.filters = newCriteria.filters;
6565
}
66-
if (newCriteria.hasOwnProperty('includeTags')) {
66+
if (newCriteria.hasOwnProperty("includeTags")) {
6767
criteria.includeTags = newCriteria.includeTags;
6868
}
69-
if (newCriteria.hasOwnProperty('pageSize')) {
69+
if (newCriteria.hasOwnProperty("pageSize")) {
7070
criteria.pageSize = newCriteria.pageSize;
7171
}
7272

@@ -161,11 +161,11 @@ export default function WithFilterCriteria(
161161

162162
updateIncludedFilters(props, criteria = {}) {
163163
const typedCriteria = _merge({}, criteria, _cloneDeep(this.state.criteria));
164-
164+
165165
if (!typedCriteria.filters) {
166166
typedCriteria.filters = {};
167167
}
168-
168+
169169
typedCriteria.filters["status"] = _keys(_pickBy(props.includeTaskStatuses, (s) => s));
170170
typedCriteria.filters["reviewStatus"] = _keys(
171171
_pickBy(props.includeTaskReviewStatuses, (r) => r),
@@ -220,7 +220,7 @@ export default function WithFilterCriteria(
220220
criteria.filters = {};
221221
}
222222
criteria.filters.archived = true;
223-
223+
224224
this.debouncedTasksFetch(challengeId, criteria, this.state.criteria.pageSize);
225225
};
226226

@@ -356,7 +356,7 @@ export default function WithFilterCriteria(
356356
typedCriteria = this.updateIncludedFilters(this.props);
357357
return;
358358
}
359-
359+
360360
if (!_isEqual(prevState.criteria, this.state.criteria)) {
361361
this.refreshTasks(typedCriteria);
362362
} else if (

‎src/components/TaskAnalysisTable/TaskAnalysisTable.jsx‎

Lines changed: 107 additions & 110 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import _isEqual from "lodash/isEqual";
22
import _isObject from "lodash/isObject";
33
import { Fragment, useMemo, useState } from "react";
44
import { injectIntl } from "react-intl";
5-
import { useTable, useExpanded, useSortBy, useResizeColumns } from "react-table";
5+
import { useExpanded, useResizeColumns, useSortBy, useTable } from "react-table";
66
import ConfigureColumnsModal from "../../components/ConfigureColumnsModal/ConfigureColumnsModal";
77
import WithTargetUser from "../../components/HOCs/WithTargetUser/WithTargetUser";
88
import TaskCommentsModal from "../../components/TaskCommentsModal/TaskCommentsModal";
@@ -98,7 +98,7 @@ export const TaskAnalysisTableInternal = (props) => {
9898

9999
const data = useMemo(() => {
100100
const tasks = props.taskData || [];
101-
if (props.criteria?.sortCriteria?.direction === "DESC") {
101+
if (props.criteria?.sortCriteria?.direction === "DESC") {
102102
return [...tasks].reverse();
103103
}
104104
return tasks;
@@ -115,28 +115,22 @@ export const TaskAnalysisTableInternal = (props) => {
115115
minWidth: 20,
116116
width: 60,
117117
},
118-
columnResizeMode: 'onChange', // Independent column resizing
118+
columnResizeMode: "onChange", // Independent column resizing
119119
},
120120
useResizeColumns,
121121
useSortBy,
122-
useExpanded
122+
useExpanded,
123123
);
124124

125-
const {
126-
getTableProps,
127-
getTableBodyProps,
128-
headerGroups,
129-
rows,
130-
prepareRow,
131-
} = tableInstance;
125+
const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } = tableInstance;
132126

133127
// Handle sorting changes by updating backend criteria
134128
const handleSortChange = (columnId) => {
135129
if (!props.updateCriteria) return;
136-
130+
137131
const currentSort = props.criteria?.sortCriteria;
138132
let newSortCriteria;
139-
133+
140134
if (!currentSort || currentSort.sortBy !== columnId) {
141135
// No current sort on this column, add ascending
142136
newSortCriteria = { sortBy: columnId, direction: "ASC" };
@@ -147,7 +141,7 @@ export const TaskAnalysisTableInternal = (props) => {
147141
// Currently descending, remove sort (back to default)
148142
newSortCriteria = { sortBy: "name", direction: "DESC" };
149143
}
150-
144+
151145
props.updateCriteria({ sortCriteria: newSortCriteria });
152146
};
153147

@@ -171,108 +165,108 @@ export const TaskAnalysisTableInternal = (props) => {
171165
)}
172166

173167
<div className="mr-overflow-x-auto">
174-
<table {...getTableProps()} className={tableStyles} style={{ minWidth: 'max-content' }}>
175-
<thead>
176-
{headerGroups.map((headerGroup) => (
177-
<Fragment key={headerGroup.id}>
178-
<tr {...headerGroup.getHeaderGroupProps()}>
179-
{headerGroup.headers.map((column) => (
180-
<th
181-
{...column.getHeaderProps()}
182-
className={`mr-px-2 mr-text-left mr-border-gray-600 mr-relative ${column.canResize ? "mr-border-r mr-border-gray-500" : ""}`}
183-
key={column.id}
184-
style={{
185-
...column.getHeaderProps().style,
186-
width: column.width,
187-
minWidth: column.minWidth,
188-
overflow: 'hidden',
189-
}}
190-
>
191-
<div className="mr-flex mr-items-center mr-justify-between mr-overflow-hidden">
192-
<span className="mr-truncate mr-flex-1">{column.render("Header")}</span>
193-
{!column.disableSortBy && (
194-
<button
195-
className="mr-ml-2 mr-text-gray-400 hover:mr-text-white mr-cursor-pointer mr-flex-shrink-0"
196-
onClick={() => handleSortChange(column.id)}
197-
>
198-
{(() => {
199-
const currentSort = props.criteria?.sortCriteria;
200-
if (!currentSort || currentSort.sortBy !== column.id) return "↕";
201-
return currentSort.direction === "DESC" ? "▼" : "▲";
202-
})()}
203-
</button>
168+
<table {...getTableProps()} className={tableStyles} style={{ minWidth: "max-content" }}>
169+
<thead>
170+
{headerGroups.map((headerGroup) => (
171+
<Fragment key={headerGroup.id}>
172+
<tr {...headerGroup.getHeaderGroupProps()}>
173+
{headerGroup.headers.map((column) => (
174+
<th
175+
{...column.getHeaderProps()}
176+
className={`mr-px-2 mr-text-left mr-border-gray-600 mr-relative ${column.canResize ? "mr-border-r mr-border-gray-500" : ""}`}
177+
key={column.id}
178+
style={{
179+
...column.getHeaderProps().style,
180+
width: column.width,
181+
minWidth: column.minWidth,
182+
overflow: "hidden",
183+
}}
184+
>
185+
<div className="mr-flex mr-items-center mr-justify-between mr-overflow-hidden">
186+
<span className="mr-truncate mr-flex-1">{column.render("Header")}</span>
187+
{!column.disableSortBy && (
188+
<button
189+
className="mr-ml-2 mr-text-gray-400 hover:mr-text-white mr-cursor-pointer mr-flex-shrink-0"
190+
onClick={() => handleSortChange(column.id)}
191+
>
192+
{(() => {
193+
const currentSort = props.criteria?.sortCriteria;
194+
if (!currentSort || currentSort.sortBy !== column.id) return "↕";
195+
return currentSort.direction === "DESC" ? "▼" : "▲";
196+
})()}
197+
</button>
198+
)}
199+
</div>
200+
{column.canResize && (
201+
<div
202+
{...column.getResizerProps()}
203+
className="mr-absolute mr-right-0 mr-top-0 mr-w-1 mr-h-full mr-bg-gray-400 mr-cursor-col-resize hover:mr-bg-blue-400 hover:mr-scale-x-3 mr-transition-all mr-z-10"
204+
/>
204205
)}
205-
</div>
206-
{column.canResize && (
207-
<div
208-
{...column.getResizerProps()}
209-
className="mr-absolute mr-right-0 mr-top-0 mr-w-1 mr-h-full mr-bg-gray-400 mr-cursor-col-resize hover:mr-bg-blue-400 hover:mr-scale-x-3 mr-transition-all mr-z-10"
210-
/>
211-
)}
212-
</th>
213-
))}
214-
</tr>
215-
<tr>
216-
{headerGroup.headers.map((column) => (
217-
<th
218-
key={`filter-${column.id}`}
219-
className="mr-px-2"
220-
style={{
221-
width: column.width,
222-
minWidth: column.minWidth,
223-
overflow: 'hidden',
224-
}}
225-
>
226-
<div className="mr-overflow-hidden">
227-
{column.Filter ? column.render("Filter") : null}
228-
</div>
229-
</th>
230-
))}
231-
</tr>
232-
</Fragment>
233-
))}
234-
</thead>
235-
<tbody {...getTableBodyProps()}>
236-
{rows.map((row) => {
237-
prepareRow(row);
238-
return (
239-
<Fragment key={row.id}>
240-
<tr
241-
{...row.getRowProps()}
242-
className={`${row.isExpanded ? "mr-bg-black-10" : ""} ${rowStyles}`}
243-
>
244-
{row.cells.map((cell) => (
245-
<td
246-
{...cell.getCellProps()}
206+
</th>
207+
))}
208+
</tr>
209+
<tr>
210+
{headerGroup.headers.map((column) => (
211+
<th
212+
key={`filter-${column.id}`}
247213
className="mr-px-2"
248214
style={{
249-
...cell.getCellProps().style,
250-
width: cell.column.width,
251-
minWidth: cell.column.minWidth,
252-
overflow: 'hidden',
253-
textOverflow: 'ellipsis',
254-
whiteSpace: 'nowrap',
215+
width: column.width,
216+
minWidth: column.minWidth,
217+
overflow: "hidden",
255218
}}
256219
>
257-
{cell.render("Cell")}
258-
</td>
220+
<div className="mr-overflow-hidden">
221+
{column.Filter ? column.render("Filter") : null}
222+
</div>
223+
</th>
259224
))}
260225
</tr>
261-
262-
{row.isExpanded && (
263-
<tr>
264-
<td colSpan={columns.length} className="mr-p-0">
265-
<ViewTask
266-
taskId={row.original.id}
267-
taskGeometries={row.original.geometries}
268-
/>
269-
</td>
270-
</tr>
271-
)}
272226
</Fragment>
273-
);
274-
})}
275-
</tbody>
227+
))}
228+
</thead>
229+
<tbody {...getTableBodyProps()}>
230+
{rows.map((row) => {
231+
prepareRow(row);
232+
return (
233+
<Fragment key={row.id}>
234+
<tr
235+
{...row.getRowProps()}
236+
className={`${row.isExpanded ? "mr-bg-black-10" : ""} ${rowStyles}`}
237+
>
238+
{row.cells.map((cell) => (
239+
<td
240+
{...cell.getCellProps()}
241+
className="mr-px-2"
242+
style={{
243+
...cell.getCellProps().style,
244+
width: cell.column.width,
245+
minWidth: cell.column.minWidth,
246+
overflow: "hidden",
247+
textOverflow: "ellipsis",
248+
whiteSpace: "nowrap",
249+
}}
250+
>
251+
{cell.render("Cell")}
252+
</td>
253+
))}
254+
</tr>
255+
256+
{row.isExpanded && (
257+
<tr>
258+
<td colSpan={columns.length} className="mr-p-0">
259+
<ViewTask
260+
taskId={row.original.id}
261+
taskGeometries={row.original.geometries}
262+
/>
263+
</td>
264+
</tr>
265+
)}
266+
</Fragment>
267+
);
268+
})}
269+
</tbody>
276270
</table>
277271
</div>
278272

@@ -282,9 +276,12 @@ export const TaskAnalysisTableInternal = (props) => {
282276
pageSize={props.criteria?.pageSize || 20}
283277
gotoPage={(page) => props.updateCriteria({ page })}
284278
setPageSize={(pageSize) => props.updateCriteria({ pageSize, page: 0 })}
285-
previousPage={() => props.updateCriteria({ page: Math.max(0, (props.criteria?.page || 0) - 1) })}
279+
previousPage={() =>
280+
props.updateCriteria({ page: Math.max(0, (props.criteria?.page || 0) - 1) })
281+
}
286282
nextPage={() => {
287-
const maxPage = Math.ceil((props.totalTaskCount || 0) / (props.criteria?.pageSize || 20)) - 1;
283+
const maxPage =
284+
Math.ceil((props.totalTaskCount || 0) / (props.criteria?.pageSize || 20)) - 1;
288285
props.updateCriteria({ page: Math.min(maxPage, (props.criteria?.page || 0) + 1) });
289286
}}
290287
/>

‎src/components/TaskAnalysisTable/setupColumnTypes.jsx‎

Lines changed: 2 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -69,11 +69,7 @@ export const setupColumnTypes = (props, taskBaseRoute, manager, openComments) =>
6969
id: "featureId",
7070
Header: props.intl.formatMessage(messages.featureIdLabel),
7171
accessor: (t) => t.name || t.title,
72-
Cell: ({ value }) => (
73-
<div>
74-
{value || ""}
75-
</div>
76-
),
72+
Cell: ({ value }) => <div>{value || ""}</div>,
7773
Filter: ({ column }) => {
7874
const filterValue = props.criteria?.filters?.featureId || "";
7975
const updateFilter = (value) => {
@@ -318,11 +314,7 @@ export const setupColumnTypes = (props, taskBaseRoute, manager, openComments) =>
318314

319315
return (
320316
<div className="mr-space-x-1 mr-flex" onClick={(e) => e.stopPropagation()}>
321-
<IntlDatePicker
322-
selected={filterValue}
323-
onChange={updateFilter}
324-
intl={props.intl}
325-
/>
317+
<IntlDatePicker selected={filterValue} onChange={updateFilter} intl={props.intl} />
326318
{filterValue && (
327319
<button
328320
className="mr-text-white hover:mr-text-green-lighter mr-transition-colors mr-absolute mr-right-2 mr-top-2"

0 commit comments

Comments
 (0)