antontranelis/utopia-ui
1
0
Fork 0
mirror of https://github.com/utopia-os/utopia-ui.git synced 2025-12-13 07:46:10 +00:00
Code Issues Packages Projects Releases Wiki Activity

- transformed list into a masonry layout

Browse Source
This commit is contained in:
Sebastian Stein 2024-06-25 10:55:15 +02:00
parent aff509f1dd
commit 3acb1c1937
1 changed files with 26 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
src/Components/Templates/OverlayItemsIndexPage.tsx
View File

@ -108,8 +108,6 @@ export const OverlayItemsIndexPage = ({ url, layerName, parameterField, plusButt
return (
<>
<MapOverlayPage className='tw-rounded-none tw-overflow-y-auto tw-bg-base-200 !tw-p-4'>
<div className='tw-flex tw-flex-col tw-h-full'>
<div className='tw-flex-none'>
@ -119,55 +117,45 @@ export const OverlayItemsIndexPage = ({ url, layerName, parameterField, plusButt
</Control>
</div>
<div className="tw-overflow-scroll fade tw-flex-1">
<div className='tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-3 2xl:tw-grid-cols-4 tw-gap-6 tw-pt-4'>
<div className='tw-columns-1 md:tw-columns-2 lg:tw-columns-3 2xl:tw-columns-4 tw-gap-6 tw-pt-4'>
{
items?.filter(i => i.layer?.name === layerName).
filter(item =>
filterTags.length == 0 ? item : filterTags.every(tag => getItemTags(item).some(filterTag => filterTag.name.toLocaleLowerCase() === tag.name.toLocaleLowerCase())))?.
sort((a, b) => {
// Convert date_created to milliseconds, handle undefined by converting to lowest possible date (0 milliseconds)
const dateA = a.date_updated ? new Date(a.date_updated).getTime() : a.date_created ? new Date(a.date_created).getTime() : 0;
const dateB = b.date_updated ? new Date(b.date_updated).getTime() : b.date_created ? new Date(b.date_created).getTime() : 0;
return dateB - dateA; // Subtracts milliseconds which are numbers
})?.
map((i, k) => {
return (
<ItemCard key={k} i={i} loading={loading} url={url} parameterField={parameterField} deleteCallback={() => deleteItem(i)} ></ItemCard>
)
})
filter(item =>
filterTags.length == 0 ? item : filterTags.every(tag => getItemTags(item).some(filterTag => filterTag.name.toLocaleLowerCase() === tag.name.toLocaleLowerCase())))?.
sort((a, b) => {
// Convert date_created to milliseconds, handle undefined by converting to lowest possible date (0 milliseconds)
const dateA = a.date_updated ? new Date(a.date_updated).getTime() : a.date_created ? new Date(a.date_created).getTime() : 0;
const dateB = b.date_updated ? new Date(b.date_updated).getTime() : b.date_created ? new Date(b.date_created).getTime() : 0;
return dateB - dateA; // Subtracts milliseconds which are numbers
})?.
map((i, k) => (
<div key={k} className="tw-break-inside-avoid tw-mb-6">
<ItemCard i={i} loading={loading} url={url} parameterField={parameterField} deleteCallback={() => deleteItem(i)} />
</div>
))
}
</div>
{addItemPopupType == "place" ?
<form ref={tabRef} autoComplete='off' onSubmit={e => submitNewItem(e)} >
{addItemPopupType == "place" && (
<form ref={tabRef} autoComplete='off' onSubmit={e => submitNewItem(e)}>
<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-6 tw-mb-10'>
<label className="tw-btn tw-btn-sm tw-rounded-2xl tw-btn-circle tw-btn-ghost hover:tw-bg-transparent tw-absolute tw-right-0 tw-top-0 tw-text-gray-600" onClick={() => {
setAddItemPopupType("")
}}>
<p className='tw-text-center '>✕</p></label>
<label className="tw-btn tw-btn-sm tw-rounded-2xl tw-btn-circle tw-btn-ghost hover:tw-bg-transparent tw-absolute tw-right-0 tw-top-0 tw-text-gray-600" onClick={() => setAddItemPopupType("")}>
<p className='tw-text-center'>✕</p>
</label>
<TextInput type="text" placeholder="Name" dataField="name" defaultValue={""} inputStyle='' />
{layer?.itemType.show_start_end_input &&
<PopupStartEndInput></PopupStartEndInput>
}
{layer?.itemType.show_start_end_input && <PopupStartEndInput />}
<TextAreaInput placeholder="Text" dataField="text" defaultValue={""} inputStyle='tw-h-40 tw-mt-5' />
<div className='tw-flex tw-justify-center'>
<button className={loading ? 'tw-btn tw-btn-disabled tw-mt-5 tw-place-self-center' : 'tw-btn tw-mt-5 tw-place-self-center'} type='submit'>{loading ? <span className="tw-loading tw-loading-spinner"></span> : 'Save'}</button>
<button className={loading ? 'tw-btn tw-btn-disabled tw-mt-5 tw-place-self-center' : 'tw-btn tw-mt-5 tw-place-self-center'} type='submit'>
{loading ? <span className="tw-loading tw-loading-spinner"></span> : 'Save'}
</button>
</div>
</div>
</form> : <></>
}
</form>
)}
</div>
</div>
</MapOverlayPage>
{plusButton && <PlusButton layer={layer} triggerAction={() => { setAddItemPopupType("place"); scroll(); }} color={'#777'} collection='items' />}
</>
)
}
)}