Files
Umbrella/frontend/src/routes/stock/ItemProps.svelte

118 lines
3.4 KiB
Svelte

<script>
import LineEditor from '../../Components/LineEditor.svelte';
import { onMount } from 'svelte';
import { api } 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
}
});
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 fetch(url,{
credentials:'include',
method:'POST',
body:JSON.stringify(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 patch(key,newVal){
const url = api('stock');
const data = {
id : item.id,
owner : item.owner,
};
data[key] = newVal;
const res = await fetch(url,{
credentials:'include',
method:'PATCH',
body:JSON.stringify(data)
});
if (res.ok){
yikes();
return true;
}
error(res);
return false;
}
</script>
{#if item}
<LineEditor type="h3" editable={true} value={item.name} onSet={v => patch('name',v)} />
Code: <LineEditor type="span" editable={true} value={item.code} onSet={v => patch('code',v)} />
<div>
{@html item.description.rendered}
</div>
<table>
<tbody>
{#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}