From a9ae0774cad21f4853e5ed2886427215c731ac3a Mon Sep 17 00:00:00 2001 From: Dotty Date: Wed, 18 Dec 2024 13:12:56 -0400 Subject: [PATCH 1/4] [TM-1561] Edit position sort in table --- .../ResourceTabs/PolygonReviewTab/index.tsx | 27 ++++++-- src/components/elements/Table/Table.tsx | 66 ++++++++++++++----- 2 files changed, 68 insertions(+), 25 deletions(-) diff --git a/src/admin/components/ResourceTabs/PolygonReviewTab/index.tsx b/src/admin/components/ResourceTabs/PolygonReviewTab/index.tsx index 9117e6456..0418ea6ce 100644 --- a/src/admin/components/ResourceTabs/PolygonReviewTab/index.tsx +++ b/src/admin/components/ResourceTabs/PolygonReviewTab/index.tsx @@ -742,7 +742,7 @@ const PolygonReviewTab: FC = props => { pagination: { pageSize: 10000000 } }} columns={[ - { header: "Polygon Name", accessorKey: "polygon-name" }, + { header: "Polygon Name", accessorKey: "polygon-name", meta: { style: { width: "14.63%" } } }, { header: "Restoration Practice", accessorKey: "restoration-practice", @@ -751,15 +751,28 @@ const PolygonReviewTab: FC = props => { return ( ); - } + }, + meta: { style: { width: "17.63%" } } }, - { header: "Target Land Use System", accessorKey: "target-land-use-system" }, - { header: "Tree Distribution", accessorKey: "tree-distribution" }, - { header: "Planting Start Date", accessorKey: "planting-start-date" }, - { header: "Source", accessorKey: "source" }, + { + header: "Target Land Use System", + accessorKey: "target-land-use-system", + meta: { style: { width: "20.63%" } } + }, + { + header: "Tree Distribution", + accessorKey: "tree-distribution", + meta: { style: { width: "15.63%" } } + }, + { + header: "Planting Start Date", + accessorKey: "planting-start-date", + meta: { style: { width: "17.63%" } } + }, + { header: "Source", accessorKey: "source", meta: { style: { width: "10.63%" } } }, { header: "", accessorKey: "ellipse", diff --git a/src/components/elements/Table/Table.tsx b/src/components/elements/Table/Table.tsx index 97bbe9287..a1fafcae7 100644 --- a/src/components/elements/Table/Table.tsx +++ b/src/components/elements/Table/Table.tsx @@ -14,7 +14,7 @@ import { import { useT } from "@transifex/react"; import classNames from "classnames"; import Lottie from "lottie-react"; -import { DetailedHTMLProps, PropsWithChildren, TableHTMLAttributes, useEffect, useMemo, useState } from "react"; +import { DetailedHTMLProps, PropsWithChildren, TableHTMLAttributes, useEffect, useMemo, useRef, useState } from "react"; import { Else, If, Then, When } from "react-if"; import { twMerge as tw } from "tailwind-merge"; @@ -95,6 +95,9 @@ function Table({ const [sorting, setSorting] = useState(initialTableState?.sorting ?? []); const [filters, setFilters] = useState([]); + const spanRefs = useRef([]); + const iconRefs = useRef([]); + const { getHeaderGroups, getRowModel, @@ -183,7 +186,6 @@ function Table({ } >
({ fontFamily: "inherit" }} > - {flexRender(header.column.columnDef.header, header.getContext())} - - - + + { + if ( + el && + !spanRefs.current.includes(el) && + flexRender(header.column.columnDef.header, header.getContext()) + ) { + spanRefs.current.push(el); + } + }} + > + {flexRender(header.column.columnDef.header, header.getContext())} + + + { + if (el && !iconRefs.current.includes(el)) { + iconRefs.current.push(el); + } + }} + className="absolute left-[calc(100%+10px)] top-1/2 z-auto -translate-y-1/2 transform" + style={{ left: `${spanRefs.current[header.index]?.offsetWidth}px` }} + > + + + +
); From 5d0ba32df372fdc419acfd2fa61a1210b4d2435a Mon Sep 17 00:00:00 2001 From: diego-morales-flores-1996 Date: Wed, 18 Dec 2024 13:25:25 -0400 Subject: [PATCH 2/4] update snapshots --- .../__snapshots__/Table.stories.storyshot | 1370 ++++++++++++++--- 1 file changed, 1153 insertions(+), 217 deletions(-) diff --git a/src/components/elements/Table/__snapshots__/Table.stories.storyshot b/src/components/elements/Table/__snapshots__/Table.stories.storyshot index 4049211ad..f4994aa8d 100644 --- a/src/components/elements/Table/__snapshots__/Table.stories.storyshot +++ b/src/components/elements/Table/__snapshots__/Table.stories.storyshot @@ -124,7 +124,6 @@ exports[`Storyshots Components/Elements/Table Default 1`] = ` } >
- Funding type + + + Funding type + +
- Funding source -
+ > + + Funding source + + +
+ +
- Funding amount -
+ > + + Funding amount + + +
+ +
- Status + + + Status + +
+ > + + + +
@@ -987,7 +1065,6 @@ exports[`Storyshots Components/Elements/Table Primary 1`] = ` } >
- Funding type + + + Funding type + +
- Funding source -
+ > + + Funding source + + +
+ +
- Funding amount -
+ > + + Funding amount + + +
+ +
- Status + + + Status + +
+ > + + + +
@@ -1850,7 +2006,6 @@ exports[`Storyshots Components/Elements/Table Secundary White 1`] = ` } >
- Funding type + + + Funding type + +
- Funding source -
+ > + + Funding source + + +
+ +
- Funding amount -
+ > + + Funding amount + + +
+ +
- Status + + + Status + +
+ > + + + +
@@ -2713,7 +2947,6 @@ exports[`Storyshots Components/Elements/Table Table Airtable 1`] = ` } >
- Funding type + + + Funding type + +
- Funding source -
+ > + + Funding source + + +
+ +
- Funding amount -
+ > + + Funding amount + + +
+ +
- Status + + + Status + +
+ > + + + +
@@ -3579,7 +3891,6 @@ exports[`Storyshots Components/Elements/Table Table Airtable Dashboard 1`] = ` } >
- Funding type + + + Funding type + +
- Funding source -
+ > + + Funding source + + +
+ +
- Funding amount -
+ > + + Funding amount + + +
+ +
- Status + + + Status + +
+ > + + + +
@@ -4443,7 +4833,6 @@ exports[`Storyshots Components/Elements/Table Table Border 1`] = ` } >
- Funding type + + + Funding type + +
- Funding source -
+ > + + Funding source + + +
+ +
- Funding amount -
+ > + + Funding amount + + +
+ +
- Status + + + Status + +
+ > + + + +
@@ -5306,7 +5774,6 @@ exports[`Storyshots Components/Elements/Table Table Border All 1`] = ` } >
- Funding type + + + Funding type + +
- Funding source -
+ > + + Funding source + + +
+ +
- Funding amount -
+ > + + Funding amount + + +
+ +
- Status + + + Status + +
+ > + + + +
@@ -6172,7 +6718,6 @@ exports[`Storyshots Components/Elements/Table Table Dashboard Countries 1`] = ` } >
- Funding type + + + Funding type + +
- Funding source -
+ > + + Funding source + + +
+ +
- Funding amount -
+ + Funding amount + + + > +
+ +
- Status + + + Status + +
+ > + + + +
@@ -7039,7 +7663,6 @@ exports[`Storyshots Components/Elements/Table Table Dashboard Countries Modal 1` } >
- Funding type + + + Funding type + +
- Funding source -
+ > + + Funding source + + +
+ +
- Funding amount -
+ > + + Funding amount + + +
+ +
- Status + + + Status + +
+ > + + + +
@@ -7906,7 +8608,6 @@ exports[`Storyshots Components/Elements/Table Table Organization 1`] = ` } >
- Funding type + + + Funding type + +
- Funding source -
+ > + + Funding source + + +
+ +
- Funding amount -
+ > + + Funding amount + + +
+ +
- Status + + + Status + +
+ > + + + +
@@ -8770,7 +9550,6 @@ exports[`Storyshots Components/Elements/Table Table Site Polygon 1`] = ` } >
- Funding type + + + Funding type + +
- Funding source -
+ > + + Funding source + + +
+ +
- Funding amount -
+ > + + Funding amount + + +
+ +
- Status + + + Status + +
+ > + + + +
@@ -9636,7 +10494,6 @@ exports[`Storyshots Components/Elements/Table Table Version 1`] = ` } >
- Funding type + + + Funding type + +
- Funding source -
+ > + + Funding source + + +
+ +
- Funding amount -
+ > + + Funding amount + + +
+ +
- Status + + + Status + +
+ > + + + +
From d8c5ed38b6cea568ab2fbc86f1aa95e7e5843464 Mon Sep 17 00:00:00 2001 From: Dotty Date: Wed, 18 Dec 2024 13:52:43 -0400 Subject: [PATCH 3/4] [TM-1561] fix error width in safary --- .../components/ResourceTabs/PolygonReviewTab/index.tsx | 10 ---------- src/components/elements/Table/Table.tsx | 6 ++++-- 2 files changed, 4 insertions(+), 12 deletions(-) diff --git a/src/admin/components/ResourceTabs/PolygonReviewTab/index.tsx b/src/admin/components/ResourceTabs/PolygonReviewTab/index.tsx index 0418ea6ce..3b5bd4d46 100644 --- a/src/admin/components/ResourceTabs/PolygonReviewTab/index.tsx +++ b/src/admin/components/ResourceTabs/PolygonReviewTab/index.tsx @@ -26,7 +26,6 @@ import LinearProgressBarMonitored from "@/components/elements/ProgressBar/Linear import Table from "@/components/elements/Table/Table"; import { VARIANT_TABLE_SITE_POLYGON_REVIEW } from "@/components/elements/Table/TableVariants"; import Text from "@/components/elements/Text/Text"; -import ToolTip from "@/components/elements/Tooltip/Tooltip"; import Icon from "@/components/extensive/Icon/Icon"; import { IconNames } from "@/components/extensive/Icon/Icon"; import ModalAdd from "@/components/extensive/Modal/ModalAdd"; @@ -629,9 +628,6 @@ const PolygonReviewTab: FC = props => {
Site Status - - - {record?.readable_status} @@ -640,9 +636,6 @@ const PolygonReviewTab: FC = props => {
Polygon Overview - - - @@ -660,9 +653,6 @@ const PolygonReviewTab: FC = props => {
Add or Edit Polygons - - - Add, remove or edit polygons that are associated to a site. Polygons may be edited in the map diff --git a/src/components/elements/Table/Table.tsx b/src/components/elements/Table/Table.tsx index a1fafcae7..2c7ad9b2d 100644 --- a/src/components/elements/Table/Table.tsx +++ b/src/components/elements/Table/Table.tsx @@ -195,7 +195,9 @@ function Table({ > ({ } }} className="absolute left-[calc(100%+10px)] top-1/2 z-auto -translate-y-1/2 transform" - style={{ left: `${spanRefs.current[header.index]?.offsetWidth}px` }} + style={{ left: `${spanRefs.current[header.index]?.getBoundingClientRect().width}px` }} > Date: Wed, 18 Dec 2024 14:03:57 -0400 Subject: [PATCH 4/4] fix lint --- .../Inputs/TreeSpeciesInput/TreeSpeciesInput.tsx | 12 ++++++------ .../Inputs/TreeSpeciesInput/TreeSpeciesModal.tsx | 2 +- 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/src/components/elements/Inputs/TreeSpeciesInput/TreeSpeciesInput.tsx b/src/components/elements/Inputs/TreeSpeciesInput/TreeSpeciesInput.tsx index c2c554a42..2cfea89fb 100644 --- a/src/components/elements/Inputs/TreeSpeciesInput/TreeSpeciesInput.tsx +++ b/src/components/elements/Inputs/TreeSpeciesInput/TreeSpeciesInput.tsx @@ -200,7 +200,7 @@ const TreeSpeciesInput = (props: TreeSpeciesInputProps) => {
{handleBaseEntityTrees && (
- + {t( "If you would like to add a species not included on the original Restoration Project, it will be flagged to the admin as new information pending review." )} @@ -230,7 +230,7 @@ const TreeSpeciesInput = (props: TreeSpeciesInputProps) => { /> 0}>
@@ -269,7 +269,7 @@ const TreeSpeciesInput = (props: TreeSpeciesInputProps) => { {t("No matches available")}
- + {t("You can add this species, but it will be pending review from Admin.")} @@ -342,7 +342,7 @@ const TreeSpeciesInput = (props: TreeSpeciesInputProps) => {
- + {t("Editing: {name}", { name: value.name })} @@ -361,12 +361,12 @@ const TreeSpeciesInput = (props: TreeSpeciesInputProps) => {
- +
- +
diff --git a/src/components/elements/Inputs/TreeSpeciesInput/TreeSpeciesModal.tsx b/src/components/elements/Inputs/TreeSpeciesInput/TreeSpeciesModal.tsx index c8190ea65..11076cdf1 100644 --- a/src/components/elements/Inputs/TreeSpeciesInput/TreeSpeciesModal.tsx +++ b/src/components/elements/Inputs/TreeSpeciesInput/TreeSpeciesModal.tsx @@ -12,7 +12,7 @@ type TreeSpeciesModalProps = { const TreeSpeciesModal = ({ title, content, buttons }: TreeSpeciesModalProps) => (
- + {title}