Duration cell mvp

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 <></>;
+}

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:

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