[TBCCT-133] Added Project details Drawer #109
Conversation
…s dependent components
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
| const [filters, setFilters] = useGlobalFilters(); | ||
|
|
||
| const handleParameters = async ( | ||
| v: string, | ||
| parameter: keyof Omit<z.infer<typeof filtersSchema>, "keyword">, | ||
| ) => { | ||
| await setFilters((prev) => ({ ...prev, [parameter]: v })); | ||
| }; |
There was a problem hiding this comment.
The filters hosted in this detail DO NOT affect to the global ones in the overview page, they need to be independent and only affect to the content of the detail once connected to the API.
| open={openDetails} | ||
| setIsOpen={setOpenDetails} |
There was a problem hiding this comment.
Instead of passing props, I would suggesting using a jotai atom here so the state is easily accessible from anywhere and we avoid increasing the properties of the component.
|
Color of text should be different (I think it's |
|
Abatement potential is measured in |
|
|
|
Please, remove the bottom border for the last row. |
|
|
| <h3 className="text-md font-medium">Total project cost</h3> | ||
| <InfoButton title="Refers to the summary of Capital Expenditure and Operating Expenditure" /> | ||
| </div> |
There was a problem hiding this comment.
There's aLabel component with a tooltip property where you can achieve the same result, please use it.
| const formatAmount = (value: number) => { | ||
| return `${(value / 1_000_000).toFixed(1)}M`; | ||
| }; |
There was a problem hiding this comment.
I wouldn't format anything in the component: we don't know if we will have always millions or not. I would move the format function out of the component and format the segment in the place of the implementation and pass it to the this component formatted.
| orientation?: "horizontal" | "vertical"; | ||
| } | ||
|
|
||
| const BarChart = ({ |
There was a problem hiding this comment.
We need this component to be agnostic and reusable in other pages, so, please, move it to the components folder.
| SheetTitle, | ||
| } from "@/components/ui/sheet"; | ||
|
|
||
| const Currency = ({ value }: { value: number }) => { |
There was a problem hiding this comment.
There's a renderCurrency method to achieve this in @/lib/format.
client/src/lib/format.tsx
Outdated
| * @example | ||
| * parseCurrency(1234.56) // returns ['$', '1,234'] | ||
| */ | ||
| export const parseCurrency = ( |
There was a problem hiding this comment.
Do you think we can replace this with renderCurrency?
There was a problem hiding this comment.
Yes that works perfectly 👍
agnlez
changed the title
Thats no longer needed once we replaced the InfoButton with Label component. |
Thats no longer needed once we replaced the InfoButton with Label component. |
|
@onehanddev we are missing the fixed footer in the panel |
| function useFilters() { | ||
| return useQueryState( | ||
| "filters", | ||
| parseAsJson(filtersSchema.parse).withDefault(INITIAL_FILTERS_STATE), | ||
| ); | ||
| } | ||
|
|
There was a problem hiding this comment.
Let's keep the filters for detail really simple and not share them in the URL: this might be confusing for the user as we already sharing the filters of the overview page. Use a jotai's atom to handle them.
There was a problem hiding this comment.
Also, there will be only 3 filters: project size, carbon pricing type and cost, so we can remove the rest of them for the detail.
Oh maybe I was referring to some old design, should I go ahead and add the modal popup which comes when we click on 'Create Custom Project' button ? |
Yes, please. And the "create" button inside the popup should take the user to |
Just made this change, please check and let me know if there is a room for enhancement. |
|
|
| const INITIAL_FILTERS_STATE: z.infer<typeof filtersSchema> = { | ||
| keyword: "", | ||
| projectSizeFilter: PROJECT_SIZE_FILTER.MEDIUM, | ||
| priceType: PROJECT_PRICE_TYPE.OPEN_BREAK_EVEN_PRICE, | ||
| costRangeSelector: COST_TYPE_SELECTOR.NPV, | ||
| countryCode: "", | ||
| ecosystem: [], | ||
| activity: [], | ||
| activitySubtype: [], | ||
| costRange: INITIAL_COST_RANGE, | ||
| abatementPotentialRange: INITIAL_ABATEMENT_POTENTIAL_RANGE, | ||
| }; |
There was a problem hiding this comment.
We are using only 3 properties here: projectSizeFilter, priceType and costRange. Remove the rest of them.
|
@onehanddev the cost selector appears empty by default. After fixing that, feel free to merge.
|
onehanddev
deleted the
feature/TBCCT-133-implement-details-right-side-panel
branch
Added Project details drawer / sheet for project list and its dependent components.
Thing remaining -
Screen.Recording.2024-11-19.at.5.41.37.PM.mov