datastake-daf 0.6.766 → 0.6.768

package/src/@daf/pages/{Events → TablePage}/create.jsx

@@ -3,9 +3,9 @@ import { message } from 'antd';
 import { MessageTypes } from '../../../helpers/messages.js';
 import DynamicForm from '../../core/components/DynamicForm/index.jsx';
 
-const EventsCreate = ({
-    namespace = 'event',
-    view = 'scoping',
+const Create = ({
+    namespace,
+    view,
     edit = false,
     formData = {},
     loading = false, 
@@ -27,6 +27,8 @@ const EventsCreate = ({
     changeAjaxOptions = () => {}, 
     getAppHeader = () => {},
     getApiBaseUrl = () => {}, 
+    scope,
+    formType
 }) => {
     let {
         form = {},
@@ -39,19 +41,19 @@ const EventsCreate = ({
     useEffect(() => {
         if (Object.keys(form).length === 0 && !formData[`${APP}-${view}`]) {
           if (!edit) {
-            getData({ namespace, module: APP, view, scope: 'create' });
+            getData({ namespace, module: APP, view, scope });
           } else {
             form = formConfig;
             data = formValue;
           }
         }
-    }, [edit, user?.language]);
+    }, [edit, user?.language, scope]);
 
     return (
         <div className="daf-create-form">
             <DynamicForm 
                 form={form}
-                data={data}
+                data={{...defaultData, ...data}}
                 showSaveAndNext={false}
                 module={APP}
                 onCancel={onCancel}
@@ -74,8 +76,9 @@ const EventsCreate = ({
                     const newPayload = {
                         ...defaultData,
                         ...payloadData,
-                        form: 'location'
+                        form: formType
                     };
+
                 
                     const callback = (type, m, data) => {
                         if (setSelectedFormNext) {
@@ -101,4 +104,4 @@ const EventsCreate = ({
     )
 }
 
-export default EventsCreate
+export default Create

package/src/@daf/pages/TablePage/hook.js

@@ -0,0 +1,123 @@
+import { useState, useEffect, useCallback, useMemo } from 'react';
+import { useGetQueryParams } from "../../hooks/useGetQueryParams.js";
+import { getFiltersConfig, getFilterOptions, getCheckboxConfig, getSelectFiltersConfig } from './config.js';
+
+export const useFetchData = ({
+    location,
+    getData,
+    activeTab,
+    extendingFilters,
+    subject,
+}) => {
+    const { paginationQuery, searchParams, otherParams, sortBy, sortDir, } = useGetQueryParams({location});
+    useEffect(() => {
+        const cleanSearchParams = Object.fromEntries(
+            Object.entries(searchParams).filter(([_, value]) => value != null && value !== '')
+        );
+
+        const hasPagination = paginationQuery.skip != null || paginationQuery.take != null;
+        
+        if (!hasPagination) {
+            return;
+        }
+
+        getData({
+            ...extendingFilters,
+            pagination: paginationQuery,
+            ...(Object.keys(otherParams).length > 0 && otherParams ),
+            ...(Object.keys(cleanSearchParams).length > 0 && { search: cleanSearchParams }),
+            tab: activeTab,
+            sortBy: {
+                [sortBy || "updatedAt"]: sortDir ? (sortDir === "ascend" ? 1 : -1) : -1,
+            },
+        }, subject)
+    }, [location.search, activeTab, JSON.stringify(extendingFilters)]);
+}
+
+export const useTablePage = ({
+    subject,
+    location,
+    getData,
+    getColumns,
+    extendingFilters,
+    options,
+    t,
+    goTo,
+    user,
+    getRedirectLink,
+    theme,
+    data,
+    applications,
+    subjectClear,
+}) => {
+    const [selectOptions, setSelectOptions] = useState();
+    const [activeTab, setActiveTab] = useState("own");
+
+    useFetchData({
+        location,
+        getData,
+        activeTab,
+        extendingFilters: extendingFilters,
+        subject,
+    });
+
+    const columns = useMemo(() => 
+        getColumns({
+            t, 
+            goTo, 
+            user,
+            options,
+            activeTab,
+            getRedirectLink, 
+            theme,
+            subject,
+            data,
+            applications,
+        }), 
+        [t, goTo, user, options, activeTab, getRedirectLink, theme, data, applications, subject, getColumns]
+    );
+
+    const selectFiltersConfig = useMemo(() => 
+        getFiltersConfig({ t, subject }), 
+        [t, subject, getFiltersConfig]
+    );
+
+    useEffect(() => {
+        setSelectOptions((prev) => ({
+            ...prev,
+            ...getFilterOptions({ t, subject, options }),
+        }));
+    }, [options, t, subject, getFilterOptions]);
+
+    const checkboxConfig = useMemo(() => 
+        getCheckboxConfig({ subject }), 
+        [subject, getCheckboxConfig]
+    );
+
+    const _filtersConfig = useMemo(() => {
+        return getSelectFiltersConfig({ subject });
+    }, [subject, getSelectFiltersConfig]);
+
+    const handleActiveTabChange = useCallback((value) => {
+        setActiveTab(value);
+    }, []);
+
+    useEffect(
+        () => () => {
+            if (subjectClear && typeof subjectClear === 'function') {
+                subjectClear();
+            }
+        },
+        [subjectClear]
+    );
+
+    return {
+        activeTab,
+        selectOptions,
+        columns,
+        selectFiltersConfig,
+        handleActiveTabChange,
+        checkboxConfig,
+        _filtersConfig,
+    };
+}

package/src/@daf/pages/TablePage/index.jsx

@@ -0,0 +1,142 @@
+import React from 'react';
+import TablePageWithTabs from '../../core/components/Screens/TableScreen/TablePageWithTabs/index.jsx';
+import Create from './create.jsx';
+import { displayMessage } from '../../../helpers/messages.js';
+import { useTablePage } from './hook.js';
+
+const TablePage = ({
+    t = () => {},
+    goTo = () => {},
+    user = {},
+    options = {},
+    getRedirectLink = () => {},
+    theme = {},
+    loading = false,
+    data = {},
+    isMobile,
+    APP,
+    location,
+    formConfig = {
+        getFormData: () => {},
+        saveFormData: () => {},
+        formLoading: false,
+        query: {},
+        ajaxForms: {},
+        changeAjaxForms: () => {},
+        ajaxOptions: {},
+        changeAjaxOptions: () => {},
+        formData: {},
+        formValue: {},
+        form: {},
+        namespace: '',
+        view: '',
+        scope: '',
+        formType: '',
+        defaultValues: {},
+    },
+    extendingFilters = {},
+    getData = () => {},
+    getApiBaseUrl = () => {},
+    getAppHeader = () => {},
+    applications = [],
+    subjectClear,
+    subject,
+    getColumns = () => {},
+    viewConfig = {
+        title: '',
+        breadcrumbs: [],
+        createTitle: '',
+    },
+    onDownload,
+}) => {
+    
+    const {
+        activeTab,
+        selectOptions,
+        columns,
+        selectFiltersConfig,
+        handleActiveTabChange,
+        checkboxConfig,
+        _filtersConfig,
+    } = useTablePage({
+        subject,
+        location,
+        getData,
+        getColumns,
+        extendingFilters,
+        options,
+        t,
+        goTo,
+        user,
+        getRedirectLink,
+        theme,
+        data,
+        applications,
+        subjectClear,
+    });
+
+    return (
+        <TablePageWithTabs
+            t={t}
+            title={t(viewConfig.title || "")}
+            breadCrumbs={viewConfig.breadcrumbs}
+            location={location}
+            loading={loading}
+            goTo={goTo}
+            defaultActiveTab={"own"}
+            columns={columns}
+            data={data}
+            checkboxConfig={checkboxConfig}
+            APP={APP}
+            getApiBaseUrl={getApiBaseUrl}
+            selectOptions={selectOptions}
+            selectFiltersConfig={selectFiltersConfig}
+            getRedirectLink={getRedirectLink}
+            filtersConfig={_filtersConfig}
+            isMobile={isMobile}
+            view={subject}
+            getActiveTab={handleActiveTabChange}
+            onDownload={onDownload && typeof onDownload === 'function' ? onDownload : undefined}
+            drawerTitle={t(viewConfig.createTitle || "")}
+        >
+            {({onDrawerClose}) => (
+                <Create 
+                    t={t}
+                    goTo={goTo}
+                    user={user}
+                    APP={APP}
+                    getApiBaseUrl={getApiBaseUrl}
+                    getAppHeader={getAppHeader}
+                    getData={formConfig.getFormData}
+                    saveData={formConfig.saveFormData}
+                    loading={formConfig.formLoading}
+                    onSubmitted={(type, m, data) => {
+                        if (data.datastakeId) {
+                            displayMessage(
+                                type,
+                                t("affirmations::subject-created-successfully") || m,
+                            );
+                            goTo(`/app/edit/${subject}/${data.datastakeId}`);
+                        }
+                    }}
+                    onCancel={onDrawerClose}
+                    query={formConfig.query}
+                    ajaxForms={formConfig.ajaxForms}
+                    changeAjaxForms={formConfig.changeAjaxForms}
+                    ajaxOptions={formConfig.ajaxOptions}
+                    changeAjaxOptions={formConfig.changeAjaxOptions}
+                    formData={formConfig.formData}
+                    formValue={formConfig.formValue}
+                    form={formConfig.form}
+                    namespace={formConfig.namespace}
+                    view={formConfig.view}
+                    scope={formConfig.scope}
+                    formType={formConfig.formType}
+                    defaultData={formConfig.defaultValues}
+                />
+            )}
+        </TablePageWithTabs>
+    );
+};
+
+export default TablePage;

package/src/constants/locales/en/translation.js

@@ -1,4 +1,9 @@
 const en = {
+  "accounts": "Accounts",
+  "users": "Users",
+  "subjects": "Subjects",
+  "active-users": "Active Users",
+  "total-data-points": "Total Data Points",
   "Identified Customers": "Identified Customers",
   "Identified Suppliers": "Identified Suppliers",
   "Associated Mine Sites": "Associated Mine Sites",

package/src/constants/locales/fr/translation.js

@@ -1,4 +1,9 @@
 const fr = {
+	"accounts": "Comptes",
+	"users": "Utilisateurs",
+	"subjects": "Sujets",
+	"active-users": "Utilisateurs Actifs",
+	"total-data-points": "Total Points de Données",
 	"Identified Customers": "Clients identifiés",
 	"Identified Suppliers": "Fournisseurs identifiés",
 	"Associated Mine Sites": "Sites miniers associés",

package/src/index.js

@@ -193,6 +193,7 @@ export { InformationChannelProvider } from "./@daf/core/components/Screens/Infor
 export { default as SDGIcons } from "./@daf/core/components/UI/SDGIcon/index.jsx";
 export { default as CountryFlag } from "./@daf/core/components/UI/CountryFlag/index.jsx"
 export { default as KeyIndicatorNavigateLabel } from "./@daf/core/components/UI/KeyIndicatorNavigateLabel/index.jsx";
+export { default as MissingTagButton } from "./@daf/core/components/UI/MissingTagButton/index.jsx";
 
 //Settings
 export { default as Settings } from "./@daf/core/components/Screens/Settings/index.js";

package/src/@daf/pages/Documents/create.jsx

@@ -1,105 +0,0 @@
-import React, { useEffect} from 'react'
-import { message } from 'antd';
-import { MessageTypes } from '../../../helpers/messages.js';
-import DynamicForm from '../../core/components/DynamicForm/index.jsx';
-
-const StakeholdersCreate = ({
-    namespace = 'stakeholders',
-    view = 'scoping',
-    edit = false,
-    formData = {},
-    loading = false, 
-    onSubmitted = () => {}, 
-    onCancel = () => {}, 
-    getData = () => {}, 
-    saveData = () => {}, 
-    form: formConfig = {},
-    formValue = {},
-    defaultData = {}, 
-    user = {}, 
-    APP, 
-    query, 
-    goTo = () => {}, 
-    t = () => {}, 
-    ajaxForms = {}, 
-    changeAjaxForms = () => {}, 
-    ajaxOptions = {}, 
-    changeAjaxOptions = () => {}, 
-    getAppHeader = () => {},
-    getApiBaseUrl = () => {}, 
-}) => {
-    let {
-        form = {},
-        data = defaultData || {},
-      } = !edit ? (formData[`${APP}-${view}`] || {}) : {
-        form: formConfig,
-        data: formValue
-    };
-
-    useEffect(() => {
-        if (Object.keys(form).length === 0 && !formData[`${APP}-${view}`]) {
-          if (!edit) {
-            getData({ namespace, module: APP, view, scope: 'create' });
-          } else {
-            form = formConfig;
-            data = formValue;
-          }
-        }
-    }, [edit, user?.language]);
-
-    return (
-        <div className="daf-create-form">
-            <DynamicForm 
-                form={form}
-                data={data}
-                showSaveAndNext={false}
-                module={APP}
-                onCancel={onCancel}
-                isCreate
-                t={t}
-                excludedKeys={["title"]}
-                user={user}
-                ajaxForms={ajaxForms}
-                ajaxOptions={ajaxOptions}
-                getAppHeader={getAppHeader}
-                getApiBaseUrl={getApiBaseUrl}
-                changeAjaxOptions={changeAjaxOptions}
-                app={APP}
-                query={query}
-                goTo={goTo}
-                changeAjaxForms={changeAjaxForms}
-                submit={(payload, setSelectedFormNext) => {
-                    const payloadData = { ...payload, module: APP, namespace };
-                
-                    const newPayload = {
-                        ...defaultData,
-                        ...payloadData,
-                        form: 'document'
-                    };
-
-                
-                    const callback = (type, m, data) => {
-                        if (setSelectedFormNext) {
-                            setSelectedFormNext();
-                        }
-                        if (type === MessageTypes.SUCCESS) {
-                            if (onSubmitted) onSubmitted(type, m, data);
-                        } else {
-                            message.error(m);
-                        }
-                    };
-                    
-                    saveData(
-                        !data && !data.id ? newPayload : Object.assign(newPayload, { id: data.id }),
-                        callback,
-                    );
-                }}
-                isFormDisabled={() => {
-                    return !data || !data.typeOfEvent;
-                }}
-            />
-        </div>
-    )
-}
-
-export default StakeholdersCreate

package/src/@daf/pages/Events/Activities/create.jsx

@@ -1,104 +0,0 @@
-import React, { useEffect} from 'react'
-import { message } from 'antd';
-import { MessageTypes } from '../../../../helpers/messages.js';
-import DynamicForm from '../../../core/components/DynamicForm/index.jsx';
-
-const StakeholdersCreate = ({
-    namespace = "corrective-actions",
-    view = "corrective-actions",
-    edit = false,
-    formData = {},
-    loading = false, 
-    onSubmitted = () => {}, 
-    onCancel = () => {}, 
-    getData = () => {}, 
-    saveData = () => {}, 
-    form: formConfig = {},
-    formValue = {},
-    defaultData = {}, 
-    user = {}, 
-    APP, 
-    query, 
-    goTo = () => {}, 
-    t = () => {}, 
-    ajaxForms = {}, 
-    changeAjaxForms = () => {}, 
-    ajaxOptions = {}, 
-    changeAjaxOptions = () => {}, 
-    getAppHeader = () => {},
-    getApiBaseUrl = () => {}, 
-}) => {
-    let {
-        form = {},
-        data = defaultData || {},
-      } = !edit ? (formData[`${APP}-${view}`] || {}) : {
-        form: formConfig,
-        data: formValue
-    };
-
-    useEffect(() => {
-        if (Object.keys(form).length === 0 && !formData[`${APP}-${view}`]) {
-          if (!edit) {
-            getData({ namespace, module: APP, view, scope: 'createActivity' });
-          } else {
-            form = formConfig;
-            data = formValue;
-          }
-        }
-    }, [edit, user?.language]);
-
-    return (
-        <div className="daf-create-form">
-            <DynamicForm 
-                form={form}
-                data={{...defaultData, ...data}}
-                showSaveAndNext={false}
-                module={APP}
-                onCancel={onCancel}
-                isCreate
-                t={t}
-                excludedKeys={["title"]}
-                user={user}
-                ajaxForms={ajaxForms}
-                ajaxOptions={ajaxOptions}
-                getAppHeader={getAppHeader}
-                getApiBaseUrl={getApiBaseUrl}
-                changeAjaxOptions={changeAjaxOptions}
-                app={APP}
-                query={query}
-                goTo={goTo}
-                changeAjaxForms={changeAjaxForms}
-                submit={(payload, setSelectedFormNext) => {
-                    const payloadData = { ...payload, module: APP, namespace };
-                
-                    const newPayload = {
-                        ...defaultData,
-                        ...payloadData,
-                        form: 'worker'
-                    };
-                
-                    const callback = (type, m, data) => {
-                        if (setSelectedFormNext) {
-                            setSelectedFormNext();
-                        }
-                        if (type === MessageTypes.SUCCESS) {
-                            if (onSubmitted) onSubmitted(type, m, data);
-                        } else {
-                            message.error(m);
-                        }
-                    };
-                    
-                    saveData(
-                        !data && !data.id ? newPayload : Object.assign(newPayload, { id: data.id }),
-                        callback,
-                    );
-                }}
-                isFormDisabled={() => {
-                    return !data || !data.typeOfEvent;
-                }}
-            />
-        </div>
-    )
-}
-
-export default StakeholdersCreate

package/src/@daf/pages/Events/Incidents/create.jsx

@@ -1,104 +0,0 @@
-import React, { useEffect} from 'react'
-import { message } from 'antd';
-import { MessageTypes } from '../../../../helpers/messages.js';
-import DynamicForm from '../../../core/components/DynamicForm/index.jsx';
-
-const StakeholdersCreate = ({
-    namespace = "incident",
-    view = "incident",
-    edit = false,
-    formData = {},
-    loading = false, 
-    onSubmitted = () => {}, 
-    onCancel = () => {}, 
-    getData = () => {}, 
-    saveData = () => {}, 
-    form: formConfig = {},
-    formValue = {},
-    defaultData = {}, 
-    user = {}, 
-    APP, 
-    query, 
-    goTo = () => {}, 
-    t = () => {}, 
-    ajaxForms = {}, 
-    changeAjaxForms = () => {}, 
-    ajaxOptions = {}, 
-    changeAjaxOptions = () => {}, 
-    getAppHeader = () => {},
-    getApiBaseUrl = () => {}, 
-}) => {
-    let {
-        form = {},
-        data = defaultData || {},
-      } = !edit ? (formData[`${APP}-${view}`] || {}) : {
-        form: formConfig,
-        data: formValue
-    };
-
-    useEffect(() => {
-        if (Object.keys(form).length === 0 && !formData[`${APP}-${view}`]) {
-          if (!edit) {
-            getData({ namespace, module: APP, view, scope: 'createIncident' });
-          } else {
-            form = formConfig;
-            data = formValue;
-          }
-        }
-    }, [edit, user?.language]);
-
-    return (
-        <div className="daf-create-form">
-            <DynamicForm 
-                form={form}
-                data={{...defaultData, ...data}}
-                showSaveAndNext={false}
-                module={APP}
-                onCancel={onCancel}
-                isCreate
-                t={t}
-                excludedKeys={["title"]}
-                user={user}
-                ajaxForms={ajaxForms}
-                ajaxOptions={ajaxOptions}
-                getAppHeader={getAppHeader}
-                getApiBaseUrl={getApiBaseUrl}
-                changeAjaxOptions={changeAjaxOptions}
-                app={APP}
-                query={query}
-                goTo={goTo}
-                changeAjaxForms={changeAjaxForms}
-                submit={(payload, setSelectedFormNext) => {
-                    const payloadData = { ...payload, module: APP, namespace };
-                
-                    const newPayload = {
-                        ...defaultData,
-                        ...payloadData,
-                        form: 'worker'
-                    };
-                
-                    const callback = (type, m, data) => {
-                        if (setSelectedFormNext) {
-                            setSelectedFormNext();
-                        }
-                        if (type === MessageTypes.SUCCESS) {
-                            if (onSubmitted) onSubmitted(type, m, data);
-                        } else {
-                            message.error(m);
-                        }
-                    };
-                    
-                    saveData(
-                        !data && !data.id ? newPayload : Object.assign(newPayload, { id: data.id }),
-                        callback,
-                    );
-                }}
-                isFormDisabled={() => {
-                    return !data || !data.typeOfEvent;
-                }}
-            />
-        </div>
-    )
-}
-
-export default StakeholdersCreate