@fto-consult/expo-ui 1.0.4

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

@@ -0,0 +1,245 @@
+import CommonDatagrid from "./Common";
+import {defaultObj,defaultStr,isNonNullString,isFunction,isPromise} from "$utils";
+//import {mountDatabaseTable,unmountDatabaseTable,unlockTable,isTableLocked} from "$database/utils";
+import actions from "$actions";
+import PropTypes from "prop-types";
+import APP from "$capp";
+//import {getDataFunc} from "$database/getData";
+
+export default class CommonTableDatagrid extends CommonDatagrid{
+    constructor(props){
+        super(props);
+        let {
+            data,
+            tableName,
+            table,
+            dbName,
+            server,
+        } = props;
+        dbName = CommonDatagrid.getDBName({...props,server,dbName,context:this});
+        tableName = defaultStr(tableName,table).toUpperCase();
+        if(tableName){
+            Object.defineProperties(this,{
+                tableName : {value:tableName,override:false,writable:false}
+            })
+        }
+        if(isNonNullString(tableName)){
+            data = defaultVal(data,dbName+'['+tableName+']');
+            unlockTable(tableName);
+            mountDatabaseTable(tableName,dbName);
+        }
+        this.INITIAL_STATE.fetchData = defaultVal(this.props.fetchData,data);
+        let isPv = this.isPivotDatagrid();
+        if(isPv){
+            isPv = this.props.dbSelector !== false;
+        } else isPv = this.props.dbSelector === true ? true : false;
+        if(isPv){
+            let dbSelectorProps = defaultObj(this.props.dbSelectorProps);
+            ['table','tableName'].map((tb,idx)=>{
+                dbSelectorProps[tb] = defaultStr(this.props[tb],dbSelectorProps[tb]);
+            });
+            this.setSessionData({selectedDatabases:this.currentDatabases});
+        } else {
+            this.currentDatabases = Object.toArray(this.currentDatabases);
+        }
+        this.state.isLoading = true;
+    }
+
+    /*** lorsque la données est modifiée */
+    onUpsertData =(arg) =>{
+        if(!this._isMounted()) return;
+        if(isTableLocked(this.tableName)) {
+            return;
+        }
+        this.isDataJustComeToUpsert = true; ///on empêche d'afficher le progress bar
+        this.fetchData(true).finally(()=>{
+            this.isDataJustComeToUpsert = undefined;
+        });
+    }
+
+    componentDidMount(){
+        super.componentDidMount();
+        APP.extend(this._events,{
+            onUpsertData : this.onUpsertData.bind(this),
+        });
+        if(isNonNullString(this.tableName)){
+            APP.on(actions.upsert(this.tableName),this._events.onUpsertData)
+            APP.on(actions.onRemove(this.tableName),this._events.onUpsertData)
+        }
+        this.fetchData(true);
+    }
+
+    componentWillUnmount(){
+        super.componentWillUnmount();
+        if(isNonNullString(this.tableName)){
+            unmountDatabaseTable(this.tableName);
+            APP.off(actions.upsert(this.tableName),this._events.onUpsertData);
+            APP.off(actions.onRemove(this.tableName),this._events.onUpsertData);
+        }
+        this.clearEvents();
+        this.setSelectedRows();
+    }
+
+    onChangeDatabases(args){
+        let {databases,server} = args;
+        this.currentDatabases = databases;
+        if(JSON.stringify({databases:this.previousDatabases}) != JSON.stringify({databases})){
+            if(isObj(this.props.dbSelectorProps) && isFunction(this.props.dbSelectorProps.onChange)){
+                args.datagridContext = this;
+                this.props.dbSelectorProps.onChange(args);
+            }
+            this.refresh(true);
+        } 
+        this.previousDatabases = databases;
+        this.previousServer = server;
+    }
+    refresh (force,cb){
+        if(isFunction(force)){
+            let t = cb;
+            cb = force;
+            force = isBool(t)? t : true;
+        }
+        force = defaultBool(force,true)
+        return this.fetchData(undefined,force).then((data)=>{
+            if(isFunction(cb)){
+                cb(data);
+            }
+        })
+    }
+    getProgressBar(props){
+        if(this.isDataJustComeToUpsert) return null;
+        return super.getProgressBar(props);
+    }
+    /**** retourne la liste des items, utile lorsqu'une s'agit d'une fonction 
+        Lorsque data est une chaine de caractère, alors elle doit être sous la forme recommandée par la function 
+        getDataFunc de l'object database
+        la props data, peut être une chaine de caractère contenant le nom de la base et de la bd de travail de l'application
+        example common[articles], dans ce cas, la fonction fetchData, aura pour rôle de chercher toutes les données qui match
+        la table dans la base common.
+        Elle pourra éventuellement passer directement la limite et les filtres à la fonction fetchdata
+    */
+    fetchData (cb,force,fetchOptions){
+        if(!this._isMounted()) return Promise.resolve([]);
+        if(this.isFetchingData) {
+            if(!isPromise(this.fetchingPromiseData)){
+                this.fetchingPromiseData = Promise.resolve([])
+            }
+            return this.fetchingPromiseData;
+        };
+        this.isFetchingData = true;
+        if(isObj(cb)){
+            let t =  cb;
+            if(!isObj(fetchOptions)){
+                fetchOptions = cb;
+            }
+            if(isBool(t)){    
+                let t1 = force;
+                force = t;
+                if(isFunction(t1)){
+                    cb = t1;
+                }
+            }
+        }
+        if(isBool(cb)){
+            let t = force;
+            force = cb;
+            if(isFunction(t)){
+                cb = t;
+            }
+        }
+        this.fetchingPromiseData = new Promise((resolve,reject)=>{
+            setTimeout(()=>{
+                if(typeof cb === 'boolean'){
+                    force = cb;
+                    cb = undefined;
+                }
+                if(force !== true && isArray(this.INITIAL_STATE.data)) {
+                    return this.resolveFetchedDataPromise({cb,data:this.INITIAL_STATE.data}).then(resolve).catch(reject)
+                }
+                let fetchData  = this.INITIAL_STATE.fetchData;
+                fetchOptions = defaultObj(fetchOptions);
+                fetchOptions.selector = defaultObj(fetchOptions.selector);
+                fetchOptions.selector.$and = defaultArray(fetchOptions.selector.$and);
+                fetchOptions.databases = this.currentDatabases;
+                fetchOptions = APP.extend(true,true,{},{selector : this.getFilters()},fetchOptions,this.filtersSelectors);
+                fetchOptions.databases = this.currentDatabases;
+                let limit = this.getQueryLimit();
+                if(limit > 0 && !this.isPivotDatagrid()){
+                    fetchOptions.limit = limit;
+                } else {
+                    if(!isDecimal(fetchOptions.limit) || fetchOptions.limit <=0){
+                        delete fetchOptions.limit
+                    }
+                }
+                if(isFunction(this.props.fetchData)){
+                    //fetchOptions.limit = defaultNumber(fetchOptions.limit,100);
+                    /**** l'on peut définir la props fetchData, qui est la fonction appelée pour la recherche des données */
+                    fetchData = this.props.fetchData.call(this,fetchOptions);
+                }
+                if(isNonNullString(fetchData)) {
+                    //fetchData = getDataFunc(fetchData,fetchOptions);
+                } 
+                fetchData = isFunction(fetchData)? fetchData.call(this,fetchOptions) : fetchData;
+                this.updateProgress({isLoading:true},()=>{
+                    if(isPromise(fetchData)){
+                        return fetchData.then(data=>{
+                           return this.resolveFetchedDataPromise({cb,data,force}).then((data)=>{
+                                resolve(data);
+                            }).catch((e)=>{
+                                console.log(e,' fetching datagrid data')
+                                reject(e);
+                            });
+                        }).catch((e)=>{
+                            console.log(e," resolve fetching data for datagrid");
+                            return this.resolveFetchedDataPromise({cb,data:[],force}).then((data)=>{
+                                resolve(data);
+                            }).catch((e)=>{
+                                console.log(e,' fetching datagrid data')
+                                reject(e);
+                            });;
+                        })
+                    } else {
+                        let data = !isPromise(fetchData)? Object.toArray(fetchData) : [];
+                        if(data.length <=0) data = this.state.data;
+                        return this.resolveFetchedDataPromise({cb,data,force}).then((data)=>{
+                            resolve(data);
+                        }).catch((e)=>{
+                            console.log(e,' fetching datagrid data')
+                            reject(e);
+                        });
+                    }     
+                });
+            },1);
+        })
+        return this.fetchingPromiseData;
+    }
+    resolveFetchedDataPromise(arg){
+        arg = defaultObj(arg);
+        const {cb,data} = arg;
+        return new Promise((resolve)=>{
+            this.prepareData(arg,(state)=>{
+                state.data = Array.isArray(state.data)? state.data : [];
+                if(typeof this.props.onFetchData =='function'){
+                    this.props.onFetchData({...arg,allData:data,context:this,props:this.props,data:state.data})
+                }
+                this.setState(state,()=>{
+                    if(isFunction(cb)) {
+                        cb(data)
+                    } 
+                    resolve(data);
+                    this.isFetchingData = undefined;
+                })
+            });
+        })
+    }
+}
+
+CommonTableDatagrid.propTypes = {
+    ...CommonDatagrid.propTypes,
+    data : PropTypes.oneOfType([
+        PropTypes.func,
+        PropTypes.string,
+        PropTypes.objectOf(PropTypes.any),
+        PropTypes.arrayOf(PropTypes.any)
+    ])
+}

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

