datastake-daf 0.6.772 → 0.6.773

package/src/@daf/pages/Summary/Activities/PlantingCycle/components/AssociatedInformation/index.jsx

@@ -1,40 +1,151 @@
-import React, { useState } from 'react';
-import { Widget } from '../../../../../../../../src/index.js';
+import React, { useState, useMemo, useEffect, useCallback } from 'react';
+import { Widget, StickyTable, SearchFilters } from '../../../../../../../../src/index.js';
+import { useWidgetFetch } from '../../../../../../hooks/useWidgetFetch.js';
+import { getColumns } from './config.js';
+import { getRedirectLink } from '../../../../../../../utils.js';
 
-const ACTIVITIES_TAB = 'activities';
-const PARTNERS_TAB = 'partners';
-const INCIDENTS_TAB = 'incidents';
+// Constants
+export const ACTIVITIES_TAB = 'activities';
+export const PARTNERS_TAB = 'partners';
+export const INCIDENTS_TAB = 'incidents';
 
+export const DEFAULT_SEARCH_FIELDS = ["name", "datastakeId"];
+const URL_PATTERN = /\/summary\/[^/]+\/(.+)/;
 
-const AssociatedInformation = ({ 
-    activityData, 
-    loading = false, 
-    t = (s) => s 
+// Configuration
+export const TABS_CONFIG = [
+    { label: "straatos::activities", value: ACTIVITIES_TAB },
+    { label: "straatos::partners", value: PARTNERS_TAB },
+    { label: "straatos::incidents", value: INCIDENTS_TAB, disabled: true },
+];
+
+// Helper functions
+export const getSearchFields = (activeTab) => DEFAULT_SEARCH_FIELDS;
+
+export const buildSearchFilter = (search, fields) => 
+    search ? { search: { qs: search, fields } } : {};
+
+export const extractTypeFromUrl = (url) => {
+    const match = url.match(URL_PATTERN);
+    if (!match) {
+        throw new Error(`Invalid URL format: ${url}`);
+    }
+    return match[1];
+};
+
+export const ensureArray = (data) => Array.isArray(data) ? data : [];
+
+const AssociatedInformation = ({
+    id,
+    navigate,
+    getSummaryDetail,
+    loading = false,
+    projectId,
+    basepath = "planting-cycle",
+    endpoint = "associated-information",
+    tabsConfig = TABS_CONFIG,
+    searchFieldsMap = getSearchFields,
+    t = (s) => s
 }) => {
     const [activeTab, setActiveTab] = useState(ACTIVITIES_TAB);
+    const [search, setSearch] = useState('');
+    
+    const searchFields = useMemo(() => searchFieldsMap(activeTab), [activeTab, searchFieldsMap]);
+    
+    const filters = useMemo(() => ({
+        type: activeTab,
+        ...buildSearchFilter(search, searchFields)
+    }), [activeTab, search, searchFields]);
+
+    const defaultConfig = useMemo(() => ({
+        basepath,
+        url: `/summary/${id}/${endpoint}`,
+        filters,
+        stop: !id,
+    }), [id, filters, basepath, endpoint]);
+
+    const customGetData = useMemo(() => {
+        if (!getSummaryDetail || !id) return undefined;
+        
+        return (rest) => {
+            const { url, filters: restFilters } = rest;
+            const type = extractTypeFromUrl(url);
+            const params = {
+                ...(restFilters || {}),
+                type: restFilters?.type || activeTab
+            };
+            return getSummaryDetail(id, type, params);
+        };
+    }, [getSummaryDetail, id, activeTab]);
+
+    const { loading: associatedInformationLoading, data: associatedInformationData, setData } = useWidgetFetch({
+        config: defaultConfig,
+        getData: customGetData
+    });
+
+    // Reset data and search when tab changes
+    useEffect(() => {
+        setData([]);
+        setSearch('');
+    }, [activeTab, setData]);
+
+    const handleSearch = useCallback((activeFilter, searchValue) => {
+        setSearch(searchValue || '');
+    }, []);
+
+    const handleTabChange = useCallback((value) => {
+        setActiveTab(value);
+    }, []);
+
+    const columns = useMemo(() => getColumns({
+        t,
+        activeTab,
+        view: activeTab,
+        projectId,
+        navigate,
+        getRedirectLink,
+    }), [t, activeTab, projectId, navigate]);
+
+    const tableDataSource = useMemo(() => 
+        ensureArray(associatedInformationData), 
+        [associatedInformationData]
+    );
+
+    const translatedTabs = useMemo(() => 
+        tabsConfig.map(tab => ({ ...tab, label: t(tab.label) })),
+        [tabsConfig, t]
+    );
 
     return (
         <section>
-
-              <Widget 
-                className="v2-widget no-px h-w-btn-header no-p-body"
+            <Widget
+                className="v2-widget no-px no-p-body h-w-btn-header with-border-header"
                 title={t("Associated Information")}
                 tabsConfig={{
-                    tabs: [
-                        { label: t("straatos::activities"), value: ACTIVITIES_TAB },
-                        { label: t("straatos::partners"), value: PARTNERS_TAB },
-                        { label: t("straatos::incidents"), value: INCIDENTS_TAB },
-                    ],
+                    tabs: translatedTabs,
                     value: activeTab,
-                    onChange: (value) => {
-                        setActiveTab(value);
-                        // setData([]);
-                    },
+                    onChange: handleTabChange,
                 }}
             >
-            <div>
-            </div>
-        </Widget>
+                <div className='mt-6 ml-6 mr-6'>
+                    <SearchFilters
+                        t={t}
+                        showFilter={false}
+                        hasError={false}
+                        canClear={true}
+                        setHasError={() => {}}
+                        onSearch={handleSearch}
+                        activeFilters={{ search }}
+                    />
+                </div>
+                <div className='mb-6'>
+                    <StickyTable
+                        columns={columns}
+                        dataSource={tableDataSource}
+                        loading={associatedInformationLoading || loading}
+                    />
+                </div>
+            </Widget>
         </section>
     );
 };

package/src/@daf/pages/Summary/Activities/PlantingCycle/components/CommunityParticipation/JobsTimeline/index.jsx

@@ -8,7 +8,6 @@ const JobsTimeline = ({
     t = (s) => s
 }) => {
 
-    console.log('dayJobsTimeline', dayJobsTimeline);
     const jobsData = Array.isArray(dayJobsTimeline) 
         ? dayJobsTimeline 
         : (dayJobsTimeline?.jobsTimeline || dayJobsTimeline?.jobs || dayJobsTimeline?.timeline || []);

package/src/@daf/pages/Summary/Activities/PlantingCycle/index.jsx

@@ -6,13 +6,12 @@ import CommunityParticipation from './components/CommunityParticipation/index.js
 import AssociatedInformation from './components/AssociatedInformation/index.jsx';
 import KeyInformation from './components/KeyInformation/index.jsx';
 
-const PlantingCycleSummary = ({ header, activityData, loading = false, id, t = () => { }, getSummaryDetail }) => {
-
+const PlantingCycleSummary = ({ header, activityData, loading = false, id, projectId, t = () => { }, getSummaryDetail, navigate }) => {
     return (
         <DashboardLayout
             header={
                 <Header
-                    title={header?.title || ''}
+                    title={header?.title + ' Summary' || ''}
                     supportText={header?.supportText || ''}
                     onDownload={header?.onDownload}
                     downloadDisabled={header?.downloadDisabled}
@@ -28,7 +27,7 @@ const PlantingCycleSummary = ({ header, activityData, loading = false, id, t = (
             <CycleOutcomes id={id} getSummaryDetail={getSummaryDetail}  loading={loading} t={t} />
             <CycleIndicators id={id} getSummaryDetail={getSummaryDetail} loading={loading} t={t} />
             <CommunityParticipation id={id} getSummaryDetail={getSummaryDetail} loading={loading} t={t} />
-            <AssociatedInformation id={id} getSummaryDetail={getSummaryDetail} loading={loading} t={t} />
+            <AssociatedInformation id={id} projectId={projectId} getSummaryDetail={getSummaryDetail} loading={loading} t={t} navigate={navigate} />
         </DashboardLayout>
     )
 }