From f4c6d6becc358e82af188419bc27009e295f0165 Mon Sep 17 00:00:00 2001
From: Lauren Liberda <laura@selfisekai.rocks>
Date: Sun, 1 Aug 2021 23:20:06 +0200
Subject: [PATCH] fe: item editing

---
 .../src/components/itemDetailsActions.hbs     |  3 +
 frontend/src/components/itemEdit.hbs          | 38 ++++++++++++
 frontend/src/components/itemEditActions.hbs   |  2 +
 frontend/src/components/root.hbs              |  2 +-
 frontend/src/main.ts                          | 60 ++++++++++++++++++-
 frontend/src/style.scss                       |  9 +++
 6 files changed, 112 insertions(+), 2 deletions(-)
 create mode 100644 frontend/src/components/itemDetailsActions.hbs
 create mode 100644 frontend/src/components/itemEdit.hbs
 create mode 100644 frontend/src/components/itemEditActions.hbs

diff --git a/frontend/src/components/itemDetailsActions.hbs b/frontend/src/components/itemDetailsActions.hbs
new file mode 100644
index 0000000..8edc04c
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/frontend/src/components/itemEdit.hbs b/frontend/src/components/itemEdit.hbs
new file mode 100644
index 0000000..d7276dd
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/frontend/src/components/itemEditActions.hbs b/frontend/src/components/itemEditActions.hbs
new file mode 100644
index 0000000..66f0701
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/frontend/src/components/root.hbs b/frontend/src/components/root.hbs
index 5ae0a5e..750477f 100644
--- a/frontend/src/components/root.hbs
+++ b/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>
diff --git a/frontend/src/main.ts b/frontend/src/main.ts
index eddc74c..89584f8 100644
--- a/frontend/src/main.ts
+++ b/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', () => {
diff --git a/frontend/src/style.scss b/frontend/src/style.scss
index a96b54a..bbb353a 100644
--- a/frontend/src/style.scss
+++ b/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;
+}