review table

Author: Francesca-Bit

packages/tdb-dashboard/src/index.js

@@ -18,8 +18,16 @@ function NavigationComponent(){
     let navigate = useNavigate();
     const redirect_uri = window.location.origin
 
+
+    // this happen after confirm you password linking in the email url
+   /* if (window.location.search.includes("supportSignUp=true")) {
+     // window.location.replace('/') 
+    }*/
+    // you enter here only if you are log - in 
     const onRedirectCallback = (appState) => {
+    
       navigate(appState && appState.targetUrl ? appState.targetUrl : window.location.pathname);
+      
     };
 
     if(localSettings && localSettings.connection_type!== "LOCAL"){

packages/tdb-react-table/src/ColumsVisibilityComponent.js

@@ -9,6 +9,7 @@ const CheckboxMenu = React.forwardRef(
       children,
       style,
       className,
+      setHiddenColumns,
       "aria-labelledby": labeledBy,
       onChange,
       title,
@@ -19,7 +20,8 @@ const CheckboxMenu = React.forwardRef(
     const label = checked ? "Hide All" : "Show All"
 
     const setHideShow = (evt)=>{
-        onChange(!checked)
+        if(setHiddenColumns)setHiddenColumns("__ALL__",!checked)
+        onChange(evt)
     }
 
     return (<div
@@ -44,7 +46,7 @@ const CheckboxMenu = React.forwardRef(
                 type="checkbox"
                 label={"All"}
                 checked={checked}
-                onChange={onChange}
+                onChange={setHideShow}
                 className= "table__columns__component"
                 />
         </Form.Group>
@@ -56,14 +58,19 @@ const CheckboxMenu = React.forwardRef(
 );
 
 const CheckDropdownItem = React.forwardRef(
-  ({ children, id, checked, onChange }, ref) => {
+  ({ children, id, checked, onChange , setHiddenColumns}, ref) => {
+    function hideShowColumn(evt){
+        if(setHiddenColumns)setHiddenColumns(id,evt.target.checked)
+        onChange(evt)
+    }
+
     return (
       <Form.Group ref={ref} className="dropdown-item mb-0" controlId={id}>
         <Form.Check
           type="checkbox"
           label={children}
           checked={checked}
-          onChange={onChange}
+          onChange={hideShowColumn}
           className= "table__columns__component"
         />
       </Form.Group>
@@ -72,7 +79,7 @@ const CheckDropdownItem = React.forwardRef(
 );
 
 
-export const CheckboxDropdown = ({ allColumns,getToggleHideAllColumnsProps }) => {
+export const CheckboxDropdown = ({setHiddenColumns, allColumns,getToggleHideAllColumnsProps }) => {
   return (
     <Dropdown>
       <Dropdown.Toggle variant="primary" id="dropdown-basic" className="bg-light text-dark">
@@ -81,13 +88,15 @@ export const CheckboxDropdown = ({ allColumns,getToggleHideAllColumnsProps }) =>
 
       <Dropdown.Menu
         as={CheckboxMenu}
+        setHiddenColumns={setHiddenColumns}
         {...getToggleHideAllColumnsProps()}
       >
         {allColumns.map(column => (
 
           <Dropdown.Item
             key={column.id}
             as={CheckDropdownItem}
+            setHiddenColumns={setHiddenColumns}
             id={column.id}
             {...column.getToggleHiddenProps()}>
             {column.Header}

packages/tdb-react-table/src/GraphqlTable.js

@@ -20,7 +20,7 @@ minWidth,
 maxWidth}]*/
 
 //this only render the logic of do the query is in an external hook
-export const GraphqlTable = ({hiddenColumnsArr, result, config, freewidth, start, filtersBy ,limit, orderBy, totalRows, setLimits, setOrder, setFilters,onRefresh,dowloadConfig})=>{
+export const GraphqlTable = ({hiddenColumnsArr, setHiddenColumns,result, config, freewidth, start, filtersBy ,limit, orderBy, totalRows, setLimits, setOrder, setFilters,onRefresh,dowloadConfig})=>{
    // let wt = TerminusClient.View.table()
    // if(view)  wt.loadJSON(view.table, view.rules)
 
@@ -68,17 +68,17 @@ export const GraphqlTable = ({hiddenColumnsArr, result, config, freewidth, start
     };
 
     function formatTableColumns(){
-        const hiddenColumns = [] //hiddenColumnsArr
+        const hiddenColumns = hiddenColumnsArr || []
         // I visualise the id only if it is the only item
         const colArr = config.columns
         if(!Array.isArray(colArr))return []
 
-        if(colArr.length > 1){
+        if(!hiddenColumnsArr && colArr.length > 1){
             hiddenColumns.push("_id")
         }
 
         let listOfColumns = colArr.map((item,index) => {
-            if(index>4){
+            if(!hiddenColumnsArr && index>4){
                 hiddenColumns.push(item.id)
             }
             let col = item
@@ -144,6 +144,7 @@ export const GraphqlTable = ({hiddenColumnsArr, result, config, freewidth, start
                 </Col>
             </Row>}
             <ReactTableComponent
+                setHiddenColumns = {setHiddenColumns}
                 setFilters={setFilters}
                 data={data}
                 columns={[{columns:columns,Header:" "}]}

packages/tdb-react-table/src/ReactTableComponent.js

@@ -11,7 +11,7 @@ import { DefaultColumnFilter } from './ColumnFilters';
  * sort - no, local, remote
  */ 
 
-export const ReactTableComponent = ({columns, data, limit, config, pages, freewidth, filtersBy, orderBy, rowCount, pageNumber, setLimits, setOrder, setFilters, pagesizes, onRefresh,hiddenColumns})=>{
+export const ReactTableComponent = ({setHiddenColumns, columns, data, limit, config, pages, freewidth, filtersBy, orderBy, rowCount, pageNumber, setLimits, setOrder, setFilters, pagesizes, onRefresh,hiddenColumns})=>{
 
    // console.log("COLUMS", JSON.stringify(columns,null,4))
 
@@ -114,7 +114,7 @@ export const ReactTableComponent = ({columns, data, limit, config, pages, freewi
         <span>
         <div className='d-flex justify-content-end'>
         {setFilters && <Button title="Reset filters" className="bg-light text-dark" onClick={() => setAllFilters([])}><MdOutlineResetTv/></Button>}
-        <CheckboxDropdown allColumns={allColumns} getToggleHideAllColumnsProps={getToggleHideAllColumnsProps}/>
+        <CheckboxDropdown setHiddenColumns={setHiddenColumns} allColumns={allColumns} getToggleHideAllColumnsProps={getToggleHideAllColumnsProps}/>
         </div>
         <div className="h-4" />
             <Table {...getTableProps()} hover >

packages/tdb-react-table/src/TableComponent.js

@@ -13,7 +13,7 @@ import { DefaultColumnFilter } from './ColumnFilters';
 
 export const TableComponent = ({columns, data, view, pages, freewidth, filtersBy, orderBy, rowCount, pageNumber, setLimits, setOrder, setFilters, pagesizes, onRefresh})=>{
 
-    console.log("COLUMS", JSON.stringify(columns,null,4))
+    //console.log("COLUMS", JSON.stringify(columns,null,4))
 
     pagesizes = pagesizes || [5, 10, 20, 30, 40, 50]
     let pager = view.config.pager()

packages/tdb-react-table/src/hook/ControlledGraphqlQuery.js

@@ -1,6 +1,6 @@
 import React, {useState, useEffect} from 'react'
 
-export function ControlledGraphqlQuery (apolloClient, graphqlQuery, documentType, queryLimit, queryStart, order, filter) {
+export function ControlledGraphqlQuery (apolloClient, graphqlQuery, documentType, queryLimit, queryStart, order, filter,tableConfigObj,hiddenColumnsStart) {
 
     const [limit, setLimit] = useState(queryLimit || 10)
     const [start, setStart] = useState(queryStart || 0)
@@ -12,7 +12,7 @@ export function ControlledGraphqlQuery (apolloClient, graphqlQuery, documentType
     const [controlledRefresh, setControlledRefresh] = useState(0)
     const [data, setData] = useState(null)
 
-    const [setHiddenColumnsArr, hiddenColumnsArr] = useState([])
+    const [hiddenColumnsArr,setHiddenColumnsArr] = useState(['_id'])
 
     //filter is the filter formatted for the query
     let filterTable  = []
@@ -139,6 +139,31 @@ export function ControlledGraphqlQuery (apolloClient, graphqlQuery, documentType
     const onRefresh = () => {
         setRefresh(controlledRefresh+1)
     }
+
+    const setHiddenColumns =(id, checked)=>{
+      const indexof = hiddenColumnsArr.indexOf(id)
+      if(id==="__ALL__"){
+          if(checked){
+              setHiddenColumnsArr([])
+          }else{
+              //columns name
+              if(Array.isArray(tableConfigObj)){
+                tableConfigObj.forEach(item =>{
+                  if(hiddenColumnsArr.indexOf(item.id) === -1)
+                      hiddenColumnsArr.push(item.id)
+                })
+              }
+          }
+      }else{
+          if(indexof>-1 && checked===true){
+              // we remove the item if it is in the array
+              const x = hiddenColumnsArr.splice(indexof, 1);
+          }else if(checked===false && indexof=== -1) {
+              hiddenColumnsArr.push(id)
+          }
+      }
+      
+  }
 
     return {
         callFetchMore,
@@ -159,7 +184,7 @@ export function ControlledGraphqlQuery (apolloClient, graphqlQuery, documentType
         onRefresh,
         documentResults:data,
         hiddenColumnsArr,
-        setHiddenColumnsArr,
+        setHiddenColumns,
         // maybe we need to set from outside
        // setDocumentResults,
        // setControlledRefresh,