From dc43e18a2d5388a7b24cf2b3ec0e568e642a091d Mon Sep 17 00:00:00 2001 From: alnasir7 Date: Sun, 21 Feb 2021 03:58:13 -0500 Subject: [PATCH 01/15] small changes --- .../components/ClubEditPage/EventsCard.tsx | 11 ++++ .../components/ClubEditPage/MembersCard.tsx | 8 +++ frontend/components/ModelForm.tsx | 10 +++- frontend/components/common/Table.tsx | 59 +++++++++++++------ .../static/img/icons/arrow-vertical.svg | 4 ++ 5 files changed, 71 insertions(+), 21 deletions(-) create mode 100644 frontend/public/static/img/icons/arrow-vertical.svg diff --git a/frontend/components/ClubEditPage/EventsCard.tsx b/frontend/components/ClubEditPage/EventsCard.tsx index e0acc1feb..7a2c8f51e 100644 --- a/frontend/components/ClubEditPage/EventsCard.tsx +++ b/frontend/components/ClubEditPage/EventsCard.tsx @@ -301,6 +301,16 @@ const eventTableFields = [ }, ] +const eventTableFilter = [ + { + label: 'Types', + options: EVENT_TYPES.map((obj) => { + return { key: obj.value, label: obj.label } + }), + filterFunction: (selection, object) => object.type === selection, + }, +] + const eventFields = ( <> (obj != null ? obj.name : 'Deleted Event')} onChange={(obj) => { diff --git a/frontend/components/ClubEditPage/MembersCard.tsx b/frontend/components/ClubEditPage/MembersCard.tsx index 74d1585e8..d23a11064 100644 --- a/frontend/components/ClubEditPage/MembersCard.tsx +++ b/frontend/components/ClubEditPage/MembersCard.tsx @@ -95,6 +95,14 @@ export default function MembersCard({ club }: MembersCardProps): ReactElement { ], filterFunction: (selection, object) => object.role === selection, }, + { + label: 'Active', + options: [ + { key: true, label: 'Active' }, + { key: false, label: 'Inactive' }, + ], + filterFunction: (selection, object) => object.active === selection, + }, ]} currentTitle={(obj) => obj != null ? `${obj.name} (${obj.email})` : 'Kicked Member' diff --git a/frontend/components/ModelForm.tsx b/frontend/components/ModelForm.tsx index f76248bff..15dcf2f2c 100644 --- a/frontend/components/ModelForm.tsx +++ b/frontend/components/ModelForm.tsx @@ -156,10 +156,14 @@ export const ModelTable = ({ const renderFunction = column.converter return { ...column, - render: (id, _) => { - const obj = objects?.[id] + render: (id) => { + const obj = objects?.filter((item) => item.id === id)[0] + ? objects?.filter((item) => item.id === id)[0] + : objects?.[id] const value = obj?.[column.name] - return obj && value ? renderFunction(value, obj) : 'N/A' + return obj && !(value === null) && !(value === undefined) + ? renderFunction(value, obj) + : 'N/A' }, } } else return column diff --git a/frontend/components/common/Table.tsx b/frontend/components/common/Table.tsx index 141f608bd..9f48994c9 100644 --- a/frontend/components/common/Table.tsx +++ b/frontend/components/common/Table.tsx @@ -16,6 +16,7 @@ import { CLUBS_GREY, FOCUS_GRAY, SNOW, + LIGHT_GRAY, WHITE, } from '../../constants/colors' import { BORDER_RADIUS, MD, mediaMaxWidth } from '../../constants/measurements' @@ -115,6 +116,10 @@ const Input = styled.input` } ` +const GreyText = styled.span` + color: ${LIGHT_GRAY}; +` + const Table = ({ columns, data, @@ -131,6 +136,7 @@ const Table = ({ const [searchQuery, setSearchQuery] = useState('') const [tableData, setTableData] = useState([]) const [selectedFilter, setSelectedFilter] = useState({}) + const [sortedColumn, setSortedColumn] = useState(null) useEffect(() => { const searchedData = data.filter((item) => { if (!searchQuery || searchQuery.length < 3) { @@ -216,6 +222,18 @@ const Table = ({ setSearchQuery(e.target.value) } + const handleColumnsSort = (target) => { + if (sortedColumn && sortedColumn.name === target) { + if (sortedColumn.status === 'asc') { + setSortedColumn({ name: sortedColumn.name, status: 'desc' }) + } else { + setSortedColumn(null) + } + } else { + setSortedColumn({ name: target, status: 'asc' }) + } + } + const components = { IndicatorSeparator: () => null, } @@ -225,7 +243,6 @@ const Table = ({ newFilters[newFilter.label] = newFilter.value setSelectedFilter(newFilters) } - if (data.length <= 0) { return <> } else if (setInitialPage != null) { @@ -292,18 +309,22 @@ const Table = ({ {headerGroup.headers.map((column) => ( - {titleize(column.render('Header'))} - - {column.isSorted ? ( - column.isSortedDesc ? ( - +
handleColumnsSort(column.header)}> + {titleize(column.render('Header'))} + + {column.isSorted ? ( + column.isSortedDesc ? ( + + ) : ( + + ) + ) : sortedColumn === null ? ( + ) : ( - - ) - ) : ( - '' - )} - + '' + )} + +
))} @@ -415,17 +436,17 @@ const Table = ({

No matches were found. Please change your filters.

)} {pageOptions.length > 1 && ( -
+
- - {data.length} total entries, {pageSize} entries per page - +
+ + {data.length} total entries, {pageSize} entries per page + +
)} diff --git a/frontend/public/static/img/icons/arrow-vertical.svg b/frontend/public/static/img/icons/arrow-vertical.svg new file mode 100644 index 000000000..81681fd60 --- /dev/null +++ b/frontend/public/static/img/icons/arrow-vertical.svg @@ -0,0 +1,4 @@ + + + + From e0a656960598bdf4321288709f638c5ad4c19298 Mon Sep 17 00:00:00 2001 From: alnasir7 Date: Sun, 21 Feb 2021 11:41:11 -0500 Subject: [PATCH 02/15] bug fixes --- frontend/components/ClubEditPage/EventsCard.tsx | 2 +- frontend/components/ModelForm.tsx | 4 ++-- frontend/components/common/Table.tsx | 4 ++-- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/frontend/components/ClubEditPage/EventsCard.tsx b/frontend/components/ClubEditPage/EventsCard.tsx index 7a2c8f51e..e0b6557d7 100644 --- a/frontend/components/ClubEditPage/EventsCard.tsx +++ b/frontend/components/ClubEditPage/EventsCard.tsx @@ -297,7 +297,7 @@ const eventTableFields = [ { name: 'is_ics_event', label: 'ICS', - converter: (a: boolean): ReactElement => , + converter: (a: boolean): ReactElement => , }, ] diff --git a/frontend/components/ModelForm.tsx b/frontend/components/ModelForm.tsx index 15dcf2f2c..ba0e4c4d5 100644 --- a/frontend/components/ModelForm.tsx +++ b/frontend/components/ModelForm.tsx @@ -161,9 +161,9 @@ export const ModelTable = ({ ? objects?.filter((item) => item.id === id)[0] : objects?.[id] const value = obj?.[column.name] - return obj && !(value === null) && !(value === undefined) + return obj && !(value === null) ? renderFunction(value, obj) - : 'N/A' + : 'None' }, } } else return column diff --git a/frontend/components/common/Table.tsx b/frontend/components/common/Table.tsx index 9f48994c9..0ff4773fd 100644 --- a/frontend/components/common/Table.tsx +++ b/frontend/components/common/Table.tsx @@ -439,14 +439,14 @@ const Table = ({
-
- {filterOptions && - filterOptions.map((filterOption) => ( - - + handleFilterChange({ + value: value || null, + label: filterOption.label ? filterOption.label : null, + }) + } + isClearable={true} + placeholder={`Filter by ${titleize(filterOption.label)}`} + options={filterOption.options.map((option) => { + return { value: option.key, label: option.label } + })} + /> + + ))}
- {tableData.length > 0 ? ( + {headerGroups.length > 0 ? ( {headerGroups.map((headerGroup) => ( @@ -424,8 +426,8 @@ const Table = ({ )}
- ) : data.length === 0 ? (

No items to show

) : ( -

No matches were found. Please change your filters.

+ ) : ( +

Nothing to Show

)} {pageOptions.length > 1 && (
@@ -440,7 +442,7 @@ const Table = ({