1 files changed, 158 insertions, 0 deletions
diff --git a/src/components/VCardForm.tsx b/src/components/VCardForm.tsx
new file mode 100644
index 0000000..3033cac
--- /dev/null
+++ b/src/components/VCardForm.tsx
@@ -0,0 +1,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>
+  );
+}