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

Item Card Component

Browse Source
This commit is contained in:
Anton Tranelis 2024-05-08 11:24:18 +02:00
parent 402040a285
commit c99abae51d
2 changed files with 28 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
src/Components/Templates/ItemCard.tsx Normal file
View File

@ -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>
)
}

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

@ -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" ?