From 090155c6124584b4d12a9fa154bc953bc50a3a9d Mon Sep 17 00:00:00 2001
From: Anton Tranelis <mail@antontranelis.de>
Date: Thu, 2 May 2024 14:40:19 +0200
Subject: [PATCH] small fixes

---
 src/Components/Input/TextInput.tsx               |  2 +-
 .../ItemPopupComponents/TextView.tsx             |  1 +
 src/Components/Profile/ActionsButton.tsx         | 16 ++++++++++++----
 src/Components/Profile/OverlayItemProfile.tsx    |  5 ++++-
 4 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/src/Components/Input/TextInput.tsx b/src/Components/Input/TextInput.tsx
index c9b91d8e..8d669a19 100644
--- a/src/Components/Input/TextInput.tsx
+++ b/src/Components/Input/TextInput.tsx
@@ -18,7 +18,7 @@ type InputTextProps = {
 export function TextInput({labelTitle, labelStyle, type, dataField, containerStyle, inputStyle, defaultValue, placeholder, autocomplete, updateFormValue} : InputTextProps){
 
     return(
-        <div className={`tw-form-control tw-w-full ${containerStyle}`}>
+        <div className={`tw-form-control ${containerStyle}`}>
             {labelTitle ? <label className="tw-label">
                 <span className={"tw-label-text tw-text-base-content " + labelStyle}>{labelTitle}</span>
              </label> 
diff --git a/src/Components/Map/Subcomponents/ItemPopupComponents/TextView.tsx b/src/Components/Map/Subcomponents/ItemPopupComponents/TextView.tsx
index f628ce99..c5a9352d 100644
--- a/src/Components/Map/Subcomponents/ItemPopupComponents/TextView.tsx
+++ b/src/Components/Map/Subcomponents/ItemPopupComponents/TextView.tsx
@@ -86,6 +86,7 @@ export const TextView = ({ item, truncate = false, itemTextField}: { item?: Item
   const CustomExternalLink = ({ href, children }) => (
     <a className='tw-font-bold'
       href={href}
+      target='_blank'
     > {children}</a>
   );
   const CustomHashTagLink = ({ children, tag, item }) => {    
diff --git a/src/Components/Profile/ActionsButton.tsx b/src/Components/Profile/ActionsButton.tsx
index 534bce56..ba916eb2 100644
--- a/src/Components/Profile/ActionsButton.tsx
+++ b/src/Components/Profile/ActionsButton.tsx
@@ -4,6 +4,7 @@ import DialogModal from "../Templates/DialogModal";
 import { useItems } from "../Map/hooks/useItems";
 import { HeaderView } from "../Map/Subcomponents/ItemPopupComponents/HeaderView";
 import { Item } from "../../types";
+import { TextInput } from "../Input";
 
 export function ActionButton({ item, triggerAddButton, triggerItemSelected, existingRelations, itemType, color = "#3D3846", collection = "items" }: {
     triggerAddButton?: any,
@@ -16,13 +17,15 @@ export function ActionButton({ item, triggerAddButton, triggerItemSelected, exis
 }) {
     const hasUserPermission = useHasUserPermission();
     const [modalOpen, setModalOpen] = useState<boolean>(false);
+    const [search, setSearch] = useState<string>("");
+
 
     const items = useItems();
 
     const filterdItems = items.filter(i => !itemType || i.layer?.itemType.name == itemType).filter(i => !existingRelations.some(s => s.id == i.id)).filter(i => i.id != item.id)
 
 
-    
+
     return (
         <>{hasUserPermission(collection, "update", item) &&
             <>
@@ -37,9 +40,14 @@ export function ActionButton({ item, triggerAddButton, triggerItemSelected, exis
                         </svg>
                     </button>}
                 </div>
-                <DialogModal title={"Select"} isOpened={modalOpen} onClose={() => (setModalOpen(false))} className="!tw-max-w-2xl tw-bg-base-200">
-                    <div className='tw-grid tw-grid-cols-1 sm:tw-grid-cols-2 md:tw-grid-cols-2 lg:tw-grid-cols-2 xl:tw-grid-cols-2'>
-                        {filterdItems.map(i => <div key={i.id} 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-mx-4 tw-p-4 tw-mb-4 tw-h-fit' onClick={() => { triggerItemSelected(i.id); setModalOpen(false) }}>
+                <DialogModal title={"Select"} isOpened={modalOpen} onClose={() => (setModalOpen(false))} className="!tw-w-xl !sm:tw-w-2xl tw-min-h-80 tw-bg-base-200">
+                <TextInput defaultValue='' placeholder='🔍 Search' containerStyle='lg:col-span-2 tw-m-4 ' updateFormValue={(val) => { setSearch(val) }}></TextInput>      
+                       <div className='tw-grid tw-grid-cols-1 sm:tw-grid-cols-2'>
+                        {filterdItems.filter(item => {
+                            return search === ''
+                                ? item :
+                                item.name.toLowerCase().includes(search.toLowerCase());
+                        }).map(i => <div key={i.id} 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-mx-4 tw-p-4 tw-mb-4 tw-h-fit' onClick={() => { triggerItemSelected(i.id); setModalOpen(false) }}>
                             <HeaderView item={i} hideMenu></HeaderView>
                         </div>)}
                     </div>
diff --git a/src/Components/Profile/OverlayItemProfile.tsx b/src/Components/Profile/OverlayItemProfile.tsx
index 2592fdd9..a47721fd 100644
--- a/src/Components/Profile/OverlayItemProfile.tsx
+++ b/src/Components/Profile/OverlayItemProfile.tsx
@@ -106,7 +106,7 @@ export function OverlayItemProfile() {
             item && setRelations(current => [...current, item])
         })
 
-    }, [item,items])
+    }, [item, items])
 
 
     useEffect(() => {
@@ -279,6 +279,9 @@ export function OverlayItemProfile() {
                             <div role="tablist" className="tw-tabs tw-tabs-lifted tw-mt-2 tw-mb-2">
                                 <input type="radio" name="my_tabs_2" role="tab" className={`tw-tab  [--tab-border-color:var(--fallback-bc,oklch(var(--bc)/0.2))]`} aria-label="Info" checked={activeTab == 1 && true} onChange={() => updateActiveTab(1)} />
                                 <div role="tabpanel" className="tw-tab-content tw-bg-base-100 tw-rounded-box tw-h-[calc(100dvh-280px)] tw-overflow-y-auto fade tw-pt-2 tw-pb-4 tw-mb-4 tw-overflow-x-hidden">
+                                    {item.layer?.itemType.show_start_end &&
+                                        <StartEndView item={item}></StartEndView>
+                                    }
                                     <TextView item={item} />
                                 </div>