some updates to ui homepage to align more with notion doc
This commit is contained in:
parent
19333e38b2
commit
0eeebc497b
|
@ -58,6 +58,7 @@ type OwnProps = {
|
||||||
perPageOptions?: number[];
|
perPageOptions?: number[];
|
||||||
showReports?: boolean;
|
showReports?: boolean;
|
||||||
reportIdentifier?: string;
|
reportIdentifier?: string;
|
||||||
|
textToShowIfEmpty?: string;
|
||||||
};
|
};
|
||||||
|
|
||||||
interface dateParameters {
|
interface dateParameters {
|
||||||
|
@ -71,6 +72,7 @@ export default function ProcessInstanceListTable({
|
||||||
perPageOptions,
|
perPageOptions,
|
||||||
showReports = true,
|
showReports = true,
|
||||||
reportIdentifier,
|
reportIdentifier,
|
||||||
|
textToShowIfEmpty,
|
||||||
}: OwnProps) {
|
}: OwnProps) {
|
||||||
const params = useParams();
|
const params = useParams();
|
||||||
const [searchParams] = useSearchParams();
|
const [searchParams] = useSearchParams();
|
||||||
|
@ -753,7 +755,7 @@ export default function ProcessInstanceListTable({
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
if (pagination) {
|
if (pagination && (!textToShowIfEmpty || pagination.total > 0)) {
|
||||||
// eslint-disable-next-line prefer-const
|
// eslint-disable-next-line prefer-const
|
||||||
let { page, perPage } = getPageInfoFromSearchParams(
|
let { page, perPage } = getPageInfoFromSearchParams(
|
||||||
searchParams,
|
searchParams,
|
||||||
|
@ -780,6 +782,9 @@ export default function ProcessInstanceListTable({
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
if (textToShowIfEmpty) {
|
||||||
|
return <>{textToShowIfEmpty}</>;
|
||||||
|
}
|
||||||
|
|
||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
|
|
|
@ -111,7 +111,7 @@ export default function MyOpenProcesses() {
|
||||||
|
|
||||||
const tasksComponent = () => {
|
const tasksComponent = () => {
|
||||||
if (pagination && pagination.total < 1) {
|
if (pagination && pagination.total < 1) {
|
||||||
return null;
|
return <p>No tasks waiting for you</p>;
|
||||||
}
|
}
|
||||||
const { page, perPage } = getPageInfoFromSearchParams(
|
const { page, perPage } = getPageInfoFromSearchParams(
|
||||||
searchParams,
|
searchParams,
|
||||||
|
@ -134,8 +134,10 @@ export default function MyOpenProcesses() {
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
if (pagination) {
|
return (
|
||||||
return tasksComponent();
|
<>
|
||||||
}
|
<h1>Tasks for my open processes</h1>
|
||||||
return null;
|
{tasksComponent()}
|
||||||
|
</>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -112,7 +112,7 @@ export default function TasksWaitingForMe() {
|
||||||
|
|
||||||
const tasksComponent = () => {
|
const tasksComponent = () => {
|
||||||
if (pagination && pagination.total < 1) {
|
if (pagination && pagination.total < 1) {
|
||||||
return null;
|
return <p>No tasks waiting for you</p>;
|
||||||
}
|
}
|
||||||
const { page, perPage } = getPageInfoFromSearchParams(
|
const { page, perPage } = getPageInfoFromSearchParams(
|
||||||
searchParams,
|
searchParams,
|
||||||
|
@ -121,22 +121,21 @@ export default function TasksWaitingForMe() {
|
||||||
'tasks_waiting_for_me'
|
'tasks_waiting_for_me'
|
||||||
);
|
);
|
||||||
return (
|
return (
|
||||||
<>
|
<PaginationForTable
|
||||||
<h1>Tasks waiting for me</h1>
|
page={page}
|
||||||
<PaginationForTable
|
perPage={perPage}
|
||||||
page={page}
|
perPageOptions={[2, PER_PAGE_FOR_TASKS_ON_HOME_PAGE, 25]}
|
||||||
perPage={perPage}
|
pagination={pagination}
|
||||||
perPageOptions={[2, PER_PAGE_FOR_TASKS_ON_HOME_PAGE, 25]}
|
tableToDisplay={buildTable()}
|
||||||
pagination={pagination}
|
paginationQueryParamPrefix="tasks_waiting_for_me"
|
||||||
tableToDisplay={buildTable()}
|
/>
|
||||||
paginationQueryParamPrefix="tasks_waiting_for_me"
|
|
||||||
/>
|
|
||||||
</>
|
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
if (pagination) {
|
return (
|
||||||
return tasksComponent();
|
<>
|
||||||
}
|
<h1>Tasks waiting for me</h1>
|
||||||
return null;
|
{tasksComponent()}
|
||||||
|
</>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -113,7 +113,7 @@ export default function TasksWaitingForMyGroups() {
|
||||||
|
|
||||||
const tasksComponent = () => {
|
const tasksComponent = () => {
|
||||||
if (pagination && pagination.total < 1) {
|
if (pagination && pagination.total < 1) {
|
||||||
return null;
|
return <p>No tasks waiting for you</p>;
|
||||||
}
|
}
|
||||||
const { page, perPage } = getPageInfoFromSearchParams(
|
const { page, perPage } = getPageInfoFromSearchParams(
|
||||||
searchParams,
|
searchParams,
|
||||||
|
@ -122,22 +122,21 @@ export default function TasksWaitingForMyGroups() {
|
||||||
paginationQueryParamPrefix
|
paginationQueryParamPrefix
|
||||||
);
|
);
|
||||||
return (
|
return (
|
||||||
<>
|
<PaginationForTable
|
||||||
<h1>Tasks waiting for my groups</h1>
|
page={page}
|
||||||
<PaginationForTable
|
perPage={perPage}
|
||||||
page={page}
|
perPageOptions={[2, PER_PAGE_FOR_TASKS_ON_HOME_PAGE, 25]}
|
||||||
perPage={perPage}
|
pagination={pagination}
|
||||||
perPageOptions={[2, PER_PAGE_FOR_TASKS_ON_HOME_PAGE, 25]}
|
tableToDisplay={buildTable()}
|
||||||
pagination={pagination}
|
paginationQueryParamPrefix={paginationQueryParamPrefix}
|
||||||
tableToDisplay={buildTable()}
|
/>
|
||||||
paginationQueryParamPrefix={paginationQueryParamPrefix}
|
|
||||||
/>
|
|
||||||
</>
|
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
if (pagination) {
|
return (
|
||||||
return tasksComponent();
|
<>
|
||||||
}
|
<h1>Tasks waiting for my groups</h1>
|
||||||
return null;
|
{tasksComponent()}
|
||||||
|
</>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -10,6 +10,7 @@ export default function CompletedInstances() {
|
||||||
perPageOptions={[2, 5, 25]}
|
perPageOptions={[2, 5, 25]}
|
||||||
reportIdentifier="system_report_instances_initiated_by_me"
|
reportIdentifier="system_report_instances_initiated_by_me"
|
||||||
showReports={false}
|
showReports={false}
|
||||||
|
textToShowIfEmpty="No completed instances"
|
||||||
/>
|
/>
|
||||||
<h1 style={{ marginTop: '1em' }}>With Tasks Completed By Me</h1>
|
<h1 style={{ marginTop: '1em' }}>With Tasks Completed By Me</h1>
|
||||||
<ProcessInstanceListTable
|
<ProcessInstanceListTable
|
||||||
|
@ -18,6 +19,7 @@ export default function CompletedInstances() {
|
||||||
perPageOptions={[2, 5, 25]}
|
perPageOptions={[2, 5, 25]}
|
||||||
reportIdentifier="system_report_instances_with_tasks_completed_by_me"
|
reportIdentifier="system_report_instances_with_tasks_completed_by_me"
|
||||||
showReports={false}
|
showReports={false}
|
||||||
|
textToShowIfEmpty="No completed instances"
|
||||||
/>
|
/>
|
||||||
<h1 style={{ marginTop: '1em' }}>With Tasks Completed By My Group</h1>
|
<h1 style={{ marginTop: '1em' }}>With Tasks Completed By My Group</h1>
|
||||||
<ProcessInstanceListTable
|
<ProcessInstanceListTable
|
||||||
|
@ -26,6 +28,7 @@ export default function CompletedInstances() {
|
||||||
perPageOptions={[2, 5, 25]}
|
perPageOptions={[2, 5, 25]}
|
||||||
reportIdentifier="system_report_instances_with_tasks_completed_by_my_groups"
|
reportIdentifier="system_report_instances_with_tasks_completed_by_my_groups"
|
||||||
showReports={false}
|
showReports={false}
|
||||||
|
textToShowIfEmpty="No completed instances"
|
||||||
/>
|
/>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
|
|
|
@ -18,12 +18,10 @@ export default function HomePageRoutes() {
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
setErrorMessage(null);
|
setErrorMessage(null);
|
||||||
let newSelectedTabIndex = 0;
|
let newSelectedTabIndex = 0;
|
||||||
if (location.pathname.match(/^\/tasks\/grouped\b/)) {
|
if (location.pathname.match(/^\/tasks\/completed-instances\b/)) {
|
||||||
newSelectedTabIndex = 1;
|
newSelectedTabIndex = 1;
|
||||||
} else if (location.pathname.match(/^\/tasks\/completed-instances\b/)) {
|
|
||||||
newSelectedTabIndex = 2;
|
|
||||||
} else if (location.pathname.match(/^\/tasks\/create-new-instance\b/)) {
|
} else if (location.pathname.match(/^\/tasks\/create-new-instance\b/)) {
|
||||||
newSelectedTabIndex = 3;
|
newSelectedTabIndex = 2;
|
||||||
}
|
}
|
||||||
setSelectedTabIndex(newSelectedTabIndex);
|
setSelectedTabIndex(newSelectedTabIndex);
|
||||||
}, [location, setErrorMessage]);
|
}, [location, setErrorMessage]);
|
||||||
|
@ -36,8 +34,8 @@ export default function HomePageRoutes() {
|
||||||
<>
|
<>
|
||||||
<Tabs selectedIndex={selectedTabIndex}>
|
<Tabs selectedIndex={selectedTabIndex}>
|
||||||
<TabList aria-label="List of tabs">
|
<TabList aria-label="List of tabs">
|
||||||
<Tab onClick={() => navigate('/tasks/my-tasks')}>My Tasks</Tab>
|
{/* <Tab onClick={() => navigate('/tasks/my-tasks')}>My Tasks</Tab> */}
|
||||||
<Tab onClick={() => navigate('/tasks/grouped')}>Grouped Tasks</Tab>
|
<Tab onClick={() => navigate('/tasks/grouped')}>Tasks</Tab>
|
||||||
<Tab onClick={() => navigate('/tasks/completed-instances')}>
|
<Tab onClick={() => navigate('/tasks/completed-instances')}>
|
||||||
Completed Instances
|
Completed Instances
|
||||||
</Tab>
|
</Tab>
|
||||||
|
@ -55,7 +53,7 @@ export default function HomePageRoutes() {
|
||||||
<>
|
<>
|
||||||
{renderTabs()}
|
{renderTabs()}
|
||||||
<Routes>
|
<Routes>
|
||||||
<Route path="/" element={<MyTasks />} />
|
<Route path="/" element={<GroupedTasks />} />
|
||||||
<Route path="my-tasks" element={<MyTasks />} />
|
<Route path="my-tasks" element={<MyTasks />} />
|
||||||
<Route path=":process_instance_id/:task_id" element={<TaskShow />} />
|
<Route path=":process_instance_id/:task_id" element={<TaskShow />} />
|
||||||
<Route path="grouped" element={<GroupedTasks />} />
|
<Route path="grouped" element={<GroupedTasks />} />
|
||||||
|
|
Loading…
Reference in New Issue