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

improved item menu

Browse Source
This commit is contained in:
Anton Tranelis 2024-03-23 14:59:34 +01:00
parent 970938400f
commit 93bf7519d6
2 changed files with 40 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
src/Components/Map/Subcomponents/ItemPopupComponents/HeaderView.tsx
View File

@ -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-col-span-5'>
<div className="tw-flex tw-flex-row">{
avatar ?
<div className="tw-w-10 tw-min-w-[2.5em] tw-rounded-full">
<img className="tw-rounded-full" src={`${avatar}?width=80&height=80`} />
</div>
:
""
}
<b className={`tw-text-xl tw-font-bold ${avatar ? "tw-ml-2 tw-mt-1" : ""}`}>{title ? title : item.name}</b>
<div className='tw-flex tw-flex-row'>
<div className="tw-grow">
<div className={`${big ? "tw-text-3xl " : "tw-text-xl "} tw-font-semibold`}>
{avatar &&
<img className={`${big ? "tw-w-20" : "tw-w-10"} tw-inline tw-rounded-full`} src={avatar}></img>}
<span className={`${avatar ? "tw-ml-2" : ""}`}>{title&& title}</span>
</div>
</div>
<div className='tw-col-span-1' onClick={(e) => e.stopPropagation()}>
</div> </div>
<div onClick={(e) => e.stopPropagation()} className={`${big ? "tw-mt-5":"tw-mt-1"}`}>
{(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()} >

40
src/Components/Profile/OverlayItemProfile.tsx
View File

@ -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'>
<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>
<HeaderView api={item.layer?.api} item={item} deleteCallback={handleDelete} editCallback={ () => navigate("/edit-item/"+item.id)} big/>