@@ -0,0 +1,9 @@
+import Common from "./Common";
+import TableDatagrid from "./TableData";
+
+export default function FactoryComponent(Factory) {
+    if(typeof Factory ==='string' && Factory.toLowerCase().trim() === 'table'){
+        return TableDatagrid;
+    }
+    return Common;
+}

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

@@ -0,0 +1,7 @@
+export {default} from "./Common";
+
+export {default as TableData} from "./TableData";
+
+export {default  as factory} from "./factory";
+
+export {default as session} from "./session";

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

@@ -0,0 +1,20 @@
+import $session from "$session";
+import {isNonNullString} from "$utils";
+
+export const getKey = x => "datagrid-merged-sess-"+defaultStr(Auth.getLoggedUserCode());
+export const get = (key)=>{
+   let data = defaultObj($session.get(getKey()));
+   if(isNonNullString(key)){
+       return data[key];
+   }
+   return data;
+}
+export const set = (key,value)=>{
+    let data = get();
+    if(isNonNullString(key)){
+        data[key] = value;
+    }
+    $session.set(getKey(),data);
+    return data;
+}
+export default {get,set,getKey};

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

@@ -0,0 +1,32 @@
+import {showPrompt,notify} from "$ecomponents/Dialog";
+import {defaultFunc,isNonNullString,defaultDecimal} from "$utils";
+import APP from "$capp/instance";
+
+const setDatagridQueryLimit = (limit,successCB,errorCB)=>{
+    successCB = defaultFunc(successCB);
+    limit = defaultDecimal(limit);
+    showPrompt({
+        title : 'Limite du nombre d\'éléments de la liste',
+        placeholder : limit,
+        defaultValue : limit,
+        type : "number",
+        yes : 'Définir',
+        no : 'Annuler',
+        onSuccess : ({value})=>{
+            if(isNonNullString(value)){
+                value = parseInt(value);
+            }
+            value = defaultDecimal(value);
+            if(value < 0) {
+                return notify.error("Vous devez entrer un nombre supérieur ou égal à zéro");
+            }
+            successCB(value);
+            if(value !== limit){
+                APP.trigger(APP.EVENTS.SET_DATAGRID_QUERY_LIMIT,value);
+            }
+        },
+        onError : errorCB
+    })
+}
+
+export default setDatagridQueryLimit;

