Files
Umbrella/frontend/src/routes/stock/ItemProps.svelte
2026-04-10 09:23:26 +02:00

127 lines
3.6 KiB
Svelte

<script>
import LineEditor from '../../Components/LineEditor.svelte';
import { onMount } from 'svelte';
import { api, patch, post } from '../../urls.svelte';
import { error, yikes } from '../../warn.svelte';
import { t } from '../../translations.svelte';
let { item, properties } = $props();
let add_prop = $state({
existing_prop_id : 0,
new_prop : {
name: null,
unit: null
}
});
async function doClone(ev){
let url = api('stock/clone');
let res = await post(url,{id:item.id});
if (res.ok){
let json = await res.json();
yikes(res);
} else error(res);
}
function byName(a,b){
return a.name.localeCompare(b.name);
}
async function onsubmit(ev){
ev.preventDefault();
ev.stopPropagation();
const url = api('stock/property');
const data = {
item : {
id : item.id,
owner : item.owner
},
add_prop : add_prop
}
const res = await post(url,data);
if (res.ok){
const prop = await res.json();
const id = prop.id;
item.properties = item.properties.filter(p => p.id != id);
item.properties.push(prop);
yikes();
} else error(res);
return false;
}
async function update(key,newVal){
const url = api('stock');
const data = {
id : item.id,
owner : item.owner,
};
data[key] = newVal;
const res = await patch(url,data);
if (res.ok){
yikes();
return true;
}
error(res);
return false;
}
</script>
{#if item}
<LineEditor wrapper="h3" editable={true} value={item.name} onSet={v => update('name',v)} />
<button class="clone symbol" title={t('clone')} onclick={doClone}></button>
<div>
{@html item.description.rendered}
</div>
<table>
<tbody>
<tr>
<td>
{t('ID')}
</td>
<td>
<LineEditor wrapper="span" editable={true} value={item.code} onSet={v => update('code',v)} />
</td>
</tr>
{#each item.properties.toSorted(byName) as prop}
<tr>
<td>
{prop.name}
</td>
<td>
{prop.value}
{prop.unit}
</td>
</tr>
{/each}
<tr>
<td>
<select bind:value={add_prop.existing_prop_id}>
<option value={0}>{t('select_property')}</option>
{#each properties as p}
<option value={p.id}>
{p.name}
{#if p.unit}({p.unit}){/if}
</option>
{/each}
</select><br/>
{#if !add_prop.existing_prop_id}
<input type="text" placeholder={t('new_property')} bind:value={add_prop.new_prop.name} />
{/if}
</td>
<td>
<form {onsubmit}>
<input type="text" placeholder={t('value')} bind:value={add_prop.value} />
{#if !add_prop.existing_prop_id}
<input type="text" placeholder={t('unit')} bind:value={add_prop.new_prop.unit} />
{:else}
{properties.filter(p => p.id == add_prop.existing_prop_id)[0].unit}
{/if}
<button>{t('save')}</button>
</form>
</td>
</tr>
</tbody>
</table>
{/if}