fix: unable to import pages above the current page count #3126

bitfocus · Dec 15, 2024 · a2ab7fc · a2ab7fc
1 parent d4c8c3a
commit a2ab7fc
Show file tree

Hide file tree

Showing 4 changed files with 68 additions and 32 deletions.
diff --git a/webui/src/Buttons/ActionRecorder/ButtonPicker.tsx b/webui/src/Buttons/ActionRecorder/ButtonPicker.tsx
@@ -28,7 +28,7 @@ interface ButtonPickerProps {
 export const ButtonPicker = observer(function ButtonPicker({ selectButton }: ButtonPickerProps) {
 	const { socket, pages, userConfig } = useContext(RootAppStoreContext)
 
-	const { pageNumber, setPageNumber, changePage } = usePagePicker(pages, 1)
+	const { pageNumber, setPageNumber, changePage } = usePagePicker(pages.data.length, 1)
 
 	const [selectedLocation, setSelectedLocation] = useState<ControlLocation | null>(null)
 	const [selectedStep, setSelectedStep] = useState<string | null>(null)

diff --git a/webui/src/Buttons/ButtonGridHeader.tsx b/webui/src/Buttons/ButtonGridHeader.tsx
@@ -7,10 +7,6 @@ import { RootAppStoreContext } from '../Stores/RootAppStore.js'
 import { observer } from 'mobx-react-lite'
 import { useComputed } from '../util.js'
 
-interface SelectOption {
-	value: number
-	label: string
-}
 interface ButtonGridHeaderProps {
 	pageNumber: number
 	changePage?: (delta: number) => void
@@ -27,8 +23,48 @@ export const ButtonGridHeader = observer(function ButtonGridHeader({
 }: React.PropsWithChildren<ButtonGridHeaderProps>) {
 	const { pages: pagesStore } = useContext(RootAppStoreContext)
 
+	const pageOptions = useComputed(() => {
+		const pageOptions: PageNumberOption[] = pagesStore.data.map((value, index) => ({
+			value: index + 1,
+			label: value.name ? `${index + 1} (${value.name})` : `${index + 1}`,
+		}))
+
+		if (newPageAtEnd) {
+			pageOptions.push({
+				value: -1,
+				label: `Insert new page`,
+			})
+		}
+		return pageOptions
+	}, [pagesStore, newPageAtEnd])
+
+	return (
+		<PageNumberPicker pageNumber={pageNumber} changePage={changePage} setPage={setPage} pageOptions={pageOptions}>
+			{children}
+		</PageNumberPicker>
+	)
+})
+
+export interface PageNumberOption {
+	value: number
+	label: string
+}
+interface PageNumberPickerProps {
+	pageNumber: number
+	changePage?: (delta: number) => void
+	setPage?: (page: number) => void
+	pageOptions: PageNumberOption[]
+}
+
+export const PageNumberPicker = observer(function ButtonGridHeader({
+	pageNumber,
+	changePage,
+	setPage,
+	pageOptions,
+	children,
+}: React.PropsWithChildren<PageNumberPickerProps>) {
 	const inputChange = useCallback(
-		(val: SelectOption | null) => {
+		(val: PageNumberOption | null) => {
 			const val2 = val?.value
 			if (val2 !== undefined && setPage && !isNaN(val2)) {
 				setPage(val2)
@@ -44,22 +80,7 @@ export const ButtonGridHeader = observer(function ButtonGridHeader({
 		changePage?.(-1)
 	}, [changePage])
 
-	const pageOptions = useComputed(() => {
-		const pageOptions: SelectOption[] = pagesStore.data.map((value, index) => ({
-			value: index + 1,
-			label: value.name ? `${index + 1} (${value.name})` : `${index + 1}`,
-		}))
-
-		if (newPageAtEnd) {
-			pageOptions.push({
-				value: -1,
-				label: `Insert new page`,
-			})
-		}
-		return pageOptions
-	}, [pagesStore, newPageAtEnd])
-
-	const currentValue: SelectOption | undefined = useMemo(() => {
+	const currentValue: PageNumberOption | undefined = useMemo(() => {
 		return (
 			pageOptions.find((o) => o.value == pageNumber) ?? {
 				value: pageNumber,
@@ -74,7 +95,7 @@ export const ButtonGridHeader = observer(function ButtonGridHeader({
 				<CButton color="dark" hidden={!changePage} onClick={prevPage}>
 					<FontAwesomeIcon icon={faChevronLeft} />
 				</CButton>
-				<Select<SelectOption>
+				<Select<PageNumberOption>
 					className="button-page-input"
 					isDisabled={!setPage}
 					placeholder={pageNumber}

diff --git a/webui/src/Hooks/usePagePicker.ts b/webui/src/Hooks/usePagePicker.ts
@@ -1,12 +1,10 @@
 import { useCallback, useState } from 'react'
-import type { PagesStore } from '../Stores/PagesStore.js'
 
-export function usePagePicker(pagesStore: PagesStore, initialPage: number) {
+export function usePagePicker(pageCount: number, initialPage: number) {
 	const [pageNumber, setPageNumber] = useState(Number(initialPage))
 
 	const changePage = useCallback(
 		(delta: number) => {
-			const pageCount = pagesStore.data.length
 			setPageNumber((pageNumber) => {
 				let newPage = pageNumber + delta
 				if (newPage < 1) newPage += pageCount
@@ -15,7 +13,7 @@ export function usePagePicker(pagesStore: PagesStore, initialPage: number) {
 				return newPage
 			})
 		},
-		[pagesStore]
+		[pageCount]
 	)
 
 	return {

diff --git a/webui/src/ImportExport/Import/Page.tsx b/webui/src/ImportExport/Import/Page.tsx
@@ -1,7 +1,7 @@
 import React, { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react'
 import { CButton, CCol, CRow, CFormSelect } from '@coreui/react'
 import { MyErrorBoundary, SocketContext, socketEmitPromise } from '../../util.js'
-import { ButtonGridHeader } from '../../Buttons/ButtonGridHeader.js'
+import { ButtonGridHeader, PageNumberOption, PageNumberPicker } from '../../Buttons/ButtonGridHeader.js'
 import { usePagePicker } from '../../Hooks/usePagePicker.js'
 import {
 	ButtonGridIcon,
@@ -37,12 +37,28 @@ export const ImportPageWizard = observer(function ImportPageWizard({
 
 	const isSinglePage = snapshot.type === 'page'
 
-	const { pageNumber, setPageNumber, changePage } = usePagePicker(pages, 1)
+	const [snapshotPageOptions, pageCount] = useMemo(() => {
+		const snapshotPageOptions: PageNumberOption[] = []
+		let pageCount = 0
+		for (const [pageNumber, pageInfo] of Object.entries(snapshot.pages ?? {})) {
+			const pageNumberInt = parseInt(pageNumber)
+			pageCount = Math.max(pageCount, pageNumberInt)
+
+			snapshotPageOptions.push({
+				value: pageNumberInt,
+				label: pageInfo.name ? `${pageNumberInt} (${pageInfo.name})` : `${pageNumberInt}`,
+			})
+		}
+
+		return [snapshotPageOptions, pageCount]
+	}, [snapshot.pages])
+
+	const { pageNumber, setPageNumber, changePage } = usePagePicker(pages.data.length, 1)
 	const {
 		pageNumber: importPageNumber,
 		setPageNumber: setImportPageNumber,
 		changePage: changeImportPage,
-	} = usePagePicker(pages, 1)
+	} = usePagePicker(pageCount, 1)
 
 	const setConnectionRemap2 = useCallback(
 		(fromId: string, toId: string) => {
@@ -86,15 +102,16 @@ export const ImportPageWizard = observer(function ImportPageWizard({
 				<MyErrorBoundary>
 					<>
 						<CCol sm={12}>
-							<ButtonGridHeader
+							<PageNumberPicker
 								pageNumber={isSinglePage ? (snapshot.oldPageNumber ?? 1) : importPageNumber}
 								changePage={isSinglePage ? undefined : changeImportPage}
 								setPage={isSinglePage ? undefined : setImportPageNumber}
+								pageOptions={snapshotPageOptions}
 							>
 								<CButton color="light" className="btn-right" title="Home Position" onClick={resetSourcePosition}>
 									<FontAwesomeIcon icon={faHome} />
 								</CButton>
-							</ButtonGridHeader>
+							</PageNumberPicker>
 						</CCol>
 						<div className="buttongrid" ref={hasBeenRenderedRef}>
 							{hasBeenRendered && sourceGridSize && (