package/src/components/Datagrid/Footer/Footer.js

@@ -0,0 +1,86 @@
+import Button from "$ecomponents/Button";
+import Menu from "$ecomponents/BottomSheet/Menu";
+import View from "$ecomponents/View";
+import {Pressable,StyleSheet} from "react-native";
+import Label from "$ecomponents/Label";
+import {defaultVal} from "$utils";
+import React from "$react";
+import theme from "$theme"
+
+let methods = {
+    sum : "Somme",
+    average : "Moyenne",
+    min : "Minimum",
+    max : 'Maximum',
+    count : "Nombre",
+}
+const formatValue = ({value,format,method})=>{
+    return (format === 'money' && method != 'count')? value.formatMoney():value.formatNumber();
+}
+export default function DGGridFooterValue (props){
+    let {label,text,displayLabel,style,format} = props;
+    label = defaultVal(label,text);
+    const defLabel = label;
+    if(displayLabel !== false){
+        if(!label || !React.isValidElement(label,true)) return null;
+    } else label = undefined;
+    const [active,setActive] = React.useState(isNonNullString(props.method) && props.method in methods ? props.method : "sum")
+    React.useEffect(()=>{
+        if(isNonNullString(props.method) && props.method in methods){
+            setActive(props.method)
+        }
+    },[props.method])
+    let title = "";
+    let menuItems = []
+    const activeStyle = {color:theme.colors.primaryOnSurface};
+    for(let method in methods){
+        let val = defaultDecimal(props[method]);
+        if(isDecimal(val)){
+            let fText = formatValue({value:val,format,method});
+            title +=(title? ", ":"")+methods[method]+" : "+fText
+            menuItems.push({
+                text : methods[method] + " : "+fText,
+                icon : active == method ? "check" : null,
+                style : [{paddingHorizontal:0},active ===method ?activeStyle:null],
+                onPress : (e)=>{
+                    React.stopEventPropagation(e);
+                    setActive(method)
+                }
+            })
+        }
+    }
+    return  <Menu 
+        items = {menuItems}
+        style = {{minWidth:220}}
+        title = {'Totaux de la colonne '+(defLabel?("[ "+defLabel+"]"):'')}
+        animateOnClose
+        anchor = {(p)=>{
+            return <Pressable {...p} style={[styles.anchor,style,label?styles.row:null]} title={title}>
+                {label ?
+                    <>
+                        <View><Label style={[styles.label]}>{label}</Label></View>
+                        <View><Label style = {styles.label}> : </Label></View>
+                    </>
+                : null}
+                <Label primary style={[styles.value]}>
+                    {formatValue({value:defaultDecimal(props[active]),method:active,format})}
+                </Label>
+            </Pressable>
+        }}
+    />
+}
+
+const styles = StyleSheet.create({
+    row : {
+        flexDirection : 'row',
+        alignItems : 'center',
+    },
+    anchor : {
+        paddingVertical : 10,
+        marginHorizontal : 10,
+        paddingHorizontal : 5,
+    },
+    value : {
+        fontWeight : 'bold'
+    }
+})

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

