carnet panel contact
This commit is contained in:
parent
ef842a15d6
commit
a8e040f097
@ -10,6 +10,7 @@ import { PanelResizer } from "@/components/carnet/panel-resizer";
|
||||
import { useMediaQuery } from "@/hooks/use-media-query";
|
||||
import { ContactsView } from '@/components/carnet/contacts-view';
|
||||
import { X, Menu } from "lucide-react";
|
||||
import { ContactDetails } from '@/components/carnet/contact-details';
|
||||
|
||||
// Layout modes
|
||||
export enum PaneLayout {
|
||||
@ -495,24 +496,28 @@ export default function CarnetPage() {
|
||||
|
||||
{/* Editor Panel */}
|
||||
<div className="flex-1 overflow-hidden">
|
||||
<Editor
|
||||
note={selectedNote}
|
||||
onSave={handleNoteSave}
|
||||
currentFolder={selectedFolder}
|
||||
onRefresh={() => {
|
||||
// Refresh the notes list
|
||||
fetch(`/api/nextcloud/files?folder=${selectedFolder}`)
|
||||
.then(response => response.json())
|
||||
.then(updatedNotes => {
|
||||
if (selectedFolder === 'Contacts') {
|
||||
setContacts(updatedNotes);
|
||||
} else {
|
||||
setNotes(updatedNotes);
|
||||
}
|
||||
})
|
||||
.catch(error => console.error('Error refreshing data:', error));
|
||||
}}
|
||||
/>
|
||||
{selectedFolder === 'Contacts' || selectedFolder.endsWith('.vcf') ? (
|
||||
<ContactDetails contact={selectedContact} />
|
||||
) : (
|
||||
<Editor
|
||||
note={selectedNote}
|
||||
onSave={handleNoteSave}
|
||||
currentFolder={selectedFolder}
|
||||
onRefresh={() => {
|
||||
// Refresh the notes list
|
||||
fetch(`/api/nextcloud/files?folder=${selectedFolder}`)
|
||||
.then(response => response.json())
|
||||
.then(updatedNotes => {
|
||||
if (selectedFolder === 'Contacts') {
|
||||
setContacts(updatedNotes);
|
||||
} else {
|
||||
setNotes(updatedNotes);
|
||||
}
|
||||
})
|
||||
.catch(error => console.error('Error refreshing data:', error));
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Mobile Navigation Toggle */}
|
||||
|
||||
112
components/carnet/contact-details.tsx
Normal file
112
components/carnet/contact-details.tsx
Normal file
@ -0,0 +1,112 @@
|
||||
"use client";
|
||||
|
||||
import React from 'react';
|
||||
import { User, Mail, Phone, Building, MapPin } from 'lucide-react';
|
||||
|
||||
interface Contact {
|
||||
id: string;
|
||||
fullName?: string;
|
||||
email?: string;
|
||||
phone?: string;
|
||||
organization?: string;
|
||||
address?: string;
|
||||
notes?: string;
|
||||
group?: string;
|
||||
}
|
||||
|
||||
interface ContactDetailsProps {
|
||||
contact: Contact | null;
|
||||
}
|
||||
|
||||
export const ContactDetails: React.FC<ContactDetailsProps> = ({ contact }) => {
|
||||
if (!contact) {
|
||||
return (
|
||||
<div className="flex flex-col h-full bg-carnet-bg items-center justify-center text-carnet-text-muted">
|
||||
<User className="h-16 w-16 mb-4 opacity-20" />
|
||||
<p>Sélectionnez un contact pour voir les détails</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex flex-col h-full bg-carnet-bg p-6">
|
||||
<div className="space-y-6">
|
||||
{/* Contact Header */}
|
||||
<div className="flex items-center space-x-4">
|
||||
<div className="h-16 w-16 rounded-full bg-primary/10 flex items-center justify-center">
|
||||
<User className="h-8 w-8 text-primary" />
|
||||
</div>
|
||||
<div>
|
||||
<h2 className="text-xl font-semibold text-carnet-text-primary">
|
||||
{contact.fullName || contact.email || 'Sans nom'}
|
||||
</h2>
|
||||
{contact.organization && (
|
||||
<p className="text-sm text-carnet-text-muted">
|
||||
{contact.organization}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Contact Information */}
|
||||
<div className="space-y-4">
|
||||
{contact.email && (
|
||||
<div className="flex items-center space-x-3">
|
||||
<div className="h-8 w-8 rounded-full bg-blue-50 flex items-center justify-center">
|
||||
<Mail className="h-4 w-4 text-blue-500" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-xs text-carnet-text-muted">Email</p>
|
||||
<p className="text-sm text-carnet-text-primary">{contact.email}</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{contact.phone && (
|
||||
<div className="flex items-center space-x-3">
|
||||
<div className="h-8 w-8 rounded-full bg-green-50 flex items-center justify-center">
|
||||
<Phone className="h-4 w-4 text-green-500" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-xs text-carnet-text-muted">Téléphone</p>
|
||||
<p className="text-sm text-carnet-text-primary">{contact.phone}</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{contact.organization && (
|
||||
<div className="flex items-center space-x-3">
|
||||
<div className="h-8 w-8 rounded-full bg-purple-50 flex items-center justify-center">
|
||||
<Building className="h-4 w-4 text-purple-500" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-xs text-carnet-text-muted">Organisation</p>
|
||||
<p className="text-sm text-carnet-text-primary">{contact.organization}</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{contact.address && (
|
||||
<div className="flex items-center space-x-3">
|
||||
<div className="h-8 w-8 rounded-full bg-orange-50 flex items-center justify-center">
|
||||
<MapPin className="h-4 w-4 text-orange-500" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-xs text-carnet-text-muted">Adresse</p>
|
||||
<p className="text-sm text-carnet-text-primary">{contact.address}</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Notes Section */}
|
||||
{contact.notes && (
|
||||
<div className="mt-6">
|
||||
<h3 className="text-sm font-medium text-carnet-text-primary mb-2">Notes</h3>
|
||||
<p className="text-sm text-carnet-text-muted whitespace-pre-wrap">{contact.notes}</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@ -91,56 +91,6 @@ export const ContactsView: React.FC<ContactsViewProps> = ({
|
||||
</ul>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Contact Details */}
|
||||
{selectedContact && (
|
||||
<div className="p-4 border-t border-carnet-border">
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center space-x-3">
|
||||
<div className="h-12 w-12 rounded-full bg-primary/10 flex items-center justify-center">
|
||||
<User className="h-6 w-6 text-primary" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold text-carnet-text-primary">
|
||||
{selectedContact.fullName}
|
||||
</h3>
|
||||
{selectedContact.organization && (
|
||||
<p className="text-sm text-carnet-text-muted">
|
||||
{selectedContact.organization}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-3">
|
||||
{selectedContact.email && (
|
||||
<div className="flex items-center space-x-2">
|
||||
<Mail className="h-4 w-4 text-carnet-text-muted" />
|
||||
<span className="text-sm text-carnet-text-primary">{selectedContact.email}</span>
|
||||
</div>
|
||||
)}
|
||||
{selectedContact.phone && (
|
||||
<div className="flex items-center space-x-2">
|
||||
<Phone className="h-4 w-4 text-carnet-text-muted" />
|
||||
<span className="text-sm text-carnet-text-primary">{selectedContact.phone}</span>
|
||||
</div>
|
||||
)}
|
||||
{selectedContact.address && (
|
||||
<div className="flex items-center space-x-2">
|
||||
<MapPin className="h-4 w-4 text-carnet-text-muted" />
|
||||
<span className="text-sm text-carnet-text-primary">{selectedContact.address}</span>
|
||||
</div>
|
||||
)}
|
||||
{selectedContact.notes && (
|
||||
<div className="mt-4">
|
||||
<h4 className="text-sm font-medium text-carnet-text-primary mb-2">Notes</h4>
|
||||
<p className="text-sm text-carnet-text-muted">{selectedContact.notes}</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
Loading…
Reference in New Issue
Block a user