@fto-consult/expo-ui 2.34.3 → 2.35.0

package/package.json

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

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

@@ -155,7 +155,7 @@ export const footerFieldName = "dgrid-fters-fields";
 
 
 /*****
- * Pour spécifier qu'un champ du datagrid n'existe pas en bd il s'uffit de suffixer le nom du champ par le suffix : "FoundInDB" et de renseigner false comme valeur 
+ * Pour spécifier qu'un champ du datagrid n'existe pas en bd il s'ufit de suffixer le nom du champ par le suffix : "FoundInDB" et de renseigner false comme valeur 
 de l'objet rowData de cette propriété
  */
 export default class CommonDatagridComponent extends AppComponent {
@@ -166,6 +166,9 @@ export default class CommonDatagridComponent extends AppComponent {
         let {
             data,
             selectedRows,
+            chartAllowedPerm,
+            exportToPDFAllowedPerm,
+            exportToExcelAllowedPerm,
             ...rest
         } = props;
         if(this.bindResizeEvents()){
@@ -196,15 +199,27 @@ export default class CommonDatagridComponent extends AppComponent {
         });
         const disTypes = {};
         let hasFoundDisplayTypes = false;
+        const perm = isNonNullString(chartAllowedPerm)? Auth.isAllowedFromStr(chartAllowedPerm) : true;
+        const ePDFIsAllowed = isNonNullString(exportToPDFAllowedPerm)? Auth.isAllowedFromStr(exportToPDFAllowedPerm) : true;
+        const eExcelISAllowed = isNonNullString(exportToExcelAllowedPerm)? Auth.isAllowedFromStr(exportToExcelAllowedPerm) : true;
         Object.map(this.props.displayTypes,(dType,v)=>{
             if(isNonNullString(dType)){
                 dType = dType.toLowerCase().trim();
                 if(displayTypes[dType]){
+                    const dp = displayTypes[dType];
+                    if(dp.isChart && !perm){
+                        return;
+                    }
+                    hasFoundDisplayTypes = true;
                     disTypes[dType] = Object.clone(displayTypes[dType]);
                 }
-                hasFoundDisplayTypes = true;
             }
         });
+        const allowedDisplayTypes = {};
+        Object.map(displayTypes,(t,i)=>{
+            if(t.isChart && !perm) return;
+            allowedDisplayTypes[i] = Object.clone(t);
+        })
         Object.defineProperties(this,{
             layoutRef : {
                 value : React.createRef(null),
@@ -230,6 +245,9 @@ export default class CommonDatagridComponent extends AppComponent {
             isLoadingRef : {
                 value : {current:false}
             },
+            isChartAllowed : {value : perm},
+            isExcellExportAllowed : {value:eExcelISAllowed},
+            isPDFExportAllowed : {value: ePDFIsAllowed},
             currentFilteringColumns : {value:{}},
             emptySectionListHeaderValue : {value : uniqid("empty-section-list-header-val").toUpperCase()},
             getSectionListHeaderProp : {value : typeof this.props.getSectionListHeader =='function'? this.props.getSectionListHeader : undefined},
@@ -242,7 +260,7 @@ export default class CommonDatagridComponent extends AppComponent {
             ///la liste des fonctions d'aggregations supportées
             aggregatorFunctions : {value : extendAggreagatorFunctions(this.props.aggregatorFunctions)},
             ///les types d'affichage
-            displayTypes : {value : hasFoundDisplayTypes ? disTypes : Object.clone(displayTypes)},
+            displayTypes : {value : hasFoundDisplayTypes ? disTypes : allowedDisplayTypes},
             dateFields : {value : {}},
             sectionListColumnsSize : {value : {current:0}}, //la taille du nombre d'éléments de section dans les colonnes
             chartRef : {value : {current:null}},
@@ -372,6 +390,12 @@ export default class CommonDatagridComponent extends AppComponent {
         }
         return this.state.sectionListColumns;
     }
+    canExportToPDF(){
+        return this.isPDFExportAllowed;
+    }
+    canExportToExcel (){
+        return this.isExcellExportAllowed;
+    }
     bindResizeEvents(){
         return false;
     }
@@ -719,7 +743,7 @@ export default class CommonDatagridComponent extends AppComponent {
             if(header.type.contains("date")){
                 this.dateFields[header.field] = header;
             }
-            /**** pour ignorer une colonne du datagrid, il suffit de passer le paramètre datagrid à false */
+            /**** pour ignorer une colonne du datagrid, il sufit de passer le paramètre datagrid à false */
             if(!isNonNullString(header.field) || header.datagrid === false) {
                 return;
             }
@@ -2094,6 +2118,10 @@ export default class CommonDatagridComponent extends AppComponent {
        let totalWidths = 0;
        let columnIndex = 0,visibleColumnIndex=0;
        this.sectionListColumnsSize.current = 0;
+       /*** la props widht de la colonne peut être en pourcentage
+        * l'on peut également définir la valeur minWidth en entier qui représentera la longuer minimale du champ
+        * la props fitWidth permet de dire que le champ devra occuper l'espace restant sur la page
+        */
        Object.map(columns,(header,headerIndex) => {
             let {
                 field,
@@ -2115,6 +2143,9 @@ export default class CommonDatagridComponent extends AppComponent {
             
             const type = defaultStr(header.jsType,header.type,"text").toLowerCase();
             sortType = defaultStr(sortType,type).toLowerCase();
+            if(typeof width =='string' && width.contains("%")){
+                width = ((parseFloat(width.replaceAll(" ","").split('%')[0].trim())|0)*windowWidth)/100;
+            }
             width = defaultDecimal(width);
             if(width <COLUMN_WIDTH/2){
                 width = COLUMN_WIDTH;
@@ -2129,6 +2160,9 @@ export default class CommonDatagridComponent extends AppComponent {
             } else if(type =="select_country" || type =='selectcountry'){
                 width = Math.max(width,90);
             }
+            if(typeof restCol.minWidth =='number'){
+                width = Math.max(width,minWidth);
+            }
             totalWidths +=width;
             widths[header.field] = width;
             const colProps = {id,key}
@@ -2139,6 +2173,7 @@ export default class CommonDatagridComponent extends AppComponent {
             }
             const title = header.text = header.text || header.label || header.title||header.field
             visibleColumnsNames[header.field] = visible ? true : false;
+           
             visibleColumns.push({
                 onPress : ()=>{
                     setTimeout(() => {
@@ -3522,6 +3557,12 @@ CommonDatagridComponent.propTypes = {
         /**** les series à utiliser pour l'affichage des données lorsque les colonnes sont groupées, ie les montant de totalisation sont utilisés */
         sectionListHeadersSeries : PropTypes.arrayOf(PropTypes.string),
     }),
+    /*** la permission autorisée pour l'export en pdf */
+    exportToPDFAllowedPerm : PropTypes.string,
+    /*** la permission autorisée pour l'export en excel*/
+    exportToExcelAllowedPerm : PropTypes.string,
+    /*** la permission que doit avoir l'utilisateur pour pouvoir visualiser les graphes à partir du diagrame */
+    chartAllowedPerm : PropTypes.string,
     displayType : chartDisplayType,
     /*** les types d'afichates supportés par l'application */
     displayTypes : PropTypes.arrayOf(chartDisplayType),

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

@@ -34,6 +34,15 @@ const TableDataSelectField = React.forwardRef((_props,ref)=>{
     }
     fKeyTable = defaultObj(fKeyTable);
     foreignKeyTable = defaultStr(fKeyTable.tableName,fKeyTable.table,foreignKeyTable).trim().toUpperCase();
+    const sortColumn = defaultStr(fKeyTable.defaultSortColumn);
+    const sortDir = defaultStr(fKeyTable.defaultSortOrder).toLowerCase().trim();
+    const sort = {};
+    if(sortColumn){
+        sort.column = sortColumn;
+        if(sortDir =='asc' || sortDir =='desc'){
+            sort.dir = sortDir;
+        }
+    }
     const isMounted = React.useIsMounted();
     const showAdd = isFilter || !foreignKeyTable ? false : React.useRef(Auth.isTableDataAllowed({foreignKeyTable,action:'create'}) ? defaultVal(props.showAdd,props.showAddBtn,true) : false).current;
     const [state,setState] = React.useState({
@@ -44,6 +53,9 @@ const TableDataSelectField = React.forwardRef((_props,ref)=>{
     const cFetch = typeof customFetchItem =='function' && customFetchItem;
     const fetchItems = (opts)=>{
         opts.showError = false;
+        if(sortColumn){
+            opts.sort = sort;
+        }
         if(cFetch) return cFetch(queryPath,opts);
         if(queryPath){
             return fetch(queryPath,opts);

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

@@ -109,6 +109,7 @@ export const getFilterComponentProps = (_props)=>{
     } else if(isNonNullString(props.foreignKeyColumn) && isNonNullString(props.foreignKeyTable)) {
         component = Fields.SelectTableData;
         props.multiple = true;
+        type = "select";
     }else {
         const tt = type.replaceAll("_","").toLowerCase();
         if(React.isComponent(componentTypes[tt])){

package/src/layouts/DatabaseStatistics/DatabaseStatistic.js

@@ -18,7 +18,7 @@ import fetch from "$capi/fetch";
 import Auth from "$auth";
 import Icon from "$ecomponents/Icon";
 
-export default function DatabaseStatisticContainer ({dashboardProps,fetchDataProps,table,fetchCount,index,testID,title,icon,onPress:customOnPress,columns,fetchData,withDashboard,...props}){
+export default function DatabaseStatisticContainer ({dashboardProps,onRefreshAll,fetchDataProps,table,fetchCount,index,testID,title,icon,onPress:customOnPress,columns,fetchData,withDashboard,...props}){
     dashboardProps = defaultObj(dashboardProps);
     const [count,setCount] = React.useState(0);
     const datagridRef = React.useRef(null);
@@ -44,6 +44,11 @@ export default function DatabaseStatisticContainer ({dashboardProps,fetchDataPro
     }
     const refreshingRef = React.useRef(null);
     const isMounted = React.useIsMounted();
+    const onRefreshAllItem = typeof onRefreshAll =='function'? {
+        text : "Tout actualiser",
+        onPress : onRefreshAll,
+        icon : "refresh-circle"
+    } : {}
     
     const [isLoading,setIsLoading] = React.useState(withDashboard?false:true);
     const refresh = ()=>{
@@ -148,7 +153,7 @@ export default function DatabaseStatisticContainer ({dashboardProps,fetchDataPro
                     </View>
                     <Menu
                         testID={testID+"_Menu"}
-                        items = {context.renderMenu()}
+                        items = {[...context.renderMenu(),onRefreshAllItem]}
                         anchor = {(p)=><Pressable {...p} style={[theme.styles.pl1]} testID={testID+"_MenuAnchor"}>
                             <Label
                                 textCenter
@@ -177,7 +182,8 @@ export default function DatabaseStatisticContainer ({dashboardProps,fetchDataPro
                         icon : "refresh",
                         onPress : refresh,
                         text : "Actualiser"
-                    }
+                    },
+                    onRefreshAllItem,
                 ]}
                 anchor = {(p)=><Avatar suffix={index} {...aProps} {...p} icon= {icon} size={40} label={title}/>}
             />

package/src/layouts/DatabaseStatistics/index.js

@@ -5,6 +5,7 @@ import React from "$react";
 import DatabaseStatistic from "./DatabaseStatistic";
 import theme from "$theme";
 import PropTypes from "prop-types";
+import Auth from "$cauth";
 
 export const title = 'Statistiques en BD';
 export default function DatabaseStatisticScreen ({withScreen,fetchDataProps,tableFilter,fetchCount,fetchData,title:customTitle,contentProps,containerProps,tables,Component,...props}){
@@ -12,6 +13,7 @@ export default function DatabaseStatisticScreen ({withScreen,fetchDataProps,tabl
         containerProps = defaultObj(containerProps);
         const title = containerProps.title = defaultStr(containerProps.title,DatabaseStatisticScreen.title);
         contentProps = defaultObj(contentProps);
+        const forceRender = React.useForceRender();
         if(Component == Cell){
             containerProps.desktopSize = defaultNumber(containerProps.desktopSize,12);
             containerProps.tabletSize = defaultNumber(containerProps.tabletSize,8);
@@ -28,6 +30,8 @@ export default function DatabaseStatisticScreen ({withScreen,fetchDataProps,tabl
                table = t;
             }
             if(table.databaseStatistic === false || table.databaseStatistics === false) return null;
+            const chartAllowedPerm =  defaultStr(table.chartAllowedPerm);
+            if(chartAllowedPerm && !Auth.isAllowedFromStr(chartAllowedPerm || !Auth.isTableDataAllowed({table:tableName}))) return null;
             content.push(<Cell elevation = {5} withSurface mobileSize={12} desktopSize={3} tabletSize={4} {...contentProps} key = {index} >
                 <DatabaseStatistic
                     icon = {table.icon}