show AddButton and ItemViewPopup-Menu only when appropriate permissions are granted

This commit is contained in:
Anton 2023-12-22 08:47:43 +01:00
parent 7b87188109
commit 7aea369235
2 changed files with 15 additions and 6 deletions

View File

@ -9,8 +9,18 @@ export default function AddButton({ setSelectNewItemPosition }: { setSelectNewIt
const layers = useLayers(); const layers = useLayers();
const hasUserPermission = useHasUserPermission(); const hasUserPermission = useHasUserPermission();
const canAddItems = () => {
let canAdd = false;
layers.map(layer => {
if(layer.api?.createItem && hasUserPermission(layer.api.collectionName!,"create")) canAdd = true;
})
return canAdd;
}
return ( return (
<>{
canAddItems() ?
<div className="tw-dropdown tw-dropdown-top tw-dropdown-end tw-dropdown-hover tw-z-500 tw-absolute tw-right-4 tw-bottom-4" > <div className="tw-dropdown tw-dropdown-top tw-dropdown-end tw-dropdown-hover tw-z-500 tw-absolute tw-right-4 tw-bottom-4" >
<label tabIndex={0} className="tw-z-500 tw-btn tw-btn-circle tw-shadow tw-bg-base-100"> <label tabIndex={0} className="tw-z-500 tw-btn tw-btn-circle tw-shadow tw-bg-base-100">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth="2" stroke="currentColor" className="tw-w-5 tw-h-5"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth="2" stroke="currentColor" className="tw-w-5 tw-h-5">
@ -36,7 +46,9 @@ export default function AddButton({ setSelectNewItemPosition }: { setSelectNewIt
))} ))}
</ul> </ul>
</div> : ""
}
</>
</div>
) )
} }

View File

@ -22,7 +22,6 @@ export function HeaderView({ item, title, avatar, setItemFormPopup }: {
const map = useMap(); const map = useMap();
const hasUserPermission = useHasUserPermission(); const hasUserPermission = useHasUserPermission();
const removeItemFromMap = async (event: React.MouseEvent<HTMLElement>) => { const removeItemFromMap = async (event: React.MouseEvent<HTMLElement>) => {
setLoading(true); setLoading(true);
let success = false; let success = false;
@ -49,8 +48,6 @@ export function HeaderView({ item, title, avatar, setItemFormPopup }: {
setItemFormPopup({ position: new LatLng(item.position.coordinates[1], item.position.coordinates[0]), layer: item.layer!, item: item, setItemFormPopup: setItemFormPopup }) setItemFormPopup({ position: new LatLng(item.position.coordinates[1], item.position.coordinates[0]), layer: item.layer!, item: item, setItemFormPopup: setItemFormPopup })
} }
console.log(title);
return ( return (
<div className='tw-grid tw-grid-cols-6 tw-pb-2'> <div className='tw-grid tw-grid-cols-6 tw-pb-2'>
@ -67,7 +64,7 @@ export function HeaderView({ item, title, avatar, setItemFormPopup }: {
</div> </div>
</div> </div>
<div className='tw-col-span-1'> <div className='tw-col-span-1'>
{item.layer?.api && {(item.layer?.api?.deleteItem || item.layer?.api?.updateItem) && (hasUserPermission(item.layer.api?.collectionName!, "delete") || hasUserPermission(item.layer.api?.collectionName!, "update") ) &&
<div className="tw-dropdown tw-dropdown-bottom"> <div className="tw-dropdown tw-dropdown-bottom">
<label tabIndex={0} className="tw-bg-base-100 tw-btn tw-m-1 tw-leading-3 tw-border-none tw-min-h-0 tw-h-6"> <label tabIndex={0} className="tw-bg-base-100 tw-btn tw-m-1 tw-leading-3 tw-border-none tw-min-h-0 tw-h-6">
<svg xmlns="http://www.w3.org/2000/svg" className="tw-h-5 tw-w-5" viewBox="0 0 20 20" fill="currentColor"> <svg xmlns="http://www.w3.org/2000/svg" className="tw-h-5 tw-w-5" viewBox="0 0 20 20" fill="currentColor">