@fto-consult/expo-ui 1.5.13 → 2.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fto-consult/expo-ui",
-  "version": "1.5.13",
+  "version": "2.0.0",
   "description": "Bibliothèque de composants UI Expo,react-native",
   "main": "index.js",
   "scripts": {
@@ -61,43 +61,46 @@
     "@expo/html-elements": "^0.2.0",
     "@expo/metro-config": "^0.4.0",
     "@expo/webpack-config": "^0.17.2",
-    "@fto-consult/common": "^1.9.7",
+    "@fto-consult/common": "^1.9.8",
     "@gorhom/portal": "^1.0.14",
     "@react-native-async-storage/async-storage": "~1.17.3",
-    "@react-native-community/datetimepicker": "6.2.0",
-    "@react-native-community/netinfo": "9.3.0",
+    "@react-native-community/datetimepicker": "6.5.2",
+    "@react-native-community/netinfo": "9.3.5",
     "@react-navigation/native": "^6.0.13",
     "@react-navigation/native-stack": "^6.9.1",
-    "@shopify/flash-list": "1.1.0",
+    "@shopify/flash-list": "1.3.1",
     "babel-plugin-inline-dotenv": "^1.7.0",
     "babel-plugin-module-resolver": "^4.1.0",
     "babel-plugin-transform-inline-environment-variables": "^0.4.4",
-    "expo": "^46.0.15",
-    "expo-camera": "~12.3.0",
-    "expo-clipboard": "~3.1.0",
-    "expo-image-picker": "~13.3.1",
-    "expo-linking": "~3.2.2",
-    "expo-sqlite": "~10.3.0",
-    "expo-status-bar": "~1.4.0",
-    "expo-system-ui": "~1.3.0",
-    "expo-web-browser": "~11.0.0",
+    "expo": "^47.0.0",
+    "expo-camera": "~13.0.0",
+    "expo-clipboard": "~4.0.1",
+    "expo-image-picker": "~14.0.1",
+    "expo-linking": "~3.2.3",
+    "expo-sqlite": "~11.0.0",
+    "expo-status-bar": "~1.4.2",
+    "expo-system-ui": "~2.0.1",
+    "expo-web-browser": "~12.0.0",
     "google-libphonenumber": "^3.2.31",
     "htmlparser2-without-node-native": "^3.9.2",
+    "mongo-parse": "^2.1.0",
     "parent-package-json": "^2.0.1",
     "prop-types": "^15.8.1",
     "react-apexcharts": "^1.4.0",
     "react-content-loader": "^6.2.0",
-    "react-dom": "18.0.0",
+    "react-dom": "18.1.0",
     "react-native-big-list": "^1.5.5",
-    "react-native-gesture-handler": "~2.5.0",
+    "react-native-gesture-handler": "~2.8.0",
     "react-native-paper": "^4.12.5",
     "react-native-paper-dates": "^0.9.2",
-    "react-native-reanimated": "~2.9.1",
-    "react-native-safe-area-context": "4.3.1",
-    "react-native-svg": "12.3.0",
+    "react-native-reanimated": "~2.12.0",
+    "react-native-safe-area-context": "4.4.1",
+    "react-native-svg": "13.4.0",
     "react-native-web": "~0.18.7",
-    "react-native-webview": "11.23.0",
+    "react-native-webview": "11.23.1",
     "sharp-cli": "^2.1.0",
-    "tippy.js": "^6.3.7"
+    "tippy.js": "^6.3.7",
+    "react-native": "0.70.5",
+    "react": "18.1.0"
   }
 }

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

@@ -17,7 +17,7 @@ import {sortBy,isDecimal,extendObj,isObjOrArray,defaultNumber,defaultStr,isFunct
 import {Datagrid as DatagridContentLoader} from "$ecomponents/ContentLoader";
 import React from "$react";
 import DateLib from "$lib/date";
-import Filter,{canHandleFilter} from "$ecomponents/Filter";
+import Filter,{canHandleFilter,prepareFilters} from "$ecomponents/Filter";
 import {CHECKED_ICON_NAME} from "$ecomponents/Checkbox";
 import { COLUMN_WIDTH,DATE_COLUMN_WIDTH } from "../utils";
 import { StyleSheet,Dimensions,useWindowDimensions} from "react-native";
@@ -29,6 +29,7 @@ import i18n from "$i18n";
 import { makePhoneCall,canMakePhoneCall as canMakeCall} from "$makePhoneCall";
 import copyToClipboard from "$capp/clipboard";
 import { Pressable } from "react-native";
+import appConfig from "$capp/config";
 
 export const arrayValueSeparator = ", ";
 
@@ -94,13 +95,13 @@ export default class CommonDatagridComponent extends AppComponent {
                 value : uniqid(footerFieldName),override:false, writable: false
             },
         }) 
