Add DateTime Attribute Type

README.md

@@ -66,7 +66,7 @@ Screnshots: https://cms.demo.klaudsol.app
 <img width="1678" alt="image" src="https://github.com/klaudsol/klaudsol-cms/assets/1546228/9836b2b3-d006-4124-9fe8-5521eb6a2433">
 
 
-
+Testing.....
 
 
 

backend/models/core/Entity.js

@@ -257,14 +257,21 @@ class Entity {
                 ? { booleanValue: entry[attributeName] }
                 : { isNull: true },
           },
+          {
+            name: "value_datetime",
+            value:
+              attributeType == "datetime"
+                ? { stringValue: entry[attributeName] }
+                : { isNull: true },
+          },          
         ],
       ];
     }, []);
 
     //Insert Values by batch
     const insertValuesBatchSQL = `INSERT INTO \`values\`(entity_id, attribute_id,
-        value_string, value_long_string, value_double, value_boolean  
-      ) VALUES (:entity_id, :attribute_id, :value_string, :value_long_string, :value_double, :value_boolean) 
+        value_string, value_long_string, value_datetime, value_double, value_boolean
+      ) VALUES (:entity_id, :attribute_id, :value_string, :value_long_string, :value_datetime, :value_double, :value_boolean) 
       `;
 
     await db.batchExecuteStatement(insertValuesBatchSQL, valueBatchParams);
@@ -450,6 +457,13 @@ class Entity {
                 ? { booleanValue: entries[attributeName] }
                 : { isNull: true },
           },
+          {
+            name: "value_datetime",
+            value:
+              attributeType == "datetime"
+                ? { stringValue: entries[attributeName] }
+                : { isNull: true },
+          },
         ],
       ];
     }, []);
