Skip to content

Commit b2028f8

Browse files
Deepthi-ChandDeepthi-Chand
committed
add stats and and coverimage to collaborative
1 parent acd43c3 commit b2028f8

File tree

5 files changed

+117
-76
lines changed

5 files changed

+117
-76
lines changed

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -80,6 +80,10 @@ const CollaborativeDetails = graphql(`
8080
name
8181
path
8282
}
83+
coverImage {
84+
name
85+
path
86+
}
8387
datasets {
8488
title
8589
id

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

Lines changed: 52 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -60,16 +60,59 @@ const PrimaryDetails = ({ data, isLoading }: { data: any; isLoading: any }) => {
6060
)}
6161
</Tray>
6262
</div>
63-
<div className="mt-6 lg:mt-10">
64-
<Image
65-
src={`${process.env.NEXT_PUBLIC_BACKEND_URL}/${data.collaborativeBySlug.logo?.path.replace('/code/files/', '')}`}
66-
alt={data.collaborativeBySlug.title}
67-
width={100}
68-
height={100}
69-
className="h-full w-full"
70-
unoptimized
71-
/>
63+
{data.collaborativeBySlug.coverImage && (
64+
<div className="mt-6 lg:mt-10">
65+
<Image
66+
src={`${process.env.NEXT_PUBLIC_BACKEND_URL}/${data.collaborativeBySlug.coverImage?.path.replace('/code/files/', '')}`}
67+
alt={data.collaborativeBySlug.title}
68+
width={1200}
69+
height={400}
70+
className="h-auto w-full rounded-2 object-cover"
71+
unoptimized
72+
/>
73+
</div>
74+
)}
75+
76+
{/* Stats Section */}
77+
<div className="mt-10 flex flex-wrap items-center gap-8 lg:mt-12 lg:gap-0">
78+
<div className="flex flex-col border-x-[1px] border-solid border-tertiaryAccent px-8">
79+
<Text variant="heading3xl" className="text-secondaryOrange">
80+
{data.collaborativeBySlug.useCases?.length || 0}
81+
</Text>
82+
<Text variant="bodyLg" color="onBgDefault" className="w-24">
83+
Use Cases
84+
</Text>
85+
</div>
86+
87+
<div className="flex flex-col border-x-[1px] border-solid border-tertiaryAccent px-8">
88+
<Text variant="heading3xl" className="text-secondaryOrange">
89+
{data.collaborativeBySlug.datasets?.length || 0}
90+
</Text>
91+
<Text variant="bodyLg" color="onBgDefault" className="w-24">
92+
Datasets
93+
</Text>
94+
</div>
95+
96+
<div className="flex flex-col border-x-[1px] border-solid border-tertiaryAccent px-8">
97+
<Text variant="heading3xl" className="text-secondaryOrange">
98+
{(data.collaborativeBySlug.supportingOrganizations?.length || 0) +
99+
(data.collaborativeBySlug.partnerOrganizations?.length || 0)}
100+
</Text>
101+
<Text variant="bodyLg" color="onBgDefault" className="w-24">
102+
Organizations
103+
</Text>
104+
</div>
105+
106+
<div className="flex flex-col border-x-[1px] border-solid border-tertiaryAccent px-8">
107+
<Text variant="heading3xl" className="text-secondaryOrange">
108+
{data.collaborativeBySlug.contributors?.length || 0}
109+
</Text>
110+
<Text variant="bodyLg" color="onBgDefault" className="w-24">
111+
Contributors
112+
</Text>
113+
</div>
72114
</div>
115+
73116
<div className=" lg:pr-4">
74117
<div className="mt-6 lg:mt-10">
75118
<Text variant="headingXl" color="onBgDefault">Geographies</Text>

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

Lines changed: 14 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -30,51 +30,7 @@ const Metadata = ({ data, setOpen }: { data: any; setOpen?: any }) => {
3030
}
3131
}, [data.collaborativeBySlug.platformUrl]);
3232

33-
const getOrganizationLink = () => {
34-
if (!data) return '/publishers';
35-
36-
if (data.collaborativeBySlug.isIndividualCollaborative && data.collaborativeBySlug.user) {
37-
return `/publishers/${data.collaborativeBySlug.user.fullName + '_' + data.collaborativeBySlug.user.id}`;
38-
}
39-
40-
if (data.collaborativeBySlug.organization) {
41-
return `/publishers/organization/${data.collaborativeBySlug.organization.slug + '_' + data.collaborativeBySlug.organization.id}`;
42-
}
43-
44-
return '/publishers';
45-
};
46-
4733
const metadata = [
48-
{
49-
label: data.collaborativeBySlug.isIndividualCollaborative ? 'Publisher' : 'Organization',
50-
value: (
51-
<Tooltip
52-
content={
53-
data.collaborativeBySlug.isIndividualCollaborative
54-
? data.collaborativeBySlug.user.fullName
55-
: data.collaborativeBySlug.organization.name
56-
}
57-
>
58-
<Link href={getOrganizationLink()}>
59-
{data.collaborativeBySlug.isIndividualCollaborative
60-
? data.collaborativeBySlug.user.fullName
61-
: data?.collaborativeBySlug.organization?.name}
62-
</Link>
63-
</Tooltip>
64-
),
65-
},
66-
{
67-
label: 'Contact',
68-
value: (
69-
<Link
70-
className="text-primaryBlue underline"
71-
href={`${data.collaborativeBySlug.isIndividualCollaborative ? `mailto:${data.collaborativeBySlug.user.email}` : `mailto:${data.collaborativeBySlug.organization.contactEmail}`}`}
72-
>
73-
Contact{' '}
74-
{data.collaborativeBySlug.isIndividualCollaborative ? 'Publisher' : 'Organization'}
75-
</Link>
76-
),
77-
},
7834
{
7935
label: 'Platform URL',
8036
value:
@@ -157,13 +113,11 @@ const Metadata = ({ data, setOpen }: { data: any; setOpen?: any }) => {
157113
),
158114
},
159115
];
160-
const image = data.collaborativeBySlug.isIndividualCollaborative
161-
? data.collaborativeBySlug?.user?.profilePicture
162-
? `${process.env.NEXT_PUBLIC_BACKEND_URL}/${data.collaborativeBySlug.user.profilePicture.url}`
163-
: '/profile.png'
164-
: data?.collaborativeBySlug.organization?.logo
165-
? `${process.env.NEXT_PUBLIC_BACKEND_URL}/${data.collaborativeBySlug.organization.logo.url}`
166-
: '/org.png';
116+
117+
// Use collaborative logo if available, otherwise use a default
118+
const image = data.collaborativeBySlug?.logo?.path
119+
? `${process.env.NEXT_PUBLIC_BACKEND_URL}/${data.collaborativeBySlug.logo.path.replace('/code/files/', '')}`
120+
: '/org.png';
167121

168122
return (
169123
<div className="flex flex-col gap-10 px-7 py-10">
@@ -188,21 +142,15 @@ const Metadata = ({ data, setOpen }: { data: any; setOpen?: any }) => {
188142
</div>
189143
<Divider />
190144
<div className=" flex flex-col gap-8">
191-
<Link href={getOrganizationLink()}>
192-
<div className="hidden rounded-2 border-1 border-solid border-greyExtralight p-2 lg:block">
193-
<Image
194-
height={140}
195-
width={100}
196-
src={image}
197-
alt={
198-
data.collaborativeBySlug.isIndividualCollaborative
199-
? 'Publisher logo'
200-
: 'Organization logo'
201-
}
202-
className="w-full object-contain"
203-
/>
204-
</div>
205-
</Link>
145+
<div className="hidden rounded-2 border-1 border-solid border-greyExtralight p-2 lg:block">
146+
<Image
147+
height={140}
148+
width={100}
149+
src={image}
150+
alt="Collaborative logo"
151+
className="w-full object-contain"
152+
/>
153+
</div>
206154
<div className="flex flex-col gap-8">
207155
{metadata.map((item, index) => (
208156
<div key={index} className="flex gap-2">

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

Lines changed: 42 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,11 @@ const UpdateCollaborativeMutation: any = graphql(`
3030
path
3131
url
3232
}
33+
coverImage {
34+
name
35+
path
36+
url
37+
}
3338
}
3439
}
3540
`);
@@ -46,6 +51,11 @@ const FetchCollaborative: any = graphql(`
4651
path
4752
url
4853
}
54+
coverImage {
55+
name
56+
path
57+
url
58+
}
4959
status
5060
slug
5161
startedOn
@@ -94,6 +104,7 @@ const Details = () => {
94104
title: '',
95105
summary: '',
96106
logo: null as File | null,
107+
coverImage: null as File | null,
97108
slug: '',
98109
status: '',
99110
startedOn: null,
@@ -110,6 +121,7 @@ const Details = () => {
110121
title: CollaborativesData.title || '',
111122
summary: CollaborativesData.summary || '',
112123
logo: CollaborativesData.logo || null,
124+
coverImage: CollaborativesData.coverImage || null,
113125
slug: CollaborativesData.slug || '',
114126
status: CollaborativesData.status || '',
115127
startedOn: CollaborativesData.startedOn || '',
@@ -167,6 +179,18 @@ const Details = () => {
167179
[]
168180
);
169181

182+
const onCoverImageDrop = React.useCallback(
183+
(_dropFiles: File[], acceptedFiles: File[]) => {
184+
mutate({
185+
data: {
186+
id: params.id.toString(),
187+
coverImage: acceptedFiles[0],
188+
},
189+
});
190+
},
191+
[]
192+
);
193+
170194
const handleSave = (updatedData: any) => {
171195
if (JSON.stringify(updatedData) !== JSON.stringify(previousFormData)) {
172196
setPreviousFormData(updatedData);
@@ -266,7 +290,7 @@ const Details = () => {
266290
name={'Logo'}
267291
>
268292
<DropZone.FileUpload
269-
actionHint="Only one image can be added. Recommended resolution of 16:9 - (1280x720), (1920x1080) - Supported File Types: PNG/JPG/SVG "
293+
actionHint="Only one image can be added. Recommended resolution: Square (400x400) - Supported File Types: PNG/JPG/SVG "
270294
actionTitle={
271295
formData.logo && typeof formData.logo === 'object' && 'name' in formData.logo
272296
? (formData.logo as any).name?.split('/').pop() || 'Logo file'
@@ -275,6 +299,23 @@ const Details = () => {
275299
/>
276300
</DropZone>
277301
</div>
302+
303+
<div>
304+
<DropZone
305+
label={!formData?.coverImage ? 'Cover Image' : 'Change Cover Image'}
306+
onDrop={onCoverImageDrop}
307+
name={'CoverImage'}
308+
>
309+
<DropZone.FileUpload
310+
actionHint="Only one image can be added. Recommended resolution: 16:9 - (1280x720), (1920x1080) - Supported File Types: PNG/JPG "
311+
actionTitle={
312+
formData.coverImage && typeof formData.coverImage === 'object' && 'name' in formData.coverImage
313+
? (formData.coverImage as any).name?.split('/').pop() || 'Cover image file'
314+
: 'Name of the cover image'
315+
}
316+
/>
317+
</DropZone>
318+
</div>
278319
</div>
279320
);
280321
};

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,11 @@ const CollaborativeDetails: any = graphql(`
5858
path
5959
url
6060
}
61+
coverImage {
62+
name
63+
path
64+
url
65+
}
6166
datasets {
6267
title
6368
id

0 commit comments

Comments
 (0)