Skip to content

Commit

Permalink
[TM-1601] Tree Species Table (#812)
Browse files Browse the repository at this point in the history 
* [TM-1601] start adding data inside and comment code to edit

* [TM-1601] show data from tree species table

* [TM-1601] remove pagination from tree species table

* [TM-1601] add values to tree species table

* [TM-1601] comment species table in PD view

* [TM-1601] correct condition to show goals in species table

---------

Co-authored-by: JORGE <[email protected]>
  • Loading branch information
@cesarLima1 @egrojMonroy
cesarLima1 and egrojMonroy authored Jan 21, 2025
1 parent edd90a3 commit c6f2203
Show file tree
Hide file tree
Showing 5 changed files with 310 additions and 214 deletions.
73 changes: 33 additions & 40 deletions src/admin/components/ResourceTabs/InformationTab/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,6 @@ import {
} from "@/generated/apiComponents";
import { getCustomFormSteps, normalizedFormDefaultValue } from "@/helpers/customForms";
import { pluralEntityNameToSingular } from "@/helpers/entity";
import { dataTreeCount, dataTreeCountGoal } from "@/pages/project/[uuid]/tabs/GoalsAndProgress";
import { EntityName } from "@/types/common";

import InformationTabRow from "./components/InformationTabRow";
Expand Down Expand Up @@ -53,6 +52,8 @@ const InformationTab: FC<IProps> = props => {
const { isLoading: ctxLoading, record, resource } = useShowContext();
const t = useT();
const { framework } = useFrameworkContext();
const modelName = resource?.replace("Report", "-report");
const modelUUID = record?.uuid;

const { data: response, isLoading: queryLoading } = useGetV2FormsENTITYUUID<{ data: GetV2FormsENTITYUUIDResponse }>({
pathParams: {
Expand All @@ -61,7 +62,7 @@ const InformationTab: FC<IProps> = props => {
}
});

const { data: seedlings } = useGetV2SeedingsENTITYUUID({
const { data: seedings } = useGetV2SeedingsENTITYUUID({
pathParams: {
uuid: record?.uuid,
entity: resource?.replace("Report", "-report")
Expand All @@ -72,7 +73,7 @@ const InformationTab: FC<IProps> = props => {

if (isLoading || !record) return null;

const totalSeedlings = seedlings?.data?.reduce((acc, curr) => acc + (curr?.amount ?? 0), 0);
const totalSeedlings = seedings?.data?.reduce((acc, curr) => acc + (curr?.amount ?? 0), 0);
const formSteps = getCustomFormSteps(response?.data.form!, t, undefined, framework);
const values = record.migrated
? setDefaultConditionalFieldsAnswers(normalizedFormDefaultValue(response?.data.answers!, formSteps), formSteps)
Expand Down Expand Up @@ -148,22 +149,10 @@ const InformationTab: FC<IProps> = props => {
Non-Trees Planted
</Text>
<TreeSpeciesTablePD
modelName={
((framework.includes(Framework.TF) || framework.includes(Framework.ENTERPRISES)) &&
(props.type === "projects" || props.type === "sites")) ||
props.type === "site-reports" ||
props.type === "project-reports"
? "noGoal"
: "treeCount/Goal"
}
data={
((framework.includes(Framework.TF) || framework.includes(Framework.ENTERPRISES)) &&
(props.type === "projects" || props.type === "sites")) ||
props.type === "site-reports" ||
props.type === "project-reports"
? dataTreeCount
: dataTreeCountGoal
}
modelUUID={modelUUID}
modelName={modelName}
collection="non-tree"
framework={record?.framework_key}
secondColumnWidth="45%"
/>
</div>
Expand All @@ -174,7 +163,13 @@ const InformationTab: FC<IProps> = props => {
<Text variant="text-16-bold" className="capitalize">
Saplings Grown in Nurseries:
</Text>
<TreeSpeciesTablePD modelName="noGoal" data={dataTreeCount} secondColumnWidth="45%" />
<TreeSpeciesTablePD
modelUUID={modelUUID}
modelName={modelName}
collection="nursery-seedling"
framework={record?.framework_key}
secondColumnWidth="45%"
/>
</div>
</ContextCondition>
</When>
Expand All @@ -188,32 +183,24 @@ const InformationTab: FC<IProps> = props => {
{totalSeedlings ?? 0}
</Text>
</div>
<TreeSpeciesTablePD modelName="noGoal" data={dataTreeCount} secondColumnWidth="45%" />
<TreeSpeciesTablePD
modelUUID={modelUUID}
modelName={modelName}
collection="seeding"
framework={record?.framework_key}
secondColumnWidth="45%"
/>
</div>
</ContextCondition>
<div className="flex flex-col gap-4">
<Text variant="text-16-bold" className="capitalize">
Trees Planted:
</Text>
<TreeSpeciesTablePD
modelName={
((framework.includes(Framework.TF) || framework.includes(Framework.ENTERPRISES)) &&
props.type === "sites") ||
(framework.includes(Framework.PPC) && props.type === "projects") ||
props.type === "site-reports" ||
props.type === "project-reports"
? "noGoal"
: "treeCount/Goal"
}
data={
((framework.includes(Framework.TF) || framework.includes(Framework.ENTERPRISES)) &&
props.type === "sites") ||
(framework.includes(Framework.PPC) && props.type === "projects") ||
props.type === "site-reports" ||
props.type === "project-reports"
? dataTreeCount
: dataTreeCountGoal
}
modelUUID={modelUUID}
modelName={modelName}
collection="tree-planted"
framework={record?.framework_key}
secondColumnWidth="45%"
/>
</div>
Expand All @@ -223,7 +210,13 @@ const InformationTab: FC<IProps> = props => {
<Text variant="text-16-bold" className="capitalize">
Replanting:
</Text>
<TreeSpeciesTablePD modelName="noGoal" data={dataTreeCount} secondColumnWidth="45%" />
<TreeSpeciesTablePD
modelUUID={modelUUID}
modelName={modelName}
collection="replanting"
framework={record?.framework_key}
secondColumnWidth="45%"
/>
</div>
</ContextCondition>
</When>
Expand Down
139 changes: 121 additions & 18 deletions src/components/extensive/Tables/TreeSpeciesTablePD.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,8 @@ import Table from "@/components/elements/Table/Table";
import { VARIANT_TABLE_TREE_SPECIES } from "@/components/elements/Table/TableVariants";
import Text from "@/components/elements/Text/Text";
import ToolTip from "@/components/elements/Tooltip/Tooltip";
import { Framework } from "@/context/framework.provider";
import { useGetV2TreeSpeciesEntityUUID } from "@/generated/apiComponents";

import Icon, { IconNames } from "../Icon/Icon";

Expand All @@ -21,25 +23,110 @@ export type ModelNameType =
| "noGoal";

export interface TreeSpeciesTablePDProps {
data: any[];
modelName: ModelNameType;
modelUUID: string;
modelName: string;
framework?: string;
headerName?: string;
collection?: string;
secondColumnWidth?: string;
}

const TreeSpeciesTablePD = ({
data,
modelUUID,
modelName,
framework,
collection,
headerName = "species Name",
secondColumnWidth = ""
}: TreeSpeciesTablePDProps) => {
const queryParams: any = {};

if (collection != null) {
queryParams["filter[collection]"] = collection;
}

const { data: apiResponse } = useGetV2TreeSpeciesEntityUUID(
{
queryParams,
pathParams: {
uuid: modelUUID,
entity: modelName?.replace("Report", "-report")
}
},
{
enabled: !!modelUUID
}
);

const getCollectionType = (collection: string) => {
let result = "tree";
if (collection === "non-tree") {
result =
framework && framework.includes(Framework.HBF) && (modelName === "project" || modelName === "site")
? "treeCount/Goal"
: "noGoal";
}
if (collection === "nursery-seedling") {
result = modelName === "project" ? "noGoal" : "treeCount/Goal";
}
if (collection === "seeding") {
result = modelName === "project" ? "noGoal" : "seedCount/Goal";
}
if (collection === "tree-planted") {
result =
(framework &&
(framework.includes(Framework.HBF) ||
framework.includes(Framework.TF) ||
framework.includes(Framework.ENTERPRISES)) &&
modelName === "project") ||
(framework && framework.includes(Framework.HBF) && modelName === "site")
? "treeCount/Goal"
: "noGoal";
}
if (collection === "replanting") {
result = "noGoal";
}
return result;
};

const processTableData = (rows: any[]) => {
if (!rows) return [];

return rows.map(row => {
let speciesType = "tree";
if (!row.taxon_id) {
speciesType = "non-scientific";
}
if (row.is_new_species) {
speciesType = "new";
}
if (getCollectionType(collection ?? "") !== "noGoal" && getCollectionType(collection ?? "").includes("Goal")) {
return {
name: [row.name, speciesType],
treeCountGoal: [row.report_amount, row.amount],
uuid: row.uuid
};
}

return {
name: [row.name, speciesType],
treeCount: row.amount || "0",
uuid: row.uuid
};
});
};

const tableData = apiResponse?.data ? processTableData(apiResponse.data) : [];

console.log("rows tableData", tableData);

const rowSpeciesName = {
accessorKey: "name",
header: headerName,
enableSorting: false,
cell: (props: any) => {
const value = props.getValue();
if (value[0] === "Non-scientific name") {
if (value[1] === "non-scientific") {
return (
<div className="font-inherit flex items-center gap-1">
{value[0]}
Expand Down Expand Up @@ -115,7 +202,7 @@ const TreeSpeciesTablePD = ({
rowSpeciesName,
{
accessorKey: "treeCount",
header: "Tree CounT",
header: "Tree Count",
enableSorting: false,
meta: { width: secondColumnWidth },
cell: (props: any) => {
Expand Down Expand Up @@ -180,13 +267,20 @@ const TreeSpeciesTablePD = ({
meta: { width: secondColumnWidth },
cell: (props: any) => {
const value = props.getValue();
if (!value) {
return null;
}
return (
<div className="grid grid-cols-2 gap-3">
<LinearProgressBar color="primary" value={50} className={"mt-2 !h-1.5 bg-primary-200 lg:!h-2"} />
<LinearProgressBar
color="primary"
value={value[0] > value[1] ? 100 : (value[0] / value[1]) * 100}
className={"mt-2 !h-1.5 bg-primary-200 lg:!h-2"}
/>
<Text variant="text-14-bold" className="flex gap-2">
{value[0]}
{value[0].toLocaleString()}
<Text variant="text-14" className="">
of {value[1]}
of {value[1].toLocaleString()}
</Text>
</Text>
</div>
Expand All @@ -206,10 +300,14 @@ const TreeSpeciesTablePD = ({
const value = props.getValue();
return (
<div className="grid grid-cols-2 gap-3">
<LinearProgressBar color="primary" value={50} className={"mt-2 !h-1.5 bg-primary-200 lg:!h-2"} />
<LinearProgressBar
color="primary"
value={value[0] > value[1] ? 100 : (value[0] / value[1]) * 100}
className={"mt-2 !h-1.5 bg-primary-200 lg:!h-2"}
/>
<Text variant="text-14-bold" className="flex gap-2">
{value[0]}
<Text variant="text-14-light">of {value[1]}</Text>
{value[0].toLocaleString()}
<Text variant="text-14-light">of {value[1].toLocaleString()}</Text>
</Text>
</div>
);
Expand All @@ -228,11 +326,15 @@ const TreeSpeciesTablePD = ({
const value = props.getValue();
return (
<div className="grid grid-cols-2 gap-3">
<LinearProgressBar color="primary" value={50} className={"mt-2 !h-1.5 bg-primary-200 lg:!h-2"} />
<LinearProgressBar
color="primary"
value={value[0] > value[1] ? 100 : (value[0] / value[1]) * 100}
className={"mt-2 !h-1.5 bg-primary-200 lg:!h-2"}
/>
<Text variant="text-14-bold" className="flex gap-2">
{value[0]}
{value[0].toLocaleString()}
<Text variant="text-14" className="">
of {value[1]}
of {value[1].toLocaleString()}
</Text>
</Text>
</div>
Expand All @@ -250,7 +352,7 @@ const TreeSpeciesTablePD = ({
meta: { width: secondColumnWidth },
cell: (props: any) => {
const value = props.getValue();
return <div className="text-14 !font-bold">{value}</div>;
return <div className="text-14 !font-bold">{value.toLocaleString()}</div>;
}
}
];
Expand All @@ -266,7 +368,7 @@ const TreeSpeciesTablePD = ({
return (
<div className="grid grid-cols-2 gap-3">
<Text variant="text-14-bold" className="flex gap-2">
{value}
{value.toLocaleString()}
</Text>
</div>
);
Expand All @@ -289,11 +391,12 @@ const TreeSpeciesTablePD = ({
return (
<div>
<Table
data={data}
columns={columnTable[modelName]}
data={tableData}
columns={columnTable[getCollectionType(collection ?? "") as ModelNameType]}
variant={VARIANT_TABLE_TREE_SPECIES}
hasPagination
invertSelectPagination
visibleRows={5}
/>
</div>
);
Expand Down
Loading

0 comments on commit c6f2203

Please sign in to comment.