@fto-consult/expo-ui 2.15.0 → 2.16.0

package/package.json

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

package/src/components/Datagrid/utils.js

@@ -115,7 +115,7 @@ export const ROW_BORDER_STYLE = {
 }
 
 
-export const DATE_COLUMN_WIDTH = 180;
+export const DATE_COLUMN_WIDTH = 200;
 
 export {LINE_HEIGHT}
 

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

@@ -3,7 +3,7 @@ import KeyboardEventHandler from "../KeyboardEventHandler";
 const {getActions,getFormFields,Forms} = require("../utils")
 import TextField,{parseDecimal} from "$ecomponents/TextField";
 import Icon from "$ecomponents/Icon";
-import {extendObj,isBool,isUndefined,uniqid,defaultObj,isObj,defaultFunc,isFunction,isNumber,arrayValueExists,defaultVal,defaultStr,isNonNullString,defaultBool,defaultDecimal} from "$utils";
+import {extendObj,isBool,isUndefined,uniqid,isValidDataFileName,defaultObj,isObj,defaultFunc,isFunction,isNumber,arrayValueExists,defaultVal,defaultStr,isNonNullString,defaultBool,defaultDecimal} from "$utils";
 import {Component as AppComponent} from "$react";
 import {observable,addObserver} from "$observable";
 import {Validator} from "$validator";
