Skip to content

Commit

Permalink
Refactor ScoreIndicator component
Browse files Browse the repository at this point in the history
  • Loading branch information
@atrincas
atrincas committed Dec 26, 2024
1 parent 20f75c5 commit 2dbf679
Show file tree
Hide file tree
Showing 4 changed files with 45 additions and 99 deletions.
14 changes: 6 additions & 8 deletions client/src/components/ui/score-card.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,28 +3,26 @@ import { PROJECT_SCORE } from "@shared/entities/project-score.enum";
import { cn } from "@/lib/utils";

interface ScoreIndicatorProps {
value: PROJECT_SCORE;
className?: string;
children?: React.ReactNode;
}

export const DEFAULT_BG_CLASSES: Record<PROJECT_SCORE, string> = {
const DEFAULT_BG_CLASSES: Record<PROJECT_SCORE, string> = {
[PROJECT_SCORE.HIGH]: "bg-ramps-green",
[PROJECT_SCORE.MEDIUM]: "bg-ramps-yellow",
[PROJECT_SCORE.LOW]: "bg-ramps-red",
};

export const ScoreIndicator = ({
children,
className = "",
}: ScoreIndicatorProps) => {
export const ScoreIndicator = ({ value, className }: ScoreIndicatorProps) => {
return (
<div
className={cn(
"flex h-10 items-center justify-center font-normal capitalize text-deep-ocean",
"flex h-10 items-center justify-center text-sm font-normal capitalize text-deep-ocean",
DEFAULT_BG_CLASSES[value],
className,
)}
>
{children}
{value}
</div>
);
};
6 changes: 5 additions & 1 deletion client/src/containers/overview/project-details/score-card-ratings/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,14 @@
import { FC } from "react";

import { Scorecard } from "@shared/dtos/projects/project-scorecard.dto";
import { PROJECT_SCORE } from "@shared/entities/project-score.enum";

import { useFeatureFlags } from "@/hooks/use-feature-flags";

import CompareButton from "@/containers/overview/project-details/compare-button";

import { Label } from "@/components/ui/label";
import { ScoreIndicator } from "@/components/ui/score-card";
import { Table, TableBody, TableCell, TableRow } from "@/components/ui/table";

const scoreCardMap = {
Expand Down Expand Up @@ -52,7 +54,9 @@ const ScoreCardRatings: FC<{ data?: Scorecard }> = ({ data }) => {
<TableCell className="py-2 pl-4 text-sm font-normal text-big-stone-200">
{scoreCardMap[key as keyof Scorecard]}
</TableCell>
<TableCell className="w-[240px] font-medium">{value}</TableCell>
<TableCell className="w-[240px] p-0 font-medium">
<ScoreIndicator value={value as PROJECT_SCORE} />
</TableCell>
</TableRow>
))}
</TableBody>
Expand Down
8 changes: 2 additions & 6 deletions client/src/containers/overview/table/view/overview/columns.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import { filtersSchema } from "@/app/(overview)/url-store";
import { TableStateWithMaximums } from "@/containers/overview/table/view/overview";

import SingleStackedBarChart from "@/components/ui/bar-chart/single-stacked-bar-chart";
import { DEFAULT_BG_CLASSES, ScoreIndicator } from "@/components/ui/score-card";
import { ScoreIndicator } from "@/components/ui/score-card";

const columnHelper = createColumnHelper<
Partial<ProjectType> & {
Expand Down Expand Up @@ -78,11 +78,7 @@ export const columns = (filters: z.infer<typeof filtersSchema>) => [
if (value === undefined) {
return "-";
}
return (
<ScoreIndicator className={DEFAULT_BG_CLASSES[value as PROJECT_SCORE]}>
{value}
</ScoreIndicator>
);
return <ScoreIndicator value={value as PROJECT_SCORE} />;
},
}),
columnHelper.accessor(
Expand Down
116 changes: 32 additions & 84 deletions client/src/containers/overview/table/view/scorecard-prioritization/columns.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,7 @@ import { PROJECT_SCORE } from "@shared/entities/project-score.enum";
import { ProjectScorecardView } from "@shared/entities/project-scorecard.view";
import { createColumnHelper } from "@tanstack/react-table";

import { cn } from "@/lib/utils";

import { ScoreIndicator, DEFAULT_BG_CLASSES } from "@/components/ui/score-card";
import { ScoreIndicator } from "@/components/ui/score-card";

const columnHelper = createColumnHelper<ProjectScorecardView>();

Expand All @@ -18,143 +16,93 @@ export const TABLE_COLUMNS = [
header: () => <span>Financial feasibility</span>,
cell: (props) => (
<ScoreIndicator
className={cn(
"min-h-[56px]",
DEFAULT_BG_CLASSES[
props.row.original.financialFeasibility as PROJECT_SCORE
],
)}
>
{props.row.original.financialFeasibility}
</ScoreIndicator>
value={props.row.original.financialFeasibility as PROJECT_SCORE}
className="min-h-[56px]"
/>
),
}),
columnHelper.accessor("legalFeasibility", {
enableSorting: true,
header: () => <span>Legal Feasibility</span>,
cell: (props) => (
<ScoreIndicator
className={cn(
"min-h-[56px]",
DEFAULT_BG_CLASSES[
props.row.original.legalFeasibility as PROJECT_SCORE
],
)}
>
{props.row.original.legalFeasibility}
</ScoreIndicator>
value={props.row.original.legalFeasibility as PROJECT_SCORE}
className="min-h-[56px]"
/>
),
}),
columnHelper.accessor("implementationFeasibility", {
enableSorting: true,
header: () => <span>Implementation feasibility</span>,
cell: (props) => (
<ScoreIndicator
className={cn(
"min-h-[56px]",
DEFAULT_BG_CLASSES[
props.row.original.implementationFeasibility as PROJECT_SCORE
],
)}
>
{props.row.original.implementationFeasibility}
</ScoreIndicator>
value={props.row.original.implementationFeasibility as PROJECT_SCORE}
className="min-h-[56px]"
/>
),
}),
columnHelper.accessor("socialFeasibility", {
enableSorting: true,
header: () => <span>Social Feasibility</span>,
cell: (props) => (
<ScoreIndicator
className={cn(
"min-h-[56px]",
DEFAULT_BG_CLASSES[
props.row.original.socialFeasibility as PROJECT_SCORE
],
)}
>
{props.row.original.socialFeasibility}
</ScoreIndicator>
value={props.row.original.socialFeasibility as PROJECT_SCORE}
className="min-h-[56px]"
/>
),
}),
columnHelper.accessor("securityRating", {
enableSorting: true,
header: () => <span>Security Rating</span>,
cell: (props) => (
<ScoreIndicator
className={cn(
"min-h-[56px]",
DEFAULT_BG_CLASSES[
props.row.original.securityRating as PROJECT_SCORE
],
)}
>
{props.row.original.securityRating}
</ScoreIndicator>
value={props.row.original.securityRating as PROJECT_SCORE}
className="min-h-[56px]"
/>
),
}),
columnHelper.accessor("availabilityOfExperiencedLabor", {
enableSorting: true,
header: () => <span>Availability of experienced labor</span>,
cell: (props) => (
<ScoreIndicator
className={cn(
"min-h-[56px]",
DEFAULT_BG_CLASSES[
props.row.original.availabilityOfExperiencedLabor as PROJECT_SCORE
],
)}
>
{props.row.original.availabilityOfExperiencedLabor}
</ScoreIndicator>
value={
props.row.original.availabilityOfExperiencedLabor as PROJECT_SCORE
}
className="min-h-[56px]"
/>
),
}),
columnHelper.accessor("availabilityOfAlternatingFunding", {
enableSorting: true,
header: () => <span>Availability of alternating funding</span>,
cell: (props) => (
<ScoreIndicator
className={cn(
"min-h-[56px]",
DEFAULT_BG_CLASSES[
props.row.original.availabilityOfAlternatingFunding as PROJECT_SCORE
],
)}
>
{props.row.original.availabilityOfAlternatingFunding}
</ScoreIndicator>
value={
props.row.original.availabilityOfAlternatingFunding as PROJECT_SCORE
}
className="min-h-[56px]"
/>
),
}),
columnHelper.accessor("coastalProtectionBenefits", {
enableSorting: true,
header: () => <span>Coastal Protection benefit</span>,
cell: (props) => (
<ScoreIndicator
className={cn(
"min-h-[56px]",
DEFAULT_BG_CLASSES[
props.row.original.coastalProtectionBenefits as PROJECT_SCORE
],
)}
>
{props.row.original.coastalProtectionBenefits}
</ScoreIndicator>
value={props.row.original.coastalProtectionBenefits as PROJECT_SCORE}
className="min-h-[56px]"
/>
),
}),
columnHelper.accessor("biodiversityBenefit", {
enableSorting: true,
header: () => <span>Biodiversity benefit</span>,
cell: (props) => (
<ScoreIndicator
className={cn(
"min-h-[56px]",
DEFAULT_BG_CLASSES[
props.row.original.biodiversityBenefit as PROJECT_SCORE
],
)}
>
{props.row.original.biodiversityBenefit}
</ScoreIndicator>
value={props.row.original.biodiversityBenefit as PROJECT_SCORE}
className="min-h-[56px]"
/>
),
}),
];

0 comments on commit 2dbf679

Please sign in to comment.