use new sdga nd geography field in all dataset and usecase pages/components

Deepthi-Chand · Deepthi-Chand · commit f22d5be1993d · 2025-10-05T01:04:18.000+05:30
diff --git a/app/[locale]/(user)/components/ListingComponent.tsx b/app/[locale]/(user)/components/ListingComponent.tsx
@@ -529,11 +529,14 @@ const ListingComponent: React.FC<ListingProps> = ({
                         ? `${process.env.NEXT_PUBLIC_BACKEND_URL}/${item.organization.logo}`
                         : '/org.png';
                     
-                    // Get geographies from the geographies field (new approach)
                     const geographies = item.geographies && item.geographies.length > 0
                       ? item.geographies
                       : null;
 
+                    const sdgs = item.sdgs && item.sdgs.length > 0
+                      ? item.sdgs
+                      : null;
+
                     const MetadataContent = [
                       {
                         icon: Icons.calendar,
@@ -554,12 +557,7 @@ const ListingComponent: React.FC<ListingProps> = ({
 
                     if (geographies && geographies.length > 0) {
                       // Format geographies hierarchically for display
-                      const geoDisplay = geographies.map((geo: any) => {
-                        if (geo.parentId) {
-                          return `${geo.name} (${geo.parentId.name})`;
-                        }
-                        return geo.name;
-                      }).join(', ');
+                      const geoDisplay = geographies.join(', ');
 
                       MetadataContent.push({
                         icon: Icons.globe,
@@ -569,6 +567,18 @@ const ListingComponent: React.FC<ListingProps> = ({
                       });
                     }
 
+                    if (sdgs && sdgs.length > 0) {
+                      // Format SDGs for display
+                      const sdgDisplay = sdgs.map((sdg: any) => `${sdg.code} - ${sdg.name}`).join(', ');
+
+                      MetadataContent.push({
+                        icon: Icons.target,
+                        label: 'SDG Goals',
+                        value: sdgDisplay,
+                        tooltip: sdgDisplay,
+                      });
+                    }
+
                     if (item.has_charts && view === 'expanded') {
                       MetadataContent.push({
                         icon: Icons.chart,
diff --git a/app/[locale]/(user)/datasets/[datasetIdentifier]/components/Metadata/index.tsx b/app/[locale]/(user)/datasets/[datasetIdentifier]/components/Metadata/index.tsx
@@ -13,7 +13,7 @@ interface MetadataProps {
 }
 
 const MetadataComponent: React.FC<MetadataProps> = ({ data, setOpen }) => {
-  const Metadata = data.metadata.map((item: any) => ({
+  const Metadata = (data.metadata || []).map((item: any) => ({
     label: item.metadataItem.label,
     value: item.value,
     type: item.metadataItem.dataType,
@@ -55,7 +55,7 @@ const MetadataComponent: React.FC<MetadataProps> = ({ data, setOpen }) => {
   useEffect(() => {
     const fetchTitle = async () => {
       try {
-        const urlItem = data.metadata.find(
+        const urlItem = (data.metadata || []).find(
           (item: any) => item.metadataItem?.dataType === 'URL'
         );
 
@@ -186,8 +186,8 @@ const MetadataComponent: React.FC<MetadataProps> = ({ data, setOpen }) => {
               {data.geographies.map((geo: any, index: number) => (
                 <Tag
                   key={index}
-                  fillColor="var(--blue-secondary-color)"
-                  borderColor="var(--blue-secondary-text)"
+                  fillColor="var(--orange-secondary-color)"
+                  borderColor="var(--orange-secondary-text)"
                   textColor="black"
                 >
                   {geo.name}
diff --git a/app/[locale]/(user)/datasets/[datasetIdentifier]/components/SimilarDatasets/index.tsx b/app/[locale]/(user)/datasets/[datasetIdentifier]/components/SimilarDatasets/index.tsx
@@ -49,6 +49,9 @@ const similarDatasetQuery: any = graphql(`
           }
           value
         }
+        geographies {
+          name
+        }
         license
         resources {
           id
@@ -135,7 +138,7 @@ const SimilarDatasets: React.FC = () => {
                             {
                               icon: Icons.globe,
                               label: 'Geography',
-                              value: 'India',
+                              value: item.geographies.join(', '),
                             },
                           ]}
                           tag={item.tags}
diff --git a/app/[locale]/(user)/usecases/components/Details.tsx b/app/[locale]/(user)/usecases/components/Details.tsx
@@ -91,23 +91,6 @@ const PrimaryDetails = ({ data, isLoading }: { data: any; isLoading: any }) => {
             </div>
           </div>
         )}
-        {data.useCase.sdgs && data.useCase.sdgs.length > 0 && (
-          <div className="mt-6 lg:mt-10">
-            <Text variant="headingXl">SDG Goals</Text>
-            <div className="mt-4 flex flex-wrap gap-2">
-              {data.useCase.sdgs.map((sdg: any, index: number) => (
-                <Tag
-                  key={index}
-                  fillColor="var(--blue-secondary-color)"
-                  borderColor="var(--blue-secondary-text)"
-                  textColor="black"
-                >
-                  {sdg.code} - {sdg.name}
-                </Tag>
-              ))}
-            </div>
-          </div>
-        )}
         <div className="mt-6 lg:mt-10">
           <Text variant="headingXl">Summary</Text>
           <div className="prose-h1:text-3xl prose-h2:text-2xl prose-h3:text-xl prose-p:leading-relaxed prose-a:text-blue-600 hover:prose-a:text-blue-700 prose-code:bg-gray-200 prose-code:rounded prose-pre:bg-gray-100 prose-pre:border prose-pre:border-gray-300 prose-blockquote:border-l-blue-500 prose-th:bg-gray-100 prose-img:rounded-lg prose prose-lg mt-4 max-w-none prose-headings:text-gray-900 prose-p:text-gray-800 prose-a:underline prose-blockquote:text-gray-700 prose-strong:text-gray-900 prose-em:text-gray-800 prose-code:px-1 prose-code:py-0.5 prose-code:text-gray-900 prose-code:before:content-none prose-code:after:content-none prose-pre:text-gray-900 prose-ol:text-gray-800 prose-ul:text-gray-800 prose-li:text-gray-800 prose-li:marker:text-gray-600 prose-table:text-gray-800 prose-thead:border-gray-300 prose-tr:border-gray-300 prose-th:border-gray-300 prose-th:text-gray-900 prose-td:border-gray-300 prose-td:text-gray-800 prose-hr:border-gray-300">
diff --git a/app/[locale]/dashboard/[entityType]/[entitySlug]/dataset/[id]/edit/components/EditMetadata.tsx b/app/[locale]/dashboard/[entityType]/[entitySlug]/dataset/[id]/edit/components/EditMetadata.tsx
@@ -303,8 +303,8 @@ export function EditMetadata({ id }: { id: string }) {
       };
     }
 
-    dataset?.metadata.length > 0 &&
-      dataset?.metadata?.map((field) => {
+    (dataset?.metadata || []).length > 0 &&
+      (dataset?.metadata || []).map((field) => {
         if (
           field.metadataItem.dataType === 'MULTISELECT' &&
           field.value !== ''
@@ -590,6 +590,7 @@ export function EditMetadata({ id }: { id: string }) {
     <>
       {!getTagsList?.isLoading &&
       !getSectorsList?.isLoading &&
+      !getGeographiesList?.isLoading &&
       !getDatasetMetadata.isLoading ? (
         <Form
           formOptions={{
diff --git a/app/[locale]/dashboard/[entityType]/[entitySlug]/usecases/edit/[id]/metadata/page.tsx b/app/[locale]/dashboard/[entityType]/[entitySlug]/usecases/edit/[id]/metadata/page.tsx
@@ -1,7 +1,5 @@
 'use client';
 
-import { useEffect, useState } from 'react';
-import { useParams } from 'next/navigation';
 import { graphql } from '@/gql';
 import {
   MetadataModels,
@@ -11,7 +9,9 @@ import {
   UpdateUseCaseMetadataInput,
 } from '@/gql/generated/graphql';
 import { useMutation, useQuery } from '@tanstack/react-query';
+import { useParams } from 'next/navigation';
 import { Combobox, Spinner, toast } from 'opub-ui';
+import { useEffect, useState } from 'react';
 
 import { GraphQL } from '@/lib/api';
 import { useEditStatus } from '../../context';
@@ -140,6 +140,16 @@ const tagsListQueryDoc: any = graphql(`
   }
 `);
 
+const sdgsListQueryDoc: any = graphql(`
+  query SDGList {
+    sdgs {
+      id
+      code
+      name
+    }
+  }
+`);
+
 const Metadata = () => {
   const params = useParams<{
     entityType: string;
@@ -191,6 +201,7 @@ const Metadata = () => {
         sectors: [],
         geographies: [],
         tags: [],
+        sdgs: [],
       };
     }
 
@@ -225,6 +236,14 @@ const Metadata = () => {
         };
       }) || [];
 
+    defaultVal['sdgs'] =
+      data?.sdgs?.map((sdg: any) => {
+        return {
+          label: `${sdg.code} - ${sdg.name}`,
+          value: sdg.id,
+        };
+      }) || [];
+
     defaultVal['tags'] =
       data?.tags?.map((tag: TypeTag) => {
         return {
@@ -271,6 +290,17 @@ const Metadata = () => {
       )
     );
 
+  const getSDGsList: { data: any; isLoading: boolean; error: any } =
+    useQuery([`sdgs_list_query`], () =>
+      GraphQL(
+        sdgsListQueryDoc,
+        {
+          [params.entityType]: params.entitySlug,
+        },
+        []
+      )
+    );
+
   const getTagsList: {
     data: any;
     isLoading: boolean;
@@ -342,7 +372,7 @@ const Metadata = () => {
             ...Object.keys(transformedValues)
               .filter(
                 (valueItem) =>
-                  !['sectors', 'tags', 'geographies'].includes(valueItem) &&
+                  !['sectors', 'tags', 'geographies', 'sdgs'].includes(valueItem) &&
                   transformedValues[valueItem] !== ''
               )
               .map((key) => {
@@ -354,6 +384,7 @@ const Metadata = () => {
           ],
           sectors: updatedData.sectors?.map((item: any) => item.value) || [],
           tags: updatedData.tags?.map((item: any) => item.label) || [],
+          sdgs: updatedData.sdgs?.map((item: any) => item.value) || [],
           geographies: updatedData.geographies?.map((item: any) => parseInt(item.value, 10)) || [],
         },
       });
@@ -363,6 +394,8 @@ const Metadata = () => {
   if (
     getSectorsList.isLoading ||
     getTagsList.isLoading ||
+    getSDGsList.isLoading ||
+    getGeographiesList.isLoading ||
     useCaseData.isLoading
   ) {
     return (
@@ -422,6 +455,24 @@ const Metadata = () => {
     <div>
       <div>
         <div className="flex flex-wrap">
+          <div className="w-full py-4 pr-4 sm:w-1/2 md:w-1/2 lg:w-1/2 xl:w-1/2">
+            <Combobox
+              displaySelected
+              label="SDG Goals *"
+              name="sdgs"
+              list={
+                getSDGsList?.data.sdgs?.map((item: any) => ({
+                  label: `${item.code} - ${item.name}`,
+                  value: item.id,
+                })) || []
+              }
+              selectedValue={formData.sdgs}
+              onChange={(value) => {
+                handleChange('sdgs', value);
+                handleSave({ ...formData, sdgs: value });
+              }}
+            />
+          </div>
           <div className="w-full py-4 pr-4 sm:w-1/2 md:w-1/2 lg:w-1/2 xl:w-1/2">
             <Combobox
               displaySelected
diff --git a/app/[locale]/dashboard/[entityType]/[entitySlug]/usecases/edit/[id]/publish/Details.tsx b/app/[locale]/dashboard/[entityType]/[entitySlug]/usecases/edit/[id]/publish/Details.tsx
@@ -42,6 +42,8 @@ const Details = ({ data }: { data: any }) => {
       value: data?.useCases[0]?.completedOn,
     },
     { label: 'Sector', value: data?.useCases[0]?.sectors[0]?.name },
+    { label: 'Geography', value: data?.useCases[0]?.geographies?.map((geo: any) => geo.name).join(', ') },
+    { label: 'SDG Goals', value: data?.useCases[0]?.sdgs?.map((sdg: any) => `${sdg.code} - ${sdg.name}`).join(', ') },
     { label: 'Tags', value: data?.useCases[0]?.tags[0]?.value },
     ...(data?.useCases[0]?.metadata?.map((meta: any) => ({
       label: meta.metadataItem?.label,
@@ -71,14 +73,18 @@ const Details = ({ data }: { data: any }) => {
               <Text variant="bodyMd">Platform URL:</Text>
             </div>
             <div>
-              <Link
-                className="text-primaryBlue underline"
-                href={data.useCases[0].platformUrl}
-              >
-                <Text className="underline" color="highlight" variant="bodyLg">
-                  {platformTitle?.trim() ? platformTitle : 'Visit Platform'}
-                </Text>
-              </Link>
+              {data.useCases[0].platformUrl ? (
+                <Link
+                  className="text-primaryBlue underline"
+                  href={data.useCases[0].platformUrl}
+                >
+                  <Text className="underline" color="highlight" variant="bodyLg">
+                    {platformTitle?.trim() ? platformTitle : 'Visit Platform'}
+                  </Text>
+                </Link>
+              ) : (
+                <Text variant="bodyMd">Not provided</Text>
+              )}
             </div>
           </div>
 
diff --git a/app/[locale]/dashboard/[entityType]/[entitySlug]/usecases/edit/[id]/publish/page.tsx b/app/[locale]/dashboard/[entityType]/[entitySlug]/usecases/edit/[id]/publish/page.tsx
@@ -43,6 +43,17 @@ const UseCaseDetails: any = graphql(`
         id
         name
       }
+      geographies {
+        id
+        name
+        code
+        type
+      }
+      sdgs {
+        id
+        code
+        name
+      }
       runningStatus
       tags {
         id

Original file line number	Diff line number	Diff line change
@@ -49,6 +49,9 @@ const similarDatasetQuery: any = graphql(`
`49`	`49`	`}`
`50`	`50`	`value`
`51`	`51`	`}`
	`52`	`+ geographies {`
	`53`	`+ name`
	`54`	`+ }`
`52`	`55`	`license`
`53`	`56`	`resources {`
`54`	`57`	`id`
`@@ -135,7 +138,7 @@ const SimilarDatasets: React.FC = () => {`
`135`	`138`	`{`
`136`	`139`	`icon: Icons.globe,`
`137`	`140`	`label: 'Geography',`
`138`		`- value: 'India',`
	`141`	`+ value: item.geographies.join(', '),`
`139`	`142`	`},`
`140`	`143`	`]}`
`141`	`144`	`tag={item.tags}`