@@ -485,8 +499,8 @@ class Entity {
 
     if (nonExistingVal.length) {
       const insertValuesBatchSQL = `INSERT INTO \`values\`(entity_id, attribute_id,
-      value_string, value_long_string, value_double, value_boolean  
-    ) VALUES (:entity_id, :attribute_id, :value_string, :value_long_string, :value_double, :value_boolean) 
+      value_string, value_long_string, value_datetime, value_double, value_boolean
+    ) VALUES (:entity_id, :attribute_id, :value_string, :value_long_string, :value_datetime, :value_double, :value_boolean) 
     `;
 
       await db.batchExecuteStatement(insertValuesBatchSQL, nonExistingVal);
@@ -497,6 +511,7 @@ class Entity {
     const updateValuesBatchSQL = `UPDATE \`values\` SET 
     value_string = :value_string, 
     value_long_string = :value_long_string, 
+    value_datetime = :value_datetime,
     value_double = :value_double, 
     value_boolean = :value_boolean
     WHERE entity_id = :entity_id AND attribute_id = :attribute_id
@@ -509,4 +524,4 @@ class Entity {
   }
 }
 
-export default Entity;
+export default Entity;

components/EntityAttributeValue.js

@@ -42,6 +42,8 @@ const formatImage = (key) => {
       case 'float':
         //TODO: Find a more accurate representation of float
         return Number(item.value_double);
+      case 'datetime':
+        return item.value_datetime;
       case 'custom':
 
         //TODO: In the future, everything would pass this code
@@ -57,4 +59,4 @@ const formatImage = (key) => {
         return attributeType.toDatabase(item);
 
     }
-  }
+  }

components/attribute_types/AttributeType.js

@@ -12,6 +12,7 @@ export default class AttributeType {
     static TEXT_CMS_TYPE = 'text';
     static TEXTAREA_CMS_TYPE = 'textarea';
     static RICH_TEXT_CMS_TYPE = 'rich-text';
+    static DATETIME_CMS_TYPE = 'datetime';
     static CUSTOM = 'custom';
 
 

components/attribute_types/AttributeTypeFactory.js

@@ -4,6 +4,7 @@ import TextareaAttributeType from "@/components/attribute_types/TextareaAttribut
 import LegacyAttributeType from '@/components/attribute_types/LegacyAttributeType';
 import { plugin } from '@/components/plugin/plugin';
 import RichTextAttributeType from '@/components/attribute_types/RichTextAttributeType';
+import DateTimeAttributeType from '@/components/attribute_types/DateTimeAttributeType';
 
 export default class AttributeTypeFactory {
   static create({data, metadata}) {
@@ -14,6 +15,8 @@ export default class AttributeTypeFactory {
         return new TextareaAttributeType({data, metadata});
       case AttributeType.RICH_TEXT_CMS_TYPE:
         return new RichTextAttributeType({data, metadata});
+      case AttributeType.DATETIME_CMS_TYPE:
+        return new DateTimeAttributeType({data, metadata});
       case AttributeType.CUSTOM:
         const CustomAttributeType = plugin(metadata.custom_name);
         return new CustomAttributeType({data, metadata});

components/attribute_types/DateTimeAttributeType.js

@@ -0,0 +1,51 @@
+import AttributeType from '@/components/attribute_types/AttributeType';
+import { useFormikContext, useField } from "formik";
+import { useState, useEffect } from 'react';
+import DatePicker from 'react-datepicker';
+import 'react-datepicker/dist/react-datepicker.css';
+import moment from 'moment'; 
+
+const DateTimeAttributeReadOnlyComponent = ({ text }) => {
+  const parsedDate = new Date(text);
+  const formattedDate = moment(parsedDate).format('MMM. D, YYYY - hh:mm A');
+  return <>{formattedDate}</>;
+};
+
+const DateTimeAttributeEditableComponent = ({ name }) => {
+  const { setFieldValue } = useFormikContext();
+  const [{ value }] = useField(name);
+  const [selectedDate, setSelectedDate] = useState(value ? new Date(value) : new Date()); // Set initial selected date to today
+
+  useEffect(() => {
+    if (selectedDate) {
+      const formattedDate = moment(selectedDate).format('YYYY-MM-DD HH:mm');
+      setFieldValue(name, formattedDate);
+    } else {
+      setFieldValue(name, null);
+    }
+  }, [selectedDate, name, setFieldValue]);
+
+  const handleDateChange = (date) => {
+    setSelectedDate(date);
+  };
+
+  return (
+    <DatePicker
+      selected={selectedDate}
+      onChange={handleDateChange}
+      showTimeSelect
+      timeFormat="hh:mm aa"
+      dateFormat="MMM. d, yyyy - hh:mm aa"
+    />
+  );
+};
+
+export default class DateTimeAttributeType extends AttributeType {
+  readOnlyComponent() {
+    return DateTimeAttributeReadOnlyComponent;
+  }
+
+  editableComponent() {
+    return DateTimeAttributeEditableComponent;
+  }
+}

components/cmsTypes.js

@@ -13,7 +13,8 @@ export const CMS_TYPES = {
   PASSWORD: "password",
   CHECKBOX: "checkbox",
   CUSTOM: "custom",
-  RICH_TEXT: "rich-text"
+  RICH_TEXT: "rich-text",
+  DATETIME: "datetime"
 };
 
 // resources types
@@ -43,4 +44,3 @@ export const resourceValueTypes = [
   "value_double",
   "value_boolean",
 ];
-

components/renderers/admin/AdminRenderer.js

@@ -11,6 +11,7 @@ import VideoRenderer from "./VideoRenderer";
 import BooleanRenderer from "./BooleanRenderer";
 import { plugin } from "@/components/plugin/plugin";
 import RichTextAttributeType from "@/components/attribute_types/RichTextAttributeType";
+import DateTimeAttributeType from "@/components/attribute_types/DateTimeAttributeType"; 
 import AttributeTypeFactory from "@/components/attribute_types/AttributeTypeFactory";
 
 const AdminRenderer = ({ type, ...params }) => {
@@ -35,6 +36,7 @@ const AdminRenderer = ({ type, ...params }) => {
     case CMS_TYPES.BOOLEAN:
       return <BooleanRenderer type={type} {...params} title="Yes" />;
     case CMS_TYPES.RICH_TEXT:
+    case CMS_TYPES.DATETIME:
     case CMS_TYPES.CUSTOM:
       const attributeType = AttributeTypeFactory.create({metadata: {type, custom_name: params.customName, id: params.id}});
       const Component =  attributeType.editableComponent();
@@ -44,4 +46,4 @@ const AdminRenderer = ({ type, ...params }) => {
   }
 };
 
-export default AdminRenderer;
+export default AdminRenderer;

constants/index.js

@@ -7,6 +7,7 @@ export const inputValues = [
   { value: "gallery", option: "Gallery" },
   { value: "float", option: "Number" },
   { value: "video", option: "Video" },
+  { value: "datetime", option: "DateTime" },
   { value: "boolean", option: "Boolean" },
   { value: "custom", option: "Custom" }
 ];
@@ -44,4 +45,3 @@ export const operators = {
 };
 
 export const slugTooltipText = "Slugs are the URL-friendly names of your contents. You can access the contens in your API via their numerical ID (e.g. /api/articles/12) or their slug (e.g. /api/articles/my-first-blog-post)";
-

db/migrations/20230427114000_connect_read_pending_users_capabilities.json

@@ -8,4 +8,4 @@
     "DELETE FROM group_capabilities WHERE group_id IN (1, 2) ",
     "AND capabilities_id = (SELECT id FROM capabilities WHERE name = 'read_pending_users' AND is_system_supplied = true);"
   ] 
-}
+}

package.json

@@ -58,7 +58,7 @@
     "react-component-export-image": "^1.0.6",
     "react-confirm-alert": "2.0.2",
     "react-csv-downloader": "^2.8.0",
-    "react-datepicker": "^4.8.0",
+    "react-datepicker": "^4.15.0",
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.33.0",
     "react-icons": "^4.3.1",

styles/klaudsolcms.scss

@@ -1398,3 +1398,21 @@ $onFocus: #323C4E;
         font-weight: 590;
     }
 }
+
+/** 
+======================================================
+            MODIFY DATE PICKER DESIGN
+======================================================
+**/
+.react-datepicker__input-container input {
+    padding: 8px;
+    border-radius: 5px;
+    border: 1px solid #ccc !important;
+}
+// change the selected date color
+.react-datepicker__day--selected, .react-datepicker__time-list-item--selected {
+    background-color: #467286 !important;
+}
+.react-datepicker__time-container {
+    overflow: hidden;
+}

yarn.lock

@@ -4294,10 +4294,10 @@ react-csv-downloader@^2.8.0:
   dependencies:
     file-saver "^2.0.2"
 
-react-datepicker@^4.8.0:
-  version "4.11.0"
-  resolved "https://registry.yarnpkg.com/react-datepicker/-/react-datepicker-4.11.0.tgz#40e73b4729a284ed206fdb322b8e84eb566e11a3"
-  integrity sha512-50n93o7mQwBEhg05tbopjFKgs8qgi8VBCAOMC4VqrKut72eAjESc/wXS/k5hRtnP0oe2FCGw7MJuIwh37wuXOw==
+react-datepicker@^4.15.0:
+  version "4.15.0"
+  resolved "https://registry.yarnpkg.com/react-datepicker/-/react-datepicker-4.15.0.tgz#489834773fbcf87852273b4642f0c5bd3811cef7"
+  integrity sha512-kysEqVv6wRQkmAyn0wJi4Xx+JjBPBtXWfQSfh6sR3wdzZX1/LjYTPmaurnVI6ao177ecompg8ze7NCgtEGW78A==
   dependencies:
     "@popperjs/core" "^2.9.2"
     classnames "^2.2.6"