@@ -0,0 +1,93 @@
+import _Footer from "./Footer";
+import View from "$ecomponents/View";
+import React from "$react";
+import memoize from "$react/memoize";
+export {default as FooterItem} from "./Footer";
+
+export const evalSingleValue = ({data,columnDef,field,result,displayLabel,onlyVisible})=>{
+    result = defaultObj(result)
+    data = data || {}
+    if(!isNonNullString(field) || !isObj(columnDef)) return result;
+    onlyVisible = defaultBool(onlyVisible,true);
+    if(onlyVisible === true && !(columnDef.visible !== false)) result;
+    let val = data[field];
+    if(isFunction(columnDef.multiplicater)){
+        val = defaultDecimal(columnDef.multiplicater({value:val,columnField:field,field,columnDef,rowData:data,item:data}),val)
+    }
+    if(!isDecimal(val)){
+        return result;
+    }
+    if(!isObj(result[field])){
+        let label = defaultStr(columnDef.label,columnDef.text);
+        if(!label && displayLabel !== false) return result;
+        result[field] = {
+            label,
+            visible : columnDef.visible,
+            format : defaultStr(columnDef.format).toLowerCase()
+        }
+    }
+    let obj = result[field];
+    val = parseFloat(val.toFixed(10));
+    obj.max = isDecimal(obj.max) ? Math.max(obj.max,val) : val;
+    obj.min = isDecimal(obj.min) ? Math.min(obj.min,val) : val;
+    obj.count = isDecimal(obj.count) ? (obj.count = obj.count +1) : 1;
+    obj.sum = isDecimal(obj.sum) ? (parseFloat((obj.sum+val).toFixed(10))) : val;
+    obj.average = obj.sum / obj.count;
+    return result;
+}
+export const evalValues = memoize(({data,columns,onlyVisible,displayLabel})=>{
+    let result = {};
+    Object.map(data,(rowData,i)=>{
+        if(!isObj(rowData)) return result;
+        Object.map(columns,(columnDef,field)=>{
+            result = evalSingleValue({data:rowData,columnDef,field,result,displayLabel,onlyVisible})
+        })
+    })
+    return result;
+});
+
+
+
+/****
+ * @param : columns {object} : la liste de toutes les colonnes pouvant être rendu par le footer
+ * @param : data {array{object}}: les données à exploiter pour le rendu des footers
+ * @param : Component {React.Element|string}
+ * @param : children {func}, fonction permettant de générer le contenu du footer
+ */
+export default function DGGridFooters (props){
+    let {columns,children,displayLabel,Component,data,onlyVisible,...rest} = props;
+    rest = defaultObj(rest)
+    if(Component === false){
+        Component = React.Fragment;
+        rest = {};
+    } else {
+        Component = defaultVal(Component,View)
+    }
+    const [state,setState] = React.useStateIfMounted({
+        columns,
+        data,
+    })
+    React.useEffect(()=>{
+        setState({...state,columns:props.columns})
+    },[props.columns])
+    React.useEffect(()=>{
+        setState({...state,data:props.data})
+    },[props.data]);
+    let footers = evalValues({data:state.data,columns:state.columns,onlyVisible,displayLabel});
+    return <Component {...rest}>
+        {children({
+            footers,
+            columns,
+            render:({footer,field,props})=>{
+                if(!isObj(footer) || !isNonNullString(field) || !isObj(footers[field])) return null;
+                props = defaultObj(props);
+                return <_Footer 
+                    {...props}
+                    key = {field}
+                    displayLabel = {displayLabel}
+                    {...footer}
+                />
+            }
+        })}
+    </Component>
+}

