fix(projects): optimize style time entry form.

2026-02-16 04:40:32 +00:00 · 2022-10-05 23:29:13 +02:00
parent f9a7021f55
commit 048fcda9dc
8 changed files with 94 additions and 136 deletions
--- a/src/containers/Projects/containers/ProjectDetails/ProjectPurchasesTable/index.tsx
+++ b/src/containers/Projects/containers/ProjectDetails/ProjectPurchasesTable/index.tsx
@@ -2,7 +2,8 @@
 import React from 'react';
 import styled from 'styled-components';
 import { ProjectPurchasesTable } from './ProjectPurchasesTable';
-import { DashboardContentTable } from '@/components';
+import { Box, DashboardContentTable } from '@/components';
+import { ProjectDetailHeader } from '../ProjectDetailsHeader';

 /**
 *
@@ -10,8 +11,11 @@ import { DashboardContentTable } from '@/components';
 */
 export default function ProjectPurchasesTableRoot() {
  return (
-    <DashboardContentTable>
-      <ProjectPurchasesTable />
-    </DashboardContentTable>
+    <Box>
+      <ProjectDetailHeader />
+      <DashboardContentTable>
+        <ProjectPurchasesTable />
+      </DashboardContentTable>
+    </Box>
  );
 }
--- a/src/containers/Projects/containers/ProjectDetails/ProjectTimeSheets/ProjectTimesheetsTable.tsx
+++ b/src/containers/Projects/containers/ProjectDetails/ProjectTimeSheets/ProjectTimesheetsTable.tsx
@@ -16,6 +16,7 @@ import withAlertsActions from '@/containers/Alert/withAlertActions';
 import withDialogActions from '@/containers/Dialog/withDialogActions';

 import { compose } from '@/utils';
