SRSoftware/Umbrella
1
0
Fork 0
Code Issues Pull Requests Actions Projects Releases Wiki Activity

implemented editing of document in GUI + respective handlers in backend

Browse Source
This commit is contained in:
Stephan Richter
2025-07-12 23:34:05 +02:00
parent 2cc4d43e7c
commit 26fa72ef84
12 changed files with 190 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
frontend/src/Components/LineEditor.svelte
View File

@@ -1,13 +1,14 @@
<script>
import { activeField } from './field_sync.svelte.js';
let { editable = false, value = $bindable(null) } = $props();
let { editable = false, value = $bindable(null), onSet = (newVal) => {return true;} } = $props();
let editing = $state(false);
let editValue = value;
function applyEdit(){
value = editValue;
async function applyEdit(){
let success = await onSet(editValue);
if (success) value = editValue;
editing=false;
}
@@ -30,11 +31,15 @@
</script>
<style>
input{
min-width: 40px;
min-height: 20px;
}
div{
min-width: 40px;
min-height: 20px;
}
div:hover{
.editable:hover{
border: 1px dotted;
}
</style>
@@ -42,5 +47,5 @@
{#if editable && editing}
<input bind:value={editValue} onkeyup={typed} autofocus />
{:else}
<span onclick={startEdit}>{value}</span>
<div onclick={startEdit} class={{editable}}>{value}</div>
{/if}

20
frontend/src/Components/MarkdownEditor.svelte
View File

@@ -1,16 +1,20 @@
<script>
import { activeField } from './field_sync.svelte.js';
let { editable = false, value = $bindable(null) } = $props();
let { editable = false, value = $bindable(null), onSet = (newVal) => {} } = $props();
let editing = $state(false);
let editValue = $state({source:value.source,rendered:value.rendered});
let timer = null;
function applyEdit(){
value.source = editValue.source;
value.rendered = editValue.rendered;
editing = false;
async function applyEdit(){
let success = await onSet(editValue.source);
if (success) {
value.source = editValue.source;
value.rendered = editValue.rendered;
editing = false;
} else resetEdit();
}
function resetEdit(){
@@ -54,12 +58,12 @@
min-width: 40px;
min-height: 20px;
}
div:hover{
div.editable:hover{
border: 1px dotted;
}
</style>
{#if editable && editing}
{#if editing}
<textarea bind:value={editValue.source} onkeyup={typed} autofocus></textarea>
{/if}
<div onclick={startEdit}>{@html editValue.rendered}</div>
<div onclick={startEdit} class={{editable}}>{@html editValue.rendered}</div>

12
frontend/src/Components/MultilineEditor.svelte
View File

@@ -1,14 +1,16 @@
<script>
import { activeField } from './field_sync.svelte.js';
let { editable = false, value = $bindable(null) } = $props();
let { editable = false, value = $bindable(null), onSet = (newVal) => {} } = $props();
let editing = $state(false);
let editValue = $state(value);
let timer = null;
function applyEdit(){
value = editValue;
async function applyEdit(){
let success = await onSet(editValue);
if (success) value = editValue;
editing = false;
}
@@ -39,7 +41,7 @@
min-width: 40px;
min-height: 20px;
}
div:hover{
div.editable:hover{
border: 1px dotted;
}
</style>
@@ -47,7 +49,7 @@
{#if editable && editing}
<textarea bind:value={editValue} onkeyup={typed} autofocus></textarea>
{:else}
<div onclick={startEdit}>
<div onclick={startEdit} class={{editable}}>
{#each value.split("\n") as line}
{line}<br/>
{/each}

16
frontend/src/Components/PriceEditor.svelte
View File

@@ -1,13 +1,14 @@
<script>
import { activeField } from './field_sync.svelte.js';
let { editable = false, currency, value = $bindable(null) } = $props();
let { editable = false, currency, value = $bindable(null), onSet = (newVal) => {} } = $props();
let editing = $state(false);
let editValue = value/100;
function applyEdit(){
value = editValue * 100;
async function applyEdit(){
let success = await onSet(editValue * 100);
if (success) value = editValue * 100;
editing = false;
}
@@ -31,11 +32,18 @@
<style>
input{width:100px}
div{
min-width: 40px;
min-height: 20px;
}
.editable:hover{
border: 1px dotted;
}
</style>
{#if editable && editing}
<input type="number" step=".01" bind:value={editValue} onkeyup={typed} />&nbsp;{currency}
{:else}
<div onclick={startEdit}>{Number(value/100).toFixed(2)}&nbsp;{currency}</div>
<div onclick={startEdit} class={{editable}}>{Number(value/100).toFixed(2)}&nbsp;{currency}</div>
{/if}

37
frontend/src/routes/document/Position.svelte
View File

@@ -5,33 +5,38 @@
import LineEditor from '../../Components/LineEditor.svelte';
import MarkdownEditor from '../../Components/MarkdownEditor.svelte';
import PriceEditor from '../../Components/PriceEditor.svelte';
var { currency, editable, pos = $bindable(null) } = $props();
console.log(pos);
var { currency, editable, pos = $bindable(null), submit = (key,newVal) => {} } = $props();
let prefix = `pos.${pos.number}`
</script>
{#if pos}
<tr>
<td>{pos.number}</td>
<td>
<LineEditor bind:value={pos.item} editable={editable} />
<td class="item">
<LineEditor bind:value={pos.item} editable={editable} onSet={(val) => submit(`${prefix}.item`,val)} />
</td>
<td class="title">
<LineEditor bind:value={pos.title} editable={editable} />
<LineEditor bind:value={pos.title} editable={editable} onSet={(val) => submit(`${prefix}.title`,val)} />
</td>
<td>
<LineEditor bind:value={pos.amount} editable={editable} />
<td class="amount">
<LineEditor bind:value={pos.amount} editable={editable} onSet={(val) => submit(`${prefix}.amount`,val)} />
</td>
<td>
<LineEditor bind:value={pos.unit} editable={editable} />
<td class="unit">
<LineEditor bind:value={pos.unit} editable={editable} onSet={(val) => submit(`${prefix}.unit`,val)} />
</td>
<td class="price">
<PriceEditor bind:value={pos.unit_price} editable={editable} currency={currency} onSet={(val) => submit(`${prefix}.unit_price`,val)} /></td>
<td class="price">
{Number(pos.amount * pos.unit_price/100).toFixed(2)}&nbsp;{currency}
</td>
<td class="tax">
{pos.tax}&nbsp;%
</td>
<td>
<PriceEditor bind:value={pos.unit_price} editable={editable} currency={currency} /></td>
<td>{Number(pos.amount * pos.unit_price/100).toFixed(2)}&nbsp;{currency}</td>
<td>{pos.tax}&nbsp;%</td>
</tr>
<tr>
<td class="error">⏫<br/>⏬</td>
<td colspan="6"><MarkdownEditor bind:value={pos.description} editable={editable} /></td>
<td class="move">⏫<br/>⏬</td>
<td colspan="6" class="description">
<MarkdownEditor bind:value={pos.description} editable={editable} onSet={(val) => submit(`${prefix}.description`,val)} />
</td>
<td></td>
</tr>
{/if}

4
frontend/src/routes/document/PositionList.svelte
View File

@@ -4,7 +4,7 @@
import { onMount } from 'svelte';
import { t } from '../../translations.svelte.js';
var { document = $bindable(null) } = $props();
var { document = $bindable(null), submit = (key,newVal) => {} } = $props();
let editable = $derived(document.state == 1);
</script>
@@ -25,7 +25,7 @@
</thead>
<tbody>
{#each Object.entries(document.positions) as [id,pos]}
<Position currency={document.currency} bind:pos={document.positions[id]} editable={editable} />
<Position currency={document.currency} bind:pos={document.positions[id]} editable={editable} {submit} />
{/each}
<tr class="sums">
<td colspan="2"></td>

103
frontend/src/routes/document/View.svelte
View File

@@ -25,8 +25,12 @@
}
}
function changeState(newVal){
async function changeState(newVal){
let success = false;
if (doc.state == 1 || confirm(t('document.confirm_state'))){
success = await submit('state',newVal);
}
if (success) {
doc.state = newVal;
} else {
const dummy = doc.state;
@@ -35,6 +39,28 @@
}
}
async function submit(path,newValue){
const parts = path.split('.');
if (parts.length<1) return false;
let data = newValue;
while (parts.length > 0){
const inner = data;
data = {};
data[parts.pop()] = inner;
}
try {
const url = `${location.protocol}//${location.host.replace('5173','8080')}/api/document/${doc.id}`;
const resp = await fetch(url,{
credentials:'include',
method:'PATCH',
body:JSON.stringify(data)
});
return resp.ok;
} catch (err){
return false;
}
}
onMount(loadDoc);
</script>
@@ -43,97 +69,110 @@
{/if}
{#if doc}
<fieldset class="left">
<fieldset class="customer">
<legend>{t('document.customer')}</legend>
<table>
<tbody>
<tr>
<td colspan="2">
<MultilineEditor bind:value={doc.customer.name} editable={editable} />
<MultilineEditor bind:value={doc.customer.name} editable={editable} onSet={(val) => submit('customer.name',val)} />
</td>
</tr>
<tr>
<th>{t('document.customer_id')}:</th>
<td>
<LineEditor bind:value={doc.customer.id} editable={editable} />
<LineEditor bind:value={doc.customer.id} editable={editable} onSet={(val) => submit('customer.id',val)} />
</td>
</tr>
<tr>
<th>{t('document.tax_id')}:</th>
<td>
<LineEditor bind:value={doc.customer.tax_id} editable={editable} />
<LineEditor bind:value={doc.customer.tax_id} editable={editable} onSet={(val) => submit('customer.tax_id',val)} />
</td>
</tr>
<tr>
<th>{t('document.email')}:</th>
<td>
<LineEditor bind:value={doc.customer.email} editable={editable} />
<LineEditor bind:value={doc.customer.email} editable={editable} onSet={(val) => submit('customer.email',val)} />
</td>
</tr>
</tbody>
</table>
</fieldset>
<fieldset class="left">
<fieldset class="sender">
<legend>{t('document.sender')}</legend>
<table>
<tbody>
<tr>
<td colspan="2">
<MultilineEditor bind:value={doc.sender.name} editable={editable} />
<MultilineEditor bind:value={doc.sender.name} editable={editable} onSet={(val) => submit('sender.name',val)} />
</td>
</tr>
<tr>
<th>{t('document.court')}:</th>
<td>
<LineEditor bind:value={doc.sender.court} editable={editable} />
<LineEditor bind:value={doc.sender.court} editable={editable} onSet={(val) => submit('sender.court',val)} />
</td>
</tr>
<tr>
<th>{t('document.tax_id')}:</th>
<td>
<LineEditor bind:value={doc.sender.tax_id} editable={editable} />
<LineEditor bind:value={doc.sender.tax_id} editable={editable} onSet={(val) => submit('sender.tax_id',val)} />
</td>
</tr>
<tr>
<th>{t('document.bank_account')}:</th>
<td>
<MultilineEditor bind:value={doc.sender.bank_account} editable={editable} />
<MultilineEditor bind:value={doc.sender.bank_account} editable={editable} onSet={(val) => submit('sender.bank_account',val)} />
</td>
</tr>
</tbody>
</table>
</fieldset>
<fieldset class="left">
<fieldset class="invoice_data">
<legend>{t('document.type_'+doc.type)}</legend>
<div>
{t('document.number')}:
<LineEditor bind:value={doc.number} editable={editable} />
</div>
<div>
{t('document.state')}:
<StateSelector selected={doc.state} onchange={changeState} />
</div>
<div>
{t('document.date')}:
<LineEditor bind:value={doc.date} editable={editable} />
</div>
<div>
{t('document.delivery')}:
<LineEditor bind:value={doc.delivery} editable={editable} />
</div>
<div>{t('document.template')}: <TemplateSelector company={doc.company.id} bind:value={doc.template.id} /></div>
<table>
<tbody>
<tr>
<th>{t('document.number')}:</th>
<td><LineEditor bind:value={doc.number} editable={editable} onSet={(val) => submit('number',val)} /></td>
</tr>
<tr>
<th>{t('document.state')}:</th>
<StateSelector selected={doc.state} onchange={changeState} onSet={(val) => submit('state',val)} />
</tr>
<tr>
<th>{t('document.date')}:</th>
<LineEditor bind:value={doc.date} editable={editable} onSet={(val) => submit('date',val)} />
</tr>
<tr>
<th>{t('document.delivery')}:</th>
<LineEditor bind:value={doc.delivery} editable={editable} onSet={(val) => submit('delivery',val)} />
</tr>
<tr>
<th>{t('document.template')}:</th>
<td>
{#if editable}
<TemplateSelector company={doc.company.id} bind:value={doc.template.id} onchange={() => submit('template_id',doc.template.id)} />
{:else}
{doc.template.name}
{/if}
</td>
</tr>
</tbody>
</table>
</fieldset>
<fieldset class="clear">
<legend>{t('document.head')}</legend>
<MarkdownEditor bind:value={doc.head} editable={editable} />
<MarkdownEditor bind:value={doc.head} editable={editable} onSet={(val) => submit('head',val)} />
</fieldset>
<fieldset>
<legend>{t('document.positions')}</legend>
<PositionList bind:document={doc} />
<PositionList bind:document={doc} {submit} />
</fieldset>
<fieldset>
<legend>{t('document.footer')}</legend>
<MarkdownEditor bind:value={doc.footer} editable={editable} />
<MarkdownEditor bind:value={doc.footer} editable={editable} onSet={(val) => submit('footer',val)} />
</fieldset>
<fieldset>
<legend>{t('document.actions')}</legend>