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

close new item form when switching layers

Browse Source
This commit is contained in:
Anton Tranelis 2024-07-29 20:39:25 +02:00
parent 53598fc066
commit 1d53ba3f9c
1 changed files with 38 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -22,12 +22,6 @@ import { TagsControl } from '../Map/Subcomponents/Controls/TagsControl';
import { useFilterTags } from '../Map/hooks/useFilter'; import { useFilterTags } from '../Map/hooks/useFilter';
type breadcrumb = {
name: string,
path: string
}
export const OverlayItemsIndexPage = ({ url, layerName, parameterField, plusButton = true }: { layerName: string, url: string, parameterField: string, plusButton?: boolean }) => { export const OverlayItemsIndexPage = ({ url, layerName, parameterField, plusButton = true }: { layerName: string, url: string, parameterField: string, plusButton?: boolean }) => {
@ -45,6 +39,11 @@ export const OverlayItemsIndexPage = ({ url, layerName, parameterField, plusButt
scroll(); scroll();
}, [addItemPopupType]) }, [addItemPopupType])
useEffect(() => {
setAddItemPopupType("");
}, [layerName])
const tags = useTags(); const tags = useTags();
const addTag = useAddTag(); const addTag = useAddTag();
const { user } = useAuth(); const { user } = useAuth();
@ -120,42 +119,44 @@ export const OverlayItemsIndexPage = ({ url, layerName, parameterField, plusButt
<div className='tw-columns-1 md:tw-columns-2 lg:tw-columns-3 2xl:tw-columns-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). items?.filter(i => i.layer?.name === layerName).
filter(item => filter(item =>
filterTags.length == 0 ? item : filterTags.every(tag => getItemTags(item).some(filterTag => filterTag.name.toLocaleLowerCase() === tag.name.toLocaleLowerCase())))?. filterTags.length == 0 ? item : filterTags.every(tag => getItemTags(item).some(filterTag => filterTag.name.toLocaleLowerCase() === tag.name.toLocaleLowerCase())))?.
sort((a, b) => { sort((a, b) => {
// Convert date_created to milliseconds, handle undefined by converting to lowest possible date (0 milliseconds) // 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 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; 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 return dateB - dateA; // Subtracts milliseconds which are numbers
})?. })?.
map((i, k) => ( map((i, k) => (
<div key={k} className="tw-break-inside-avoid tw-mb-6"> <div key={k} className="tw-break-inside-avoid tw-mb-6">
<ItemCard i={i} loading={loading} url={url} parameterField={parameterField} deleteCallback={() => deleteItem(i)} /> <ItemCard i={i} loading={loading} url={url} parameterField={parameterField} deleteCallback={() => deleteItem(i)} />
</div> </div>
)) ))
} }
</div> {addItemPopupType == "place" && (
{addItemPopupType == "place" && ( <form ref={tabRef} autoComplete='off' onSubmit={e => submitNewItem(e)}>
<form ref={tabRef} autoComplete='off' onSubmit={e => submitNewItem(e)}> <div className='tw-cursor-pointer tw-break-inside-avoid 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'>
<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("")}>
<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>
<p className='tw-text-center'>✕</p> </label>
</label> <TextInput type="text" placeholder="Name" dataField="name" defaultValue={""} inputStyle='' />
<TextInput type="text" placeholder="Name" dataField="name" defaultValue={""} inputStyle='' /> {layer?.itemType.show_start_end_input && <PopupStartEndInput />}
{layer?.itemType.show_start_end_input && <PopupStartEndInput />} <TextAreaInput placeholder="Text" dataField="text" defaultValue={""} inputStyle='tw-h-40 tw-mt-5' />
<TextAreaInput placeholder="Text" dataField="text" defaultValue={""} inputStyle='tw-h-40 tw-mt-5' /> <div className='tw-flex tw-justify-center'>
<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'>
<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'}
{loading ? <span className="tw-loading tw-loading-spinner"></span> : 'Save'} </button>
</button> </div>
</div> </div>
</div> </form>
</form> )}
)} </div>
</div> </div>
</div> </div>
</MapOverlayPage> </MapOverlayPage>
{plusButton && <PlusButton layer={layer} triggerAction={() => { setAddItemPopupType("place"); scroll(); }} color={'#777'} collection='items' />} {plusButton && <PlusButton layer={layer} triggerAction={() => { setAddItemPopupType("place"); scroll(); }} color={'#777'} collection='items' />}
</> </>
)} )
}