feat: project detail tabs.

2026-02-14 11:50:31 +00:00 · 2022-06-14 17:19:59 +02:00
parent 4b992c4bb4
commit 0eb0aee1ef
6 changed files with 130 additions and 136 deletions
--- a/src/containers/Projects/containers/ProjectDetails/ProjectDetailActionsBar.tsx
+++ b/src/containers/Projects/containers/ProjectDetails/ProjectDetailActionsBar.tsx
@@ -44,6 +44,7 @@ function ProjectDetailActionsBar({
      <NavbarGroup>
        <Button
          className={Classes.MINIMAL}
+          icon={<Icon icon={'plus'} />}
          text={<T id={'projcet_details.action.new_transaction'} />}
          onClick={handleNewTransactionBtnClick}
        />
@@ -54,6 +55,7 @@ function ProjectDetailActionsBar({
        />
        <Button
          className={Classes.MINIMAL}
+          icon={<Icon icon="pen-18" />}
          text={<T id={'projcet_details.action.edit_project'} />}
          // onClick={}
        />
--- a/src/containers/Projects/containers/ProjectDetails/ProjectDetailProvider.tsx
+++ b/src/containers/Projects/containers/ProjectDetails/ProjectDetailProvider.tsx
@@ -1,5 +1,6 @@
 // @ts-nocheck
 import React from 'react';
+import DashboardInsider from '../../../../components/Dashboard/DashboardInsider';

 const ProjectDetailContext = React.createContext();

@@ -14,9 +15,9 @@ function ProjectDetailProvider({
  // State provider.
  const provider = {};
  return (
-    <React.Fragment>
+    <DashboardInsider class="timesheets">
      <ProjectDetailContext.Provider value={provider} {...props} />
-    </React.Fragment>
+    </DashboardInsider>
  );
 }

--- a/src/containers/Projects/containers/ProjectDetails/ProjectDetailTabs.tsx
+++ b/src/containers/Projects/containers/ProjectDetails/ProjectDetailTabs.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import styled from 'styled-components';
 import intl from 'react-intl-universal';
 import { Tabs, Tab } from '@blueprintjs/core';
-import TimeSheetDataTable from './TimeSheet/TimeSheetDataTable';
+import TimeSheetDataTable from './TimeSheetDataTable';

 /**
 * Project detail tabs.
@@ -15,7 +15,7 @@ export default function ProjectDetailTabs() {
        animate={true}
        large={true}
        renderActiveTabPanelOnly={true}
-        defaultSelectedTabId={'overview'}
+        defaultSelectedTabId={'timesheet'}
      >
        <Tab id="overview" title={intl.get('project_details.label.overview')} />
        <Tab
@@ -37,16 +37,15 @@ export default function ProjectDetailTabs() {
 const ProjectTabsContent = styled.div`
  .bp3-tabs {
    .bp3-tab-list {
-      position: relative;
-      background-color: #fff;
      padding: 0 20px;
+      background-color: #fff;
      border-bottom: 1px solid #d2dce2;

      &.bp3-large > .bp3-tab {
-        font-size: 14px;
+        font-size: 15px;
        font-weight: 400;
-        color: #646a7d;
-        margin: 0 1rem;
+        color: #7f8596;
+        margin: 0 0.9rem;

        &[aria-selected='true'],
        &:not([aria-disabled='true']):hover {
@@ -59,7 +58,11 @@ const ProjectTabsContent = styled.div`
      }
    }
    .bp3-tab-panel {
-      margin-top: 0;
+      border: 2px solid #f0f0f0;
+      border-radius: 10px;
+      padding: 30px 18px;
+      margin: 30px 15px;
+      background: #fff;
    }
  }
 `;
--- a/src/containers/Projects/containers/ProjectDetails/TimeSheet/TimeSheetDataTable.tsx
+++ b/src/containers/Projects/containers/ProjectDetails/TimeSheet/TimeSheetDataTable.tsx
@@ -1,117 +0,0 @@
-// @ts-nocheck
-import React from 'react';
-import styled from 'styled-components';
-import { DataTable, TableFastCell, DashboardContentTable } from 'components';
-import TableVirtualizedListRows from 'components/Datatable/TableVirtualizedRows';
-import TableSkeletonRows from 'components/Datatable/TableSkeletonRows';
-import TableSkeletonHeader from 'components/Datatable/TableHeaderSkeleton';
-import { useTimeSheetColumns, ActionMenu } from './components';
-import { TableStyle } from '../../../../../common';
-import withSettings from '../../../../Settings/withSettings';
-
-import { compose } from 'utils';
-
-const TimeSheet = [
-  {
-    id: 1,
-    data: '2020-01-01',
-    task: 'Task 1',
-    user: 'User 1',
-    time: '12:00Am',
-    billingStatus: '',
-  },
-  {
-    id: 2,
-    data: '2021-01-01',
-    task: 'Task 2',
-    user: 'User 2',
-    time: '12:00Am',
-    billingStatus: '',
-  },
-  {
-    id: 3,
-    data: '2022-01-01',
-    task: 'Task 3',
-    user: 'User 3',
-    time: '12:00Am',
-    billingStatus: '',
-  },
-];
-
-/**
- * TimeSheet DataTable.
- * @returns
- */
-function TimeSheetDataTable({
-  // #withSettings
-  timeSheetsTableSize,
-}) {
-  // Retrieve timesheet table columns.
-  const columns = useTimeSheetColumns();
-
-  return (
-    <DashboardContentTable>
-      <TimeSheetsTable
-        columns={columns}
-        data={TimeSheet}
-        // loading={}
-        // headerLoading={}
-        noInitialFetch={true}
-        sticky={true}
-        expandColumnSpace={1}
-        expandToggleColumn={2}
-        selectionColumnWidth={45}
-        TableCellRenderer={TableFastCell}
-        TableLoadingRenderer={TableSkeletonRows}
-        TableRowsRenderer={TableVirtualizedListRows}
-        TableHeaderSkeletonRenderer={TableSkeletonHeader}
-        vListrowHeight={timeSheetsTableSize === 'small' ? 32 : 40}
-        vListOverscanRowCount={0}
-        styleName={TableStyle.Constrant}
-        // payload={{}}
-      />
-    </DashboardContentTable>
-  );
-}
-
-export default compose(
-  withSettings(({ timeSheetsSettings }) => ({
-    timeSheetsTableSize: timeSheetsSettings?.tableSize,
-  })),
-)(TimeSheetDataTable);
-
-const DashboardConstrantTable = styled(DataTable)`
-  .table {
-    .thead {
-      .th {
-        background: #fff;
-      }
-    }
-
-    .tbody {
-      .tr:last-child .td {
-        border-bottom: 0;
-      }
-    }
-  }
-`;
-
-const TimeSheetsTable = styled(DashboardConstrantTable)`
-  .table .tbody {
-    .tbody-inner .tr.no-results {
-      .td {
-        padding: 2rem 0;
-        font-size: 14px;
-        color: #888;
-        font-weight: 400;
-        border-bottom: 0;
-      }
-    }
-
-    .tbody-inner {
-      .tr .td:not(:first-child) {
-        border-left: 1px solid #e6e6e6;
-      }
-    }
-  }
-`;
--- a/src/containers/Projects/containers/ProjectDetails/TimeSheetDataTable/components.tsx
+++ b/src/containers/Projects/containers/ProjectDetails/TimeSheetDataTable/components.tsx
@@ -1,17 +1,33 @@
 import React from 'react';
 import intl from 'react-intl-universal';
-import { FormatDateCell } from 'components';
+import { FormatDateCell, Icon } from 'components';
 import { Menu, MenuDivider, MenuItem, Intent } from '@blueprintjs/core';
+import { safeCallback } from 'utils';

 /**
 * Table actions cell.
 */
-export const ActionMenu = ({ row: { original }, payload: {} }) => <Menu></Menu>;
+
+export function ActionsMenu({
+  payload: { onDelete, onViewDetails },
+  row: { original },
+}) {
+  return (
+    <Menu>
+      <MenuItem
+        text={'Delete'}
+        intent={Intent.DANGER}
+        onClick={safeCallback(onDelete, original)}
+        icon={<Icon icon="trash-16" iconSize={16} />}
+      />
+    </Menu>
+  );
+}

 /**
 * Retrieve timesheet list columns columns.
 */
-export const useTimeSheetColumns = () => {
+export function useTimeSheetColumns() {
  return React.useMemo(
    () => [
      {
@@ -19,7 +35,7 @@ export const useTimeSheetColumns = () => {
        Header: intl.get('timesheets.column.date'),
        accessor: 'date',
        Cell: FormatDateCell,
-        width: 115,
+        width: 100,
        className: 'date',
        clickable: true,
        textOverview: true,
@@ -28,7 +44,7 @@ export const useTimeSheetColumns = () => {
        id: 'task',
        Header: intl.get('timesheets.column.task'),
        accessor: 'task',
-        width: 115,
+        width: 100,
        className: 'task',
        clickable: true,
        textOverview: true,
@@ -37,7 +53,7 @@ export const useTimeSheetColumns = () => {
        id: 'user',
        Header: intl.get('timesheets.column.user'),
        accessor: 'user',
-        width: 115,
+        width: 100,
        className: 'user',
        clickable: true,
        textOverview: true,
@@ -46,7 +62,7 @@ export const useTimeSheetColumns = () => {
        id: 'time',
        Header: intl.get('timesheets.column.time'),
        accessor: 'time',
-        width: 115,
+        width: 100,
        className: 'user',
        align: 'right',
        clickable: true,
@@ -56,7 +72,7 @@ export const useTimeSheetColumns = () => {
        id: 'billingStatus',
        Header: intl.get('timesheets.column.billing_status'),
        accessor: 'billing_status',
-        width: 160,
+        width: 140,
        className: 'billingStatus',
        clickable: true,
        textOverview: true,
@@ -64,4 +80,4 @@ export const useTimeSheetColumns = () => {
    ],
    [],
  );
-};
+}
--- a/src/containers/Projects/containers/ProjectDetails/TimeSheetDataTable/index.tsx
+++ b/src/containers/Projects/containers/ProjectDetails/TimeSheetDataTable/index.tsx
@@ -0,0 +1,89 @@
+// @ts-nocheck
+import React from 'react';
+import styled from 'styled-components';
+import { DataTable, TableFastCell } from 'components';
+import TableVirtualizedListRows from 'components/Datatable/TableVirtualizedRows';
+import TableSkeletonRows from 'components/Datatable/TableSkeletonRows';
+import TableSkeletonHeader from 'components/Datatable/TableHeaderSkeleton';
+import { useTimeSheetColumns, ActionsMenu } from './components';
+import { TableStyle } from '../../../../../common';
+import withSettings from '../../../../Settings/withSettings';
+
+import { compose } from 'utils';
+
+const TimeSheet = [
+  {
+    id: 1,
+    data: '2020-01-01',
+    task: 'Task 1',
+    user: 'User 1',
+    time: '12:00Am',
+    billingStatus: '',
+  },
+];
+
+/**
+ * TimeSheet DataTable.
+ * @returns
+ */
+function TimeSheetDataTable({
+  // #withSettings
+  timeSheetsTableSize,
+}) {
+  // Retrieve timesheet table columns.
+  const columns = useTimeSheetColumns();
+
+  // Handle delete timesheet.
+  const handleDeleteTimeSheet = () => {};
+
+  return (
+    <TimeSheetsTable
+      columns={columns}
+      data={TimeSheet}
+      // loading={}
+      // headerLoading={}
+      noInitialFetch={true}
+      sticky={true}
+      expandColumnSpace={1}
+      expandToggleColumn={2}
+      selectionColumnWidth={45}
+      ContextMenu={ActionsMenu}
+      TableCellRenderer={TableFastCell}
+      TableLoadingRenderer={TableSkeletonRows}
+      TableRowsRenderer={TableVirtualizedListRows}
+      TableHeaderSkeletonRenderer={TableSkeletonHeader}
+      vListrowHeight={timeSheetsTableSize === 'small' ? 32 : 40}
+      vListOverscanRowCount={0}
+      styleName={TableStyle.Constrant}
+      payload={{
+        onDelete: handleDeleteTimeSheet,
+      }}
+    />
+  );
+}
+
+export default compose(
+  withSettings(({ timeSheetsSettings }) => ({
+    timeSheetsTableSize: timeSheetsSettings?.tableSize,
+  })),
+)(TimeSheetDataTable);
+
+const TimeSheetsTable = styled(DataTable)`
+  .table .tbody {
+    .tbody-inner .tr.no-results {
+      .td {
+        padding: 2rem 0;
+        font-size: 14px;
+        color: #888;
+        font-weight: 400;
+        border-bottom: 0;
+      }
+    }
+
+    .tbody-inner {
+      .tr .td:not(:first-child) {
+        border-left: 1px solid #e6e6e6;
+      }
+    }
+  }
+`;