Yaseen/Tech4biz-channel
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor: Add custom deletion confirmation modal in AssetsPage

Browse Source
This commit is contained in:
kenilkb 2026-07-15 14:52:09 +05:30
parent 9c19ca9dd7
commit c9ec1296a6
1 changed files with 44 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
Channel-Frontend/src/pages/AssetsPage.tsx
View File

@ -29,6 +29,7 @@ import { ManageGroupsModal } from "../features/assets/components/ManageGroupsMod
import { PageHeader } from "../components/ui/PageHeader"; import { PageHeader } from "../components/ui/PageHeader";
import Button from "../components/ui/Button"; import Button from "../components/ui/Button";
import { PageLayout } from "../components/layout/PageLayout"; import { PageLayout } from "../components/layout/PageLayout";
import Modal from "../components/ui/Modal";
// Type Definitions // Type Definitions
import type { Asset, Organization } from "../types/assets"; import type { Asset, Organization } from "../types/assets";
@ -74,6 +75,7 @@ export const AssetsPage = () => {
const [activeMenuId, setActiveMenuId] = useState<string | null>(null); const [activeMenuId, setActiveMenuId] = useState<string | null>(null);
const [selectedAssetIds, setSelectedAssetIds] = useState<string[]>([]); const [selectedAssetIds, setSelectedAssetIds] = useState<string[]>([]);
const [expandedAssetId, setExpandedAssetId] = useState<string | null>(null); const [expandedAssetId, setExpandedAssetId] = useState<string | null>(null);
const [assetToDelete, setAssetToDelete] = useState<{ id: string, title: string } | null>(null);
useEffect(() => { useEffect(() => {
fetchData(); fetchData();
@ -138,16 +140,19 @@ export const AssetsPage = () => {
setIsDetailsOpen(true); setIsDetailsOpen(true);
}; };
const handleDeleteAsset = async (id: string) => { const handleDeleteAsset = (id: string) => {
const asset = assets.find(a => a.id === id); const asset = assets.find(a => a.id === id);
const title = asset ? asset.title : "this asset"; if (asset) {
if ( setAssetToDelete({ id: asset.id, title: asset.title });
!window.confirm(`Are you sure you want to permanently delete "${title}"?`) }
) };
return;
const confirmDeleteAsset = async () => {
if (!assetToDelete) return;
try { try {
await deleteAsset(id); await deleteAsset(assetToDelete.id);
success("Asset deleted successfully", `"${title}" has been permanently removed.`); success("Asset deleted successfully", `"${assetToDelete.title}" has been permanently removed.`);
setAssetToDelete(null);
await fetchData(); await fetchData();
} catch (err: any) { } catch (err: any) {
console.error("Failed to delete asset", err); console.error("Failed to delete asset", err);
@ -474,6 +479,37 @@ export const AssetsPage = () => {
groups={groups} groups={groups}
onRefresh={fetchData} onRefresh={fetchData}
/> />
{/* Delete Confirmation Modal */}
<Modal
isOpen={assetToDelete !== null}
onClose={() => setAssetToDelete(null)}
title="Delete Asset"
subtitle="Confirm permanent resource deletion."
size="sm"
>
<div className="space-y-4 font-sans">
<p className="text-xs text-ink-600 leading-relaxed">
Are you sure you want to permanently delete <span className="font-bold text-ink-900">"{assetToDelete?.title}"</span>? This action cannot be undone.
</p>
<div className="flex gap-3 justify-end pt-2">
<Button
onClick={() => setAssetToDelete(null)}
variant="secondary"
size="sm"
>
Cancel
</Button>
<Button
onClick={confirmDeleteAsset}
variant="danger"
size="sm"
>
Delete Permanently
</Button>
</div>
</div>
</Modal>
</PageLayout> </PageLayout>
); );
}; };