+import { DialogsName } from '@/constants/dialogs';

 /**
 * Timesheet DataTable.
@@ -39,11 +40,10 @@ function ProjectTimesheetsTableRoot({
  const handleDeleteTimesheet = ({ id }) => {
    openAlert('project-timesheet-delete', { timesheetId: id });
  };
-
+  // Handle edit timesheet.
  const handleEditTimesheet = ({ id }) => {
    openDialog('project-time-entry-form', { timesheetId: id, action: 'edit' });
  };
-
  // Local storage memorizing columns widths.
  const [initialColumnsWidths, , handleColumnResizing] =
    useMemorizedColumnsWidths(TABLES.TIMESHEETS);
@@ -87,33 +87,19 @@ const ProjectTimesheetDataTable = styled(DataTable)`

    .tbody {
      .tr .td {
-        padding: 0.4rem 0.8rem;
+        padding-top: 0.7rem;
+        padding-bottom: 0.7rem;
+
+        &.td-name {
+          padding-left: 1rem;
+        }
+        &.td-actions{
+          padding-right: 1rem;
+        }
      }

-      .avatar.td {
-        .cell-inner {
-          .avatar {
-            display: inline-block;
-            background: #adbcc9;
-            border-radius: 50%;
-            text-align: center;
-            font-weight: 400;
-            color: #fff;
-
-            &[data-size='medium'] {
-              height: 30px;
-              width: 30px;
-              line-height: 30px;
-              font-size: 14px;
-            }
-            &[data-size='small'] {
-              height: 25px;
-              width: 25px;
-              line-height: 25px;
-              font-size: 12px;
-            }
-          }
-        }
+      .tr:last-of-type .td{
+        border-bottom: 0;
      }
    }
  }
--- a/src/containers/Projects/containers/ProjectDetails/ProjectTimeSheets/components.tsx
+++ b/src/containers/Projects/containers/ProjectDetails/ProjectTimeSheets/components.tsx
@@ -30,22 +30,13 @@ export function ActionsMenu({
  );
 }

-/**
- * Avatar cell.
- */
-export const AvatarCell = ({ row: { original }, size }) => (
-  <span className="avatar" data-size={size}>
-    {firstLettersArgs(original?.display_name, original?.task_name)}
-  </span>
-);
-
 /**
 * Timesheet accessor.
 */
 export const TimesheetAccessor = (timesheet) => (
  <React.Fragment>
    <TimesheetHeader>
-      <TimesheetTitle>{timesheet.display_name}</TimesheetTitle>
+      <TimesheetTitle>{timesheet.customer_name}</TimesheetTitle>
      <TimesheetSubTitle>{timesheet.task_name}</TimesheetSubTitle>
    </TimesheetHeader>
    <TimesheetContent>
@@ -63,19 +54,19 @@ const TimesheetHeader = styled.div`
  flex-flow: wrap;
 `;
 const TimesheetTitle = styled.span`
-  font-weight: 500;
-  margin-right: 12px;
-  line-height: 1.5rem;
+  font-weight: 600;
+  margin-right: 8px;
+`;
+const TimesheetSubTitle = styled.span`
+  font-size: 13px;
+  opacity: 0.9;
 `;
-
-const TimesheetSubTitle = styled.span``;
 const TimesheetContent = styled.div`
  display: block;
  white-space: nowrap;
  font-size: 13px;
-  opacity: 0.75;
-  margin-bottom: 0.1rem;
-  line-height: 1.2rem;
+  color: #5D5E71;
+  margin-top: 0.25rem;
 `;

 const TimesheetDescription = styled.span`
--- a/src/containers/Projects/containers/ProjectDetails/ProjectTimeSheets/hooks.ts
+++ b/src/containers/Projects/containers/ProjectDetails/ProjectTimeSheets/hooks.ts
@@ -9,16 +9,6 @@ import { AvatarCell, TimesheetAccessor } from './components';
 export function useProjectTimesheetColumns() {
  return React.useMemo(
    () => [
-      {
-        id: 'avatar',
-        Header: '',
-        Cell: AvatarCell,
-        className: 'avatar',
-        width: 45,
-        disableResizing: true,
-        disableSortBy: true,
-        clickable: true,
-      },
      {
        id: 'name',
        Header: 'Header',
--- a/src/containers/Projects/containers/ProjectTimeEntryFormDialog/ProjectTimeEntryFormFields.tsx
+++ b/src/containers/Projects/containers/ProjectTimeEntryFormDialog/ProjectTimeEntryFormFields.tsx
@@ -13,6 +13,7 @@ import {
  FTextArea,
  FieldRequiredHint,
  FormattedMessage as T,
+  Stack,
 } from '@/components';
 import { useProjectTimeEntryFormContext } from './ProjectTimeEntryFormProvider';
 import {
@@ -37,8 +38,25 @@ function ProjectTimeEntryFormFields() {

  return (
    <div className={Classes.DIALOG_BODY}>
-      {/*------------ Project -----------*/}
-      <If condition={!projectId}>
+      <Stack spacing={20}>
+        {/*------------ Date -----------*/}
+        <FFormGroup
+          label={intl.get('project_time_entry.dialog.date')}
+          name={'date'}
+          className={classNames(CLASSES.FILL, 'form-group--date')}
+        >
+          <FDateInput
+            {...momentFormatter('YYYY/MM/DD')}
+            name="date"
+            formatDate={(date) => date.toLocaleString()}
+            popoverProps={{
+              position: Position.BOTTOM,
+              minimal: true,
+            }}
+          />
+        </FFormGroup>
+
+        {/*------------ Project -----------*/}
        <FFormGroup
          name={'project_id'}
          label={<T id={'project_time_entry.dialog.project'} />}
@@ -51,55 +69,51 @@ function ProjectTimeEntryFormFields() {
            input={ProjectSelectButton}
          />
        </FFormGroup>
-      </If>
-      {/*------------ Task -----------*/}
-      <FFormGroup
-        name={'task_id'}
-        label={<T id={'project_time_entry.dialog.task'} />}
-        labelInfo={<FieldRequiredHint />}
-        className={classNames('form-group--select-list', Classes.FILL)}
-      >
-        <ProjectTaskSelect
-          name={'task_id'}
-          tasks={projectTasks}
-          popoverProps={{ minimal: true }}
-        />
-      </FFormGroup>

-      {/*------------ Duration -----------*/}
-      <FFormGroup
-        label={intl.get('project_time_entry.dialog.duration')}
-        name={'duration'}
-        labelInfo={<FieldRequiredHint />}
-      >
-        <FInputGroup name="duration" inputProps={{}} />
-      </FFormGroup>
-      {/*------------ Date -----------*/}
-      <FFormGroup
-        label={intl.get('project_time_entry.dialog.date')}
-        name={'date'}
-        className={classNames(CLASSES.FILL, 'form-group--date')}
-      >
-        <FDateInput
-          {...momentFormatter('YYYY/MM/DD')}
-          name="date"
-          formatDate={(date) => date.toLocaleString()}
-          popoverProps={{
-            position: Position.BOTTOM,
-            minimal: true,
-          }}
-        />
-      </FFormGroup>
-      {/*------------ Description -----------*/}
-      <FFormGroup
-        name={'description'}
-        label={intl.get('project_time_entry.dialog.description')}
-        className={'form-group--description'}
-      >
-        <FTextArea name={'description'} />
-      </FFormGroup>
+        {/*------------ Task -----------*/}
+        <FFormGroup
+          name={'task_id'}
+          label={<T id={'project_time_entry.dialog.task'} />}
+          labelInfo={<FieldRequiredHint />}
+          className={classNames('form-group--select-list', Classes.FILL)}
+        >
+          <ProjectTaskSelect
+            name={'task_id'}
+            tasks={projectTasks}
+            popoverProps={{ minimal: true }}
+          />
+        </FFormGroup>
+
+        {/*------------ Duration -----------*/}
+        <FFormGroup
+          label={intl.get('project_time_entry.dialog.duration')}
+          name={'duration'}
+          labelInfo={<FieldRequiredHint />}
+        >
+          <DurationInputGroup
+            name="duration"
+            inputProps={{}}
+            placeholder="HH:MM"
+          />
+        </FFormGroup>
+
+        {/*------------ Description -----------*/}
+        <FFormGroup
+          name={'description'}
+          label={intl.get('project_time_entry.dialog.description')}
+          className={'form-group--description'}
+        >
+          <FTextArea name={'description'} />
+        </FFormGroup>
+      </Stack>
    </div>
  );
 }

 export default ProjectTimeEntryFormFields;
+
+const DurationInputGroup = styled(FInputGroup)`
+  .bp3-input {
+    width: 150px;
+  }
+`;
--- a/src/containers/Projects/containers/ProjectTimeEntryFormDialog/ProjectTimeEntryFormFloatingActions.tsx
+++ b/src/containers/Projects/containers/ProjectTimeEntryFormDialog/ProjectTimeEntryFormFloatingActions.tsx
@@ -29,13 +29,10 @@ function ProjectTimeEntryFormFloatingActions({
  return (
    <div className={Classes.DIALOG_FOOTER}>
      <div className={Classes.DIALOG_FOOTER_ACTIONS}>
-        <Button onClick={handleCancelBtnClick} style={{ minWidth: '75px' }}>
-          <T id={'cancel'} />
-        </Button>
        <Button
          intent={Intent.PRIMARY}
          loading={isSubmitting}
-          style={{ minWidth: '75px' }}
+          style={{ minWidth: '95px' }}
          type="submit"
        >
          <T id={'project_time_entry.dialog.create'} />
--- a/src/containers/Projects/containers/ProjectTimeEntryFormDialog/index.tsx
+++ b/src/containers/Projects/containers/ProjectTimeEntryFormDialog/index.tsx
@@ -49,7 +49,7 @@ export default compose(withDialogRedux())(ProjectTimeEntryFormDialog);
 const ProjectTimeEntryFormDialogRoot = styled(Dialog)`
  .bp3-dialog-body {
    .bp3-form-group {
-      margin-bottom: 15px;
+      margin-bottom: 0;

      label.bp3-label {
        margin-bottom: 3px;
--- a/src/style/containers/FinancialStatements/DrawerHeader.scss
+++ b/src/style/containers/FinancialStatements/DrawerHeader.scss
@@ -13,13 +13,6 @@
  &.is-hidden {
    visibility: hidden;
  }
-  .row {
-    .col {
-      max-width: 400px;
-      min-width: 250px;
-    }
-  }
-
  .bp3-drawer {
    box-shadow: 0 0 0 transparent;
    max-height: 550px;
@@ -38,14 +31,6 @@
    }
  }

-  .bp3-form-group {
-    margin-bottom: 22px;
-
-    label.bp3-label {
-      margin-bottom: 6px;
-    }
-  }
-
  .bp3-button.button--submit-filter {
    min-height: 34px;
    padding-left: 16px;
@@ -102,9 +87,6 @@
    }
  }

-  .bp3-tab-panel {
-  }
-
  &__footer {
    background-color: #ecf0f3;
    border-top: 1px solid #c3cdd5;
@@ -114,7 +96,6 @@
    bottom: 0;
    width: 100%;
  }
-
  .row {
    margin-left: -0.85rem;
    margin-right: -0.85rem;
@@ -129,9 +110,4 @@
      height: auto;
    }
  }
-  // .bp3-multi-select-popover .bp3-menu {
-  //   max-height: 200px;
-  //   width: 300px;
-  //   overflow: auto;
-  // }
 }