Add custom terminology "milestone" for "task"

kausaltech · Sep 28, 2023 · 61445d9 · 61445d9
1 parent 8e4f7d5
commit 61445d9
Show file tree

Hide file tree

Showing 10 changed files with 106 additions and 47 deletions.
diff --git a/common/__generated__/graphql.ts b/common/__generated__/graphql.ts
diff --git a/common/i18n.ts b/common/i18n.ts
@@ -1,5 +1,8 @@
 import * as NextI18Next from 'next-i18next';
-import { ContentSiteGeneralContentActionTermChoices } from './__generated__/graphql';
+import {
+  ContentSiteGeneralContentActionTermChoices,
+  ContentSiteGeneralContentActionTaskTermChoices,
+} from './__generated__/graphql';
 import numbro from 'numbro';
 import numbroDe from 'numbro/dist/languages/de-DE.min.js';
 
@@ -22,4 +25,13 @@ export function getActionTermContext(plan: {
   return actionTerm === 'ACTION' ? undefined : { context: actionTerm };
 }
 
+export function getActionTaskTermContext(plan: {
+  generalContent?: {
+    actionTaskTerm: ContentSiteGeneralContentActionTaskTermChoices;
+  };
+}) {
+  const actionTaskTerm = plan.generalContent?.actionTaskTerm;
+  return actionTaskTerm === 'TASK' ? undefined : { context: actionTaskTerm };
+}
+
 export { appWithTranslation, withTranslation, Trans, useTranslation };
diff --git a/components/actions/blocks/ActionTasksBlock.tsx b/components/actions/blocks/ActionTasksBlock.tsx
@@ -1,18 +1,22 @@
 import { Row, Col } from 'reactstrap';
 
-import { getActionTermContext, useTranslation } from 'common/i18n';
+import { getActionTaskTermContext, useTranslation } from 'common/i18n';
 import { ActionSection, SectionHeader } from 'components/actions/ActionContent';
 import TaskList from 'components/actions/TaskList';
+import { usePlan } from 'context/plan';
 
 const ActionTasksBlock = (props) => {
   const { tasks } = props;
   const { t } = useTranslation();
+  const plan = usePlan();
 
   return (
     <div>
       <Row>
         <Col>
-          <SectionHeader>{t('actions:action-tasks')}</SectionHeader>
+          <SectionHeader>
+            {t('actions:action-tasks', getActionTaskTermContext(plan))}
+          </SectionHeader>
         </Col>
       </Row>
       <Row>

diff --git a/components/dashboard/ActionStatusExport.js b/components/dashboard/ActionStatusExport.js
@@ -1,4 +1,8 @@
-import { getActionTermContext, useTranslation } from 'common/i18n';
+import {
+  getActionTaskTermContext,
+  getActionTermContext,
+  useTranslation,
+} from 'common/i18n';
 import { cleanActionStatus } from 'common/preprocess';
 import { usePlan } from 'context/plan';
 import {
@@ -37,12 +41,28 @@ async function exportActions(
     },
     { header: t('actions:action-last-updated'), key: 'lastUpdated', width: 15 },
     // TODO: i18n
-    { header: t('actions:tasks-on-time'), key: 'ontimeTasks', width: 10 },
+    {
+      header: t('actions:tasks-on-time', getActionTaskTermContext(plan)),
+      key: 'ontimeTasks',
+      width: 10,
+    },
     // TODO: i18n
-    { header: t('actions:tasks-late'), key: 'lateTasks', width: 10 },
+    {
+      header: t('actions:tasks-late', getActionTaskTermContext(plan)),
+      key: 'lateTasks',
+      width: 10,
+    },
     // TODO: i18n
-    { header: t('actions:tasks-completed'), key: 'completedTasks', width: 10 },
-    { header: t('actions:action-tasks'), key: 'tasks', width: 10 },
+    {
+      header: t('actions:tasks-completed', getActionTaskTermContext(plan)),
+      key: 'completedTasks',
+      width: 10,
+    },
+    {
+      header: t('actions:action-tasks', getActionTaskTermContext(plan)),
+      key: 'tasks',
+      width: 10,
+    },
     // TODO: i18n
     {
       header: t('actions:responsible-organizations-primary'),

diff --git a/components/dashboard/ActionStatusTable.js b/components/dashboard/ActionStatusTable.js
@@ -5,7 +5,11 @@ import styled from 'styled-components';
 import { transparentize } from 'polished';
 import { usePopper } from 'react-popper';
 import { useTheme } from 'common/theme';
-import { getActionTermContext, useTranslation } from 'common/i18n';
+import {
+  getActionTaskTermContext,
+  getActionTermContext,
+  useTranslation,
+} from 'common/i18n';
 import Icon from 'components/common/Icon';
 import { actionStatusOrder } from 'common/data/actions';
 import ActionTableRow from 'components/dashboard/ActionTableRow';
@@ -307,7 +311,9 @@ const ActionStatusTable = (props) => {
               >
                 {columnLabel.implementationPhase}
               </SortableTableHeader>
-              <th>{t('actions:action-tasks')}</th>
+              <th>
+                {t('actions:action-tasks', getActionTaskTermContext(plan))}
+              </th>
               {showColumn.responsibles && (
                 <th>{t('actions:action-responsibles-short')}</th>
               )}

diff --git a/components/dashboard/ActionTableRow.js b/components/dashboard/ActionTableRow.js
@@ -3,7 +3,11 @@ import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import { useTheme } from 'common/theme';
 import dayjs from 'common/dayjs';
-import { getActionTermContext, useTranslation } from 'common/i18n';
+import {
+  getActionTaskTermContext,
+  getActionTermContext,
+  useTranslation,
+} from 'common/i18n';
 import StatusBadge from 'components/common/StatusBadge';
 import ActionImpact from 'components/actions/ActionImpact';
 import ActionPhase from 'components/actions/ActionPhase';
@@ -125,7 +129,7 @@ const IndicatorsDisplay = styled.div`
   padding: ${(props) => props.theme.spaces.s050};
 `;
 
-const getTaskCounts = (tasks, t) => {
+const getTaskCounts = (tasks, plan, t) => {
   let tasksCount = tasks.length;
   let ontimeTasks = 0;
   let lateTasks = 0;
@@ -152,8 +156,11 @@ const getTaskCounts = (tasks, t) => {
 
   const displayTasksCount =
     tasksCount === 0
-      ? t('actions:action-no-tasks')
-      : `${tasksCount} ${t('actions:action-tasks-count')}`;
+      ? t('actions:action-no-tasks', getActionTaskTermContext(plan))
+      : `${tasksCount} ${t(
+          'actions:action-tasks-count',
+          getActionTaskTermContext(plan)
+        )}`;
 
   return {
     total: tasksCount,
@@ -166,8 +173,8 @@ const getTaskCounts = (tasks, t) => {
 
 const TasksStatusBar = (props) => {
   const { t } = useTranslation(['common', 'actions']);
-  const { tasks } = props;
-  const taskCounts = getTaskCounts(tasks, t);
+  const { tasks, plan } = props;
+  const taskCounts = getTaskCounts(tasks, plan, t);
 
   return (
     <>
@@ -367,16 +374,19 @@ const ActionTableRow = React.memo(function ActionTableRow(props) {
         <div
           role="button"
           onMouseEnter={(e) =>
-            showTooltip(e, tasksTooltipContent(t, getTaskCounts(item.tasks, t)))
+            showTooltip(
+              e,
+              tasksTooltipContent(plan, t, getTaskCounts(item.tasks, plan, t))
+            )
           }
           onMouseLeave={(e) => hideTooltip(e)}
           aria-describedby={`tasks-${item.identifier}`}
         >
-          <TasksStatusBar tasks={item.tasks} />
+          <TasksStatusBar tasks={item.tasks} plan={plan} />
         </div>
         {/* Content for screenreaders */}
         <div hidden id={`tasks-${item.identifier}`}>
-          {tasksTooltipContent(t, getTaskCounts(item.tasks, t))}
+          {tasksTooltipContent(plan, t, getTaskCounts(item.tasks, plan, t))}
         </div>
       </td>
       {hasResponsibles && (