diff --git a/frontend/src/components/itemEdit.hbs b/frontend/src/components/itemEdit.hbs
index d7276dd..ffcb0dd 100644
--- a/frontend/src/components/itemEdit.hbs
+++ b/frontend/src/components/itemEdit.hbs
@@ -1,12 +1,12 @@
-
+
diff --git a/frontend/src/components/root.hbs b/frontend/src/components/root.hbs
index 750477f..a3008e6 100644
--- a/frontend/src/components/root.hbs
+++ b/frontend/src/components/root.hbs
@@ -1,3 +1,11 @@
+
+
diff --git a/frontend/src/main.ts b/frontend/src/main.ts
index 89584f8..c862ccb 100644
--- a/frontend/src/main.ts
+++ b/frontend/src/main.ts
@@ -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(
@@ -179,7 +206,7 @@ async function saveItemEdits() {
editItem(input: $input) {
id
}
- }
+ }
`,
{
input,
@@ -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 ($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();
});