From d4c8c3ab0a0092f2ba7747994ef9d8d6e634d296 Mon Sep 17 00:00:00 2001
From: Julian Waller <git@julusian.co.uk>
Date: Sun, 15 Dec 2024 15:58:01 +0000
Subject: [PATCH] feat: edit page names from panel list #3126
---
webui/src/Buttons/ButtonGridHeader.tsx | 2 +-
webui/src/Buttons/ButtonGridPanel.tsx | 2 +-
webui/src/Buttons/EditPageProperties.tsx | 35 +++++++++++++-----------
webui/src/Buttons/Pages.tsx | 25 +++++++++++++----
webui/src/Buttons/PagesAddModal.tsx | 8 ++----
5 files changed, 43 insertions(+), 29 deletions(-)
diff --git a/webui/src/Buttons/ButtonGridHeader.tsx b/webui/src/Buttons/ButtonGridHeader.tsx
index 391f732aae..61b5c446e2 100644
--- 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
index cbd17bf4d2..cf0014db1a 100644
--- 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
index 627c798eea..256fab4b19 100644
--- 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
index 4c3d8a5a39..4d2cbfa1c7 100644
--- a/webui/src/Buttons/Pages.tsx
+++ b/webui/src/Buttons/Pages.tsx
@@ -2,7 +2,7 @@ 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'
@@ -10,6 +10,7 @@ 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
index b56b298ef8..ad64585de0 100644
--- 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>