@fto-consult/expo-ui 2.14.0 → 2.14.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fto-consult/expo-ui",
-  "version": "2.14.0",
+  "version": "2.14.2",
   "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,

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 =  {}
@@ -309,7 +309,7 @@ export default class CommonDatagridComponent extends AppComponent {
     }
     canPaginateData(){
         if(this.props.handlePagination === false) return false;
-        return false;
+        return this.isDatagrid();
     }
     getFiltersProps(){
         return this.props.filters;
@@ -689,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;
         }
@@ -703,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;
@@ -720,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);
         });
@@ -948,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 = {};
@@ -1107,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;
@@ -1142,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];
@@ -1166,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);
         }
@@ -1571,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
@@ -1705,11 +1718,13 @@ export default class CommonDatagridComponent extends AppComponent {
                 _render = <Flag withCode {...columnDef} length={undefined} width={undefined} height={undefined} code={defaultValue}/>
              }
              ///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)){
+             else if(isNonNullString(columnDef.foreignKeyTable) || columnDef.primaryKey === true || arrayValueExists(['id','piece'],_type)){
                 const id = rowData[columnField]?.toString();
                 if(isNonNullString(id)){
                     _render = <TableLink 
                         id = {id}
+                        foreignKeyTable = {defaultStr(columnDef.foreignKeyTable,columnDef.table,columnDef.tableName)}
+                        foreignKeyColumn = {defaultStr(columnDef.foreignKeyColumn,columnDef.field)}
                         {...columnDef}
                         data = {rowData}
                         columnField = {columnField}
@@ -1806,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);
@@ -1818,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;

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

@@ -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;

package/src/components/Datagrid/RenderType.js

@@ -17,8 +17,8 @@ const DatagridRenderTypeComponent = (props)=>{
     const isDesk = isDesktopMedia();
     let type = defaultStr(get(typeKey),isDesk? "fixed":'accordion').toLowerCase().trim();
     const rTypes = [
-        {...getActiveProps(type,'accordion'),title:"Les éléments de liste s'affichent de manière optimisé pour téléphone mobile",code:'accordion',icon:accordionIcon,label:'Mobile',labelText:'environnement optimisé pour téléphone mobile'},
-        {...getActiveProps(type,'table'),title:"Les éléments de listes s'affichent dans un tableau rééel",code:'table',icon:tableIcon,label:'Tableau réel avec pagination'}
+        {...getActiveProps(type,'accordion'),tooltip:"Les éléments de liste s'affichent de manière optimisé pour téléphone mobile",code:'accordion',icon:accordionIcon,label:'Mobile',labelText:'environnement optimisé pour téléphone mobile'},
+        {...getActiveProps(type,'table'),tooltip:"Les éléments de listes s'affichent dans un tableau rééel",code:'table',icon:tableIcon,label:'Tableau réel avec pagination'}
     ]  
     Object.map(rendersTypes,(t,i)=>{
         if(isObj(t)){
@@ -37,10 +37,10 @@ const DatagridRenderTypeComponent = (props)=>{
         }
     });
     return <Menu
-        title = {"Type d'affichage du tableau"}
+        tooltip = {"Type d'affichage du tableau"}
         sheet
         items = {rTypes}
-        anchor = {(props)=><Icon {...props} name = {typeObj.icon} title={typeObj.title}/>}
+        anchor = {(props)=><Icon {...props} name = {typeObj.icon} tooltip={typeObj.tooltip}/>}
         onPressItem = {({item})=>{
             if(isObj(item) && item.code){
                 set(typeKey,item.code);

package/src/components/Datagrid/SWRDatagrid.js

@@ -62,6 +62,7 @@ const SWRDatagridComponent = React.forwardRef((props,ref)=>{
         fetcher,
         ListFooterComponent,
         testID,
+        autoSort,
         ...rest
     } = props;
     rest = defaultObj(rest);
@@ -123,6 +124,9 @@ const SWRDatagridComponent = React.forwardRef((props,ref)=>{
             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;
                 /***
@@ -203,6 +207,10 @@ const SWRDatagridComponent = React.forwardRef((props,ref)=>{
             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);
@@ -224,6 +232,13 @@ const SWRDatagridComponent = React.forwardRef((props,ref)=>{
             testID = {testID}
             {...rest}
             {...defaultObj(table.datagrid)} 
+            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();
@@ -324,7 +339,7 @@ const SWRDatagridComponent = React.forwardRef((props,ref)=>{
                     </View>
                 </View>
             }}
-            ListFooterComponent = {(props)=>{
+            /*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]}>
@@ -337,9 +352,10 @@ const SWRDatagridComponent = React.forwardRef((props,ref)=>{
                     </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;

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);

package/src/components/TableLink/index.js

@@ -12,9 +12,11 @@ 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,fetchForeignData,foreignKeyTable,foreignKeyColumn,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")
     foreignKeyTable = defaultStr(foreignKeyTable).trim();
     foreignKeyColumn = defaultStr(foreignKeyColumn).trim();
@@ -23,13 +25,16 @@ const TableLinKComponent = React.forwardRef((props,ref)=>{
     labelProps = defaultObj(labelProps);
     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 args = {...React.getOnPressArgs(event),...rest,foreignKeyTable,foreignKeyColumn,data,id,value:id};
+        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)=>{
@@ -51,10 +56,10 @@ const TableLinKComponent = React.forwardRef((props,ref)=>{
         }
     }
     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>
 });

package/src/layouts/Screen/TableData.js

@@ -477,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];
         });