feat: add api project billable entries dialog.

2026-02-20 14:50:32 +00:00 · 2022-09-25 22:24:06 +02:00
parent b83faef167
commit 6055184084
5 changed files with 111 additions and 43 deletions
--- a/src/containers/Projects/containers/ProjectBillableEntriesFormDialog/ProjectBillableEntriesFormContent.tsx
+++ b/src/containers/Projects/containers/ProjectBillableEntriesFormDialog/ProjectBillableEntriesFormContent.tsx
@@ -2,6 +2,9 @@

 import React from 'react';
 import { Form } from 'formik';
+import { Choose } from '@/components';
+import { EmptyStatuCallout } from './utils';
+import { useProjectBillableEntriesFormContext } from './ProjectBillableEntriesFormProvider';
 import ProjectBillableEntriesFormFields from './ProjectBillableEntriesFormFields';
 import ProjectBillableEntriesFormFloatingActions from './ProjectBillableEntriesFormFloatingActions';

@@ -10,10 +13,18 @@ import ProjectBillableEntriesFormFloatingActions from './ProjectBillableEntriesF
 * @returns
 */
 export default function ProjectBillableEntriesFormContent() {
+  const { isEmptyStatus } = useProjectBillableEntriesFormContext();
  return (
-    <Form>
-      <ProjectBillableEntriesFormFields />
-      <ProjectBillableEntriesFormFloatingActions />
-    </Form>
+    <Choose>
+      <Choose.When condition={isEmptyStatus}>
+        <EmptyStatuCallout />
+      </Choose.When>
+      <Choose.Otherwise>
+        <Form>
+          <ProjectBillableEntriesFormFields />
+          <ProjectBillableEntriesFormFloatingActions />
+        </Form>
+      </Choose.Otherwise>
+    </Choose>
  );
 }
--- a/src/containers/Projects/containers/ProjectBillableEntriesFormDialog/ProjectBillableEntriesFormFields.tsx
+++ b/src/containers/Projects/containers/ProjectBillableEntriesFormDialog/ProjectBillableEntriesFormFields.tsx
@@ -2,16 +2,25 @@

 import React from 'react';
 import { useFormikContext } from 'formik';
-import { Classes } from '@blueprintjs/core';
+import { Classes, Position } from '@blueprintjs/core';
 import {
  FFormGroup,
  FInputGroup,
+  FDateInput,
  FieldRequiredHint,
  FormattedMessage as T,
 } from '@/components';
+import {
+  inputIntent,
+  momentFormatter,
+  tansformDateValue,
+  handleDateChange,
+} from '@/utils';
+import classNames from 'classnames';
+import { CLASSES } from '@/constants/classes';
 import { ProjectBillableTypeSuggestField } from '../../components';
 import { billableTypeOption } from '../common';
-import { ProjectRowDivider, ProjectEntiresBox } from './components';
+import { ProjectRowDivider, BillableEntiresBox } from './components';
 import { useProjectBillableEntriesFormContext } from './ProjectBillableEntriesFormProvider';

 /**
@@ -22,6 +31,8 @@ export default function ProjectBillableEntriesFormFields() {
  // Formik context.
  const { values } = useFormikContext();

+  const { billableEntries } = useProjectBillableEntriesFormContext();
+
  return (
    <div className={Classes.DIALOG_BODY}>
      {/*------------ Filter by Date -----------*/}
@@ -29,8 +40,17 @@ export default function ProjectBillableEntriesFormFields() {
        name={'date'}
        label={<T id={'project_billable_entries.dialog.filter_by_date'} />}
        labelInfo={<FieldRequiredHint />}
+        className={classNames(CLASSES.FILL, 'form-group--date')}
      >
-        <FInputGroup name="date" placeholder={'Placeholder text'} />
+        <FDateInput
+          {...momentFormatter('YYYY/MM/DD')}
+          name="date"
+          formatDate={(date) => date.toLocaleString()}
+          popoverProps={{
+            position: Position.BOTTOM,
+            minimal: true,
+          }}
+        />
      </FFormGroup>

      <ProjectRowDivider />
@@ -47,7 +67,7 @@ export default function ProjectBillableEntriesFormFields() {
        />
      </FFormGroup>

-      <ProjectEntiresBox billableEntries={[]} />
+      <BillableEntiresBox billableEntries={billableEntries} />
    </div>
  );
 }
