datastake-daf 0.6.782 → 0.6.784

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

@@ -0,0 +1,326 @@
+import React, { useMemo, useState, useEffect } from 'react'
+import { useViewUrlParams } from './hooks/useViewUrlParams.js'
+import { usePrepareForm } from './hooks/usePrepareForm.js'
+import { useViewPermissions } from './hooks/useViewPermissions.js'
+import { useSubmitSubject } from './hooks/useSubmitSubject.js'
+import { useCallToGetData } from './hooks/useCallToGetData.js'
+import { useViewActions } from './hooks/useViewActions.js'
+
+import { groupSubsections } from '../../../@daf/core/components/ViewForm/helper.js'
+import Loading from '../../../@daf/core/components/Loading/index.jsx'
+import Header from '../../../@daf/core/components/Header/index.jsx'
+import Multiselect from '../../../@daf/core/components/Select/MultiSelect/index.jsx'
+import ViewFormNavigation from '../../../@daf/core/components/ViewForm/navigation.jsx'
+import ViewForm from '../../../@daf/core/components/ViewForm/content.jsx'
+import Records from '../../../@daf/core/components/ViewForm/components/Records/index.jsx'
+import { Template } from '../Template/index.jsx'
+
+const View = ({
+    push,
+    getRedirectLink,
+    allData,
+    ajaxForms,
+    changeAjaxForms,
+    t,
+    namespaceConfiguration,
+    params,
+    pathname,
+    search,
+    searchParams,
+    setSearchParams,
+    mode="app",
+    APP,
+    viewConfig,
+    partners,
+    setSelectedPartners,
+    user,
+    serviceMap,
+    actionMap,
+    goBack,
+    breadcrumbs,
+    theme,
+    buttonActions,
+    generatePath,
+    getApiBaseUrl,
+    getAppHeader,
+    location,
+    isMobile,
+    linkingTemplateContextData,
+    addData,
+    options,
+    getSubjectsDetails,
+    // ADD CALLBACK TO GET THE CURRENT NAMESPACE CONFIG
+}) => {
+    const getNamespaceConfig = (namespace) => namespaceConfiguration?.[namespace] || {};
+    const [openRecordsModal, setOpenRecordsModal] = useState(false);
+
+    // HANDLES THE URL PARAMS FOR THE VIEW PAGE
+    const {
+		namespace, 
+		id, 
+		group, 
+		subsection, 
+		source,
+		setSource,
+		sourceUrl,
+		version,
+		setVersion,
+		versionUrl,
+		goBackFromSource,
+		getEditLink,
+		match,
+    } = useViewUrlParams({
+        params,
+        push,
+        pathname,
+        search,
+        searchParams,
+        setSearchParams,
+    });
+
+    const namespaceConfig = useMemo(() => getNamespaceConfig(namespace), [namespace]);
+
+    // PREPARES THE FORM FOR THE VIEW PAGE
+    const { 
+		form, 
+		data, 
+		groups, 
+		linkingForms, 
+		loading, 
+		setLoading, 
+		notFound, 
+	} = usePrepareForm({
+		namespaceConfig,
+		allData,
+		id,
+		namespace,
+		t,
+		mode,
+		APP,
+		viewConfig,
+	});
+
+    const { canEdit, isSupported } = useViewPermissions({
+		data,
+		id,
+		namespace,
+		user,
+		push,
+		getRedirectLink,
+        namespaceConfig: namespaceConfiguration,
+        APP,
+        viewConfig,
+	});
+
+    const groupForm = useMemo(() => {
+		const gF = form[group] || {};
+		if (subsection) {
+			const sectionForms = groupSubsections(gF);
+			if (sectionForms[subsection]) {
+				return sectionForms[subsection];
+			}
+		}
+		return gF;
+	}, [form, group, subsection]);
+
+    const { submitSubject, isDisabled, submitLoading, isPublished } = useSubmitSubject({
+        namespace,
+        data,
+        serviceMap,
+    });
+
+    const { pageActions, extraPageActions } = useViewActions({
+		namespace,
+		data,
+		isSupported,
+		canEdit,
+		versionUrl,
+		sourceUrl,
+		getEditLink,
+		submitSubject,
+		isDisabled,
+		setOpenRecordsModal,
+		goBackFromSource,
+		push,
+		getRedirectLink,
+		t,
+		viewConfig,
+		buttonActions,
+	});
+
+    useEffect(() => {
+        if(namespace && id && namespaceConfig && typeof getSubjectsDetails === 'function') {
+            getSubjectsDetails({
+                namespace,
+                id,
+                namespaceConfig,
+            })
+        }
+    }, [namespace, id, namespaceConfig])
+
+    const action = useMemo(() => actionMap?.[namespaceConfig?.action], [namespaceConfig?.action, actionMap]);
+
+    const namespaceGet = {
+		[namespace]: () => {
+			return action?.({
+				namespace: namespaceConfig?.namespace,
+				module: APP,
+				view: namespaceConfig?.view,
+				...(namespaceConfig?.scope && { scope: namespaceConfig.scope }),
+				datastakeId: id,
+				version,
+				source,
+			})
+		}
+	}
+
+    useCallToGetData({
+		namespaceConfig,
+		namespace,
+		allData,
+		id,
+		isSupported,
+		namespaceGet,
+		source,
+		version,
+		user,
+		setLoading,
+        APP
+	})
+
+    const extraLinking = useMemo(() => {
+		return null;
+	}, [namespace, match, data]);
+
+    const sourceOptions = useMemo(() => {
+        return partners.map((partner) => {
+           const isOwnData = partner.id === user?.company?.id;
+
+            return {
+                label: partner.nickName,
+                value: partner.id,
+                avatar: isOwnData ? <span>OWN</span> : undefined,
+                background: isOwnData ? theme.colorPrimary7 : undefined,
+                color: isOwnData ? "white" : undefined,
+            };
+        });
+   }, [partners, user]);
+
+   const actionButtons = useMemo(() => {
+    return groupForm?.template === "linkingSubjects"
+        ? pageActions.filter((v) => v.key !== "edit")
+        : pageActions;
+    }, [groupForm, pageActions]);
+
+    if(!isSupported || notFound) {
+        return <Loading />
+    }
+
+    return (
+        <>
+            <div className={"daf-view-form"}>
+                <Header
+                    title={data?.name || ""}
+                    breadcrumbs={breadcrumbs}
+                    goBackTo={goBack}
+                    actionButtons={actionButtons}
+                    extraButtons={extraPageActions}
+                    addedHeaderFirst
+                    addedHeader={
+                        <div className="flex flex-row gap-4">
+                            <Multiselect
+                                options={[...sourceOptions]}
+                                isAvatarGroup
+                                selectionType="checkbox"
+                                key={partners?.length}
+                                canUnselectLast={false}
+                                isSingle
+                                onChange={(selected) => {
+                                    setSelectedPartners((prev) => ({
+                                        ...prev,
+                                        partners: selected,
+                                        loading: false,
+                                    }));
+                                }}
+                                dropDownWidth={200}
+                                defaultSelected={(partners || []).map((p) => p.id) || []}
+                            />
+                        </div>
+                    }
+                />
+                <div className="view-content">
+                    <ViewFormNavigation
+                        mod={APP}
+                        data={data}
+                        match={match}
+                        form={form}
+                        group={group}
+                        subsection={subsection}
+                        search={search}
+                        goTo={push}
+                        getRedirectLink={getRedirectLink}
+                        generatePath={generatePath}
+                        params={params}
+                    />
+                    {groupForm.template ? (<Template
+						namespace={namespace}
+						conf={{
+							mod: APP,
+							group: group,
+							form: groupForm,
+							data: data[group] ? data[group] : data || {},
+							allData: data,
+							linkingForms: linkingForms || {},
+							linkingData: data.linking || {},
+							match,
+							canEdit: isSupported && canEdit,
+							mode,
+                            user: user,
+                            t: t,
+                            location: location,
+                            isMobile: isMobile,
+                            linkingTemplateContextData: linkingTemplateContextData,
+                            addData: addData,
+                            options: options,
+						}}
+					/>) : (
+ 					    <ViewForm
+                            form={groupForm}
+                            data={data || {}}
+                            groupConfig={groups || {}}
+                            linkingData={(data || {}).linking || {}}
+                            linkingForms={linkingForms || {}}
+                            ajaxOptions={[]}
+                            extraLinking={extraLinking}
+                            t={t}
+                            app={APP}
+                            ajaxForms={ajaxForms}
+                            language={user?.language}
+                            changeAjaxForms={changeAjaxForms}
+                            getApiBaseUrl={getApiBaseUrl}
+                            getAppHeader={getAppHeader}
+                            user={user}
+                        />
+                    )}
+                </div>
+            </div>
+            {openRecordsModal && (
+				<Records 
+					open={openRecordsModal}
+					onClose={() => setOpenRecordsModal(false)}
+					t={t}
+					sourceOptions={[]}
+					versionOptions={[]}
+					id={params?.id}
+					subject={namespace}
+					onSubmit={(values) => {
+						setSource(values?.source);
+						setVersion(values?.version);
+					}}
+				/>
+			)}
+        </>
+    )
+}
+
+export default View