package/src/components/Datagrid/List.js

@@ -0,0 +1,2 @@
+export * from "./Accordion";
+export {default} from "./Accordion";

package/src/components/Datagrid/RenderType.js

@@ -0,0 +1,53 @@
+import {get,set} from "./Common/session";
+import Icon from "$ecomponents/Icon";
+import {notify} from "$ecomponents/Dialog";
+import {isDesktopMedia} from "$cplatform/dimensions";
+import {defaultStr} from "$utils";
+import {Menu} from "$ecomponents/BottomSheet";
+import {accordionIcon,tableIcon,typeKey} from "./RenderTypes/utils";
+import rendersTypes from "./RenderTypes";;
+
+const getActiveProps = (type,currentType)=>{
+    if(currentType == type){
+        return {primary:true}
+    }
+    return {};
+}
+const DatagridRenderTypeComponent = (props)=>{
+    const isDesk = isDesktopMedia();
+    let type = defaultStr(get(typeKey),isDesk? "fixed":'accordion').toLowerCase().trim();
+    const rTypes = [
+        {...getActiveProps(type,'accordion'),title:"Les éléments de liste s'affichent de manière optimisé pour téléphone mobile",code:'accordion',icon:accordionIcon,label:'Mobile',labelText:'environnement optimisé pour téléphone mobile'},
+        {...getActiveProps(type,'table'),title:"Les éléments de listes s'affichent dans un tableau rééel",code:'table',icon:tableIcon,label:'Tableau réel avec pagination'}
+    ]  
+    Object.map(rendersTypes,(t,i)=>{
+        if(isObj(t)){
+            if((isDesk && t.desktop) || (!isDesk && t.mobile)){
+                rTypes.push({
+                    ...t,
+                    ...getActiveProps(type,i)
+                })
+            }
+        }
+    });
+    let typeObj = {};
+    Object.map(rTypes,(t)=>{
+        if(isObj(t) && t.code == type){
+            typeObj = t;
+        }
+    });
+    return <Menu
+        title = {"Type d'affichage du tableau"}
+        sheet
+        items = {rTypes}
+        anchor = {(props)=><Icon {...props} name = {typeObj.icon} title={typeObj.title}/>}
+        onPressItem = {({item})=>{
+            if(isObj(item) && item.code){
+                set(typeKey,item.code);
+                notify.info("Les éléments de la liste s'afficheront dorénavant en ["+defaultStr(item.labelText,item.label)+"]");
+            }
+        }}
+    />
+}
+
+export default DatagridRenderTypeComponent;

