Use relative time for audit log details. (#6640)

* convert time to relative time * change styling * change margin * add new classname
coronasafe · Dec 6, 2023 · 947978c · 947978c
1 parent f746576
commit 947978c
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 18 deletions.
diff --git a/src/CAREUI/display/RecordMeta.tsx b/src/CAREUI/display/RecordMeta.tsx
@@ -11,6 +11,7 @@ interface Props {
   time?: string;
   prefix?: ReactNode;
   className?: string;
+  inlineClassName?: string;
   user?: {
     first_name: string;
     last_name: string;
@@ -23,7 +24,14 @@ interface Props {
  * A generic component to display relative time along with a tooltip and a user
  * if provided.
  */
-const RecordMeta = ({ time, user, prefix, className, inlineUser }: Props) => {
+const RecordMeta = ({
+  time,
+  user,
+  prefix,
+  className,
+  inlineClassName,
+  inlineUser,
+}: Props) => {
   const isOnline = user && isUserOnline(user);
 
   let child = (
@@ -47,11 +55,11 @@ const RecordMeta = ({ time, user, prefix, className, inlineUser }: Props) => {
 
   if (prefix || user) {
     child = (
-      <div className="flex items-center gap-1">
+      <div className={`flex items-center gap-1 ${inlineClassName}`}>
         {prefix}
         {child}
         {user && inlineUser && <span>by</span>}
-        {user && <CareIcon className="care-l-user" />}
+        {user && !inlineUser && <CareIcon className="care-l-user" />}
         {user && inlineUser && (
           <span className="font-medium">{formatName(user)}</span>
         )}

diff --git a/src/Components/Shifting/ShiftDetails.tsx b/src/Components/Shifting/ShiftDetails.tsx
@@ -806,28 +806,25 @@ export default function ShiftDetails(props: { id: string }) {
                     {t("created")}
                   </div>
                   <div className="mt-1 whitespace-pre text-sm leading-5 text-gray-900">
-                    <div className="text-sm">
-                      {data?.created_by_object?.first_name}
-                      {data?.created_by_object?.last_name}
-                    </div>
-                    <div className="text-xs">
-                      {data?.created_date && formatDateTime(data?.created_date)}
-                    </div>
+                    <RecordMeta
+                      time={data?.created_date}
+                      user={data?.created_by_object}
+                      inlineUser={true}
+                      inlineClassName={"flex-wrap justify-center"}
+                    />
                   </div>
                 </div>
                 <div className="mt-2 lg:mt-0">
                   <div className="text-sm font-medium leading-5 text-gray-500">
                     {t("last_edited")}
                   </div>
                   <div className="mt-1 whitespace-pre text-sm leading-5 text-gray-900">
-                    <div className="text-sm">
-                      {data?.last_edited_by_object?.first_name}{" "}
-                      {data?.last_edited_by_object?.last_name}
-                    </div>
-                    <div className="text-xs">
-                      {data?.modified_date &&
-                        formatDateTime(data?.modified_date)}
-                    </div>
+                    <RecordMeta
+                      time={data?.modified_date}
+                      user={data?.last_edited_by_object}
+                      inlineUser={true}
+                      inlineClassName={"flex-wrap justify-center"}
+                    />
                   </div>
                 </div>
               </div>