@@ -47,8 +47,11 @@ export default class Field extends AppComponent {
             render_filter,
             maxLength,
             validParams,
+            jsType,
+            type,
         } = props;
         Object.defineProperties(this,{
+            type : {value : defaultStr(jsType,type,"text").trim().toLowerCase()},
             __disabledSymbol : {value : Symbol('_disabled'),override:false,writable:false},
             __isDisabledSymbol : { value : Symbol('_isDisabled'),override:false,writable:false},
             __isReadOnlySymbol : { value : Symbol('_isReadOnly'),override:false,writable:false},
@@ -89,7 +92,7 @@ export default class Field extends AppComponent {
             },
             /** si la valeur valide à retourner par le field est de type decimal */
             canValueBeDecimal : {
-                value : this.isTextField() && arrayValueExists(['number','decimal'],this.props.type)
+                value : this.isTextField() && arrayValueExists(['number','decimal'],this.type)
                 ,override : false, writable : false
             },
             wrapperRef : {
@@ -240,6 +243,12 @@ export default class Field extends AppComponent {
         });
     }
     onValidatorValid(args){
+        if(!this.isFilter() && ((this.props.allowWhiteSpaces === false) || ((this.type ==='id' || this.type =='piece') && this.props.allowWhiteSpaces !== true))){
+            const value = isNonNullString(args.value) && args.value.replaceAll("/","").replaceAll("\\",'') || undefined;
+            if(value && (value.contains(" ") || !isValidDataFileName(value))){
+                return "Veuillez renseigner une valeur ne contenant pas d'espace ou de caractère accentués";
+            }
+        }
         if(isFunction(this.props.onValidatorValid)){
             return this.props.onValidatorValid(args);
         }
@@ -321,7 +330,7 @@ export default class Field extends AppComponent {
      * sont pas par défaut définies comme champ de formulaire
     */
     parseDecimal(v){
-        return parseDecimal(v,defaultStr(this.props.type,this.type));
+        return parseDecimal(v,this.type);
     }
     getInvalidValue(){
         return this.state.invalidValue;
@@ -876,7 +885,7 @@ export default class Field extends AppComponent {
         delete rest.archivable;
 
         this.___formattedField = undefined;
-        let _type = this.type = defaultStr(jsType,this.props.type,this.type,"text").trim().toLowerCase();
+        let _type = this.type;
         format = defaultStr(format).toLowerCase().trim();
         tooltip = defaultVal(tooltip,title);
 
@@ -1063,6 +1072,10 @@ Field.propTypes = {
         elle doit toujours être définie dans la classe qui hérite directement au composant Field
     */
     /////getFieldInstance : PropTypes.func.IsRequired,
+    /***allowWhiteSpace, si le champ aceeptera les espaces où les caractères accentuées 
+     * lorsque allowWhiteSpace === false alors on vérifiera si le champ n'admet pas des caractères accentuées
+    */
+    allowWhiteSpaces : PropTypes.bool,
 }
 
 const styles = StyleSheet.create({

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

@@ -23,7 +23,6 @@ const TableDataSelectField = React.forwardRef((_props,ref)=>{
     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))){
@@ -45,9 +44,10 @@ const TableDataSelectField = React.forwardRef((_props,ref)=>{
         isUpdate = false;
     }
     const defaultFields = [foreignKeyColumn];
-    if(foreignKeyLabel){
+    if(isNonNullString(foreignKeyLabel)){
+        foreignKeyLabel = foreignKeyLabel.trim();
         defaultFields.push(foreignKeyLabel);
-    }
+    } 
     if(fetchDataOpts.fields !== 'all' && (!Array.isArray(fetchDataOpts.fields) || !fetchDataOpts.fields.length)){
         fetchDataOpts.fields = defaultFields;
     }
@@ -86,7 +86,7 @@ const TableDataSelectField = React.forwardRef((_props,ref)=>{
     
     let dat = isNonNullString(foreignKeyColumnValue)? {
         [foreignKeyColumn]:foreignKeyColumnValue, 
-        ...(foreignKeyLabel ? {[foreignKeyLabel]:foreignKeyColumnValue+", introuvable dans le système"}:{})
+        ...(isNonNullString(foreignKeyLabel) ? {[foreignKeyLabel]:foreignKeyColumnValue+", introuvable dans le système"}:{})
     } : null;
     
     const context = {
@@ -158,7 +158,15 @@ const TableDataSelectField = React.forwardRef((_props,ref)=>{
     }
     const rItem = (p)=>{
         if(!isObj(p) || !isObj(p.item)) return null;
-        const itemLabel = defaultStr(foreignKeyLabel && p.item[foreignKeyLabel]), itemCode = defaultStr(p.item[foreignKeyColumn]);
+        let itemLabel = typeof foreignKeyLabel =='function'? foreignKeyLabel(p) : undefined;
+        if(isNonNullString(foreignKeyLabel)){
+            itemLabel = defaultStr(p.item[foreignKeyLabel] !== undefined && p.item[foreignKeyLabel] !== null && p.item[foreignKeyLabel].toString(), p.item[foreignKeyColumn] !== undefined && p.item[foreignKeyColumn] !== null && p.item[foreignKeyColumn].toString());
+        }
+        const itemCode = p.item[foreignKeyColumn] !== undefined && p.item[foreignKeyColumn] !== null && p.item[foreignKeyColumn].toString() || undefined;
+        if(!isNonNullString(itemLabel)){
+            itemLabel = "";
+        }
+        if(!itemLabel) return itemCode;
         return (itemLabel !== itemCode ? ((isNonNullString(itemCode)?("["+itemCode+"] "):"")+itemLabel):itemLabel);
     }
     const dialogProps = defaultObj(props.dialogProps);
@@ -212,7 +220,10 @@ TableDataSelectField.propTypes = {
     fetchItems : PropTypes.func,//la fonction de rappel à utiliser pour faire une requête fetch permettant de selectionner les données à distance
     beforeFetchItems : PropTypes.func, //appelée immédiatement avant l'exécution de la requête fetch
     foreignKeyColumn : PropTypes.string.isRequired,//le nom de la clé étrangère à laquelle fait référence la colone dans la fKeyTable
-    foreignKeyLabel : PropTypes.string,
+    foreignKeyLabel : PropTypes.oneOfType([
+        PropTypes.string,
+        PropTypes.func, //s'il s'agit d'une fonciton qui sera appelée
+    ]),
     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,

package/src/layouts/DatabaseStatistics/index.js

@@ -19,7 +19,7 @@ export default function DatabaseStatisticScreen ({withScreen,title:customTitle,c
         }
         let content = [];
         Object.map(tables,(table,index,suffix)=>{
-            if(isObj(table)){
+            if(isObj(table) && table.databaseStatistic !== false){
                 content.push(
                     <Cell elevation = {5} withSurface mobileSize={12} desktopSize={3} tabletSize={4} {...contentProps} key = {index} >
                         <DatabaseStatistic

package/src/layouts/Fab/index.js

@@ -1,46 +1,76 @@
 import Fab from "$ecomponents/Fab";
 import { StyleSheet } from "react-native";
-import actions from "./actions";
-import {isObjOrArray} from "$utils";
-import {removeFabRef,createFabRef} from "./utils";
-import PropTypes from "prop-types";
+import {isObjOrArray,isObj,defaultStr,defaultObj} from "$utils";
 import APP from "$capp";
 import React from "$react";
-import {sanitizeName} from "$escreens/utils";
+import {navigateToTableData} from "$enavigation/utils";
+import PropTypes from "prop-types";
+import theme from "$theme";
+import {isLoggedIn as isAuthLoggedIn} from "$cauth/utils/session";
 
 export * from "./utils";
 
-const FABContainer = React.forwardRef((props,ref)=>{
-  const {state,actions:customActions,screenName,...rest} = props;
-  const sScreenName = sanitizeName(screenName);
-  ref = ref || createFabRef(screenName);
+const FabLayoutComponent = React.forwardRef(({style,screenName,tables,...props},ref)=>{
+  const [isLoggedIn,setIsLoggedIn] = React.useState(isAuthLoggedIn());
+  const isMounted = React.useIsMounted();
+  const actions = React.useCallback(()=>{
+      if(!isLoggedIn) return null;
+      const a = [];
+      Object.map(tables,(table,i,index)=>{
+          if(!isObj(table) || table.showInFab === false) return;
+          const icon  = defaultStr(table.addIcon,"material-add");
+          const text = defaultStr(table.text,table.label);
+          const addText = defaultStr(table.newElementLabel,"Nouveau");
+          const tableName = defaultStr(table.table,table.tableName);
+          let auth = true;
+          if(typeof Auth !=='undefined' && Auth && Auth.isTableDataAllowed){
+             auth = Auth.isTableDataAllowed({table:tableName,action:'create'});
+          }
+          if(!table || !icon || !text || !auth) return;
+          let fabProps = typeof table.getFabProps ==='function'? table.getFabProps({tableName}) : defaultObj(table.fabProps);;
+          if(fabProps === false) return;
+          fabProps = defaultObj(fabProps);
+          const cSuffix = theme.Colors.getSuffix(index);
+          const color = theme.Colors.isValid(fabProps.color)? fabProps.color : theme.Colors.getContrast(cSuffix);
+          const backgroundColor = theme.Colors.isValid(fabProps.backgroundColor)?fabProps.backgroundColor : cSuffix;
+          const label = defaultStr(fabProps.label,fabProps.text,"{0} | {1}".sprintf(addText,text));
+          a.push({
+              icon,
+              label,
+              tooltip:label,
+              ...fabProps,
+              color,
+              backgroundColor,
+              onPress : (e)=>{
+                  if(fabProps.onPress && fabProps.onPress({...React.getOnPressArgs(e),table,tableName,navigateToTableData,navigate:navigateToTableData}) === false) return;
+                  navigateToTableData({tableName});
+              }   
+          })
+      })
+      return a.length ? a : null;
+  },[isLoggedIn])();
   React.useEffect(()=>{
-    const onFocusFab = ({sanitizedName})=>{
-        const isFocused = sanitizedName === sScreenName;
-        if(isFocused && ref.current && ref.current.show){
-            ref.current.show();
-        }
-    }, onBlurFab = ({sanitizedName})=>{
-      const isBlured = sanitizedName == sScreenName;
-      if(isBlured && ref.current && ref.current.hide){
-        ref.current.hide();
+      const onLogin = ()=>{
+          if(!isMounted())return;
+          setIsLoggedIn(true);
+      },onLogout = ()=>{
+          if(!isMounted()) return;
+          setIsLoggedIn(false);
+      }
+      APP.on(APP.EVENTS.AUTH_LOGIN_USER,onLogin);
+      APP.on(APP.EVENTS.AUTH_LOGOUT_USER,onLogout);
+      return ()=>{
+          APP.off(APP.EVENTS.AUTH_LOGIN_USER,onLogin);
+          APP.off(APP.EVENTS.AUTH_LOGOUT_USER,onLogout);
       }
-    }
-    APP.on(APP.EVENTS.SCREEN_FOCUS,onFocusFab);
-    APP.on(APP.EVENTS.SCREEN_BLUR,onBlurFab);
-    return ()=>{
-      APP.off(APP.EVENTS.SCREEN_FOCUS,onFocusFab);
-      APP.off(APP.EVENTS.SCREEN_BLUR,onBlurFab);
-      removeFabRef(screenName);
-    }
   },[])
-  return <Fab.Group
-        {...rest}
+  return actions ? <Fab.Group
+        {...props}
         screenName = {screenName}
         ref = {ref}
-        style={styles.fab}
-        actions = {isObjOrArray(customActions) && Object.size(customActions,true)?customActions : actions()}
-    />
+        style={[styles.fab,style]}
+        actions = {actions}
+    /> : null;
 });
 const styles = StyleSheet.create({
     fab: {
@@ -51,9 +81,14 @@ const styles = StyleSheet.create({
     },
   })
 
-  export default FABContainer;
+  export default FabLayoutComponent;
+
+  FabLayoutComponent.displayName = "FabLayoutComponent";
 
-  FABContainer.propTypes = {
-     screenName : PropTypes.string,
-  }
-  FABContainer.displayName = "FABContainer";
+  FabLayoutComponent.propTypes = {
+    tables : PropTypes.oneOfType([
+        PropTypes.objectOf(PropTypes.object),
+        PropTypes.arrayOf(PropTypes.object)
+    ]).isRequired,
+    screenName : PropTypes.string,
+  }

package/src/layouts/Screen/TableData.js

@@ -22,6 +22,7 @@ import cActions from "$cactions";
 import APP from "$capp/instance";
 import { generatedColumnsProperties } from "./utils";
 import i18n from "$i18n";
+import fetch from "$capi/fetch";
 
 
 const HIDE_PRELOADER_TIMEOUT = 300;
@@ -93,12 +94,12 @@ export default class TableDataScreenComponent extends FormDataScreen{
                 if((f.type =='id' || f.type =='piece' || f.unique === true) && f.unique !== false && f.disabled !== true && f.editable !== false && f.readOnly !== true){
                     const {onBlur} = f;
                     f.onBlur = (args)=>{
-                        args = {...f,...args,columnField:name,fieldName:name,id:args.value};
+                        args = {...f,...args,fetch,columnField:name,fieldName:name,id:args.value};
                         const {context} = args;
                         const r = typeof onBlur =='function'? onBlur (args) : undefined;
                         if(r === false) return r;
                         //on applique la validation seulement en cas de non mise à jour
-                        if(!this.isDocEditingRef.current && context && typeof context.onNoValidate =='function'){
+                        if(!this.isCurrentDocEditingUpdate() && context && typeof context.onNoValidate =='function'){
                             const cb = typeof field.fetchUniqueId =='function'? field.fetchUniqueId : typeof this.fetchUniqueId =='function'? this.fetchUniqueId : undefined;
                             if(cb){
                                 const r2 = cb(args);
@@ -152,6 +153,9 @@ export default class TableDataScreenComponent extends FormDataScreen{
         this.hidePreloader = this.hidePreloader.bind(this);
         this.showPreloader = this.showPreloader.bind(this);
     };
+    isCurrentDocEditingUpdate(){
+        return this.isDocEditingRef.current === true ? true : false;
+    }
     resetState(){
         Object.map(this.INITIAL_STATE,(s,k)=>{
             delete this.INITIAL_STATE[k];
@@ -224,6 +228,7 @@ export default class TableDataScreenComponent extends FormDataScreen{
             containerProps : customContainerProps,
             formProps : customFormProps,
             newElementLabel,
+            prepareField,
             ...rest
         } = getScreenProps(props);
         const table = this.table;
@@ -231,35 +236,50 @@ export default class TableDataScreenComponent extends FormDataScreen{
         const tableName = this.tableName;
         const sessionName = this.INITIAL_STATE.sessionName = defaultStr(customSessionName,"table-form-data"+tableName);
         const isUpdated = this.isDocEditing(data);
-        this.isDocEditingRef.current = isUpdated;
+        this.isDocEditingRef.current = !!isUpdated;
         const isMobOrTab = isMobileOrTabletMedia();
         let archived = this.isArchived(); 
         this.INITIAL_STATE.archived = archived;
         this.INITIAL_STATE.tableName = tableName;
         const fields = {};
-        Object.map(this.fields,(field,i)=>{
+        Object.map(this.fields,(field,i,counterIndex)=>{
+            let currentField = isObj(field)?Object.clone(field):field;
             if(isObj(field)){
-                fields[i] = Object.clone(field);
+                const type = currentField.type = defaultStr(currentField.jsType,currentField.type,"text").toLowerCase();
+                /**** lorsqu'un champ porte la propriété visibleOnlyOnEditing  à true alors ce champ sera disponible uniquement en cas de modification */
+                if(currentField.visibleOnlyOnEditing === true && !isUpdated){
+                    currentField.form = false;
+                }
+                // les champs de type date par défaut qui sont requis, auront comme valeur par défaut la date actuelle s'il ne sont pas définies
+                if((type.contains('date') || type.contains('time')) && currentField.required === true && !currentField.defaultValue){
+                    currentField.defaultValue = new Date();
+                }
                 generatedColumnsProperties.map((f)=>{
                     //on affiche les champs générés uniquement  en cas de mise à jour
-                    if(field[f] === true){
-                        fields[f].visible = isUpdated ? true : false;
-                        fields[i].readOnly = true;
+                    if(currentField[f] === true){
+                        currentField.visible = isUpdated ? true : false;
+                        currentField.readOnly = true;
                     }
                 });
                 if(isUpdated){
                     //la props readOnlyOnEditing permet de rendre le champ readOnly en cas de mise à jour de la tableData
-                    if((field.readOnlyOnEditing === true)){
-                        fields[i].readOnly = true;
+                    if((currentField.readOnlyOnEditing === true)){
+                        currentField.readOnly = true;
                     }
-                    if((field.disabledOnEditing === true)){
-                        fields[i].disabled = true;
+                    if((currentField.disabledOnEditing === true)){
+                        currentField.disabled = true;
                     }
                 }
                 
-            } else {
-                fields[i] = field;
             }
+            ///on effectue une mutator sur le champ en cours de modification
+            if(typeof prepareField =='function'){
+                const name = isObj(currentField) && defaultStr(currentField.field,i) || "";
+                const isPrimary = name && this.primaryKeyFields[name] && true || false;
+                const f = prepareField({field:defaultObj(currentField),isUpdate:isUpdated,name,index:i,counterIndex,isPrimary,fields,contex:this,data,datas,currentIndex,isUpdated,tableName,table});  
+                if(f === false) return;
+            }
+            fields[i] = currentField;
         })
         if(isObj(customFields)){
             extendObj(true,fields,customFields);
@@ -398,7 +418,7 @@ export default class TableDataScreenComponent extends FormDataScreen{
             }
         } else {
             mainContent = <Surface  {...contentProps} testID={testID+"_MainContentContainer"} elevation={elevation} style={[styles.container,styles.noPadding,{paddingTop:0,marginTop:0}]}>
-                <ScrollView virtualized testID={testID+"_MainContentScrollView"}>
+                <ScrollView virtualized testID={testID+"_MainContentScrollViewWithoutTab"}>
                     <View testID={testID+"_MainContent"} style={[styles.screenContent,!isMobOrTab && theme.styles.p1,header?styles.screenContentWithHeader:null]}>
                         {header}
                         {content}
@@ -787,6 +807,7 @@ export default class TableDataScreenComponent extends FormDataScreen{
 
 TableDataScreenComponent.propTypes = {
     ...defaultObj(FormData.propTypes),
+    prepareField : PropTypes.func,//La fonction permettant de faire des mutations sur le champ field à passer au formulaire form. si elle retourne false alors la field ne sera pas pris een compte
     table : PropTypes.shape({
         tableName : PropTypes.string,
         table : PropTypes.string,

package/src/navigation/utils.js

@@ -3,7 +3,6 @@
 // license that can be found in the LICENSE file.
 import {navigate,sanitizeName} from "$cnavigation";
 import {isNonNullString,defaultObj,isObj} from "$utils";
-
 export const tableDataRouteName = 'TableData';
 
 export const navigateToTableData = function(tableName,params,actionType){
@@ -54,6 +53,9 @@ export const getTableDataListRouteName = function(tableName){
 export const navigateToTableDataList = function (tableName,params){
     const route = getTableDataListRouteName(tableName);
     if(isNonNullString(route)){
+        if(!Auth.isTableDataAllowed({table:tableName,action:'read'})){
+            return Auth.showError() 
+       }
         return navigate({routeName:route,params});
     }
     return false;

package/src/layouts/Fab/actions.js

@@ -1,5 +0,0 @@
-
-
-export default function mainFab(){
-   return null;
-}