status-im/spiff-arena
2
0
Fork 0
mirror of https://github.com/status-im/spiff-arena.git synced 2025-02-05 14:44:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

some updates to ui homepage to align more with notion doc

Browse Source
This commit is contained in:
jasquat 2022-11-23 10:23:26 -05:00
parent 19333e38b2
commit 0eeebc497b
6 changed files with 51 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
spiffworkflow-frontend/src/components/ProcessInstanceListTable.tsx
View File

@ -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;
} }

12
spiffworkflow-frontend/src/components/TasksForMyOpenProcesses.tsx
View File

@ -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()}
</>
);
} }

31
spiffworkflow-frontend/src/components/TasksWaitingForMe.tsx
View File

@ -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()}
</>
);
} }

31
spiffworkflow-frontend/src/components/TasksWaitingForMyGroups.tsx
View File

@ -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()}
</>
);
} }

3
spiffworkflow-frontend/src/routes/CompletedInstances.tsx
View File

@ -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"
/> />
</> </>
); );

12
spiffworkflow-frontend/src/routes/HomePageRoutes.tsx
View File

@ -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 />} />