226 lines
9.9 KiB
TypeScript
226 lines
9.9 KiB
TypeScript
import React, { useState, useEffect } from 'react';
|
|
import { motion, AnimatePresence } from 'framer-motion';
|
|
import { X, ChevronDown, ChevronUp } from 'lucide-react';
|
|
import { updateAsset } from '../../../services/assets-api';
|
|
import type { Asset, Organization, ShareItem } from '../../../types/assets';
|
|
|
|
interface ShareAssetModalProps {
|
|
isOpen: boolean;
|
|
onClose: () => void;
|
|
asset: Asset | null;
|
|
organizations: Organization[];
|
|
onSuccess: () => void;
|
|
}
|
|
|
|
export const ShareAssetModal: React.FC<ShareAssetModalProps> = ({
|
|
isOpen,
|
|
onClose,
|
|
asset,
|
|
organizations,
|
|
onSuccess
|
|
}) => {
|
|
const [sharesList, setSharesList] = useState<ShareItem[]>([]);
|
|
const [isSavingShare, setIsSavingShare] = useState(false);
|
|
const [expandedOrgId, setExpandedOrgId] = useState<string | null>(null);
|
|
|
|
useEffect(() => {
|
|
if (asset) {
|
|
setSharesList(
|
|
asset.sharedWith?.map(s => ({
|
|
organizationId: s.organizationId,
|
|
userId: s.userId
|
|
})) || []
|
|
);
|
|
}
|
|
}, [asset]);
|
|
|
|
const isOrgSharedEntirely = (orgId: string) => {
|
|
return sharesList.some(s => s.organizationId === orgId && s.userId === null);
|
|
};
|
|
|
|
const isUserSharedSpecifically = (orgId: string, userId: string) => {
|
|
return sharesList.some(s => s.organizationId === orgId && s.userId === userId);
|
|
};
|
|
|
|
const handleToggleOrg = (orgId: string) => {
|
|
const isShared = isOrgSharedEntirely(orgId);
|
|
if (isShared) {
|
|
setSharesList(prev => prev.filter(s => s.organizationId !== orgId));
|
|
} else {
|
|
setSharesList(prev => [
|
|
...prev.filter(s => s.organizationId !== orgId),
|
|
{ organizationId: orgId, userId: null }
|
|
]);
|
|
}
|
|
};
|
|
|
|
const handleToggleUser = (orgId: string, userId: string) => {
|
|
const isShared = isUserSharedSpecifically(orgId, userId);
|
|
if (isShared) {
|
|
setSharesList(prev => prev.filter(s => !(s.organizationId === orgId && s.userId === userId)));
|
|
} else {
|
|
setSharesList(prev => [
|
|
...prev.filter(s => !(s.organizationId === orgId && s.userId === null)),
|
|
{ organizationId: orgId, userId }
|
|
]);
|
|
}
|
|
};
|
|
|
|
const handleShareSubmit = async (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
if (!asset) return;
|
|
|
|
setIsSavingShare(true);
|
|
try {
|
|
await updateAsset(asset.id, {
|
|
shares: sharesList
|
|
});
|
|
onSuccess();
|
|
onClose();
|
|
} catch (err) {
|
|
console.error('Failed to update share permissions', err);
|
|
} finally {
|
|
setIsSavingShare(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<AnimatePresence>
|
|
{isOpen && asset && (
|
|
<div className="fixed inset-0 z-50 flex items-center justify-center p-4">
|
|
<motion.div
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
exit={{ opacity: 0 }}
|
|
onClick={onClose}
|
|
className="absolute inset-0 bg-ink-950/40 backdrop-blur-sm"
|
|
/>
|
|
<motion.div
|
|
initial={{ opacity: 0, scale: 0.95, y: 10 }}
|
|
animate={{ opacity: 1, scale: 1, y: 0 }}
|
|
exit={{ opacity: 0, scale: 0.95, y: 10 }}
|
|
className="relative bg-ink-0 border border-ink-200 rounded-2xl p-6 max-w-lg w-full shadow-xl z-10 flex flex-col max-h-[85vh] overflow-hidden"
|
|
>
|
|
<div className="flex justify-between items-center pb-3.5 border-b border-ink-100 flex-shrink-0">
|
|
<div>
|
|
<h3 className="text-lg font-bold text-ink-900">Share Settings</h3>
|
|
<p className="text-xs text-ink-500 mt-0.5">{asset.title}</p>
|
|
</div>
|
|
<button
|
|
onClick={onClose}
|
|
className="p-1 rounded-lg text-ink-400 hover:text-ink-900 hover:bg-ink-50 transition-colors"
|
|
>
|
|
<X className="w-5 h-5" />
|
|
</button>
|
|
</div>
|
|
|
|
<form onSubmit={handleShareSubmit} className="flex-1 min-h-0 flex flex-col mt-4">
|
|
<div className="flex-1 overflow-y-auto pr-1 space-y-4 scrollbar-thin">
|
|
<p className="text-xs text-ink-600 leading-relaxed">
|
|
Select organizations or expand to specify exact users that can access this asset:
|
|
</p>
|
|
|
|
<div className="max-h-64 overflow-y-auto border border-ink-200 rounded-xl divide-y divide-ink-250 bg-ink-50 scrollbar-thin">
|
|
{organizations.length === 0 ? (
|
|
<p className="p-4 text-xs text-ink-500 text-center font-medium">No partner organizations registered yet.</p>
|
|
) : (
|
|
organizations.map(org => {
|
|
const isEntireShared = isOrgSharedEntirely(org.id);
|
|
const isExpanded = expandedOrgId === org.id;
|
|
const activeUsers = org.users || [];
|
|
const specificSharedCount = sharesList.filter(s => s.organizationId === org.id && s.userId !== null).length;
|
|
|
|
return (
|
|
<div key={org.id} className="flex flex-col">
|
|
<div className="flex items-center justify-between p-3 hover:bg-ink-100 transition-colors">
|
|
<label className="flex items-center gap-3 cursor-pointer flex-1 select-none">
|
|
<input
|
|
type="checkbox"
|
|
checked={isEntireShared}
|
|
onChange={() => handleToggleOrg(org.id)}
|
|
className="w-4 h-4 rounded border-ink-300 text-ink-900 focus:ring-ink-900/10 cursor-pointer"
|
|
/>
|
|
<div className="flex flex-col">
|
|
<span className="text-xs font-bold text-ink-900">{org.name}</span>
|
|
{specificSharedCount > 0 && !isEntireShared && (
|
|
<span className="text-[10px] text-ink-500 font-semibold">
|
|
Shared with {specificSharedCount} specific {specificSharedCount === 1 ? 'user' : 'users'}
|
|
</span>
|
|
)}
|
|
</div>
|
|
</label>
|
|
|
|
<button
|
|
type="button"
|
|
onClick={() => setExpandedOrgId(isExpanded ? null : org.id)}
|
|
className="p-1 rounded-lg text-ink-400 hover:text-ink-900 hover:bg-ink-200 transition-colors flex items-center gap-1 text-[11px] font-bold"
|
|
>
|
|
<span>Users</span>
|
|
{isExpanded ? <ChevronUp className="w-3.5 h-3.5" /> : <ChevronDown className="w-3.5 h-3.5" />}
|
|
</button>
|
|
</div>
|
|
|
|
<AnimatePresence>
|
|
{isExpanded && (
|
|
<motion.div
|
|
initial={{ height: 0, opacity: 0 }}
|
|
animate={{ height: 'auto', opacity: 1 }}
|
|
exit={{ height: 0, opacity: 0 }}
|
|
className="bg-ink-100 border-t border-b border-ink-200 overflow-hidden divide-y divide-ink-150"
|
|
>
|
|
{activeUsers.length === 0 ? (
|
|
<p className="p-3 text-[10px] text-ink-500 italic">No users found in this organization.</p>
|
|
) : (
|
|
activeUsers.map(userItem => {
|
|
const isUserShared = isUserSharedSpecifically(org.id, userItem.id);
|
|
|
|
return (
|
|
<label key={userItem.id} className="flex items-center gap-3 py-2 px-8 cursor-pointer hover:bg-ink-200/50 transition-all select-none">
|
|
<input
|
|
type="checkbox"
|
|
disabled={isEntireShared}
|
|
checked={isEntireShared || isUserShared}
|
|
onChange={() => handleToggleUser(org.id, userItem.id)}
|
|
className="w-3.5 h-3.5 rounded border-ink-300 text-ink-900 focus:ring-ink-900/10 cursor-pointer disabled:opacity-50"
|
|
/>
|
|
<span className={`text-[11px] font-semibold ${isEntireShared ? 'text-ink-400' : 'text-ink-800'}`}>
|
|
{userItem.email}
|
|
</span>
|
|
</label>
|
|
);
|
|
})
|
|
)}
|
|
</motion.div>
|
|
)}
|
|
</AnimatePresence>
|
|
</div>
|
|
);
|
|
})
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="pt-3.5 border-t border-ink-100 flex justify-end gap-3 flex-shrink-0 mt-4">
|
|
<button
|
|
type="button"
|
|
onClick={onClose}
|
|
className="px-4 py-2 rounded-lg border border-ink-200 text-ink-700 text-xs font-bold hover:bg-ink-50 transition-colors"
|
|
>
|
|
Cancel
|
|
</button>
|
|
<button
|
|
type="submit"
|
|
disabled={isSavingShare}
|
|
className="px-5 py-2 rounded-lg bg-ink-900 text-ink-0 text-xs font-bold hover:bg-ink-800 transition-colors shadow-sm disabled:opacity-50"
|
|
>
|
|
{isSavingShare ? 'Saving...' : 'Update Shares'}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</motion.div>
|
|
</div>
|
|
)}
|
|
</AnimatePresence>
|
|
);
|
|
};
|