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

82
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,25 +186,43 @@ 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(
(processModelFile: any, index: number) => {
const isPrimaryBpmnFile =
processModelFile.name === processModel.primary_file_name;
const items: ProcessModelFileCarbonDropdownItem[] = [ const items: ProcessModelFileCarbonDropdownItem[] = [
{ {
label: 'Delete', label: 'Delete',
action: 'delete', action: 'delete',
processModelFile, processModelFile,
}, },
{ ];
if (processModelFile.name.match(/\.bpmn$/) && !isPrimaryBpmnFile) {
items.push({
label: 'Mark as Primary', label: 'Mark as Primary',
action: 'mark_as_primary', action: 'mark_as_primary',
processModelFile, processModelFile,
}, });
]; }
let actionDropDirection = 'bottom';
if (index + 1 === processModel.files.length) {
actionDropDirection = 'top';
}
// 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 = ( const actionsTableCell = (
<TableCell key={`${processModelFile.name}-cell`}> <TableCell key={`${processModelFile.name}-cell`}>
<Dropdown <Dropdown
id="default" id="default"
direction="top" direction={actionDropDirection}
label="Select an action" label="Select an action"
onChange={(e: any) => { onChange={(e: any) => {
onProcessModelFileAction(e); onProcessModelFileAction(e);
@ -218,18 +234,17 @@ export default function ProcessModelShow() {
/> />
</TableCell> </TableCell>
); );
if (processModelFile.name.match(/\.(dmn|bpmn)$/)) { if (processModelFile.name.match(/\.(dmn|bpmn)$/)) {
let primarySuffix = ''; let primarySuffix = '';
if (processModelFile.name === (processModel as any).primary_file_name) { if (isPrimaryBpmnFile) {
primarySuffix = '- Primary File'; primarySuffix = '- Primary File';
} }
constructedTag = ( constructedTag = (
<TableRow key={processModelFile.name}> <TableRow key={processModelFile.name}>
<TableCell key={`${processModelFile.name}-cell`}> <TableCell key={`${processModelFile.name}-cell`}>
<Link <Link
to={`/admin/process-models/${ to={`/admin/process-models/${processModel.process_group_id}/${processModel.id}/files/${processModelFile.name}`}
(processModel as any).process_group_id
}/${(processModel as any).id}/files/${processModelFile.name}`}
> >
{processModelFile.name} {processModelFile.name}
</Link> </Link>
@ -243,9 +258,7 @@ export default function ProcessModelShow() {
<TableRow key={processModelFile.name}> <TableRow key={processModelFile.name}>
<TableCell key={`${processModelFile.name}-cell`}> <TableCell key={`${processModelFile.name}-cell`}>
<Link <Link
to={`/admin/process-models/${ to={`/admin/process-models/${processModel.process_group_id}/${processModel.id}/form/${processModelFile.name}`}
(processModel as any).process_group_id
}/${(processModel as any).id}/form/${processModelFile.name}`}
> >
{processModelFile.name} {processModelFile.name}
</Link> </Link>
@ -263,7 +276,8 @@ export default function ProcessModelShow() {
); );
} }
return constructedTag; 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,10 +328,9 @@ export default function ProcessModelShow() {
}; };
const handleFileUpload = (event: any) => { const handleFileUpload = (event: any) => {
if (processModel) {
event.preventDefault(); event.preventDefault();
const url = `/process-models/${(processModel as any).process_group_id}/${ const url = `/process-models/${processModel.process_group_id}/${processModel.id}/files`;
(processModel as any).id
}/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);
@ -329,6 +341,7 @@ export default function ProcessModelShow() {
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