-        if(!isNonNullString(this.state.sort.column)){
-            this.state.sort.column = "date";
-        }
+        
         this.state.sort.dir = defaultStr(this.state.sort.dir,this.state.sort.column == "date"?"desc":'asc')
         this.hasColumnsHalreadyInitialized = false;
         this.initColumns(props.columns);
-        
+        if(!isNonNullString(this.state.sort.column) && "date" in this.state.columns){
+            this.state.sort.column = "date";
+        }
         this.INITIAL_STATE = {
             data,
             sort : this.state.sort
@@ -1171,41 +1172,14 @@ export default class CommonDatagridComponent extends AppComponent {
         }
         return this.doFilter(arg);
     }
+    ///si les filtres devront être convertis au format SQL
+    willConvertFiltersToSQL(){
+        return !!defaultVal(this.props.convertFiltersToSQL,appConfig.get("convertDatagridFiltersToSQL"));;
+    }
     getFilters(){
-        let filters = {}
         this.filters = extendObj(true,{},this.filteredValues,this.filters)
-        for(let i in this.filters){
-            let f = this.filters[i];
-            if(!this.canHandleFilterVal(f)) {
-                continue;
-            }
-            f.field = defaultStr(f.field,i);
-            if(f.action =="$today"){
-                f.operator = "$and";
-                f.action = "$eq"
-            }
-            filters[f.operator] = defaultArray(filters[f.operator]);
-            let ob = {};
-            ob[f.field] = {}
-            if(f.action == "$period"){
-                let sp = defaultStr(f.value);
-                if(sp){
-                    sp = sp.split("=>");
-                    if(DateLib.isValidSQLDate(sp[0]) && DateLib.isValidSQLDate(sp[1])){
-                        filters[f.operator].push({
-                            [f.field] : {$gte:sp[0]}
-                        })
-                        filters[f.operator].push({
-                            [f.field] : {$lte:sp[1]}
-                        })        
-                    }
-                }
-            } else {
-                ob[f.field][f.action] = f.value;
-                filters[f.operator].push(ob)
-            }
-        }
-        return filters;
+        const preparedFilters = prepareFilters(this.filters,{filter:this.canHandleFilterVal.bind(this),convertToSQL:this.willConvertFiltersToSQL()});
+        return preparedFilters;
     }
     fetchData(){}
     /****  Filtre le tableau */
@@ -1665,6 +1639,8 @@ CommonDatagridComponent.propTypes = {
         PropTypes.object,
         PropTypes.func,
     ]),
