improved item menu

src/Components/Map/Subcomponents/ItemPopupComponents/HeaderView.tsx

@@ -9,7 +9,7 @@ import { useEffect } from "react";
 
 
 
-export function HeaderView({ item, api, editCallback, deleteCallback, itemNameField, itemAvatarField, loading, hideMenu = false }: {
+export function HeaderView({ item, api, editCallback, deleteCallback, itemNameField, itemAvatarField, loading, hideMenu = false, big = false }: {
   item: Item,
   api?: ItemsApi<any>,
   editCallback?: any,
@@ -17,7 +17,8 @@ export function HeaderView({ item, api, editCallback, deleteCallback, itemNameFi
   itemNameField?: string,
   itemAvatarField?: string,
   loading?: boolean,
-  hideMenu?: boolean
+  hideMenu?: boolean,
+  big?: boolean
 }) {
 
 
@@ -30,7 +31,7 @@ export function HeaderView({ item, api, editCallback, deleteCallback, itemNameFi
   const assetsApi = useAssetApi();
 
 
-  const avatar = itemAvatarField && getValue(item, itemAvatarField) ? assetsApi.url + getValue(item, itemAvatarField) : item.layer?.itemAvatarField && item && getValue(item, item.layer?.itemAvatarField) && assetsApi.url + getValue(item, item.layer?.itemAvatarField);
+  const avatar = itemAvatarField && getValue(item, itemAvatarField) ? assetsApi.url + getValue(item, itemAvatarField) + `${big ? "?width=160&heigth=160": "?width=80&heigth=80"}` : item.layer?.itemAvatarField && item && getValue(item, item.layer?.itemAvatarField) && assetsApi.url + getValue(item, item.layer?.itemAvatarField) + `${big ? "?width=160&heigth=160": "?width=80&heigth=80"}`;
   const title = itemNameField ? getValue(item, itemNameField) : item.layer?.itemNameField && item && getValue(item, item.layer?.itemNameField);
 
 
@@ -43,21 +44,15 @@ export function HeaderView({ item, api, editCallback, deleteCallback, itemNameFi
 
   return (
     <>
-      <div className='tw-grid tw-grid-cols-6 tw-pb-2'>
+    <div className='tw-flex tw-flex-row'>
-        <div className='tw-col-span-5'>
+        <div className="tw-grow">
-          <div className="tw-flex tw-flex-row">{
+        <div className={`${big ? "tw-text-3xl " : "tw-text-xl "} tw-font-semibold`}>
-            avatar ?
+        {avatar &&
-              <div className="tw-w-10 tw-min-w-[2.5em] tw-rounded-full">
+                                <img className={`${big ? "tw-w-20" : "tw-w-10"} tw-inline tw-rounded-full`} src={avatar}></img>}
-                <img className="tw-rounded-full" src={`${avatar}?width=80&height=80`} />
+                                <span className={`${avatar ? "tw-ml-2" : ""}`}>{title&& title}</span>
-              </div>
-              :
-              ""
-          }
-            <b className={`tw-text-xl tw-font-bold ${avatar ? "tw-ml-2 tw-mt-1" : ""}`}>{title ? title : item.name}</b>
 
-          </div>
+        </div>      </div>
-        </div>
+        <div onClick={(e) => e.stopPropagation()} className={`${big ? "tw-mt-5":"tw-mt-1"}`}>
-        <div className='tw-col-span-1' onClick={(e) => e.stopPropagation()}>
           {(api?.deleteItem || item.layer?.api?.updateItem)
             && (hasUserPermission(api?.collectionName!, "delete", item) || hasUserPermission(api?.collectionName!, "update", item))
             && !hideMenu &&
@@ -88,6 +83,7 @@ export function HeaderView({ item, api, editCallback, deleteCallback, itemNameFi
               </ul>
             </div>}
         </div>
+
       </div>
       <DialogModal isOpened={modalOpen} title="Are you sure?" showCloseButton={false} onClose={() => (setModalOpen(false))} >
         <div onClick={(e) => e.stopPropagation()} >

src/Components/Profile/OverlayItemProfile.tsx

@@ -1,5 +1,5 @@
 import { MapOverlayPage } from '../Templates'
-import { useAddItem, useItems, useUpdateItem } from '../Map/hooks/useItems'
+import { useAddItem, useItems, useRemoveItem, useUpdateItem } from '../Map/hooks/useItems'
 import { useLocation, useNavigate } from 'react-router-dom'
 import { useEffect, useRef, useState } from 'react';
 import { Item } from '../../types';
@@ -19,6 +19,7 @@ import { useAuth } from '../Auth';
 import { useLayers } from '../Map/hooks/useLayers';
 import { ActionButton } from './ActionsButton';
 import { LinkedItemsHeaderView } from './LinkedItemsHeaderView';
+import { HeaderView } from '../Map/Subcomponents/ItemPopupComponents/HeaderView';
 
 export function OverlayItemProfile() {
 
@@ -33,6 +34,7 @@ export function OverlayItemProfile() {
 
     const layers = useLayers();
 
+    const removeItem = useRemoveItem();
 
     const tags = useTags();
 
@@ -196,22 +198,34 @@ export function OverlayItemProfile() {
 
     }
 
+    const handleDelete = async (event: React.MouseEvent<HTMLElement>) => {
+        event.stopPropagation();
+        setLoading(true);
+        let success = false;
+        try {
+          await item.layer?.api?.deleteItem!(item.id)
+          success = true;
+        } catch (error) {
+          toast.error(error.toString());
+        }
+        if (success) {
+          removeItem(item);
+          toast.success("Item deleted");
+        }
+        setLoading(false);
+        map.closePopup();
+        let params = new URLSearchParams(window.location.search);
+        window.history.pushState({}, "", "/" + `${params ? `?${params}` : ""}`);
+        navigate("/");
+      }
+    
+    
+
     return (
         <MapOverlayPage className='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-auto tw-top-0 tw-bottom-0'>
             {item &&
                 <>
-                    <div className='tw-flex tw-flex-row'>
+                    <HeaderView api={item.layer?.api} item={item} deleteCallback={handleDelete} editCallback={ () => navigate("/edit-item/"+item.id)} big/>
-                        <div className="tw-grow">
-                            <p className="tw-text-3xl tw-font-semibold">{item.layer?.itemAvatarField && getValue(item, item.layer.itemAvatarField) && <img className='tw-w-20 tw-h-20 tw-rounded-full tw-inline' src={`https://api.utopia-lab.org/assets/${getValue(item, item.layer.itemAvatarField)}?width=160&heigth=160`}></img>} {item.layer?.itemNameField && getValue(item, item.layer.itemNameField)}</p>
-                        </div>
-                        {(item.layer?.api?.updateItem && hasUserPermission(item.layer.api?.collectionName!, "update", item)) ?
-                            <a className='tw-self-center tw-btn tw-btn-sm tw-mr-4 tw-cursor-pointer' onClick={() => navigate("/edit-item/" + item.id)}>
-                                <svg xmlns="http://www.w3.org/2000/svg" className="tw-h-5 tw-w-5" viewBox="0 0 20 20" fill="currentColor">
-                                    <path d="M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z" />
-                                </svg>
-                            </a> : ""
-                        }
-                    </div>