Skip to content

Commit

Permalink
feat: Implemented filter functionality in the table component
Browse files Browse the repository at this point in the history
  • Loading branch information
@tbalar-splunk
tbalar-splunk committed Mar 9, 2021
1 parent 482eb2b commit 4a77545
Show file tree
Hide file tree
Showing 6 changed files with 822 additions and 467 deletions.
176 changes: 91 additions & 85 deletions splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/components/table/Table.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { useState, useEffect } from 'react';
import React, { useState } from 'react';
import Table from '@splunk/react-ui/Table';
import Switch from '@splunk/react-ui/Switch';
import ButtonGroup from '@splunk/react-ui/ButtonGroup';
Expand All @@ -14,13 +14,9 @@ import { getUnifiedConfigs } from '../../util/util';
import { getExpansionRow } from './TableExpansionRow';

function InputTable({ isInput, serviceName, data, handleToggleActionClick }) {

const [sortKey, setSortKey] = useState('name');
const [sortDir, setSortDir] = useState('asc');
const [columns, setColumns] = useState([]);

useEffect(() => {
generateColumns();
}, []);

const generateColumns = () => {
const unifiedConfigs = getUnifiedConfigs();
Expand All @@ -31,14 +27,16 @@ function InputTable({ isInput, serviceName, data, handleToggleActionClick }) {
headers.forEach((header) => {
column.push({
...header,
sortKey: header.field || null,
sortKey: header.field || null
});
});
}
column.push({ label: 'Actions', field: 'actions', sortKey: '' });
setColumns(column);
return column;
}
};
}

const [columns, setColumns] = useState(() => generateColumns());

const handleSort = (e, val) => {
const prevSortKey = sortKey;
Expand All @@ -51,53 +49,57 @@ function InputTable({ isInput, serviceName, data, handleToggleActionClick }) {
const getTableHeaders = () => {
return (
<Table.Head>
{columns &&
columns.length &&
columns.map((headData) => (
<Table.HeadCell
key={headData.field}
onSort={headData.sortKey ? handleSort : null}
sortKey={headData.sortKey ? headData.sortKey : null}
sortDir={
headData.sortKey
? headData.sortKey === sortKey
? sortDir
: 'none'
: null
}
>
{headData.label}
</Table.HeadCell>
))}
{columns && columns.length && columns.map((headData) => (
<Table.HeadCell
key={headData.field}
onSort={headData.sortKey ? handleSort : null}
sortKey={headData.sortKey ? headData.sortKey : null}
sortDir={headData.sortKey ? headData.sortKey === sortKey ? sortDir : 'none' : null}
>
{headData.label}
</Table.HeadCell>
))}
</Table.Head>
);
};
)
}

const handleEditActionClick = () => {

}

const handleCloneActionClick = () => {

const handleEditActionClick = () => {};
}

const handleCloneActionClick = () => {};
const handleDeleteActionClick = () => {

const handleDeleteActionClick = () => {};
}

const rowActionsPrimaryButton = (row) => {
return (
<Table.Cell key={row.id}>
<ButtonGroup>
<Tooltip content={_('Edit')}>
<Tooltip
content={_('Edit')}
>
<ActionButtonComponent
appearance="primary"
icon={<Pencil screenReaderText={null} size={1} />}
onClick={() => handleEditActionClick(row)}
/>
</Tooltip>
<Tooltip content={_('Clone')}>
<Tooltip
content={_('Clone')}
>
<ActionButtonComponent
appearance="primary"
icon={<Clone screenReaderText={null} size={1} />}
onClick={() => handleCloneActionClick(row)}
/>
</Tooltip>
<Tooltip content={_('Delete')}>
<Tooltip
content={_('Delete')}
>
<ActionButtonComponent
appearance="primary"
icon={<Trash screenReaderText={null} size={1} />}
Expand All @@ -106,69 +108,73 @@ function InputTable({ isInput, serviceName, data, handleToggleActionClick }) {
</Tooltip>
</ButtonGroup>
</Table.Cell>
);
};
)
}

