From 9bc07a330cd50c12928e619cfafd99a3229258d5 Mon Sep 17 00:00:00 2001
From: Anton Tranelis <mail@antontranelis.de>
Date: Sat, 27 Apr 2024 07:26:54 +0200
Subject: [PATCH] changed date presentation

---
 src/Components/Map/Subcomponents/ItemViewPopup.tsx | 10 ++++++++--
 src/Components/Templates/OverlayItemsIndexPage.tsx | 11 ++++++++---
 2 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/src/Components/Map/Subcomponents/ItemViewPopup.tsx b/src/Components/Map/Subcomponents/ItemViewPopup.tsx
index a40c7d66..9331c50e 100644
--- a/src/Components/Map/Subcomponents/ItemViewPopup.tsx
+++ b/src/Components/Map/Subcomponents/ItemViewPopup.tsx
@@ -31,6 +31,8 @@ export const ItemViewPopup = React.forwardRef((props: ItemViewPopupProps, ref: a
   const setSelectPosition = useSetSelectPosition();
 
 
+  const [infoExpanded, setInfoExpanded] = useState<Boolean>(false);
+
   const handleEdit = (event: React.MouseEvent<HTMLElement>) => {
     event.stopPropagation();
     map.closePopup();
@@ -83,8 +85,12 @@ export const ItemViewPopup = React.forwardRef((props: ItemViewPopupProps, ref: a
         <div className='tw-flex -tw-mb-1 tw-flex-row tw-mr-2 tw-mt-1'>
 
 
-        <p className={`tw-italic tw-min-h-[21px] !tw-my-0 tw-text-gray-500`} >{`${props.item.date_updated &&  props.item.date_updated != props.item.date_created ? "updated" : "posted" } ${props.item && props.item.user_created && props.item.user_created.first_name ? `by ${props.item.user_created.first_name}` : ""} ${props.item.date_updated ? timeAgo(props.item.date_updated) : timeAgo(props.item.date_created!)}`}</p>
-          
+          {
+            infoExpanded ?
+            <p className={`tw-italic tw-min-h-[21px] !tw-my-0 tw-text-gray-500`} >{`${props.item.date_updated &&  props.item.date_updated != props.item.date_created ? "updated" : "posted" } ${props.item && props.item.user_created && props.item.user_created.first_name ? `by ${props.item.user_created.first_name}` : ""} ${props.item.date_updated ? timeAgo(props.item.date_updated) : timeAgo(props.item.date_created!)}`}</p>
+              :
+              <p className="!tw-my-0 tw-min-h-[21px] tw-font-bold tw-cursor-pointer tw-text-gray-500" onClick={() => setInfoExpanded(true)}>ⓘ</p>
+          }
           <div className='tw-grow'></div>
           { //**        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="tw-place-self-end tw-w-4 tw-h-4 tw-mb-1 tw-cursor-pointer"><path strokeLinecap="round" strokeLinejoin="round" d="M3.75 3.75v4.5m0-4.5h4.5m-4.5 0L9 9M3.75 20.25v-4.5m0 4.5h4.5m-4.5 0L9 15M20.25 3.75h-4.5m4.5 0v4.5m0-4.5L15 9m5.25 11.25h-4.5m4.5 0v-4.5m0 4.5L15 15" /></svg> */ 
           }
diff --git a/src/Components/Templates/OverlayItemsIndexPage.tsx b/src/Components/Templates/OverlayItemsIndexPage.tsx
index 39839d58..58c1c3de 100644
--- a/src/Components/Templates/OverlayItemsIndexPage.tsx
+++ b/src/Components/Templates/OverlayItemsIndexPage.tsx
@@ -26,6 +26,7 @@ type breadcrumb = {
 export const OverlayItemsIndexPage = ({ url, layerName, parameterField, breadcrumbs, itemNameField, itemTextField, itemImageField, itemSymbolField, itemSubnameField, plusButton = true, children }: { layerName: string, url: string, parameterField: string, breadcrumbs: Array<breadcrumb>, itemNameField: string, itemTextField: string, itemImageField: string, itemSymbolField: string, itemSubnameField: string, plusButton?: boolean, children?: ReactNode }) => {
 
     console.log(itemSymbolField);
+    const [infoExpanded, setInfoExpanded] = useState<Number>(0);
 
     const [loading, setLoading] = useState<boolean>(false);
     const [addItemPopupType, setAddItemPopupType] = useState<string>("");
@@ -136,10 +137,14 @@ export const OverlayItemsIndexPage = ({ url, layerName, parameterField, breadcru
                                     <div className='tw-overflow-y-auto tw-overflow-x-hidden tw-max-h-64 fade'>
                                         <TextView truncate item={i} itemTextField={itemTextField} />
                                     </div>
-                                    <div className='tw-flex -tw-mb-1 tw-flex-row tw-mr-2 -tw-mt-2' >
-
-                                                <p className={`tw-italic tw-min-h-[21px] !tw-my-0 tw-text-gray-500 tw-cursor-pointer`} >{`${i.date_updated &&  i.date_updated != i.date_created ? "updated" : "posted" } ${i && i.user_created && i.user_created.first_name ? `by ${i.user_created.first_name}` : ""} ${i.date_updated ? timeAgo(i.date_updated) : timeAgo(i.date_created!)}`}</p>
+                                    <div className='tw-flex -tw-mb-1 tw-flex-row tw-mr-2 -tw-mt-2' onClick={(e)=> e.stopPropagation()}>
 
+                                    {
+            infoExpanded == k ?
+            <p className={`tw-italic tw-min-h-[21px] !tw-my-0 tw-text-gray-500`} onClick={() => setInfoExpanded(0)} >{`${i.date_updated &&  i.date_updated != i.date_created ? "updated" : "posted" } ${i && i.user_created && i.user_created.first_name ? `by ${i.user_created.first_name}` : ""} ${i.date_updated ? timeAgo(i.date_updated) : timeAgo(i.date_created!)}`}</p>
+              :
+              <p className="!tw-my-0 tw-min-h-[21px] tw-font-bold tw-cursor-pointer tw-text-gray-500" onClick={() => setInfoExpanded(k)}>ⓘ</p>
+          }
                                         <div className='tw-grow '></div>
                                         { //**        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="tw-place-self-end tw-w-4 tw-h-4 tw-mb-1 tw-cursor-pointer"><path strokeLinecap="round" strokeLinejoin="round" d="M3.75 3.75v4.5m0-4.5h4.5m-4.5 0L9 9M3.75 20.25v-4.5m0 4.5h4.5m-4.5 0L9 15M20.25 3.75h-4.5m4.5 0v4.5m0-4.5L15 9m5.25 11.25h-4.5m4.5 0v-4.5m0 4.5L15 15" /></svg> */ 
                                         }