mirror of
https://github.com/utopia-os/utopia-ui.git
synced 2026-02-06 09:55:47 +00:00
fixed layout / removed logging
This commit is contained in:
parent
020ab51681
commit
cbeec7a9ec
@ -72,15 +72,9 @@ export function OverlayItemProfile({ userType }: { userType: string }) {
|
|||||||
|
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
console.log(userType);
|
|
||||||
|
|
||||||
setProfile(items.find(i => (i.user_created?.id === item.user_created?.id) && i.layer?.itemType.name === userType));
|
setProfile(items.find(i => (i.user_created?.id === item.user_created?.id) && i.layer?.itemType.name === userType));
|
||||||
}, [item, items])
|
}, [item, items])
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
console.log(profile);
|
|
||||||
|
|
||||||
}, [profile])
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@ -98,11 +92,6 @@ export function OverlayItemProfile({ userType }: { userType: string }) {
|
|||||||
const itemId = location.pathname.split("/")[2];
|
const itemId = location.pathname.split("/")[2];
|
||||||
const item = items.find(i => i.id === itemId);
|
const item = items.find(i => i.id === itemId);
|
||||||
item && setItem(item);
|
item && setItem(item);
|
||||||
console.log(item);
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
}, [items, location])
|
}, [items, location])
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
@ -203,12 +192,9 @@ export function OverlayItemProfile({ userType }: { userType: string }) {
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
const uuid = crypto.randomUUID();
|
const uuid = crypto.randomUUID();
|
||||||
console.log(layers);
|
|
||||||
|
|
||||||
const layer = layers.find(l => l.name.toLocaleLowerCase().replace("s", "") == addItemPopupType.toLocaleLowerCase())
|
const layer = layers.find(l => l.name.toLocaleLowerCase().replace("s", "") == addItemPopupType.toLocaleLowerCase())
|
||||||
|
|
||||||
console.log(layer);
|
|
||||||
|
|
||||||
let success = false;
|
let success = false;
|
||||||
try {
|
try {
|
||||||
await layer?.api?.createItem!({ ...formItem, id: uuid, type: type, parent: item.id });
|
await layer?.api?.createItem!({ ...formItem, id: uuid, type: type, parent: item.id });
|
||||||
@ -310,9 +296,9 @@ export function OverlayItemProfile({ userType }: { userType: string }) {
|
|||||||
className={`${template == "onepager" && '!tw-p-0'} tw-mx-4 tw-mt-4 tw-max-h-[calc(100dvh-96px)] tw-h-[calc(100dvh-96px)] md:tw-w-[calc(50%-32px)] tw-w-[calc(100%-32px)] tw-min-w-80 tw-max-w-3xl !tw-left-0 sm:!tw-left-auto tw-top-0 tw-bottom-0 tw-transition-opacity tw-duration-500 ${!selectPosition ? 'tw-opacity-100 tw-pointer-events-auto' : 'tw-opacity-0 tw-pointer-events-none'}`}>
|
className={`${template == "onepager" && '!tw-p-0'} tw-mx-4 tw-mt-4 tw-max-h-[calc(100dvh-96px)] tw-h-[calc(100dvh-96px)] md:tw-w-[calc(50%-32px)] tw-w-[calc(100%-32px)] tw-min-w-80 tw-max-w-3xl !tw-left-0 sm:!tw-left-auto tw-top-0 tw-bottom-0 tw-transition-opacity tw-duration-500 ${!selectPosition ? 'tw-opacity-100 tw-pointer-events-auto' : 'tw-opacity-0 tw-pointer-events-none'}`}>
|
||||||
|
|
||||||
<>
|
<>
|
||||||
<div className={`${template=="onepager" && "tw-px-6 tw-pt-6"}`}>
|
<div className={`${template == "onepager" && "tw-px-6 tw-pt-6"}`}>
|
||||||
<HeaderView api={item.layer?.api} item={item} deleteCallback={handleDelete} editCallback={() => navigate("/edit-item/" + item.id)} setPositionCallback={() => { map.closePopup(); setSelectPosition(item); navigate("/") }} big truncateSubname={false} />
|
<HeaderView api={item.layer?.api} item={item} deleteCallback={handleDelete} editCallback={() => navigate("/edit-item/" + item.id)} setPositionCallback={() => { map.closePopup(); setSelectPosition(item); navigate("/") }} big truncateSubname={false} />
|
||||||
{template=="onepager" && <ProfileSubHeader
|
{template == "onepager" && <ProfileSubHeader
|
||||||
type={groupTypeText}
|
type={groupTypeText}
|
||||||
status={item.status}
|
status={item.status}
|
||||||
url={window.location.href}
|
url={window.location.href}
|
||||||
@ -320,133 +306,134 @@ export function OverlayItemProfile({ userType }: { userType: string }) {
|
|||||||
/>}
|
/>}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className='tw-h-full tw-overflow-y-auto fade'>
|
|
||||||
|
|
||||||
{template == "onepager" &&
|
{template == "onepager" &&
|
||||||
<>
|
<div className='tw-h-full tw-overflow-y-auto fade'>
|
||||||
{item.user_created.first_name && (
|
|
||||||
<ContactInfo link={`/item/${profile?.id}`} name={profile?.name ? profile.name : item.user_created.first_name} avatar={profile?.image ? profile.image : item.user_created.avatar} email={item.contact} telephone={item.telephone} />
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Description Section */}
|
{item.user_created.first_name && (
|
||||||
<div className="tw-my-10 tw-mt-2 tw-px-6 tw-text-sm tw-text-gray-600">
|
<ContactInfo link={`/item/${profile?.id}`} name={profile?.name ? profile.name : item.user_created.first_name} avatar={profile?.image ? profile.image : item.user_created.avatar} email={item.contact} telephone={item.telephone} />
|
||||||
<TextView rawText={item.text || 'Keine Beschreibung vorhanden'} />
|
)}
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Next Appointment Section */}
|
{/* Description Section */}
|
||||||
{item.next_appointment && (
|
<div className="tw-my-10 tw-mt-2 tw-px-6 tw-text-sm tw-text-gray-600">
|
||||||
<div className="tw-my-10 tw-px-6">
|
<TextView rawText={item.text || 'Keine Beschreibung vorhanden'} />
|
||||||
<h2 className="tw-text-lg tw-font-semibold">Nächste Termine</h2>
|
</div>
|
||||||
<div className="tw-mt-2 tw-text-sm tw-text-gray-600">
|
|
||||||
<TextView rawText={item.next_appointment} />
|
{/* Next Appointment Section */}
|
||||||
</div>
|
{item.next_appointment && (
|
||||||
|
<div className="tw-my-10 tw-px-6">
|
||||||
|
<h2 className="tw-text-lg tw-font-semibold">Nächste Termine</h2>
|
||||||
|
<div className="tw-mt-2 tw-text-sm tw-text-gray-600">
|
||||||
|
<TextView rawText={item.next_appointment} />
|
||||||
</div>
|
</div>
|
||||||
)};
|
</div>
|
||||||
|
)};
|
||||||
|
|
||||||
{/* Relations Section */}
|
{/* Relations Section */}
|
||||||
{/*{d.relations && (*/}
|
{/*{d.relations && (*/}
|
||||||
{/* <div className="tw-my-10 tw-px-6">*/}
|
{/* <div className="tw-my-10 tw-px-6">*/}
|
||||||
{/* <h2 className="tw-text-lg tw-font-semibold tw-mb-4">Projekte</h2>*/}
|
{/* <h2 className="tw-text-lg tw-font-semibold tw-mb-4">Projekte</h2>*/}
|
||||||
{/* {d.relations.map((project, index) => (*/}
|
{/* {d.relations.map((project, index) => (*/}
|
||||||
{/* <RelationCard*/}
|
{/* <RelationCard*/}
|
||||||
{/* key={index}*/}
|
{/* key={index}*/}
|
||||||
{/* title={project.title}*/}
|
{/* title={project.title}*/}
|
||||||
{/* description={project.description}*/}
|
{/* description={project.description}*/}
|
||||||
{/* imageSrc={project.imageSrc}*/}
|
{/* imageSrc={project.imageSrc}*/}
|
||||||
{/* />*/}
|
{/* />*/}
|
||||||
{/* ))}*/}
|
{/* ))}*/}
|
||||||
{/* </div>*/}
|
{/* </div>*/}
|
||||||
{/*)}*/}
|
{/*)}*/}
|
||||||
</>
|
</div>
|
||||||
}
|
}
|
||||||
|
|
||||||
{template == "simple" &&
|
{template == "simple" &&
|
||||||
<div className='tw-mt-8'>
|
<div className='tw-mt-8 tw-h-full tw-overflow-y-auto fade'>
|
||||||
|
|
||||||
|
|
||||||
|
<TextView item={item} />
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
|
||||||
|
{template == "tabs" &&
|
||||||
|
<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 &&
|
||||||
|
<div className='tw-max-w-xs'><StartEndView item={item}></StartEndView></div>
|
||||||
|
}
|
||||||
<TextView item={item} />
|
<TextView item={item} />
|
||||||
</div>
|
</div>
|
||||||
}
|
|
||||||
|
|
||||||
{template == "tabs" &&
|
{item.layer?.itemType.offers_and_needs &&
|
||||||
<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 &&
|
|
||||||
<div className='tw-max-w-xs'><StartEndView item={item}></StartEndView></div>
|
|
||||||
}
|
|
||||||
<TextView item={item} />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{item.layer?.itemType.offers_and_needs &&
|
<>
|
||||||
|
|
||||||
<>
|
<input type="radio" name="my_tabs_2" role="tab" className="tw-tab tw-min-w-[10em] [--tab-border-color:var(--fallback-bc,oklch(var(--bc)/0.2))]" aria-label="Offers & Needs" checked={activeTab == 3 && true} onChange={() => updateActiveTab(3)} />
|
||||||
|
<div role="tabpanel" className="tw-tab-content tw-bg-base-100 tw-rounded-box tw-h-[calc(100dvh-268px)] tw-overflow-y-auto fade tw-pt-4 tw-pb-1" >
|
||||||
<input type="radio" name="my_tabs_2" role="tab" className="tw-tab tw-min-w-[10em] [--tab-border-color:var(--fallback-bc,oklch(var(--bc)/0.2))]" aria-label="Offers & Needs" checked={activeTab == 3 && true} onChange={() => updateActiveTab(3)} />
|
<div className='tw-h-full'>
|
||||||
<div role="tabpanel" className="tw-tab-content tw-bg-base-100 tw-rounded-box tw-h-[calc(100dvh-268px)] tw-overflow-y-auto fade tw-pt-4 tw-pb-1" >
|
<div className='tw-grid tw-grid-cols-1'>
|
||||||
<div className='tw-h-full'>
|
{
|
||||||
<div className='tw-grid tw-grid-cols-1'>
|
offers.length > 0 ?
|
||||||
{
|
<div className='tw-col-span-1'>
|
||||||
offers.length > 0 ?
|
<h3 className='-tw-mb-2'>Offers</h3>
|
||||||
<div className='tw-col-span-1'>
|
< div className='tw-flex tw-flex-wrap tw-mb-4'>
|
||||||
<h3 className='-tw-mb-2'>Offers</h3>
|
{
|
||||||
< div className='tw-flex tw-flex-wrap tw-mb-4'>
|
offers.map(o => <TagView key={o?.id} tag={o} onClick={() => {
|
||||||
{
|
console.log(o);
|
||||||
offers.map(o => <TagView key={o?.id} tag={o} onClick={() => {
|
addFilterTag(o)
|
||||||
console.log(o);
|
}} />)
|
||||||
addFilterTag(o)
|
}
|
||||||
}} />)
|
|
||||||
}
|
|
||||||
</div>
|
|
||||||
</div> : ""
|
|
||||||
}
|
|
||||||
{
|
|
||||||
needs.length > 0 ?
|
|
||||||
<div className='tw-col-span-1'>
|
|
||||||
<h3 className='-tw-mb-2 tw-col-span-1'>Needs</h3>
|
|
||||||
< div className='tw-flex tw-flex-wrap tw-mb-4'>
|
|
||||||
{
|
|
||||||
needs.map(n => <TagView key={n?.id} tag={n} onClick={() => addFilterTag(n)} />)
|
|
||||||
}
|
|
||||||
</div>
|
|
||||||
</div> : ""
|
|
||||||
}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</>
|
|
||||||
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
{item.layer?.itemType.relations &&
|
|
||||||
<>
|
|
||||||
<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="Relations" checked={activeTab == 7 && true} onChange={() => updateActiveTab(7)} />
|
|
||||||
<div role="tabpanel" className="tw-tab-content tw-bg-base-100 tw-rounded-box tw-h-[calc(100dvh-280px)] tw-overflow-y-auto tw-pt-4 tw-pb-1 -tw-mx-4 tw-overflow-x-hidden">
|
|
||||||
<div className='tw-h-full'>
|
|
||||||
<div className='tw-grid tw-grid-cols-1 sm:tw-grid-cols-2 md:tw-grid-cols-1 lg:tw-grid-cols-1 xl:tw-grid-cols-1 2xl:tw-grid-cols-2'>
|
|
||||||
{relations && relations.map(i =>
|
|
||||||
|
|
||||||
|
|
||||||
<div key={i.id} className='tw-cursor-pointer tw-card tw-bg-base-200 tw-border-[1px] tw-border-base-300 tw-card-body tw-shadow-xl tw-text-base-content tw-mx-4 tw-p-6 tw-mb-4' onClick={() => navigate('/item/' + i.id)}>
|
|
||||||
<LinkedItemsHeaderView unlinkPermission={updatePermission} item={i} unlinkCallback={unlinkItem} loading={loading} />
|
|
||||||
<div className='tw-overflow-y-auto tw-overflow-x-hidden tw-max-h-64 fade'>
|
|
||||||
<TextView truncate item={i} />
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div> : ""
|
||||||
)}
|
}
|
||||||
{updatePermission && <ActionButton collection="items" item={item} existingRelations={relations} triggerItemSelected={linkItem} colorField={item.layer.itemColorField}></ActionButton>}
|
{
|
||||||
|
needs.length > 0 ?
|
||||||
</div>
|
<div className='tw-col-span-1'>
|
||||||
|
<h3 className='-tw-mb-2 tw-col-span-1'>Needs</h3>
|
||||||
|
< div className='tw-flex tw-flex-wrap tw-mb-4'>
|
||||||
|
{
|
||||||
|
needs.map(n => <TagView key={n?.id} tag={n} onClick={() => addFilterTag(n)} />)
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
</div> : ""
|
||||||
|
}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</>
|
</div>
|
||||||
}
|
</>
|
||||||
</div>
|
|
||||||
}
|
|
||||||
</div>
|
}
|
||||||
|
|
||||||
|
{item.layer?.itemType.relations &&
|
||||||
|
<>
|
||||||
|
<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="Relations" checked={activeTab == 7 && true} onChange={() => updateActiveTab(7)} />
|
||||||
|
<div role="tabpanel" className="tw-tab-content tw-bg-base-100 tw-rounded-box tw-h-[calc(100dvh-280px)] tw-overflow-y-auto tw-pt-4 tw-pb-1 tw-overflow-x-hidden">
|
||||||
|
<div className='tw-h-full'>
|
||||||
|
<div className='tw-grid tw-grid-cols-1 sm:tw-grid-cols-2 md:tw-grid-cols-1 lg:tw-grid-cols-1 xl:tw-grid-cols-1 2xl:tw-grid-cols-2'>
|
||||||
|
{relations && relations.map(i =>
|
||||||
|
|
||||||
|
|
||||||
|
<div key={i.id} className='tw-cursor-pointer tw-card tw-bg-base-200 tw-border-[1px] tw-border-base-300 tw-card-body tw-shadow-xl tw-text-base-content tw-p-6 tw-mb-4' onClick={() => navigate('/item/' + i.id)}>
|
||||||
|
<LinkedItemsHeaderView unlinkPermission={updatePermission} item={i} unlinkCallback={unlinkItem} loading={loading} />
|
||||||
|
<div className='tw-overflow-y-auto tw-overflow-x-hidden tw-max-h-64 fade'>
|
||||||
|
<TextView truncate item={i} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{updatePermission && <ActionButton collection="items" item={item} existingRelations={relations} triggerItemSelected={linkItem} colorField={item.layer.itemColorField}></ActionButton>}
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
}
|
||||||
</>
|
</>
|
||||||
|
|
||||||
</MapOverlayPage >
|
</MapOverlayPage >
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user