implemented storing of new vcards, editing of names

This commit is contained in:
2025-10-10 08:47:38 +02:00
parent e0c05506c3
commit e5227c3e19
6 changed files with 67 additions and 17 deletions

View File

@@ -1,7 +1,7 @@
<script>
import LineEditor from '../../Components/LineEditor.svelte';
import { addr } from '../../vcard.js';
import { t } from '../../translations.svelte';
import { addr } from '../../vcard.js';
import { t } from '../../translations.svelte';
let { code, patch = (from, to) => true } = $props();

View File

@@ -20,17 +20,20 @@
let emails = $derived(contact.vcard.match(/^EMAIL.*:.+$/gm));
let extra_fields = $derived(contact.vcard.match(/^X-.*:.+/gm));
let fns = $derived(contact.vcard.match(/^FN.*:.+$/gm));
let names = $derived(contact.vcard.match(/^N.*:.+$/gm));
let numbers = $derived(contact.vcard.match(/^TEL.*:.+$/gm));
let orgs = $derived(contact.vcard.match(/^ORG.*:.+$/gm));
let urls = $derived(contact.vcard.match(/^URL.*:.+$/gm));
async function patch(from,to){
if (from == to) return;
const url = api(`contact/${contact.id}`);
const newContact = contact.id == 0;
const url = api(newContact ? 'contact' : `contact/${contact.id}`);
const changeset = JSON.stringify({ from: from, to: to });
const res = await fetch(url,{
method:'PATCH',
method: newContact ? 'POST' : 'PATCH',
credentials:'include',
body:JSON.stringify({from:from,to:to})
body: newContact ? contact.vcard.replace(from,to) : changeset
});
if (res.ok){
yikes();
@@ -79,7 +82,9 @@
</tr>
<tr>
<td>
<Name vcard={contact.vcard} />
{#each names as code}
<Name {code} {patch} />
{/each}
</td>
</tr>
<tr>

View File

@@ -1,25 +1,33 @@
<script>
import { name } from '../../vcard.js';
import LineEditor from '../../Components/LineEditor.svelte';
import { name } from '../../vcard.js';
import { t } from '../../translations.svelte';
let { vcard } = $props();
let { code, patch = (from, to) => true } = $props();
let n = $derived(name(vcard));
let n = $derived(name(code));
function onSet(oldVal,newVal){
console.log(`onset(${oldVal}${newVal})`);
const newCode = code.replace(oldVal,newVal);
return patch(code,newCode);
}
</script>
<div class="name">
{#if n.prefix}
<span class="prefix">{n.prefix}</span>
<LineEditor type="span" editable={true} value={n.prefix} onSet={newVal => onSet(n.prefix,newVal)} title={t('name_prefix')} />
{/if}
{#if n.given}
<span class="given">{n.given}</span>
<LineEditor type="span" editable={true} value={n.given} onSet={newVal => onSet(n.given,newVal)} title={t('given_name')} />
{/if}
{#if n.additional}
<span class="additional">{n.additional}</span>
<LineEditor type="span" editable={true} value={n.additional} onSet={newVal => onSet(n.additional,newVal)} title={t('additional_name')} />
{/if}
{#if n.family}
<span class="family">{n.family}</span>
<LineEditor type="span" editable={true} value={n.family} onSet={newVal => onSet(n.family,newVal)} title={t('family_name')} />
{/if}
{#if n.suffix}
<span class="suffix">{n.suffix}</span>
<LineEditor type="span" editable={true} value={n.suffix} onSet={newVal => onSet(n.suffix,newVal)} title={t('<name_suffix></name_suffix>')} />
{/if}
</div>