fix: additional notes.

src/common/modalChargeOptions.tsx

@@ -1,17 +0,0 @@
-import intl from 'react-intl-universal';
-
-export const taskChargeOptions = [
-  { name: intl.get('task.dialog.hourly_rate'), value: 'Hourly rate' },
-  { name: intl.get('task.dialog.fixed_price'), value: 'Fixed price' },
-  { name: intl.get('task.dialog.non_chargeable'), value: 'Non-chargeable' },
-];
-
-export const expenseChargeOption = [
-  {
-    name: intl.get('expenses.dialog.markup'),
-    value: '% markup',
-  },
-  { name: intl.get('expenses.dialog.pass_cost_on'), value: 'Pass cost on' },
-  { name: intl.get('expenses.dialog.custom_pirce'), value: 'Custom Pirce' },
-  { name: intl.get('expenses.dialog.non_chargeable'), value: 'Non-chargeable' },
-];

src/components/Datatable/TableHeader.js

@@ -91,20 +91,24 @@ export default function TableHeader() {
   if (headerLoading && TableHeaderSkeletonRenderer) {
     return <TableHeaderSkeletonRenderer />;
   }
+
+  // Can't contiunue if the thead is disabled.
+  if (hideTableHeader) {
+    return null;
+  }
+
   return (
-    !hideTableHeader && (
-      <ScrollSyncPane>
-        <div className="thead">
-          <div className={'thead-inner'}>
-            {headerGroups.map((headerGroup, index) => (
-              <TableHeaderGroup key={index} headerGroup={headerGroup} />
-            ))}
-            <If condition={progressBarLoading}>
-              <MaterialProgressBar />
-            </If>
-          </div>
+    <ScrollSyncPane>
+      <div className="thead">
+        <div className={'thead-inner'}>
+          {headerGroups.map((headerGroup, index) => (
+            <TableHeaderGroup key={index} headerGroup={headerGroup} />
+          ))}
+          <If condition={progressBarLoading}>
+            <MaterialProgressBar />
+          </If>
         </div>
-      </ScrollSyncPane>
-    )
+      </div>
+    </ScrollSyncPane>
   );
 }

src/components/DialogsContainer.js

@@ -41,9 +41,9 @@ import WarehouseActivateDialog from '../containers/Dialogs/WarehouseActivateDial
 import CustomerOpeningBalanceDialog from '../containers/Dialogs/CustomerOpeningBalanceDialog';
 import VendorOpeningBalanceDialog from '../containers/Dialogs/VendorOpeningBalanceDialog';
 import ProjectFormDialog from '../containers/Projects/containers/ProjectFormDialog';
-import TaskFormDialog from '../containers/Projects/containers/TaskFormDialog';
-import TimeEntryFormDialog from '../containers/Projects/containers/TimeEntryFormDialog';
-import ExpenseFormDialog from '../containers/Projects/containers/ExpenseFormDialog';
+import ProjectTaskFormDialog from '../containers/Projects/containers/ProjectTaskFormDialog';
+import ProjectTimeEntryFormDialog from '../containers/Projects/containers/ProjectTimeEntryFormDialog';
+import ProjectExpenseForm from '../containers/Projects/containers/ProjectExpenseForm';
 import EstimatedExpenseFormDialog from '../containers/Projects/containers/EstimatedExpenseFormDialog';
 
 /**
@@ -96,9 +96,9 @@ export default function DialogsContainer() {
       <CustomerOpeningBalanceDialog dialogName={'customer-opening-balance'} />
       <VendorOpeningBalanceDialog dialogName={'vendor-opening-balance'} />
       <ProjectFormDialog dialogName={'project-form'} />
-      <TaskFormDialog dialogName={'task-form'} />
-      <TimeEntryFormDialog dialogName={'time-entry-form'} />
-      <ExpenseFormDialog dialogName={'expense-form'} />
+      <ProjectTaskFormDialog dialogName={'project-task-form'} />
+      <ProjectTimeEntryFormDialog dialogName={'project-time-entry-form'} />
+      <ProjectExpenseForm dialogName={'project-expense-form'} />
       <EstimatedExpenseFormDialog dialogName={'estimated-expense-form'} />
     </div>
   );

src/containers/Projects/components/ChangeTypesSelect.tsx

@@ -1,6 +1,7 @@
+
 import React from 'react';
 import { MenuItem, Button } from '@blueprintjs/core';
-import { FSelect } from 'components';
+import { FSelect } from '../../../components';
 
 /**
  *
@@ -8,7 +9,7 @@ import { FSelect } from 'components';
  * @param {*} param1
  * @returns
  */