+    /*** si les filtres de données seront convertis au format SQL avant d'effectuer la requête distante */
+    convertFiltersToSQL : PropTypes.bool,
     isLoading : PropTypes.bool,///si les données sont en train d'être chargées
     session : PropTypes.bool, /// si les données de sessions seront persistées
     exportTableProps : PropTypes.oneOfType([

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

@@ -135,12 +135,13 @@ export default class CommonTableDatagrid extends CommonDatagrid{
                     return this.resolveFetchedDataPromise({cb,data:this.INITIAL_STATE.data}).then(resolve).catch(reject)
                 }
                 let fetchData  = this.INITIAL_STATE.fetchData;
-                fetchOptions = defaultObj(fetchOptions);
+                fetchOptions = isObj(fetchOptions)?Object.clone(fetchOptions):{};
                 fetchOptions.selector = defaultObj(fetchOptions.selector);
-                fetchOptions.selector.$and = defaultArray(fetchOptions.selector.$and);
                 fetchOptions.dataSources = this.currentDataSources;
-                fetchOptions = extendObj(true,true,{},{selector : this.getFilters()},fetchOptions,this.filtersSelectors);
+                const fetchFilters = this.getFilters();
+                fetchOptions = extendObj(true,true,{},fetchOptions,{selector : fetchFilters});
                 fetchOptions.dataSources = this.currentDataSources;
+                fetchOptions.sort = this.state.sort;
                 let limit = this.getQueryLimit();
                 if(limit > 0 && !this.isPivotDatagrid()){
                     fetchOptions.limit = limit;

package/src/components/Filter/utils.js

@@ -1,5 +1,7 @@
 
-import {isNonNullString,defaultStr,isObjOrArray,isObj} from "$utils";
+import {isNonNullString,defaultStr,defaultArray,isObjOrArray,isObj} from "$utils";
+import DateLib from "$date";
+import mangoParser from "mongo-parse";
 
 export const filterTextTypes = ['text','number','email','search','tel','url','password',"id","idfield",'piecefield','piece'];
 
@@ -49,33 +51,97 @@ export const canHandleFilter = (f)=>{
 
 }
 
+export const regexExpressions = {
+    notcontains : {
+        left : "^((?!(",
+        right : ")).)*$",
+        /***@see : https://www.w3schools.com/sql/sql_like.asp */
+        sql : (string)=>{
+            return "%"+defaultStr(string).ltrim("%").rtrim("%")+"%";
+        }
+    },
+    notequals : {
+        left : "^(?!",
+        right : "$).*$",
+    },
+    equals : {
+        left : "/^",
+        right : '$/'
+    },
+    startswith : {
+        left : "/^",
+        right : '/',
+        sql : (string)=>{
+            return defaultStr(string).rtrim("%")+"%";
+        }
+    },
+    endswith : {
+        left : "",
+        right : '$/',
+        sql : (string)=>{
+            return "%"+defaultStr(string).ltrim("%");
+        }
+    },
+    contains : {
+        left : "/",
+        right : '/',
+        sql : (string)=>{
+            return "%"+defaultStr(string).ltrim("%").rtrim("%")+"%";
+        }
+    },
+}
+/**** prend en paramètre une chaine de caractère et un nom d'opérateur et génère 
+ *  la chaine de caracètre mango regex correspondant
+ */
+const toMangoRegex = (val,operator)=>{
+    if(!isNonNullString(val) || !isNonNullString(operator) || !regexExpressions[operator]) return "";
+    const rOp = regexExpressions[operator];
+    return rOp.left+escapeRegexChars(val)+rOp.right;
+}
 export const regexParser = {
     equals : (val)=> {
-        if(!isNonNullString(val)) return '';
-        return "/^"+escapeRegexChars(val)+'$/';
+        return toMangoRegex(val,"equals");
     },
     startswith : (val) => {
-        if(!isNonNullString(val)) return "";
-        return "/^"+escapeRegexChars(val)+'/'
+        return toMangoRegex(val,"startswith");
     },
     endswith : (val) => {
-        if(!isNonNullString(val)) return ""; 
-        return  escapeRegexChars(val)+'$/'
+        return toMangoRegex(val,"endswith");
     },
     contains : (val) => {
-      if(!isNonNullString(val)) return "";
-      return  "/"+escapeRegexChars(val)+'/'
+        return toMangoRegex(val,"contains");
     },
     notequals : (val) => {
-      if(!isNonNullString(val)) return ""
-      return "^(?!"+escapeRegexChars(val)+"$).*$"
+       return toMangoRegex(val,"notequals");
     },
     notcontains : (val) =>{
-      if(!isNonNullString(val)) return ""; 
-      return "^((?!("+escapeRegexChars(val)+")).)*$"
+       return toMangoRegex(val,"notcontains");
     }
- }
-
+}
+/*** prend une expression regulière et le convertis en operateur, valeur 
+ * @param {string} la valeur otenue au format regex
+*/
+export const regexDeparser = (regexValue)=>{
+    if(!regexValue) return null;
+    regexValue = regexValue.toString();
+    if(regexValue.endsWith("/i")){
+        regexValue = regexValue.rtrim("/i")+"/";
+    }
+    if(!isNonNullString(regexValue)) return null;
+    for(let i in regexExpressions){
+        const p = regexExpressions[i];
+        let rVal = regexValue.ltrim("/").rtrim("/");
+        const pLeft = p.left.ltrim("/"),pRight = p.right.rtrim("/");
+        if(rVal.startsWith(pLeft) && rVal.endsWith(pRight)){
+            return {
+                operator : i,
+                value : rVal.ltrim(pLeft).rtrim(pRight),
+                regexValue : rVal,
+            }
+        }
+    }
+    return null;
+}
 export const matchPouchDBOperator = (operator,value)=>{
     if(!isNonNullString(operator)) return null;
     if(!(value) && !isDecimal(value)) return null;
@@ -168,7 +234,7 @@ let Operators = {
         regexpSupported: false
     }
 };
- let utils = {
+ const utils = {
     ALL: '#All#',
     NONE: '#None#',
     BLANK: '#Blank#"',
@@ -286,4 +352,140 @@ for(let i in utils.items){
     utils.constants[i] = i;
 }
 
-export default utils;
+/*** prend en paramètre un objet de filtres et les prépare pour la requête distante
+ * @param {object} filtersToPrepare les filtres à exploiter pour la requête distante 
+ * le tableau des filtres 
+ * @param {function|object} filter|options, la méthode utilisée pour effectuer un filtre sur les les élément à prendre en compte
+ * 
+*/
+export const prepareFilters = (filtersToPrepare,opts)=>{
+    if(typeof opts =='function'){
+        opts = {filter:opts};
+    }
+    let {filter,convertToSQL:convToSQL} = opts;
+    const filters = {}
+    filter = typeof filter =='function'? filter : x=>true;
+    Object.map(filtersToPrepare,(f,i)=>{
+        if(!isObj(f) || !filter(f) || !isNonNullString(f.operator) || !isNonNullString(f.action)) {
+            return;
+        }
+        f.field = defaultStr(f.field,i).trim();
+        f.action = defaultStr(f.action).toLowerCase().trim();
+        if(f.action =="$today"){
+            f.operator = "$and";
+            f.action = "$eq"
+        }
+        filters[f.operator] = defaultArray(filters[f.operator]);
+        const ob = {};
+        ob[f.field] = {}
+        if(f.action == "$period"){
+            let sp = defaultStr(f.value);
+            if(sp){
+                sp = sp.split("=>");
+                if(DateLib.isValidSQLDate(sp[0]) && DateLib.isValidSQLDate(sp[1])){
+                    filters[f.operator].push({
+                        [f.field] : {$gte:sp[0]}
+                    })
+                    filters[f.operator].push({
+                        [f.field] : {$lte:sp[1]}
+                    })        
+                }
+            }
+        } else {
+            ob[f.field][f.action] = f.value;
+            filters[f.operator].push(ob)
+        }
+    });
+    return convToSQL ? convertToSQL(filters) : filters;
+}
+
+/*** la liste des actions supportés par les filtres 
+ * @see : https://github.com/cloudant/mango from mango query mapping
+ *  
+*/
+export const actions = ["$lt", "$gt", "$lte", "$gte", "$eq", "$exists", "$type", "$in", "$nin", "$all", "$size", "$or", "$nor", "$not", "$mod", "$regex", "$elemMatch"]
+
+export default utils;
+
+/*** convertis les filtres pris au format mangoesQuey, au format de sortie SQL
+ * @see : https://github.com/gordonBusyman/mongo-to-sql-converter
+ * @param {object} filters, les filtres au format mango query à convertir au format SQL
+ */
+export const convertToSQL = (filters)=>{
+    if(!isObjOrArray(filters)) return [];
+    const whereParsed = mangoParser.parse(filters)
+    return whereParsed.parts.reduce((prev, curr) => {
+        const c = whereClauseToSQL(curr);
+        return c ? [...prev,c] : prev;
+    }, []).map((filter)=>{
+        if(filter.field === MANGO_QUERY_OPERATOR){
+            delete filter.field;
+        }
+        return filter;
+    });
+}
+export const MANGO_QUERY_OPERATOR = "MANGO_QUERY_OPERATOR";
+const whereClauseToSQL = (currentMongoParserElement) => {
+    let { field, operator, operand } = currentMongoParserElement;
+    if(!isNonNullString(operator) || !operatorsMap[operator]) return null;
+    operator = operatorsMap[operator]
+    if(operator == 'LIKE'){
+        const deparsed = regexDeparser(operand);
+        if(!isObj(deparsed)){
+            return null;
+        }
+        operand = deparsed.value;
+        const deparsedOp = deparsed.operator;
+        if(deparsedOp =='notcontains'){
+            operator = "NOT LIKE";
+        }
+        if(deparsedOp =='equals'){
+            operator = operatorsMap.$eq;
+        } else if(deparsedOp =='notequals'){
+            operator = operatorsMap.$ne;
+        } else{
+            const opMap = regexExpressions[deparsedOp];
+            if(!opMap || typeof opMap.sql !=='function') return null;
+            operand = opMap.sql(operand);
+        }
+    }
+    // AND or OR operators with nested elements
+    if (typeof field === 'undefined') {
+      // parse nested elements
+      const nested = operand.reduce((prev, curr) => {
+        const parsed = mangoParser.parse(curr);
+        const prepared = whereClauseToSQL(parsed.parts[0]);
+        if(prepared){
+            return [...prev,prepared]
+        }
+        return prev;
+      }, [])
+  
+      // nested WHERE element
+      return {
+        field: MANGO_QUERY_OPERATOR,
+        operator,
+        operand: nested
+      }
+    }
+    // simple WHERE element
+    return {
+      field,
+      operator,
+      operand
+    }
+  }
+
+  // map mongoDB -> SQL operators
+const operatorsMap = {
+    $or: 'OR',
+    $and: 'AND',
+    $lt: '<',
+    $lte: '<=',
+    $gt: '>',
+    $gte: '>=',
+    $ne: '!=',
+    $in: 'IN',
+    $eq: '=',
+    $regex : "LIKE"
+  }