feat: edit page names from panel list #3126

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

Hide file tree

Showing 5 changed files with 43 additions and 29 deletions.
diff --git a/webui/src/Buttons/ButtonGridHeader.tsx b/webui/src/Buttons/ButtonGridHeader.tsx
@@ -47,7 +47,7 @@ export const ButtonGridHeader = observer(function ButtonGridHeader({
 	const pageOptions = useComputed(() => {
 		const pageOptions: SelectOption[] = pagesStore.data.map((value, index) => ({
 			value: index + 1,
-			label: `${index + 1} (${value.name})`,
+			label: value.name ? `${index + 1} (${value.name})` : `${index + 1}`,
 		}))
 
 		if (newPageAtEnd) {

diff --git a/webui/src/Buttons/ButtonGridPanel.tsx b/webui/src/Buttons/ButtonGridPanel.tsx
@@ -136,7 +136,7 @@ export const ButtonsGridPanel = observer(function ButtonsPage({
 		<KeyReceiver onKeyDown={onKeyDown} tabIndex={0} className="button-grid-panel">
 			<div className="button-grid-panel-header" ref={isInViewRef}>
 				<ConfirmExportModal ref={exportModalRef} title="Export Page" />
-				<EditPagePropertiesModal ref={editRef} />
+				<EditPagePropertiesModal ref={editRef} includeName />
 
 				<h4>Buttons</h4>
 				<p style={{ marginBottom: '0.5rem' }}>

diff --git a/webui/src/Buttons/EditPageProperties.tsx b/webui/src/Buttons/EditPageProperties.tsx
@@ -18,11 +18,11 @@ export interface EditPagePropertiesModalRef {
 	show(pageNumber: number, pageInfo: PagesStoreModel | undefined): void
 }
 interface EditPagePropertiesModalProps {
-	// Nothing
+	includeName: boolean
 }
 
 export const EditPagePropertiesModal = forwardRef<EditPagePropertiesModalRef, EditPagePropertiesModalProps>(
-	function EditPagePropertiesModal(_props, ref) {
+	function EditPagePropertiesModal({ includeName }, ref) {
 		const socket = useContext(SocketContext)
 		const [pageNumber, setPageNumber] = useState<number | null>(null)
 		const [show, setShow] = useState(false)
@@ -80,20 +80,23 @@ export const EditPagePropertiesModal = forwardRef<EditPagePropertiesModalRef, Ed
 				</CModalHeader>
 				<CModalBody>
 					<CForm onSubmit={doAction}>
-						<CRow className="mb-3">
-							<CFormLabel htmlFor="colFormName" className="col-sm-3 col-form-label col-form-label-sm">
-								Name
-							</CFormLabel>
-							<CCol sm={9}>
-								<CFormInput
-									ref={inputRef}
-									name="colFormName"
-									type="text"
-									value={pageName || ''}
-									onChange={onNameChange}
-								/>
-							</CCol>
-						</CRow>
+						{includeName && (
+							<CRow className="mb-3">
+								<CFormLabel htmlFor="colFormName" className="col-sm-3 col-form-label col-form-label-sm">
+									Name
+								</CFormLabel>
+								<CCol sm={9}>
+									<CFormInput
+										ref={inputRef}
+										name="colFormName"
+										type="text"
+										value={pageName || ''}
+										onChange={onNameChange}
+									/>
+								</CCol>
+							</CRow>
+						)}
+						{/* TODO: more fields should be added here */}
 					</CForm>
 				</CModalBody>
 				<CModalFooter>

diff --git a/webui/src/Buttons/Pages.tsx b/webui/src/Buttons/Pages.tsx
@@ -2,14 +2,15 @@ import React, { useCallback, useContext, useRef } from 'react'
 import { CButton, CButtonGroup, CCol, CRow } from '@coreui/react'
 import { socketEmitPromise } from '../util.js'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faPlus, faTrash, faPencil, faSort, faShareFromSquare } from '@fortawesome/free-solid-svg-icons'
+import { faPlus, faTrash, faSort, faShareFromSquare } from '@fortawesome/free-solid-svg-icons'
 import { GenericConfirmModal, GenericConfirmModalRef } from '../Components/GenericConfirmModal.js'
 import { EditPagePropertiesModal, EditPagePropertiesModalRef } from './EditPageProperties.js'
 import { AddPagesModal, AddPagesModalRef } from './PagesAddModal.js'
 import { RootAppStoreContext } from '../Stores/RootAppStore.js'
 import { observer } from 'mobx-react-lite'
 import { PagesStoreModel } from '../Stores/PagesStore.js'
 import { useDrag, useDrop } from 'react-dnd'
+import { TextInputField } from '../Components/TextInputField.js'
 
 interface PagesListProps {
 	setPageNumber: (page: number) => void
@@ -80,7 +81,7 @@ export const PagesList = observer(function PagesList({ setPageNumber }: PagesLis
 				<CCol xs={12}>
 					<GenericConfirmModal ref={deleteRef} />
 					<AddPagesModal ref={addRef} />
-					<EditPagePropertiesModal ref={editRef} />
+					<EditPagePropertiesModal ref={editRef} includeName={false} />
 
 					<table className="table table-responsive-sm pages-list-table">
 						<thead>
@@ -154,12 +155,21 @@ const PageListRow = observer(function PageListRow({
 	info,
 	pageCount,
 	goToPage,
-	configurePage,
+	// configurePage,
 	doInsertPage,
 	doDeletePage,
 }: PageListRowProps) {
 	const { socket } = useContext(RootAppStoreContext)
 
+	const changeName = useCallback(
+		(newName: string) => {
+			socketEmitPromise(socket, 'pages:set-name', [pageNumber, newName ?? '']).catch((e) => {
+				console.error('Failed to set name', e)
+			})
+		},
+		[socket, pageNumber]
+	)
+
 	const ref = useRef<HTMLTableRowElement>(null)
 	const [, drop] = useDrop<PageListDragItem>({
 		accept: PAGE_LIST_DRAG_ID,
@@ -207,13 +217,16 @@ const PageListRow = observer(function PageListRow({
 				<FontAwesomeIcon icon={faSort} />
 			</td>
 			<td style={{ width: 80, textAlign: 'center', fontWeight: 'bold' }}>{pageNumber}</td>
-			<td>{info.name ?? ''}</td>
+			<td>
+				<TextInputField value={info.name ?? ''} setValue={changeName} placeholder="Unnamed page" />
+			</td>
 			<td style={{ width: 100, textAlign: 'right' }}>
 				<CButtonGroup>
 					<CButton color="secondary" size="sm" onClick={goToPage} title="Jump to page" data-page={pageNumber}>
 						<FontAwesomeIcon icon={faShareFromSquare} />
 					</CButton>
-					<CButton
+					{/* <CButton
+						TODO: for future use, once the modal has more properties
 						color="info"
 						size="sm"
 						onClick={configurePage}
@@ -222,7 +235,7 @@ const PageListRow = observer(function PageListRow({
 						data-page-info={JSON.stringify(info)}
 					>
 						<FontAwesomeIcon icon={faPencil} />
-					</CButton>
+					</CButton> */}
 					<CButton color="warning" size="sm" onClick={doInsertPage} title="Insert page above" data-page={pageNumber}>
 						<FontAwesomeIcon icon={faPlus} />
 					</CButton>

diff --git a/webui/src/Buttons/PagesAddModal.tsx b/webui/src/Buttons/PagesAddModal.tsx
@@ -12,8 +12,6 @@ export interface AddPagesModalRef {
 	show(beforePageNumber: number): void
 }
 
-const DEFAULT_PAGE_NAME = 'New Page'
-
 interface ModalState {
 	show: boolean
 
@@ -25,7 +23,7 @@ const defaultState: ModalState = {
 	show: false,
 
 	beforePage: 1,
-	names: [DEFAULT_PAGE_NAME],
+	names: [''],
 }
 
 export const AddPagesModal = forwardRef<AddPagesModalRef, AddPagesModalProps>(function AddPagesModal({}, ref) {
@@ -90,7 +88,7 @@ export const AddPagesModal = forwardRef<AddPagesModalRef, AddPagesModalProps>(fu
 		if (!isNaN(pageNumber)) {
 			setState((oldState) => {
 				const newNames = [...oldState.names]
-				newNames.splice(pageNumber, 0, DEFAULT_PAGE_NAME)
+				newNames.splice(pageNumber, 0, '')
 				return { ...oldState, names: newNames }
 			})
 		}
@@ -176,7 +174,7 @@ function AddPageRow({ index, name, canDelete, changeName, doInsertPage, doDelete
 	return (
 		<tr>
 			<td>
-				<CFormInput type="text" value={name} onChange={changeName} data-page={index} />
+				<CFormInput type="text" value={name} onChange={changeName} data-page={index} placeholder="Unnamed page" />
 			</td>
 			<td style={{ width: 50, textAlign: 'right' }}>
 				<CButtonGroup>