32 lines
2.0 KiB
HTML
32 lines
2.0 KiB
HTML
|
{% extends "base.html" %}
|
||
|
|
{% block content %}
|
||
|
|
<div x-data="suppliersCrud()">
|
||
|
|
<header class="page-header"><h1>Suppliers</h1><p class="subtitle page-tip">Vendor registry with ratings and lead times.</p></header>
|
||
|
|
<button class="btn btn-primary" @click="openNew()">Add supplier</button>
|
||
|
|
<table class="data-table"><thead><tr><th>Name</th><th>Country</th><th>Rating</th><th></th></tr></thead>
|
||
|
|
<tbody>{% for s in suppliers %}<tr class="clickable-row" @click="edit({{ s.id }}, '{{ s.name|e }}', '{{ (s.country or '')|e }}', {{ s.rating or 0 }})">
|
||
|
|
<td>{{ s.name }}</td><td>{{ s.country }}</td><td>{{ s.rating }}</td>
|
||
|
|
<td><button class="btn btn-sm btn-reject" @click.stop="remove({{ s.id }})">Delete</button></td></tr>{% endfor %}</tbody></table>
|
||
|
|
<div class="modal" :class="{ open: show }" @click.self="show=false"><div class="modal-card">
|
||
|
|
<input class="form-input" x-model="form.name" /><input class="form-input" x-model="form.country" /><input type="number" step="0.1" class="form-input" x-model="form.rating" />
|
||
|
|
<button class="btn btn-primary" @click="save()">Save</button></div></div>
|
||
|
|
</div>
|
||
|
|
{% endblock %}
|
||
|
|
{% block scripts %}
|
||
|
|
<script>
|
||
|
|
function suppliersCrud() {
|
||
|
|
return { show: false, id: null, form: { name: '', country: '', rating: 4, category: '', moq: null, lead_time_days: null, contact: '' },
|
||
|
|
openNew() { this.id=null; this.form={ name:'', country:'', rating:4, category:'', moq:null, lead_time_days:null, contact:'' }; this.show=true; },
|
||
|
|
edit(id,name,country,rating) { this.id=id; this.form={name,country,rating,category:'',moq:null,lead_time_days:null,contact:''}; this.show=true; },
|
||
|
|
async save() {
|
||
|
|
const body = { ...this.form, rating: parseFloat(this.form.rating) };
|
||
|
|
if (this.id) await Cockpit.api('/suppliers/' + this.id, { method: 'PUT', body: JSON.stringify(body) });
|
||
|
|
else await Cockpit.api('/suppliers', { method: 'POST', body: JSON.stringify(body) });
|
||
|
|
location.reload();
|
||
|
|
},
|
||
|
|
async remove(id) { if (!Cockpit.confirmDelete()) return; await Cockpit.api('/suppliers/' + id, { method: 'DELETE' }); location.reload(); }
|
||
|
|
};
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
{% endblock %}
|