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

change action dropdown direction based on if it is the last one or not

This commit is contained in:
jasquat 2022-11-08 09:00:51 -05:00
parent 7bdc052053
commit ceae23559f
1 changed files with 115 additions and 107 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

222
spiffworkflow-frontend/src/routes/ProcessModelShow.tsx
View File

@ -147,9 +147,7 @@ export default function ProcessModelShow() {
<p> <p>
Process Instance {processInstanceId} kicked off ( Process Instance {processInstanceId} kicked off (
<Link <Link
to={`/admin/process-models/${processModel.process_group_id}/${ to={`/admin/process-models/${processModel.process_group_id}/${processModel.id}/process-instances/${processInstanceId}`}
(processModel as any).id
}/process-instances/${processInstanceId}`}
data-qa="process-instance-show-link" data-qa="process-instance-show-link"
> >
view view
@ -188,82 +186,98 @@ export default function ProcessModelShow() {
}; };
const processModelFileList = () => { const processModelFileList = () => {
if (!processModel) {
return null;
}
let constructedTag; let constructedTag;
const tags = (processModel as any).files.map((processModelFile: any) => { const tags = processModel.files.map(
const items: ProcessModelFileCarbonDropdownItem[] = [ (processModelFile: any, index: number) => {
{ const isPrimaryBpmnFile =
label: 'Delete', processModelFile.name === processModel.primary_file_name;
action: 'delete', const items: ProcessModelFileCarbonDropdownItem[] = [
processModelFile, {
}, label: 'Delete',
{ action: 'delete',
label: 'Mark as Primary', processModelFile,
action: 'mark_as_primary', },
processModelFile, ];
}, if (processModelFile.name.match(/\.bpmn$/) && !isPrimaryBpmnFile) {
]; items.push({
const actionsTableCell = ( label: 'Mark as Primary',
<TableCell key={`${processModelFile.name}-cell`}> action: 'mark_as_primary',
<Dropdown processModelFile,
id="default" });
direction="top"
label="Select an action"
onChange={(e: any) => {
onProcessModelFileAction(e);
}}
items={items}
itemToString={(item: ProcessModelFileCarbonDropdownItem) =>
item ? item.label : ''
}
/>
</TableCell>
);
if (processModelFile.name.match(/\.(dmn|bpmn)$/)) {
let primarySuffix = '';
if (processModelFile.name === (processModel as any).primary_file_name) {
primarySuffix = '- Primary File';
} }
constructedTag = (
<TableRow key={processModelFile.name}> let actionDropDirection = 'bottom';
<TableCell key={`${processModelFile.name}-cell`}> if (index + 1 === processModel.files.length) {
<Link actionDropDirection = 'top';
to={`/admin/process-models/${ }
(processModel as any).process_group_id
}/${(processModel as any).id}/files/${processModelFile.name}`} // The dropdown will get covered up if it extends passed the table container.
> // Using bottom direction at least gives a scrollbar so use that and hopefully
// carbon will give access to z-index at some point.
// https://github.com/carbon-design-system/carbon-addons-iot-react/issues/1487
const actionsTableCell = (
<TableCell key={`${processModelFile.name}-cell`}>
<Dropdown
id="default"
direction={actionDropDirection}
label="Select an action"
onChange={(e: any) => {
onProcessModelFileAction(e);
}}
items={items}
itemToString={(item: ProcessModelFileCarbonDropdownItem) =>
item ? item.label : ''
}
/>
</TableCell>
);
if (processModelFile.name.match(/\.(dmn|bpmn)$/)) {
let primarySuffix = '';
if (isPrimaryBpmnFile) {
primarySuffix = '- Primary File';
}
constructedTag = (
<TableRow key={processModelFile.name}>
<TableCell key={`${processModelFile.name}-cell`}>
<Link
to={`/admin/process-models/${processModel.process_group_id}/${processModel.id}/files/${processModelFile.name}`}
>
{processModelFile.name}
</Link>
{primarySuffix}
</TableCell>
{actionsTableCell}
</TableRow>
);
} else if (processModelFile.name.match(/\.(json|md)$/)) {
constructedTag = (
<TableRow key={processModelFile.name}>
<TableCell key={`${processModelFile.name}-cell`}>
<Link
to={`/admin/process-models/${processModel.process_group_id}/${processModel.id}/form/${processModelFile.name}`}
>
{processModelFile.name}
</Link>
</TableCell>
{actionsTableCell}
</TableRow>
);
} else {
constructedTag = (
<TableRow key={processModelFile.name}>
<TableCell key={`${processModelFile.name}-cell`}>
{processModelFile.name} {processModelFile.name}
</Link> </TableCell>
{primarySuffix} </TableRow>
</TableCell> );
{actionsTableCell} }
</TableRow> return constructedTag;
);
} else if (processModelFile.name.match(/\.(json|md)$/)) {
constructedTag = (
<TableRow key={processModelFile.name}>
<TableCell key={`${processModelFile.name}-cell`}>
<Link
to={`/admin/process-models/${
(processModel as any).process_group_id
}/${(processModel as any).id}/form/${processModelFile.name}`}
>
{processModelFile.name}
</Link>
</TableCell>
{actionsTableCell}
</TableRow>
);
} else {
constructedTag = (
<TableRow key={processModelFile.name}>
<TableCell key={`${processModelFile.name}-cell`}>
{processModelFile.name}
</TableCell>
</TableRow>
);
} }
return constructedTag; );
});
// return <ul>{tags}</ul>; // return <ul>{tags}</ul>;
const headers = ['Name', 'Actions']; const headers = ['Name', 'Actions'];
@ -284,13 +298,14 @@ export default function ProcessModelShow() {
}; };
const processInstancesUl = () => { const processInstancesUl = () => {
if (!processModel) {
return null;
}
return ( return (
<ul> <ul>
<li> <li>
<Link <Link
to={`/admin/process-instances?process_group_identifier=${ to={`/admin/process-instances?process_group_identifier=${processModel.process_group_id}&process_model_identifier=${processModel.id}`}
(processModel as any).process_group_id
}&process_model_identifier=${(processModel as any).id}`}
data-qa="process-instance-list-link" data-qa="process-instance-list-link"
> >
List List
@ -298,9 +313,7 @@ export default function ProcessModelShow() {
</li> </li>
<li> <li>
<Link <Link
to={`/admin/process-models/${ to={`/admin/process-models/${processModel.process_group_id}/${processModel.id}/process-instances/reports`}
(processModel as any).process_group_id
}/${(processModel as any).id}/process-instances/reports`}
data-qa="process-instance-reports-link" data-qa="process-instance-reports-link"
> >
Reports Reports
@ -315,20 +328,20 @@ export default function ProcessModelShow() {
}; };
const handleFileUpload = (event: any) => { const handleFileUpload = (event: any) => {
event.preventDefault(); if (processModel) {
const url = `/process-models/${(processModel as any).process_group_id}/${ event.preventDefault();
(processModel as any).id const url = `/process-models/${processModel.process_group_id}/${processModel.id}/files`;
}/files`; const formData = new FormData();
const formData = new FormData(); formData.append('file', filesToUpload[0]);
formData.append('file', filesToUpload[0]); formData.append('fileName', filesToUpload[0].name);
formData.append('fileName', filesToUpload[0].name); HttpService.makeCallToBackend({
HttpService.makeCallToBackend({ path: url,
path: url, successCallback: onUploadedCallback,
successCallback: onUploadedCallback, httpMethod: 'POST',
httpMethod: 'POST', postBody: formData,
postBody: formData, });
}); setShowFileUploadModal(false);
setShowFileUploadModal(false); }
}; };
const fileUploadModal = () => { const fileUploadModal = () => {
@ -362,6 +375,9 @@ export default function ProcessModelShow() {
}; };
const processModelButtons = () => { const processModelButtons = () => {
if (!processModel) {
return null;
}
return ( return (
<Accordion> <Accordion>
<AccordionItem <AccordionItem
@ -387,27 +403,21 @@ export default function ProcessModelShow() {
</Button> </Button>
<Button <Button
renderIcon={Add} renderIcon={Add}
href={`/admin/process-models/${ href={`/admin/process-models/${processModel.process_group_id}/${processModel.id}/files?file_type=dmn`}
(processModel as any).process_group_id
}/${(processModel as any).id}/files?file_type=dmn`}
size="sm" size="sm"
> >
New DMN File New DMN File
</Button> </Button>
<Button <Button
renderIcon={Add} renderIcon={Add}
href={`/admin/process-models/${ href={`/admin/process-models/${processModel.process_group_id}/${processModel.id}/form?file_ext=json`}
(processModel as any).process_group_id
}/${(processModel as any).id}/form?file_ext=json`}
size="sm" size="sm"
> >
New JSON File New JSON File
</Button> </Button>
<Button <Button
renderIcon={Add} renderIcon={Add}
href={`/admin/process-models/${ href={`/admin/process-models/${processModel.process_group_id}/${processModel.id}/form?file_ext=md`}
(processModel as any).process_group_id
}/${(processModel as any).id}/form?file_ext=md`}
size="sm" size="sm"
> >
New Markdown File New Markdown File
@ -434,9 +444,7 @@ export default function ProcessModelShow() {
Run Run
</Button> </Button>
<Button <Button
href={`/admin/process-models/${ href={`/admin/process-models/${processModel.process_group_id}/${processModel.id}/edit`}
(processModel as any).process_group_id
}/${(processModel as any).id}/edit`}
variant="secondary" variant="secondary"
> >
Edit process model Edit process model