added descriptions to task tables w/ burnettk

This commit is contained in:
jasquat 2022-11-23 16:26:02 -05:00
parent c150ec97a6
commit b5d10e1596
6 changed files with 66 additions and 26 deletions

View File

@ -23,7 +23,6 @@ import {
TimePicker,
// @ts-ignore
} from '@carbon/react';
import { ReactElement } from 'react-markdown/lib/react-markdown';
import { PROCESS_STATUSES, DATE_FORMAT, DATE_FORMAT_CARBON } from '../config';
import {
convertDateAndTimeStringsToSeconds,
@ -59,7 +58,7 @@ type OwnProps = {
perPageOptions?: number[];
showReports?: boolean;
reportIdentifier?: string;
textToShowIfEmpty?: ReactElement;
textToShowIfEmpty?: string;
};
interface dateParameters {
@ -784,7 +783,7 @@ export default function ProcessInstanceListTable({
);
}
if (textToShowIfEmpty) {
return textToShowIfEmpty;
return <p className="no-results-message">{textToShowIfEmpty}</p>;
}
return null;

View File

@ -111,7 +111,11 @@ export default function MyOpenProcesses() {
const tasksComponent = () => {
if (pagination && pagination.total < 1) {
return <p>No tasks waiting for you</p>;
return (
<p className="no-results-message">
There are no tasks for processes you started at this time.
</p>
);
}
const { page, perPage } = getPageInfoFromSearchParams(
searchParams,
@ -120,23 +124,25 @@ export default function MyOpenProcesses() {
paginationQueryParamPrefix
);
return (
<>
<h1>Tasks for my open processes</h1>
<PaginationForTable
page={page}
perPage={perPage}
perPageOptions={[2, PER_PAGE_FOR_TASKS_ON_HOME_PAGE, 25]}
pagination={pagination}
tableToDisplay={buildTable()}
paginationQueryParamPrefix={paginationQueryParamPrefix}
/>
</>
<PaginationForTable
page={page}
perPage={perPage}
perPageOptions={[2, PER_PAGE_FOR_TASKS_ON_HOME_PAGE, 25]}
pagination={pagination}
tableToDisplay={buildTable()}
paginationQueryParamPrefix={paginationQueryParamPrefix}
/>
);
};
return (
<>
<h1>Tasks for my open processes</h1>
<h2>Tasks for my open processes</h2>
<p className="data-table-description">
These tasks are for processes you started which are not complete. You
may not have an action to take at this time. See below for tasks waiting
on you.
</p>
{tasksComponent()}
</>
);

View File

@ -112,7 +112,11 @@ export default function TasksWaitingForMe() {
const tasksComponent = () => {
if (pagination && pagination.total < 1) {
return <p>No tasks waiting for you</p>;
return (
<p className="no-results-message">
You have no task assignments at this time.
</p>
);
}
const { page, perPage } = getPageInfoFromSearchParams(
searchParams,
@ -134,7 +138,11 @@ export default function TasksWaitingForMe() {
return (
<>
<h1>Tasks waiting for me</h1>
<h2>Tasks waiting for me</h2>
<p className="data-table-description">
These processes are waiting on you to complete the next task. All are
processes created by others that are now actionable by you.
</p>
{tasksComponent()}
</>
);

View File

@ -113,7 +113,11 @@ export default function TasksWaitingForMyGroups() {
const tasksComponent = () => {
if (pagination && pagination.total < 1) {
return <p>No tasks waiting for you</p>;
return (
<p className="no-results-message">
Your groups have no task assignments at this time.
</p>
);
}
const { page, perPage } = getPageInfoFromSearchParams(
searchParams,
@ -135,7 +139,11 @@ export default function TasksWaitingForMyGroups() {
return (
<>
<h1>Tasks waiting for my groups</h1>
<h2>Tasks waiting for my groups</h2>
<p className="data-table-description">
This is a list of tasks for groups you belong to that can be completed
by any member of the group.
</p>
{tasksComponent()}
</>
);

View File

@ -260,3 +260,17 @@ in on this with the react-jsonschema-form repo. This is just a patch fix to allo
td.actions-cell {
width: 1em;
}
.no-results-message {
font-style: italic;
margin-left: 2em;
margin-top: 1em;
font-size: 14px;
}
.data-table-description {
font-size: 14px;
line-height: 18px;
letter-spacing: 0.16px;
color: #525252;
}

View File

@ -3,32 +3,37 @@ import ProcessInstanceListTable from '../components/ProcessInstanceListTable';
export default function CompletedInstances() {
return (
<>
<h1>Initiated By Me</h1>
<h2>My completed instances</h2>
<p className="data-table-description">
This is a list of instances you started that are now complete.
</p>
<ProcessInstanceListTable
filtersEnabled={false}
paginationQueryParamPrefix="my_completed_instances"
perPageOptions={[2, 5, 25]}
reportIdentifier="system_report_instances_initiated_by_me"
showReports={false}
textToShowIfEmpty={<p>No completed instances</p>}
textToShowIfEmpty="No completed instances"
/>
<h1 style={{ marginTop: '1em' }}>With Tasks Completed By Me</h1>
<h2 style={{ marginTop: '1em' }}>Tasks actions by me</h2>
<p className="data-table-description" />
<ProcessInstanceListTable
filtersEnabled={false}
paginationQueryParamPrefix="my_completed_tasks"
perPageOptions={[2, 5, 25]}
reportIdentifier="system_report_instances_with_tasks_completed_by_me"
showReports={false}
textToShowIfEmpty={<p>No completed instances</p>}
textToShowIfEmpty="No completed instances"
/>
<h1 style={{ marginTop: '1em' }}>With Tasks Completed By My Group</h1>
<h2 style={{ marginTop: '1em' }}>With Tasks Completed By My Group</h2>
<p className="data-table-description" />
<ProcessInstanceListTable
filtersEnabled={false}
paginationQueryParamPrefix="group_completed_tasks"
perPageOptions={[2, 5, 25]}
reportIdentifier="system_report_instances_with_tasks_completed_by_my_groups"
showReports={false}
textToShowIfEmpty={<p>No completed instances</p>}
textToShowIfEmpty="No completed instances"
/>
</>
);