sartography
/
spiff-arena
mirror of https://github.com/sartography/spiff-arena.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

add process model file name validation for new files w/ burnettk

This commit is contained in:
jasquat 2023-01-24 11:35:30 -05:00
parent 4e0ddc7ea5
commit c2a4d8480b
2 changed files with 41 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
spiffworkflow-frontend/src/index.css
View File

@ -173,6 +173,10 @@ h1.with-icons {
margin-top: 1.3em; margin-top: 1.3em;
} }
.with-top-margin-for-label-next-to-text-input {
margin-top: 2.3em;
}
.with-tiny-top-margin { .with-tiny-top-margin {
margin-top: 4px; margin-top: 4px;
} }

48
spiffworkflow-frontend/src/routes/ProcessModelEditDiagram.tsx
View File

@ -14,6 +14,9 @@ import {
Tab, Tab,
TabPanels, TabPanels,
TabPanel, TabPanel,
TextInput,
Grid,
Column,
// @ts-ignore // @ts-ignore
} from '@carbon/react'; } from '@carbon/react';
import Row from 'react-bootstrap/Row'; import Row from 'react-bootstrap/Row';
@ -60,6 +63,8 @@ export default function ProcessModelEditDiagram() {
const [processes, setProcesses] = useState<ProcessReference[]>([]); const [processes, setProcesses] = useState<ProcessReference[]>([]);
const [displaySaveFileMessage, setDisplaySaveFileMessage] = const [displaySaveFileMessage, setDisplaySaveFileMessage] =
useState<boolean>(false); useState<boolean>(false);
const [processModelFileInvalidText, setProcessModelFileInvalidText] =
useState<string>('');
const handleShowMarkdownEditor = () => setShowMarkdownEditor(true); const handleShowMarkdownEditor = () => setShowMarkdownEditor(true);
@ -160,6 +165,7 @@ export default function ProcessModelEditDiagram() {
const handleFileNameCancel = () => { const handleFileNameCancel = () => {
setShowFileNameEditor(false); setShowFileNameEditor(false);
setNewFileName(''); setNewFileName('');
setProcessModelFileInvalidText('');
}; };
const navigateToProcessModelFile = (_result: any) => { const navigateToProcessModelFile = (_result: any) => {
@ -251,6 +257,11 @@ export default function ProcessModelEditDiagram() {
const handleFileNameSave = (event: any) => { const handleFileNameSave = (event: any) => {
event.preventDefault(); event.preventDefault();
if (!newFileName) {
setProcessModelFileInvalidText('Process Model file name is required.');
return;
}
setProcessModelFileInvalidText('');
setShowFileNameEditor(false); setShowFileNameEditor(false);
saveDiagram(bpmnXmlForDiagramRendering); saveDiagram(bpmnXmlForDiagramRendering);
}; };
@ -267,17 +278,32 @@ export default function ProcessModelEditDiagram() {
onRequestSubmit={handleFileNameSave} onRequestSubmit={handleFileNameSave}
onRequestClose={handleFileNameCancel} onRequestClose={handleFileNameCancel}
> >
<label>File Name:</label> <Grid
<span> condensed
<input fullWidth
name="file_name" className="megacondensed process-model-files-section"
type="text" >
value={newFileName} <Column md={4} lg={8} sm={4}>
onChange={(e) => setNewFileName(e.target.value)} <TextInput
autoFocus id="process_model_file_name"
/> labelText="File Name:"
{fileExtension} value={newFileName}
</span> onChange={(e: any) => setNewFileName(e.target.value)}
invalidText={processModelFileInvalidText}
invalid={!!processModelFileInvalidText}
size="sm"
autoFocus
/>
</Column>
<Column
md={4}
lg={8}
sm={4}
className="with-top-margin-for-label-next-to-text-input"
>
{fileExtension}
</Column>
</Grid>
</Modal> </Modal>
); );
}; };