Skip to content

Commit cadb0f2

Browse files
AbhishekfmAbhishekfm
authored
Merge pull request #382 from CivicDataLab/fix/collabrative-card
Fixed Collabrative cover image, started on date of use case, required…
2 parents 6a009a1 + c3a15dc commit cadb0f2

9 files changed

Lines changed: 98 additions & 54 deletions

File tree

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

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -64,6 +64,10 @@ const PublishedCollaboratives = graphql(`
6464
id
6565
name
6666
}
67+
coverImage {
68+
name
69+
path
70+
}
6771
datasetCount
6872
metadata {
6973
metadataItem {
@@ -300,12 +304,17 @@ const CollaborativesListingClient = () => {
300304
title={collaborative.title || ''}
301305
variation="collapsed"
302306
iconColor="warning"
303-
imageUrl={`${process.env.NEXT_PUBLIC_BACKEND_URL}/${collaborative.logo?.path.replace('/code/files/', '')}`}
307+
imageUrl={
308+
collaborative.coverImage
309+
? `${process.env.NEXT_PUBLIC_BACKEND_URL}/${collaborative.coverImage?.path.replace('/code/files/', '')}`
310+
: `${process.env.NEXT_PUBLIC_BACKEND_URL}/${collaborative.logo?.path.replace('/code/files/', '')}`
311+
}
312+
// imageUrl={`${process.env.NEXT_PUBLIC_BACKEND_URL}/${collaborative.logo?.path.replace('/code/files/', '')}`}
304313
metadataContent={[
305314
{
306315
icon: Icons.calendar as any,
307316
label: 'Started',
308-
value: formatDate(collaborative.startedOn),
317+
value: formatDate(collaborative.startedOn) || 'N/A',
309318
},
310319
{
311320
icon: Icons.dataset as any,

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

Lines changed: 12 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
1+
import { useEffect, useState } from 'react';
12
import Image from 'next/image';
23
import Link from 'next/link';
34
import { Button, Divider, Icon, Text, Tooltip } from 'opub-ui';
4-
import { useEffect, useState } from 'react';
55

6-
import { Icons } from '@/components/icons';
76
import { formatDate, getWebsiteTitle } from '@/lib/utils';
7+
import { Icons } from '@/components/icons';
88

99
const Metadata = ({ data, setOpen }: { data: any; setOpen?: any }) => {
1010
const [platformTitle, setPlatformTitle] = useState<string | null>(null);
@@ -43,6 +43,7 @@ const Metadata = ({ data, setOpen }: { data: any; setOpen?: any }) => {
4343

4444
return '/publishers';
4545
};
46+
console.log('data?.useCase ', data?.useCase);
4647

4748
const metadata = [
4849
{
@@ -92,11 +93,15 @@ const Metadata = ({ data, setOpen }: { data: any; setOpen?: any }) => {
9293
),
9394
tooltipContent: data.useCase.platformUrl === null ? 'N/A' : platformTitle,
9495
},
95-
{
96-
label: 'Started On',
97-
value: formatDate(data.useCase.startedOn) || 'N/A',
98-
tooltipContent: formatDate(data.useCase.startedOn) || 'N/A',
99-
},
96+
...(data.useCase.startedOn
97+
? [
98+
{
99+
label: 'Started On',
100+
value: formatDate(data.useCase.startedOn) || 'N/A',
101+
tooltipContent: formatDate(data.useCase.startedOn) || 'N/A',
102+
},
103+
]
104+
: []),
100105
{
101106
label: 'Status',
102107
value: data.useCase.runningStatus.split('_').join('') || 'N/A',

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

Lines changed: 39 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,9 @@ import { useMutation, useQuery } from '@tanstack/react-query';
88
import { DropZone, Select, TextField, toast } from 'opub-ui';
99

1010
import { GraphQL } from '@/lib/api';
11+
import { RichTextEditor } from '@/components/RichTextEditor';
1112
import { useEditStatus } from '../../context';
1213
import Metadata from '../metadata/page';
13-
import { RichTextEditor } from '@/components/RichTextEditor';
1414

1515
const UpdateCollaborativeMutation: any = graphql(`
1616
mutation updateCollaborative($data: CollaborativeInputPartial!) {
@@ -75,31 +75,32 @@ const Details = () => {
7575
const router = useRouter();
7676
const COLLAB_DETAILS_TOAST_ID = 'collaboratives-details-toast';
7777

78-
const CollaborativeData: { data: any; isLoading: boolean; refetch: any } = useQuery(
79-
[`fetch_CollaborativeData_details`],
80-
() =>
81-
GraphQL(
82-
FetchCollaborative,
83-
{
84-
[params.entityType]: params.entitySlug,
85-
},
86-
{
87-
filters: {
88-
id: params.id,
78+
const CollaborativeData: { data: any; isLoading: boolean; refetch: any } =
79+
useQuery(
80+
[`fetch_CollaborativeData_details`],
81+
() =>
82+
GraphQL(
83+
FetchCollaborative,
84+
{
85+
[params.entityType]: params.entitySlug,
8986
},
90-
}
91-
),
92-
{
93-
refetchOnMount: true,
94-
refetchOnReconnect: true,
95-
}
96-
);
87+
{
88+
filters: {
89+
id: params.id,
90+
},
91+
}
92+
),
93+
{
94+
refetchOnMount: true,
95+
refetchOnReconnect: true,
96+
}
97+
);
9798

9899
const CollaborativesData =
99-
CollaborativeData?.data?.collaboratives &&
100-
Array.isArray(CollaborativeData?.data?.collaboratives) &&
101-
CollaborativeData?.data?.collaboratives?.length > 0
102-
? CollaborativeData?.data?.collaboratives[0]
100+
CollaborativeData?.data?.collaboratives &&
101+
Array.isArray(CollaborativeData?.data?.collaboratives) &&
102+
CollaborativeData?.data?.collaboratives?.length > 0
103+
? CollaborativeData?.data?.collaboratives[0]
103104
: null;
104105

105106
const initialFormData = {
@@ -252,7 +253,7 @@ const Details = () => {
252253
</div>
253254

254255
<Metadata />
255-
256+
256257
<div className="flex flex-wrap gap-6 md:flex-nowrap lg:flex-nowrap">
257258
<div className="w-full">
258259
<TextField
@@ -283,7 +284,7 @@ const Details = () => {
283284
/>
284285
</div>
285286
</div>
286-
287+
287288
<div>
288289
<DropZone
289290
label={!formData?.logo ? 'Logo *' : 'Change Logo *'}
@@ -293,25 +294,33 @@ const Details = () => {
293294
<DropZone.FileUpload
294295
actionHint="Only one image can be added. Recommended resolution: Square (400x400) - Supported File Types: PNG/JPG/SVG "
295296
actionTitle={
296-
formData.logo && typeof formData.logo === 'object' && 'name' in formData.logo
297+
formData.logo &&
298+
typeof formData.logo === 'object' &&
299+
'name' in formData.logo
297300
? (formData.logo as any).name?.split('/').pop() || 'Logo file'
298301
: 'Name of the logo'
299302
}
300303
/>
301304
</DropZone>
302305
</div>
303-
306+
304307
<div>
305308
<DropZone
306-
label={!formData?.coverImage ? 'Cover Image' : 'Change Cover Image'}
309+
label={
310+
!formData?.coverImage ? 'Cover Image *' : 'Change Cover Image *'
311+
}
307312
onDrop={onCoverImageDrop}
308313
name={'CoverImage'}
314+
required
309315
>
310316
<DropZone.FileUpload
311317
actionHint="Only one image can be added. Recommended resolution: 16:9 - (1280x720), (1920x1080) - Supported File Types: PNG/JPG "
312318
actionTitle={
313-
formData.coverImage && typeof formData.coverImage === 'object' && 'name' in formData.coverImage
314-
? (formData.coverImage as any).name?.split('/').pop() || 'Cover image file'
319+
formData.coverImage &&
320+
typeof formData.coverImage === 'object' &&
321+
'name' in formData.coverImage
322+
? (formData.coverImage as any).name?.split('/').pop() ||
323+
'Cover image file'
315324
: 'Name of the cover image'
316325
}
317326
/>

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -101,6 +101,7 @@ const Details = ({ data }: { data: any }) => {
101101
src={`${process.env.NEXT_PUBLIC_BACKEND_URL}/${data?.collaboratives[0]?.logo?.path.replace('/code/files/', '')}`}
102102
alt={data?.collaboratives[0]?.title}
103103
width={240}
104+
className="object-contain"
104105
height={240}
105106
/>
106107
</div>

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

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -188,8 +188,9 @@ const Publish = () => {
188188
CollaborativeData.data?.collaboratives[0]?.sectors.length === 0 ||
189189
CollaborativeData.data?.collaboratives[0]?.summary.length === 0 ||
190190
CollaborativeData.data?.collaboratives[0]?.sdgs.length === 0 ||
191-
CollaborativeData.data?.collaboratives[0]?.logo === null
192-
? 'Summary or SDG or Sectors or Logo is missing. Please add to continue.'
191+
CollaborativeData.data?.collaboratives[0]?.logo === null ||
192+
CollaborativeData.data?.collaboratives[0]?.coverImage === null
193+
? 'Summary, SDG, Sectors, Logo, or Cover Image is missing. Please add to continue.'
193194
: '',
194195
errorType: 'critical',
195196
},
@@ -227,7 +228,8 @@ const Publish = () => {
227228
collaborative.sectors.length > 0 &&
228229
collaborative?.summary.length > 0 &&
229230
collaborative?.sdgs.length > 0 &&
230-
collaborative?.logo !== null;
231+
collaborative?.logo !== null &&
232+
collaborative?.coverImage !== null;
231233

232234
// No datasets assigned
233235
if (!hasDatasets) return true;

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,9 @@ import { DropZone, Select, TextField, toast } from 'opub-ui';
1010
// Assuming you are using these components
1111

1212
import { GraphQL } from '@/lib/api';
13+
import { RichTextEditor } from '@/components/RichTextEditor';
1314
import { useEditStatus } from '../../context';
1415
import Metadata from '../metadata/page';
15-
import { RichTextEditor } from '@/components/RichTextEditor';
1616

1717
const UpdateUseCaseMutation: any = graphql(`
1818
mutation updateUseCase($data: UseCaseInputPartial!) {
@@ -75,7 +75,6 @@ const Details = () => {
7575
? error.message.trim()
7676
: fallback;
7777

78-
7978
const UseCaseData: { data: any; isLoading: boolean; refetch: any } = useQuery(
8079
[`fetch_UseCaseData_details`],
8180
() =>
@@ -285,6 +284,7 @@ const Details = () => {
285284
label="Started On"
286285
name="startedOn"
287286
type="date"
287+
required
288288
max={new Date().toISOString().split('T')[0]}
289289
value={formData.startedOn || ''}
290290
onChange={(e) => {

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

Lines changed: 21 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -43,8 +43,18 @@ const Details = ({ data }: { data: any }) => {
4343
value: data?.useCases[0]?.completedOn,
4444
},
4545
{ label: 'Sector', value: data?.useCases[0]?.sectors[0]?.name },
46-
{ label: 'Geography', value: data?.useCases[0]?.geographies?.map((geo: any) => geo.name).join(', ') },
47-
{ label: 'SDG Goals', value: data?.useCases[0]?.sdgs?.map((sdg: any) => `${sdg.code} - ${sdg.name}`).join(', ') },
46+
{
47+
label: 'Geography',
48+
value: data?.useCases[0]?.geographies
49+
?.map((geo: any) => geo.name)
50+
.join(', '),
51+
},
52+
{
53+
label: 'SDG Goals',
54+
value: data?.useCases[0]?.sdgs
55+
?.map((sdg: any) => `${sdg.code} - ${sdg.name}`)
56+
.join(', '),
57+
},
4858
{ label: 'Tags', value: data?.useCases[0]?.tags[0]?.value },
4959
...(data?.useCases[0]?.metadata?.map((meta: any) => ({
5060
label: meta.metadataItem?.label,
@@ -63,9 +73,9 @@ const Details = ({ data }: { data: any }) => {
6373
<Text variant="bodyMd">{item.label}:</Text>
6474
</div>
6575
<div>
66-
<Text variant="bodyMd"><RichTextRenderer
67-
content={item.value}
68-
/></Text>
76+
<Text variant="bodyMd">
77+
<RichTextRenderer content={item.value} />
78+
</Text>
6979
</div>
7080
</div>
7181
)
@@ -81,7 +91,11 @@ const Details = ({ data }: { data: any }) => {
8191
className="text-primaryBlue underline"
8292
href={data.useCases[0].platformUrl}
8393
>
84-
<Text className="underline" color="highlight" variant="bodyLg">
94+
<Text
95+
className="underline"
96+
color="highlight"
97+
variant="bodyLg"
98+
>
8599
{platformTitle?.trim() ? platformTitle : 'Visit Platform'}
86100
</Text>
87101
</Link>
@@ -102,6 +116,7 @@ const Details = ({ data }: { data: any }) => {
102116
src={`${process.env.NEXT_PUBLIC_BACKEND_URL}/${data?.useCases[0]?.logo?.path.replace('/code/files/', '')}`}
103117
alt={data?.useCases[0]?.title}
104118
width={240}
119+
className="object-contain"
105120
height={240}
106121
/>
107122
</div>

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

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -186,8 +186,9 @@ const Publish = () => {
186186
UseCaseData.data?.useCases[0]?.sectors.length === 0 ||
187187
UseCaseData.data?.useCases[0]?.summary.length === 0 ||
188188
UseCaseData.data?.useCases[0]?.sdgs.length === 0 ||
189-
UseCaseData.data?.useCases[0]?.logo === null
190-
? 'Summary or SDG or Sectors or Logo is missing. Please add to continue.'
189+
UseCaseData.data?.useCases[0]?.logo === null ||
190+
!UseCaseData.data?.useCases[0]?.startedOn
191+
? 'Summary, SDG, Sectors, Logo, or Started On is missing. Please add to continue.'
191192
: '',
192193
errorType: 'critical',
193194
},
@@ -219,7 +220,8 @@ const Publish = () => {
219220
useCase.sectors.length > 0 &&
220221
useCase?.summary.length > 0 &&
221222
useCase?.sdgs.length > 0 &&
222-
useCase?.logo !== null;
223+
useCase?.logo !== null &&
224+
!!useCase?.startedOn;
223225

224226
// No datasets assigned
225227
if (!hasDatasets) return true;

‎lib/utils.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,8 @@ export function cn(...inputs: ClassNameValue[]) {
5858
return twMerge(inputs);
5959
}
6060

61-
export function formatDate(input: string | number): string {
61+
export function formatDate(input: string | number | null): string {
62+
if (input === null || input === undefined) return 'N/A';
6263
const date = new Date(input);
6364
return date.toLocaleDateString('en-US', {
6465
month: 'long',

0 commit comments

Comments
 (0)