const getTableRow = (row) => {
return (
<Table.Row key={row.id} expansionRow={getExpansionRow(columns.length, row)}>
{columns &&
columns.length &&
columns.map((header) => {
if (header.field === 'disabled') {
return (
<Table.Cell key={header.field}>
<Switch
key={row.name}
value={row.disabled}
onClick={() => handleToggleActionClick(row)}
selected={!row.disabled}
appearance="toggle"
>
{row.disabled ? 'Disabled' : 'Enabled'}
</Switch>
</Table.Cell>
);
} else if (header.field == 'actions') {
return rowActionsPrimaryButton(row);
} else {
return <Table.Cell key={header.field}>{row[header.field]}</Table.Cell>;
}
})}
<Table.Row
key={row.id}
expansionRow={getExpansionRow(columns.length, row)}
>
{columns && columns.length && columns.map((header) => {
if (header.field === "disabled") {
return (
<Table.Cell key={header.field}>
<Switch
key={row.name}
value={row.disabled}
onClick={() => handleToggleActionClick(row)}
selected={!row.disabled}
appearance="toggle"
>
{row.disabled ? "Disabled" : "Enabled"}
</Switch>
</Table.Cell>
)
} else if (header.field == "actions") {
return rowActionsPrimaryButton(row);
} else {
return (
<Table.Cell key={header.field}>
{row[header.field]}
</Table.Cell>
)
}
})}
</Table.Row>
);
};
}

const getTableBody = () => {
return (
<Table.Body>
{data &&
data.length &&
data
.sort((rowA, rowB) => {
if (sortDir === 'asc') {
return rowA[sortKey] > rowB[sortKey] ? 1 : -1;
}
if (sortDir === 'desc') {
return rowB[sortKey] > rowA[sortKey] ? 1 : -1;
}
return 0;
})
.map((row) => getTableRow(row))}
{data && data.length && data
.sort((rowA, rowB) => {
if (sortDir === 'asc') {
return rowA[sortKey] > rowB[sortKey] ? 1 : -1;
}
if (sortDir === 'desc') {
return rowB[sortKey] > rowA[sortKey] ? 1 : -1;
}
return 0;
})
.map((row) => (
getTableRow(row)
))
}
</Table.Body>
);
};
}

return (
<>
{columns && columns.length && (
<>
<Table stripeRows rowExpansion="single">
{getTableHeaders()}
{getTableBody()}
</Table>
</>
)}
{ columns && columns.length &&
<Table stripeRows rowExpansion="single">
{getTableHeaders()}
{getTableBody()}
</Table>
}
</>
);
}
Expand All @@ -177,7 +183,7 @@ InputTable.propTypes = {
isInput: PropTypes.boolean,
serviceName: PropTypes.string.isRequired,
data: PropTypes.object.isRequired,
handleToggleActionClick: PropTypes.func,
handleToggleActionClick: PropTypes.func
};

export default InputTable;
22 changes: 13 additions & 9 deletions splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/components/table/TableExpansionRow.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,31 +9,35 @@ function getExpansionRowData(row) {
const unifiedConfigs = getUnifiedConfigs();
let moreInfo = unifiedConfigs.pages.inputs.table.moreInfo;
return (
moreInfo && moreInfo.length && moreInfo.map((val) => {
moreInfo &&
moreInfo.length &&
moreInfo.map((val) => {
const label = _(val.label);
return (
<>
{ (row[val.field] || val.label == "Status") &&
{(row[val.field] || val.label == 'Status') && (
<>
<DL.Term>{label}</DL.Term>
<DL.Description>
{ val.label == "Status" ? row[val.field] ? 'Disabled': 'Enabled': `${row[val.field]}` }
{val.label == 'Status'
? row[val.field]
? 'Disabled'
: 'Enabled'
: `${row[val.field]}`}
</DL.Description>
</>
}
)}
</>
)
);
})
)
);
}

export function getExpansionRow(colSpan, row) {
return (
<Table.Row key={`${row.id}-expansion`}>
<Table.Cell style={{ borderTop: 'none' }} colSpan={colSpan}>
<DL>
{getExpansionRowData(row)}
</DL>
<DL>{getExpansionRowData(row)}</DL>
</Table.Cell>
</Table.Row>
);
Expand Down
22 changes: 22 additions & 0 deletions splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/components/table/TableFilter.jsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
import React from 'react';
import Text from '@splunk/react-ui/Text';
import PropTypes from 'prop-types';

function TableFilter(props) {

return (
<>
<Text
appearance="search"
placeholder="filter"
onChange={props.handleChange}
/>
</>
)
}

TableFilter.propTypes = {
handleChange: PropTypes.func
};

export default TableFilter;
11 changes: 11 additions & 0 deletions splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/components/table/TableStyle.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,3 +11,14 @@ export const WaitSpinnerWrapper = styled(WaitSpinner)`
top: 50%;
left: 50%;
`;

export const TableCaptionComponent = styled.div`
text-align: left;
`;

export const TableSelectBoxWrapper = styled.span`
button {
margin-left: 50%;
min-width: 100px;
}
`;
Loading

0 comments on commit 4a77545

Please sign in to comment.