1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
|
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import {
Card,
CardContent,
CardDescription,
CardHeader,
CardTitle,
CardFooter,
} from "@/components/ui/card";
import { SelectionItem } from "@/lib/definitions";
interface VCardFormProps {
selection: SelectionItem[];
onValueChange: (field: string, value: string) => void;
sectionChange: (section: string) => void;
onGenerate: any;
}
export default function VCardForm({
selection,
onValueChange,
sectionChange,
onGenerate,
}: VCardFormProps) {
function generateVCardText(fields: SelectionItem[]) {
const vcard = [];
const getValue = (name: string) =>
fields.find((f) => f.field === name)?.value?.trim() || "";
// Hilfsfelder sammeln
const firstName = getValue("Vorname");
const lastName = getValue("Nachname");
const nickname = getValue("Spitzname");
const emailHome = getValue("Email (Privat)");
const emailWork = getValue("Email (Arbeit)");
const telHome = getValue("Telefonnummer (Zuhause)");
const telMobile = getValue("Telefonnummer (Mobile)");
const telWork = getValue("Telefonnummer (Arbeit)");
const country = getValue("Land");
const city = getValue("Ort");
const street = getValue("Straße");
const zip = getValue("Postleitzahl");
const bday = getValue("Geburtstag");
const org = getValue("Firma");
const department = getValue("Abteilung");
const title = getValue("Berufsbezeichnung");
const role = getValue("Rolle im Unternehmen");
const url = getValue("Homepage/Persönliche Webseite");
const note = getValue("Notizen");
// Start vCard
vcard.push("BEGIN:VCARD");
vcard.push("VERSION:3.0");
// N (strukturierter Name)
if (firstName || lastName) {
vcard.push(`N:${lastName};${firstName};;;`);
vcard.push(`FN:${firstName} ${lastName}`.trim());
}
// Spitzname
if (nickname) vcard.push(`NICKNAME:${nickname}`);
// Email
if (emailHome) vcard.push(`EMAIL;TYPE=HOME:${emailHome}`);
if (emailWork) vcard.push(`EMAIL;TYPE=WORK:${emailWork}`);
// Telefonnummer
if (telHome) vcard.push(`TEL;TYPE=HOME:${telHome}`);
if (telMobile) vcard.push(`TEL;TYPE=CELL:${telMobile}`);
if (telWork) vcard.push(`TEL;TYPE=WORK:${telWork}`);
// Geburtstag
if (bday) vcard.push(`BDAY:${bday}`);
// Organisation
if (org || department)
vcard.push(`ORG:${org}${department ? ";" + department : ""}`);
// Berufsbezeichnung
if (title) vcard.push(`TITLE:${title}`);
// Rolle
if (role) vcard.push(`ROLE:${role}`);
// URL
if (url) vcard.push(`URL:${url}`);
// Adresse
if (street || city || zip || country) {
vcard.push(`ADR:;;${street};${city};;${zip};${country}`);
}
// Notizen
if (note) vcard.push(`NOTE:${note}`);
// Ende der vCard
vcard.push("END:VCARD");
// Rückgabe
return vcard.join("\r\n");
}
const handleGenerate = () => {
const text = generateVCardText(selection);
onGenerate(text);
sectionChange("export");
};
return (
<Card className="w-[600] mx-5">
<CardHeader>
<CardTitle>VCard Daten eingeben</CardTitle>
<CardDescription>
Alle Eingaben werden ausschließlich lokal im Browser verarbeitet.
<br /> Es werden keine Daten an den Server gesendet.
<br />
(*) Felder sind pflicht!
</CardDescription>
</CardHeader>
<CardContent>
<form className="space-y-4">
{/* Loop trough selection and if field is required add a (*) */}
{selection.map((item) => (
<div key={item.field} className="space-y-2">
<label className="text-sm font-medium">
{item.field}
{item.required ? (
<span className="text-red-500 ml-1">*</span>
) : null}
</label>
<Input
placeholder={item.placeholder}
value={item.value}
onChange={(e: any) => onValueChange(item.field, e.target.value)}
required={item.required}
/>
</div>
))}
</form>
</CardContent>
<CardFooter className="flex justify-end">
<Button
onClick={handleGenerate}
disabled={
!selection
.find((i) => i.field.toLowerCase() === "vorname")
?.value.trim() ||
!selection
.find((i) => i.field.toLowerCase() === "nachname")
?.value.trim()
}
>
Generieren
</Button>
</CardFooter>
</Card>
);
}
|
