feat: support global date format

payloadcms · Apr 29, 2021 · 670ccf2 · 670ccf2
1 parent cae24db
commit 670ccf2
Show file tree

Hide file tree

Showing 9 changed files with 47 additions and 32 deletions.
diff --git a/docs/admin/overview.mdx b/docs/admin/overview.mdx
@@ -30,6 +30,7 @@ All options for the Admin panel are defined in your base Payload config file.
 | `indexHTML`          | Optionally replace the entirety of the `index.html` file used by the Admin panel. Reference the [base index.html file](https://github.com/payloadcms/payload/blob/master/src/admin/index.html) to ensure your replacement has the appropriate HTML elements. |
 | `css`                | Absolute path to a stylesheet that you can use to override / customize the Admin panel styling. [More](/docs/admin/customizing-css). |
 | `scss`               | Absolute path to a Sass variables / mixins stylesheet meant to override Payload styles to make for an easy re-skinning of the Admin panel. [More](/docs/admin/customizing-css#overriding-scss-variables). |
+| `dateFormat`         | Global date format that will be used for all dates in the Admin panel. Any valid [date-fns](https://date-fns.org/) format pattern can be used.
 | `components`         | Component overrides that affect the entirety of the Admin panel. [More](/docs/admin/components) |
 | `webpack`            | Customize the Webpack config that's used to generate the Admin panel. [More](/docs/admin/webpack) |
 

diff --git a/src/admin/components/views/Account/Default.tsx b/src/admin/components/views/Account/Default.tsx
@@ -43,7 +43,7 @@ const DefaultAccount: React.FC<Props> = (props) => {
     auth,
   } = collection;
 
-  const { routes: { admin } } = useConfig();
+  const { admin: { dateFormat }, routes: { admin } } = useConfig();
 
   const classes = [
     baseClass,
@@ -146,13 +146,13 @@ const DefaultAccount: React.FC<Props> = (props) => {
                 {data.updatedAt && (
                   <li>
                     <div className={`${baseClass}__label`}>Last Modified</div>
-                    <div>{format(new Date(data.updatedAt), 'MMMM do yyyy, h:mm a')}</div>
+                    <div>{format(new Date(data.updatedAt), dateFormat)}</div>
                   </li>
                 )}
                 {data.createdAt && (
                   <li>
                     <div className={`${baseClass}__label`}>Created</div>
-                    <div>{format(new Date(data.createdAt), 'MMMM do yyyy, h:mm a')}</div>
+                    <div>{format(new Date(data.createdAt), dateFormat)}</div>
                   </li>
                 )}
               </React.Fragment>

diff --git a/src/admin/components/views/Global/Default.tsx b/src/admin/components/views/Global/Default.tsx
@@ -12,10 +12,12 @@ import LeaveWithoutSaving from '../../modals/LeaveWithoutSaving';
 import { Props } from './types';
 
 import './index.scss';
+import { useConfig } from '@payloadcms/config-provider';
 
 const baseClass = 'global-edit';
 
 const DefaultGlobalView: React.FC<Props> = (props) => {
+  const { admin: { dateFormat } } = useConfig();
   const {
     global, data, onSave, permissions, action, apiURL, initialState,
   } = props;
@@ -77,20 +79,20 @@ const DefaultGlobalView: React.FC<Props> = (props) => {
                 )}
               </div>
               {data && (
-              <div className={`${baseClass}__api-url`}>
-                <span className={`${baseClass}__label`}>
-                  API URL
+                <div className={`${baseClass}__api-url`}>
+                  <span className={`${baseClass}__label`}>
+                    API URL
                   {' '}
-                  <CopyToClipboard value={apiURL} />
-                </span>
-                <a
-                  href={apiURL}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                >
-                  {apiURL}
-                </a>
-              </div>
+                    <CopyToClipboard value={apiURL} />
+                  </span>
+                  <a
+                    href={apiURL}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                  >
+                    {apiURL}
+                  </a>
+                </div>
               )}
               <div className={`${baseClass}__sidebar-fields`}>
                 <RenderFields
@@ -103,14 +105,14 @@ const DefaultGlobalView: React.FC<Props> = (props) => {
                 />
               </div>
               {data && (
-              <ul className={`${baseClass}__meta`}>
-                {data.updatedAt && (
-                <li>
-                  <div className={`${baseClass}__label`}>Last Modified</div>
-                  <div>{format(new Date(data.updatedAt as string), 'MMMM do yyyy, h:mm a')}</div>
-                </li>
-                )}
-              </ul>
+                <ul className={`${baseClass}__meta`}>
+                  {data.updatedAt && (
+                    <li>
+                      <div className={`${baseClass}__label`}>Last Modified</div>
+                      <div>{format(new Date(data.updatedAt as string), dateFormat)}</div>
+                    </li>
+                  )}
+                </ul>
               )}
             </div>
           </div>

diff --git a/src/admin/components/views/collections/Edit/Default.tsx b/src/admin/components/views/collections/Edit/Default.tsx
@@ -25,7 +25,7 @@ const baseClass = 'collection-edit';
 
 const DefaultEditView: React.FC<Props> = (props) => {
   const { params: { id } = {} } = useRouteMatch<Record<string, string>>();
-  const { routes: { admin } } = useConfig();
+  const { admin: { dateFormat }, routes: { admin } } = useConfig();
 
   const {
     collection,
@@ -190,13 +190,13 @@ const DefaultEditView: React.FC<Props> = (props) => {
                           {data.updatedAt && (
                             <li>
                               <div className={`${baseClass}__label`}>Last Modified</div>
-                              <div>{format(new Date(data.updatedAt), 'MMMM do yyyy, h:mm a')}</div>
+                              <div>{format(new Date(data.updatedAt), dateFormat)}</div>
                             </li>
                           )}
                           {data.createdAt && (
                             <li>
                               <div className={`${baseClass}__label`}>Created</div>
-                              <div>{format(new Date(data.createdAt), 'MMMM do yyyy, h:mm a')}</div>
+                              <div>{format(new Date(data.createdAt), dateFormat)}</div>
                             </li>
                           )}
                         </React.Fragment>

diff --git a/src/admin/components/views/collections/List/Cell/cellTypes.spec.tsx b/src/admin/components/views/collections/List/Cell/cellTypes.spec.tsx
@@ -5,6 +5,10 @@ import DateCell from './field-types/Date';
 import Checkbox from './field-types/Checkbox';
 import Textarea from './field-types/Textarea';
 
+jest.mock('@payloadcms/config-provider', () => ({
+  useConfig: () => ({ admin: { dateFormat: 'MMMM do yyyy, h:mm a' } }),
+}));
+
 describe('Cell Types', () => {
   describe('Blocks', () => {
     const field = {

diff --git a/src/admin/components/views/collections/List/Cell/field-types/Date/index.tsx b/src/admin/components/views/collections/List/Cell/field-types/Date/index.tsx
@@ -1,10 +1,15 @@
 import React from 'react';
 import format from 'date-fns/format';
+import { useConfig } from '@payloadcms/config-provider';
 
-const DateCell = ({ data }) => (
-  <span>
-    {data && format(new Date(data), 'MMMM do yyyy, h:mm a')}
-  </span>
-);
+const DateCell = ({ data }) => {
+  const { admin: { dateFormat } } = useConfig();
+
+  return (
+    <span>
+      {data && format(new Date(data), dateFormat)}
+    </span>
+  );
+};
 
 export default DateCell;
diff --git a/src/config/defaults.ts b/src/config/defaults.ts
@@ -17,6 +17,7 @@ export const defaults = {
     components: {},
     css: path.resolve(__dirname, '../admin/scss/custom.css'),
     scss: path.resolve(__dirname, '../admin/scss/overrides.scss'),
+    dateFormat: 'MMMM do yyyy, h:mm a',
   },
   upload: {},
   graphQL: {

diff --git a/src/config/schema.ts b/src/config/schema.ts
@@ -47,6 +47,7 @@ export default joi.object({
     indexHTML: joi.string(),
     css: joi.string(),
     scss: joi.string(),
+    dateFormat: joi.string(),
     components: joi.object()
       .keys({
         Nav: component,

diff --git a/src/config/types.ts b/src/config/types.ts
@@ -74,6 +74,7 @@ export type PayloadConfig = {
     indexHTML?: string;
     css?: string
     scss?: string
+    dateFormat?: string
     components?: {
       Nav?: React.ComponentType
       graphics?: {