add geographies to collaborative

Author: Deepthi-Chand

app/[locale]/(user)/collaboratives/[collaborativeSlug]/CollaborativeDetailsClient.tsx

@@ -69,6 +69,12 @@ const CollaborativeDetails = graphql(`
         id
         value
       }
+      geographies {
+        id
+        name
+        code
+        type
+      }
       publishers {
         name
         contactEmail

app/[locale]/(user)/collaboratives/components/Details.tsx

@@ -114,22 +114,23 @@ const PrimaryDetails = ({ data, isLoading }: { data: any; isLoading: any }) => {
       </div>
 
       <div className=" lg:pr-4">
-        <div className="mt-6 lg:mt-10">
-          <Text variant="headingXl" color="onBgDefault">Geographies</Text>
-          <div className="mt-4">
-            <Tag
-              fillColor="var(--orange-secondary-color)"
-              borderColor="var(--orange-secondary-text)"
-              textColor="white"
-            >
-              {
-                data.collaborativeBySlug.metadata?.find(
-                  (meta: any) => meta.metadataItem?.label === 'Geography'
-                )?.value
-              }
-            </Tag>
+        {data.collaborativeBySlug.geographies && data.collaborativeBySlug.geographies.length > 0 && (
+          <div className="mt-6 lg:mt-10">
+            <Text variant="headingXl" color="onBgDefault">Geographies</Text>
+            <div className="mt-4 flex flex-wrap gap-2">
+              {data.collaborativeBySlug.geographies.map((geo: any, index: number) => (
+                <Tag
+                  key={index}
+                  fillColor="var(--orange-secondary-color)"
+                  borderColor="var(--orange-secondary-text)"
+                  textColor="white"
+                >
+                  {geo.name}
+                </Tag>
+              ))}
+            </div>
           </div>
-        </div>
+        )}
         <div className="mt-6 lg:mt-10">
           <Text variant="headingXl" color="onBgDefault">Summary</Text>
           <div className="mt-4">

app/[locale]/(user)/collaboratives/components/Metadata.tsx

@@ -1,10 +1,10 @@
-import { useEffect, useState } from 'react';
 import Image from 'next/image';
 import Link from 'next/link';
 import { Button, Divider, Icon, Text, Tooltip } from 'opub-ui';
+import { useEffect, useState } from 'react';
 
-import { formatDate, getWebsiteTitle } from '@/lib/utils';
 import { Icons } from '@/components/icons';
+import { formatDate, getWebsiteTitle } from '@/lib/utils';
 
 const Metadata = ({ data, setOpen }: { data: any; setOpen?: any }) => {
   const [platformTitle, setPlatformTitle] = useState<string | null>(null);
@@ -48,21 +48,6 @@ const Metadata = ({ data, setOpen }: { data: any; setOpen?: any }) => {
         ),
       tooltipContent: data.collaborativeBySlug.platformUrl === null ? 'N/A' : platformTitle,
     },
-    {
-      label: 'Started On',
-      value: formatDate(data.collaborativeBySlug.startedOn) || 'N/A',
-      tooltipContent: formatDate(data.collaborativeBySlug.startedOn) || 'N/A',
-    },
-    {
-      label: 'Completed On',
-      value: formatDate(data.collaborativeBySlug.completedOn) || 'N/A',
-      tooltipContent: formatDate(data.collaborativeBySlug.completedOn) || 'N/A',
-    },
-    {
-      label: 'Status',
-      value: data.collaborativeBySlug.status?.split('_').join('') || 'N/A',
-      tooltipContent: data.collaborativeBySlug.status?.split('_').join('') || 'N/A',
-    },
     {
       label: 'Last Updated',
       value: formatDate(data.collaborativeBySlug.modified) || 'N/A',

app/[locale]/dashboard/[entityType]/[entitySlug]/collaboratives/edit/[id]/metadata/page.tsx

@@ -36,6 +36,12 @@ const FetchCollaborativeMetadata: any = graphql(`
         code
         name
       }
+      geographies {
+        id
+        name
+        code
+        type
+      }
     }
   }
 `);
@@ -82,6 +88,21 @@ const tagsListQueryDoc: any = graphql(`
   }
 `);
 
+const geographiesListQueryDoc: any = graphql(`
+  query GeographiesList {
+    geographies {
+      id
+      name
+      code
+      type
+      parentId {
+        id
+        name
+      }
+    }
+  }
+`);
+
 const UpdateCollaborativeMetadata: any = graphql(`
   mutation addUpdateCollaborativeMetadata($updateMetadataInput: UpdateCollaborativeMetadataInput!) {
     addUpdateCollaborativeMetadata(updateMetadataInput: $updateMetadataInput) {
@@ -110,6 +131,12 @@ const UpdateCollaborativeMetadata: any = graphql(`
           code
           name
         }
+        geographies {
+          id
+          name
+          code
+          type
+        }
       }
     }
   }
@@ -201,6 +228,14 @@ const Metadata = () => {
         };
       }) || [];
 
+    defaultVal['geographies'] =
+      data?.geographies?.map((geo: any) => {
+        return {
+          label: geo.name,
+          value: geo.id,
+        };
+      }) || [];
+
     return defaultVal;
   };
 
@@ -253,6 +288,17 @@ const Metadata = () => {
       []
     )
   );
+
+  const getGeographiesList: { data: any; isLoading: boolean; error: any } =
+    useQuery([`geographies_list_query`], () =>
+      GraphQL(
+        geographiesListQueryDoc,
+        {
+          [params.entityType]: params.entitySlug,
+        },
+        []
+      )
+    );
   const [isTagsListUpdated, setIsTagsListUpdated] = useState(false);
 
   // Update mutation
@@ -307,6 +353,7 @@ const Metadata = () => {
           sectors: updatedData.sectors?.map((item: any) => item.value) || [],
           sdgs: updatedData.sdgs?.map((item: any) => item.value) || [],
           tags: updatedData.tags?.map((item: any) => item.label) || [],
+          geographies: updatedData.geographies?.map((item: any) => parseInt(item.value, 10)) || [],
         },
       });
     }
@@ -320,6 +367,7 @@ const Metadata = () => {
     getSectorsList.isLoading ||
     getSDGsList.isLoading ||
     getTagsList.isLoading ||
+    getGeographiesList.isLoading ||
     collaborativeData.isLoading
   ) {
     return (
@@ -436,6 +484,24 @@ const Metadata = () => {
               }}
             />
           </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
+              label="Geographies"
+              name="geographies"
+              list={
+                getGeographiesList?.data.geographies?.map((item: any) => ({
+                  label: `${item.name}${item.parentId ? ` (${item.parentId.name})` : ''}`,
+                  value: item.id,
+                })) || []
+              }
+              selectedValue={formData.geographies}
+              onChange={(value) => {
+                handleChange('geographies', value);
+                handleSave({ ...formData, geographies: value });
+              }}
+            />
+          </div>
         </div>
 
         <div className="flex flex-wrap">