feat: display latest update datetime

tdrive/frontend/src/app/features/global/utils/Numbers.ts

@@ -127,4 +127,15 @@ export const formatTime = (
     second: options?.keepSeconds ? "numeric" : undefined,
   }).format(new Date(time));
 };
+export const formatDateShort = (time : number | string) => {
+  const date = new Date(time);
+  const padZero = (num :number) => num.toString().padStart(2, '0');
 
+  const month = padZero(date.getMonth() + 1); // Months are zero-indexed
+  const day = padZero(date.getDate());
+  const year = date.getFullYear();
+  const hours = padZero(date.getHours());
+  const minutes = padZero(date.getMinutes());
+
+  return `${month}.${day}.${year} ${hours}:${minutes}`;
+};

tdrive/frontend/src/app/views/client/body/drive/documents/document-row.tsx

@@ -7,13 +7,14 @@ import { useDrivePreview } from '@features/drive/hooks/use-drive-preview';
 import { formatBytes } from '@features/drive/utils';
 import { useEffect, useState } from 'react';
 import { PublicIcon } from '../components/public-icon';
-import {CheckableIcon, DriveItemOverlayProps, DriveItemProps} from './common';
+import { CheckableIcon, DriveItemOverlayProps, DriveItemProps } from './common';
 import './style.scss';
 import { useHistory } from 'react-router-dom';
 import RouterServices from '@features/router/services/router-service';
 import useRouteState from 'app/features/router/hooks/use-route-state';
 import { DocumentIcon } from './document-icon';
 import { hasAnyPublicLinkAccess } from '@features/files/utils/access-info-helpers';
+import { formatDateShort } from 'app/features/global/utils/Numbers';
 
 export const DocumentRow = ({
   item,
@@ -26,23 +27,23 @@ export const DocumentRow = ({
 }: DriveItemProps) => {
   const history = useHistory();
   const [hover, setHover] = useState(false);
-  const { open,close } = useDrivePreview();
+  const { open, close } = useDrivePreview();
   const company = useRouterCompany();
   const { itemId } = useRouteState();
 
   useEffect(() => {
     // close the preview if the item is not set or the user navigated away
-    if(!itemId) {
+    if (!itemId) {
       close();
     }
     // open the preview if the item is set
-    if(itemId == item.id) {
+    if (itemId == item.id) {
       open(item);
     }
   }, [itemId]);
 
   const preview = () => {
-    history.push(RouterServices.generateRouteFromState({companyId: company, itemId: item.id}));
+    history.push(RouterServices.generateRouteFromState({ companyId: company, itemId: item.id }));
     if (inPublicSharing) open(item);
   };
 
@@ -80,11 +81,12 @@ export const DocumentRow = ({
         <Base className="flex maxWidth100">{item.name}</Base>
       </div>
       <div className="shrink-0 ml-4">
-        {hasAnyPublicLinkAccess(item) && (
-          <PublicIcon className="h-5 w-5 text-blue-500" />
-        )}
+        {hasAnyPublicLinkAccess(item) && <PublicIcon className="h-5 w-5 text-blue-500" />}
       </div>
-      <div className="shrink-0 ml-4 text-right minWidth80">
+      <div className="shrink-0 ml-4 mr-12">
+        <BaseSmall>{formatDateShort(item?.last_version_cache?.date_added)}</BaseSmall>
+      </div>
+      <div className="shrink-0 ml-4 text-right lg:w-24 sm:w-20 ">
         <BaseSmall>{formatBytes(item.size)}</BaseSmall>
       </div>
       <div className="shrink-0 ml-4">
@@ -101,20 +103,17 @@ export const DocumentRow = ({
   );
 };
 
-export const DocumentRowOverlay = ({
-                              item,
-                              className,
-                            }: DriveItemOverlayProps) => {
+export const DocumentRowOverlay = ({ item, className }: DriveItemOverlayProps) => {
   return (
-      <div
-          className={
-              'flex flex-row items-center border border-zinc-200 dark:border-zinc-800 -mt-px px-4 py-3 cursor-pointer ' +
-              (className || '')
-          }
-      >
-        <div className="grow text-ellipsis whitespace-nowrap overflow-hidden">
-          <Base>{item?.name}</Base>
-        </div>
+    <div
+      className={
+        'flex flex-row items-center border border-zinc-200 dark:border-zinc-800 -mt-px px-4 py-3 cursor-pointer ' +
+        (className || '')
+      }
+    >
+      <div className="grow text-ellipsis whitespace-nowrap overflow-hidden">
+        <Base>{item?.name}</Base>
       </div>
-  )}
-
+    </div>
+  );
+};