@fto-consult/expo-ui 2.13.2 → 2.14.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fto-consult/expo-ui",
-  "version": "2.13.2",
+  "version": "2.14.1",
   "description": "Bibliothèque de composants UI Expo,react-native",
   "main": "index.js",
   "scripts": {

package/src/components/Countries/Flag.js

@@ -19,6 +19,7 @@ export default function CountryFlagComponent({code,label,withName,withCode,text,
             <Image  
             accessibilityIgnoresInvertColors 
             tesID ={tesID+"Image"}
+            editable = {false}
             {...props}
             size = {25} 
             style={[props.style]} 

package/src/components/Countries/SelectCountry.js

@@ -27,7 +27,7 @@ export const getCountryFieldProps = (props)=>{
         },
         renderItem : ({item})=>{
             return <View style={[styles.renderedImage]}>
-                {(isNonNullString(item.image) || isNumber(item.image)) && <Image  accessibilityIgnoresInvertColors {...imageProps} style={[styles.flagImage,{marginRight:10},imageProps.style]} source={isNumber(item.image)?item.image:{uri:item.image}}/>}
+                {(isNonNullString(item.image) || isNumber(item.image)) && <Image  editable = {false} accessibilityIgnoresInvertColors {...imageProps} style={[styles.flagImage,{marginRight:10},imageProps.style]} source={isNumber(item.image)?item.image:{uri:item.image}}/>}
                 <Label>{item.label}</Label>
             </View>
         },

package/src/components/Datagrid/Accordion/index.js

@@ -308,6 +308,7 @@ const DatagridFactory = (Factory)=>{
                 filter,
                 actions,
                 sortable,
+                autoSort,
                 exportable,
                 filterOrOperator,
                 filterAndOperator,
@@ -325,6 +326,7 @@ const DatagridFactory = (Factory)=>{
                 backToTopProps,
                 testID,
                 renderEmpty,
+                ...rest
             } = this.props
             const hasData = this.state.data.length ? true : false;
             testID = defaultStr(testID,"RN_DatagridAccordion");
@@ -433,6 +435,7 @@ const DatagridFactory = (Factory)=>{
                         <View testID={testID+"_HeaderQueryLimit"} style={[styles.paginationItem]}>
                             {this.renderQueryLimit(this.state.data.length.formatNumber())}
                         </View>
+                        {this.renderCustomPagination()}
                         {sortedColumnsLength ? <View testID={testID+"_HeaderSortedColumns"} style={[styles.sortableItems,styles.paginationItem,{paddingRight:10}]}>
                             <Icon 
                                 testID={testID+"_HeaderSortIcon"}
@@ -503,6 +506,7 @@ const DatagridFactory = (Factory)=>{
                                         ,icon :  showFooters?'view-column':'view-module'
                                         ,text : (showFooters?'Masquer/Ligne des totaux':'Afficher/Ligne des totaux')
                                     }:null,
+                                    ...this.renderCustomMenu(),
                                     ...restItems,
                                     this.canScrollTo() &&  {
                                         text : 'Retour en haut',
@@ -579,6 +583,7 @@ const DatagridFactory = (Factory)=>{
                     {hasData ? <FlashList
                         estimatedItemSize = {150}
                         prepareItems = {false}
+                        {...rest}
                         {...accordionProps}
                         testID = {testID}
                         extraData = {this.state.refresh}

package/src/components/Datagrid/Common/Common.js

@@ -78,7 +78,6 @@ export default class CommonDatagridComponent extends AppComponent {
         sData.fixedTable = defaultBool(sData.fixedTable,false);
         extendObj(this.state, {
             data,
-            sort :defaultObj(props.sort),
             showFilters : defaultBool(props.showFilters,(sData.showFilter? true : this.isPivotDatagrid())),
             showFooters : defaultBool(props.showFooters,(sData.showFooters? true : false)),
             fixedTable : sData.fixedTable
@@ -87,6 +86,9 @@ export default class CommonDatagridComponent extends AppComponent {
             layoutRef : {
                 value : React.createRef(null),
             },
+            sortRef : {
+                value : {current : defaultObj(props.sort)}
+            },
             preparedColumns : {
                 value : {},override:false, writable:false,
             },
@@ -109,17 +111,15 @@ export default class CommonDatagridComponent extends AppComponent {
         }) 
         this.isLoading = this.isLoading.bind(this);
         this.getProgressBar = this.getProgressBar.bind(this);
-        this.state.sort.dir = defaultStr(this.state.sort.dir,this.state.sort.column == "date"?"desc":'asc')
+        this.sortRef.current.dir = defaultStr(this.sortRef.current.dir,this.sortRef.current.column == "date"?"desc":'asc')
         this.hasColumnsHalreadyInitialized = false;
         this.initColumns(props.columns);
-        if(!isNonNullString(this.state.sort.column) && "date" in this.state.columns){
-            this.state.sort.column = "date";
+        if(!isNonNullString(this.sortRef.current.column) && "date" in this.state.columns){
+            this.sortRef.current.column = "date";
         }
         this.INITIAL_STATE = {
             data,
-            sort : this.state.sort
         }
-        this._sort = this.state.sort;
         this._datagridId = isNonNullString(this.props.id)? this.props.id : uniqid("datagrid-id")
         this.canDoFilter = true;    
         this.filters =  {}
@@ -308,7 +308,8 @@ export default class CommonDatagridComponent extends AppComponent {
         return ;
     }
     canPaginateData(){
-        return false;
+        if(this.props.handlePagination === false) return false;
+        return this.isDatagrid();
     }
     getFiltersProps(){
         return this.props.filters;
@@ -688,11 +689,11 @@ export default class CommonDatagridComponent extends AppComponent {
         }
      */
     sort (column,dir){
-        let sort = extendObj({},{
+        const sort = extendObj({},{
             dir: '',
             column : '',
             ignoreCase : true
-        }, this.state.sort);
+        }, this.sortRef.current);
         if(isNonNullString(column)){
             sort.column = column;
         }
@@ -702,8 +703,8 @@ export default class CommonDatagridComponent extends AppComponent {
         if(isNonNullString(dir)){
             sort.dir = dir;
         } 
-        if(this.state.sort.column === sort.column){
-            switch(this.state.sort.dir){
+        if(this.sortRef.current.column === sort.column){
+            switch(this.sortRef.current.dir){
                 case 'asc':
                     sort.dir = 'desc';
                     break;
@@ -719,9 +720,12 @@ export default class CommonDatagridComponent extends AppComponent {
             sort.dir = sort.dir.trim().toLowerCase();            
         }
         if(sort.dir !== "asc" && sort.dir !== "desc") sort.dir = 'asc';
-        this._previousSortObj = this._sort;
-        this._sort = sort;
-        this.prepareColumns({sortedColumn : this._sort});
+        this._previousSortObj = Object.clone(this.sortRef.current);
+        this.sortRef.current = sort;
+        this.prepareColumns({sortedColumn : this.sortRef.current});
+        if(typeof this.props.onSort =='function' && this.props.onSort({...sort,context:this,sort,data:this.INITIAL_STATE.data,fields:this.state.columns,columns:this.state.columns}) === false){
+            return;
+        }
         this.prepareData({data:this.state.data,updateFooters:false},(state)=>{
             this.setState(state);
         });
@@ -752,7 +756,41 @@ export default class CommonDatagridComponent extends AppComponent {
         }
         this.handlePagination(newStart, limit, nextPage);
     }
-
+    /*** pour le rendu personalisé de la pagination */
+    renderCustomPagination(){
+        if(typeof this.props.renderCustomPagination ==='function'){
+            const r = this.props.renderCustomPagination({
+                context:this,refresh:this.refresh.bind(this)
+            });
+            return React.isValidElement(r)? r : null;
+        }
+        return null;
+    }
+    /*** permet de faire le rendu de certaines entête personalisés 
+     * utile lorsque l'on veut par exemple afficher d'autres information au niveau de l'entête du tableau
+    */
+    renderCustomMenu(){
+        const customMenu = []
+        Object.map(this.props.customMenu,(menu,i)=>{
+            if(isObj(menu)){
+                const {onPress,menu,label,text,children,...rest} = menu;
+                const args = {context:this,refresh:this.refresh.bind(this)};
+                const lCB = defaultVal(children,label,text);
+                const labelText = typeof lCB ==='function'? lCB(args) : lCB;
+                if(labelText === false || !React.isValidElement(labelText,true)) return;
+                customMenu.push({
+                    ...rest,
+                    label : labelText,
+                    onPress : (event)=>{
+                        if(typeof onPress =='function'){
+                            return onPress({...React.getOnPressArgs(event),...args})
+                        }
+                    }
+                })
+            }
+        });
+        return customMenu;
+    }
     /*** aller à la dernière page */
     _goToLastPage(){
         let { start,limit} = this._pagination;
@@ -913,7 +951,7 @@ export default class CommonDatagridComponent extends AppComponent {
        args = defaultObj(args);
        const filteredColumns = isObjOrArray(args.filteredColumns)?args.filteredColumns : isObjOrArray(this.state.filteredColumns) ? this.state.filteredColumns : {};
        const columns = args.columns || this.state.columns;
-       const currentSortedColumn = isObj(args.sortedColumn) && args.sortedColumn.column? args.sortedColumn : defaultObj(this.state.sort);
+       const currentSortedColumn = isObj(args.sortedColumn) && args.sortedColumn.column? args.sortedColumn : defaultObj(this.sortRef.current);
        const visibleColumns = [],headerFilters = [],visibleColumnsNames={};
        const sortable = defaultBool(this.props.sortable,true);
        const sortedColumns = {};
@@ -1072,7 +1110,7 @@ export default class CommonDatagridComponent extends AppComponent {
    }
    getPaginatedSelectedRows(data){
         data = isArray(data)? data : this.INITIAL_STATE.data;
-        if(JSON.stringify(this._previousSortObj) !== JSON.stringify(this._sort || JSON.stringify(this._previousPagination) !== JSON.stringify(this._pagination)) && this.getPaginatedData().length !== data.length){
+        if(JSON.stringify(this._previousSortObj) !== JSON.stringify(this.sortRef.current) || JSON.stringify(this._previousPagination) !== JSON.stringify(this._pagination) && this.getPaginatedData().length !== data.length){
             return {};
         }
         return this.selectedRows;
@@ -1107,10 +1145,10 @@ export default class CommonDatagridComponent extends AppComponent {
             });
             data = newData;
         }      
-        if(this.isDatagrid() && isNonNullString(this._sort.column)){
-            if(isObj(this.state.columns) && this.state.columns[this._sort.column]){
-                let field = this.state.columns[this._sort.column];
-                const cfg = Object.assign({},this._sort);
+        if(this.canAutoSort() && isNonNullString(this.sortRef.current.column)){
+            if(isObj(this.state.columns) && this.state.columns[this.sortRef.current.column]){
+                let field = this.state.columns[this.sortRef.current.column];
+                const cfg = Object.assign({},this.sortRef.current);
                 cfg.getItem = (item,columnName,{getItem})=>{
                     if(isObj(item) && (field.type =='decimal' || field.type =="number")){
                         const v = item[columnName];
@@ -1131,7 +1169,7 @@ export default class CommonDatagridComponent extends AppComponent {
         } else if(force){
             this.setSelectedRows();
         }
-        const state = {data,sort : this._sort};
+        const state = {data};
         if((cb)){
             cb(state);
         }
@@ -1320,7 +1358,7 @@ export default class CommonDatagridComponent extends AppComponent {
             this._pagination.start = 0;
         }
         this.filtersSelectors = {selector:this.getFilters()};
-        return this.fetchData({force:true,fetchOptions:this.filtersSelectors});
+        return this.fetchData({force:true,isFiltering : true,fetchOptions:this.filtersSelectors});
     }
     onSetQueryLimit(){
         if(!this.canSetQueryLimit()) return;
@@ -1334,7 +1372,7 @@ export default class CommonDatagridComponent extends AppComponent {
         this.currentDatagridQueryLimit = this.getSessionData("dataSourceQueryLimit");
         setQueryLimit(this.currentDatagridQueryLimit,(limit)=>{
             this.setSessionData("dataSourceQueryLimit",limit)
-            notify.success("Le nombre maximal d'élément a été définit à la valeur "+(limit==0?" infinit ":limit.formatNumber())+". Cette valeur sera prise en compte à la prochaine réactualisation du tableau")
+            notify.success("Le nombre maximal d'élément à récuperer par page a été définit à la valeur "+(limit==0?" infinit ":limit.formatNumber())+". Cette valeur sera prise en compte à la prochaine réactualisation du tableau")
         });
     }
     
@@ -1348,6 +1386,9 @@ export default class CommonDatagridComponent extends AppComponent {
         return 0;
     }
     canHandleQueryLimit(){
+        if(typeof this.props.handleQueryLimit ==='boolean'){
+            return this.props.handleQueryLimit;
+        }
         return true;
     }
     renderQueryLimit(content){
@@ -1357,7 +1398,7 @@ export default class CommonDatagridComponent extends AppComponent {
         let s = "";
         let canSetQ = this.canSetQueryLimit();
         if(canSetQ){
-            s = ".\nPressez pendent quelques secondes pour modifier cette valeur du nombre limite d'éléments de la liste";
+            s = ".\nPressez pendent quelques secondes pour modifier cette valeur du nombre limite d'éléments de la liste par page";
         }
         else if(isDecimal(cLImit)){
             cLImit = (" de "+cLImit.formatNumber())
@@ -1533,9 +1574,19 @@ export default class CommonDatagridComponent extends AppComponent {
     getLinesProgressBar(){
         return CommonDatagridComponent.LinesProgressBar(this.props);
     }
+    /*** si le datagrid sera sortable */
+    isSortable(){
+        return this.isDatagrid() && this.props.sortable !== false? true : false;
+    }
+    canAutoSort(){
+        return this.isSortable() && this.props.autoSort !==false ? true : false;
+    }
     isSelectableMultiple(){
         return defaultBool(this.props.selectableMultiple,true)
     }
+    getSort(){
+        return defaultObj(this.sortRef.current);
+    }
     renderHeaderCell({columnDef,columnField}){
         if(this.isSelectableColumn(columnDef,columnField)){
             return <Checkbox
@@ -1666,16 +1717,16 @@ export default class CommonDatagridComponent extends AppComponent {
              else if(_type =='select_country' || _type =='selectcountry'){
                 _render = <Flag withCode {...columnDef} length={undefined} width={undefined} height={undefined} code={defaultValue}/>
              }
-             ///le lien vers le table data se fait via une colonne de type selecttabledata ou select_tabledata ou potant l'une des propriétés foreignKeyTable ou linkToTable de type chaine de caractère non nulle
-             else if(arrayValueExists(['piece','selecttabledata','id'],_type) || isNonNullString(columnDef.linkToTable) || isNonNullString(columnDef.foreignKeyTable)){
-                let tableName = defaultStr(columnDef.linkToTable && columnDef.linkToTable,columnDef.foreignKeyTable && columnDef.foreignKeyTable,columnDef.tableName,columnDef.table).toUpperCase();
+             ///le lien vers le table data se fait via la colonne ayant la propriété foreignKeyTable de type chaine de caractère non nulle
+             else if(isNonNullString(columnDef.foreignKeyTable) || columnDef.primaryKey === true || arrayValueExists(['id','piece'],_type)){
                 const id = rowData[columnField]?.toString();
                 if(isNonNullString(id)){
                     _render = <TableLink 
-                        tableName = {tableName} 
                         id = {id}
+                        foreignKeyTable = {defaultStr(columnDef.foreignKeyTable,columnDef.table,columnDef.tableName)}
+                        foreignKeyColumn = {defaultStr(columnDef.foreignKeyColumn,columnDef.field)}
+                        {...columnDef}
                         data = {rowData}
-                        columnDef = {columnDef}
                         columnField = {columnField}
                     >
                         {rowData[columnField]}
@@ -1770,9 +1821,9 @@ export default class CommonDatagridComponent extends AppComponent {
              let fmat = defaultStr(columnDef.format).toLowerCase();
             if(fmat == "money"){
                 _render = _render.formatMoney();
-            } else if(fmat =="number") {
+            } else //if(fmat =="number") {
                 _render = _render.formatNumber();
-            }
+            //}
          }
          if(_render && isObj(renderProps)){
              let Component = defaultVal(renderProps.Component,Label);
@@ -1782,7 +1833,7 @@ export default class CommonDatagridComponent extends AppComponent {
          if(typeof _render =='boolean'){
             _render = _render ? "Oui" : "Non";
          }
-         if(typeof _render ==='string' || typeof _render =='decimal'){
+         if(typeof _render ==='string' || typeof _render =='number'){
              _render = <Label selectable>{_render}</Label>
          }
          _render = React.isValidElement(_render)|| Array.isArray(_render)?_render:null;
@@ -1950,6 +2001,14 @@ CommonDatagridComponent.propTypes = {
     /*** pour le rendu du footer, pied de page en affichage accordion */
     sessionName : PropTypes.string,
     onFetchData : PropTypes.func,
+    handleQueryLimit : PropTypes.bool, ///si le datagrid devra gérer les queryLimit
+    /**** les menus customisés à ajouter au composant Datagrid */
+    customMenu : PropTypes.oneOfType([
+        PropTypes.arrayOf(PropTypes.object),
+        PropTypes.objectOf(PropTypes.object),
+    ]),
+    /**** la fonction permettant de faire le rendu dun contenu paginé, personalisé */
+    renderCustomPagination : PropTypes.func,
     getActionsArgs : PropTypes.func,//fonction permettant de récupérer les props supplémentaires à passer aux actions du datagrid
 }
 

package/src/components/Datagrid/Common/TableData.js

@@ -60,7 +60,7 @@ export default class CommonTableDatagrid extends CommonDatagrid{
         la table dans la base common.
         Elle pourra éventuellement passer directement la limite et les filtres à la fonction fetchdata
     */
-    fetchData ({cb,callback,force,fetchOptions}){
+    fetchData ({cb,callback,force,fetchOptions,...rest}){
         if(!this._isMounted()) return Promise.resolve(this.state.data);
         if(this.isFetchingData) {
             if(!isPromise(this.fetchingPromiseData)){
@@ -82,7 +82,7 @@ export default class CommonTableDatagrid extends CommonDatagrid{
                 fetchOptions.dataSources = this.currentDataSources;
                 fetchOptions = extendObj(true,true,{},fetchOptions,{selector : fetchFilters});
                 fetchOptions.dataSources = this.currentDataSources;
-                fetchOptions.sort = this.state.sort;
+                fetchOptions.sort = this.getSort();
                 let limit = this.getQueryLimit();
                 if(limit > 0 && !this.isPivotDatagrid()){
                     fetchOptions.limit = limit;
@@ -92,7 +92,7 @@ export default class CommonTableDatagrid extends CommonDatagrid{
                     }
                 }
                 this.beforeFetchData(fetchOptions);
-                if(typeof this.props.beforeFetchData =='function' && this.props.beforeFetchData({context:this,force,fetchOptions,options:fetchOptions}) === false){
+                if(typeof this.props.beforeFetchData =='function' && this.props.beforeFetchData({...rest,context:this,force,fetchOptions,options:fetchOptions}) === false){
                     this.isFetchingData = false;
                     return resolve(this.state.data);
                 }

package/src/components/Datagrid/SWRDatagrid.js

@@ -7,6 +7,8 @@
  */
 import Datagrid from "./IndexComponent";
 import {defaultStr,defaultObj,defaultVal,isObjOrArray,isObj,extendObj} from "$utils";
+import {Pressable} from "react-native";
+import SimpleSelect from "$ecomponents/SimpleSelect";
 import React from "$react";
 import Auth from "$cauth";
 import DateLib from "$lib/date";
@@ -22,6 +24,9 @@ import appConfig from "$capp/config";
 import APP from "$capp/instance";
 import cAction from "$cactions";
 import PropTypes from "prop-types";
+import {isDesktopMedia} from "$dimensions";
+import ActivityIndicator from "$ecomponents/ActivityIndicator";
+import {Menu} from "$ecomponents/BottomSheet";
 
 const timeout = 5000*60*60;
 export const swrOptions = {
@@ -31,7 +36,9 @@ export const swrOptions = {
     errorRetryInterval : timeout*2,
     errorRetryCount : 5,
 }
-
+const getDefaultPaginationRowsPerPageItems = ()=>{
+    return [5,10,15,20,25,30,40,50,60,80,100,500,1000,...(isDesktopMedia() ? [1500,2000,2500,3000,3500,4000,4500,5000,10000]:[])];
+}
 /****la fonction fetcher doit toujours retourner : 
  *  1. la liste des éléments fetchés dans la props data
  *  2. le nombre total d'éléments de la liste obtenue en escluant les clause limit et offset correspondant à la même requête
@@ -53,10 +60,14 @@ const SWRDatagridComponent = React.forwardRef((props,ref)=>{
         fetchData,
         fetchPath,
         fetcher,
+        ListFooterComponent,
+        testID,
+        autoSort,
         ...rest
     } = props;
     rest = defaultObj(rest);
     rest.exportTableProps = defaultObj(rest.exportTableProps)
+    const firstPage = 1;
     const tableName = defaultStr(table.tableName,table.table).trim().toUpperCase();
     canMakePhoneCall = defaultBool(canMakePhoneCall,table.canMakePhoneCall);
     makePhoneCallProps = defaultObj(makePhoneCallProps,rest.makePhoneCallProps,table.makePhoneCallProps);
@@ -98,13 +109,33 @@ const SWRDatagridComponent = React.forwardRef((props,ref)=>{
     const hasResultRef = React.useRef(false);
     const totalRef = React.useRef(0);
     const isFetchingRef = React.useRef(false);
+    const pageRef = React.useRef(1);
+    const limitRef = React.useRef(500);
+    const isInitializedRef = React.useRef(false);
+    testID = defaultStr(testID,"RNSWRDatagridComponent")
     const {error, isValidating,isLoading,refresh} = useSWR(fetchPath,{
         fetcher : (url,opts)=>{
+            if(!isInitializedRef.current) {
+                isFetchingRef.current = false;
+                return;
+            }
             opts = extendObj({},opts,fetchOptionsRef.current);
             opts.queryParams = defaultObj(opts.queryParams);
             opts.queryParams.withTotal = true;
+            opts.queryParams.limit = limitRef.current;
+            opts.queryParams.page = pageRef.current -1;
+            if(isObj(opts.sort)){
+                opts.queryParams.sort = opts.sort;
+            }
             const fetchCB = ({data,total})=>{
                 totalRef.current = total;
+                /***
+                 * if(pageRef.current ===firstPage){
+                        dataRef.current = data;
+                    } else {
+                        dataRef.current = prevPage != pageRef.current ? (isObj(data)?{...dataRef.current,...data}:[...dataRef.current,...data]) : data;
+                    }
+                 */
                 dataRef.current = data;
                 hasResultRef.current = true;
                 return data;
@@ -146,6 +177,41 @@ const SWRDatagridComponent = React.forwardRef((props,ref)=>{
         };
         refresh();
     }
+    const canPagninate = ()=>{
+        if(typeof totalRef.current !=='number' || typeof pageRef.current !='number' || typeof limitRef.current !='number') return false;
+        if(limitRef.current <= 0) return false;
+        return true;
+    }
+    const getTotalPages = ()=>{
+        if(!canPagninate()) return false;
+        return Math.ceil(totalRef.current / limitRef.current);;
+    };
+    const getNextPage = ()=>{
+        if(!canPagninate()) return false;
+        const totalPages = getTotalPages();
+        let nPage = pageRef.current+1;
+        if(nPage > totalPages){
+            nPage  = totalPages;
+        }
+        if(nPage === pageRef.current){
+            return false;
+        }
+        return nPage;
+    },getPrevPage = ()=>{
+        if(!canPagninate()) return false;
+        let pPage = pageRef.current - 1;
+        if(pPage < firstPage){
+            pPage  = firstPage;
+        }
+        if(pPage === pageRef.current){
+            return false;
+        }
+        return pPage;
+    }, canSortRemotely = ()=>{
+        if(!canPagninate() || autoSort === true) return false;
+        ///si le nombre total d'élements est inférieur au nombre limite alors le trie peut être fait localement
+        return totalRef.current > limitRef.current && true || false;
+    }
     React.useEffect(()=>{
         const upsert = cAction.upsert(tableName);
         const remove = cAction.remove(tableName);
@@ -159,15 +225,146 @@ const SWRDatagridComponent = React.forwardRef((props,ref)=>{
             APP.off(remove,onUpsert);
         }
     },[]);
+    const loading = (isLoading|| isValidating);
+    const pointerEvents = loading ?"node" : "auto";
     return (
         <Datagrid 
+            testID = {testID}
             {...rest}
             {...defaultObj(table.datagrid)} 
-            isLoading = {(isLoading|| isValidating) && !error && showProgressRef.current && true || false}
+            onSort = {({sort})=>{
+                if(!canSortRemotely()) return;
+                fetchOptionsRef.current.sort = sort;
+                pageRef.current = firstPage;
+                doRefresh(true);
+                return false;
+            }}
+            renderCustomPagination = {({context})=>{
+                if(!canPagninate()) return null;
+                const page = pageRef.current, totalPages = getTotalPages(), prevPage = getPrevPage(),nextPage = getNextPage();
+                const iconProp = {
+                    size : 25,
+                    style : [theme.styles.noMargin,theme.styles.noPadding],
+                }
+                const sStyle = [styles.limitStyle1,theme.styles.noPadding,theme.styles.noMargin];
+                return <View testID={testID+"_PaginationContainer"} pointerEvents={pointerEvents}>
+                    <View style={[theme.styles.row,theme.styles.w100]} pointerEvents={pointerEvents} testID={testID+"_PaginationContentContainer"}>
+                        <Menu
+                            testID={testID+"_SimpleSelect"}
+                            style = {sStyle}
+                            anchor = {(p)=>{
+                                return <Pressable style={[theme.styles.noMargin,theme.styles.noPadding]} {...p} testID={testID+"MenuSelectLimit"}>
+                                    <Label primary  testID={testID+"_Label"} style={[{fontSize:15}]}>
+                                        {limitRef.current.formatNumber()}
+                                    </Label>
+                                </Pressable>
+                            }}
+                            title = {'Limite du nombre d\'éléments par page'}
+                            items = {getDefaultPaginationRowsPerPageItems().map((item)=>{
+                                return {
+                                    text : item.formatNumber(),
+                                    icon : limitRef.current == item ? 'check' : null,
+                                    primary : limitRef.current === item ? true : false,
+                                    onPress : ()=>{
+                                        if(item == limitRef.current) return;
+                                        limitRef.current = item;
+                                        pageRef.current = firstPage;
+                                        setTimeout(() => {
+                                            doRefresh(true);
+                                        }, (500));
+                                    }
+                                }
+                            })}
+                        />
+                        <Icon
+                            ///firstPage
+                            {...iconProp}
+                            title = {"Aller à la première page"}
+                            name="material-first-page"
+                            disabled = {pageRef.current <= 1 && true || false}
+                            onPress = {()=>{
+                                if(pageRef.current <= firstPage) return;
+                                pageRef.current = firstPage;
+                                doRefresh(true);
+                            }}
+                        />
+                        <Icon
+                            //decrement
+                            {...iconProp}
+                            title = {"Aller à la page précédente {0}".sprintf(prevPage && prevPage.formatNumber()||undefined)}
+                            name="material-keyboard-arrow-left"
+                            disabled = {page === prevPage || getPrevPage() === false ? true : false}
+                            onPress = {()=>{
+                                const page = getPrevPage();
+                                if(page === false) return;
+                                if(pageRef.current === page) return;
+                                pageRef.current = page;
+                                doRefresh(true);
+                            }}
+                            
+                        />
+                        <View testID={testID+"_PaginationLabel"}>
+                            <Label style={{fontSize:15}}>
+                                {page.formatNumber()}-{totalPages.formatNumber()}{" / "}{totalRef.current.formatNumber()}
+                            </Label>
+                        </View>
+                        <Icon
+                            //increment
+                            {...iconProp}
+                            title = {"Aller à la page suivante {0}".sprintf(nextPage && nextPage.formatNumber()||undefined)}
+                            name="material-keyboard-arrow-right"
+                            disabled = {nextPage >= totalPages || getNextPage() === false ? true : false}
+                            onPress = {()=>{
+                                const page = getNextPage();
+                                if(page === false) return;
+                                if(pageRef.current === page) return;
+                                pageRef.current = page;
+                                doRefresh(true);
+                            }}
+                        />
+                        <Icon
+                            //lastPage
+                            {...iconProp}
+                            name="material-last-page"
+                            title = {"Aller à la dernière page {0}".sprintf(totalPages && totalPages.formatNumber()||undefined)}
+                            disabled = {page >= totalPages ? true : false}
+                            onPress = {()=>{
+                                const page = getTotalPages();
+                                if(pageRef.current >= page) return;
+                                pageRef.current = page;
+                                doRefresh(true);
+                            }}
+                            
+                        />
+                    </View>
+                </View>
+            }}
+            ListFooterComponent = {(props)=>{
+                const r = typeof ListFooterComponent =='function'? ListFooterComponent(props) : null;
+                if(!loading) return r;
+                const aContent = <View testID={testID+"_ListHeaderActivityIndicator"} style={[theme.styles.w100,theme.styles.justifyContentCenter]}>
+                    <ActivityIndicator color={theme.colors.primary}/>
+                </View>;
+                if(r){
+                    return <View testID={testID+"_ListHeaderContainer"} style={[theme.styles.w100]}>
+                        {r}
+                        {aContent}
+                    </View>
+                }
+                return aContent;
+            }}
+            handleQueryLimit = {false}
+            handlePagination = {false}
+            autoSort = {canSortRemotely()? false : true}
+            isLoading = {loading && !error && showProgressRef.current && true || false}
             beforeFetchData = {({fetchOptions:opts,force})=>{
                 opts.fields = fetchFields;
                 opts = getFetchOptions({showError:showProgressRef.current,...opts});
+                isInitializedRef.current = true;
                 fetchOptionsRef.current = opts;
+                if(force){
+                    pageRef.current = firstPage;
+                }
                 doRefresh(force);
                 return false;
             }}
@@ -218,6 +415,11 @@ const styles = StyleSheet.create({
     labelTitle: {
         fontSize : 18,
     },
+    limitStyle : {
+        backgroundColor:'transparent',
+        width:50,
+        height : 35,
+    },
     emptyText : {
         fontSize : 16,
         fontWeight : 'bold',

package/src/components/Datagrid/Table/index.js

@@ -111,7 +111,10 @@ const DatagridFactory = (Factory)=>{
             }
         }
         render(){
-            let {title,testID,actions,selectableMultiple,sortable,exportable,
+            let {title,testID,actions,selectableMultiple,
+                sortable,
+                autoSort,
+                exportable,
                 selectable,pagin,showPagination,
                 sessionName,onMount,onUnmount,onFetchData,dataSourceSelector,dataSourceSelectorProps,queryLimit,
                 filters,
@@ -138,7 +141,6 @@ const DatagridFactory = (Factory)=>{
                 _dataSourceSelector = null;
             }
             exportable = defaultBool(exportable,true);
-            sortable = defaultVal(sortable,true);
             let isMobile = isMobileOrTabletMedia();
             selectable = defaultVal(selectable,true);
             selectableMultiple = defaultBool(selectableMultiple,true);
@@ -170,20 +172,21 @@ const DatagridFactory = (Factory)=>{
             if(selectableMultiple && max && defaultBool(this.props.selectableMultiple,true)){
                 max = max.formatNumber();
                 restItems = [
-                    {
-                        text : "Sélect "+max,
+                    ...this.renderCustomMenu(),
+                    ...(selectableMultiple ? [{
+                        label : "Sélect "+max,
                         icon : "select-all",
                         onPress : (x,event)=>{
                             this.handleAllRowsToggle(true);
                         }
                     },
                     {
-                        text : "Tout désélec",
+                        label : "Tout désélec",
                         onPress : (x,event)=>{
                             this.handleAllRowsToggle(false);
                         },
                         icon : "select"
-                    }
+                    }] : [])
                 ]
             }   
             const rPagination = showPagination ? <View style={[styles.paginationContainer]}>
@@ -192,6 +195,7 @@ const DatagridFactory = (Factory)=>{
                         <View testID={testID+"_HeaderQueryLimit"}>
                             {this.renderQueryLimit(this.state.data.length.formatNumber())}
                         </View>
+                        {this.renderCustomPagination()}
                         {!isMobile && <>
                             <Button normal style={[styles.paginationItem]} icon = {"refresh"} onPress = {this.refresh.bind(this)}>
                                 Rafraichir
@@ -214,19 +218,15 @@ const DatagridFactory = (Factory)=>{
                             >   
                                     {showFooters?'Masquer/Ligne des totaux':'Afficher/Ligne des totaux'}
                             </Button>:null}
-                            {selectableMultiple && (<>
-                                {restItems.map((item,index)=>{
-                                    return <Button 
-                                        normal
-                                        style={styles.paginationItem}
-                                        key = {index}
-                                        icon = {item.icon}
-                                        onPress = {item.onPress}                                    
-                                    >
-                                        {item.text}
-                                    </Button>
-                                })}
-                            </>)}
+                            {restItems.map((item,index)=>{
+                                return <Button 
+                                    normal
+                                    key = {index}
+                                    {...item}
+                                    style={[styles.paginationItem,item.style]}
+                                    children = {item.children|| item.label}
+                                />
+                             })}
                         </>}
                         {exportable && (
                             <>{/**
@@ -320,6 +320,7 @@ const DatagridFactory = (Factory)=>{
                 </View>
                 <Table
                     ref = {this.listRef}
+                    {...rest}
                     hasFooters = {hasFooterFields}
                     showFilters = {showFilters}
                     showFooters = {showFooters}

package/src/components/TableLink/index.js

@@ -11,34 +11,55 @@ import {defaultStr,isPromise,defaultObj} from "$utils";
 import {open as openPreloader,close as closePreloader} from "$preloader";
 import {styles as _styles} from "$theme";
 import Tooltip from "$ecomponents/Tooltip";
+import {navigateToTableData} from "$enavigation/utils";
+import Auth from "$cauth";
+import fetch from "$capi/fetch";
 
 const TableLinKComponent = React.forwardRef((props,ref)=>{
-    let {disabled,labelProps,server,containerProps,id,columnDef,tableName,table:customTable,data,testID,Component,routeName,routeParams,component,primary,triggerProps,onPress,children, ...rest} = props;
+    let {disabled,readOnly,labelProps,server,containerProps,perm,id,fetchForeignData,foreignKeyTable,foreignKeyColumn,data,testID,Component,routeName,routeParams,component,primary,triggerProps,onPress,children, ...rest} = props;
     testID = defaultStr(testID,"RN_TableDataLinkContainer")
-    tableName = defaultStr(tableName,customTable).trim();
+    foreignKeyTable = defaultStr(foreignKeyTable).trim();
+    foreignKeyColumn = defaultStr(foreignKeyColumn).trim();
     rest = defaultObj(rest);
     containerProps = defaultObj(containerProps)
     labelProps = defaultObj(labelProps);
-    columnDef = defaultObj(columnDef);
     data = defaultObj(data);
     id = defaultStr(id);
-    if(!id){
-        disabled = true;
+    if(!id || !foreignKeyTable){
+        readOnly = true;
     }
-    const pointerEvents = disabled || !id? 'none' : 'auto';
+    const pointerEvents = disabled || readOnly || !id? 'none' : 'auto';
     const onPressLink = (event)=>{
         React.stopEventPropagation(event);
-        const r = typeof onPress =='function'? onPress({...React.getOnPressArgs(event),...columnDef,tableName,table:tableName,data,id,value:id,}) : undefined;
+        if((isNonNullString(perm) && !Auth.isAllowedFromString(perm)) || !Auth.isTableDataAllowed({table:foreignKeyTable,action:'read'})){
+            return;
+        }
+        const args = {...React.getOnPressArgs(event),...rest,fetch,foreignKeyTable,foreignKeyColumn,data,id,value:id};
+        let r = typeof onPress =='function'? onPress(args) : undefined;
+        if(r === false) return;
+        const cb = (a)=>{
+            const r2 = typeof fetchForeignData === 'function'? fetchForeignData({...args,...defaultObj(a)}) : undefined;
+            if(isPromise(r2)){
+                return r2.then((data)=>{
+                    if(isObj(data) && data[foreignKeyColumn] !== undefined){
+                        navigateToTableData({tableName:foreignKeyTable,data});
+                    }
+                });
+            }
+            return Promise.reject({msg:'type de données retournée par la fonction fetchForeignKeyData invalide'});
+        }
+        openPreloader("traitement de la requête...");
         if(isPromise(r)){
-            openPreloader("traitement de la requête...");
-            r.finally(closePreloader);
+            r.then(cb).finally(closePreloader);
+        } else {
+            cb().finally(closePreloader);
         }
     }
     rest.style = [rest.style,_styles.cursorPointer];
-    const CP = disabled ? View : TouchableOpacity;
+    const CP = disabled || readOnly ? View : TouchableOpacity;
     return <CP testID={testID} onLongPres={(e)=>React.stopEventPropagation(e)} {...containerProps} onPress={disabled? undefined : onPressLink} style={[styles.container,containerProps.style]}>
-        <Tooltip testID={testID+"_Tooltip"} {...rest} Component={Component}  onPress={disabled?undefined:onPressLink} ref={ref} pointerEvents={pointerEvents} disabled = {disabled}>
-            <Label testID={testID+"_Label"} underlined primary {...labelProps} style={[_styles.lh15,labelProps.style]} disabled={disabled}>{children}</Label>
+        <Tooltip testID={testID+"_Tooltip"} {...rest} Component={Component}  onPress={disabled || readOnly?undefined:onPressLink} ref={ref} pointerEvents={pointerEvents} readOnly={readOnly} disabled = {disabled}>
+            <Label testID={testID+"_Label"} underlined primary {...labelProps} style={[_styles.lh15,labelProps.style]} disabled={disabled} readOnly={readOnly}>{children}</Label>
         </Tooltip>
     </CP>
 });
@@ -47,6 +68,9 @@ export default TableLinKComponent;
 
 
 TableLinKComponent.propTypes = {
+    foreignKeyColumn : PropTypes.string.isRequired,//le nom de la colonne de la clé étrangère
+    foreignKeyTable : PropTypes.string.isRequired, //le nom de la table référencée
+    fetchForeignData : PropTypes.func, // la fonction permettant de chercher la données à distance
     server : PropTypes.string,//le serveur sur lequel rechercher les données
     primary : PropTypes.bool,//si le composant sera stylé en theme primary de react
     ///les props à utiliser pour afficher la table de données en cas de click sur le lien

package/src/layouts/DatabaseStatistics/DatabaseStatistic.js

@@ -13,10 +13,8 @@ import cActions from "$cactions";
 import {View} from "react-native";
 
 export default function DatabaseStatisticContainer (props){
-    const [state,setState] = React.useState({
-        isLoading : true,
-        count : 0,
-    });
+    const [count,setCount] = React.useState(0);
+    const [isLoading,setIsLoading] = React.useState(true);
     let {table,fetchCount,index,testID,title,icon,onPress} = props;
     title = defaultStr(title)
     table = defaultObj(table);
@@ -28,14 +26,14 @@ export default function DatabaseStatisticContainer (props){
     const refresh = ()=>{
         if(refreshingRef.current || !isMounted()) return;
         refreshingRef.current = true;
+        setIsLoading(true);
         setTimeout(()=>{
            fetchCount().then((count)=>{
-                setState({...state,isLoading:false,count});
+                setCount(count);
+                setIsLoading(false);
                 refreshingRef.current = false;
             }).catch((e)=>{
-                setState({
-                    isLoading : false, count : 0,
-                });
+                setIsLoading(false);
                 refreshingRef.current = false;
             });
         },100);
@@ -50,10 +48,6 @@ export default function DatabaseStatisticContainer (props){
             APP.off(cActions.remove(tableName),refresh);
         }
     },[]);
-    React.useEffect(()=>{
-        //refresh();
-    },[props])
-    const {isLoading,count} = state;
     return <Item
         testID = {defaultStr(testID,"RN_DatabaseStatistic_"+table)}
         onPress = {(args)=>{
@@ -65,7 +59,6 @@ export default function DatabaseStatisticContainer (props){
         left = {(aProps)=>{
             return <Avatar suffix={index} {...aProps} icon= {icon} size={40} label={title}/>
         }}
-        //right = {(rP)=><Icon {...rP} name='refresh' onPress={refresh}/>}
         title = {<Label splitText numberOfLines={1} primary style={[{fontSize:15}]}>{title}</Label>}
         titleProps = {{primary : true}}
         description = {isLoading?<View style={[theme.styles.justifyContentFlexStart,theme.styles.alignItemsFlexStart]}>

package/src/layouts/Screen/TableData.js

@@ -29,6 +29,43 @@ const DEFAULT_TABS_KEYS = "main-tabs";
 
 const TIMEOUT = 50;
 
+const checkPrimary = (data,f)=>{
+    return !(!(f in data) || (data[f] == null) || (!data[f] && typeof data !=='number'));
+}
+/*** vérifie si le document passé en paramètre est éditable
+ * @param {object} data la données à vérifier
+ * @param {object| array} les champs sur lesquels se baser pour vérifier si la donénes est une mise à jour
+ * @param {func} checkPrimaryKey la foncition permettant de vérifier s'il s'agit d'une clé primaire pour la données courante
+ */
+export const isDocEditing = (data,fields,checkPrimaryKey)=>{
+    if(!isObj(data) || !isObjOrArray(fields)) return false;
+    
+            let hasPrimaryFields = false;
+            let hasValidated = true;
+            for(let i in fields){
+                const field = fields[i];
+                if(typeof checkPrimaryKey =='function') {
+                    hasPrimaryFields = true;
+                    if(checkPrimaryKey({field,i,index:i,data}) === false){
+                        return false;
+                    }
+                    continue;
+                }
+                if(!isObj(field)) continue;
+                hasPrimaryFields = true;
+                const f = defaultStr(field.field,i);
+                if(field.primaryKey === true){
+                    if(!checkPrimary(data,f)){
+                        hasValidated = false;
+                    }
+                }
+            }
+            if(hasPrimaryFields){
+                return hasValidated;
+            }
+    return false;
+}
+
 export default class TableDataScreenComponent extends FormDataScreen{
     constructor(props){
         super(props);
@@ -49,7 +86,7 @@ export default class TableDataScreenComponent extends FormDataScreen{
         Object.map(table.fields,(field,i)=>{
             if(isObj(field) && field.form !== false){
                 fields[i] = Object.clone(field);
-                if(field.primary === true){
+                if(field.primaryKey === true){
                     primaryKeyFields[field.field || i] = true;
                 }
             } else {
@@ -420,17 +457,9 @@ export default class TableDataScreenComponent extends FormDataScreen{
     isDocEditing(data){
         data = defaultObj(data);
         if(!this.isDocEditingProp){
-            let hasPrimaryFields = false;
-            let hasValidated = true;
-            Object.map(this.primaryKeyFields,(v,f)=>{
-                hasPrimaryFields = true;
-                if(!(f in data) || (data[f] == null) || (!data[f] && typeof data !=='number')){
-                    hasValidated = false;
-                }
-            });
-            if(hasPrimaryFields){
-                return hasValidated;
-            }
+            if(isDocEditing(data,this.primaryKeyFields,({index:field,data})=>{
+                return checkPrimary(data,field);
+            })) return true;
         }
         return super.isDocEditing(data);
     }
@@ -448,7 +477,7 @@ export default class TableDataScreenComponent extends FormDataScreen{
         if(this.cloneProp && this.cloneProp(data,this) === false) return data;
         this.showPreloader();
         delete data.approved;
-        Object.map(['_rev',...generatedColumnsProperties,'_id','code','updateBy','updatedDate','createBy','updatedHour','createdHour','createdDate'],(idx)=>{
+        Object.map(['_rev',...generatedColumnsProperties,...Object.keys(this.primaryKeyFields),'_id','code','updateBy','updatedDate','createBy','updatedHour','createdHour','createdDate'],(idx)=>{
             data[idx] = undefined;
             delete data[idx];
         });