@fto-consult/expo-ui 2.11.4 → 2.12.0

package/babel.config.alias.js

@@ -38,6 +38,10 @@ module.exports = (opts)=>{
     r["$expo"] = r["$expo-ui"] = expo;
     r["$epreloader"] = path.resolve(expo,"components/Preloader");
     r["$eform"] = path.resolve(expo,"components","Form");
+
+    //l'alias $extendFormFields, pour étendre les formFields qu'on veut définir
+    r["$extendFormFields"] = r["$extendFormFields"] || path.resolve(r["$eform"],"Fields","$extendFormFields")
+    
     r["$form"] = r["$form"] || r["$eform"];
     r["$eform-data"] = r["$eformData"]= path.resolve(expo,"components","Form","FormData");
     r["$formData"] = r["$formData"] || r["$eformData"];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fto-consult/expo-ui",
-  "version": "2.11.4",
+  "version": "2.12.0",
   "description": "Bibliothèque de composants UI Expo,react-native",
   "main": "index.js",
   "scripts": {
@@ -65,7 +65,7 @@
     "@expo/metro-config": "^0.4.0",
     "@expo/vector-icons": "^13.0.0",
     "@expo/webpack-config": "^0.17.2",
-    "@fto-consult/common": "^1.20.0",
+    "@fto-consult/common": "^1.20.1",
     "@gorhom/portal": "^1.0.14",
     "@react-native-async-storage/async-storage": "~1.17.3",
     "@react-native-community/datetimepicker": "6.5.2",

package/src/components/Countries/SelectCountry.js

@@ -21,6 +21,7 @@ export const getCountryFieldProps = (props)=>{
         upper : true,
         dialogProps : {title:'Sélectionner un pays'},
         getItemValue : ({item})=>item.code,
+        renderText : ({item})=>"[{0}] {1}".sprintf(item?.code?.toUpperCase(),item?.label),
         compare : (a,b)=>{
             return typeof a ==='string' && typeof b =='string' && a.toLowerCase() === b.toLowerCase() ? true : false; 
         },

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

@@ -19,7 +19,7 @@ import React from "$react";
 import DateLib from "$lib/date";
 import Filter,{canHandleFilter,prepareFilters} from "$ecomponents/Filter";
 import {CHECKED_ICON_NAME} from "$ecomponents/Checkbox";
-import { COLUMN_WIDTH,DATE_COLUMN_WIDTH } from "../utils";
+import { COLUMN_WIDTH,DATE_COLUMN_WIDTH,willConvertFiltersToSQL } from "../utils";
 import { StyleSheet,Dimensions,useWindowDimensions} from "react-native";
 import Preloader from "$ecomponents/Preloader";
 import Checkbox from "../Checkbox";
@@ -1262,7 +1262,7 @@ export default class CommonDatagridComponent extends AppComponent {
     }
     ///si les filtres devront être convertis au format SQL
     willConvertFiltersToSQL(){
-        return !!defaultVal(this.props.convertFiltersToSQL,appConfig.get("convertDatagridFiltersToSQL"));;
+        return !!defaultVal(this.props.convertFiltersToSQL,willConvertFiltersToSQL());;
     }
     getFilters(){
         this.filters = extendObj(true,{},this.filteredValues,this.filters)

package/src/components/Datagrid/utils.js

@@ -1,6 +1,7 @@
 import theme,{LINE_HEIGHT} from "$theme";
 import { StyleSheet } from "react-native";
 import {get as getSession} from "./Common/session";
+import appConfig from "$capp/config";
 
 export const getRenderType = ()=>getSession("render-type");
 
@@ -182,4 +183,6 @@ export const getRowStyle = ({row,bordered,numColumns,rowData,isAccordion,isTable
         style.push(styles.noHorizontalBorder);
     }
     return style;
-}
+}
+
+export const willConvertFiltersToSQL = x=>!!appConfig.get("convertDatagridFiltersToSQL");

package/src/components/Dropdown/index.js

@@ -709,6 +709,7 @@ class DropdownComponent extends AppComponent {
             bindResizeEvents,
             left,
             right,
+            dialogProps,
             ...dropdownProps
         } = this.props;
 
@@ -935,7 +936,7 @@ class DropdownComponent extends AppComponent {
                                 r = React.isValidElement(t)? r = <>{t}{r}</> : r;
                             }
                             if(showAdd){
-                                return <>{r}<Icon {..._addIconProps} {...props}/></>
+                                return <>{r}<Icon {..._addIconProps} {...props} style={[theme.styles.noMargin,theme.styles.noPadding,_addIconProps.style,props.style]}/></>
                             }
                             return r;
                         }}
@@ -981,6 +982,7 @@ class DropdownComponent extends AppComponent {
         const isBigList = this.isBigList;
         const ListComponent = isBigList ? BigList : List;
         const autoFocus = canAutoFocusSearchField({visible,items:renderingItems});
+        dialogProps = defaultObj(dialogProps);
         return (
             <Fragment>
                 {!withBottomSheet && isMob && anchor}
@@ -993,7 +995,8 @@ class DropdownComponent extends AppComponent {
                     onDismiss={this.hide.bind(this)}
                     contentStyle = {[{paddingVertical:0},restProps.contentStyle]}
                     anchor={anchor}
-                    title = {defaultStr(label,text)+"[ "+self.state.data.length.formatNumber()+" ]"}
+                    {...dialogProps}
+                    title = {defaultStr(dialogProps.title,label,text)+"[ "+self.state.data.length.formatNumber()+" ]"}
                     subtitle = {selectedText}
                     style = {[restProps.style]}
                     contentProps = {{style:{flex:1}}}

package/src/components/Form/Fields/$extendFormFields.js

@@ -0,0 +1,5 @@
+// Copyright 2022 @fto-consult/Boris Fouomene. All rights reserved.
+// Use of this source code is governed by a BSD-style
+// license that can be found in the LICENSE file.
+
+/**** pour étendre les formFields, ils suffit d'override cet alias*/

package/src/components/Form/Fields/SelectTableData/Component.js

@@ -0,0 +1,231 @@
+// Copyright 2022 @fto-consult/Boris Fouomene. All rights reserved.
+// Use of this source code is governed by a BSD-style
+// license that can be found in the LICENSE file.
+
+import Dropdown from "$ecomponents/Dropdown";
+import {defaultStr,isFunction,defaultVal,isObjOrArray,defaultObj} from "$utils";
+import PropTypes from "prop-types";
+import actions from "$cactions";
+import {navigateToTableData} from "$enavigation/utils";
+import {getFetchOptions,prepareFilters} from "$cutils/filters";
+import fetch from "$capi"
+import {willConvertFiltersToSQL} from "$ecomponents/Datagrid/utils";
+import React from "$react";
+
+/*** la tabledataSelectField permet de faire des requêtes distantes pour rechercher les données
+ *  Elle doit prendre en paramètre et de manière requis : les props suivante : 
+ *  foreignKeyColumn : La colonne dont le champ fait référence à la clé étrangère, ie fKeyTable dans laquelle faire les requêtes fetch
+ *  foreignKeyTable : la tableData dans laquelle effectuer les donées de la requêtes
+ *  foreignKeyLabel : Le libélé dans la table étrangère
+ */
+const TableDataSelectField = React.forwardRef((_props,ref)=>{
+    let {foreignKeyColumn,foreignKeyTable,foreignKeyLabel,dropdownActions,fields,fetchItems,convertFiltersToSQL,mutateFetchedItems,getForeignKeyTable,onFetchItems,isFilter,isUpdate,isDocEditing,items,onAddProps,fetchDataOpts,...props} = _props;
+    props = defaultObj(props);
+    props.data = defaultObj(props.data);
+    foreignKeyColumn = foreignKeyColumn.trim();
+    foreignKeyLabel = defaultStr(foreignKeyLabel).trim();
+    convertFiltersToSQL = defaultVal(convertFiltersToSQL,willConvertFiltersToSQL());
+    const fKeyTable = getForeignKeyTable(foreignKeyTable,props)
+    if(!isObj(fKeyTable) || !(defaultStr(fKeyTable.tableName,fKeyTable.table))){
+        console.error("type de données invalide pour la fKeyTable ",fKeyTable," composant SelectTableData",_props);
+        return null;
+    }
+    foreignKeyTable = defaultStr(fKeyTable.tableName,fKeyTable.table,foreignKeyTable).trim().toUpperCase();
+    const isMounted = React.useIsMounted();
+    const showAdd = isFilter ? false : React.useRef(Auth.isTableDataAllowed({foreignKeyTable,action:'create'}) ? defaultVal(props.showAdd,props.showAddBtn,true) : false).current;
+    const [state,setState] = React.useState({
+        items : [],isLoading : true,
+    });
+    fetchDataOpts = Object.assign({},fetchDataOpts);
+    fetchItems = typeof fetchItems =='function' ? fetchItems : typeof fKeyTable.queryPath =='string' ?  (opts)=>{
+        return fetch(fKeyTable.queryPath,opts);
+    } : undefined;
+    isUpdate = defaultBool(isUpdate,typeof isDocEditing ==='function' && isDocEditing({data:props.data,fKeyTable,foreignKeyTable}));
+    if(isFilter){
+        isUpdate = false;
+    }
+    const defaultFields = [foreignKeyColumn];
+    if(foreignKeyLabel){
+        defaultFields.push(foreignKeyLabel);
+    }
+    if(fetchDataOpts.fields !== 'all' && (!Array.isArray(fetchDataOpts.fields) || !fetchDataOpts.fields.length)){
+        fetchDataOpts.fields = defaultFields;
+    }
+    const foreignKeyColumnValue = props.defaultValue;
+    let isDisabled = defaultBool(props.disabled,props.readOnly,false);
+    if(!isDisabled && props.editable === false){
+        isDisabled = true;
+    }
+    if(isUpdate && isNonNullString(foreignKeyColumnValue) && (isDisabled)){
+        fetchDataOpts.selector = defaultObj(fetchDataOpts.selector);
+        fetchDataOpts.selector.$and = defaultArray(fetchDataOpts.selector.$and);
+        let hasF = false;
+        for(let i in fetchDataOpts.selector.$and){
+            const cFilter = fetchDataOpts.selector.$and[i];
+            if(isObj(cFilter)) {
+                if(cFilter[foreignKeyColumn] === foreignKeyColumnValue){
+                    hasF = true;
+                    break;
+                }
+            }
+        }
+        if(!hasF){
+            fetchDataOpts.selector.$and.push({[foreignKeyColumn] : foreignKeyColumnValue})
+        }
+    }
+    React.useEffect(()=>{
+        const onUpsertData = ()=>{return isMounted()?context.refresh():undefined};
+        APP.on(actions.upsert(foreignKeyTable),onUpsertData);
+        APP.on(actions.onRemove(foreignKeyTable),onUpsertData);
+        context.refresh();
+        return ()=>{
+            APP.off(actions.upsert(foreignKeyTable),onUpsertData);
+            APP.off(actions.onRemove(foreignKeyTable),onUpsertData);
+        };
+    },[]);
+    
+    let dat = isNonNullString(foreignKeyColumnValue)? {
+        [foreignKeyColumn]:foreignKeyColumnValue, 
+        ...(foreignKeyLabel ? {[foreignKeyLabel]:foreignKeyColumnValue+", introuvable dans le système"}:{})
+    } : null;
+    
+    const context = {
+        refresh : (force,cb)=>{
+            if(!isMounted()) return;
+            let opts = Object.clone(fetchDataOpts);
+            opts.selector = prepareFilters(fetchDataOpts.selector,{convertToSQL:convertFiltersToSQL});
+            opts = getFetchOptions(opts);
+            const r = fetchItems && fetchItems(opts);
+            if(isPromise(r)){
+                r.then((args)=>{
+                    if(Array.isArray(args)){
+                        args = {data : args};
+                    }
+                    let items = args.items = args.data = Array.isArray(args.items) ? args.items : Array.isArray(args.data) ? args.data : [];
+                    if(dat && isUpdate){
+                        if(isFunction(mutateFetchedItems)){
+                            items = mutateFetchedItems(items);
+                        }
+                        let hasFound = false;
+                        if(!isObjOrArray(items)) items = [];
+                        for(let i in items){
+                            if(isObj(items[i]) && items[i][foreignKeyColumn] == foreignKeyColumnValue){
+                                hasFound = true;
+                                break;
+                            }
+                        }
+                        if(!hasFound){
+                            if(Array.isArray(items)){
+                                items.push(dat); 
+                            } else {
+                                items[foreignKeyColumnValue] = dat;
+                            }
+                        }
+                    }
+                    setState({...state,items,isLoading:false})
+                    if(onFetchItems){
+                        onFetchItems({data:items,items,context,props});
+                    }
+                }).catch((e)=>{
+                    console.log(e," fetching list of data select table data ",foreignKeyColumn,foreignKeyTable)
+                })
+            } else {
+                setState({...state, isLoading : false})
+            }
+        }
+    }
+    const prevIsUpdate = React.usePrevious(isUpdate);
+    const prevDefaultValue = React.usePrevious(foreignKeyColumnValue);
+    if(!isFilter){
+        React.useEffect(()=>{
+            if(prevIsUpdate === isUpdate && JSON.stringify(prevDefaultValue) === JSON.stringify(foreignKeyColumnValue)) return;
+            context.refresh();
+        },[isUpdate,foreignKeyColumnValue])
+    }
+    dropdownActions = isObj(dropdownActions)? {...dropdownActions} : isArray(dropdownActions)? [...dropdownActions] : []
+    const isDropdonwsActionsArray = isArray(dropdownActions);
+    const refreshItem = {
+        text : 'Rafraichir',
+        onPress : context.refresh,
+        icon : 'refresh',
+    }
+    if(isDropdonwsActionsArray){
+        dropdownActions.push(refreshItem)
+    } else {
+        dropdownActions.trefreshItem = refreshItem;
+    }
+    const rItem = (p)=>{
+        if(!isObj(p) || !isObj(p.item)) return null;
+        const itemLabel = defaultStr(foreignKeyLabel && p.item[foreignKeyLabel]), itemCode = defaultStr(p.item[foreignKeyColumn]);
+        return (itemLabel !== itemCode ? ((isNonNullString(itemCode)?("["+itemCode+"] "):"")+itemLabel):itemLabel);
+    }
+    const dialogProps = defaultObj(props.dialogProps);
+    dialogProps.title = defaultStr(dialogProps.title,fKeyTable.text,fKeyTable.label)
+    return <Dropdown
+        {...props}
+        isFilter = {isFilter}
+        showAdd = {!isFilter && showAdd}
+        {...React.setProps(Dropdown,fKeyTable,{})}
+        {...state}
+        dialogProps = {dialogProps}
+        ref = {ref}
+        defaultValue = {foreignKeyColumnValue}
+        dropdownActions = {dropdownActions}
+        context = {context}
+        itemValue = {(p) => {
+            if(typeof props.itemValue ==='function'){
+                return props.itemValue(p);
+            }
+            return p.item[foreignKeyColumn];
+        }}
+        renderItem = {(p) => {
+            if(typeof props.renderItem ==='function'){
+                return props.renderItem(p);
+            }
+            if(typeof props.renderText =='function'){
+                return props.renderText(p);
+            }
+            return rItem(p);
+        }}
+        renderText = {(p) => {
+            if(typeof props.renderText ==='function'){
+                return props.renderText(p);
+            }
+            if(typeof props.renderItem ==='function'){
+                return props.renderItem(p);
+            }
+            return rItem(p);
+        }}
+        hideOnAdd
+        onAdd = {({onGoBack})=>{
+            onAddProps = defaultObj(isFunction(onAddProps)? onAddProps.call(context,{context,foreignKeyTable,dbName,props}) : onAddProps);
+            return navigateToTableData({...onAddProps,tableName : foreignKeyTable,onGoBack})
+        }}
+    />
+});
+
+TableDataSelectField.propTypes = {
+    ...Dropdown.propTypes,
+    mutateFetchedItems : PropTypes.func, //la fonction permettant d'effectuer une mutation sur l'ensemble des donnéees récupérées à distance
+    fetchItems : PropTypes.func,//la fonction de rappel à utiliser pour faire une requête fetch permettant de selectionner les données à distance
+    foreignKeyColumn : PropTypes.string.isRequired,//le nom de la clé étrangère à laquelle fait référence la colone dans la fKeyTable
+    foreignKeyLabel : PropTypes.string,
+    getForeignKeyTable : PropTypes.func.isRequired, //la fonction permettant de récupérer la fKeyTable data dont fait référence le champ
+    foreignKeyTable : PropTypes.string, //le nom de la fKeyTable data à laquelle se reporte le champ
+    onFetchItems : PropTypes.func,
+    fetchDataOpts : PropTypes.shape({
+        fields : PropTypes.oneOfType([
+            PropTypes.string,
+            PropTypes.bool,
+            PropTypes.array,
+        ])
+    }),
+    itemValue : PropTypes.func,
+    renderItem : PropTypes.func,
+    renderText : PropTypes.func,
+    convertFiltersToSQL : PropTypes.func,// si l'on doit convertir les selecteurs de filtres au format SQl
+}
+
+export default TableDataSelectField;
+
+TableDataSelectField.displayName = "TableDataSelectField";

package/src/components/Form/Fields/{SelectTableData.js → SelectTableData/index.js}

@@ -1,5 +1,5 @@
-import SelectField from "./SelectField";
-import SelectTableData from "$containers/TableData/SelectField";
+import SelectField from "../SelectField";
+import SelectTableData from "./Component";
 
 export default class FormSelectTableDataField extends SelectField{
     _render(props){

package/src/components/Form/Fields/index.js

@@ -3,6 +3,7 @@ import TextField from "./TextField";
 import SelectField from "./SelectField";
 import Switch from "./Switch";
 import Checkbox from "./Checkbox";
+import SelectTableData from "./SelectTableData";
 //import IdField from "./IdField";
 //import PieceField from "./PieceField";
 import Slider from "./Slider";
@@ -14,11 +15,17 @@ import Image from "./Image";
 import Tel from "./Tel";
 import SelectCountry from "./SelectCountry";
 import Html from "./Html";
+import * as eFormFields from "$extendFormFields";
+import "$utils";
+import React from "$react";
 
-export default {
+export * from "$extendFormFields";
+
+const defFormFields = {
     Field,
     TextField, 
     SelectField,
+    SelectTableData,
     SelectCountry
     ,Switch
     ,Checkbox
@@ -34,10 +41,20 @@ export default {
     ,Html
 }
 
+//pour étendre les FormFields par défaut
+Object.map(eFormFields,(F,i)=>{
+    if(React.isComponent(F)){
+        defFormFields[i] = F;
+    }
+})
+
+export default defFormFields;
+
 export {
     Field,
     TextField, 
     SelectField,
+    SelectTableData,
     SelectCountry
     ,Switch
     ,Checkbox

package/src/components/Form/FormData/FormData.js

@@ -149,7 +149,6 @@ export default class FormDataComponent extends AppComponent{
             return this.props.isDocUpdate({data,context:this}) ? true : false;
         }
         return false;
-        //return isDocUpdate(data) ? true : false;
     }
     canBindResizeEvents(){
         return false;

package/src/components/Form/FormData/FormDataActions.js

@@ -31,18 +31,12 @@ export default class FormDataActionComponent extends FormData {
         const mainProps = this.getMainProps();
         const data = this.getDataProp();
         const appBarProps = Object.assign({},mainProps.appBarProps);
-        const indexField = this.getIndexFieldProps();
         const isEditing = this.isDocEditing(data);
         let subtitle = (isEditing?'Modifier':this.getNewElementLabel());
         let title = React.getTextContent(defaultVal(appBarProps.title,mainProps.title,this.props.title));
         if(isEditing){
-            let _title = "";
-            if(isNonNullString(indexField)){
-                _title = defaultStr(data[indexField]);
-            } else if(isNonNullString(data.code)){
-                _title = data.code;
-            }
-            if(_title){
+            let _title = this.getPrimaryKeysFieldsValueText(data);
+            if(isNonNullString(_title)){
                 subtitle+= " ["+_title+"]"
             }
         } else {
@@ -88,6 +82,12 @@ export default class FormDataActionComponent extends FormData {
     canCreateNew(){
         return true;
     }
+    /*** permet de récupérer le contenu textuel associé à la données en cours de modification, pour les clés primaires */
+    getPrimaryKeysFieldsValueText(data){
+        data = defaultObj(data);
+        const indexField = this.getIndexFieldProps();
+        return isNonNullString(indexField) && isNonNullString(data[indexField])? data[indexField] : isNonNullString(data.code)? data.code : undefined; 
+    }
     getAppBarActionsProps(props){
         props = defaultObj(props,this.getMainProps(),this.props);
         let {actions,save2NewAction,save2printAction,save2closeAction,saveAction,newAction} = props;
@@ -102,10 +102,9 @@ export default class FormDataActionComponent extends FormData {
         const isEditing = this.isDocEditing(data);
         let textSave = isEditing ? "Modifier": 'Enregistrer';
         const newElementLabel = defaultStr(props.newElementLabel,this.props.newElementLabel,"Nouvel Element");
-        const indexField = this.getIndexFieldProps();
         if(isEditing){
-            const t = isNonNullString(indexField) && isNonNullString(data[indexField])? data[indexField] : isNonNullString(data.code)? data.code : undefined;
-            if(t){
+            const t = this.getPrimaryKeysFieldsValueText(data);
+            if(isNonNullString(t)){
                 textSave+="["+t+"]"
             }
         }

package/src/components/Form/FormData/componentsTypes.js

@@ -7,6 +7,8 @@ import React from "$react";
 const componentTypes =  {
     ...Fields,
     id : Fields.IdField,
+    selecttabledata : Fields.SelectTableData,
+    select_tabledata : Fields.SelectTableData,
     idfield : Fields.IdField,
     piecefield : Fields.PieceField,
     piece : Fields.PieceField,
@@ -78,17 +80,9 @@ export const getFilterComponentProps = (_props)=>{
         component = Fields.SelectField;
         if(type =='select_country' || type =='selectcountry'){
             component = Fields.SelectCountry;
+        } else if(type =='select_tabledata' || type =='selecttabledata'){
+            component = Fields.SelectTableData;
         }
-        /*if(type !== 'select'){
-            if(type === 'selectstructdata') {
-                dbName = 'structData';
-                component = StructDataSelectField;
-            } else if(type === 'selecttabledata'){
-                component = TableDataSelectField;
-            } 
-            props.tableName = tableName;
-            props.dbName = dbName;
-        }*/
         type = "select";
     } else if(type == 'switch' || type =='radio' || type ==='checkbox') {
         type = 'select';

package/src/layouts/Screen/TableData.js

@@ -43,10 +43,13 @@ export default class TableDataScreenComponent extends FormDataScreen{
             data : hasManyData ? defaultObj(cDatas[0]) : isObj(mainProps.data)? mainProps.data : {}
         });
         const table = defaultObj(mainProps.table);
-        const fields = {};
+        const fields = {},primaryKeyFields = {};
         Object.map(table.fields,(field,i)=>{
             if(isObj(field) && field.form !== false){
                 fields[i] = Object.clone(field);
+                if(field.primary === true){
+                    primaryKeyFields[field.field || i] = true;
+                }
             } else {
                 fields[i] = field;
             }
@@ -63,7 +66,13 @@ export default class TableDataScreenComponent extends FormDataScreen{
             titleProp : {value : mainProps.title},
             closeOnSaveProp : {value : mainProps.closeOnSave || mainProps.closeAfterSave },
             newActionProp : {value : mainProps.newAction},
-        
+            //la liste des champ de type clé primaire associés à la table
+            primaryKeyFields : {value : primaryKeyFields},
+            cloneProp : {value : typeof mainProps.clone =='function' && mainProps.clone || undefined},
+            printProp : {value : typeof mainProps.print =='function' && mainProps.print || undefined},
+            archiveProp : {value : typeof mainProps.archive =='function' && mainProps.archive || undefined },
+            testIDProp : {value : defaultStr(mainProps.testID)},
+            isDocEditingProp : {value : typeof mainProps.isDocEditing =='function'? mainProps.isDocEditing : typeof mainProps.isDocUpdate =='function'? mainProps.isDocUpdate : undefined}
         });
         this.hidePreloader = this.hidePreloader.bind(this);
         this.showPreloader = this.showPreloader.bind(this);
@@ -256,7 +265,7 @@ export default class TableDataScreenComponent extends FormDataScreen{
         const restProps = this.getCurrentEditingProps();
         delete restProps.tabs;
         let {tabProps,firstTabProps,tabsProps,withScrollView} = restProps;
-        let testID = defaultStr(this.props.testID);
+        let testID = this.testIDProp;
         tabsProps = defaultObj(tabsProps);
         tabsProps.tabItemsProps = defaultObj(tabsProps.tabItemsProps);
         if(typeof withScrollView =='boolean' && typeof tabsProps.withScrollView !=='boolean'){
@@ -385,10 +394,40 @@ export default class TableDataScreenComponent extends FormDataScreen{
     isPrintable(){
         return false;
     }
+    /*** retourne la liste des valeurs de clé primarire associés à la table data pour la données en cours de modification 
+     * Elle permet d'afficher dans la barre de titre, les identifiants de la table de données en cours de modification
+    */
+    getPrimaryKeysFieldsValueText(data){
+        data = defaultObj(data,this.getCurrentData());
+        const v = [];
+        Object.map(this.primaryKeyFields,(vv,f)=>{
+            if(typeof data[f] =='number' || (typeof data[f] =='string' && data[f])){
+                v.push(data[f]);
+            }
+        });
+        return v.join(" ");
+    }
+    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;
+            }
+        }
+        return super.isDocEditing(data);
+    }
     print(data){   
-        if(!this.isPrintable() && typeof this.props.print!=='function') return;
+        if(!this.isPrintable() && typeof this.printProp!=='function') return;
         data = this.isDocEditing(data)? data : isObj(data) && this.isDocEditing(data.data)? data.data : {};
-        return this.props.print(data,this);
+        return this.printProp(data,this);
     }
     isClonable(){
         return true;
@@ -396,7 +435,7 @@ export default class TableDataScreenComponent extends FormDataScreen{
     clone (data){
         if(!this._isMounted() || !this.isClonable())return data;
         data = {...this.getCurrentEditingData(data)};
-        if(typeof this.props.clone =='function' && this.props.clone(data,this) === false) return data;
+        if(this.cloneProp && this.cloneProp(data,this) === false) return data;
         this.showPreloader();
         delete data.approved;
         Object.map(['_rev','_id','code','updatedBy','updatedDate','createdBy','updatedHour','createdHour','createdDate'],(idx)=>{