-const chargeItemRenderer = (item, { handleClick, modifiers, query }) => {
+const chargeTypeItemRenderer = (item, { handleClick, modifiers, query }) => {
   return (
     <MenuItem
       label={item.label}
@@ -19,8 +20,8 @@ const chargeItemRenderer = (item, { handleClick, modifiers, query }) => {
   );
 };
 
-const chargeItemSelectProps = {
-  itemRenderer: chargeItemRenderer,
+const chargeTypeSelectProps = {
+  itemRenderer: chargeTypeItemRenderer,
   valueAccessor: 'value',
   labelAccessor: 'name',
 };
@@ -30,13 +31,13 @@ const chargeItemSelectProps = {
  * @param param0
  * @returns
  */
-export function ChargeSelect({ items, ...rest }) {
+export function ChangeTypesSelect({ items, ...rest }) {
   return (
     <FSelect
-      {...chargeItemSelectProps}
+      {...chargeTypeSelectProps}
       {...rest}
       items={items}
-      input={ChargeSelectButton}
+      input={ChargeTypeSelectButton}
     />
   );
 }
@@ -45,6 +46,6 @@ export function ChargeSelect({ items, ...rest }) {
  * @param param0
  * @returns
  */
-function ChargeSelectButton({ label }) {
+function ChargeTypeSelectButton({ label }) {
   return <Button text={label} />;
 }

src/containers/Projects/components/index.ts

@@ -1,3 +1,3 @@
 export * from './ExpenseSelect';
-export * from './ChargeSelect';
+export * from './ChangeTypesSelect';
 export * from './FInputGroupComponent'

src/containers/Projects/containers/EstimatedExpenseFormDialog/EstimatedExpenseFormChargeFields.tsx

@@ -43,10 +43,10 @@ export default function EstimatedExpenseFormChargeFields() {
   const { values } = useFormikContext();
   return (
     <Choose>
-      <Choose.When condition={values.charge === '% markup'}>
+      <Choose.When condition={values.charge === 'markup'}>
         <PercentageFormField />
       </Choose.When>
-      <Choose.When condition={values.charge === 'Custom Pirce'}>
+      <Choose.When condition={values.charge === 'custom_pirce'}>
         <CustomPirceField />
       </Choose.When>
     </Choose>

src/containers/Projects/containers/EstimatedExpenseFormDialog/EstimatedExpenseFormFields.tsx

@@ -13,8 +13,8 @@ import {
 import { ExpenseSelect, FInputGroupComponent } from '../../components';
 import { useEstimatedExpenseFormContext } from './EstimatedExpenseFormProvider';
 import EstimatedExpenseFormChargeFields from './EstimatedExpenseFormChargeFields';
-import { ChargeSelect } from '../../components';
-import { expenseChargeOption } from 'common/modalChargeOptions';
+import { ChangeTypesSelect } from '../../components';
+import { expenseChargeOption } from 'containers/Projects/containers/common/modalChargeOptions';
 
 /**
  * Estimated expense form fields.
@@ -72,7 +72,7 @@ export default function EstimatedExpenseFormFields() {
         label={<T id={'estimated_expenses.dialog.charge'} />}
         className={classNames('form-group--select-list', Classes.FILL)}
       >
-        <ChargeSelect
+        <ChangeTypesSelect
           name="charge"
           items={expenseChargeOption}
           popoverProps={{ minimal: true }}

src/containers/Projects/containers/ProjectDetails/ProjectDetailActionsBar.tsx

@@ -42,7 +42,7 @@ function ProjectDetailActionsBar({
   const handleNewTransactionBtnClick = ({ path }) => {
     switch (path) {
       case 'expense':
-        openDialog('expense-form', { projectId });
+        openDialog('project-expense-form', { projectId });
         break;
       case 'estimatedExpense':
         openDialog('estimated-expense-form', { projectId });
@@ -62,7 +62,7 @@ function ProjectDetailActionsBar({
   };
 
   const handleTimeEntryBtnClick = () => {
-    openDialog('time-entry-form', {
+    openDialog('project-time-entry-form', {
       projectId,
     });
   };

src/containers/Projects/containers/ProjectDetails/Timesheets/TimesheetsTable.tsx

@@ -4,7 +4,8 @@ import styled from 'styled-components';
 import { DataTable } from 'components';
 import TableSkeletonRows from 'components/Datatable/TableSkeletonRows';
 import TableSkeletonHeader from 'components/Datatable/TableHeaderSkeleton';
-import { useTimesheetColumns, ActionsMenu } from './components';
+import { ActionsMenu } from './components';
+import { useTimesheetColumns } from './hooks';
 import { TABLES } from 'common/tables';
 import { useMemorizedColumnsWidths } from 'hooks';
 import withSettings from '../../../../Settings/withSettings';
@@ -52,9 +53,6 @@ function TimesheetsTable({
     <TimesheetDataTable
       columns={columns}
       data={Timesheet}
-      // loading={}
-      // headerLoading={}
-      // progressBarLoading={}
       manualSortBy={true}
       noInitialFetch={true}
       sticky={true}
@@ -87,7 +85,6 @@ const TimesheetDataTable = styled(DataTable)`
 
     .tbody {
       .tr .td {
-        /* padding: 0.5rem 0.8rem; */
       }
 
       .avatar.td {

src/containers/Projects/containers/ProjectDetails/Timesheets/components.tsx

@@ -1,11 +1,10 @@
 import React from 'react';
 import intl from 'react-intl-universal';
 import styled from 'styled-components';
-import { FormatDate, Icon, FormattedMessage as T } from 'components';
+import { FormatDate, Icon } from 'components';
 import { Menu, MenuItem, Intent } from '@blueprintjs/core';
 import { safeCallback, firstLettersArgs } from 'utils';
 
-
 /**
  * Table actions cell.
  */
@@ -77,43 +76,3 @@ const TimesheetDescription = styled.span`
     margin: 0.3rem;
   }
 `;
-
-/**
- * Retrieve timesheet list columns columns.
- */
-export function useTimesheetColumns() {
-  return React.useMemo(
-    () => [
-      {
-        id: 'avatar',
-        Header: '',
-        Cell: AvatarCell,
-        className: 'avatar',
-        width: 45,
-        disableResizing: true,
-        disableSortBy: true,
-        clickable: true,
-      },
-      {
-        id: 'name',
-        Header: 'Header',
-        accessor: TimesheetAccessor,
-        width: 100,
-        className: 'name',
-        clickable: true,
-        textOverview: true,
-      },
-      {
-        id: 'duration',
-        Header: '',
-        accessor: 'duration',
-        width: 100,
-        className: 'duration',
-        align: 'right',
-        clickable: true,
-        textOverview: true,
-      },
-    ],
-    [],
-  );
-}

src/containers/Projects/containers/ProjectDetails/Timesheets/hooks.ts

@@ -0,0 +1,43 @@
+import React from 'react';
+import intl from 'react-intl-universal';
+import { AvatarCell, TimesheetAccessor } from './components';
+
+/**
+ * Retrieve timesheet list columns columns.
+ */
+export function useTimesheetColumns() {
+  return React.useMemo(
+    () => [
+      {
+        id: 'avatar',
+        Header: '',
+        Cell: AvatarCell,
+        className: 'avatar',
+        width: 45,
+        disableResizing: true,
+        disableSortBy: true,
+        clickable: true,
+      },
+      {
+        id: 'name',
+        Header: 'Header',
+        accessor: TimesheetAccessor,
+        width: 100,
+        className: 'name',
+        clickable: true,
+        textOverview: true,
+      },
+      {
+        id: 'duration',
+        Header: '',
+        accessor: 'duration',
+        width: 100,
+        className: 'duration',
+        align: 'right',
+        clickable: true,
+        textOverview: true,
+      },
+    ],
+    [],
+  );
+}

src/containers/Projects/containers/ProjectDetails/index.tsx

@@ -1,5 +1,5 @@
 //@ts-nocheck
-import React from 'react';
+import React, { useEffect } from 'react';
 import { useLocation } from 'react-router-dom';
 import ProjectDetailActionsBar from './ProjectDetailActionsBar';
 import ProjectDetailTabs from './ProjectDetailTabs';
@@ -20,7 +20,7 @@ function ProjectTabs({
     state: { projectName, projectId },
   } = useLocation();
 
-  React.useEffect(() => {
+  useEffect(() => {
     changePageTitle(projectName);
   }, [changePageTitle, projectName]);
 

src/containers/Projects/containers/ProjectTimeEntryFormDialog/components/ProjectSelect.tsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import intl from 'react-intl-universal';
+import { MenuItem, Button } from '@blueprintjs/core';
+import { FSelect } from 'components/Forms';
+
+/**
+ *
+ * @param {*} query
+ * @param {*} project
+ * @param {*} _index
+ * @param {*} exactMatch
+ * @returns
+ */
+const projectItemPredicate = (query, project, _index, exactMatch) => {
+  const normalizedTitle = project.name.toLowerCase();
+  const normalizedQuery = query.toLowerCase();
+
+  if (exactMatch) {
+    return normalizedTitle === normalizedQuery;
+  } else {
+    return `${project.name}. ${normalizedTitle}`.indexOf(normalizedQuery) >= 0;
+  }
+};
+
+/**
+ *
+ * @param {*} project
+ * @param {*} param1
+ * @returns
+ */
+const projectItemRenderer = (project, { handleClick, modifiers, query }) => {
+  return (
+    <MenuItem
+      active={modifiers.active}
+      disabled={modifiers.disabled}
+      key={project.id}
+      onClick={handleClick}
+      text={project.name}
+    />
+  );
+};
+
+const projectSelectProps = {
+  // itemPredicate: projectItemPredicate,
+  itemRenderer: projectItemRenderer,
+  valueAccessor: 'id',
+  labelAccessor: 'name',
+};
+
+export function ProjectSelect({ projects, ...rest }) {
+  return (
+    <FSelect
+      items={projects}
+      {...projectSelectProps}
+      {...rest}
+      input={ProjectSelectButton}
+    />
+  );
+}
+
+function ProjectSelectButton({ label }) {
+  return <Button text={label ? label : intl.get('find_or_choose_a_project')} />;
+}

src/containers/Projects/containers/ProjectTimeEntryFormDialog/components/TaskSelect.tsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import intl from 'react-intl-universal';
+import { MenuItem, Button } from '@blueprintjs/core';
+import { FSelect } from '../../../../../components/Forms';
+
+/**
+ *
+ * @param {*} query
+ * @param {*} task
+ * @param {*} _index
+ * @param {*} exactMatch
+ * @returns
+ */
+const taskItemPredicate = (query, task, _index, exactMatch) => {
+  const normalizedTitle = task.name.toLowerCase();
+  const normalizedQuery = query.toLowerCase();
+
+  if (exactMatch) {
+    return normalizedTitle === normalizedQuery;
+  } else {
+    return `${task.name}. ${normalizedTitle}`.indexOf(normalizedQuery) >= 0;
+  }
+};
+
+/**
+ *
+ * @param {*} task
+ * @param {*} param1
+ * @returns
+ */
+const taskItemRenderer = (task, { handleClick, modifiers, query }) => {
+  return (
+    <MenuItem
+      active={modifiers.active}
+      disabled={modifiers.disabled}
+      key={task.id}
+      onClick={handleClick}
+      text={task.name}
+    />
+  );
+};
+
+const taskSelectProps = {
+  itemPredicate: taskItemPredicate,
+  itemRenderer: taskItemRenderer,
+  valueAccessor: 'id',
+  labelAccessor: 'name',
+};
+
+export function TaskSelect({ tasks, ...rest }) {
+  return (
+    <FSelect
+      items={tasks}
+      {...taskSelectProps}
+      {...rest}
+      input={TaskSelectButton}
+    />
+  );
+}
+
+function TaskSelectButton({ label }) {
+  return <Button text={label ? label : intl.get('choose_a_task')} />;
+}

src/containers/Projects/containers/ProjectsLanding/ProjectsDataTable.tsx

@@ -83,7 +83,7 @@ function ProjectsDataTable({
 
   // Handle new task button click.
   const handleNewTaskButtonClick = () => {
-    openDialog('task-form');
+    openDialog('project-task-form');
   };
 
   // Local storage memorizing columns widths.
@@ -163,6 +163,7 @@ const ProjectsTable = styled(DataTable)`
       }
     }
   }
+
   .table-size--small {
     .tbody .tr {
       height: 45px;

src/containers/Projects/containers/common/modalChargeOptions.ts

@@ -0,0 +1,17 @@
+import intl from 'react-intl-universal';
+
+export const taskChargeOptions = [
+  { name: intl.get('task.dialog.hourly_rate'), value: 'hourly_rate' },
+  { name: intl.get('task.dialog.fixed_price'), value: 'fixed_price' },
+  { name: intl.get('task.dialog.non_chargeable'), value: 'non_chargeable' },
+];
+
+export const expenseChargeOption = [
+  {
+    name: intl.get('expenses.dialog.markup'),
+    value: 'markup',
+  },
+  { name: intl.get('expenses.dialog.pass_cost_on'), value: 'pass_cost_on' },
+  { name: intl.get('expenses.dialog.custom_pirce'), value: 'custom_pirce' },
+  { name: intl.get('expenses.dialog.non_chargeable'), value: 'non_chargeable' },
+];

src/lang/en/index.json

@@ -2057,23 +2057,23 @@
   "projects.dialog.cost_estimate": "Cost Estimate",
   "projects.label.create": "Create",
   "projects.label.cost_estimate": " • Estimate {value}",
-  "task.dialog.new_task": "New Task",
-  "task.dialog.task_name": "Task Name",
-  "task.dialog.estimated_hours": "Estimate Hours",
-  "task.dialog.charge": "Charge",
-  "task.dialog.estimated_amount": "Estimated Amount",
-  "task.dialog.hourly_rate": "Hourly rate",
-  "task.dialog.fixed_price": "Fixed price",
-  "task.dialog.non_chargeable": "Non-chargeable",
+  "project_task.dialog.new_task": "New Task",
+  "project_task.dialog.task_name": "Task Name",
+  "project_task.dialog.estimated_hours": "Estimate Hours",
+  "project_task.dialog.charge": "Charge",
+  "project_task.dialog.estimated_amount": "Estimated Amount",
+  "project_task.dialog.hourly_rate": "Hourly rate",
+  "project_task.dialog.fixed_price": "Fixed price",
+  "project_task.dialog.non_chargeable": "Non-chargeable",
   "project.schema.label.contact": "Contact",
   "project.schema.label.project_name": "Project name",
   "project.schema.label.deadline": "Deadline",
   "project.schema.label.project_state": "Project state",
   "project.schema.label.project_cost": "Project cost",
-  "task.schema.label.task_name": "Task name",
-  "task.schema.label.task_house": "Task house",
-  "task.schema.label.charge": "Charge",
-  "task.schema.label.amount": "Amount",
+  "project_task.schema.label.task_name": "Task name",
+  "project_task.schema.label.task_house": "Task house",
+  "project_task.schema.label.charge": "Charge",
+  "project_task.schema.label.amount": "Amount",
   "projcet_details.action.new_transaction": "New Transaction",
   "projcet_details.action.time_entry": "Time",
   "projcet_details.action.edit_project": "Edit Project",
@@ -2088,39 +2088,39 @@
   "timesheets.column.user": "User",
   "timesheets.column.time": "Time",
   "timesheets.column.billing_status": "Billing Status",
-  "time_entry.dialog.label": "New Time Entry",
-  "time_entry.dialog.project": "Project",
-  "time_entry.dialog.task": "Task",
-  "time_entry.dialog.description": "Description",
-  "time_entry.dialog.duration": "Duration",
-  "time_entry.dialog.date": "Date",
-  "time_entry.dialog.create": "Create",
-  "time_entry.schema.label.project_name": "Project name",
-  "time_entry.schema.label.task_name": "Task name",
-  "time_entry.schema.label.duration": "Duration",
-  "time_entry.schema.label.date": "Date",
+  "project_time_entry.dialog.label": "New Time Entry",
+  "project_time_entry.dialog.project": "Project",
+  "project_time_entry.dialog.task": "Task",
+  "project_time_entry.dialog.description": "Description",
+  "project_time_entry.dialog.duration": "Duration",
+  "project_time_entry.dialog.date": "Date",
+  "project_time_entry.dialog.create": "Create",
+  "project_time_entry.schema.label.project_name": "Project name",
+  "project_time_entry.schema.label.task_name": "Task name",
+  "project_time_entry.schema.label.duration": "Duration",
+  "project_time_entry.schema.label.date": "Date",
   "find_or_choose_a_project": "Find or choose a project",
   "choose_a_task": "Choose a task",
-  "expenses.dialog.label": "New Expense",
-  "expenses.dialog.expense_name": "Expense Name",
-  "expenses.dialog.expense_date": "Date",
-  "expenses.dialog.quantity": "Quantity",
-  "expenses.dialog.charge": "Charge",
-  "expenses.dialog.track_expense": "Track to Expense",
-  "expenses.dialog.unit_price": "Unit Price",
-  "expenses.dialog.expense_total": "Total",
-  "expenses.dialog.percentage": "Percentage",
-  "expenses.dialog.total":"Total:",
-  "expenses.dialog.markup": "% Markup",
-  "expenses.dialog.pass_cost_on": "Pass cost on",
-  "expenses.dialog.custom_pirce": "Custom Pirce",
-  "expenses.dialog.non_chargeable": "Non-chargeable",
-  "expenses.dialog.cost_to_you":"Cost to you",
-  "expenses.dialog.what_you_ll_charge":"What you'll charge",
-  "expense.schema.label.expense_name": "Expense name",
-  "expense.schema.label.estimated_expense": "Estimated expense",
-  "expense.schema.label.quantity": "Quantity",
-  "expense.schema.label.unit_price": "Unit price",
+  "project_expense.dialog.label": "New Expense",
+  "project_expense.dialog.expense_name": "Expense Name",
+  "project_expense.dialog.expense_date": "Date",
+  "project_expense.dialog.quantity": "Quantity",
+  "project_expense.dialog.charge": "Charge",
+  "project_expense.dialog.track_expense": "Track to Expense",
+  "project_expense.dialog.unit_price": "Unit Price",
+  "project_expense.dialog.expense_total": "Total",
+  "project_expense.dialog.percentage": "Percentage",
+  "project_expense.dialog.total":"Total:",
+  "project_expense.dialog.markup": "% Markup",
+  "project_expense.dialog.pass_cost_on": "Pass cost on",
+  "project_expense.dialog.custom_pirce": "Custom Pirce",
+  "project_expense.dialog.non_chargeable": "Non-chargeable",
+  "project_expense.dialog.cost_to_you":"Cost to you",
+  "project_expense.dialog.what_you_ll_charge":"What you'll charge",
+  "project_expense.schema.label.expense_name": "Expense name",
+  "project_expense.schema.label.estimated_expense": "Estimated expense",
+  "project_expense.schema.label.quantity": "Quantity",
+  "project_expense.schema.label.unit_price": "Unit price",
   "choose_an_estimated_expense": "Choose an estimated expense",
   "estimated_expenses.dialog.label": "New Estimated Expense",
   "estimated_expenses.dialog.estimated_expense": "Estimated Expense Name",