Added type in CreateFolder function

This commit is contained in:
Sadrinho27 2025-10-02 23:25:14 +02:00
parent 741ad90b00
commit d88697f282

View File

@ -56,6 +56,8 @@ import Iframe from "@/components/4nk/Iframe"
import MessageBus from "@/lib/4nk/MessageBus" import MessageBus from "@/lib/4nk/MessageBus"
import EventBus from "@/lib/4nk/EventBus" import EventBus from "@/lib/4nk/EventBus"
import UserStore from "@/lib/4nk/UserStore" import UserStore from "@/lib/4nk/UserStore"
import ProcessesViewer from "@/components/ProcessesViewer"
import { iframeUrl } from "@/app/page"
interface FolderData { interface FolderData {
id: number id: number
@ -151,6 +153,8 @@ interface Role {
level: "folder" | "space" | "global" level: "folder" | "space" | "global"
} }
type FolderType = "contrat" | "projet" | "rapport" | "finance" | "rh" | "marketing";
export default function FoldersPage() { export default function FoldersPage() {
const router = useRouter() const router = useRouter()
const [viewMode, setViewMode] = useState<'list'>('list') const [viewMode, setViewMode] = useState<'list'>('list')
@ -165,6 +169,9 @@ export default function FoldersPage() {
const [currentPath, setCurrentPath] = useState<string[]>(["Racine"]) const [currentPath, setCurrentPath] = useState<string[]>(["Racine"])
const [actionModal, setActionModal] = useState<ActionModal>({ type: null, folder: null, folders: [] }) const [actionModal, setActionModal] = useState<ActionModal>({ type: null, folder: null, folders: [] })
const [showCreateFolderModal, setShowCreateFolderModal] = useState(false) const [showCreateFolderModal, setShowCreateFolderModal] = useState(false)
const [folderType, setFolderType] = useState<FolderType | null>(null);
const [isModalOpen, setIsModalOpen] = useState(false);
const [menuOpen, setMenuOpen] = useState(false);
// 4NK Integration states // 4NK Integration states
const [isConnected, setIsConnected] = useState(false) const [isConnected, setIsConnected] = useState(false)
@ -173,7 +180,6 @@ export default function FoldersPage() {
const [myProcesses, setMyProcesses] = useState<string[]>([]) const [myProcesses, setMyProcesses] = useState<string[]>([])
const [userPairingId, setUserPairingId] = useState<string | null>(null) const [userPairingId, setUserPairingId] = useState<string | null>(null)
const [pairingIdInitialized, setPairingIdInitialized] = useState(false) const [pairingIdInitialized, setPairingIdInitialized] = useState(false)
const iframeUrl = 'https://dev3.4nkweb.com'
// Modal states // Modal states
const [inviteMessage, setInviteMessage] = useState("") const [inviteMessage, setInviteMessage] = useState("")
@ -355,7 +361,7 @@ export default function FoldersPage() {
}); });
}); });
} }
}, [isConnected]); }, [isConnected, iframeUrl]);
useEffect(() => { useEffect(() => {
if (isConnected && processes !== null) { if (isConnected && processes !== null) {
@ -708,7 +714,7 @@ export default function FoldersPage() {
} }
loadFolders() loadFolders()
}, []) }, []);
// Notification system // Notification system
const showNotification = (type: "success" | "error" | "info", message: string) => { const showNotification = (type: "success" | "error" | "info", message: string) => {
@ -735,6 +741,7 @@ export default function FoldersPage() {
}, []); }, []);
const handleAuthConnect = useCallback(() => { const handleAuthConnect = useCallback(() => {
setIsConnected(true);
setShowAuthModal(false); setShowAuthModal(false);
console.log('Auth Connect - Connexion établie, le useEffect se chargera de récupérer le userPairingId'); console.log('Auth Connect - Connexion établie, le useEffect se chargera de récupérer le userPairingId');
showNotification("success", "Connexion 4NK réussie"); showNotification("success", "Connexion 4NK réussie");
@ -960,52 +967,65 @@ export default function FoldersPage() {
setActionModal({ type: "delete", folder, folders: [] }) setActionModal({ type: "delete", folder, folders: [] })
} }
const handleCreateFolder = () => { const handleOpenModal = (type: FolderType) => {
setShowCreateFolderModal(true) setFolderType(type);
setIsModalOpen(true);
setMenuOpen(false);
};
const handleCloseModal = () => {
setIsModalOpen(false);
setFolderType(null);
};
const handleSaveNewFolder = useCallback(
(folderData: SDKFolderData) => {
if (!isConnected || !userPairingId) {
console.error('Conditions non remplies:', { isConnected, userPairingId });
showNotification(
"error",
`Vous devez être connecté à 4NK pour créer un dossier (Connected: ${isConnected}, PairingId: ${userPairingId ? 'OK' : 'NULL'})`
);
return;
} }
const handleSaveNewFolder = useCallback((folderData: SDKFolderData) => { // Ajout du type dans les données du dossier
console.log('Debug - handleSaveNewFolder:', { const folderToCreate = {
isConnected, ...folderData,
userPairingId, type: folderType
userPairingIdType: typeof userPairingId, };
userStoreConnected: UserStore.getInstance().isConnected(),
userStorePairingId: UserStore.getInstance().getUserPairingId()
});
if (userPairingId !== null && isConnected) {
const roles = setDefaultFolderRoles(userPairingId, [], []); const roles = setDefaultFolderRoles(userPairingId, [], []);
const folderPrivateFields = FolderPrivateFields; const folderPrivateFields = FolderPrivateFields;
MessageBus.getInstance(iframeUrl).createFolder(folderData, folderPrivateFields, roles).then((_folderCreated: FolderCreated) => { MessageBus.getInstance(iframeUrl)
MessageBus.getInstance(iframeUrl).notifyProcessUpdate(_folderCreated.processId, _folderCreated.process.states[0].state_id).then(() => { .createFolder(folderToCreate, folderPrivateFields, roles)
MessageBus.getInstance(iframeUrl).validateState(_folderCreated.processId, _folderCreated.process.states[0].state_id).then((_updatedProcess: any) => { .then((_folderCreated: FolderCreated) => {
MessageBus.getInstance(iframeUrl).getProcesses().then((processes: any) => { const firstStateId = _folderCreated.process.states[0].state_id;
setProcesses(processes); MessageBus.getInstance(iframeUrl)
}); .notifyProcessUpdate(_folderCreated.processId, firstStateId)
}); .then(() =>
MessageBus.getInstance(iframeUrl)
.validateState(_folderCreated.processId, firstStateId)
.then(() =>
MessageBus.getInstance(iframeUrl)
.getProcesses()
.then(async (processes: any) => {
setProcesses(processes)
}) })
}).catch((error) => { )
console.error('Erreur lors de la création du dossier 4NK:', error); );
showNotification("error", "Erreur lors de la création du dossier");
});
setShowCreateFolderModal(false); setShowCreateFolderModal(false);
showNotification("success", `Dossier "${folderData.name}" créé avec succès sur 4NK`); showNotification("success", `Dossier "${folderData.name}" créé avec succès sur 4NK`);
} else { })
console.error('Conditions non remplies:', { .catch((error) => {
userPairingIdCheck: userPairingId !== null, console.error('Erreur lors de la création du dossier 4NK:', error);
isConnectedCheck: isConnected, showNotification("error", "Erreur lors de la création du dossier");
actualUserPairingId: userPairingId,
actualIsConnected: isConnected
}); });
showNotification("error", `Vous devez être connecté à 4NK pour créer un dossier (Connected: ${isConnected}, PairingId: ${userPairingId ? 'OK' : 'NULL'})`); },
} [userPairingId, isConnected, iframeUrl, folderType]
}, [userPairingId, isConnected, iframeUrl]); );
const handleCancelCreateFolder = () => {
setShowCreateFolderModal(false)
}
const handleToggleFavorite = (folderId: number) => { const handleToggleFavorite = (folderId: number) => {
const folder = folders.find((f) => f.id === folderId) const folder = folders.find((f) => f.id === folderId)
@ -1451,8 +1471,7 @@ export default function FoldersPage() {
{/* Notification */} {/* Notification */}
{notification && ( {notification && (
<div <div
className={`fixed top-4 right-4 z-50 p-4 rounded-lg shadow-lg flex items-center space-x-2 ${ className={`fixed top-4 right-4 z-50 p-4 rounded-lg shadow-lg flex items-center space-x-2 ${notification.type === "success"
notification.type === "success"
? "bg-green-100 text-green-800 border border-green-200" ? "bg-green-100 text-green-800 border border-green-200"
: notification.type === "error" : notification.type === "error"
? "bg-red-100 text-red-800 border border-red-200" ? "bg-red-100 text-red-800 border border-red-200"
@ -1495,23 +1514,45 @@ export default function FoldersPage() {
<Upload className="h-4 w-4 mr-2" /> <Upload className="h-4 w-4 mr-2" />
Importer Importer
</Button> </Button>
{isConnected ? ( {isConnected ? (
<> <div className="flex gap-2">
<Button size="sm" onClick={handleCreateFolder}> {/* Nouveau dossier avec menu */}
<div className="relative">
<Button size="sm" onClick={() => setMenuOpen(!menuOpen)}>
<FolderPlus className="h-4 w-4 mr-2" /> <FolderPlus className="h-4 w-4 mr-2" />
Nouveau dossier Nouveau dossier
</Button> </Button>
{menuOpen && (
<div className="absolute mt-1 right-0 w-48 bg-white border border-gray-200 rounded shadow-lg z-50">
{['contrat', 'projet', 'rapport', 'finance', 'rh', 'marketing'].map((type) => (
<button
key={type}
className="w-full text-left px-4 py-2 text-gray-700 hover:bg-gray-100"
onClick={() => handleOpenModal(type as FolderType)}
>
{type.charAt(0).toUpperCase() + type.slice(1)}
</button>
))}
</div>
)}
</div>
{/* Déconnexion */}
<Button variant="outline" size="sm" onClick={handleLogout}> <Button variant="outline" size="sm" onClick={handleLogout}>
<X className="h-4 w-4 mr-2" /> <X className="h-4 w-4 mr-2" />
Déconnexion 4NK Déconnexion 4NK
</Button> </Button>
{/* Debug PairingId */}
{!userPairingId && ( {!userPairingId && (
<Button variant="outline" size="sm" onClick={handleForceGetPairingId}> <Button variant="outline" size="sm" onClick={handleForceGetPairingId}>
<Brain className="h-4 w-4 mr-2" /> <Brain className="h-4 w-4 mr-2" />
Debug PairingId Debug PairingId
</Button> </Button>
)} )}
</> </div>
) : ( ) : (
<Button variant="outline" size="sm" onClick={handleLogin}> <Button variant="outline" size="sm" onClick={handleLogin}>
<Shield className="h-4 w-4 mr-2" /> <Shield className="h-4 w-4 mr-2" />
@ -1581,7 +1622,6 @@ export default function FoldersPage() {
{sortOrder === "asc" ? <SortAsc className="h-4 w-4" /> : <SortDesc className="h-4 w-4" />} {sortOrder === "asc" ? <SortAsc className="h-4 w-4" /> : <SortDesc className="h-4 w-4" />}
</Button> </Button>
</div> </div>
{/* Vue grille supprimée: forcer la vue liste uniquement */} {/* Vue grille supprimée: forcer la vue liste uniquement */}
</div> </div>
</div> </div>
@ -1771,7 +1811,7 @@ export default function FoldersPage() {
)} )}
{/* Folders List/Grid */} {/* Folders List/Grid */}
<Card> {/* <Card>
<CardContent className="p-0"> <CardContent className="p-0">
{viewMode === "list" ? ( {viewMode === "list" ? (
<div className="overflow-x-auto"> <div className="overflow-x-auto">
@ -1847,8 +1887,7 @@ export default function FoldersPage() {
{filteredFolders.map((folder) => ( {filteredFolders.map((folder) => (
<div <div
key={folder.id} key={folder.id}
className={`relative group border rounded-lg p-6 hover:shadow-md transition-shadow cursor-pointer ${ className={`relative group border rounded-lg p-6 hover:shadow-md transition-shadow cursor-pointer ${selectedFolders.includes(folder.id) ? "bg-blue-50 border-blue-200" : "bg-white"
selectedFolders.includes(folder.id) ? "bg-blue-50 border-blue-200" : "bg-white"
}`} }`}
onClick={() => handleOpenFolder(folder)} onClick={() => handleOpenFolder(folder)}
> >
@ -1948,7 +1987,7 @@ export default function FoldersPage() {
</div> </div>
</div> </div>
{/* Recent Activity */} Recent Activity
<div className="mt-4 pt-4 border-t"> <div className="mt-4 pt-4 border-t">
<h4 className="text-xs font-medium text-gray-700 mb-2">Activité récente</h4> <h4 className="text-xs font-medium text-gray-700 mb-2">Activité récente</h4>
<div className="space-y-1"> <div className="space-y-1">
@ -1976,13 +2015,25 @@ export default function FoldersPage() {
? "Essayez de modifier vos critères de recherche" ? "Essayez de modifier vos critères de recherche"
: "Commencez par créer votre premier dossier"} : "Commencez par créer votre premier dossier"}
</p> </p>
<Button onClick={handleCreateFolder}>
<FolderPlus className="h-4 w-4 mr-2" />
Nouveau dossier
</Button>
</div> </div>
)} )}
</CardContent> </CardContent>
</Card> */}
{/* ProcessesViewer Card */}
<Card className="mt-6">
<CardContent className="p-4">
<h3 className="text-lg font-semibold text-gray-900 mb-4">Processus Blockchain</h3>
{/* Intégration du ProcessesViewer */}
<div className="w-full h-[500px]">
<ProcessesViewer
processes={processes}
myProcesses={myProcesses}
onProcessesUpdate={setProcesses}
/>
</div>
</CardContent>
</Card> </Card>
{/* Modals */} {/* Modals */}
@ -2548,13 +2599,16 @@ export default function FoldersPage() {
</div> </div>
)} )}
{/* Folder Creation Modal */} {/* Modal */}
{folderType && (
<FolderModal <FolderModal
isOpen={showCreateFolderModal} isOpen={isModalOpen}
onClose={handleCancelCreateFolder} onClose={handleCloseModal}
onSave={handleSaveNewFolder} onSave={handleSaveNewFolder}
onCancel={handleCancelCreateFolder} onCancel={handleCloseModal}
folderType={folderType}
/> />
)}
{/* 4NK Authentication Modal */} {/* 4NK Authentication Modal */}
<AuthModal <AuthModal