-
-
{name}
-
{gradeStr}
+
-
+
+
+ {editMode &&
+
}
)
}
diff --git a/src/app/editArea/[slug]/general/page.tsx b/src/app/editArea/[slug]/general/page.tsx
index ea3adeb22..661b03209 100644
--- a/src/app/editArea/[slug]/general/page.tsx
+++ b/src/app/editArea/[slug]/general/page.tsx
@@ -1,7 +1,8 @@
import { notFound } from 'next/navigation'
import { validate } from 'uuid'
-import { ReactNode } from 'react'
import { Metadata } from 'next'
+import { FetchPolicy } from '@apollo/client'
+import { ArrowCircleRight } from '@phosphor-icons/react/dist/ssr'
import { AreaPageDataProps, getArea } from '@/js/graphql/getArea'
import { AreaNameForm } from './components/AreaNameForm'
@@ -10,7 +11,7 @@ import { AreaLatLngForm } from './components/AreaLatLngForm'
import { AddAreaForm } from './components/AddAreaForm'
import { AreaListForm } from './components/AreaList'
import { AreaTypeForm } from './components/AreaTypeForm'
-import { FetchPolicy } from '@apollo/client'
+import { PageContainer, SectionContainer } from '../components/EditAreaContainers'
// Opt out of caching for all data requests in the route segment
export const dynamic = 'force-dynamic'
@@ -38,30 +39,32 @@ export default async function AreaEditPage ({ params }: DashboardPageProps): Pro
metadata: { lat, lng, leaf }
} = area
+ const canAddClimbs = leaf && children.length === 0
+
return (
-
-
+
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
{!leaf &&
-
+
- }
-
+ }
+
+
+
+
+
Manage Climbs
+ {canAddClimbs
+ ? (
+
+ )
+ :
This area contains subareas. Please add climbs to areas designated as crags or boulders.
}
+
+
+
)
}
-export const PageContainer: React.FC<{ children: ReactNode, id: string }> = ({ id, children }) => (
-
-
-
-)
-
export const getPageDataForEdit = async (pageSlug: string, fetchPolicy?: FetchPolicy): Promise
=> {
if (pageSlug == null) notFound()
diff --git a/src/app/editArea/[slug]/layout.tsx b/src/app/editArea/[slug]/layout.tsx
index a22ad6932..e0a7dca30 100644
--- a/src/app/editArea/[slug]/layout.tsx
+++ b/src/app/editArea/[slug]/layout.tsx
@@ -34,7 +34,7 @@ export default async function EditAreaDashboardLayout ({
-
+
{children}
diff --git a/src/app/editArea/[slug]/loading.tsx b/src/app/editArea/[slug]/loading.tsx
index 3d4e9e9ec..0c8a5bdfd 100644
--- a/src/app/editArea/[slug]/loading.tsx
+++ b/src/app/editArea/[slug]/loading.tsx
@@ -1,14 +1,14 @@
-import { PageContainer } from './general/page'
+import { SectionContainer } from './components/EditAreaContainers'
/**
* Loading skeleton
*/
export default function Loading (): JSX.Element {
return (
-
+
-
+
)
}
diff --git a/src/app/editArea/[slug]/manageClimbs/components/AddClimbsForm.tsx b/src/app/editArea/[slug]/manageClimbs/components/AddClimbsForm.tsx
new file mode 100644
index 000000000..d35f44a5c
--- /dev/null
+++ b/src/app/editArea/[slug]/manageClimbs/components/AddClimbsForm.tsx
@@ -0,0 +1,62 @@
+'use client'
+import { useSession } from 'next-auth/react'
+import { WarningOctagon } from '@phosphor-icons/react/dist/ssr'
+import { useRouter } from 'next/navigation'
+
+import { SingleEntryForm } from 'app/editArea/[slug]/components/SingleEntryForm'
+import useUpdateClimbsCmd from '@/js/hooks/useUpdateClimbsCmd'
+import { DynamicClimbInputList } from './DynamicClimbInputList'
+import { GradeContexts } from '@/js/grades/Grade'
+import { defaultDisciplines } from '@/js/grades/util'
+import { IndividualClimbChangeInput } from '@/js/graphql/gql/contribs'
+
+export type QuickAddNewClimbProps =
+ Partial
&
+ Required>
+
+export interface AddClimbsFormData {
+ climbList: QuickAddNewClimbProps[]
+}
+
+/**
+ * Add new climbs to an area form
+ */
+export const AddClimbsForm: React.FC<{ parentAreaName: string, parentAreaUuid: string, gradeContext: GradeContexts, canAddClimbs: boolean }> = ({ parentAreaName, parentAreaUuid, gradeContext, canAddClimbs }) => {
+ const router = useRouter()
+ const session = useSession({ required: true })
+ const { updateClimbCmd } = useUpdateClimbsCmd(
+ {
+ parentId: parentAreaUuid,
+ accessToken: session?.data?.accessToken as string
+ }
+ )
+
+ return (
+
+ title={`Add climbs to ${parentAreaName} area`}
+ initialValues={{ climbList: [{ name: '', disciplines: defaultDisciplines() }] }}
+ validationMode='onSubmit'
+ ignoreIsValid
+ keepValuesAfterReset={false}
+ submitHandler={async (data) => {
+ const { climbList } = data
+ const changes = climbList.filter(el => el.name.trim() !== '')
+ await updateClimbCmd({ parentId: parentAreaUuid, changes })
+ router.refresh() // Ask Next to refresh props from the server
+ }}
+ >
+ {canAddClimbs
+ ?
+ : (
+
+
+ This area is either a crag or a boulder. Adding new child areas is not allowed.
+
+ )}
+
+
+ )
+}
diff --git a/src/app/editArea/[slug]/manageClimbs/components/ClimbListMiniToolbar.tsx b/src/app/editArea/[slug]/manageClimbs/components/ClimbListMiniToolbar.tsx
new file mode 100644
index 000000000..9573aeb27
--- /dev/null
+++ b/src/app/editArea/[slug]/manageClimbs/components/ClimbListMiniToolbar.tsx
@@ -0,0 +1,35 @@
+'use client'
+import { useSession } from 'next-auth/react'
+import { useRouter } from 'next/navigation'
+import { Trash } from '@phosphor-icons/react/dist/ssr'
+import useUpdateClimbsCmd from '@/js/hooks/useUpdateClimbsCmd'
+import Confirmation from '@/components/ui/micro/AlertDialogue'
+
+export const ClimbListMiniToolbar: React.FC<{ parentAreaId: string, climbId: string, climbName: string }> = ({ parentAreaId, climbId, climbName }) => {
+ const session = useSession({ required: true })
+ const router = useRouter()
+ const { deleteClimbsCmd } = useUpdateClimbsCmd({ parentId: parentAreaId, accessToken: session.data?.accessToken ?? '' })
+ const onConfirm = (): void => {
+ deleteClimbsCmd([climbId]).then((count) => {
+ router.refresh()
+ }).catch((error) => {
+ console.error(error)
+ })
+ }
+ return (
+
+
+ Delete
+
+ }
+ onConfirm={onConfirm}
+ >
+ You're about to delete climb "{climbName}". This cannot be undone.
+
+
+ )
+}
diff --git a/src/app/editArea/[slug]/manageClimbs/components/DisciplinesSelection.tsx b/src/app/editArea/[slug]/manageClimbs/components/DisciplinesSelection.tsx
new file mode 100644
index 000000000..13905060f
--- /dev/null
+++ b/src/app/editArea/[slug]/manageClimbs/components/DisciplinesSelection.tsx
@@ -0,0 +1,236 @@
+'use client'
+import { useState, useEffect } from 'react'
+import { UseFormReturn, useWatch } from 'react-hook-form'
+import clx from 'classnames'
+import { getScale } from '@openbeta/sandbag'
+
+import { BaseInput } from '@/components/ui/form/Input'
+import { ClimbDisciplineRecord, RulesType } from '@/js/types'
+import { CLIMB_ARRAY_FIELD_NAME } from './DynamicClimbInputList'
+import { defaultDisciplines } from '@/js/grades/util'
+import { GradeContexts, gradeContextToGradeScales } from '@/js/grades/Grade'
+import { AddClimbsFormData } from './AddClimbsForm'
+
+interface FieldArrayInputProps {
+ index: number
+ formContext: UseFormReturn
+ gradeContext: GradeContexts
+}
+
+/**
+ * Disciplines selection and grade input.
+ * When the climb name is not empty, at least one discipline must be selected.
+ */
+export const DisciplinesSelection: React.FC = ({ formContext, index, gradeContext }) => {
+ const { setValue, setError, clearErrors, formState: { errors } } = formContext
+ const fieldName = `${CLIMB_ARRAY_FIELD_NAME}[${index}].disciplines`
+
+ const disciplines: Partial = useWatch({ name: fieldName })
+ const climbName: string = useWatch({ name: `${CLIMB_ARRAY_FIELD_NAME}[${index}].name` })
+
+ const numberOfCheckedDisciplines = Object.values(disciplines).filter(el => el).length
+
+ useEffect(() => {
+ if (disciplines != null) {
+ const hasDiscipline = Object.values(disciplines).some(el => el)
+ if (hasDiscipline) {
+ // @ts-expect-error
+ clearErrors(fieldName)
+ } else if (climbName != null && climbName.trim() !== '') {
+ // @ts-expect-error
+ setError(fieldName, { type: 'custom', message: 'Please select at least one discipline.' })
+ }
+ }
+ }, [disciplines, climbName])
+
+ const clearAll = (): void => {
+ // @ts-expect-error
+ setValue(fieldName, defaultDisciplines())
+ }
+
+ const hasError = (errors?.climbList?.[index]?.disciplines ?? null) != null && (climbName?.trim() ?? '') !== ''
+
+ return (
+ <>
+
+
+
+
+
+
+ )
+}
+
+/**
+ * Checkbox for each discipline
+ */
+const Checkbox: React.FC<{ label: string, discipline: keyof ClimbDisciplineRecord } & Omit> = ({ label, index, discipline, formContext }) => {
+ const { register, watch } = formContext
+ const fieldName = `${CLIMB_ARRAY_FIELD_NAME}[${index}].disciplines.${discipline}` as keyof ClimbDisciplineRecord
+
+ // @ts-expect-error
+ const checked = watch(fieldName) as boolean
+
+ return (
+
+ )
+}
+
+/**
+ * Grade textbox
+ */
+const GradeInput: React.FC = ({ formContext, index, gradeContext }) => {
+ const [validationRules, setValidationRules] = useState()
+ const [gradeScale, setGradeScale] = useState>()
+
+ const { watch, formState: { errors } } = formContext
+
+ const fieldName = `${CLIMB_ARRAY_FIELD_NAME}[${index}].grade`
+ // @ts-expect-error
+ const disciplines = watch(`${CLIMB_ARRAY_FIELD_NAME}[${index}].disciplines`) as ClimbDisciplineRecord
+
+ useEffect(() => {
+ const rules = getGradeValationRules(gradeContext, disciplines)
+ setValidationRules(rules?.rules)
+ setGradeScale(rules?.scale)
+ }, [JSON.stringify(disciplines)])
+
+ const disciplinesError = errors?.climbList?.[index]?.grade?.message as string
+
+ const gradeScaleDisplay = gradeScale?.displayName?.toUpperCase() ?? 'Unknown'
+ return (
+
+
+
+
+
+
+ {fields.map((item, index) => {
+ return (
+ -
+ remove(removeIndex)}
+ />
+
+ )
+ })}
+
+
+
+
+
+
Entering more than one climb?
+
+
+
+
+
+
+
+
+
+ {count > 1 &&
+ }
+
+
+
+ {errorMsg != null && {errorMsg}}
+
+
+
+
+