From 730ae4145347d0399bc0be57b74e20a6bd5ab8ca Mon Sep 17 00:00:00 2001
From: Shams mosowi <shams.mosowi@gmail.com>
Date: Sat, 29 Aug 2020 12:01:23 +1000
Subject: [PATCH] Duration cell mvp

---
 .../components/Table/formatters/Duration.tsx  | 50 +++++++++++++++++++
 www/src/components/Table/formatters/index.tsx |  5 ++
 www/src/constants/fields.tsx                  |  7 ++-
 3 files changed, 60 insertions(+), 2 deletions(-)
 create mode 100644 www/src/components/Table/formatters/Duration.tsx

diff --git a/www/src/components/Table/formatters/Duration.tsx b/www/src/components/Table/formatters/Duration.tsx
new file mode 100644
index 00000000..d8c0a241
--- /dev/null
+++ b/www/src/components/Table/formatters/Duration.tsx
@@ -0,0 +1,50 @@
+import React from "react";
+
+import { CustomCellProps } from "./withCustomCell";
+import { makeStyles, createStyles } from "@material-ui/core";
+
+export const timeDistance = (date1, date2) => {
+  let distance = Math.abs(date1 - date2);
+  const hours = Math.floor(distance / 3600000);
+  distance -= hours * 3600000;
+  const minutes = Math.floor(distance / 60000);
+  distance -= minutes * 60000;
+  const seconds = Math.floor(distance / 1000);
+  return `${hours ? `${hours}:` : ""}${("0" + minutes).slice(-2)}:${(
+    "0" + seconds
+  ).slice(-2)}`;
+};
+
+const useStyles = makeStyles((theme) =>
+  createStyles({
+    root: {
+      height: "100%",
+    },
+  })
+);
+
+export default function Duration({
+  rowIdx,
+  column,
+  value,
+  onSubmit,
+}: CustomCellProps) {
+  const classes = useStyles();
+  const startDate = value.start?.toDate();
+  const endDate = value.end?.toDate();
+  if (!startDate && !endDate) {
+    return <></>;
+  }
+  if (startDate && !endDate) {
+    const now = new Date();
+    const duration = timeDistance(startDate, now);
+
+    return <>{duration}</>;
+  }
+  if (startDate && endDate) {
+    const duration = timeDistance(endDate, startDate);
+
+    return <>{duration}</>;
+  }
+  return <></>;
+}
diff --git a/www/src/components/Table/formatters/index.tsx b/www/src/components/Table/formatters/index.tsx
index e19f1b07..7e85ef5c 100644
--- a/www/src/components/Table/formatters/index.tsx
+++ b/www/src/components/Table/formatters/index.tsx
@@ -7,6 +7,9 @@ const MultiSelect = lazy(() =>
   import("./MultiSelect" /* webpackChunkName: "MultiSelect" */)
 );
 const DatePicker = lazy(() => import("./Date" /* webpackChunkName: "Date" */));
+const Duration = lazy(() =>
+  import("./Duration" /* webpackChunkName: "Duration" */)
+);
 const Rating = lazy(() => import("./Rating" /* webpackChunkName: "Rating" */));
 const Checkbox = lazy(() =>
   import("./Checkbox" /* webpackChunkName: "Checkbox" */)
@@ -90,6 +93,8 @@ export const getFormatter = (column: any) => {
 
     case FieldType.user:
       return withCustomCell(User);
+    case FieldType.duration:
+      return withCustomCell(Duration);
     case FieldType.code:
       return withCustomCell(Code);
     case FieldType.richText:
diff --git a/www/src/constants/fields.tsx b/www/src/constants/fields.tsx
index 59f5ad9b..d664ab03 100644
--- a/www/src/constants/fields.tsx
+++ b/www/src/constants/fields.tsx
@@ -36,7 +36,7 @@ import RichTextIcon from "@material-ui/icons/TextFormat";
 import ColorIcon from "@material-ui/icons/Colorize";
 import SliderIcon from "assets/icons/Slider";
 import UserIcon from "@material-ui/icons/Person";
-
+import DurationIcon from "@material-ui/icons/Timer";
 export {
   ShortTextIcon,
   LongTextIcon,
@@ -63,6 +63,7 @@ export {
   ColorIcon,
   SliderIcon,
   UserIcon,
+  DurationIcon,
 };
 
 export enum FieldType {
@@ -99,6 +100,7 @@ export enum FieldType {
   color = "COLOR",
   slider = "SLIDER",
   user = "USER",
+  duration = "DURATION",
 
   last = "LAST",
 }
@@ -153,6 +155,7 @@ export const FIELDS = [
   { icon: <ColorIcon />, name: "Color", type: FieldType.color },
   { icon: <SliderIcon />, name: "Slider", type: FieldType.slider },
   { icon: <UserIcon />, name: "User", type: FieldType.user },
+  { icon: <DurationIcon />, name: "Duration", type: FieldType.duration },
 ];
 
 /**
@@ -169,7 +172,7 @@ export const getFieldIcon = (fieldType: FieldType) => {
  * @param fieldType
  */
 export const isFieldType = (fieldType: any) => {
-  const fieldTypes = FIELDS.map(field => field.type);
+  const fieldTypes = FIELDS.map((field) => field.type);
   return fieldTypes.includes(fieldType);
 };