@fto-consult/expo-ui 8.74.2 → 8.76.0

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

@@ -46,6 +46,8 @@ import ActivityIndicator from "$ecomponents/ActivityIndicator";
 import {createTableHeader,fields as pdfFields,pageHeaderMargin,sprintf as pdfSprintf} from "$cpdf";
 import {isWeb,isMobileNative} from "$cplatform";
 import { createPDF,getFields as getPdfFields } from '$expo-ui/pdf';
+import actions from '$cactions';
+import {printTableData} from "$epdf";
 
 export const TIMEOUT = 100;
 
@@ -178,13 +180,11 @@ export default class CommonDatagridComponent extends AppComponent {
             exportToExcelIsAllowed,
             renderSectionListIsAllowed,
             checkPerms : customCheckPerms,
+            tableName,
+            table,
+            dataSource,
             ...rest
         } = props;
-        if(this.bindResizeEvents()){
-            extendObj(this._events,{
-                SET_DATAGRID_QUERY_LIMIT : this.onSetQueryLimit.bind(this),
-            });
-        }
         if(this.props.resetSessionData === true){
             this.resetSessionData();
         }
@@ -230,8 +230,11 @@ export default class CommonDatagridComponent extends AppComponent {
         Object.map(displayTypes,(t,i)=>{
             if(t.isChart && !perm) return;
             allowedDisplayTypes[i] = Object.clone(t);
-        })
+        });
+        dataSource = CommonDatagridComponent.getDataSource({...props,dataSource,context:this});
+        tableName = defaultStr(tableName,table).toUpperCase();
         Object.defineProperties(this,{
+            tableName : {value:tableName,override:false,writable:false},
             layoutRef : {
                 value : React.createRef(null),
             },
@@ -347,6 +350,10 @@ export default class CommonDatagridComponent extends AppComponent {
         this.setSessionData({selectedDataSources:this.currentDataSources});
         this.persistDisplayType(this.state.displayType);
     }
+    /*** lorsque la données est modifiée */
+    onUpsertData =(arg) =>{
+        return this.refresh({force:true,renderProgressBar:false});
+    }
     /*** si l'on peut récuperer à distance, les colonnes seulement visibles */
     canFetchOnlyVisibleColumns(){
         return this.isTableData() && this.props.canFetchOnlyVisibleColumns && this.isFilterable() && true || false;
@@ -825,15 +832,21 @@ export default class CommonDatagridComponent extends AppComponent {
         }
         return copyToClipboard({...rest,isDatagrid:true,data:row,fields : this.props.columns,sessionName:defaultStr(this.props.sessionName,"datagrid")});
     }
-    
+    isPrintable(){
+        if(!this.isTableData() || this.props.printAction === false) return false;
+        if(typeof this.props.printable ==='function'){
+            return !!this.props.printable({context:this,tableName:this.tableName,table:this.tableName,context:this,isDatagrid:true,isTableData:false});
+        }
+        return this.props.printable === true;
+    }
     /*** les actions représentes les différents menus apparaissant lorsqu'une ligne est sélectionnée
      *   ou pas.
      */
     renderSelectedRowsActions(sActions){
         let {makePhoneCallProps,canMakePhoneCall,archivable} = this.props;
         const size = this.getSelectedRowsCount();
-        let r = [];
-        let endActs = [];
+        const r = [];
+        const endActs = [];
         if(size <=0) {
             return r
         };
@@ -845,6 +858,28 @@ export default class CommonDatagridComponent extends AppComponent {
         if(isFunction(selectedR)) {
             selectedR = selectedR.call(this,sArgs)
         }
+        if(this.isPrintable()){
+            const {filter:printFilter,onPress,...printAction} = defaultObj(this.props.printAction);
+            r.push({
+                icon : "printer",
+                ...printAction,
+                text : printAction.text || printAction.label || "Imprimer",
+                label : printAction.label || printAction.label || 'Imprimer',
+                onPress : (r)=>{
+                    const opts2 = {isTableData:false,context:this,isDatagrid:true,tableName:this.tableName,table:this.tableName};
+                    const args = {...React.getOnPressArgs(r),...sArgs,...opts2};
+                    if(typeof onPress =='function' && onPress(args) === false) return;
+                    const printDat = [];
+                    const filter = typeof printFilter =="function" ? printFilter : x=>true;
+                    Object.map(args.selectedRows,(row,rowKey,index)=>{
+                        if(!!!filter({...args,data:row,key:rowKey,rowData:row,index,rowIndex:index})) return;
+                        printDat.push(row); 
+                    });
+                    if(!printDat.length) return notify.error(printAction.noDataError,"Aucune données sélectionnée pour l'impression");
+                    return this.print(printDat,opts2);
+                },
+            });
+        }
         Object.map(sActions,(o,i)=>{
             if(isObj(o)){
                 let {onPress, ...rest} = o;
@@ -872,7 +907,7 @@ export default class CommonDatagridComponent extends AppComponent {
                 }
                 r.push(rest)
             }
-        })
+        });
         endActs.map((a)=>{
             r.push(a);
         })
@@ -908,7 +943,18 @@ export default class CommonDatagridComponent extends AppComponent {
         }
         return r;
     }
-
+    getTableName(){
+        return defaultStr(this.tableName,this.props.table,this.props.tableName).toUpperCase().trim();
+    }
+    print(data,options){   
+        if(!this.isPrintable()) return;
+        if(!isObj(data) && !Array.isArray(data)) return;
+        const opts = {...defaultObj(options),tableName:this.getTableName(),table:this.getTableName(),isTableData:false,isDatagrid:true,context:this};
+        if(typeof this.props.print ==='function'){
+            return this.props.print.call(this,data,opts);
+        } 
+        return printTableData(data,opts);
+    }
     /*** le trie du tableau prend en paramètre 
         : le nom de la colonne de trie, la direction de la conne de trie
         par défaut, le trie se fait en ignorant la casse
@@ -3595,12 +3641,38 @@ export default class CommonDatagridComponent extends AppComponent {
     }
     componentDidMount(){
         super.componentDidMount();
+        extendObj(this._events,{
+            SET_DATAGRID_QUERY_LIMIT : this.onSetQueryLimit.bind(this),
+        });
         APP.on(APP.EVENTS.SET_DATAGRID_QUERY_LIMIT,this._events.SET_DATAGRID_QUERY_LIMIT);
+        if(isNonNullString(this.tableName)){
+            extendObj(this._events,{
+                onUpsertData : this.onUpsertData.bind(this),
+            });
+            this.onUpsertDataSubscription = APP.on(actions.upsert(this.tableName),this._events.onUpsertData);
+            this.onRemoteDataSubscription = APP.on(actions.remove(this.tableName),this._events.onUpsertData);
+        }
+        if(isNonNullString(this.tableName)){
+            this.fetchData({force:true});
+        }
     }
     componentWillUnmount(){
         super.componentWillUnmount();
+        if(isNonNullString(this.tableName)){
+            if(typeof this.onUpsertDataSubscription?.remove =="function"){
+                this.onUpsertDataSubscription.remove();
+            }
+            if(this._events.onUpsertData){
+                APP.off(actions.upsert(this.tableName),this._events.onUpsertData);
+                APP.off(actions.remove(this.tableName),this._events.onUpsertData);
+            }
+            if(typeof this.onRemoteDataSubscription?.remove =="function"){
+                this.onRemoteDataSubscription.remove();
+            }
+        }
         APP.off(APP.EVENTS.SET_DATAGRID_QUERY_LIMIT,this._events.SET_DATAGRID_QUERY_LIMIT);
         this.clearEvents();
+        this.setSelectedRows();
     }
 
     /*** s'il s'agit d'un datagrid virtualisé, ie à utiliser le composant react-base-table */
@@ -3731,7 +3803,7 @@ export default class CommonDatagridComponent extends AppComponent {
         return "auto";
     }
     isTableData(){
-        return false;
+        return isNonNullString(this.tableName);
     }
     UNSAFE_componentWillReceiveProps(nextProps){
         if(false && !React.areEquals(this.props.columns,nextProps.columns)){
@@ -3894,6 +3966,10 @@ export default class CommonDatagridComponent extends AppComponent {
     getRowsKeysIndexes(){
         return Array.isArray(this.rowsKeysIndexes) ? this.rowsKeysIndexes : [];
     }
+    /****
+        attention cette fonction est uniquement valide lorsque les données ne sont pas groupées
+        Lorsque les données sont groupées, cette fonction est inutile
+    */
     getRowKeyByIndex(rowIndex){
         if(typeof rowIndex !='number') return undefined;
         const idx = this.getRowsKeysIndexes();
@@ -4033,7 +4109,12 @@ CommonDatagridComponent.propTypes = {
     /*** si le pied de page sera affiché */
     showFooters : PropTypes.bool,
     /*** les donnnées peuvent être soient retournées par une fonction, soit par un tableau soit une promesse */
-    data : PropTypes.oneOfType([PropTypes.array, PropTypes.func,PropTypes.object]),//.isRequired,
+    data : PropTypes.oneOfType([
+        PropTypes.func,
+        PropTypes.string,
+        PropTypes.object,
+        PropTypes.array,
+    ]),
     /****
         la prop column def contient dans la propriété datagrid, la prop maxItemsToRender, le nombre d'items maximal à rendre pour le composant de type select table data multiple
         la prop column def de la colonne de type number, qui contient dans la prop datagrid, la fonction render doit retourner un nombre pour otenir les valeur léie à ladite colonne
@@ -4242,6 +4323,21 @@ CommonDatagridComponent.propTypes = {
     abreviateValues : PropTypes.bool, //si les valeurs numériques seront abregées
     handleTitle : PropTypes.bool,//si le titre du datagrid, props title, sera pris en compte dans les actions du datagrid, pour le rendu du DataSourceSelector, fonction renderDataSourceSelector
     checkPerms : PropTypes.func,//la fonction utilisée pour vérifier les permissions de l'utilisateur
+    printAction : PropTypes.oneOfType([
+        PropTypes.bool,
+        PropTypes.shape({
+            label : PropTypes.any,
+            text  : PropTypes.any,
+            icon : PropTypes.any,
+            onPress : PropTypes.func, //({selectedRows,context,.....})=><boolean | any>,
+            filter : PropTypes.func,//la fonction permettant de filtrer les données à imprimer,
+            noDataError : PropTypes.oneOfType([ //le message d'erreur lorsque aucune données n'a été selectionnée pour l'impression
+                PropTypes.string, 
+                PropTypes.object,
+            ]),
+            ///....rest, les options similaires à celles du composant Menu où de l'AppBar en fonction des cas
+        }), //les props à passer à l'action d'impression du datagrid
+    ]), //si l'action d'impression sera affiché dans le datagrid
 }
 
 const styles = StyleSheet.create({

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

@@ -1,8 +1,4 @@
 export {default} from "./Common";
 
-export {default as TableData} from "./TableData";
-
-export {default  as factory} from "./factory";
-
 export {default as session} from "./session";
 export * from "./utils";

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

@@ -1,4 +1,4 @@
-import {TableData} from "../Common";
+import Datagrid from "../Common";
 import {defaultObj,defaultArray,defaultStr,defaultNumber} from "$cutils";
 import View from "$ecomponents/View";
 import { StyleSheet,Dimensions,Pressable } from "react-native";
@@ -9,7 +9,7 @@ import { chartTypes } from "../Common/Common";
 import theme from "$theme";
 import FiltersAccordionComponent from "../Accordion/Filters";
 
-export default class DatagridDashboard extends TableData {
+export default class DatagridDashboard extends Datagrid {
     constructor(props){
         super(props);
         Object.map(this.displayTypes,(t,i)=>{
@@ -121,10 +121,9 @@ export default class DatagridDashboard extends TableData {
 DatagridDashboard.displayName = "DatagridDashboardComponent";
 
 DatagridDashboard.propTypes = {
-    ...defaultObj(TableData.propTypes),
+    ...defaultObj(Datagrid.propTypes),
 }
 
-
 const styles = StyleSheet.create({
     paginationContainer : {
         flexDirection : 'row',

package/src/components/Datagrid/IndexComponent.js

@@ -2,8 +2,8 @@
 // Use of this source code is governed by a BSD-style
 // license that can be found in the LICENSE file.
 
-import Accordion,{ TableData as TableDataAccordion} from "./Accordion";
-import Table,{TableData as DatagridTableData} from "./Table";
+import Accordion from "./Accordion";
+import Table from "./Table";
 import {isDesktopMedia,isMobileMedia} from "$cplatform/dimensions";
 import {isFunction,defaultVal,defaultStr} from "$cutils";
 import React from "$react";
@@ -13,18 +13,17 @@ import useExpoUI from "$econtext/hooks";
 
 const DatagridMainComponent = React.forwardRef((props,ref)=>{
     const isDesk = isDesktopMedia();
-    const isMob = defaultStr(isMobileMedia());
+    const isMob = isMobileMedia();
     const {components:{datagrid}} = useExpoUI();
-    const isTableData = typeof props.isTableData =='boolean'? props.isTableData  : defaultStr(props.tableName,props.table).trim() || typeof props.fetchData ==='function'?true : false;
     const rType = defaultStr(getRenderType()).toLowerCase().trim();
     const renderType = defaultStr(rType && ['table','accordion'].includes(rType) ? rType : "",isDesk? "table":'accordion').trim().toLowerCase();
     const canRenderAccordion = (isFunction(props.accordion) || (isObj(props.accordionProps) && isFunction(props.accordionProps.accordion)) || props.accordion === true);
     const Component = React.useMemo(()=>{
         if((renderType == 'accordion' || (renderType !=='table' && isMob)) && canRenderAccordion){
-            return isTableData ? TableDataAccordion : Accordion;
+            return Accordion;
         }
-        return isTableData ? DatagridTableData : Table;
-    },[isTableData,renderType,canRenderAccordion,isMob])
+        return Table;
+    },[renderType,canRenderAccordion,isMob]);
     return <Component
         {...datagrid}
         {...props}
@@ -37,6 +36,6 @@ export default DatagridMainComponent;
 DatagridMainComponent.displayName = "DatagridMainComponent";
 
 DatagridMainComponent.propTypes = {
-    ...DatagridTableData.propTypes
+    ...Table.propTypes
 }
-DatagridMainComponent.LinesProgressBar = DatagridMainComponent.LineProgressBar = DatagridTableData.LineProgressBar;
+DatagridMainComponent.LinesProgressBar = DatagridMainComponent.LineProgressBar = Table.LineProgressBar;