fe: item creating
This commit is contained in:
parent
f4c6d6becc
commit
9948e43fa4
|
@ -1,12 +1,12 @@
|
|||
<div class='field'>
|
||||
<label class='label'>ean13</label>
|
||||
<label class='label'>{{#if creating}}id/{{/if}}ean13</label>
|
||||
<div class='control'>
|
||||
<input
|
||||
class='input input-number-wo-spinner'
|
||||
type='number'
|
||||
name='id'
|
||||
value='{{ean13}}'
|
||||
disabled
|
||||
{{#unless creating}}disabled{{/unless}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -1,3 +1,11 @@
|
|||
<nav class='navbar' role='navigation' aria-label='main navigation'>
|
||||
<div class='navbar-menu'>
|
||||
<div class='navbar-start'>
|
||||
<buttor id='show-item-creation' class='navbar-item button'>create item</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div id='main' class='container'></div>
|
||||
|
||||
<div id='modal' class='modal'>
|
||||
|
|
|
@ -1,5 +1,11 @@
|
|||
import './style.scss';
|
||||
import { EditItemInput, Item, Mutation, Query } from './generated/graphql';
|
||||
import {
|
||||
EditItemInput,
|
||||
Item,
|
||||
Mutation,
|
||||
NewItemInput,
|
||||
Query,
|
||||
} from './generated/graphql';
|
||||
import root from './components/root.hbs';
|
||||
import loading from './components/loading.hbs';
|
||||
import itemList from './components/itemList.hbs';
|
||||
|
@ -151,6 +157,7 @@ async function showItemEdit(item: Item) {
|
|||
}
|
||||
(document.querySelector('#modal-body') as HTMLDivElement).innerHTML =
|
||||
itemEdit(item);
|
||||
showModal(true);
|
||||
(
|
||||
document.querySelector('#item-save-action') as HTMLButtonElement
|
||||
).addEventListener('click', () => saveItemEdits());
|
||||
|
@ -159,18 +166,38 @@ async function showItemEdit(item: Item) {
|
|||
).addEventListener('click', () => showModal(false));
|
||||
}
|
||||
|
||||
async function saveItemEdits() {
|
||||
async function showItemCreate() {
|
||||
(document.querySelector('#modal-title') as HTMLParagraphElement).innerHTML =
|
||||
'Item creating';
|
||||
(document.querySelector('#modal-card-foot') as HTMLDivElement).innerHTML =
|
||||
itemEditActions();
|
||||
(document.querySelector('#modal-body') as HTMLDivElement).innerHTML =
|
||||
itemEdit({ creating: true });
|
||||
(
|
||||
document.querySelector('#item-save-action') as HTMLButtonElement
|
||||
).addEventListener('click', () => createItem());
|
||||
(
|
||||
document.querySelector('#item-close-action') as HTMLButtonElement
|
||||
).addEventListener('click', () => showModal(false));
|
||||
showModal(true);
|
||||
}
|
||||
|
||||
function getItemData(): EditItemInput | NewItemInput {
|
||||
function getInput(name: string) {
|
||||
return (document.querySelector(`input[name="${name}"]`) as HTMLInputElement)
|
||||
.value;
|
||||
}
|
||||
const input: EditItemInput = {
|
||||
return {
|
||||
id: getInput('id'),
|
||||
name: getInput('name'),
|
||||
notes:
|
||||
(document.querySelector('#notes') as HTMLTextAreaElement).value || null,
|
||||
parent: getInput('parent'),
|
||||
};
|
||||
}
|
||||
|
||||
async function saveItemEdits() {
|
||||
const input = getItemData() as EditItemInput;
|
||||
(document.querySelector('#modal-body') as HTMLDivElement).innerHTML =
|
||||
loading();
|
||||
await request<Mutation>(
|
||||
|
@ -188,6 +215,25 @@ async function saveItemEdits() {
|
|||
showItemDetails(input.id);
|
||||
}
|
||||
|
||||
async function createItem() {
|
||||
const input = getItemData() as NewItemInput;
|
||||
(document.querySelector('#modal-body') as HTMLDivElement).innerHTML =
|
||||
loading();
|
||||
const response = await request<Mutation>(
|
||||
`
|
||||
mutation ($input: NewItemInput!) {
|
||||
createItem(itemData: $input) {
|
||||
id
|
||||
}
|
||||
}
|
||||
`,
|
||||
{
|
||||
input,
|
||||
},
|
||||
);
|
||||
showItemDetails(response.createItem?.id);
|
||||
}
|
||||
|
||||
window.addEventListener('load', () => {
|
||||
document.body.innerHTML = root();
|
||||
['#modal-close', '#modal-background'].forEach((el) =>
|
||||
|
@ -196,5 +242,8 @@ window.addEventListener('load', () => {
|
|||
() => showModal(false),
|
||||
),
|
||||
);
|
||||
(
|
||||
document.querySelector('#show-item-creation') as HTMLButtonElement
|
||||
).addEventListener('click', () => showItemCreate());
|
||||
loadItemList();
|
||||
});
|
||||
|
|
Loading…
Reference in a new issue