package/src/@daf/utils/object.js

@@ -61,4 +61,6 @@ export const removeKeysFromObject = (obj = {}, keys = []) => {
         }
     }
     return result;
-}
+}
+
+export const hasKeyInObject = (obj, key) => Object.keys(obj || {}).includes(key);

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

@@ -1,4 +1,7 @@
 const en = {
+  "Site": "Site",
+  "Production Sites": "Production Sites",
+  "Type of account": "Type of account",
   "accounts": "Accounts",
   "users": "Users",
   "subjects": "Subjects",

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

@@ -1,4 +1,7 @@
 const fr = {
+	"Site": "Site",
+	"Production Sites": "Sites de production",
+	"Type of account": "Type de compte",
 	"accounts": "Comptes",
 	"users": "Utilisateurs",
 	"subjects": "Sujets",

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

@@ -1,4 +1,7 @@
 const sp = {
+  "Site": "Sitio",
+  "Production Sites": "Centros de producción",
+  "Type of account": "Tipo de cuenta",
   "Identified Customers": "Clientes identificados",
   "Identified Suppliers": "Proveedores identificados",
   "Associated Mine Sites": "Sitios mineros asociados",

package/src/pages.js

@@ -19,4 +19,7 @@ export { default as TablePage } from './@daf/pages/TablePage/index.jsx';
 export { default as OperatorSummary } from './@daf/pages/Summary/Operator/index.jsx';
 export { default as RestorationActivitySummary } from './@daf/pages/Summary/Activities/Restoration/index.jsx';
 export { default as PlantingCycleSummary } from './@daf/pages/Summary/Activities/PlantingCycle/index.jsx';
-export { default as MineSummary } from './@daf/pages/Summary/Minesite/index.jsx';
+export { default as MineSummary } from './@daf/pages/Summary/Minesite/index.jsx';
+
+// View
+export { default as View } from './@daf/pages/View/index.jsx';

package/src/utils.js

@@ -27,7 +27,7 @@ export { default as locales } from './constants/locales/index.js';
 
 export { getTagColor } from "./@daf/utils/productTag.js";
 
-export { convertUndefinedToNull } from './@daf/utils/object'
+export { convertUndefinedToNull, hasKeyInObject, removeKeysFromObject } from './@daf/utils/object'
 
 export { default as ErrorFormat, formatErrors } from './helpers/ErrorFormater'
 

package/dist/style/datastake/mapbox-gl.css

@@ -1,330 +0,0 @@
-/* Isolated Mapbox GL CSS - Scoped to prevent Leaflet conflicts */
-
-/* Mapbox GL Core Styles - Scoped with .mapbox-gl-scope */
-.mapbox-gl-scope .mapboxgl-map {
-  font: 12px/20px Helvetica Neue, Arial, Helvetica, sans-serif;
-  overflow: hidden;
-  position: relative;
-  -webkit-tap-highlight-color: rgb(0 0 0/0);
-}
-
-.mapbox-gl-scope .mapboxgl-canvas {
-  left: 0;
-  position: absolute;
-  top: 0;
-}
-
-.mapbox-gl-scope .mapboxgl-map:-webkit-full-screen {
-  height: 100%;
-  width: 100%;
-}
-
-.mapbox-gl-scope .mapboxgl-canary {
-  background-color: salmon;
-}
-
-.mapbox-gl-scope .mapboxgl-canvas-container.mapboxgl-interactive,
-.mapbox-gl-scope .mapboxgl-ctrl-group button.mapboxgl-ctrl-compass {
-  cursor: grab;
-  -webkit-user-select: none;
-  user-select: none;
-}
-
-.mapbox-gl-scope .mapboxgl-canvas-container.mapboxgl-interactive.mapboxgl-track-pointer {
-  cursor: pointer;
-}
-
-.mapbox-gl-scope .mapboxgl-canvas-container.mapboxgl-interactive:active,
-.mapbox-gl-scope .mapboxgl-ctrl-group button.mapboxgl-ctrl-compass:active {
-  cursor: grabbing;
-}
-
-.mapbox-gl-scope .mapboxgl-canvas-container.mapboxgl-touch-zoom-rotate,
-.mapbox-gl-scope .mapboxgl-canvas-container.mapboxgl-touch-zoom-rotate .mapboxgl-canvas {
-  touch-action: pan-x pan-y;
-}
-
-.mapbox-gl-scope .mapboxgl-canvas-container.mapboxgl-touch-drag-pan,
-.mapbox-gl-scope .mapboxgl-canvas-container.mapboxgl-touch-drag-pan .mapboxgl-canvas {
-  touch-action: pinch-zoom;
-}
-
-.mapbox-gl-scope .mapboxgl-canvas-container.mapboxgl-touch-zoom-rotate.mapboxgl-touch-drag-pan,
-.mapbox-gl-scope .mapboxgl-canvas-container.mapboxgl-touch-zoom-rotate.mapboxgl-touch-drag-pan .mapboxgl-canvas {
-  touch-action: none;
-}
-
-/* Control positioning */
-.mapbox-gl-scope .mapboxgl-ctrl-bottom,
-.mapbox-gl-scope .mapboxgl-ctrl-bottom-left,
-.mapbox-gl-scope .mapboxgl-ctrl-bottom-right,
-.mapbox-gl-scope .mapboxgl-ctrl-left,
-.mapbox-gl-scope .mapboxgl-ctrl-right,
-.mapbox-gl-scope .mapboxgl-ctrl-top,
-.mapbox-gl-scope .mapboxgl-ctrl-top-left,
-.mapbox-gl-scope .mapboxgl-ctrl-top-right {
-  pointer-events: none;
-  position: absolute;
-  z-index: 2;
-}
-
-.mapbox-gl-scope .mapboxgl-ctrl-top-left {
-  left: 0;
-  top: 0;
-}
-
-.mapbox-gl-scope .mapboxgl-ctrl-top {
-  left: 50%;
-  top: 0;
-  transform: translateX(-50%);
-}
-
-.mapbox-gl-scope .mapboxgl-ctrl-top-right {
-  right: 0;
-  top: 0;
-}
-
-.mapbox-gl-scope .mapboxgl-ctrl-right {
-  right: 0;
-  top: 50%;
-  transform: translateY(-50%);
-}
-
-.mapbox-gl-scope .mapboxgl-ctrl-bottom-right {
-  bottom: 0;
-  right: 0;
-}
-
-.mapbox-gl-scope .mapboxgl-ctrl-bottom {
-  bottom: 0;
-  left: 50%;
-  transform: translateX(-50%);
-}
-
-.mapbox-gl-scope .mapboxgl-ctrl-bottom-left {
-  bottom: 0;
-  left: 0;
-}
-
-.mapbox-gl-scope .mapboxgl-ctrl-left {
-  left: 0;
-  top: 50%;
-  transform: translateY(-50%);
-}
-
-.mapbox-gl-scope .mapboxgl-ctrl {
-  clear: both;
-  pointer-events: auto;
-  transform: translate(0);
-}
-
-.mapbox-gl-scope .mapboxgl-ctrl-top-left .mapboxgl-ctrl {
-  float: left;
-  margin: 10px 0 0 10px;
-}
-
-.mapbox-gl-scope .mapboxgl-ctrl-top .mapboxgl-ctrl {
-  float: left;
-  margin: 10px 0;
-}
-
-.mapbox-gl-scope .mapboxgl-ctrl-top-right .mapboxgl-ctrl {
-  float: right;
-  margin: 10px 10px 0 0;
-}
-
-.mapbox-gl-scope .mapboxgl-ctrl-bottom-right .mapboxgl-ctrl,
-.mapbox-gl-scope .mapboxgl-ctrl-right .mapboxgl-ctrl {
-  float: right;
-  margin: 0 10px 10px 0;
-}
-
-.mapbox-gl-scope .mapboxgl-ctrl-bottom .mapboxgl-ctrl {
-  float: left;
-  margin: 10px 0;
-}
-
-.mapbox-gl-scope .mapboxgl-ctrl-bottom-left .mapboxgl-ctrl,
-.mapbox-gl-scope .mapboxgl-ctrl-left .mapboxgl-ctrl {
-  float: left;
-  margin: 0 0 10px 10px;
-}
-
-/* Control group styling */
-.mapbox-gl-scope .mapboxgl-ctrl-group {
-  background: #fff;
-  border-radius: 4px;
-}
-
-.mapbox-gl-scope .mapboxgl-ctrl-group:not(:empty) {
-  box-shadow: 0 0 0 2px #0000001a;
-}
-
-.mapbox-gl-scope .mapboxgl-ctrl-group button {
-  background-color: initial;
-  border: 0;
-  box-sizing: border-box;
-  cursor: pointer;
-  display: block;
-  height: 29px;
-  outline: none;
-  overflow: hidden;
-  padding: 0;
-  width: 29px;
-}
-
-.mapbox-gl-scope .mapboxgl-ctrl-group button+button {
-  border-top: 1px solid #ddd;
-}
-
-.mapbox-gl-scope .mapboxgl-ctrl button .mapboxgl-ctrl-icon {
-  background-position: 50%;
-  background-repeat: no-repeat;
-  display: block;
-  height: 100%;
-  width: 100%;
-}
-
-.mapbox-gl-scope .mapboxgl-ctrl-attrib-button:focus,
-.mapbox-gl-scope .mapboxgl-ctrl-group button:focus {
-  box-shadow: 0 0 2px 2px #0096ff;
-}
-
-.mapbox-gl-scope .mapboxgl-ctrl button:disabled {
-  cursor: not-allowed;
-}
-
-.mapbox-gl-scope .mapboxgl-ctrl button:disabled .mapboxgl-ctrl-icon {
-  opacity: .25;
-}
-
-.mapbox-gl-scope .mapboxgl-ctrl-group button:first-child {
-  border-radius: 4px 4px 0 0;
-}
-
-.mapbox-gl-scope .mapboxgl-ctrl-group button:last-child {
-  border-radius: 0 0 4px 4px;
-}
-
-.mapbox-gl-scope .mapboxgl-ctrl-group button:only-child {
-  border-radius: inherit;
-}
-
-.mapbox-gl-scope .mapboxgl-ctrl button:not(:disabled):hover {
-  background-color: #0000000d;
-}
-
-/* Marker styles */
-.mapbox-gl-scope .mapboxgl-marker {
-  position: absolute;
-  z-index: 1;
-}
-
-.mapbox-gl-scope .mapboxgl-marker svg {
-  display: block;
-}
-
-/* Popup styles */
-.mapbox-gl-scope .mapboxgl-popup {
-  position: absolute;
-  text-align: center;
-  margin-bottom: 20px;
-}
-
-.mapbox-gl-scope .mapboxgl-popup-content-wrapper {
-  padding: 1px;
-  text-align: left;
-  border-radius: 12px;
-}
-
-.mapbox-gl-scope .mapboxgl-popup-content {
-  margin: 13px 24px 13px 20px;
-  line-height: 1.3;
-  font-size: 13px;
-  min-height: 1px;
-}
-
-.mapbox-gl-scope .mapboxgl-popup-content p {
-  margin: 17px 0;
-}
-
-.mapbox-gl-scope .mapboxgl-popup-tip-container {
-  width: 40px;
-  height: 20px;
-  position: absolute;
-  left: 50%;
-  margin-top: -1px;
-  margin-left: -20px;
-  overflow: hidden;
-  pointer-events: none;
-}
-
-.mapbox-gl-scope .mapboxgl-popup-tip {
-  width: 17px;
-  height: 17px;
-  padding: 1px;
-  margin: -10px auto 0;
-  pointer-events: auto;
-  -webkit-transform: rotate(45deg);
-  -moz-transform: rotate(45deg);
-  -ms-transform: rotate(45deg);
-  transform: rotate(45deg);
-}
-
-.mapbox-gl-scope .mapboxgl-popup-content-wrapper,
-.mapbox-gl-scope .mapboxgl-popup-tip {
-  background: white;
-  color: #333;
-  box-shadow: 0 3px 14px rgba(0, 0, 0, 0.4);
-}
-
-.mapbox-gl-scope .mapboxgl-popup-close-button {
-  position: absolute;
-  top: 0;
-  right: 0;
-  border: none;
-  text-align: center;
-  width: 24px;
-  height: 24px;
-  font: 16px/24px Tahoma, Verdana, sans-serif;
-  color: #757575;
-  text-decoration: none;
-  background: transparent;
-}
-
-.mapbox-gl-scope .mapboxgl-popup-close-button:hover,
-.mapbox-gl-scope .mapboxgl-popup-close-button:focus {
-  color: #585858;
-}
-
-/* Attribution */
-.mapbox-gl-scope .mapboxgl-ctrl-attribution {
-  background: #fff;
-  background: rgba(255, 255, 255, 0.8);
-  margin: 0;
-}
-
-.mapbox-gl-scope .mapboxgl-ctrl-attribution,
-.mapbox-gl-scope .mapboxgl-ctrl-scale-line {
-  padding: 0 5px;
-  color: #333;
-  line-height: 1.4;
-}
-
-.mapbox-gl-scope .mapboxgl-ctrl-attribution a {
-  text-decoration: none;
-}
-
-.mapbox-gl-scope .mapboxgl-ctrl-attribution a:hover,
-.mapbox-gl-scope .mapboxgl-ctrl-attribution a:focus {
-  text-decoration: underline;
-}
-
-/* Hide attribution by default */
-.mapbox-gl-scope .mapboxgl-ctrl-attribution {
-  display: none !important;
-}
-
-.mapbox-gl-scope .mapboxgl-ctrl-logo {
-  display: none !important;
-}