feat: add api project billable entries dialog.

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>
+    <Choose>
-      <ProjectBillableEntriesFormFields />
+      <Choose.When condition={isEmptyStatus}>
-      <ProjectBillableEntriesFormFloatingActions />
+        <EmptyStatuCallout />
-    </Form>
+      </Choose.When>
+      <Choose.Otherwise>
+        <Form>
+          <ProjectBillableEntriesFormFields />
+          <ProjectBillableEntriesFormFloatingActions />
+        </Form>
+      </Choose.Otherwise>
+    </Choose>
   );
 }

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>
   );
 }

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;
   }
 `;

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>
   );

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>
+    <BillableEntriesWrap>
-      <ProjectEntryHeader>
+      <BillableEntriesHeader>
-        <ProjectEntryTitle>{projectBillableEntry.title}</ProjectEntryTitle>
+        <BillableEntryType>
-        <ProjectEntrtyItemContent>
+          {intl.get('project_billable_entries.billable_type', {
-          <ProjectEntryItem>{projectBillableEntry.date}</ProjectEntryItem>
+            value: billableEntry.billable_type,
-          <ProjectEntryItem>{projectBillableEntry.time}</ProjectEntryItem>
+          })}
-        </ProjectEntrtyItemContent>
+        </BillableEntryType>
-      </ProjectEntryHeader>
+        <BillableEntryContent>
-      <ProjectEntryContent>
+          <BillableEntryItem>{billableEntry.date}</BillableEntryItem>
-        <ProjectEntryAmount>{projectBillableEntry.billable_amount}</ProjectEntryAmount>
+          <BillableEntryItem>{billableEntry.time}</BillableEntryItem>
-      </ProjectEntryContent>
+        </BillableEntryContent>
-      <ProjectEntryFoorer>
+      </BillableEntriesHeader>
-        <ProjectEntryButton small={true}>Add</ProjectEntryButton>
+      <BillableEntriesContent>
-        <ProjectEntryButton small={true}>Show</ProjectEntryButton>
+        <BillableEntryAmount>
-      </ProjectEntryFoorer>
+          {billableEntry.billable_amount_formatted}
-    </ProjectEntryBox>
+        </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 BillableEntriesHeader = styled.div``;
-const ProjectEntryTitle = 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;