fe: item creating

frontend/src/components/itemEdit.hbs

@@ -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>

frontend/src/components/root.hbs

@@ -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'>

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<Mutation>(
@@ -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>(
+    `
+    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();
 });