Skip to content
Snippets Groups Projects
Commit 142c5e4f authored by Muthu's avatar Muthu
Browse files

TMSS-342 : added new feature for column customization 

added new feature for column customization, user can customize the column view in table
parent 095c1ea8
No related branches found
No related tags found
1 merge request!214Resolve TMSS-348 - Merged other local branches
Hide whitespace changes
Inline Side-by-side
Showing
with 63 additions and 33 deletions
SAS/TMSS/frontend/tmss_webapp/src/components/ViewTable.js
+ 59
− 33
View file @ 142c5e4f
......@@ -229,7 +229,7 @@ const IndeterminateCheckbox = React.forwardRef(
)
// Our table component
function Table({ columns, data, defaultheader, optionalheader, defaultSortColumn }) {
function Table({ columns, data, defaultheader, optionalheader, defaultSortColumn, tablename }) {
const filterTypes = React.useMemo(
() => ({
// Add a new fuzzyTextFilterFn filter type.
......@@ -257,7 +257,7 @@ function Table({ columns, data, defaultheader, optionalheader, defaultSortColumn
}),
[]
)
const {
getTableProps,
getTableBodyProps,
......@@ -273,7 +273,6 @@ function Table({ columns, data, defaultheader, optionalheader, defaultSortColumn
setHiddenColumns,
gotoPage,
setPageSize,
} = useTable(
{
columns,
......@@ -288,7 +287,6 @@ function Table({ columns, data, defaultheader, optionalheader, defaultSortColumn
useSortBy,
usePagination
)
React.useEffect(() => {
setHiddenColumns(
columns.filter(column => !column.isVisible).map(column => column.accessor)
......@@ -307,6 +305,17 @@ function Table({ columns, data, defaultheader, optionalheader, defaultSortColumn
setPageSize(e.rows)
};
const onToggleChange = (e) =>{
let lsToggleColumns = [];
allColumns.forEach( acolumn =>{
let jsonobj = {};
let visible = (acolumn.Header === e.target.id) ? ((acolumn.isVisible)?false:true) :acolumn.isVisible
jsonobj['Header'] = acolumn.Header;
jsonobj['isVisible'] = visible;
lsToggleColumns.push(jsonobj)
})
localStorage.setItem(tablename,JSON.stringify(lsToggleColumns))
}
return (
<>
<div id="block_container">
......@@ -325,7 +334,10 @@ function Table({ columns, data, defaultheader, optionalheader, defaultSortColumn
</div>
{allColumns.map(column => (
<div key={column.id} style={{'display':column.id !== 'actionpath'?'block':'none'}}>
<input type="checkbox" {...column.getToggleHiddenProps()} /> {
<input type="checkbox" {...column.getToggleHiddenProps()}
id={(defaultheader[column.id])?defaultheader[column.id]:(optionalheader[column.id]?optionalheader[column.id]:column.id)}
onClick={onToggleChange}
/> {
(defaultheader[column.id]) ? defaultheader[column.id] : (optionalheader[column.id] ? optionalheader[column.id] : column.id)}
</div>
))}
......@@ -346,7 +358,7 @@ function Table({ columns, data, defaultheader, optionalheader, defaultSortColumn
/>
}
</div>
</div>
</div>
<div className="table_container">
<table {...getTableProps()} data-testid="viewtable" className="viewtable" >
......@@ -367,7 +379,6 @@ function Table({ columns, data, defaultheader, optionalheader, defaultSortColumn
{column.Header !== 'actionpath' &&
<div className={columnclassname[0][column.Header]} >
{column.canFilter && column.Header !== 'Action' ? column.render('Filter') : null}
</div>
}
</th>
......@@ -382,7 +393,10 @@ function Table({ columns, data, defaultheader, optionalheader, defaultSortColumn
return (
<tr {...row.getRowProps()}>
{row.cells.map(cell => {
return <td {...cell.getCellProps()}>{cell.render('Cell')}</td>
if(cell.column.id !== 'actionpath')
return <td {...cell.getCellProps()}>{cell.render('Cell')}</td>
else
return;
})}
</tr>
)
......@@ -396,7 +410,6 @@ function Table({ columns, data, defaultheader, optionalheader, defaultSortColumn
</>
)
}
// Define a custom filter filter function!
function filterGreaterThan(rows, id, filterValue) {
......@@ -423,6 +436,8 @@ function ViewTable(props) {
let defaultheader = props.defaultcolumns;
let optionalheader = props.optionalcolumns;
let defaultSortColumn = props.defaultSortColumn;
let tablename = (props.tablename)?props.tablename:window.location.pathname;
if(!defaultSortColumn){
defaultSortColumn =[{}];
}
......@@ -455,34 +470,45 @@ function ViewTable(props) {
// Object.entries(props.paths[0]).map(([key,value]) =>{})
}
//Default Columns
defaultdataheader.forEach(header => {
const isString = typeof defaultheader[0][header] === 'string';
columns.push({
Header: isString ? defaultheader[0][header] : defaultheader[0][header].name,
id: isString ? defaultheader[0][header] : defaultheader[0][header].name,
accessor: header,
filter: (!isString && defaultheader[0][header].filter=== 'date') ? 'includes' : 'fuzzyText',
Filter: isString ? DefaultColumnFilter : (filterTypes[defaultheader[0][header].filter] ? filterTypes[defaultheader[0][header].filter] : DefaultColumnFilter),
isVisible: true,
Cell: props => <div> {updatedCellvalue(header, props.value)} </div>,
})
})
//Optional Columns
optionaldataheader.forEach(header => {
const isString = typeof optionalheader[0][header] === 'string';
columns.push({
Header: isString ? optionalheader[0][header] : optionalheader[0][header].name,
id: isString ? optionalheader[0][header] : optionalheader[0][header].name,
//Default Columns
defaultdataheader.forEach(header =>{
const isString = typeof defaultheader[0][header] === 'string';
columns.push({
Header: isString ? defaultheader[0][header] : defaultheader[0][header].name,
id: header,
accessor: header,
filter: (!isString && defaultheader[0][header].filter=== 'date') ? 'includes' : 'fuzzyText',
Filter: isString ? DefaultColumnFilter : (filterTypes[defaultheader[0][header].filter] ? filterTypes[defaultheader[0][header].filter] : DefaultColumnFilter),
isVisible: true,
Cell: props => <div> {updatedCellvalue(header, props.value)} </div>,
})
})
//Optional Columns
optionaldataheader.forEach(header => {
const isString = typeof optionalheader[0][header] === 'string';
columns.push({
Header: isString ? optionalheader[0][header] : optionalheader[0][header].name,
id: isString ? header : optionalheader[0][header].name,
accessor: header,
filter: (!isString && optionalheader[0][header].filter=== 'date') ? 'includes' : 'fuzzyText',
Filter: isString ? DefaultColumnFilter : (filterTypes[optionalheader[0][header].filter] ? filterTypes[optionalheader[0][header].filter] : DefaultColumnFilter),
isVisible: false,
Cell: props => <div> {updatedCellvalue(header, props.value)} </div>,
})
});
})
});
let togglecolumns = localStorage.getItem(tablename);
if(togglecolumns){
togglecolumns = JSON.parse(togglecolumns)
columns.forEach(column =>{
togglecolumns.filter(tcol => {
column.isVisible = (tcol.Header === column.Header)?tcol.isVisible:column.isVisible;
})
})
}
function updatedCellvalue(key, value){
try{
if(key === 'blueprint_draft' && _.includes(value,'/task_draft/')){
......@@ -514,7 +540,7 @@ function ViewTable(props) {
return (
<div>
<Table columns={columns} data={tbldata} defaultheader={defaultheader[0]} optionalheader={optionalheader[0]}
defaultSortColumn={defaultSortColumn} />
defaultSortColumn={defaultSortColumn} tablename={tablename}/>
</div>
)
}
......
SAS/TMSS/frontend/tmss_webapp/src/routes/Cycle/list.js
+ 1
− 0
View file @ 142c5e4f
......@@ -148,6 +148,7 @@ class CycleList extends Component{
defaultSortColumn= {this.defaultSortColumn}
showaction="true"
paths={this.state.paths}
tablename="cycle_list"
/> : <></>
}
......
SAS/TMSS/frontend/tmss_webapp/src/routes/Project/list.js
+ 1
− 0
View file @ 142c5e4f
......@@ -94,6 +94,7 @@ export class ProjectList extends Component{
paths={this.state.paths}
keyaccessor="name"
unittest={this.state.unittest}
tablename="project_list"
/>
}
</>
......
SAS/TMSS/frontend/tmss_webapp/src/routes/Scheduling/SchedulingUnitList.js
+ 1
− 0
View file @ 142c5e4f
......@@ -99,6 +99,7 @@ class SchedulingUnitList extends Component{
keyaccessor="id"
paths={this.state.paths}
unittest={this.state.unittest}
tablename="scheduleunit_list"
/>
}
</>
......
SAS/TMSS/frontend/tmss_webapp/src/routes/Scheduling/ViewSchedulingUnit.js
+ 1
− 0
View file @ 142c5e4f
......@@ -183,6 +183,7 @@ class ViewSchedulingUnit extends Component{
keyaccessor="id"
paths={this.state.paths}
unittest={this.state.unittest}
tablename="scheduleunit_task_list"
/>
}
</>
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment