Skip to content

Commit 16c6c1e

Browse files
sanjaypinnasanjaypinna
committed
refactor(Publish): enhance contributor and organization details display with images
1 parent d9dd0d8 commit 16c6c1e

File tree

1 file changed

+112
-22
lines changed
  • app/[locale]/dashboard/[entityType]/[entitySlug]/usecases/edit/[id]/publish

1 file changed

+112
-22
lines changed

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

Lines changed: 112 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -68,6 +68,9 @@ const UseCaseDetails: any = graphql(`
6868
id
6969
fullName
7070
username
71+
profilePicture {
72+
url
73+
}
7174
}
7275
supportingOrganizations {
7376
id
@@ -188,11 +191,40 @@ const Publish = () => {
188191
})) || []),
189192
];
190193

191-
192194
const ContributorDetails = [
193-
{ label: 'Contributors', value: UseCaseData.data?.useCases[0]?.contributors.length>0 ? UseCaseData.data?.useCases[0]?.contributors.map((item: any) => item.fullName).join(', '):'No Contributors' },
194-
{ label: 'Supporters', value: UseCaseData.data?.useCases[0]?.supportingOrganizations.length>0 ? UseCaseData.data?.useCases[0]?.supportingOrganizations.map((item: any) => item.name).join(', '):'No Supporting Organizations' },
195-
{ label: 'Partners', value: UseCaseData.data?.useCases[0]?.partnerOrganizations.length>0 ? UseCaseData.data?.useCases[0]?.partnerOrganizations.map((item: any) => item.name).join(', '):'No Partner Organizations' },
195+
{
196+
label: 'Contributors',
197+
value:
198+
UseCaseData.data?.useCases[0]?.contributors.length > 0
199+
? UseCaseData.data?.useCases[0]?.contributors
200+
.map((item: any) => item.fullName)
201+
.join(', ')
202+
: 'No Contributors',
203+
image: UseCaseData.data?.useCases[0]?.contributors,
204+
},
205+
];
206+
207+
const OrgDetails = [
208+
{
209+
label: 'Supporters',
210+
value:
211+
UseCaseData.data?.useCases[0]?.supportingOrganizations.length > 0
212+
? UseCaseData.data?.useCases[0]?.supportingOrganizations
213+
.map((item: any) => item.name)
214+
.join(', ')
215+
: 'No Supporting Organizations',
216+
image: UseCaseData.data?.useCases[0]?.supportingOrganizations,
217+
},
218+
{
219+
label: 'Partners',
220+
value:
221+
UseCaseData.data?.useCases[0]?.partnerOrganizations.length > 0
222+
? UseCaseData.data?.useCases[0]?.partnerOrganizations
223+
.map((item: any) => item.name)
224+
.join(', ')
225+
: 'No Partner Organizations',
226+
image: UseCaseData.data?.useCases[0]?.partnerOrganizations,
227+
},
196228
];
197229

198230
const generateTableData = (list: Array<any>) => {
@@ -304,26 +336,84 @@ const Publish = () => {
304336
</div>
305337
) : (
306338
<div className="flex flex-col gap-4 px-8 py-4">
307-
{
308-
ContributorDetails.map(
309-
(item: any, index: number) => (
310-
<div
311-
className="flex flex-wrap gap-2"
312-
key={index}
313-
>
314-
<div className="md:w-1/6 lg:w-1/6">
315-
<Text variant="bodyMd">
316-
{item.label}:
339+
{ContributorDetails.map(
340+
(item: any, index: number) => (
341+
<div
342+
className="flex flex-col gap-3"
343+
key={index}
344+
>
345+
<div>
346+
<Text variant="bodyMd">{item.label}:</Text>
347+
</div>
348+
<div className="flex flex-wrap gap-2">
349+
{item.image.map(
350+
(data: any, index: number) => (
351+
<div
352+
key={index}
353+
className="flex flex-col items-center gap-4"
354+
>
355+
<Image
356+
src={
357+
data?.profilePicture?.url
358+
? `${process.env.NEXT_PUBLIC_BACKEND_URL}/${data.profilePicture.url}`
359+
: '/profile.png'
360+
}
361+
alt={item.label}
362+
width={80}
363+
height={80}
364+
className="rounded-full object-cover"
365+
/>
366+
367+
<Text
368+
variant="bodyMd"
369+
className=" w-36 rounded-1 bg-greyExtralight text-center"
370+
>
371+
{data.fullName}
372+
</Text>
373+
</div>
374+
)
375+
)}
376+
</div>
377+
</div>
378+
)
379+
)}
380+
{OrgDetails.map((item: any, index: number) => (
381+
<div className="flex flex-col gap-3" key={index}>
382+
<div>
383+
<Text variant="bodyMd">{item.label}:</Text>
384+
</div>
385+
<div className="flex flex-wrap gap-6">
386+
{item.image.map(
387+
(data: any, index: number) => (
388+
<div
389+
key={index}
390+
className="flex flex-col items-center gap-4"
391+
>
392+
<div className="rounded-4 bg-surfaceDefault p-4 shadow-basicMd">
393+
<Image
394+
src={
395+
data?.logo?.url
396+
? `${process.env.NEXT_PUBLIC_BACKEND_URL}/${data.logo.url}`
397+
: '/org.png'
398+
}
399+
alt={item.label}
400+
width={140}
401+
height={100}
402+
className="object-contain"
403+
/>
404+
</div>
405+
<Text
406+
variant="bodyMd"
407+
className=" w-36 rounded-1 bg-greyExtralight text-center"
408+
>
409+
{data.name}
317410
</Text>
318411
</div>
319-
<div>
320-
<Text variant="bodyMd">
321-
{item.value}
322-
</Text>
323-
</div>
324-
</div>
325-
)
326-
)}
412+
)
413+
)}
414+
</div>
415+
</div>
416+
))}
327417
</div>
328418
)}
329419
</div>

0 commit comments

Comments
 (0)