@fto-consult/expo-ui 5.7.0 → 5.7.2

package/src/components/Chart/appexChart/index.js

@@ -1,4 +1,4 @@
-import ApexChart from 'apexcharts/dist/apexcharts.common';
+import ApexChart from 'apexcharts/dist/apexcharts.min';
 import React from "$react";
 import View from "$components/View";
 import { destroyChart } from './utils';

package/src/components/Color/ColorPicker.js

@@ -1,6 +1,6 @@
 import React, { Component } from "$react";
 import {normalize,RGB_MAX,HUE_MAX,SV_MAX,hexToRgb} from "$theme/colors";
-import {extendObj} from "$cutils";
+import {extendObj,defaultStr,isNonNullString,defaultObj,isObj} from "$cutils";
 import View from "$ecomponents/View";
 import {
 	Animated,
@@ -15,7 +15,7 @@ import srcWheel from './assets/color-wheel.png';
 import srcSlider from './assets/black-gradient.png';
 import srcSliderRotated from './assets/black-gradient-rotated.png';
 
-import {Colors} from "$theme";
+import theme,{Colors} from "$theme";
 import TextField from "$ecomponents/TextField";
 
 
@@ -398,7 +398,7 @@ export default class ColorPickerComponent extends Component {
 	}
 	renderSwatches () {
 		this.swatches = this.props.palette.map((c,i) => (
-			<View style={[styles.swatch,{backgroundColor:c}]} key={'S'+i} hitSlop={this.props.swatchesHitSlop}>
+			<View testID={"RN_ColorPicker_SWATCHES"} style={[styles.swatch,theme.styles.cursorPointer,{backgroundColor:c}]} key={'S'+i} hitSlop={this.props.swatchesHitSlop}>
 				<TouchableWithoutFeedback onPress={x=>this.onSwatchPress(c,i)} hitSlop={this.props.swatchesHitSlop}>
 					<Animated.View style={[styles.swatchTouch,{backgroundColor:c,transform:[{scale:this.swatchAnim[i].interpolate({inputRange:[0,0.5,1],outputRange:[0.666,1,0.666]})}]}]} />
 				</TouchableWithoutFeedback>
@@ -407,8 +407,8 @@ export default class ColorPickerComponent extends Component {
 	}
 	renderDiscs () {
 		this.disc = (`1`).repeat(this.props.discreteLength).split('').map((c,i) => (
-			<View style={[styles.swatch,{backgroundColor:this.state.hueSaturation}]} key={'D'+i} hitSlop={this.props.swatchesHitSlop}>
-				<TouchableWithoutFeedback onPress={x=>this.onDiscPress(c,i)} hitSlop={this.props.swatchesHitSlop}>
+			<View testID={"RN_ColorPicker_DISC"} style={[styles.swatch,{backgroundColor:this.state.hueSaturation}]} key={'D'+i} hitSlop={this.props.swatchesHitSlop}>
+				<TouchableWithoutFeedback style={[theme.styles.cursorPointer]} onPress={x=>this.onDiscPress(c,i)} hitSlop={this.props.swatchesHitSlop}>
 					<Animated.View style={[styles.swatchTouch,{backgroundColor:this.state.hueSaturation,transform:[{scale:this.discAnim[i].interpolate({inputRange:[0,0.5,1],outputRange:[0.666,1,0.666]})}]}]}>
 						<View style={[styles.wheelImg,{backgroundColor:'#000',opacity:1-(i>=9?1:(i*11/100))}]}></View>
 					</Animated.View>
@@ -430,6 +430,7 @@ export default class ColorPickerComponent extends Component {
             disabled,
             editable,
 			row,
+			testID : customTestId,
 		} = this.props
 		const swatches = !!(this.props.swatches || swatchesOnly)
 		const hsv = hsvToHex(this.color), hex = hsvToHex(this.color.h,this.color.s,100)
@@ -483,34 +484,47 @@ export default class ColorPickerComponent extends Component {
 			marginBottom:row?0:margin,
 		}
 		// console.log('RENDER >>',row,thumbSize,sliderSize)
+		const testID = defaultStr(customTestId,"RN_ColorPickerContainer");
+		const hasHex =  Colors.isValid(hex);
+		const contrastColor = hasHex ? Colors.getContrast(hex) : undefined;
+		const restProps = hasHex ? {
+			color : contrastColor,
+			backgroundColor : hex,
+			style : [{
+				color : contrastColor,
+				backgroundColor : hex,
+			}]
+		} : {};
 		return (
-			<View testID="RN_ColorPickerContainer">
-					<View style={[styles.root,row?{flexDirection:'row'}:{},style]}>
-					{ swatches && !swatchesLast && <View style={[styles.swatches,swatchStyle,swatchFirstStyle]} key={'SW'}>{ this.swatches }</View> }
-					{ !swatchesOnly && <View style={[styles.wheel]} key={'$1'} onLayout={this.onSquareLayout}>
+			<View testID={testID}>
+					<View testID={`${testID}_RowContainer`} style={[styles.root,row?{flexDirection:'row'}:{},style]}>
+					{ swatches && !swatchesLast && <View testID={`${testID}_SwatchestLast`} style={[styles.swatches,swatchStyle,swatchFirstStyle]} key={'SW'}>{ this.swatches }</View> }
+					{ !swatchesOnly && <View testID={`${testID}_SwatchesOnly`} style={[styles.wheel]} key={'$1'} onLayout={this.onSquareLayout}>
 						{ this.wheelWidth>0 && <View style={[{padding:thumbSize/2,width:this.wheelWidth,height:this.wheelWidth}]}>
-							<View style={[styles.wheelWrap]}>
-								<Image style={styles.wheelImg} source={srcWheel} />
-								<Animated.View style={[styles.wheelThumb,wheelThumbStyle,Elevations[4],{pointerEvents:'none'}]} />
-								<View style={[styles.cover]} onLayout={this.onWheelLayout} {...wheelPanHandlers} ref={r => { this.wheel = r }}></View>
+							<View style={[styles.wheelWrap,theme.styles.cursorPointer]} testID={`${testID}_WheelWrap`}>
+								<Image testID={testID+"_WheelImg"} style={styles.wheelImg} source={srcWheel} />
+								<Animated.View testID={testID+"WheelThumb"} style={[styles.wheelThumb,wheelThumbStyle,Elevations[4],{pointerEvents:'none'}]} />
+								<View testID={testID+"_WheelWrapLayout"} style={[styles.cover]} onLayout={this.onWheelLayout} {...wheelPanHandlers} ref={r => { this.wheel = r }}></View>
 							</View>
 						</View> }
 					</View> }
-					{ !swatchesOnly && !sliderHidden && (discrete ? <View style={[styles.swatches,swatchStyle]} key={'$2'}>{ this.disc }</View> : <View style={[styles.slider,sliderStyle]} key={'$2'}>
-						<View style={[styles.grad,{backgroundColor:hex}]}>
+					{ !swatchesOnly && !sliderHidden && (discrete ? <View testID={`${testID}_SwatchesDiscrete`} style={[styles.swatches,swatchStyle]} key={'$2'}>{ this.disc }</View> : <View style={[styles.slider,sliderStyle]} key={'$2'}>
+						<View testID={testID+"_WheelGrad"} sstyle={[styles.grad,{backgroundColor:hex}]}>
 							<Image style={styles.sliderImg} source={row?srcSliderRotated:srcSlider} resizeMode="stretch" />
 						</View>
 						<Animated.View style={[styles.sliderThumb,sliderThumbStyle,Elevations[4],{pointerEvents:'none'}]} />
 						<View style={[styles.cover]} onLayout={this.onSliderLayout} {...sliderPanHandlers} ref={r => { this.slider = r }}></View>
 					</View>) }
-					{ swatches && swatchesLast && <View style={[styles.swatches,swatchStyle]} key={'SW'}>{ this.swatches }</View> }
+					{ swatches && swatchesLast && <View testID={`${testID}_SwatchesList`} style={[styles.swatches,swatchStyle]} key={'SW'}>{ this.swatches }</View> }
 					<TextField
+						testID={`${testID}_ColorPickerInput`}
 						enableCopy
 						label = ''
 						editable = {editable}
 						disabled = {disabled}
 						defaultValue = {hex}
-						style = {styles.textInput}
+						{...restProps}
+						style = {[styles.textInput,restProps.style]}
 						onChangeText = {(value)=>{
 							if(Colors.isHex(value)){
 								this.update(value);

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

@@ -9,6 +9,7 @@ import theme from "$theme"
 import {styles as rStyles} from "../utils";
 import {getSelectedBackgroundColor} from "../Actions/Header";
 import Swipeable from 'react-native-gesture-handler/Swipeable';
+import {isMobileNative} from "$platform";
 
 const DatagridAccordionRow = React.forwardRef((props,ref)=>{
     const {selectable,rowKey,
@@ -166,7 +167,7 @@ const DatagridAccordionRow = React.forwardRef((props,ref)=>{
                     _rP.style,rowProps.style,
                     styles.container,
                     numColumns > 1 && {width:'99%'},
-                    selected && styles.containerSelected,
+                    //selected && !hasAvatar && styles.containerSelected,
                     styles.bordered,
                     wrapperStyle,
                     style,
@@ -273,7 +274,7 @@ const styles = StyleSheet.create({
     container : {
         marginVertical : 10,
         paddingVertical : 5,
-        paddingHorizontal : 15,
+        paddingHorizontal : 10,// isMobileNative()? 15:10,
         marginHorizontal : 5,
         flexWrap : 'nowrap',
         justifyContent : 'center',

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

@@ -2686,11 +2686,12 @@ export default class CommonDatagridComponent extends AppComponent {
         return defaultNumber(this.sectionListDataSize.current)
     }
     prepareData(args,cb){
-        let {pagination,config,aggregatorFunction:customAggregatorFunction,displayOnlySectionListHeaders:cdisplayOnlySectionListHeaders,data,force,sectionListColumns,updateFooters} = defaultObj(args);
+        let {pagination,config,aggregatorFunction:customAggregatorFunction,displayOnlySectionListHeaders:cdisplayOnlySectionListHeaders,data,force,sectionListColumns,sectionListCollapsedStates,updateFooters} = defaultObj(args);
         cb = typeof cb ==='function'? cb : typeof args.cb == 'function'? args.cb : undefined;
         config = isObj(config) && Object.size(config,true)? config : this.getConfig();
         const aggregatorFunction = isNonNullString(customAggregatorFunction) && customAggregatorFunction in  this.aggregatorFunctions ? this.aggregatorFunctions[customAggregatorFunction] : this.getActiveAggregatorFunction();
         sectionListColumns = isObj(sectionListColumns) ? sectionListColumns : this.state.sectionListColumns;
+        sectionListCollapsedStates = isObj(sectionListCollapsedStates)? sectionListCollapsedStates: defaultObj(this.state.sectionListCollapsedStates);
         const displayOnlySectionListHeaders = typeof cdisplayOnlySectionListHeaders == 'boolean'?cdisplayOnlySectionListHeaders : this.state.displayOnlySectionListHeaders;
         let isArr = Array.isArray(data);
         //let push = (d,index) => isArr ? newData.push(d) : newData[index] = d;
@@ -2808,7 +2809,7 @@ export default class CommonDatagridComponent extends AppComponent {
         } else if(force){
             this.setSelectedRows();
         }
-        const state = {data,displayOnlySectionListHeaders,aggregatorFunction:aggregatorFunction.code};
+        const state = {data,displayOnlySectionListHeaders,sectionListCollapsedStates,aggregatorFunction:aggregatorFunction.code};
         if((cb)){
             cb(state);
         }
@@ -2821,7 +2822,7 @@ export default class CommonDatagridComponent extends AppComponent {
         const config = isObj(args.config) && Object.size(args.config,true)? args.config : this.getConfig();
         const displayGroupLabels = "displayGroupLabels" in config? config.displayGroupLabels : true;
         const displayGroupLabelsSeparator = typeof config.displayGroupLabelsSeparator =='string'? config.displayGroupLabelsSeparator : arrayValueSeparator;
-        const {fields,sectionListColumnsSize} = args;
+        const {fields} = args;
         const d = [];
         Object.map(fields,(field,i)=>{
             const txt = this.renderRowCell({
@@ -2832,10 +2833,11 @@ export default class CommonDatagridComponent extends AppComponent {
                 columnField : defaultStr(field.field,i),
             });
             if(!isNonNullString(txt) && typeof txt !=='number') return;
-            if(!displayGroupLabels){
+            const labelText = defaultStr(field.label,field.text);
+            if(!displayGroupLabels || !labelText){
                 d.push(txt);
             } else {
-                d.push("{0} : {1}".sprintf(defaultStr(field.label,field.txt),txt))
+                d.push("{0} : {1}".sprintf(labelText,txt))
             }
         });
         return d.length ? d.join(displayGroupLabelsSeparator) : undefined;
@@ -2846,6 +2848,22 @@ export default class CommonDatagridComponent extends AppComponent {
     getFlashListItemType(item){
         return typeof item === "string" || isObj(item) && item.isSectionListHeader === true ? "sectionHeader" : "row";;
     }
+    getSectionListCollapsedStates(){
+        return defaultObj(this.state.sectionListCollapsedStates)
+    }
+    isSectionListCollapsed(sectionListKey){
+        return isNonNullString(sectionListKey)? !!this.getSectionListCollapsedStates()[sectionListKey] : false;
+    }
+    toggleSectionListCollapsedState(sectionKey){
+        const s = getSectionListCollapsedStates;
+        if(!isNonNullString(sectionKey)) return;
+        s[sectionKey] = !!!s[sectionKey];
+        setTimeout(()=>{
+            this.setIsLoading(true,()=>{
+               this.setState({sectionListCollapsedStates:{...s}});
+            },true);
+        },TIMEOUT)
+    }
     /****permet de faire le rendu flashlist */
     renderFlashListItem(args){
         if(!this.hasSectionListData()) return null;
@@ -2904,7 +2922,19 @@ export default class CommonDatagridComponent extends AppComponent {
                 });
             }
         }
+        const isCollapsed = this.isSectionListCollapsed(key);
         return <View testID={testID+"_ContentContainer"}  style={[theme.styles.w100,isA && this.state.displayOnlySectionListHeaders && {borderTopColor:theme.colors.divider,borderTopWidth:1},isA ? [theme.styles.ph2,theme.styles.pt1] : [theme.styles.pt1,theme.styles.noPadding,theme.styles.noMargin],theme.styles.justifyContentCenter,theme.styles.alignItemsCenter,theme.styles.pb1,!cells && theme.styles.ml1,theme.styles.mr1,cStyle]}>
+            {false && <View testID={testID+"_LabelAndCollapsedContainer"} style={[theme.styles.w100,theme.styles.row,theme.styles.alignItemsCenter,theme.styles.justifyContentStart]}>
+                <Icon
+                    name = {isCollapsed?"chevron-up":"chevron-right"}
+                    color = {theme.colors.primaryOnSurface}
+                    style = {[theme.styles.noMargin,theme.styles.noPadding]}
+                    size = {25}
+                    onPress = {(e)=>{
+                        this.toggleSectionListCollapsedState(key);
+                    }}
+                />
+            </View>}
             <Label testID={testID+"_Label"} splitText numberOfLines={3} textBold style={[theme.styles.w100,{color:theme.colors.primaryOnSurface,fontSize:isA?15 :16},lStyle,theme.styles.ph1]}>{label}</Label>
             {cells ? <View testID={testID+"_TableRow"} style = {[theme.styles.w100,theme.styles.row,isA && theme.styles.pt1,theme.styles.alignItemsFlexStart,this.isAccordion() && theme.styles.rowWrap]}
             >{cells}</View> : null}

package/src/components/Datagrid/SWRDatagrid.js

@@ -93,6 +93,7 @@ const SWRDatagridComponent = React.forwardRef((props,ref)=>{
         autoSort,
         fetchOptions:customFetchOptions,
         handleQueryLimit,
+        handlePagination,
         onFetchData,
         beforeFetchData,
         sort,
@@ -162,7 +163,8 @@ const SWRDatagridComponent = React.forwardRef((props,ref)=>{
     const totalRef = React.useRef(0);
     const isFetchingRef = React.useRef(false);
     const pageRef = React.useRef(1);
-    const canHandleLimit = handleQueryLimit !== false ? true : false;
+    const canHandlePagination = handlePagination !== false ? true : false;
+    const canHandleLimit = handleQueryLimit !== false && canHandlePagination ? true : false;
     const limitRef = React.useRef(!canHandleLimit ?0 : defaultNumber(getSessionData("limit"),500));
     const isInitializedRef = React.useRef(false);
     testID = defaultStr(testID,"RNSWRDatagridComponent");
@@ -191,7 +193,8 @@ const SWRDatagridComponent = React.forwardRef((props,ref)=>{
                 delete opts.page;
                 delete opts.offset;
             }
-            const fetchCB = ({data,total})=>{
+            const fetchCB = (fArgs)=>{
+                let {data,total} = (Array.isArray(fArgs) ? {data:fArgs,total:fArgs.length} : isObj(fArgs)? fArgs : {data:[],total:0});
                 totalRef.current = total;
                 dataRef.current = data;
                 const dd = Object.size(data);
@@ -254,6 +257,7 @@ const SWRDatagridComponent = React.forwardRef((props,ref)=>{
         refresh();
     }
     const canPaginate = ()=>{
+        if(!canHandlePagination) return false;
         if(canHandleLimit && typeof totalRef.current !=='number' || typeof pageRef.current !='number' || typeof limitRef.current !='number') return false;
         if(limitRef.current <= 0) return false;
         return true;
@@ -455,6 +459,7 @@ SWRDatagridComponent.displayName = "SWRDatagridComponent";
 
 SWRDatagridComponent.propTypes = {
     ...Datagrid.propTypes,
+    handlePagination : PropTypes.bool, //spécifie si le datagrid prendra en compte la pagination
     /*** le nom de la colonne de trie par défaut */
     defaultSortColumn : PropTypes.string,
     fetchPath : PropTypes.string,

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

@@ -623,10 +623,8 @@ export default class Field extends AppComponent {
         if(!this.canValidate) return; 
         let {keyboardEvents,onKeyEvent} = this.props;
         const formInstance = this.getForm();
-        const arg = {key,event,formInstance,field:this.name,formName:this.getFormName(),value:this.getValidRule(),validValue:this.getValidValue(),context:this,isFormField:true,data:{},formInstance};
-        if(formInstance ){
-            arg.data = formInstance.getData();
-        }
+        const data = formInstance ? formInstance.getData() : {};
+        const arg = {key,event,formInstance,field:this.name,formName:this.getFormName(),value:this.getValidRule(),validValue:this.getValidValue(data),data,context:this,isFormField:true,formInstance};
         let handler = undefined;
         if(isObj(keyboardEvents)){
             handler = keyboardEvents[key];

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

@@ -0,0 +1,115 @@
+import TextField from "./TextField";
+import PropTypes from "prop-types";
+import { UPPER_CASE } from "$clib/validator";
+import {isNonNullString,defaultStr,isPromise} from "$cutils";
+import React from "$react";
+import { ActivityIndicator } from "react-native-paper";
+
+export default class FormIDField extends TextField {
+    constructor(props){
+        super(props)
+        this.autobind();
+    }
+    UNSAFE_componentWillReceiveProps(nextProps){
+        this.newFieldIdValue = undefined;
+        return super.UNSAFE_componentWillReceiveProps(nextProps);
+    }
+    componentDidMount(){
+        super.componentDidMount();
+        this.fetchNewId(false);
+    }
+    handleCheckIdError(msg,errorCb){
+        this.canCheckAgain = false;
+        this.hasError = true;
+        if(isNonNullString(msg)) this.onNoValidate(msg,undefined,this,null,null);
+        if(isFunction(errorCb)){
+            errorCb(e);
+        }
+    }
+
+    /*** met à jour la données du numéro de piece */
+    fetchNewId(focus){
+        const data = defaultObj(this.props.data);
+        if(!isNonNullString(this.name)) return undefined;
+        const cb = (value)=>{
+            if(isNonNullString(value)){
+                this.newFieldIdValue = value;
+                this.validate({value}); 
+                if(focus) this.focus();
+            }
+        }
+        if(isNonNullString(data[this.name])){
+            cb(data[this.name]);
+            return data[this.name]
+        }
+        setTimeout(()=>{
+            const fId = typeof this.props.fetchNewId =='function'? this.props.fetchNewId({...this.props,data,columnField:this.name}) : null;
+            if(isPromise(fId)){
+                return fId.then(cb).catch(e=>{
+                    console.log(e," fetching new piece id ",this.name);
+                });
+            }
+            return cb(fId);
+        },10);
+    }
+    /*** retourne la valeur validée */
+    getValidValue(data){
+        const validValue = super.getValidValue(data);
+        console.log(data, " is valid value ",data);
+        if(!isNonNullString(this.name)) return validValue;
+        data[this.name] = defaultStr(data[this.name],validValue,this.newFieldIdValue);
+        return validValue;
+    }
+    isValidRuleDynamic(){
+        return true;
+    }
+    isTextField(){
+        return false;
+    }
+    componentDidUpdate(){
+        if(!isNonNullString(this.newFieldIdValue)){
+            this.fetchNewId();
+        }
+    }
+    _render(props,setRef){
+        delete props.validType;
+        if(isNonNullString(this.name) && isObj(props.data) && isNonNullString(props.data[this.name])){
+            props.disabled = true;         
+            props.validType = UPPER_CASE;
+            props.defaultValue = props.data[this.name];
+        } else {
+            props.validType = 'required|'+UPPER_CASE;
+        }
+        if(typeof props.minLength !=='number'){
+            props.minLength = 2;
+        }
+        const defValue = props.defaultValue = isNonNullString(props.defaultValue)? props.defaultValue : isNonNullString(this.newFieldIdValue)? this.newFieldIdValue : undefined;
+        props.validRule = props.validType;
+        props.contentContainerProps = Object.assign({},props.contentContainerProps)
+        props.contentContainerProps.pointerEvents = defaultStr(props.contentContainerProps.pointerEvents,"auto");
+        props.enableCopy = typeof props.enableCopy ==='boolean'? props.enableCopy : (props.defaultValue || this.newFieldIdValue ? true : false);
+        const {right} = props;
+        props.editable = typeof props.editable =='boolean'? props.editable : typeof props.disabled ==='boolean' ? !!!props.disabled : typeof props.readOnly =="boolean"? !!!props.disabled : false;
+        props.right = (props)=>{
+            const r = typeof right =='function'? right (props) : React.isValidElement(right)? right : null;
+            if(!defValue){
+                return <>{r}<ActivityIndicator
+                    {...props}
+                    style = {[props.style,{marginRight:10}]}
+                /></>
+            }
+            return r;
+        }
+        this.setValidRule(props.validType);
+        return  super._render(props,setRef);
+    }
+}
+
+/*** le principe est de générer une id et vérifier l'existance deans la bd, jusqu'à retourner un
+ *  qui n'existe pas en bd
+ */
+FormIDField.propTypes = {
+    ...TextField.propTypes,
+    fetchNewId : PropTypes.func, ///({data,...props}), la fonction permettant de fetch un newId pour la données
+}
+FormIDField.filter = false;//disabled on filter component

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

@@ -6,7 +6,7 @@ import Checkbox from "./Checkbox";
 import SelectTableData from "./SelectTableData";
 import SelectCurrency from "./SelectCurrency";
 //import IdField from "./IdField";
-//import PieceField from "./PieceField";
+import IDField from "./IDField";
 import Slider from "./Slider";
 import ColorPicker from "./Color";
 import Date from "./Date";
@@ -34,7 +34,7 @@ const defFormFields = {
     ,Switch
     ,Checkbox
     //,IdField
-    //,PieceField
+    ,IDField
     ,Slider
     ,ColorPicker
     ,Date
@@ -66,7 +66,7 @@ export {
     ,Switch
     ,Checkbox
     //,IdField
-    //,PieceField
+    ,IDField
     ,Slider
     ,ColorPicker
     ,ColorPicker as Color
@@ -76,4 +76,14 @@ export {
     ,Tel
     ,SelectDateFormat
     ,Html
-}
+}
+
+export const extendFields = (fields)=>{
+    Object.map(fields,(f,i)=>{
+        if(React.isComponent(f)){
+            defFormFields[i] = f;
+        }
+    })
+}
+
+export const extendFormFields = extendFields;

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

@@ -10,7 +10,7 @@ import PropTypes from "prop-types";
 import {renderActions} from "$ecomponents/Dialog/utils";
 //import {isDocUpdate} from "$database/utils";
 import {handleBeforeSaveCallback} from "./utils";
-import componentsTypes from "./componentsTypes";
+import getComponentFromType from "./componentsTypes";
 import { keyboardShortcuts } from "../utils";
 import appConfig from "$capp/config";
 
@@ -191,9 +191,9 @@ export default class FormDataComponent extends AppComponent{
                 content.push(<Divider key = {index} style={theme.styles.w100}/>)
             } else if(isObj(field) && field.form !== false) {
                 const name = defaultStr(field.name,field.field,index);
-                const type = defaultStr(field.jsType,field.type,"text").trim().toLowerCase().replaceAll("_","");
+                const type = defaultStr(field.jsType,field.type,"text").trim().toLowerCase().replaceAll(" ","").replaceAll("-","").replaceAll("_","");
                 const isDate = (type.contains('date') || type.contains('time'));
-                const Component = componentsTypes[type] || componentsTypes.default;
+                const Component = getComponentFromType(defaultStr(field.jsType,field.type,"text"));
                 let {defaultValue,useDefaultValueFromData,primaryKey,hidden,renderFormDataField,getMediaQueryStyle,printLabels,queryLimit,selected,value,dataFilesInterest,perm,ignore,form,responsiveProps:customResponsiveProps,...rest} = field;
                 rest = Object.assign({},rest);
                 delete rest.import;

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

@@ -4,38 +4,49 @@ import Fields from "../Fields";
 import i18n from "$i18n";
 import React from "$react";
 
-const componentTypes =  {
-    ...Fields,
-    id : Fields.IdField,
-    selecttabledata : Fields.SelectTableData,
-    idfield : Fields.IdField,
-    piecefield : Fields.PieceField,
-    piece : Fields.PieceField,
-    select : Fields.SelectField,
-    switch : Fields.Switch,
-    selectcountry : Fields.SelectCountry,
-    selectdateformat : Fields.SelectDateFormat,
-    selectcurrency : Fields.SelectCurrency,
-    currencyformat : Fields.CurrencyFormat,
-    dateformat : Fields.SelectDateFormat,
-    date : Fields.Date,
-    time : Fields.Time,
-    datetime  : Fields.DateTime,
-    date2time : Fields.DateTime,
-    checkbox : Fields.Checkbox,
-    slider : Fields.Slider,
-    color : Fields.ColorPicker,
-    tel : Fields.Tel,
-    html : Fields.Html,
-    datafile : Fields.DataFile,
-    image : Fields.Image,
-    schedule : Fields.Scheduler,
-    scheduler : Fields.Scheduler,
-    default : Fields.TextField,
+
+export const getComponentTypes = ()=>{
+    return {
+        id : Fields.IDField,
+        ...Fields,
+        selecttabledata : Fields.SelectTableData,
+        idfield : Fields.IdField,
+        select : Fields.SelectField,
+        switch : Fields.Switch,
+        selectcountry : Fields.SelectCountry,
+        selectdateformat : Fields.SelectDateFormat,
+        selectcurrency : Fields.SelectCurrency,
+        currencyformat : Fields.CurrencyFormat,
+        dateformat : Fields.SelectDateFormat,
+        date : Fields.Date,
+        time : Fields.Time,
+        datetime  : Fields.DateTime,
+        date2time : Fields.DateTime,
+        checkbox : Fields.Checkbox,
+        slider : Fields.Slider,
+        color : Fields.ColorPicker,
+        tel : Fields.Tel,
+        html : Fields.Html,
+        datafile : Fields.DataFile,
+        image : Fields.Image,
+        schedule : Fields.Scheduler,
+        scheduler : Fields.Scheduler,
+        default : Fields.TextField,
+    };
+}
+export function getComponentFromType(type){
+    const types = getComponentTypes();
+    if(!isNonNullString(type)){
+        return types.default;
+    }
+    type = type.trim().toLowerCase().replaceAll(" ","").replaceAll("-","").replaceAll("_","");
+    return React.isComponent(types[type]) && types[type] || types.default;
 };
 
-export default componentTypes;
+export default getComponentFromType;
+
 
+/**** pour interdire qu'on composant FormField soit utilisé en cas de filtre, il suffit de passer au composant FormField, la props filter à false */
 
 export const getFilterComponentProps = (_props)=>{
     let {
@@ -67,6 +78,7 @@ export const getFilterComponentProps = (_props)=>{
         ...props
     } = _props;
     props = defaultObj(props);
+    const componentTypes = getComponentTypes();
     let component = Fields.TextField;
     type = defaultStr(jsType,type,'text').toLowerCase().replaceAll("_","").replaceAll("-","").trim();
     const sanitizedType = type.replaceAll("_","").toLowerCase().trim();
@@ -101,7 +113,7 @@ export const getFilterComponentProps = (_props)=>{
         component = Fields.ColorPicker;
     } else if(type == 'dateformat' || type =='select_dateformat' || type =='select_date_format') {
         component = Fields.SelectDateFormat;
-    } else if(React.isComponent(componentTypes[type])) {
+    } else if(React.isComponent(componentTypes[type]) && componentTypes[type] !== false) {
         component = componentTypes[type];
     } else if(isNonNullString(props.foreignKeyColumn) && isNonNullString(props.foreignKeyTable)) {
         component = Fields.SelectTableData;
@@ -112,7 +124,7 @@ export const getFilterComponentProps = (_props)=>{
         } 
         delete props.dbName;
         delete props.tableName;
-       delete props.fieldName;
+        delete props.fieldName;
     }
     type = type || "text"
     if(type =='select'){

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

@@ -91,14 +91,7 @@ export const handleBeforeSaveCallback = (beforeSaveCallback,successCb,arg)=>{
             }
             successCb(arg);
         }).catch((e)=>{
-            if(isNonNullString(e)){
-                notify.error(e);
-            } else if(e){
-                let ms = defaultStr(e.msg,e.message);
-                if(isNonNullString(ms)){
-                    notify.error(ms);
-                }
-            }
+            notify.error(e);
         })
         return arg;
     } else if(isNonNullString(bF)){

package/src/components/Form/index.js

@@ -1,5 +1,5 @@
 export * from "./FormData";
-
+export * from "./Fields";
 export * from "./Form";
 
 export {default as List} from "./List";

package/src/components/Icon/IconButton.js

@@ -36,7 +36,6 @@ const IconButtonComponent = ({
   const borderColor = theme.colors.outline || theme.colors.divider;
   const rippleColor = Colors.setAlpha(iconColor,0.32);
   const buttonSize =  size * 1.5;
-  console.log(iconColor, " is conndddd ",color,rest);
   const borderStyles = {
     borderWidth: 0,
     borderRadius: buttonSize / 2,

package/src/components/TableLink/index.js

@@ -41,7 +41,7 @@ const TableLinKComponent = React.forwardRef((props,ref)=>{
             const r2 = typeof fetchForeignData === 'function'? fetchForeignData({...args,...defaultObj(a)}) : undefined;
             if(isPromise(r2)){
                 return r2.then((data)=>{
-                    if(isObj(data) && data[foreignKeyColumn] !== undefined){
+                    if(isObj(data) && (isNonNullString(foreignKeyColumn) ? data[foreignKeyColumn] !== undefined:true)){
                         navigateToTableData({tableName:foreignKeyTable,data});
                     }
                 });

package/src/layouts/Screen/TableData.js

@@ -81,7 +81,7 @@ export default class TableDataScreenComponent extends FormDataScreen{
                 const f = fields[i];
                 f.type = defaultStr(f.jsType,f.type).toLowerCase();
                 const name = f.field = defaultStr(f.field,i);
-                if((f.type =='id' || f.type =='piece' || f.unique === true) && f.unique !== false && f.disabled !== true && f.editable !== false && f.readOnly !== true){
+                if((f.type =='id' || f.type =='piece' || f.primaryKey || f.unique === true) && f.unique !== false && f.disabled !== true && f.editable !== false && f.readOnly !== true){
                     const {onBlur} = f;
                     f.onBlur = (args)=>{
                         args = {...f,...args,fetch,columnField:name,fieldName:name,id:args.value};
@@ -104,6 +104,7 @@ export default class TableDataScreenComponent extends FormDataScreen{
                                         }
                                     }).catch((e)=>{
                                         if(e && e.status?.toString() == '404') return;
+                                        console.log(e," fetching unique id on table data element id : ",args)
                                         const message = defaultStr(e?.message,e?.msg);
                                         if(message){
                                             context.onNoValidate({...args,msg:message,message,error:e,context,validRule:context.getValidRule()});