fe: item editing

frontend/src/components/itemDetailsActions.hbs

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

frontend/src/components/itemEdit.hbs

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

frontend/src/components/itemEditActions.hbs

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

frontend/src/components/root.hbs

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

frontend/src/main.ts

@@ -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', () => {

frontend/src/style.scss

@@ -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;
+}