@performant-software/user-defined-fields 2.2.10 → 2.2.11-beta.1

package/dist/index.es8.js

@@ -1,8 +1,8 @@
-import { j as h } from "./index.es14.js";
-import { BooleanIcon as v } from "@performant-software/semantic-components";
-import { Date as D } from "@performant-software/shared-components";
-import { useState as a, useCallback as y, useMemo as x, useEffect as b } from "react";
-import R from "./index.es17.js";
+import { j as D } from "./index.es14.js";
+import { BooleanIcon as h } from "@performant-software/semantic-components";
+import { Date as v, FuzzyDate as y } from "@performant-software/shared-components";
+import { useState as n, useCallback as x, useMemo as b, useEffect as z } from "react";
+import F from "./index.es17.js";
 import "./index.es18.js";
 import "./index.es19.js";
 import "./index.es20.js";
@@ -30,47 +30,50 @@ import "./index.es41.js";
 import "./index.es42.js";
 import "./index.es43.js";
 import "./index.es44.js";
-import { DataTypes as n } from "./index.es7.js";
-import j from "./index.es9.js";
-const ie = (s, l, i = {}) => {
-  const [p, d] = a([]), [c, u] = a(!1), { sortable: f = !0 } = i, m = y((r, e) => {
+import { DataTypes as s } from "./index.es7.js";
+import R from "./index.es9.js";
+const me = (p, l, m = {}) => {
+  const [a, c] = n([]), [d, u] = n(!1), { sortable: f = !0 } = m, i = x((r, e) => {
     let t = r;
-    return i.resolveRecord && (t = i.resolveRecord(r)), t.user_defined ? t.user_defined[e.uuid] : null;
-  }, [i.resolveRecord]), _ = x(() => {
+    return m.resolveRecord && (t = m.resolveRecord(r)), t.user_defined ? t.user_defined[e.uuid] : null;
+  }, [m.resolveRecord]), _ = b(() => {
     const r = [];
-    return R.each(p, (e) => {
+    return F.each(a, (e) => {
       const t = {
         name: e.uuid,
         label: e.column_name,
         hidden: !0,
         sortable: f
       };
-      e.data_type === n.boolean ? r.push({
+      e.data_type === s.boolean ? r.push({
         ...t,
-        render: (o) => /* @__PURE__ */ h.jsx(
-          v,
+        render: (o) => /* @__PURE__ */ D.jsx(
+          h,
           {
-            value: m(o, e)
+            value: i(o, e)
           }
         )
-      }) : e.data_type === n.date ? r.push({
+      }) : e.data_type === s.date ? r.push({
         ...t,
-        resolve: (o) => D.formatDate(m(o, e))
-      }) : e.data_type !== n.richText && r.push({
+        resolve: (o) => v.formatDate(i(o, e))
+      }) : e.data_type === s.fuzzyDate ? r.push({
         ...t,
-        resolve: (o) => m(o, e)
+        resolve: (o) => y.getDateView(i(o, e))
+      }) : e.data_type !== s.richText && r.push({
+        ...t,
+        resolve: (o) => i(o, e)
       });
     }), r;
-  }, [m, p]);
-  return b(() => {
-    u(!0), j.fetchAll({ defineable_id: s, defineable_type: l }).then(({ data: r }) => d(r.user_defined_fields)).finally(() => u(!1));
-  }, [s, s]), {
-    loading: c,
+  }, [i, a]);
+  return z(() => {
+    u(!0), R.fetchAll({ defineable_id: p, defineable_type: l }).then(({ data: r }) => c(r.user_defined_fields)).finally(() => u(!1));
+  }, [p, p]), {
+    loading: d,
     userDefinedColumns: _,
-    userDefinedFields: p
+    userDefinedFields: a
   };
 };
 export {
-  ie as default
+  me as default
 };
 //# sourceMappingURL=index.es8.js.map

package/dist/index.es8.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.es8.js","sources":["../src/hooks/UserDefinedFields.js"],"sourcesContent":["// @flow\n\nimport { BooleanIcon } from '@performant-software/semantic-components';\nimport { Date as DateUtils } from '@performant-software/shared-components';\nimport React, {\n  useCallback,\n  useEffect,\n  useMemo,\n  useState\n} from 'react';\nimport _ from 'underscore';\nimport { DataTypes } from '../constants/DataTypes';\nimport UserDefinedFieldsService from '../services/UserDefinedFields';\n\n/**\n * Returns the loading state and list of user defined columns for the passed defineable ID and defineable type.\n *\n * @param defineableId\n * @param defineableType\n * @param options\n *\n * @returns {{userDefinedColumns: [], loading: boolean}}\n */\nconst useUserDefinedColumns = (defineableId, defineableType, options = {}) => {\n  const [userDefinedFields, setUserDefinedFields] = useState([]);\n  const [loading, setLoading] = useState(false);\n\n  const { sortable = true } = options;\n\n  /**\n   * Resolves the user defined field value for the passed item.\n   *\n   * @type {(function(*, *): (null|*))|*}\n   */\n  const resolveValue = useCallback((item, field) => {\n    let record = item;\n\n    if (options.resolveRecord) {\n      record = options.resolveRecord(item);\n    }\n\n    if (!record.user_defined) {\n      return null;\n    }\n\n    return record.user_defined[field.uuid];\n  }, [options.resolveRecord]);\n\n  /**\n   * Memo-izes the columns.\n   *\n   * @type {[]}\n   */\n  const userDefinedColumns = useMemo(() => {\n    const columns = [];\n\n    _.each(userDefinedFields, (field) => {\n      const column = {\n        name: field.uuid,\n        label: field.column_name,\n        hidden: true,\n        sortable\n      };\n\n      if (field.data_type === DataTypes.boolean) {\n        columns.push({\n          ...column,\n          render: (item) => (\n            <BooleanIcon\n              value={resolveValue(item, field)}\n            />\n          )\n        });\n      } else if (field.data_type === DataTypes.date) {\n        columns.push({\n          ...column,\n          resolve: (item) => DateUtils.formatDate(resolveValue(item, field))\n        });\n      } else if (field.data_type !== DataTypes.richText) {\n        columns.push({\n          ...column,\n          resolve: (item) => resolveValue(item, field)\n        });\n      }\n    });\n\n    return columns;\n  }, [resolveValue, userDefinedFields]);\n\n  /**\n   * Fetches the user defined fields for the passed defineable ID and defineable type.\n   */\n  useEffect(() => {\n    setLoading(true);\n\n    UserDefinedFieldsService\n      .fetchAll({ defineable_id: defineableId, defineable_type: defineableType })\n      .then(({ data }) => setUserDefinedFields(data.user_defined_fields))\n      .finally(() => setLoading(false));\n  }, [defineableId, defineableId]);\n\n  return {\n    loading,\n    userDefinedColumns,\n    userDefinedFields\n  };\n};\n\nexport default useUserDefinedColumns;\n"],"names":["useUserDefinedColumns","defineableId","defineableType","options","userDefinedFields","setUserDefinedFields","useState","loading","setLoading","sortable","resolveValue","useCallback","item","field","record","userDefinedColumns","useMemo","columns","_","column","DataTypes","jsx","BooleanIcon","DateUtils","useEffect","UserDefinedFieldsService","data"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuBA,MAAMA,KAAwB,CAACC,GAAcC,GAAgBC,IAAU,CAAA,MAAO;AAC5E,QAAM,CAACC,GAAmBC,CAAoB,IAAIC,EAAS,CAAE,CAAA,GACvD,CAACC,GAASC,CAAU,IAAIF,EAAS,EAAK,GAEtC,EAAE,UAAAG,IAAW,GAAS,IAAAN,GAOtBO,IAAeC,EAAY,CAACC,GAAMC,MAAU;AAChD,QAAIC,IAASF;AAMT,WAJAT,EAAQ,kBACDW,IAAAX,EAAQ,cAAcS,CAAI,IAGhCE,EAAO,eAILA,EAAO,aAAaD,EAAM,IAAI,IAH5B;AAAA,EAG4B,GACpC,CAACV,EAAQ,aAAa,CAAC,GAOpBY,IAAqBC,EAAQ,MAAM;AACvC,UAAMC,IAAU,CAAA;AAEd,WAAAC,EAAA,KAAKd,GAAmB,CAACS,MAAU;AACnC,YAAMM,IAAS;AAAA,QACb,MAAMN,EAAM;AAAA,QACZ,OAAOA,EAAM;AAAA,QACb,QAAQ;AAAA,QACR,UAAAJ;AAAA,MAAA;AAGE,MAAAI,EAAM,cAAcO,EAAU,UAChCH,EAAQ,KAAK;AAAA,QACX,GAAGE;AAAA,QACH,QAAQ,CAACP,MACPS,gBAAAA,EAAA;AAAA,UAACC;AAAA,UAAA;AAAA,YACC,OAAOZ,EAAaE,GAAMC,CAAK;AAAA,UAAA;AAAA,QACjC;AAAA,MAAA,CAEH,IACQA,EAAM,cAAcO,EAAU,OACvCH,EAAQ,KAAK;AAAA,QACX,GAAGE;AAAA,QACH,SAAS,CAACP,MAASW,EAAU,WAAWb,EAAaE,GAAMC,CAAK,CAAC;AAAA,MAAA,CAClE,IACQA,EAAM,cAAcO,EAAU,YACvCH,EAAQ,KAAK;AAAA,QACX,GAAGE;AAAA,QACH,SAAS,CAACP,MAASF,EAAaE,GAAMC,CAAK;AAAA,MAAA,CAC5C;AAAA,IACH,CACD,GAEMI;AAAA,EAAA,GACN,CAACP,GAAcN,CAAiB,CAAC;AAKpC,SAAAoB,EAAU,MAAM;AACd,IAAAhB,EAAW,EAAI,GAGZiB,EAAA,SAAS,EAAE,eAAexB,GAAc,iBAAiBC,EAAe,CAAC,EACzE,KAAK,CAAC,EAAE,MAAAwB,QAAWrB,EAAqBqB,EAAK,mBAAmB,CAAC,EACjE,QAAQ,MAAMlB,EAAW,EAAK,CAAC;AAAA,EAAA,GACjC,CAACP,GAAcA,CAAY,CAAC,GAExB;AAAA,IACL,SAAAM;AAAA,IACA,oBAAAQ;AAAA,IACA,mBAAAX;AAAA,EAAA;AAEJ;"}
+{"version":3,"file":"index.es8.js","sources":["../src/hooks/UserDefinedFields.js"],"sourcesContent":["// @flow\n\nimport { BooleanIcon } from '@performant-software/semantic-components';\nimport { Date as DateUtils, FuzzyDate as FuzzyDateUtils } from '@performant-software/shared-components';\nimport React, {\n  useCallback,\n  useEffect,\n  useMemo,\n  useState\n} from 'react';\nimport _ from 'underscore';\nimport { DataTypes } from '../constants/DataTypes';\nimport UserDefinedFieldsService from '../services/UserDefinedFields';\n\n/**\n * Returns the loading state and list of user defined columns for the passed defineable ID and defineable type.\n *\n * @param defineableId\n * @param defineableType\n * @param options\n *\n * @returns {{userDefinedColumns: [], loading: boolean}}\n */\nconst useUserDefinedColumns = (defineableId, defineableType, options = {}) => {\n  const [userDefinedFields, setUserDefinedFields] = useState([]);\n  const [loading, setLoading] = useState(false);\n\n  const { sortable = true } = options;\n\n  /**\n   * Resolves the user defined field value for the passed item.\n   *\n   * @type {(function(*, *): (null|*))|*}\n   */\n  const resolveValue = useCallback((item, field) => {\n    let record = item;\n\n    if (options.resolveRecord) {\n      record = options.resolveRecord(item);\n    }\n\n    if (!record.user_defined) {\n      return null;\n    }\n\n    return record.user_defined[field.uuid];\n  }, [options.resolveRecord]);\n\n  /**\n   * Memo-izes the columns.\n   *\n   * @type {[]}\n   */\n  const userDefinedColumns = useMemo(() => {\n    const columns = [];\n\n    _.each(userDefinedFields, (field) => {\n      const column = {\n        name: field.uuid,\n        label: field.column_name,\n        hidden: true,\n        sortable\n      };\n\n      if (field.data_type === DataTypes.boolean) {\n        columns.push({\n          ...column,\n          render: (item) => (\n            <BooleanIcon\n              value={resolveValue(item, field)}\n            />\n          )\n        });\n      } else if (field.data_type === DataTypes.date) {\n        columns.push({\n          ...column,\n          resolve: (item) => DateUtils.formatDate(resolveValue(item, field))\n        });\n      } else if (field.data_type === DataTypes.fuzzyDate) {\n        columns.push({\n          ...column,\n          resolve: (item) => FuzzyDateUtils.getDateView(resolveValue(item, field))\n        });\n      } else if (field.data_type !== DataTypes.richText) {\n        columns.push({\n          ...column,\n          resolve: (item) => resolveValue(item, field)\n        });\n      }\n    });\n\n    return columns;\n  }, [resolveValue, userDefinedFields]);\n\n  /**\n   * Fetches the user defined fields for the passed defineable ID and defineable type.\n   */\n  useEffect(() => {\n    setLoading(true);\n\n    UserDefinedFieldsService\n      .fetchAll({ defineable_id: defineableId, defineable_type: defineableType })\n      .then(({ data }) => setUserDefinedFields(data.user_defined_fields))\n      .finally(() => setLoading(false));\n  }, [defineableId, defineableId]);\n\n  return {\n    loading,\n    userDefinedColumns,\n    userDefinedFields\n  };\n};\n\nexport default useUserDefinedColumns;\n"],"names":["useUserDefinedColumns","defineableId","defineableType","options","userDefinedFields","setUserDefinedFields","useState","loading","setLoading","sortable","resolveValue","useCallback","item","field","record","userDefinedColumns","useMemo","columns","_","column","DataTypes","jsx","BooleanIcon","DateUtils","FuzzyDateUtils","useEffect","UserDefinedFieldsService","data"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuBA,MAAMA,KAAwB,CAACC,GAAcC,GAAgBC,IAAU,CAAA,MAAO;AAC5E,QAAM,CAACC,GAAmBC,CAAoB,IAAIC,EAAS,CAAE,CAAA,GACvD,CAACC,GAASC,CAAU,IAAIF,EAAS,EAAK,GAEtC,EAAE,UAAAG,IAAW,GAAS,IAAAN,GAOtBO,IAAeC,EAAY,CAACC,GAAMC,MAAU;AAChD,QAAIC,IAASF;AAMT,WAJAT,EAAQ,kBACDW,IAAAX,EAAQ,cAAcS,CAAI,IAGhCE,EAAO,eAILA,EAAO,aAAaD,EAAM,IAAI,IAH5B;AAAA,EAG4B,GACpC,CAACV,EAAQ,aAAa,CAAC,GAOpBY,IAAqBC,EAAQ,MAAM;AACvC,UAAMC,IAAU,CAAA;AAEd,WAAAC,EAAA,KAAKd,GAAmB,CAACS,MAAU;AACnC,YAAMM,IAAS;AAAA,QACb,MAAMN,EAAM;AAAA,QACZ,OAAOA,EAAM;AAAA,QACb,QAAQ;AAAA,QACR,UAAAJ;AAAA,MAAA;AAGE,MAAAI,EAAM,cAAcO,EAAU,UAChCH,EAAQ,KAAK;AAAA,QACX,GAAGE;AAAA,QACH,QAAQ,CAACP,MACPS,gBAAAA,EAAA;AAAA,UAACC;AAAA,UAAA;AAAA,YACC,OAAOZ,EAAaE,GAAMC,CAAK;AAAA,UAAA;AAAA,QACjC;AAAA,MAAA,CAEH,IACQA,EAAM,cAAcO,EAAU,OACvCH,EAAQ,KAAK;AAAA,QACX,GAAGE;AAAA,QACH,SAAS,CAACP,MAASW,EAAU,WAAWb,EAAaE,GAAMC,CAAK,CAAC;AAAA,MAAA,CAClE,IACQA,EAAM,cAAcO,EAAU,YACvCH,EAAQ,KAAK;AAAA,QACX,GAAGE;AAAA,QACH,SAAS,CAACP,MAASY,EAAe,YAAYd,EAAaE,GAAMC,CAAK,CAAC;AAAA,MAAA,CACxE,IACQA,EAAM,cAAcO,EAAU,YACvCH,EAAQ,KAAK;AAAA,QACX,GAAGE;AAAA,QACH,SAAS,CAACP,MAASF,EAAaE,GAAMC,CAAK;AAAA,MAAA,CAC5C;AAAA,IACH,CACD,GAEMI;AAAA,EAAA,GACN,CAACP,GAAcN,CAAiB,CAAC;AAKpC,SAAAqB,EAAU,MAAM;AACd,IAAAjB,EAAW,EAAI,GAGZkB,EAAA,SAAS,EAAE,eAAezB,GAAc,iBAAiBC,EAAe,CAAC,EACzE,KAAK,CAAC,EAAE,MAAAyB,QAAWtB,EAAqBsB,EAAK,mBAAmB,CAAC,EACjE,QAAQ,MAAMnB,EAAW,EAAK,CAAC;AAAA,EAAA,GACjC,CAACP,GAAcA,CAAY,CAAC,GAExB;AAAA,IACL,SAAAM;AAAA,IACA,oBAAAQ;AAAA,IACA,mBAAAX;AAAA,EAAA;AAEJ;"}

package/dist/index.es80.js

@@ -1,4 +1,4 @@
-import e from "./index.es227.js";
+import e from "./index.es231.js";
 const a = e("WeakSet");
 export {
   a as default

package/dist/index.es81.js

@@ -1,7 +1,7 @@
 import e from "./index.es60.js";
 import { nativeKeys as f, hasEnumBug as m } from "./index.es18.js";
-import n from "./index.es228.js";
-import o from "./index.es234.js";
+import n from "./index.es232.js";
+import o from "./index.es238.js";
 function c(r) {
   if (!e(r))
     return [];

package/dist/index.es82.js

@@ -1,6 +1,6 @@
 import e from "./index.es60.js";
 import { hasEnumBug as f } from "./index.es18.js";
-import i from "./index.es234.js";
+import i from "./index.es238.js";
 function s(r) {
   if (!e(r))
     return [];

package/dist/index.es87.js

@@ -1,4 +1,4 @@
-import e from "./index.es235.js";
+import e from "./index.es239.js";
 import r from "./index.es82.js";
 const s = e(r);
 export {

package/dist/index.es88.js

@@ -1,4 +1,4 @@
-import e from "./index.es235.js";
+import e from "./index.es239.js";
 import r from "./index.es81.js";
 const s = e(r);
 export {

package/dist/index.es89.js

@@ -1,4 +1,4 @@
-import e from "./index.es235.js";
+import e from "./index.es239.js";
 import r from "./index.es82.js";
 const s = e(r, !0);
 export {

package/dist/index.es90.js

@@ -1,4 +1,4 @@
-import a from "./index.es236.js";
+import a from "./index.es240.js";
 import f from "./index.es88.js";
 function i(t, e) {
   var r = a(t);

package/dist/index.es93.js

@@ -1,5 +1,5 @@
-import f from "./index.es237.js";
-import i from "./index.es238.js";
+import f from "./index.es241.js";
+import i from "./index.es242.js";
 import m from "./index.es62.js";
 function d(e, r, o) {
   var t = i(e, f(r));

package/dist/index.es94.js

@@ -1,5 +1,5 @@
-import n from "./index.es228.js";
-import o from "./index.es237.js";
+import n from "./index.es232.js";
+import o from "./index.es241.js";
 function s(t, r) {
   r = o(r);
   for (var a = r.length, f = 0; f < a; f++) {

package/dist/index.es95.js

@@ -1,4 +1,4 @@
-import t from "./index.es239.js";
+import t from "./index.es243.js";
 import v from "./index.es81.js";
 function k(r, f, l) {
   f = t(f, l);

package/dist/index.es99.js

@@ -1,5 +1,5 @@
-import o from "./index.es238.js";
-import e from "./index.es237.js";
+import o from "./index.es242.js";
+import e from "./index.es241.js";
 function u(r) {
   return r = e(r), function(t) {
     return o(t, r);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@performant-software/user-defined-fields",
-  "version": "2.2.10",
+  "version": "2.2.11-beta.1",
   "description": "A package of components used for allowing end users to define fields on models. Use with the \"user_defined_fields\" gem.",
   "license": "MIT",
   "main": "./dist/index.cjs.js",
@@ -23,8 +23,8 @@
     "underscore": "^1.13.2"
   },
   "peerDependencies": {
-    "@performant-software/semantic-components": "^2.2.10",
-    "@performant-software/shared-components": "^2.2.10",
+    "@performant-software/semantic-components": "^2.2.11-beta.1",
+    "@performant-software/shared-components": "^2.2.11-beta.1",
     "react": ">= 16.13.1 < 19.0.0",
     "react-dom": ">= 16.13.1 < 19.0.0"
   },

package/src/components/UserDefinedFieldsForm.js

@@ -1,7 +1,7 @@
 // @flow
 
-import { DatePicker } from '@performant-software/semantic-components';
-import { RichTextArea } from '@performant-software/shared-components';
+import { DatePicker, FuzzyDate } from '@performant-software/semantic-components';
+import { FuzzyDateTransform, RichTextArea } from '@performant-software/shared-components';
 import React, {
   useCallback,
   useEffect,
@@ -135,6 +135,23 @@ const UserDefinedFieldsForm: ComponentType<any> = (props: Props) => {
       );
     }
 
+    if (field.data_type === DataTypes.fuzzyDate) {
+      rendered = (
+        <Form.Input
+          error={isError(field)}
+          label={field.column_name}
+          required={field.required}
+        >
+          <FuzzyDate
+            centered={false}
+            date={fieldValue}
+            onChange={(date) => onChange(field, date)}
+            title={field.column_name}
+          />
+        </Form.Input>
+      );
+    }
+
     if (field.data_type === DataTypes.boolean) {
       rendered = (
         <Form.Checkbox

package/src/constants/DataTypes.js

@@ -3,6 +3,7 @@
 const DataTypes = {
   boolean: 'Boolean',
   date: 'Date',
+  fuzzyDate: 'FuzzyDate',
   number: 'Number',
   richText: 'RichText',
   select: 'Select',

package/src/hooks/UserDefinedFields.js

@@ -1,7 +1,7 @@
 // @flow
 
 import { BooleanIcon } from '@performant-software/semantic-components';
-import { Date as DateUtils } from '@performant-software/shared-components';
+import { Date as DateUtils, FuzzyDate as FuzzyDateUtils } from '@performant-software/shared-components';
 import React, {
   useCallback,
   useEffect,
@@ -76,6 +76,11 @@ const useUserDefinedColumns = (defineableId, defineableType, options = {}) => {
           ...column,
           resolve: (item) => DateUtils.formatDate(resolveValue(item, field))
         });
+      } else if (field.data_type === DataTypes.fuzzyDate) {
+        columns.push({
+          ...column,
+          resolve: (item) => FuzzyDateUtils.getDateView(resolveValue(item, field))
+        });
       } else if (field.data_type !== DataTypes.richText) {
         columns.push({
           ...column,

package/types/components/UserDefinedFieldsForm.js.flow

@@ -1,7 +1,7 @@
 // @flow
 
-import { DatePicker } from '@performant-software/semantic-components';
-import { RichTextArea } from '@performant-software/shared-components';
+import { DatePicker, FuzzyDate } from '@performant-software/semantic-components';
+import { FuzzyDateTransform, RichTextArea } from '@performant-software/shared-components';
 import React, {
   useCallback,
   useEffect,
@@ -135,6 +135,23 @@ const UserDefinedFieldsForm: ComponentType<any> = (props: Props) => {
       );
     }
 
+    if (field.data_type === DataTypes.fuzzyDate) {
+      rendered = (
+        <Form.Input
+          error={isError(field)}
+          label={field.column_name}
+          required={field.required}
+        >
+          <FuzzyDate
+            centered={false}
+            date={fieldValue}
+            onChange={(date) => onChange(field, date)}
+            title={field.column_name}
+          />
+        </Form.Input>
+      );
+    }
+
     if (field.data_type === DataTypes.boolean) {
       rendered = (
         <Form.Checkbox

package/types/constants/DataTypes.js.flow

@@ -3,6 +3,7 @@
 const DataTypes = {
   boolean: 'Boolean',
   date: 'Date',
+  fuzzyDate: 'FuzzyDate',
   number: 'Number',
   richText: 'RichText',
   select: 'Select',

package/types/hooks/UserDefinedFields.js.flow

@@ -1,7 +1,7 @@
 // @flow
 
 import { BooleanIcon } from '@performant-software/semantic-components';
-import { Date as DateUtils } from '@performant-software/shared-components';
+import { Date as DateUtils, FuzzyDate as FuzzyDateUtils } from '@performant-software/shared-components';
 import React, {
   useCallback,
   useEffect,
@@ -76,6 +76,11 @@ const useUserDefinedColumns = (defineableId, defineableType, options = {}) => {
           ...column,
           resolve: (item) => DateUtils.formatDate(resolveValue(item, field))
         });
+      } else if (field.data_type === DataTypes.fuzzyDate) {
+        columns.push({
+          ...column,
+          resolve: (item) => FuzzyDateUtils.getDateView(resolveValue(item, field))
+        });
       } else if (field.data_type !== DataTypes.richText) {
         columns.push({
           ...column,