package/src/components/Datagrid/RenderTypes/index.native.js

@@ -0,0 +1 @@
+export default [];

package/src/components/Datagrid/RenderTypes/index.web.js

@@ -0,0 +1,10 @@
+import { fixedIcon,virtualIcon } from "./utils"
+export default {
+    fixed : {
+        code:'fixed',icon:fixedIcon,label:'Tableau virtuel optimisé',desktop:true,
+        title : "Les éléments de liste s'affichent dans un tableau virtuel optimisé",
+    },
+    virtual : {code:'virtual',icon:virtualIcon,label:'Tableau virtuel',
+        title : "Les éléments de liste s'affichent dans un tableau virtuel", desktop:true
+    }
+}

package/src/components/Datagrid/RenderTypes/utils.js

@@ -0,0 +1,5 @@
+export const virtualIcon = "file-table-box";
+export const fixedIcon = "file-table-box-multiple";
+export const accordionIcon = "collage";
+export const tableIcon = "table-large";
+export const typeKey = "render-type";

package/src/components/Datagrid/Table/Cell.js

@@ -0,0 +1,45 @@
+import * as React from 'react';
+import { StyleSheet, StylePropTypes, ViewStyle } from 'react-native';
+import {Text,TouchableRipple} from "react-native-paper";
+import Label from "$ecomponents/Label";
+import PropTypes from "prop-types";
+import {styleTypeProps} from "$theme";
+
+const DataTableCell = ({ children, style, numeric, ...rest }) => (
+  <TouchableRipple
+    {...rest}
+    style={[styles.container, numeric && styles.right, style]}
+  >
+    <Text numberOfLines={1}>{children}</Text>
+  </TouchableRipple>
+);
+
+DataTableCell.displayName = 'DataTable.Cell';
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+
+  right: {
+    justifyContent: 'flex-end',
+  },
+});
+
+export default DataTableCell;
+
+
+DataTableCell.propTypes = {
+    children: PropTypes.node,
+    /**
+     * Align the text to the right. Generally monetary or number fields are aligned to right.
+     */
+    numeric : PropTypes.bool,
+    /**
+     * Function to execute on press.
+     */
+    onPress : PropTypes.func,
+    style : styleTypeProps,
+  }