diff --git a/SAS/TMSS/frontend/tmss_webapp/src/components/ViewTable.js b/SAS/TMSS/frontend/tmss_webapp/src/components/ViewTable.js index 7c4bf8b57ba3dc755c19fb06a040d612f081c67e..878390fb3f0be9b8282e5ed80afe37a418051086 100644 --- a/SAS/TMSS/frontend/tmss_webapp/src/components/ViewTable.js +++ b/SAS/TMSS/frontend/tmss_webapp/src/components/ViewTable.js @@ -65,6 +65,7 @@ const getItemStyle = ({ isDragging, isDropAnimating }, draggableStyle) => ({ ...draggableStyle, // some basic styles to make the items look a bit nicer userSelect: "none", + cursor: isDragging? 'move': 'move', ...(!isDragging && { transform: "translate(0,0)" }), ...(isDropAnimating && { transitionDuration: "0.001s" }) @@ -1844,13 +1845,10 @@ function Table(props) { ); // console.log('columns List', visibleColumns.map((d) => d.id)); const storedColOrder = UtilService.localStore({ type: 'get', key: tablename+'colOrder'}); - if (storedColOrder.length) { - setColumnOrder(storedColOrder); - } - else if (columnOrders && columnOrders.length) { + if (columnOrders && columnOrders.length) { if (showAction === 'true') { setColumnOrder(['Select', 'Action', ...columnOrders]); - UtilService.localStore({ type: 'set', key: tablename+'colOrder', value: ['Select', ...columnOrders]}); + UtilService.localStore({ type: 'set', key: tablename+'colOrder', value: ['Select', 'Action', ...columnOrders]}); } else { setColumnOrder(['Select', ...columnOrders]); UtilService.localStore({ type: 'set', key: tablename+'colOrder', value: ['Select', ...columnOrders]}); @@ -2072,70 +2070,63 @@ function Table(props) { onDragUpdate={(dragUpdateObj, b) => { const colOrder = [...currentColOrder.current]; const sIndex = dragUpdateObj.source.index; - const dIndex = - dragUpdateObj.destination && dragUpdateObj.destination.index; - - if (typeof sIndex === "number" && typeof dIndex === "number") { - colOrder.splice(sIndex, 1); - colOrder.splice(dIndex, 0, dragUpdateObj.draggableId); - setColumnOrder(colOrder); - UtilService.localStore({ type: 'set', key: tablename+'colOrder', value: colOrder}); - } + const dIndex = dragUpdateObj.destination && dragUpdateObj.destination.index; + colOrder.splice(sIndex, 1); + colOrder.splice(dIndex, 0, dragUpdateObj.draggableId); + setColumnOrder(colOrder); + UtilService.localStore({ type: 'set', key: tablename+'colOrder', value: colOrder}); }} > <Droppable droppableId="droppable" direction="horizontal"> - {(droppableProvided, snapshot) => ( - <tr {...headerGroup.getHeaderGroupProps()} - ref={droppableProvided.innerRef}> - {headerGroup.headers.map((column,index) => ( - <Draggable - key={column.id} - draggableId={column.id} - index={index} - isDragDisabled={!column.accessor} - > - {(provided, snapshot) => { - return ( - <th onClick={() => { - if(!doServersideFilter) { - toggleBySorting({ 'id': column.id, desc: (column.isSortedDesc != undefined ? !column.isSortedDesc : false) }); - } - }}> - <div {...column.getHeaderProps(column.getSortByToggleProps())} > - <div - {...provided.draggableProps} - {...provided.dragHandleProps} - // {...extraProps} - ref={provided.innerRef} - style={{ - ...getItemStyle( - snapshot, - provided.draggableProps.style - ) - // ...style - }} - > - {column.Header !== 'actionpath' && column.render('Header')} - {column.Header !== 'Action' ? - column.isSorted ? (column.isSortedDesc ? <i className="pi pi-sort-down" aria-hidden="true"></i> : <i className="pi pi-sort-up" aria-hidden="true"></i>) : "" - : "" + {(droppableProvided, snapshot) => ( + <tr {...headerGroup.getHeaderGroupProps()} + ref={droppableProvided.innerRef}> + {headerGroup.headers.map((column,index) => ( + <Draggable + key={column.id} + draggableId={column.id} + index={index} + isDragDisabled={_.includes(['Select', 'Action', 'Status Logs'], column.id)? true: false}> + {(provided, snapshot) => { + return ( + <th onClick={() => { + if(!doServersideFilter) { + toggleBySorting({ 'id': column.id, desc: (column.isSortedDesc != undefined ? !column.isSortedDesc : false) }); } + }}> + <div {...column.getHeaderProps(column.getSortByToggleProps())} > + <div + {...provided.draggableProps} + {...provided.dragHandleProps} + // {...extraProps} + ref={provided.innerRef} + style={{ + ...getItemStyle( + snapshot, + provided.draggableProps.style + ) + // ...style + }}> + {column.Header !== 'actionpath' && column.render('Header')} + {column.Header !== 'Action' ? + column.isSorted ? (column.isSortedDesc ? <i className="pi pi-sort-down" aria-hidden="true"></i> : <i className="pi pi-sort-up" aria-hidden="true"></i>) : "" + : "" + } + </div> </div> - </div> - - {/* Render the columns filter UI */} - {column.Header !== 'actionpath' && - <div className={columnclassname[0][column.Header]}> - {column.canFilter && column.Header !== 'Action' ? column.render('Filter') : null} - </div> - } - </th> - ); - }} - </Draggable> - ))} - </tr> - )} + {/* Render the columns filter UI */} + {column.Header !== 'actionpath' && + <div className={columnclassname[0][column.Header]}> + {column.canFilter && column.Header !== 'Action' ? column.render('Filter') : null} + </div> + } + </th> + ); + }} + </Draggable> + ))} + </tr> + )} </Droppable> </DragDropContext> ))}