--- a/src/containers/Projects/containers/ProjectBillableEntriesFormDialog/ProjectBillableEntriesFormFloatingActions.tsx
+++ b/src/containers/Projects/containers/ProjectBillableEntriesFormDialog/ProjectBillableEntriesFormFloatingActions.tsx
@@ -5,6 +5,7 @@ import styled from 'styled-components';
 import { useFormikContext } from 'formik';
 import { Intent, Button, Classes } from '@blueprintjs/core';
 import { FormattedMessage as T } from '@/components';
+import { useProjectBillableEntriesFormContext } from './ProjectBillableEntriesFormProvider';
 import withDialogActions from '@/containers/Dialog/withDialogActions';
 import { compose } from '@/utils';

@@ -17,7 +18,9 @@ function ProjectEntriesFormFloatingActions({
  closeDialog,
 }) {
  // Formik context.
-  const { isSubmitting } = useFormikContext();
+  const { isSubmitting, values } = useFormikContext();
+
+  const { dialogName } = useProjectBillableEntriesFormContext();

  // Handle close button click.
  const handleCancelBtnClick = () => {
@@ -32,8 +35,11 @@ function ProjectEntriesFormFloatingActions({
          loading={isSubmitting}
          type="submit"
        >
-          Save
+          <T id={'save'} />
        </SaveButton>
+        <Button onClick={handleCancelBtnClick} disabled={isSubmitting}>
+          <T id={'cancel'} />
+        </Button>
      </div>
    </div>
  );
@@ -43,8 +49,6 @@ export default compose(withDialogActions)(ProjectEntriesFormFloatingActions);

 const SaveButton = styled(Button)`
  &.bp3-button {
-    min-width: 80px;
-    border-radius: 16px;
    margin-left: 0px;
  }
 `;
--- a/src/containers/Projects/containers/ProjectBillableEntriesFormDialog/ProjectBillableEntriesFormProvider.tsx
+++ b/src/containers/Projects/containers/ProjectBillableEntriesFormDialog/ProjectBillableEntriesFormProvider.tsx
@@ -1,6 +1,8 @@
 // @ts-nocheck

 import React from 'react';
+import { isEmpty } from 'lodash';
+import { useProjectBillableEntries } from '../../hooks';
 import { DialogContent } from '@/components';

 const ProjectBillableEntriesFormContext = React.createContext();
@@ -15,14 +17,35 @@ function ProjectBillableEntriesFormProvider({
  projectId,
  ...props
 }) {
+  // Handle fetch project billable entries.
+  const { data: billableEntries, isLoading: isProjectBillableEntriesLoading } =
+    useProjectBillableEntries(
+      projectId,
+      {
+        enabled: !!projectId,
+      },
+      {
+        // billable_type: '',
+        // to_date: '',
+      },
+    );
+
+  // Detarmines the datatable empty status.
+  const isEmptyStatus = isEmpty(billableEntries);
+
  //state provider.
  const provider = {
    dialogName,
+    billableEntries,
    projectId,
+    isEmptyStatus,
  };

  return (
-    <DialogContent>
+    <DialogContent
+      name={'project-billable-entries'}
+      isLoading={isProjectBillableEntriesLoading}
+    >
      <ProjectBillableEntriesFormContext.Provider value={provider} {...props} />
    </DialogContent>
  );
--- a/src/containers/Projects/containers/ProjectBillableEntriesFormDialog/components.tsx
+++ b/src/containers/Projects/containers/ProjectBillableEntriesFormDialog/components.tsx
@@ -1,32 +1,42 @@
 // @ts-nocheck

 import React from 'react';
-import { Button } from '@blueprintjs/core';
 import intl from 'react-intl-universal';
+import { Button } from '@blueprintjs/core';
 import styled from 'styled-components';

 /**
- * Projec billable entries item box.
+ * Projec billable entries box.
 * @returns
 */
-function ProjectBillableEntriesItemBox({ projectBillableEntry }) {
+function BillableEntriesBox({ billableEntry }) {
  return (
-    <ProjectEntryBox>
-      <ProjectEntryHeader>
-        <ProjectEntryTitle>{projectBillableEntry.title}</ProjectEntryTitle>
-        <ProjectEntrtyItemContent>
-          <ProjectEntryItem>{projectBillableEntry.date}</ProjectEntryItem>
-          <ProjectEntryItem>{projectBillableEntry.time}</ProjectEntryItem>
-        </ProjectEntrtyItemContent>
-      </ProjectEntryHeader>
-      <ProjectEntryContent>
-        <ProjectEntryAmount>{projectBillableEntry.billable_amount}</ProjectEntryAmount>
-      </ProjectEntryContent>
-      <ProjectEntryFoorer>
-        <ProjectEntryButton small={true}>Add</ProjectEntryButton>
-        <ProjectEntryButton small={true}>Show</ProjectEntryButton>
-      </ProjectEntryFoorer>
-    </ProjectEntryBox>
+    <BillableEntriesWrap>
+      <BillableEntriesHeader>
+        <BillableEntryType>
+          {intl.get('project_billable_entries.billable_type', {
+            value: billableEntry.billable_type,
+          })}
+        </BillableEntryType>
+        <BillableEntryContent>
+          <BillableEntryItem>{billableEntry.date}</BillableEntryItem>
+          <BillableEntryItem>{billableEntry.time}</BillableEntryItem>
+        </BillableEntryContent>
+      </BillableEntriesHeader>
+      <BillableEntriesContent>
+        <BillableEntryAmount>
+          {billableEntry.billable_amount_formatted}
+        </BillableEntryAmount>
+      </BillableEntriesContent>
+      <BillableEntryFooter>
+        <BillableEntryButton small={true}>
+          {intl.get('project_billable_entries.dialog.add')}
+        </BillableEntryButton>
+        <BillableEntryButton small={true}>
+          {intl.get('project_billable_entries.dialog.show')}
+        </BillableEntryButton>
+      </BillableEntryFooter>
+    </BillableEntriesWrap>
  );
 }

@@ -34,13 +44,13 @@ function ProjectBillableEntriesItemBox({ projectBillableEntry }) {
 * Project billable entries box.
 * @returns
 */
-export function ProjectEntiresBox({ billableEntries }) {
+export function BillableEntiresBox({ billableEntries }) {
  return billableEntries.map((entries) => (
-    <ProjectBillableEntriesItemBox projectBillableEntry={entries} />
+    <BillableEntriesBox billableEntry={entries} />
  ));
 }

-const ProjectEntryBox = styled.div`
+const BillableEntriesWrap = styled.div`
  display: flex;
  flex-direction: column;
  border-radius: 5px;
@@ -51,30 +61,30 @@ const ProjectEntryBox = styled.div`
  margin-bottom: 15px;
  position: relative;
 `;
-const ProjectEntryHeader = styled.div``;
-const ProjectEntryTitle = styled.div`
+const BillableEntriesHeader = styled.div``;
+const BillableEntryType = styled.div`
  font-size: 14px;
  line-height: 1.5;
  font-weight: 500;
  color: #444444;
 `;
-const ProjectEntrtyItemContent = styled.div`
+const BillableEntryContent = styled.div`
  display: flex;
  justify-content: space-between;
 `;
-const ProjectEntryItem = styled.div`
+const BillableEntryItem = styled.div`
  font-weight: 400;
  font-size: 10px;
  color: #666666;
 `;

-const ProjectEntryContent = styled.div`
+const BillableEntriesContent = styled.div`
  flex: 1 0 auto;
  line-height: 2rem;
  border-bottom: 1px solid #e3e3e3;
 `;

-const ProjectEntryAmount = styled.div`
+const BillableEntryAmount = styled.div`
  font-size: 14px;
  font-weight: 500;
  color: #111111;
@@ -87,11 +97,11 @@ export const ProjectRowDivider = styled.div`
  margin-top: 15px;
 `;

-const ProjectEntryFoorer = styled.div`
+const BillableEntryFooter = styled.div`
  padding: 0;
 `;

-const ProjectEntryButton = styled(Button)`
+const BillableEntryButton = styled(Button)`
  &.bp3-button.bp3-small,
  &.bp3-button:not([class*='bp3-intent-']):not(.bp3-minimal).bp3-small {
    font-size: 12px;