86 lines
2.5 KiB
TypeScript
86 lines
2.5 KiB
TypeScript
import { useEffect, useState } from 'react';
|
|
import {
|
|
ComboBox,
|
|
Stack,
|
|
FormLabel,
|
|
// @ts-ignore
|
|
} from '@carbon/react';
|
|
import { useSearchParams } from 'react-router-dom';
|
|
import { truncateString } from '../helpers';
|
|
import { ProcessInstanceReport } from '../interfaces';
|
|
import HttpService from '../services/HttpService';
|
|
|
|
type OwnProps = {
|
|
onChange: (..._args: any[]) => any;
|
|
selectedItem?: ProcessInstanceReport | null;
|
|
titleText?: string;
|
|
};
|
|
|
|
export default function ProcessInstanceReportSearch({
|
|
selectedItem,
|
|
onChange,
|
|
titleText = 'Process instance perspectives',
|
|
}: OwnProps) {
|
|
const [processInstanceReports, setProcessInstanceReports] = useState<
|
|
ProcessInstanceReport[] | null
|
|
>(null);
|
|
|
|
const [searchParams] = useSearchParams();
|
|
const reportId = searchParams.get('report_id');
|
|
|
|
useEffect(() => {
|
|
function setProcessInstanceReportsFromResult(
|
|
result: ProcessInstanceReport[]
|
|
) {
|
|
setProcessInstanceReports(result);
|
|
}
|
|
|
|
HttpService.makeCallToBackend({
|
|
path: `/process-instances/reports`,
|
|
successCallback: setProcessInstanceReportsFromResult,
|
|
});
|
|
}, [reportId]);
|
|
|
|
const reportSelectionString = (
|
|
processInstanceReport: ProcessInstanceReport
|
|
) => {
|
|
return `${truncateString(processInstanceReport.identifier, 20)} (Id: ${
|
|
processInstanceReport.id
|
|
})`;
|
|
};
|
|
|
|
const shouldFilterProcessInstanceReport = (options: any) => {
|
|
const processInstanceReport: ProcessInstanceReport = options.item;
|
|
const { inputValue } = options;
|
|
return reportSelectionString(processInstanceReport).includes(inputValue);
|
|
};
|
|
|
|
const reportsAvailable = () => {
|
|
return processInstanceReports && processInstanceReports.length > 0;
|
|
};
|
|
|
|
if (reportsAvailable()) {
|
|
return (
|
|
<Stack orientation="horizontal" gap={2}>
|
|
<FormLabel className="with-top-margin">{titleText}</FormLabel>
|
|
<ComboBox
|
|
onChange={onChange}
|
|
id="process-instance-report-select"
|
|
data-qa="process-instance-report-selection"
|
|
items={processInstanceReports}
|
|
itemToString={(processInstanceReport: ProcessInstanceReport) => {
|
|
if (processInstanceReport) {
|
|
return reportSelectionString(processInstanceReport);
|
|
}
|
|
return null;
|
|
}}
|
|
shouldFilterItem={shouldFilterProcessInstanceReport}
|
|
placeholder="Choose a process instance perspective"
|
|
selectedItem={selectedItem}
|
|
/>
|
|
</Stack>
|
|
);
|
|
}
|
|
return null;
|
|
}
|