Skip to content

Commit 6668026

Browse files
bhavabhuthibhavabhuthi
authored
Merge pull request #250 from CivicDataLab/249-add-images-in-usecases-creations-flow
249 add images in usecases creations flow
2 parents 69ecbb0 + ad57f17 commit 6668026

File tree

5 files changed

+208
-60
lines changed

5 files changed

+208
-60
lines changed

‎app/[locale]/(user)/usecases/[useCaseSlug]/page.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -281,14 +281,14 @@ const UseCaseDetailPage = () => {
281281
Case
282282
</Text>
283283
</div>
284-
<div className="mt-8 flex flex-wrap items-center justify-start gap-2">
284+
<div className="mt-8 flex flex-wrap items-center justify-start gap-8">
285285
{UseCaseDetails?.useCase?.contributors?.map(
286286
(contributor: any) => (
287287
<Image
288288
alt={contributor.fullName}
289289
width={120}
290290
height={120}
291-
className="rounded-full"
291+
className="rounded-full object-cover"
292292
key={contributor.id}
293293
src={
294294
contributor.profilePicture?.url

‎app/[locale]/dashboard/[entityType]/[entitySlug]/usecases/edit/[id]/contributors/EntitySelection.tsx‎

Lines changed: 29 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import Image from 'next/image';
12
import { Button, Icon, Text } from 'opub-ui';
23

34
import { Icons } from '@/components/icons';
@@ -13,6 +14,7 @@ type EntitySectionProps = {
1314
selectedValues: Option[];
1415
onChange: (values: Option[]) => void;
1516
onRemove: (value: Option) => void;
17+
data: any;
1618
};
1719

1820
const EntitySection = ({
@@ -23,11 +25,12 @@ const EntitySection = ({
2325
selectedValues,
2426
onChange,
2527
onRemove,
28+
data,
2629
}: EntitySectionProps) => (
2730
<div>
2831
<Text variant="headingMd">{title}</Text>
2932
<div className="mt-5 flex flex-wrap items-start gap-5 lg:flex-nowrap">
30-
<div className="flex w-full flex-wrap items-end gap-5 lg:flex-nowrap">
33+
<div className="flex w-full flex-wrap items-start gap-5 lg:flex-nowrap">
3134
<div className="w-full lg:w-2/6">
3235
<Text>{label}</Text>
3336
<CustomCombobox
@@ -47,16 +50,32 @@ const EntitySection = ({
4750
</div>
4851
<div className="mt-3 flex flex-wrap gap-3 lg:mt-0">
4952
{selectedValues.map((item) => (
50-
<Button
51-
key={item.value}
52-
kind="tertiary"
53-
onClick={() => onRemove(item)}
54-
>
55-
<div className="flex items-center gap-2 rounded-2 p-2">
56-
<Text>{item.label}</Text>
57-
<Icon source={Icons.cross} size={18} />
53+
<div className="flex flex-col items-center gap-2" key={item.value}>
54+
<div className="rounded-4 bg-surfaceDefault p-4 shadow-basicMd">
55+
<Image
56+
src={
57+
data?.find((org: any) => org.id === item.value)?.logo?.url
58+
? `${process.env.NEXT_PUBLIC_BACKEND_URL}/${
59+
data?.find((org: any) => org.id === item.value)?.logo
60+
?.url
61+
}`
62+
: '/org.png'
63+
}
64+
alt={item.label}
65+
width={140}
66+
height={100}
67+
className="object-contain"
68+
/>
5869
</div>
59-
</Button>
70+
<Button kind="tertiary" onClick={() => onRemove(item)}>
71+
<div className="flex flex-col items-center gap-2 rounded-2 p-2 bg-greyExtralight">
72+
<div className="flex items-center gap-2">
73+
<Text>{item.label}</Text>
74+
<Icon source={Icons.cross} size={18} />
75+
</div>
76+
</div>
77+
</Button>
78+
</div>
6079
))}
6180
</div>
6281
</div>

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

Lines changed: 62 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
'use client';
22

33
import { useEffect, useState } from 'react';
4+
import Image from 'next/image';
45
import { useParams } from 'next/navigation';
56
import { graphql } from '@/gql';
67
import { useMutation, useQuery } from '@tanstack/react-query';
@@ -13,8 +14,16 @@ import { Loading } from '@/components/loading';
1314
import { useEditStatus } from '../../context';
1415
import CustomCombobox from './CustomCombobox';
1516
import EntitySection from './EntitySelection';
16-
import { FetchUsers, FetchUsecaseInfo, AddContributors, RemoveContributor, AddSupporters, RemoveSupporters, AddPartners, RemovePartners } from './query';
17-
17+
import {
18+
AddContributors,
19+
AddPartners,
20+
AddSupporters,
21+
FetchUsecaseInfo,
22+
FetchUsers,
23+
RemoveContributor,
24+
RemovePartners,
25+
RemoveSupporters,
26+
} from './query';
1827

1928
const Details = () => {
2029
const params = useParams<{ id: string }>();
@@ -65,15 +74,19 @@ const Details = () => {
6574
setFormData((prev) => ({
6675
...prev,
6776
partners:
68-
UseCaseData?.data?.useCases?.[0]?.partnerOrganizations?.map((org: any) => ({
69-
label: org.name,
70-
value: org.id,
71-
})) || [],
77+
UseCaseData?.data?.useCases?.[0]?.partnerOrganizations?.map(
78+
(org: any) => ({
79+
label: org.name,
80+
value: org.id,
81+
})
82+
) || [],
7283
supporters:
73-
UseCaseData?.data?.useCases?.[0]?.supportingOrganizations?.map((org: any) => ({
74-
label: org.name,
75-
value: org.id,
76-
})) || [],
84+
UseCaseData?.data?.useCases?.[0]?.supportingOrganizations?.map(
85+
(org: any) => ({
86+
label: org.name,
87+
value: org.id,
88+
})
89+
) || [],
7790
contributors:
7891
UseCaseData?.data?.useCases?.[0]?.contributors?.map((user: any) => ({
7992
label: user.fullName,
@@ -178,7 +191,6 @@ const Details = () => {
178191

179192
const { setStatus } = useEditStatus();
180193

181-
182194
const loadingStates = [
183195
addContributorLoading,
184196
removeContributorLoading,
@@ -192,6 +204,7 @@ const Details = () => {
192204
setStatus(loadingStates.some(Boolean) ? 'loading' : 'success');
193205
}, loadingStates);
194206

207+
195208
return (
196209
<div>
197210
{Users?.isLoading || allEntityDetails?.organizations?.length === 0 ? (
@@ -201,20 +214,25 @@ const Details = () => {
201214
<div>
202215
<Text variant="headingMd">CONTRIBUTORS</Text>
203216
<div className="mt-5 flex flex-wrap items-start gap-5 lg:flex-nowrap">
204-
<div className="flex w-full flex-wrap items-end gap-5 lg:flex-nowrap">
217+
<div className="flex w-full flex-wrap items-start gap-5 lg:flex-nowrap">
205218
<div className="w-full lg:w-2/6">
206219
<Text>Add Contributors</Text>
207220
<CustomCombobox
208221
options={options}
209222
selectedValue={selectedContributors}
210223
onChange={(newValues: any) => {
211-
const prevValues = formData.contributors.map((item) => item.value);
224+
const prevValues = formData.contributors.map(
225+
(item) => item.value
226+
);
212227
const newlyAdded = newValues.find(
213228
(item: any) => !prevValues.includes(item.value)
214229
);
215-
216-
setFormData((prev) => ({ ...prev, contributors: newValues }));
217-
230+
231+
setFormData((prev) => ({
232+
...prev,
233+
contributors: newValues,
234+
}));
235+
218236
if (newlyAdded) {
219237
addContributor({
220238
useCaseId: params.id,
@@ -231,7 +249,25 @@ const Details = () => {
231249
</div>
232250
<div className="mt-3 flex flex-wrap gap-3 lg:mt-0">
233251
{formData.contributors.map((item) => (
234-
<div key={item.value}>
252+
<div key={item.value} className='flex flex-col gap-2 items-center'>
253+
<Image
254+
src={
255+
UseCaseData.data.useCases[0]?.contributors?.find(
256+
(contributor: any) => contributor.id === item.value
257+
)?.profilePicture?.url
258+
? `${process.env.NEXT_PUBLIC_BACKEND_URL}/${
259+
UseCaseData.data.useCases[0]?.contributors?.find(
260+
(contributor: any) =>
261+
contributor.id === item.value
262+
)?.profilePicture?.url
263+
}`
264+
: '/profile.png'
265+
}
266+
alt={item.label}
267+
width={80}
268+
height={80}
269+
className="rounded-full object-cover"
270+
/>
235271
<Button
236272
onClick={() => {
237273
setFormData((prev) => ({
@@ -247,7 +283,7 @@ const Details = () => {
247283
}}
248284
kind="tertiary"
249285
>
250-
<div className="flex items-center gap-2 rounded-2 p-2 ">
286+
<div className="flex items-center gap-2 rounded-2 p-2 bg-greyExtralight ">
251287
<Text>{item.label}</Text>
252288
<Icon source={Icons.cross} size={18} />
253289
</div>
@@ -263,6 +299,7 @@ const Details = () => {
263299
title="SUPPORTED BY"
264300
label="Add Supporters"
265301
placeholder="Add Supporters"
302+
data={UseCaseData.data.useCases[0].supportingOrganizations}
266303
options={(allEntityDetails?.organizations || [])?.map(
267304
(org: any) => ({
268305
label: org.name,
@@ -275,9 +312,9 @@ const Details = () => {
275312
const newlyAdded = newValues.find(
276313
(item: any) => !prevValues.includes(item.value)
277314
);
278-
315+
279316
setFormData((prev) => ({ ...prev, supporters: newValues }));
280-
317+
281318
if (newlyAdded) {
282319
addSupporter({
283320
useCaseId: params.id,
@@ -298,11 +335,12 @@ const Details = () => {
298335
});
299336
}}
300337
/>
301-
338+
302339
<EntitySection
303340
title="PARTNERED BY"
304341
label="Add Partners"
305342
placeholder="Add Partners"
343+
data={UseCaseData.data.useCases[0].partnerOrganizations}
306344
options={(allEntityDetails?.organizations || [])?.map(
307345
(org: any) => ({
308346
label: org.name,
@@ -315,9 +353,9 @@ const Details = () => {
315353
const newlyAdded = newValues.find(
316354
(item: any) => !prevValues.includes(item.value)
317355
);
318-
356+
319357
setFormData((prev) => ({ ...prev, partners: newValues }));
320-
358+
321359
if (newlyAdded) {
322360
addPartner({
323361
useCaseId: params.id,
@@ -328,9 +366,7 @@ const Details = () => {
328366
onRemove={(item: any) => {
329367
setFormData((prev) => ({
330368
...prev,
331-
partners: prev.partners.filter(
332-
(s) => s.value !== item.value
333-
),
369+
partners: prev.partners.filter((s) => s.value !== item.value),
334370
}));
335371
removePartner({
336372
useCaseId: params.id,

‎app/[locale]/dashboard/[entityType]/[entitySlug]/usecases/edit/[id]/contributors/query.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,9 @@ export const FetchUsers: any = graphql(`
2020
id
2121
fullName
2222
username
23+
profilePicture {
24+
url
25+
}
2326
}
2427
supportingOrganizations {
2528
id

0 commit comments

Comments
 (0)