From c99abae51daba1731e231cb9f84e6bcaa2e52ff7 Mon Sep 17 00:00:00 2001
From: Anton Tranelis <mail@antontranelis.de>
Date: Wed, 8 May 2024 11:24:18 +0200
Subject: [PATCH] Item Card Component

---
 src/Components/Templates/ItemCard.tsx         | 25 +++++++++++++++++++
 .../Templates/OverlayItemsIndexPage.tsx       | 20 +++------------
 2 files changed, 28 insertions(+), 17 deletions(-)
 create mode 100644 src/Components/Templates/ItemCard.tsx

diff --git a/src/Components/Templates/ItemCard.tsx b/src/Components/Templates/ItemCard.tsx
new file mode 100644
index 00000000..dfa62685
--- /dev/null
+++ b/src/Components/Templates/ItemCard.tsx
@@ -0,0 +1,25 @@
+import { DateUserInfo } from './DateUserInfo'
+import { StartEndView, TextView } from '../Map'
+import { HeaderView } from '../Map/Subcomponents/ItemPopupComponents/HeaderView'
+import { Item } from '../../types'
+import { useNavigate } from 'react-router-dom'
+import { getValue } from '../../Utils/GetValue'
+
+export const ItemCard = ({i,loading, url, parameterField, deleteCallback}:{i:Item, loading: boolean, url:string, parameterField: string, deleteCallback: any}) => {
+    const navigate = useNavigate();
+
+  return (
+    <div className='tw-cursor-pointer tw-card tw-border-[1px] tw-border-base-300 tw-card-body tw-shadow-xl tw-bg-base-100 tw-text-base-content tw-p-4 tw-mb-4 tw-h-fit' onClick={() => navigate(url + getValue(i, parameterField))}>
+    <HeaderView loading={loading} item={i} api={i.layer?.api} itemAvatarField={i.layer?.itemAvatarField} itemNameField={i.layer?.itemNameField} itemSubnameField={i.layer?.itemSubnameField} editCallback={() => navigate("/edit-item/" + i.id)} deleteCallback={() => deleteCallback(i)}></HeaderView>
+    <div className='tw-overflow-y-auto tw-overflow-x-hidden tw-max-h-64 fade'>
+        {i.layer?.itemType.show_start_end &&
+            <StartEndView item={i}></StartEndView>
+        }
+        {i.layer?.itemType.show_text &&
+            <TextView truncate item={i} itemTextField={i.layer?.itemTextField} />
+        }
+    </div>
+    <DateUserInfo item={i}></DateUserInfo>
+</div>
+  )
+}
diff --git a/src/Components/Templates/OverlayItemsIndexPage.tsx b/src/Components/Templates/OverlayItemsIndexPage.tsx
index 752eaf28..2045e5be 100644
--- a/src/Components/Templates/OverlayItemsIndexPage.tsx
+++ b/src/Components/Templates/OverlayItemsIndexPage.tsx
@@ -15,6 +15,7 @@ import { HeaderView } from '../Map/Subcomponents/ItemPopupComponents/HeaderView'
 import { MapOverlayPage } from './MapOverlayPage';
 import { useAddItem, useItems, useRemoveItem } from '../Map/hooks/useItems';
 import { DateUserInfo } from './DateUserInfo';
+import { ItemCard } from './ItemCard';
 
 
 type breadcrumb = {
@@ -23,10 +24,8 @@ 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 }) => {
+export const OverlayItemsIndexPage = ({ url, layerName, parameterField, breadcrumbs, plusButton = true, children }: { layerName: string, url: string, parameterField: string, breadcrumbs: Array<breadcrumb>, plusButton?: boolean, children?: ReactNode }) => {
 
-    console.log(itemSymbolField);
-    const [infoExpanded, setInfoExpanded] = useState(new Map());
 
 
     const [loading, setLoading] = useState<boolean>(false);
@@ -132,21 +131,8 @@ export const OverlayItemsIndexPage = ({ url, layerName, parameterField, breadcru
                             })
                             .map((i, k) => {
                                 return (
-                                    <div key={k} className='tw-cursor-pointer tw-card tw-border-[1px] tw-border-base-300 tw-card-body tw-shadow-xl tw-bg-base-100 tw-text-base-content tw-p-4 tw-mb-4 tw-h-fit' onClick={() => navigate(url + getValue(i, parameterField))}>
-                                        <HeaderView loading={loading} item={i} api={layer?.api} itemAvatarField={itemImageField} itemNameField={itemNameField} itemSubnameField={itemSubnameField} editCallback={() => navigate("/edit-item/" + i.id)} deleteCallback={() => deleteItem(i)}></HeaderView>
-                                        <div className='tw-overflow-y-auto tw-overflow-x-hidden tw-max-h-64 fade'>
-                                            {i.layer?.itemType.show_start_end &&
-                                                <StartEndView item={i}></StartEndView>
-                                            }
-                                            {i.layer?.itemType.show_text &&
-                                                <TextView truncate item={i} itemTextField={itemTextField} />
-                                            }
-                                        </div>
-                                        <DateUserInfo item={i}></DateUserInfo>
-                                    </div>
-
+                                    <ItemCard key={k} i={i} loading={loading} url={url} parameterField={parameterField} deleteCallback={()=> deleteItem(i)} ></ItemCard>
                                 )
-
                             })
                     }
                     {addItemPopupType == "place" ?