From 0f22935f02c60f943415854e836d3d788f8433ff Mon Sep 17 00:00:00 2001 From: Viet Nguyen <3805254+vnugent@users.noreply.github.com> Date: Thu, 22 Feb 2024 16:37:35 -0700 Subject: [PATCH] fix: disable coordinates edit for non-leaf areas (#1102) * fix: disable coordinates field for non-leaf area * refactor: move navbar files to component dir --- .../[slug]/components/AreaAttributesPanel.tsx | 58 +++++++++++++++++++ .../[slug]/{ => components}/SidebarNav.tsx | 29 ++++++++-- .../general/components/AreaLatLngForm.tsx | 17 +++--- .../editArea/[slug]/general/page.tsx | 2 +- src/app/(default)/editArea/[slug]/layout.tsx | 14 ++++- src/components/ui/form/Input.tsx | 2 +- 6 files changed, 106 insertions(+), 16 deletions(-) create mode 100644 src/app/(default)/editArea/[slug]/components/AreaAttributesPanel.tsx rename src/app/(default)/editArea/[slug]/{ => components}/SidebarNav.tsx (75%) diff --git a/src/app/(default)/editArea/[slug]/components/AreaAttributesPanel.tsx b/src/app/(default)/editArea/[slug]/components/AreaAttributesPanel.tsx new file mode 100644 index 000000000..2ae711053 --- /dev/null +++ b/src/app/(default)/editArea/[slug]/components/AreaAttributesPanel.tsx @@ -0,0 +1,58 @@ +'use client' +import { EntityIcon, EType } from '../general/components/AreaItem' +import { SidebarNavProps } from './SidebarNav' + +/** + * Show area attributes in a small panel + */ +export const AreaAttributesPanel: React.FC> = ({ canAddAreas, canAddClimbs, areaCount, climbCount, isLeaf, isBoulder }) => { + let type: EType + if (isLeaf) { + type = isBoulder ? 'boulder' : 'crag' + } else { + type = 'area' + } + return ( +
+

Area attributes

+ +
+
+ +
+ Entity type +
+ +
+ +
+ Crag {booleanToYesNo(isLeaf)} +
+
+ Boulder {booleanToYesNo(isBoulder)} +
+ +
+ +
+ Child areas {areaCount} +
+
+ Climbs {climbCount} +
+ +
+ +
+ Can add child areas? {booleanToYesNo(canAddAreas)} +
+
+ Can add climbs? {booleanToYesNo(canAddClimbs)} +
+
+
+
+ ) +} + +const booleanToYesNo = (bool: boolean): string => bool ? 'YES' : 'NO' diff --git a/src/app/(default)/editArea/[slug]/SidebarNav.tsx b/src/app/(default)/editArea/[slug]/components/SidebarNav.tsx similarity index 75% rename from src/app/(default)/editArea/[slug]/SidebarNav.tsx rename to src/app/(default)/editArea/[slug]/components/SidebarNav.tsx index 6b97644a5..00367807c 100644 --- a/src/app/(default)/editArea/[slug]/SidebarNav.tsx +++ b/src/app/(default)/editArea/[slug]/components/SidebarNav.tsx @@ -2,12 +2,22 @@ import clx from 'classnames' import { usePathname } from 'next/navigation' import { Article, Plus } from '@phosphor-icons/react/dist/ssr' -import { EntityIcon } from './general/components/AreaItem' +import { EntityIcon } from '../general/components/AreaItem' +import { AreaAttributesPanel } from './AreaAttributesPanel' +export interface SidebarNavProps { + slug: string + canAddAreas: boolean + canAddClimbs: boolean + areaCount: number + climbCount: number + isLeaf: boolean + isBoulder: boolean +} /** * Sidebar navigation for area edit */ -export const SidebarNav: React.FC<{ slug: string, canAddAreas: boolean, canAddClimbs: boolean }> = ({ slug, canAddAreas, canAddClimbs }) => { +export const SidebarNav: React.FC = ({ slug, canAddAreas, canAddClimbs, areaCount, climbCount, isLeaf, isBoulder }) => { const activePath = usePathname() /** * Disable menu item's hover/click when own page is showing @@ -54,7 +64,7 @@ export const SidebarNav: React.FC<{ slug: string, canAddAreas: boolean, canAddCl -
+
+ +
+ +
) diff --git a/src/app/(default)/editArea/[slug]/general/components/AreaLatLngForm.tsx b/src/app/(default)/editArea/[slug]/general/components/AreaLatLngForm.tsx index def7493fc..051955d19 100644 --- a/src/app/(default)/editArea/[slug]/general/components/AreaLatLngForm.tsx +++ b/src/app/(default)/editArea/[slug]/general/components/AreaLatLngForm.tsx @@ -7,7 +7,7 @@ import { DashboardInput } from '@/components/ui/form/Input' import useUpdateAreasCmd from '@/js/hooks/useUpdateAreasCmd' import { parseLatLng } from '@/components/crag/cragSummary' -export const AreaLatLngForm: React.FC<{ initLat: number, initLng: number, uuid: string }> = ({ uuid, initLat, initLng }) => { +export const AreaLatLngForm: React.FC<{ initLat: number, initLng: number, uuid: string, isLeaf: boolean }> = ({ uuid, initLat, initLng, isLeaf }) => { const session = useSession({ required: true }) const { updateOneAreaCmd } = useUpdateAreasCmd({ areaId: uuid, @@ -29,12 +29,15 @@ export const AreaLatLngForm: React.FC<{ initLat: number, initLng: number, uuid: } }} > - + {isLeaf + ? () + : (

Coordinates field available only when area type is either 'Crag' or 'Boulder'.

)} ) } diff --git a/src/app/(default)/editArea/[slug]/general/page.tsx b/src/app/(default)/editArea/[slug]/general/page.tsx index 661b03209..671bbfa41 100644 --- a/src/app/(default)/editArea/[slug]/general/page.tsx +++ b/src/app/(default)/editArea/[slug]/general/page.tsx @@ -52,7 +52,7 @@ export default async function AreaEditPage ({ params }: DashboardPageProps): Pro - + diff --git a/src/app/(default)/editArea/[slug]/layout.tsx b/src/app/(default)/editArea/[slug]/layout.tsx index 6adce5cf3..b2d344e7c 100644 --- a/src/app/(default)/editArea/[slug]/layout.tsx +++ b/src/app/(default)/editArea/[slug]/layout.tsx @@ -1,5 +1,5 @@ import { ArrowUUpLeft } from '@phosphor-icons/react/dist/ssr' -import { SidebarNav } from './SidebarNav' +import { SidebarNav } from './components/SidebarNav' import { getPageDataForEdit } from './general/page' import { AreaCrumbs } from '@/components/breadcrumbs/AreaCrumbs' import { getAreaPageFriendlyUrl } from '@/js/utils' @@ -16,7 +16,7 @@ export default async function EditAreaDashboardLayout ({ children: React.ReactNode params: { slug: string } }): Promise { - const { area: { uuid, pathTokens, ancestors, areaName, metadata: { leaf } } } = await getPageDataForEdit(params.slug) + const { area: { uuid, pathTokens, ancestors, areaName, children: subAreas, climbs, metadata: { leaf, isBoulder } } } = await getPageDataForEdit(params.slug) return (
@@ -34,7 +34,15 @@ export default async function EditAreaDashboardLayout ({
- +
{children}
diff --git a/src/components/ui/form/Input.tsx b/src/components/ui/form/Input.tsx index 554374ec9..baa30f7ac 100644 --- a/src/components/ui/form/Input.tsx +++ b/src/components/ui/form/Input.tsx @@ -33,7 +33,7 @@ export const BaseInput: React.FC = ({ label, name, placeholder = {...inputProps} type={type} placeholder={placeholder} - className={clx(classDefault, className)} + className={clx(classDefault, className, readOnly && 'cursor-not-allowed bg-base-200 focus:ring-0')} aria-label={label} aria-describedby={`${name}-helper`} disabled={disabled}