fe: item editing
This commit is contained in:
parent
b4a2f33a19
commit
f4c6d6becc
3
frontend/src/components/itemDetailsActions.hbs
Normal file
3
frontend/src/components/itemDetailsActions.hbs
Normal file
|
@ -0,0 +1,3 @@
|
|||
<button id='item-edit-action' class='button is-warning'>Edit</button>
|
||||
<button id='item-delete-action' class='button is-danger'>Delete</button>
|
||||
<button id='item-close-action' class='button'>Close</button>
|
38
frontend/src/components/itemEdit.hbs
Normal file
38
frontend/src/components/itemEdit.hbs
Normal file
|
@ -0,0 +1,38 @@
|
|||
<div class='field'>
|
||||
<label class='label'>ean13</label>
|
||||
<div class='control'>
|
||||
<input
|
||||
class='input input-number-wo-spinner'
|
||||
type='number'
|
||||
name='id'
|
||||
value='{{ean13}}'
|
||||
disabled
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class='field'>
|
||||
<label class='label'>name</label>
|
||||
<div class='control'>
|
||||
<input class='input' type='text' name='name' value='{{name}}' />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class='field'>
|
||||
<label class='label'>notes</label>
|
||||
<div class='control'>
|
||||
<textarea id='notes' class='textarea'>{{notes}}</textarea>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class='field'>
|
||||
<label class='label'>parent</label>
|
||||
<div class='control'>
|
||||
<input
|
||||
class='input input-number-wo-spinner'
|
||||
type='number'
|
||||
name='parent'
|
||||
value='{{parent.ean13}}'
|
||||
/>
|
||||
</div>
|
||||
</div>
|
2
frontend/src/components/itemEditActions.hbs
Normal file
2
frontend/src/components/itemEditActions.hbs
Normal file
|
@ -0,0 +1,2 @@
|
|||
<button id='item-save-action' class='button is-success'>Save changes</button>
|
||||
<button id='item-close-action' class='button'>Close</button>
|
|
@ -10,7 +10,7 @@
|
|||
<section id='modal-body' class='modal-card-body'>
|
||||
<!-- Content ... -->
|
||||
</section>
|
||||
<footer class='modal-card-foot'>
|
||||
<footer id='modal-card-foot' class='modal-card-foot'>
|
||||
|
||||
</footer>
|
||||
</div>
|
||||
|
|
|
@ -1,9 +1,12 @@
|
|||
import './style.scss';
|
||||
import { Query } from './generated/graphql';
|
||||
import { EditItemInput, Item, Mutation, Query } from './generated/graphql';
|
||||
import root from './components/root.hbs';
|
||||
import loading from './components/loading.hbs';
|
||||
import itemList from './components/itemList.hbs';
|
||||
import itemDetails from './components/itemDetails.hbs';
|
||||
import itemDetailsActions from './components/itemDetailsActions.hbs';
|
||||
import itemEdit from './components/itemEdit.hbs';
|
||||
import itemEditActions from './components/itemEditActions.hbs';
|
||||
|
||||
async function request<T = Query>(
|
||||
query: string,
|
||||
|
@ -92,6 +95,8 @@ async function showItemDetails(id: string) {
|
|||
'Item details';
|
||||
(document.querySelector('#modal-body') as HTMLDivElement).innerHTML =
|
||||
loading();
|
||||
(document.querySelector('#modal-card-foot') as HTMLDivElement).innerHTML =
|
||||
itemDetailsActions();
|
||||
showModal(true);
|
||||
const loaded = await request(
|
||||
`
|
||||
|
@ -128,6 +133,59 @@ async function showItemDetails(id: string) {
|
|||
).forEach((butt) =>
|
||||
butt.addEventListener('click', () => showItemDetails(butt.dataset.id!)),
|
||||
);
|
||||
(
|
||||
document.querySelector('#item-edit-action') as HTMLButtonElement
|
||||
).addEventListener('click', () => showItemEdit(loaded.item!));
|
||||
(
|
||||
document.querySelector('#item-close-action') as HTMLButtonElement
|
||||
).addEventListener('click', () => showModal(false));
|
||||
}
|
||||
|
||||
async function showItemEdit(item: Item) {
|
||||
(document.querySelector('#modal-title') as HTMLParagraphElement).innerHTML =
|
||||
'Item editing';
|
||||
(document.querySelector('#modal-card-foot') as HTMLDivElement).innerHTML =
|
||||
itemEditActions();
|
||||
if (!item.parent && item.ancestors) {
|
||||
item.parent = item.ancestors[item.ancestors.length - 1];
|
||||
}
|
||||
(document.querySelector('#modal-body') as HTMLDivElement).innerHTML =
|
||||
itemEdit(item);
|
||||
(
|
||||
document.querySelector('#item-save-action') as HTMLButtonElement
|
||||
).addEventListener('click', () => saveItemEdits());
|
||||
(
|
||||
document.querySelector('#item-close-action') as HTMLButtonElement
|
||||
).addEventListener('click', () => showModal(false));
|
||||
}
|
||||
|
||||
async function saveItemEdits() {
|
||||
function getInput(name: string) {
|
||||
return (document.querySelector(`input[name="${name}"]`) as HTMLInputElement)
|
||||
.value;
|
||||
}
|
||||
const input: EditItemInput = {
|
||||
id: getInput('id'),
|
||||
name: getInput('name'),
|
||||
notes:
|
||||
(document.querySelector('#notes') as HTMLTextAreaElement).value || null,
|
||||
parent: getInput('parent'),
|
||||
};
|
||||
(document.querySelector('#modal-body') as HTMLDivElement).innerHTML =
|
||||
loading();
|
||||
await request<Mutation>(
|
||||
`
|
||||
mutation ($input: EditItemInput!) {
|
||||
editItem(input: $input) {
|
||||
id
|
||||
}
|
||||
}
|
||||
`,
|
||||
{
|
||||
input,
|
||||
},
|
||||
);
|
||||
showItemDetails(input.id);
|
||||
}
|
||||
|
||||
window.addEventListener('load', () => {
|
||||
|
|
|
@ -1,2 +1,11 @@
|
|||
$family-sans-serif: sans-serif;
|
||||
@import '~bulma/bulma';
|
||||
|
||||
.input-number-wo-spinner::-webkit-outer-spin-button,
|
||||
.input-number-wo-spinner::-webkit-inner-spin-button {
|
||||
-webkit-appearance: none;
|
||||
margin: 0;
|
||||
}
|
||||
.input-number-wo-spinner {
|
||||
-moz-appearance: textfield;
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue