@fto-consult/expo-ui 2.31.5 → 2.32.0

package/appConfig.txt

@@ -11,4 +11,9 @@
 
     /***les fonctions d'aggregations du datagrid**/
     datagridAggregatorFunctions : {objectOf({code:{string},label:{string},eval:{function}})|| arrayOf({code:{string},label:{string},eval:{function}})}
+    /**l'ensemble des selectors à appliquer au champs de type hashtag, permettant de faire des liens vers d'autres tables**/
+    sprintfSelectors : {
+         "&libele&" : selectLabel,
+    }
+
  }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fto-consult/expo-ui",
-  "version": "2.31.5",
+  "version": "2.32.0",
   "description": "Bibliothèque de composants UI Expo,react-native",
   "main": "index.js",
   "scripts": {
@@ -61,7 +61,7 @@
     "@emotion/native": "^11.10.0",
     "@expo/html-elements": "^0.2.0",
     "@expo/vector-icons": "^13.0.0",
-    "@fto-consult/common": "^1.25.24",
+    "@fto-consult/common": "^1.25.25",
     "@gorhom/portal": "^1.0.14",
     "@react-native-async-storage/async-storage": "~1.17.3",
     "@react-native-community/datetimepicker": "6.5.2",

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

@@ -41,6 +41,7 @@ import {DialogProvider} from "$ecomponents/Form/FormData";
 import Chart,{getMaxSupportedSeriesSize} from "$ecomponents/Chart";
 import notify from "$cnotify";
 import FileSystem from "$file-system";
+import sprintf from "$cutils/sprintf";
 
 export const donutChart = {
     isChart : true,
@@ -245,6 +246,7 @@ export default class CommonDatagridComponent extends AppComponent {
             dateFields : {value : {}},
             sectionListColumnsSize : {value : {current:0}}, //la taille du nombre d'éléments de section dans les colonnes
             chartRef : {value : {current:null}},
+            chartSeriesNamesColumnsMapping : {value : {}},//le mappage entre les index des series et les colonnes coorespondantes
         }) 
         const sessionAggregator = defaultStr(this.getSessionData("aggregatorFunction")).trim();
         const aggregatorProps = defaultStr(this.props.aggregatorFunction).trim();
@@ -1405,7 +1407,7 @@ export default class CommonDatagridComponent extends AppComponent {
             DialogProvider.open({
                 title : 'Configuration des graphes',
                 subtitle : false,
-                data : this.getCharConfig(),
+                data : this.getChartConfig(),
                 fields : {
                     x : {
                         text : 'Axe des x[horizontal]',
@@ -1435,6 +1437,14 @@ export default class CommonDatagridComponent extends AppComponent {
                         items : yItems,
                         multiple : true,
                     },
+                    dataLabels : {
+                        type : 'switch',
+                        label : "Affich les valeurs",
+                        checkedTooltip : "Les étiquettes de valeurs seront affichées sur le graphe",
+                        checkedValue : true,
+                        uncheckedValue : false,
+                        defaultValue : this.isDashboard()? true : false,
+                    },
                     stacked : stackSettings,
                     sparkline : {
                         type : 'switch',
@@ -1451,6 +1461,12 @@ export default class CommonDatagridComponent extends AppComponent {
                     titleColor: {
                         text : "Couleur de titre",
                         type :"color",
+                        format : "hashtag"
+                    },
+                    fileName : {
+                        text : "Nom fichier en téléchargement",
+                        format : "hashtag",
+                        tooltip : "Veuillez spécifier le nom du fichier du graphe qui sera utilisée lors du téléchargement"
                     },
                 },
                 actions : [
@@ -1473,7 +1489,7 @@ export default class CommonDatagridComponent extends AppComponent {
             })
         })
    }
-   getCharConfig(){
+   getChartConfig(){
       return defaultObj(this.state.chartConfig);
    }
    getChartIsRendableArgs(){
@@ -1490,7 +1506,9 @@ export default class CommonDatagridComponent extends AppComponent {
    downloadChart(){
         if(!this.chartRef.current || !this.chartRef.current.dataURI) return Promise.reject({message:'Référence du graphique non valide'});
         return this.chartRef.current.dataURI().then(({ imgURI, blob })=>{
-            FileSystem.write({content:imgURI,fileName:"graphe.png",contentType:"image/png"})
+            const config = this.getChartConfig();
+            const fileName = sprintf(defaultStr(config.fileName,config.title,"graphe"));
+            FileSystem.write({content:imgURI,fileName})
         });
     }
    ///reoturne les options de menus à appliquer sur le char
@@ -1622,7 +1640,7 @@ export default class CommonDatagridComponent extends AppComponent {
                 
         const code = aggregatorFunction.code;
         const isDonut = chartType.isDonut || chartType.isRadial;
-        const config = this.getCharConfig();
+        const config = this.getChartConfig();
         //@see : https://apexcharts.com/docs/series/
         ///lorsqu'on affiche uniquement les totaux des sections, alors la visualition se fait sur uniquement sur la base des valeurs
         ///on parcoure uniquement les entêtes des sectionLis
@@ -1645,6 +1663,7 @@ export default class CommonDatagridComponent extends AppComponent {
                 seriesConfig = defaultSectionListHeadersSeries;
             }
         }
+        const seriesNamesMapping = {};
         /**** boucle sur chaque éléments trouvée dans le tableau des données sectionListData */
         const loopForFooter = ({column,serieName,footers,header})=>{
             if(!isObj(column) || !isObj(footers)) return null;
@@ -1663,12 +1682,13 @@ export default class CommonDatagridComponent extends AppComponent {
             if(!isObj(this.sectionListHeaderFooters[header])) return null;
             const footers = this.sectionListHeaderFooters[header];
             if(isDonut){
-                loopForFooter({footers,header,column:yAxisColumn})
+                loopForFooter({footers,header,column:yAxisColumn,columnField:yAxisColumn.field})
             } else {
                 seriesConfig.map((s)=>{
                     const serie = this.state.columns[s];
                     const serieName = defaultStr(serie.label,serie.text,s);
-                    loopForFooter({footers,serie,serieName,header,column:tableFooters[s]})
+                    this.chartSeriesNamesColumnsMapping[serieName] =  serie;
+                    loopForFooter({footers,serie,columnField:s,serieName,header,column:tableFooters[s]})
                 })
             }
         });
@@ -1707,7 +1727,7 @@ export default class CommonDatagridComponent extends AppComponent {
             return null;
         }
         const isDonut = chartType.isDonut || chartType.isRadial;
-        const config = this.getCharConfig();
+        const config = this.getChartConfig();
         if(!this.state.columns[config.y]) return null;
         const yAxisColumn = this.state.columns[config.y];
         const type = defaultStr(yAxisColumn.jsType,yAxisColumn.type).toLowerCase();
@@ -1732,6 +1752,10 @@ export default class CommonDatagridComponent extends AppComponent {
         const indexes = {};
         let series = [],xaxis = {},customConfig = {},seriesNamesToColumns={};
         let count = 0;
+        //on réinitialise le mappage entre les index
+        Object.map(this.chartSeriesNamesColumnsMapping,(_,k)=>{
+            delete this.chartSeriesNamesColumnsMapping[k];
+        });
         if(!this.isSectionList()){
             this.state.data.map((data,index)=>{
                 if(!isObj(data))return null;
@@ -1771,6 +1795,7 @@ export default class CommonDatagridComponent extends AppComponent {
                     type : chartType.type,
                     data,
                 })
+                this.chartSeriesNamesColumnsMapping[name] = col;
             })
         } else {
             const configs = this.getSectionListHeadersChartOptions({chartType,aggregatorFunction,xAxisColumn,yAxisColumn});
@@ -1793,8 +1818,25 @@ export default class CommonDatagridComponent extends AppComponent {
             chartProps[settingKey] = defaultObj(chartProps[settingKey]);
             chartProps[settingKey][key] = config[key];
         });
+        const dataLabelFormatter = typeof chartProps.dataLabels?.formatter =="function"? chartProps.dataLabels.formatter : undefined;
         const chartOptions = {
             ...chartProps,
+            dataLabels : extendObj(true,{enabled:!this.isDashboard()},chartProps.dataLabels,{
+                formatter : (value, { seriesIndex, dataPointIndex, w })=> {
+                    const serie = w.config.series[seriesIndex];
+                    const serieName = serie.name;
+                    const column = isDonut ? defaultObj((this.state.columns[yAxisColumn.field],yAxisColumn)): defaultObj(this.chartSeriesNamesColumnsMapping[serieName]);
+                    const columnField = defaultStr(column.field, isDonut? config.y : undefined);
+                    if(dataLabelFormatter){
+                        return dataLabelFormatter({value,column,columnDef:column,columnField,serie,serieName,seriesIndex})
+                    }
+                    if(typeof value !=='number') return value;
+                    if(defaultStr(column.format).toLowerCase() ==='money'){
+                        return value.formatMoney();
+                    }
+                    return value.formatNumber();
+                }
+            }),
             title :extendObj(true,{}, {
                 text: defaultStr(config.title,chartProps.title),
                 align: 'left',
@@ -1830,9 +1872,31 @@ export default class CommonDatagridComponent extends AppComponent {
         const yLabels = chartOptions.yaxis.labels = defaultObj(chartOptions.yaxis.labels);
         yLabels.style = defaultObj(yLabels.style)
         yLabels.style.colors = (Array.isArray(yLabels.style.colors) && yLabels.style.colors.length || theme.Colors.isValid(yLabels.style.colors)) ? yLabels.style.colors : labelColor;
+        const yLabelsSerieName = series?.length == 1 && series[0] && series[0].name ? series[0].name : undefined;
+        const yLabelsColumn = yLabelsSerieName ? this.chartSeriesNamesColumnsMapping[yLabelsSerieName] : undefined;
+        let yLabelFormat = null;
+        if(!isDonut && !yLabelFormat){
+            for(let i in series){
+                const v = series[i];
+                if(!isObj(v) || !isNonNullString(v.name) || !this.chartSeriesNamesColumnsMapping[v.name]) break;
+                if(yLabelFormat && typeof this.chartSeriesNamesColumnsMapping[v.name]?.format !=yLabelFormat) {
+                    yLabelFormat = null;
+                    break;
+                }
+                if(!yLabelFormat){
+                    yLabelFormat = this.chartSeriesNamesColumnsMapping[v.name]?.format;
+                }
+            }
+        }
         yLabels.formatter = (value)=>{
-            if(typeof value =="number") return value.formatNumber();
-            return value;
+            if(typeof value !='number') return value;
+            if(yLabelFormat =='money' || (isDonut && yAxisColumn.format =="money")){
+                return value.formatMoney();
+            }
+            if(yLabelsColumn && yLabelsColumn.format =='money'){
+                return value.formatMoney();
+            }
+            return value.formatNumber();
         }
         chartOptions.chart.id = this.chartIdPrefix+"-"+defaultStr(chartType.key,"no-key");
         if(!chartType.isDonut){
@@ -1855,6 +1919,9 @@ export default class CommonDatagridComponent extends AppComponent {
             chartOptions.legend = defaultObj(chartOptions.legend);
             chartOptions.legend.show = false;
         }
+        if("dataLabels" in config){
+            chartOptions.dataLabels.enabled = !!config.dataLabels;
+        }
         return <Chart
             options = {chartOptions}
             ref = {this.chartRef}

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

@@ -505,9 +505,9 @@ export default class Field extends AppComponent {
     }
     sprintf(){
         if(this.isDisabled() || this.isReadOnly()) return this;
-        sprintf({value:this.getValue(),cb:(val)=>{
+        sprintf({context:this,value:this.getValue(),formatter:this.props.sprintfResultFormatter}).then((val)=>{
             this.setValue(APP.sprintf(val),true);
-        }});
+        });
     }
     /**** met le focus sur le prochain cham */
     focusNextField (){
@@ -915,7 +915,7 @@ export default class Field extends AppComponent {
                     right = <Icon color={theme.colors.primary} {...props} tooltip = {tooltip} style={[styles.icon,props.style]} icon="information"/>;
                 }
                 if(canRenderHashtag && !rest.disabled && !rest.readOnly){
-                    const nRight = <Icon {...props} icon={"format-header-pound"} style={[right||cRight?{marginLeft:-5}:null,props.style]} title={"Cliquer insérer un hashtag, ie faire référence à une données de ventes, d'achas, de stocks, de règlement..."} onPress={this.sprintf.bind(this)}/>;
+                    const nRight = <Icon {...props} icon={"format-header-pound"} style={[right||cRight?{marginLeft:-5}:null,props.style]} title={"Cliquer insérer un hashtag, ie faire référence à une données externe"} onPress={this.sprintf.bind(this)}/>;
                     right = right ? <>{right}{nRight}</> : nRight;
                 }
                 return (cRight)? <>{cRight}{right}</> : right;
@@ -988,6 +988,8 @@ Field.propTypes = {
         PropTypes.node,
         PropTypes.func,
     ]),
+    /**** la fonction utilisée pour le formattage des valeurs de type sprintf */
+    sprintfResultFormatter : PropTypes.func,
     jsType : PropTypes.string,
     usePlaceholderWhenEmpty : PropTypes.bool,//si la valeur du placeholder sera utilée, lorsque la valeur du champ de type formatable est nulle ou égale à la valeur vide
     responsive : PropTypes.bool,

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

@@ -1,7 +1,7 @@
 import selectors from "./sprintfSelectors";
-import {isNonNullString,defaultFunc} from "$utils";
+import {isNonNullString,defaultFunc,isObj,isPromise} from "$utils";
 
-export default  ({value,val,cb,success})=>{
+export default  ({value,val,formatter,cb,success})=>{
     val = defaultStr(value,val)
     if(!isNonNullString(val)){
         return null;
@@ -16,27 +16,59 @@ export default  ({value,val,cb,success})=>{
             keys.push(i.toUpperCase())
         }
     }
-    let results = {};
+    const results = {};
     let length = keys.length;
     let index = length;
     let key = undefined
-    const next = ()=>{
-        index -=1;
-        if(index < 0){
-            for(let i in results){
-                let t = selectors[i.toLowerCase()];
-                let replace = results[i];
-                let dbName = defaultStr(t.dbName).toLowerCase(), type = defaultStr(t.type).toLowerCase();
-                if( dbName !== 'struct_data' && type !== 'field' && type !== 'form'){
-                    replace = " #"+defaultStr(t.dbName)+"["+i.ltrim("&").rtrim("&")+"-"+replace+"]".toUpperCase();
+    const sKeys = {};
+    return new Promise((resolve)=>{
+        const next = ()=>{
+            index -=1;
+            if(index < 0){
+                for(let i in results){
+                    let indexName = i.toLowerCase();
+                    let selector = selectors[indexName];
+                    if(!selector){
+                        indexName = i.toUpperCase();
+                        selector = selectors[indexName];
+                    }
+                    const replace = results[i];
+                    if(typeof formatter =='function'){
+                        val = formatter({selectors,selector,value:val,replace,result:results[i],results,indexName,selectorIndex:indexName,selectorName:indexName})
+                    }
+                    if(typeof val =='string' && typeof replace =='string'){
+                        val = val.replaceAll(i,replace);
+                    }
                 }
-                val = val.replaceAll(i,replace.toUpperCase());
+                val = defaultStr(val);
+                cb(val);
+                resolve(val);
+            } else {
+                key = keys[index];
+                if(!isNonNullString(key)) {return next();}
+                let indexName = i.toLowerCase();
+                let selector = selectors[indexName];
+                if(!selector){
+                    indexName = i.toUpperCase();
+                    selector = selectors[indexName];
+                }
+                sKeys[i] = indexName;
+                const select = isObj(selector)? selector.select : selector;
+                if(typeof cb =='function'){
+                    const v = select({...rest,selector,selectors,indexName,selectorIndex:indexName,selectorName:indexName,results,index:key,keys,key,value:val});
+                    if(isPromise(v)){
+                        return v.then((r)=>{
+                            if(typeof r ==='string'){
+                                results[key] = r;
+                            }
+                        }).finally(next);
+                    } else if(typeof v =='string' || typeof v =='number'){
+                        results[key] = v.toString();
+                    }
+                }
+                next();
             }
-            cb(val);
-        } else {
-            key = keys[index];
-            if(!isNonNullString(key)) {return next();}
         }
-    }
-    next();
+        next();
+    })
 }

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

@@ -1,116 +1,19 @@
 import Date from "$lib/date";
-const selectLabel = {
-    title : 'Sélectionner un libelé',
-    table : 'labels',
-    dbName : 'struct_data',
-    itemValue : ({item})=>defaultStr(item.label,item.code)
-}
+import {defaultObj} from "$utils";
+import appConfig from "$capp/config";
+const sprintfSelectors = defaultObj(appConfig.get("sprintfSelectors"));
 export default  {
-    "&libele&" : selectLabel,
-    "&vente&" : {
-        title : 'Sélectionner une vente',
-        table : 'sales',
-    },
-    "&achat&" : {
-        title : 'Sélectionner un achat',
-        table : 'purchases',
-    },
-    "&stock&" : {
-        title : 'Sélectionner stock',
-        table : 'stocks',
-    },
-    "&transfert&" : {
-        title : 'Sélectionner mouvement de transfert',
-        table : 'stocks_transfers',
-    },
-    "&reglement&" : {
-        title : 'Sélectionner un règlement',
-        table : 'payments',
-    },
-    "&tiers&" : {
-        title : 'Sélectionner un tier',
-        table : 'third_parties',
-        dbName : 'third_parties',
-    },
-    "&projet&" : {
-        title : 'Sélectionner un projet',
-        table : 'projects',
-        dbName : 'projects',
-    },
-    "&tache&" : {
-        title : 'Sélectionner une tâche',
-        table : 'tasks',
-        dbName : 'projects',
-    },
-    "&commercial&" : {
-        title : 'Sélectionner commercial',
-        table : 'users',
-        dbName : 'users',
-        fetchDataOpts:{
-            selector : {$and:[{isSeller:1}]}
-        }
-    },
-    "&client&" : {
-        title : 'Sélectionner client',
-        table : 'third_parties',
-        dbName : 'third_parties',
-        fetchDataOpts:{
-            selector : {$and:[{type:{$in:["customer"]}}]}
-        }
-    },
-    "&fournisseur&" : {
-        title : 'Sélectionner Fournisseur',
-        table : 'third_parties',
-        dbName : 'third_parties',
-        fetchDataOpts:{
-            selector : {$and:[{type:{$in:["provider"]}}]}
-        }
-    },
-    "&utilisateur&" : {
-        title : 'Sélectionner un utilisateur',
-        table : 'users',
-        dbName : 'users',
-    },
-    "&caisse&" : {
-        title : 'Sélectionner une caisse',
-        table : 'checkouts',
-        dbName : 'common',
-    },
-    "&produit&" : {
-        title : 'Sélectionner un produit/article',
-        table : 'products',
-        dbName : 'products',
-    },
-    "&categorie&" : {
-        title : 'Sélectionner une catégorie de produit',
-        table : 'products_categories',
-        dbName : 'products',
-    },
-    "&taxe&" : {
-        title : 'Sélectionner une taxe',
-        table : 'taxes',
-        dbName : 'common',
-    },
-    "&depot&" : {
-        title : 'Sélectionner un dépôt',
-        table : 'warehouses',
-        dbName : 'common',
-    },
-    "&contact&" : {
-        title : 'Sélectionner un contact',
-        table : 'contacts',
-        dbName : 'common',
-    },
+    ...sprintfSelectors,
     "&sdate&" : {
         title : 'Sélectionner une date',
         type : 'field',
         field : {
-            type : 'date',
-            text : 'Sélectionner une date',
-            format : Date.defaultDateFormat
+              type : 'date',
+              text : 'Sélectionner une date',
+              format : Date.defaultDateFormat
         },
         desc : "remplace le motif par la date qui sera sélectionnée par l'utilisateur au format jj/mm/aaaa",
-    },
+     },
     "&date&" : "remplace le motif par la date actuelle au format : jj/mm/aaaa",
     "&heure&" : "remplace le motif par l'heure actuelle au format hh:mm:ss",
     "&dateheure&" : "remplace le motif par la date et l'heure actuelle au format : jj/mm/aaaa hh:mm:ss",