Skip to content

Commit 715c142

Browse files
mluenamluena
authored
Merge pull request #192 from Vizzuality/enhac/node-update
project info metadata
2 parents b727879 + 69d480e commit 715c142

11 files changed

Lines changed: 3878 additions & 2805 deletions

File tree

‎client/orval.config.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,7 @@ module.exports = {
3636
"Other-tool",
3737
"Other-tools-category",
3838
"Project-edit-suggestion",
39+
"Project-field-metadata",
3940
"Project-status",
4041
"Types-of-funding",
4142
"Tool-edit-suggestion",

‎client/src/containers/projects/form/index.tsx‎

Lines changed: 91 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
"use client";
22

3-
import { useCallback, useMemo } from "react";
3+
import Markdown from "react-markdown";
4+
5+
import { useCallback } from "react";
46

57
import { useForm } from "react-hook-form";
68
import { toast } from "react-toastify";
@@ -54,10 +56,45 @@ import {
5456
SelectItem,
5557
SelectValue,
5658
} from "@/components/ui/select";
59+
import { Tooltip, TooltipArrow, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
60+
61+
import { LuInfo } from "react-icons/lu";
62+
63+
import { TooltipPortal } from "@radix-ui/react-tooltip";
5764

5865
import { updateOrCreateProject } from "@/services/projects";
5966
import CSVImport from "@/components/new-dataset/step-description/csv-import";
6067
import { useGetObjectives } from "@/types/generated/objective";
68+
import { useGetProjectFieldMetadata } from "@/types/generated/project-field-metadata";
69+
70+
const ProjectFieldLabel = ({
71+
title,
72+
data,
73+
required = false,
74+
}: {
75+
title: string;
76+
data: string | undefined;
77+
required?: boolean;
78+
}) => (
79+
<FormLabel className="flex items-center text-xs font-semibold">
80+
<span>
81+
{title}
82+
{required && <sup className="pl-0.5">*</sup>}
83+
</span>
84+
<Tooltip>
85+
<TooltipTrigger>
86+
<LuInfo className="h-4 w-4 pl-1 font-bold" />
87+
</TooltipTrigger>
88+
89+
<TooltipPortal>
90+
<TooltipContent side="right" align="center">
91+
<Markdown className="prose text-xxs">{data}</Markdown>
92+
<TooltipArrow className="fill-white" width={10} height={5} />
93+
</TooltipContent>
94+
</TooltipPortal>
95+
</Tooltip>
96+
</FormLabel>
97+
);
6198

6299
export default function ProjectForm() {
63100
const { push, back } = useRouter();
@@ -223,6 +260,8 @@ export default function ProjectForm() {
223260
},
224261
);
225262

263+
const { data: dataInfo } = useGetProjectFieldMetadata();
264+
226265
const { data: projectsSuggestedData } = useGetProjectEditSuggestionsId(
227266
+id,
228267
{
@@ -608,9 +647,11 @@ export default function ProjectForm() {
608647
name="description"
609648
render={({ field }) => (
610649
<FormItem className="space-y-1.5">
611-
<FormLabel className="text-xs font-semibold">
612-
Description<sup className="pl-0.5">*</sup>
613-
</FormLabel>
650+
<ProjectFieldLabel
651+
title="Description"
652+
data={dataInfo?.data?.attributes?.highlight}
653+
required
654+
/>
614655
<FormControl>
615656
<Input
616657
{...field}
@@ -634,7 +675,7 @@ export default function ProjectForm() {
634675
name="info"
635676
render={({ field }) => (
636677
<FormItem className="space-y-1.5">
637-
<FormLabel className="text-xs font-semibold">Info</FormLabel>
678+
<ProjectFieldLabel title="Info" data={dataInfo?.data?.attributes?.info} />
638679
<FormControl>
639680
<Input
640681
{...field}
@@ -660,9 +701,11 @@ export default function ProjectForm() {
660701
render={({ field }) => {
661702
return (
662703
<FormItem className="space-y-1.5">
663-
<FormLabel className="text-xs font-semibold">
664-
Pillar<sup className="pl-0.5">*</sup>
665-
</FormLabel>
704+
<ProjectFieldLabel
705+
title="Pillar"
706+
data={dataInfo?.data?.attributes?.pillar}
707+
required
708+
/>
666709
<Select value={field.value?.toString()} onValueChange={field.onChange}>
667710
<SelectTrigger
668711
className={cn({
@@ -696,9 +739,11 @@ export default function ProjectForm() {
696739
name="amount"
697740
render={({ field }) => (
698741
<FormItem className="space-y-1.5">
699-
<FormLabel className="text-xs font-semibold">
700-
Amount (USD)<sup className="pl-0.5">*</sup>
701-
</FormLabel>
742+
<ProjectFieldLabel
743+
title="Amount (USD)"
744+
data={dataInfo?.data?.attributes?.amount}
745+
required
746+
/>
702747
<FormControl>
703748
<Input
704749
{...field}
@@ -723,9 +768,11 @@ export default function ProjectForm() {
723768
render={({ field }) => {
724769
return (
725770
<FormItem className="space-y-1.5">
726-
<FormLabel className="text-xs font-semibold">
727-
Countries<sup className="pl-0.5">*</sup>
728-
</FormLabel>
771+
<ProjectFieldLabel
772+
title="Countries"
773+
data={dataInfo?.data?.attributes?.countries}
774+
required
775+
/>
729776
<FormControl>
730777
<MultiCombobox
731778
values={field.value}
@@ -749,9 +796,11 @@ export default function ProjectForm() {
749796
render={({ field }) => {
750797
return (
751798
<FormItem className="space-y-1.5">
752-
<FormLabel className="text-xs font-semibold">
753-
SDG<sup className="pl-0.5">*</sup>
754-
</FormLabel>
799+
<ProjectFieldLabel
800+
title="SDG"
801+
data={dataInfo?.data?.attributes?.sdgs}
802+
required
803+
/>
755804
<FormControl>
756805
<MultiCombobox
757806
values={field.value}
@@ -774,9 +823,11 @@ export default function ProjectForm() {
774823
name="status"
775824
render={({ field }) => (
776825
<FormItem className="space-y-1.5">
777-
<FormLabel className="text-xs font-semibold">
778-
Status<sup className="pl-0.5">*</sup>
779-
</FormLabel>
826+
<ProjectFieldLabel
827+
title="Status"
828+
data={dataInfo?.data?.attributes?.status}
829+
required
830+
/>
780831
<FormControl>
781832
<Select value={field.value?.toString()} onValueChange={field.onChange}>
782833
<SelectTrigger
@@ -812,9 +863,11 @@ export default function ProjectForm() {
812863
name="funding"
813864
render={({ field }) => (
814865
<FormItem className="space-y-1.5">
815-
<FormLabel className="text-xs font-semibold">
816-
Type of funding<sup className="pl-0.5">*</sup>
817-
</FormLabel>
866+
<ProjectFieldLabel
867+
title="Type of funding"
868+
data={dataInfo?.data?.attributes?.funding}
869+
required
870+
/>
818871
<FormControl>
819872
<Select value={field.value?.toString()} onValueChange={field.onChange}>
820873
<SelectTrigger
@@ -850,9 +903,11 @@ export default function ProjectForm() {
850903
name="organization_type"
851904
render={({ field }) => (
852905
<FormItem className="space-y-1.5">
853-
<FormLabel className="text-xs font-semibold">
854-
Organization type<sup className="pl-0.5">*</sup>
855-
</FormLabel>
906+
<ProjectFieldLabel
907+
title="Organization type"
908+
data={dataInfo?.data?.attributes?.organization_type}
909+
required
910+
/>
856911
<FormControl>
857912
<Select value={field.value?.toString()} onValueChange={field.onChange}>
858913
<SelectTrigger
@@ -887,9 +942,11 @@ export default function ProjectForm() {
887942
name="source_country"
888943
render={({ field }) => (
889944
<FormItem className="space-y-1.5">
890-
<FormLabel className="text-xs font-semibold">
891-
Source country<sup className="pl-0.5">*</sup>
892-
</FormLabel>
945+
<ProjectFieldLabel
946+
title="Source country"
947+
data={dataInfo?.data?.attributes?.source_country}
948+
required
949+
/>
893950
<FormControl>
894951
<Select value={field.value?.toString()} onValueChange={field.onChange}>
895952
<SelectTrigger
@@ -925,9 +982,11 @@ export default function ProjectForm() {
925982
name="objective"
926983
render={({ field }) => (
927984
<FormItem className="space-y-1.5">
928-
<FormLabel className="text-xs font-semibold">
929-
Objective<sup className="pl-0.5">*</sup>
930-
</FormLabel>
985+
<ProjectFieldLabel
986+
title="Objective"
987+
data={dataInfo?.data?.attributes?.objective}
988+
required
989+
/>
931990
<FormControl>
932991
<Select value={field.value?.toString()} onValueChange={field.onChange}>
933992
<SelectTrigger

‎client/src/containers/projects/popup.tsx‎

Lines changed: 49 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,31 @@ import { PROJECT_PILLARS } from "@/constants/projects";
1212

1313
import Popup from "@/containers/popup";
1414

15+
import { useGetProjectFieldMetadata } from "@/types/generated/project-field-metadata";
16+
import { Tooltip, TooltipArrow, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
17+
18+
import { LuInfo } from "react-icons/lu";
19+
20+
import { TooltipPortal } from "@radix-ui/react-tooltip";
21+
22+
const ProjectFieldHeader = ({ title, data }: { title: string; data: string | undefined }) => (
23+
<div className="flex items-center">
24+
<h3 className="text-xxs uppercase text-gray-500">{title}</h3>
25+
<Tooltip>
26+
<TooltipTrigger>
27+
<LuInfo className="h-4 w-4 pl-1 font-bold text-gray-500" />
28+
</TooltipTrigger>
29+
30+
<TooltipPortal>
31+
<TooltipContent side="right" align="center">
32+
<Markdown className="prose text-xxs">{data}</Markdown>
33+
<TooltipArrow className="fill-white" width={10} height={5} />
34+
</TooltipContent>
35+
</TooltipPortal>
36+
</Tooltip>
37+
</div>
38+
);
39+
1540
const ProjectPopup = () => {
1641
const [project] = useSyncProject();
1742

@@ -49,6 +74,8 @@ const ProjectPopup = () => {
4974
},
5075
);
5176

77+
const { data: dataInfo } = useGetProjectFieldMetadata();
78+
5279
const pillar = data?.data?.attributes?.pillar;
5380
const sdgs = data?.data?.attributes?.sdgs;
5481
const countries = data?.data?.attributes?.countries;
@@ -80,7 +107,7 @@ const ProjectPopup = () => {
80107
{/* HIGHLIGHT */}
81108
{!!data?.data?.attributes?.highlight && (
82109
<section className="space-y-2.5 py-5">
83-
<h3 className="text-xxs uppercase text-gray-500">Description</h3>
110+
<ProjectFieldHeader title="Description" data={dataInfo?.data?.attributes?.highlight} />
84111
<Markdown className="prose">{data?.data?.attributes?.highlight}</Markdown>
85112
</section>
86113
)}
@@ -89,7 +116,8 @@ const ProjectPopup = () => {
89116
{/* PILLAR */}
90117
{!!pillar?.data?.attributes?.name && (
91118
<div className="space-y-2.5">
92-
<h3 className="text-xxs uppercase text-gray-500">Pillar</h3>
119+
<ProjectFieldHeader title="Pillar" data={dataInfo?.data?.attributes?.pillar} />
120+
93121
<div className="space-y-1 text-sm">
94122
<p>{pillar?.data?.attributes?.name}:</p>
95123
<p className="text-gray-500">{pillar?.data?.attributes?.description}</p>
@@ -100,15 +128,15 @@ const ProjectPopup = () => {
100128
{/* AMOUNT */}
101129
{!!data?.data?.attributes?.amount && (
102130
<div className="space-y-2.5">
103-
<h3 className="text-xxs uppercase text-gray-500">Amount</h3>
131+
<ProjectFieldHeader title="Amount" data={dataInfo?.data?.attributes?.amount} />
104132
<div className="text-sm">{format(data?.data?.attributes?.amount)}</div>
105133
</div>
106134
)}
107135

108136
{/* COUNTRIES */}
109137
{!!countries?.data?.length && (
110138
<div className="space-y-2.5">
111-
<h3 className="text-xxs uppercase text-gray-500">Countries</h3>
139+
<ProjectFieldHeader title="Countries" data={dataInfo?.data?.attributes?.countries} />
112140
<div className="text-sm">
113141
{countries?.data
114142
?.map((c) => {
@@ -124,7 +152,7 @@ const ProjectPopup = () => {
124152
{/* SDGS */}
125153
{!!sdgs?.data?.length && (
126154
<div className="space-y-2.5">
127-
<h3 className="text-xxs uppercase text-gray-500">SDGs</h3>
155+
<ProjectFieldHeader title="SDGs" data={dataInfo?.data?.attributes?.sdgs} />
128156
<ul className="space-y-0.5">
129157
{sdgs?.data?.map((sdg) => {
130158
if (!sdg?.attributes) return null;
@@ -142,55 +170,62 @@ const ProjectPopup = () => {
142170
{/* ACCOUNT */}
143171
{!!data?.data?.attributes?.account && (
144172
<div className="space-y-2.5">
145-
<h3 className="text-xxs uppercase text-gray-500">Account</h3>
173+
<ProjectFieldHeader title="Account" data={dataInfo?.data?.attributes?.account} />
146174
<div className="text-sm">{data?.data?.attributes?.account}</div>
147175
</div>
148176
)}
149177

150178
{/* STATUS */}
151179
{!!projectStatus && (
152180
<div className="space-y-2.5">
153-
<h3 className="text-xxs uppercase text-gray-500">Status</h3>
181+
<ProjectFieldHeader title="Status" data={dataInfo?.data?.attributes?.status} />
154182
<div className="text-sm">{projectStatus}</div>
155183
</div>
156184
)}
157185

158186
{/* Source Country */}
159187
{!!sourceCountry && (
160188
<div className="space-y-2.5">
161-
<h3 className="text-xxs uppercase text-gray-500">Source Country</h3>
162-
<div className="text-sm">{sourceCountry}</div>
189+
<ProjectFieldHeader
190+
title="Source Country"
191+
data={dataInfo?.data?.attributes?.source_country}
192+
/>
163193
</div>
164194
)}
165195

166196
{/* Organization Type */}
167197
{!!organizationType && (
168198
<div className="space-y-2.5">
169-
<h3 className="text-xxs uppercase text-gray-500">Organization Type</h3>
170-
<div className="text-sm">{organizationType}</div>
199+
<ProjectFieldHeader
200+
title="Organization Type"
201+
data={dataInfo?.data?.attributes?.organization_type}
202+
/>
171203
</div>
172204
)}
173205

174206
{/* INFO */}
175207
{!!info && (
176208
<div className="space-y-2.5">
177-
<h3 className="text-xxs uppercase text-gray-500">Info</h3>
209+
<ProjectFieldHeader title="Info" data={dataInfo?.data?.attributes?.info} />
178210
<div className="text-sm">{info}</div>
179211
</div>
180212
)}
181213

182214
{/* Objective */}
183215
{!!objective && (
184216
<div className="space-y-2.5">
185-
<h3 className="text-xxs uppercase text-gray-500">Objective</h3>
217+
<ProjectFieldHeader title="Objective" data={dataInfo?.data?.attributes?.objective} />
186218
<div className="text-sm">{objective}</div>
187219
</div>
188220
)}
189221

190222
{/* TYPE OF FUNDING */}
191223
{!!projectTypeOfFunding && (
192224
<div className="space-y-2.5">
193-
<h3 className="text-xxs uppercase text-gray-500">Type of funding</h3>
225+
<ProjectFieldHeader
226+
title="Type of funding"
227+
data={dataInfo?.data?.attributes?.funding}
228+
/>
194229
<div className="text-sm">{projectTypeOfFunding}</div>
195230
</div>
196231
)}

0 commit comments

Comments
 (0)