From 0d04281b1c50a22075fdbc1536ab5efc98d1a2ce Mon Sep 17 00:00:00 2001
From: bramvankooten <bram.vankooten@hotmail.com>
Date: Thu, 12 Dec 2019 14:15:21 +0100
Subject: [PATCH 1/9] functionality for creating ticket options and ticket
 types

---
 .../lancie-admin-ticket-option.html           |  67 ++++++++
 .../lancie-admin-types.html                   | 145 +++++++++++++++++-
 2 files changed, 206 insertions(+), 6 deletions(-)
 create mode 100644 src/lancie-admin-endpoint/lancie-admin-pages/lancie-admin-ticket-option.html

diff --git a/src/lancie-admin-endpoint/lancie-admin-pages/lancie-admin-ticket-option.html b/src/lancie-admin-endpoint/lancie-admin-pages/lancie-admin-ticket-option.html
new file mode 100644
index 0000000..fde006a
--- /dev/null
+++ b/src/lancie-admin-endpoint/lancie-admin-pages/lancie-admin-ticket-option.html
@@ -0,0 +1,67 @@
+<link rel="import" href="../../../bower_components/polymer/polymer.html">
+<link rel="import" href="../../../bower_components/iron-flex-layout/iron-flex-layout-classes.html">
+<link rel="import" href="../../../bower_components/iron-icon/iron-icon.html">
+
+<dom-module id="lancie-admin-ticket-option">
+  <template>
+    <style>
+      :host {
+        display: block;
+      }
+
+      iron-icon {
+        margin-right: 10px;
+      }
+
+      .delete-button {
+        cursor: pointer;
+      }
+
+      .align-right {
+        text-align: right;
+      }
+    </style>
+
+    <custom-style>
+      <style is="custom-style">
+        .flex-horizontal-with-ratios {
+          @apply (--layout-horizontal);
+        }
+        .flexchild {
+          @apply (--layout-flex);
+        }
+        .flex2child {
+          @apply (--layout-flex-4);
+        }
+        .flex3child {
+          @apply (--layout-flex-9);
+        }
+      </style>
+    </custom-style>
+
+    <paper-item class="container flex-horizontal-with-ratios">
+      <div class="flex2child">[[option.name]]</div>
+      <div class="flexchild">Price: [[option.price]]</div>
+    </paper-item>
+
+  </template>
+  <script>
+    (function() {
+      'use strict';
+
+      class LancieAdminTicketOption extends Polymer.Element {
+        static get is() {
+          return 'lancie-admin-ticket-option';
+        }
+
+        static get properties() {
+          return {
+            option: Object
+          }
+        }
+      }
+
+      customElements.define(LancieAdminTicketOption.is, LancieAdminTicketOption);
+    })();
+  </script>
+</dom-module>
diff --git a/src/lancie-admin-endpoint/lancie-admin-pages/lancie-admin-types.html b/src/lancie-admin-endpoint/lancie-admin-pages/lancie-admin-types.html
index dc44a80..9dc0820 100644
--- a/src/lancie-admin-endpoint/lancie-admin-pages/lancie-admin-types.html
+++ b/src/lancie-admin-endpoint/lancie-admin-pages/lancie-admin-types.html
@@ -1,27 +1,106 @@
 <link rel="import" href="../../../bower_components/polymer/polymer.html">
 <link rel="import" href="../../../bower_components/lancie-ajax/lancie-ajax.html">
+<link rel="import" href="../../../bower_components/lancie-form/lancie-form.html">
+<link rel="import" href="../../../bower_components/lancie-dialog/lancie-dialog.html">
+<link rel="import" href="../../../bower_components/lancie-error/lancie-error.html">
+<link rel="import" href="../../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html">
+<link rel="import" href="../../../bower_components/neon-animation/web-animations.html">
+<link rel="import" href="../../../bower_components/paper-listbox/paper-listbox.html">
+<link rel="import" href="../../../bower_components/paper-item/paper-item.html">
 
 <link rel="import" href="../lancie-admin-page-layout.html">
 <link rel="import" href="../../lancie-admin-table/lancie-admin-table.html">
 
+<link rel="import" href="lancie-admin-ticket-option.html">
+
 <dom-module id="lancie-admin-types">
   <template>
+    <style include="iron-flex iron-flex-alignment"></style>
     <style>
       :host {
         display: block;
       }
+
+      paper-card {
+        width: calc(100% - 32px);
+        margin: 16px;
+      }
+
+      [hidden] {
+        display: none !important;
+      }
+
+      @media (max-width: 640px) {
+        paper-card {
+          width: 100%;
+          margin: 0;
+        }
+      }
     </style>
 
-    <lancie-ajax auto-fire id="endpointAjax" refurl="tickets/types" on-lancie-ajax="onResponse">
+    <lancie-ajax auto-fire id="getTypeAjax" refurl="tickets/types" on-lancie-ajax="onTypeResponse">
     </lancie-ajax>
+    <lancie-ajax auto-fire id="getOptionAjax" refurl="tickets/options" on-lancie-ajax="onOptionResponse"></lancie-ajax>
 
-    <lancie-admin-page-layout endpoint="tickets/types">
-      <p>Here is where the types will be.</p>
-      <p>Requests will be on <code>/api/v1/tickets/types</code></p>
+    <paper-card heading="Tickets/types">
+      <div class="card-content">
+        <p>Here is where the types will be.</p>
+        <p>Requests will be on <code>/api/v1/tickets/types</code></p>
 
-      <lancie-admin-table id="table" column-mappings="[[mappings]]" column-renderers="[[renderers]]"></lancie-admin-table>
-    </lancie-admin-page-layout>
+        <lancie-admin-table id="table" column-mappings="[[mappings]]" column-renderers="[[renderers]]"></lancie-admin-table>
+      </div>
+      <div class="card-actions">
+        <paper-button on-tap="openAddTypeDialog">Add Ticket Type</paper-button>
+      </div>
+    </paper-card>
 
+    <lancie-dialog id="addTicketTypeDialog">
+        <h2>Add Ticket Type</h2>
+        <div class="dialog-content">
+          <lancie-error id="addTypeDialogError"></lancie-error>
+          <lancie-form id="addTicketTypeForm" refurl="tickets/types" on-response="onAddTypeResponse">
+            <paper-input label="Name" name="name" auto-validate required error-message="This field is required!"></paper-input>
+            <paper-input label="Text" name="text" auto-validate required error-message="This field is required!"></paper-input>
+            <paper-input label="Price" name="price" step=".01" type="number" auto-validate required error-message="This field is required!"></paper-input>
+            <paper-input label="Number Available" name="numberAvailable" type="number" auto-validate required error-message="This field is required!"></paper-input>
+            <paper-input label="Deadline" name="deadline" type="datetime-local" auto-validate required error-message="This field is required!"></paper-input>
+            <paper-dropdown-menu label="Buyable" name="buyable" auto-validate required error-message="This field is required!">
+              <paper-listbox slot="dropdown-content">
+                <paper-item>true</paper-item>
+                <paper-item>false</paper-item>
+              </paper-listbox>
+            </paper-dropdown-menu>
+          </lancie-form>
+        </div>
+        <div class="dialog-actions">
+          <paper-button on-tap="tryAddType">Add</paper-button>
+        </div>
+      </lancie-dialog>
+
+    <paper-card heading="Ticket Options">
+      <div class="card-content">
+        <lancie-error id="optionError"></lancie-error>
+        <template is="dom-repeat" items="[[options]]">
+          <lancie-admin-ticket-option option="[[item]]"></lancie-admin-ticket-option>
+        </template>
+      </div>
+      <div class="card-actions">
+        <paper-button on-tap="openAddOptionDialog">Add Ticket Option</paper-button>
+      </div> 
+    </paper-card>
+    <lancie-dialog id="addTicketOptionDialog">
+      <h2>Add Ticket Option</h2>
+      <div class="dialog-content">
+        <lancie-error id="addDialogError"></lancie-error>
+        <lancie-form id="addTicketOptionForm" refurl="tickets/options" on-response="onAddOptionResponse">
+          <paper-input label="Name" name="name" auto-validate required error-message="This field is required!"></paper-input>
+          <paper-input label="Price" name="price" step=".01" type="number" auto-validate required error-message="This field is required!"></paper-input>
+        </lancie-form>
+      </div>
+      <div class="dialog-actions">
+        <paper-button on-tap="tryAddOption">Add</paper-button>
+      </div>
+    </lancie-dialog>
   </template>
   <script>
     (function () {
@@ -58,6 +137,60 @@
             this.$.table.setData(request.response);
           }
         },
+
+        onAddTypeResponse: function(e, request) {
+          if (request.succeeded) {
+            this.$.addTicketTypeDialog.close();
+            this.$.getTypeAjax.generateRequest();
+          } else {
+            this.$.addDialogError.setError("Could not add ticket type. Please refresh and try again.")
+          }
+        },
+
+        onTypeResponse: function (e, request) {
+          if (request.succeeded) {
+            this.$.table.setData(request.response);
+          } else {
+            this.$.optionError.setError('Could not retrieve ticket types. Please refresh and try again.')
+          }
+        },
+
+        openAddTypeDialog: function () {
+          this.$.addTicketTypeForm.reset();
+          this.$.addTicketTypeDialog.open();
+        },
+
+        tryAddType: function(e, request) {
+          this.$.addTicketTypeForm.validateAndSubmit();
+          this.$.addTicketTypeForm.reset();
+        },
+
+        tryAddOption: function(e, request) {
+          this.$.addTicketOptionForm.validateAndSubmit();
+          this.$.addTicketOptionForm.reset();
+        },
+
+        openAddOptionDialog: function () {
+          this.$.addTicketOptionForm.reset();
+          this.$.addTicketOptionDialog.open();
+        },
+
+        onAddOptionResponse: function(e, request) {
+          if (request.succeeded) {
+            this.$.addTicketOptionDialog.close();
+            this.$.getOptionAjax.generateRequest();
+          } else {
+            this.$.addDialogError.setError("Could not add option. Please refresh and try again.")
+          }
+        },
+
+        onOptionResponse: function (e, request) {
+          if (request.succeeded) {
+            this.options = request.response;
+          } else {
+            this.$.optionError.setError('Could not retrieve options. Please refresh and try again.')
+          }
+        },
       });
     })();
   </script>

From cf15b12035e1c2c2047a4817f3278e752ddc195e Mon Sep 17 00:00:00 2001
From: bramvankooten <bram.vankooten@hotmail.com>
Date: Sun, 15 Dec 2019 15:02:17 +0100
Subject: [PATCH 2/9] Started adding options to tickets + deletion of options

---
 .../lancie-admin-ticket-option.html           |  13 ++
 .../lancie-admin-types.html                   | 137 +++++++++++++++---
 .../lancie-admin-table.html                   |   9 ++
 3 files changed, 136 insertions(+), 23 deletions(-)

diff --git a/src/lancie-admin-endpoint/lancie-admin-pages/lancie-admin-ticket-option.html b/src/lancie-admin-endpoint/lancie-admin-pages/lancie-admin-ticket-option.html
index fde006a..2c4c69e 100644
--- a/src/lancie-admin-endpoint/lancie-admin-pages/lancie-admin-ticket-option.html
+++ b/src/lancie-admin-endpoint/lancie-admin-pages/lancie-admin-ticket-option.html
@@ -42,6 +42,9 @@
     <paper-item class="container flex-horizontal-with-ratios">
       <div class="flex2child">[[option.name]]</div>
       <div class="flexchild">Price: [[option.price]]</div>
+      <div class="flexchild align-right">
+        <iron-icon icon="icons:delete" on-tap="deleteTicketOptionDialog" class="delete-button"></iron-icon>
+      </div>
     </paper-item>
 
   </template>
@@ -59,6 +62,16 @@
             option: Object
           }
         }
+
+        deleteTicketOptionDialog() {
+          this.dispatchEvent(new CustomEvent('delete-ticket-option-dialog', {
+            detail: {
+              id: this.option.id
+            },
+            bubbles: true,
+            composed: true
+          }));
+        }
       }
 
       customElements.define(LancieAdminTicketOption.is, LancieAdminTicketOption);
diff --git a/src/lancie-admin-endpoint/lancie-admin-pages/lancie-admin-types.html b/src/lancie-admin-endpoint/lancie-admin-pages/lancie-admin-types.html
index 9dc0820..5ae37d7 100644
--- a/src/lancie-admin-endpoint/lancie-admin-pages/lancie-admin-types.html
+++ b/src/lancie-admin-endpoint/lancie-admin-pages/lancie-admin-types.html
@@ -42,6 +42,10 @@
     </lancie-ajax>
     <lancie-ajax auto-fire id="getOptionAjax" refurl="tickets/options" on-lancie-ajax="onOptionResponse"></lancie-ajax>
 
+    <lancie-ajax id="ajaxDeleteTicketOption" method="DELETE" refurl="tickets/options/[[deleteOption.id]]" on-lancie-ajax="onDeleteResponse"></lancie-ajax>
+
+    <lancie-ajax id="ajaxAddOptionToType" method="POST"  refurl="tickets/types/[[selectedId]]/[[selectedOption]]"></lancie-ajax>
+
     <paper-card heading="Tickets/types">
       <div class="card-content">
         <p>Here is where the types will be.</p>
@@ -50,37 +54,62 @@
         <lancie-admin-table id="table" column-mappings="[[mappings]]" column-renderers="[[renderers]]"></lancie-admin-table>
       </div>
       <div class="card-actions">
+        <lancie-error id="noTypeSelectedError"></lancie-error>
         <paper-button on-tap="openAddTypeDialog">Add Ticket Type</paper-button>
+        <paper-button on-tap="openAddOptionToTypeDialog">Add Ticket Option(s) To Type</paper-button>
       </div>
     </paper-card>
 
     <lancie-dialog id="addTicketTypeDialog">
-        <h2>Add Ticket Type</h2>
-        <div class="dialog-content">
-          <lancie-error id="addTypeDialogError"></lancie-error>
-          <lancie-form id="addTicketTypeForm" refurl="tickets/types" on-response="onAddTypeResponse">
-            <paper-input label="Name" name="name" auto-validate required error-message="This field is required!"></paper-input>
-            <paper-input label="Text" name="text" auto-validate required error-message="This field is required!"></paper-input>
-            <paper-input label="Price" name="price" step=".01" type="number" auto-validate required error-message="This field is required!"></paper-input>
-            <paper-input label="Number Available" name="numberAvailable" type="number" auto-validate required error-message="This field is required!"></paper-input>
-            <paper-input label="Deadline" name="deadline" type="datetime-local" auto-validate required error-message="This field is required!"></paper-input>
-            <paper-dropdown-menu label="Buyable" name="buyable" auto-validate required error-message="This field is required!">
-              <paper-listbox slot="dropdown-content">
-                <paper-item>true</paper-item>
-                <paper-item>false</paper-item>
-              </paper-listbox>
-            </paper-dropdown-menu>
-          </lancie-form>
-        </div>
-        <div class="dialog-actions">
-          <paper-button on-tap="tryAddType">Add</paper-button>
-        </div>
-      </lancie-dialog>
+      <h2>Add Ticket Type</h2>
+      <div class="dialog-content">
+        <lancie-error id="addTypeDialogError"></lancie-error>
+        <lancie-form id="addTicketTypeForm" refurl="tickets/types" on-response="onAddTypeResponse">
+          <paper-input label="Name" name="name" auto-validate required error-message="This field is required!"></paper-input>
+          <paper-input label="Text" name="text" auto-validate required error-message="This field is required!"></paper-input>
+          <paper-input label="Price" name="price" step=".01" type="number" auto-validate required error-message="This field is required!"></paper-input>
+          <paper-input label="Number Available" name="numberAvailable" type="number" auto-validate required error-message="This field is required!"></paper-input>
+          <paper-input label="Deadline" name="deadline" type="datetime-local" auto-validate required error-message="This field is required!"></paper-input>
+          <paper-dropdown-menu label="Buyable" name="buyable" auto-validate required error-message="This field is required!">
+            <paper-listbox slot="dropdown-content">
+              <paper-item>true</paper-item>
+              <paper-item>false</paper-item>
+            </paper-listbox>
+          </paper-dropdown-menu>
+        </lancie-form>
+      </div>
+      <div class="dialog-actions">
+        <paper-button on-tap="tryAddType">Add</paper-button>
+      </div>
+    </lancie-dialog>
+
+    <lancie-dialog id="addOptionToTypeDialog">
+      <h2>Add Options to Type</h2>
+      <div class="dialog-content">
+        <h4>Options will be added to the following Ticket Types</h4>
+        <template id="typeSelected" is="dom-repeat" items="[[selectedTypes]]">
+          <p>[[item.name]]</p>
+        </template>
+        <h4>What Option do you want to add?</h4>
+        <paper-dropdown-menu label="Ticket Option">
+          <paper-listbox slot="dropdown-content" on-iron-select="optionSelected">
+            <template is="dom-repeat" items="[[options]]">
+              <paper-item>[[item.name]]</paper-item>
+            </template>
+          </paper-listbox>
+        </paper-dropdown-menu>
+      </div>
+
+      <div class="dialog-actions">
+        <paper-button dialog-dismiss>Cancel</paper-button>
+        <paper-button on-tap="tryAddOptionToTypes">Add Option</paper-button>
+      </div>
+    </lancie-dialog>
 
     <paper-card heading="Ticket Options">
-      <div class="card-content">
+      <div class="card-content" on-delete-ticket-option-dialog="deleteTicketOptionDialog">
         <lancie-error id="optionError"></lancie-error>
-        <template is="dom-repeat" items="[[options]]">
+        <template is="dom-repeat" items="{{options}}">
           <lancie-admin-ticket-option option="[[item]]"></lancie-admin-ticket-option>
         </template>
       </div>
@@ -101,6 +130,19 @@ <h2>Add Ticket Option</h2>
         <paper-button on-tap="tryAddOption">Add</paper-button>
       </div>
     </lancie-dialog>
+
+    <lancie-dialog id="deleteTicketOptionDialog">
+      <h2>Confirm deletion</h2>
+      <div class="dialog-content">
+        <lancie-error id="dialogError"></lancie-error>
+        <h4>Are you certain you want to delete this ticket option?</h4>
+        <p>[[deleteOption.name]]</p>
+      </div>
+      <div class="dialog-actions">
+        <paper-button dialog-dismiss>Cancel</paper-button>
+        <paper-button on-tap="tryOptionDelete" class="confirm-delete-button">Delete</paper-button>
+      </div>
+    </lancie-dialog>
   </template>
   <script>
     (function () {
@@ -191,6 +233,55 @@ <h2>Add Ticket Option</h2>
             this.$.optionError.setError('Could not retrieve options. Please refresh and try again.')
           }
         },
+
+        deleteTicketOptionDialog: function (event) {
+          console.log("Test")
+          this.deleteOption = this.options.filter(option => {
+            return option.id === event.detail.id;
+          })[0];
+          this.$.deleteTicketOptionDialog.open();
+        },
+
+        tryOptionDelete: function () {
+          this.$.ajaxDeleteTicketOption.generateRequest();
+        },
+
+        onOptionDeleteResponse: function (e, request) {
+          if (request.succeeded) {
+            this.$.deleteCommitteeMemberDialog.close();
+            this.$.getOptionAjax.generateRequest(); // Ensures we have a mirror of the latest server state
+          } else {
+            this.$.dialogError.setError('Something went wrong! Please refresh and try again.')
+          }
+        },
+
+        openAddOptionToTypeDialog: function () {
+          if (this.$.table.selected().length > 0) {
+            this.selectedTypes = this.$.table.selected();
+            console.log(this.selectedTypes)
+            this.$.noTypeSelectedError.clear();
+            this.$.typeSelected.render();
+            this.$.addOptionToTypeDialog.open();
+          } else {
+            this.$.noTypeSelectedError.setError('Please select a type first.')
+          }
+        },
+
+        optionSelected: function (e) {
+          this.selectedOption = e.target.selectedItem.innerText
+        },
+
+        tryAddOptionToTypes: function () {
+          this.selectedTypes.forEach(t => this.tryAddOptionToType(t))
+          this.$.table.clearSelection();
+          this.$.addOptionToTypeDialog.close();
+        },
+
+        tryAddOptionToType: function (t) {
+          this.selectedId = t.id;
+          this.$.ajaxAddOptionToType.generateRequest();
+        }
+
       });
     })();
   </script>
diff --git a/src/lancie-admin-table/lancie-admin-table.html b/src/lancie-admin-table/lancie-admin-table.html
index 1e56a7a..92a287f 100644
--- a/src/lancie-admin-table/lancie-admin-table.html
+++ b/src/lancie-admin-table/lancie-admin-table.html
@@ -227,7 +227,16 @@
             }
           }
           return false;
+        },
+
+        selected: function() {
+          return this.$.grid.selectedItems
+        },
+
+        clearSelection: function () {
+          this.$.grid.selectedItems = [];
         }
+
       });
     })();
   </script>

From 2a4b4bd09dcf9adcdef24b34ac8bf88b9e6c4575 Mon Sep 17 00:00:00 2001
From: bramvankooten <bram.vankooten@hotmail.com>
Date: Sun, 15 Dec 2019 16:14:47 +0100
Subject: [PATCH 3/9] Added table refresh after adding option to type

---
 .../lancie-admin-types.html                   | 28 +++++++++----------
 1 file changed, 14 insertions(+), 14 deletions(-)

diff --git a/src/lancie-admin-endpoint/lancie-admin-pages/lancie-admin-types.html b/src/lancie-admin-endpoint/lancie-admin-pages/lancie-admin-types.html
index 5ae37d7..dc87ca1 100644
--- a/src/lancie-admin-endpoint/lancie-admin-pages/lancie-admin-types.html
+++ b/src/lancie-admin-endpoint/lancie-admin-pages/lancie-admin-types.html
@@ -44,7 +44,7 @@
 
     <lancie-ajax id="ajaxDeleteTicketOption" method="DELETE" refurl="tickets/options/[[deleteOption.id]]" on-lancie-ajax="onDeleteResponse"></lancie-ajax>
 
-    <lancie-ajax id="ajaxAddOptionToType" method="POST"  refurl="tickets/types/[[selectedId]]/[[selectedOption]]"></lancie-ajax>
+    <lancie-ajax id="ajaxAddOptionToType" method="POST" refurl="tickets/types/[[selectedId]]/[[selectedOption]]"></lancie-ajax>
 
     <paper-card heading="Tickets/types">
       <div class="card-content">
@@ -174,7 +174,7 @@ <h4>Are you certain you want to delete this ticket option?</h4>
           }
         },
 
-        onResponse: function (e, request) {
+        onResponse: function(e, request) {
           if (request.succeeded) {
             this.$.table.setData(request.response);
           }
@@ -189,7 +189,7 @@ <h4>Are you certain you want to delete this ticket option?</h4>
           }
         },
 
-        onTypeResponse: function (e, request) {
+        onTypeResponse: function(e, request) {
           if (request.succeeded) {
             this.$.table.setData(request.response);
           } else {
@@ -197,7 +197,7 @@ <h4>Are you certain you want to delete this ticket option?</h4>
           }
         },
 
-        openAddTypeDialog: function () {
+        openAddTypeDialog: function() {
           this.$.addTicketTypeForm.reset();
           this.$.addTicketTypeDialog.open();
         },
@@ -212,7 +212,7 @@ <h4>Are you certain you want to delete this ticket option?</h4>
           this.$.addTicketOptionForm.reset();
         },
 
-        openAddOptionDialog: function () {
+        openAddOptionDialog: function() {
           this.$.addTicketOptionForm.reset();
           this.$.addTicketOptionDialog.open();
         },
@@ -226,7 +226,7 @@ <h4>Are you certain you want to delete this ticket option?</h4>
           }
         },
 
-        onOptionResponse: function (e, request) {
+        onOptionResponse: function(e, request) {
           if (request.succeeded) {
             this.options = request.response;
           } else {
@@ -234,7 +234,7 @@ <h4>Are you certain you want to delete this ticket option?</h4>
           }
         },
 
-        deleteTicketOptionDialog: function (event) {
+        deleteTicketOptionDialog: function(event) {
           console.log("Test")
           this.deleteOption = this.options.filter(option => {
             return option.id === event.detail.id;
@@ -242,11 +242,11 @@ <h4>Are you certain you want to delete this ticket option?</h4>
           this.$.deleteTicketOptionDialog.open();
         },
 
-        tryOptionDelete: function () {
+        tryOptionDelete: function() {
           this.$.ajaxDeleteTicketOption.generateRequest();
         },
 
-        onOptionDeleteResponse: function (e, request) {
+        onOptionDeleteResponse: function(e, request) {
           if (request.succeeded) {
             this.$.deleteCommitteeMemberDialog.close();
             this.$.getOptionAjax.generateRequest(); // Ensures we have a mirror of the latest server state
@@ -255,10 +255,9 @@ <h4>Are you certain you want to delete this ticket option?</h4>
           }
         },
 
-        openAddOptionToTypeDialog: function () {
+        openAddOptionToTypeDialog: function() {
           if (this.$.table.selected().length > 0) {
             this.selectedTypes = this.$.table.selected();
-            console.log(this.selectedTypes)
             this.$.noTypeSelectedError.clear();
             this.$.typeSelected.render();
             this.$.addOptionToTypeDialog.open();
@@ -267,17 +266,18 @@ <h4>Are you certain you want to delete this ticket option?</h4>
           }
         },
 
-        optionSelected: function (e) {
+        optionSelected: function(e) {
           this.selectedOption = e.target.selectedItem.innerText
         },
 
-        tryAddOptionToTypes: function () {
+        tryAddOptionToTypes: function() {
           this.selectedTypes.forEach(t => this.tryAddOptionToType(t))
           this.$.table.clearSelection();
           this.$.addOptionToTypeDialog.close();
+          this.$.getTypeAjax.generateRequest();
         },
 
-        tryAddOptionToType: function (t) {
+        tryAddOptionToType: function(t) {
           this.selectedId = t.id;
           this.$.ajaxAddOptionToType.generateRequest();
         }

From 1309b9065302aea46941f88fe80cb61090b55fd0 Mon Sep 17 00:00:00 2001
From: bramvankooten <bram.vankooten@hotmail.com>
Date: Sun, 15 Dec 2019 17:51:20 +0100
Subject: [PATCH 4/9] Added option to change the buyable attribute of a
 TicketType

---
 .../lancie-admin-types.html                   | 49 +++++++++++++++++--
 1 file changed, 46 insertions(+), 3 deletions(-)

diff --git a/src/lancie-admin-endpoint/lancie-admin-pages/lancie-admin-types.html b/src/lancie-admin-endpoint/lancie-admin-pages/lancie-admin-types.html
index dc87ca1..96ba288 100644
--- a/src/lancie-admin-endpoint/lancie-admin-pages/lancie-admin-types.html
+++ b/src/lancie-admin-endpoint/lancie-admin-pages/lancie-admin-types.html
@@ -46,6 +46,8 @@
 
     <lancie-ajax id="ajaxAddOptionToType" method="POST" refurl="tickets/types/[[selectedId]]/[[selectedOption]]"></lancie-ajax>
 
+    <lancie-ajax id="ajaxChangeBuyableOfType" method="POST" refurl="tickets/types/[[selectedId]]/buyable/[[buyableBool]]"></lancie-ajax>
+
     <paper-card heading="Tickets/types">
       <div class="card-content">
         <p>Here is where the types will be.</p>
@@ -56,7 +58,8 @@
       <div class="card-actions">
         <lancie-error id="noTypeSelectedError"></lancie-error>
         <paper-button on-tap="openAddTypeDialog">Add Ticket Type</paper-button>
-        <paper-button on-tap="openAddOptionToTypeDialog">Add Ticket Option(s) To Type</paper-button>
+        <paper-button on-tap="openAddOptionToTypeDialog">Add Ticket Option To Type(s)</paper-button>
+        <paper-button on-tap="openChangeBuyableDialog">Change Buyable</paper-button>
       </div>
     </paper-card>
 
@@ -106,6 +109,22 @@ <h4>What Option do you want to add?</h4>
       </div>
     </lancie-dialog>
 
+    <lancie-dialog id="changeBuyableOfTypeDialog">
+      <h2>Change Buyable Of Type</h2>
+      <div class="dialog-content">
+        <h4>Buyable will be changed for the following Types:</h4>
+        <template id="typeSelected" is="dom-repeat" items="[[selectedTypes]]">
+          <p>[[item.name]]</p>
+        </template>
+      </div>
+
+      <div class="dialog-actions">
+        <paper-button dialog-dismiss>Cancel</paper-button>
+        <paper-button on-tap="tryChangeBuyableOfTypes">Confirm</paper-button>
+      </div>
+    </lancie-dialog>
+
+
     <paper-card heading="Ticket Options">
       <div class="card-content" on-delete-ticket-option-dialog="deleteTicketOptionDialog">
         <lancie-error id="optionError"></lancie-error>
@@ -185,7 +204,7 @@ <h4>Are you certain you want to delete this ticket option?</h4>
             this.$.addTicketTypeDialog.close();
             this.$.getTypeAjax.generateRequest();
           } else {
-            this.$.addDialogError.setError("Could not add ticket type. Please refresh and try again.")
+            this.$.addDialogError.setError("Could not add ticket type. Please refresh and try again.");
           }
         },
 
@@ -193,7 +212,7 @@ <h4>Are you certain you want to delete this ticket option?</h4>
           if (request.succeeded) {
             this.$.table.setData(request.response);
           } else {
-            this.$.optionError.setError('Could not retrieve ticket types. Please refresh and try again.')
+            this.$.optionError.setError('Could not retrieve ticket types. Please refresh and try again.');
           }
         },
 
@@ -280,6 +299,30 @@ <h4>Are you certain you want to delete this ticket option?</h4>
         tryAddOptionToType: function(t) {
           this.selectedId = t.id;
           this.$.ajaxAddOptionToType.generateRequest();
+        },
+
+        openChangeBuyableDialog: function() {
+          if (this.$.table.selected().length > 0) {
+            this.selectedTypes = this.$.table.selected();
+            this.$.noTypeSelectedError.clear();
+            this.$.typeSelected.render();
+            this.$.changeBuyableOfTypeDialog.open();
+          } else {
+            this.$.noTypeSelectedError.setError('Please select a type first.')
+          }
+        },
+
+        tryChangeBuyableOfTypes: function() {
+          this.selectedTypes.forEach(t => this.tryChangeBuyableOfType(t))
+          this.$.table.clearSelection();
+          this.$.changeBuyableOfTypeDialog.close();
+          this.$.getTypeAjax.generateRequest();
+        },
+
+        tryChangeBuyableOfType: function(t) {
+          this.selectedId = t.id;
+          this.buyableBool = !t.buyable
+          this.$.ajaxChangeBuyableOfType.generateRequest();
         }
 
       });

From ffa9f3aaf5cec3305a6d19eaa7c1456b9ff63cb3 Mon Sep 17 00:00:00 2001
From: bramvankooten <bram.vankooten@hotmail.com>
Date: Tue, 17 Dec 2019 13:01:28 +0100
Subject: [PATCH 5/9] Adjusted for API changes + removed custom-style elements

---
 .../lancie-admin-ticket-option.html           | 33 +++++++++----------
 .../lancie-admin-types.html                   | 16 +++++++--
 .../lancie-admin-committee-member.html        | 33 +++++++++----------
 .../lancie-admin-faq-item.html                | 30 +++++++++--------
 .../lancie-admin-sponsor.html                 | 30 +++++++++--------
 5 files changed, 77 insertions(+), 65 deletions(-)

diff --git a/src/lancie-admin-endpoint/lancie-admin-pages/lancie-admin-ticket-option.html b/src/lancie-admin-endpoint/lancie-admin-pages/lancie-admin-ticket-option.html
index 2c4c69e..979e0cf 100644
--- a/src/lancie-admin-endpoint/lancie-admin-pages/lancie-admin-ticket-option.html
+++ b/src/lancie-admin-endpoint/lancie-admin-pages/lancie-admin-ticket-option.html
@@ -20,24 +20,23 @@
       .align-right {
         text-align: right;
       }
-    </style>
 
-    <custom-style>
-      <style is="custom-style">
-        .flex-horizontal-with-ratios {
-          @apply (--layout-horizontal);
-        }
-        .flexchild {
-          @apply (--layout-flex);
-        }
-        .flex2child {
-          @apply (--layout-flex-4);
-        }
-        .flex3child {
-          @apply (--layout-flex-9);
-        }
-      </style>
-    </custom-style>
+      .flex-horizontal-with-ratios {
+        @apply (--layout-horizontal);
+      }
+      
+      .flexchild {
+        @apply (--layout-flex);
+      }
+      
+      .flex2child {
+        @apply (--layout-flex-4);
+      }
+
+      .flex3child {
+        @apply (--layout-flex-9);
+      }
+    </style>
 
     <paper-item class="container flex-horizontal-with-ratios">
       <div class="flex2child">[[option.name]]</div>
diff --git a/src/lancie-admin-endpoint/lancie-admin-pages/lancie-admin-types.html b/src/lancie-admin-endpoint/lancie-admin-pages/lancie-admin-types.html
index 96ba288..aeb5573 100644
--- a/src/lancie-admin-endpoint/lancie-admin-pages/lancie-admin-types.html
+++ b/src/lancie-admin-endpoint/lancie-admin-pages/lancie-admin-types.html
@@ -44,9 +44,9 @@
 
     <lancie-ajax id="ajaxDeleteTicketOption" method="DELETE" refurl="tickets/options/[[deleteOption.id]]" on-lancie-ajax="onDeleteResponse"></lancie-ajax>
 
-    <lancie-ajax id="ajaxAddOptionToType" method="POST" refurl="tickets/types/[[selectedId]]/[[selectedOption]]"></lancie-ajax>
+    <lancie-ajax id="ajaxAddOptionToType" method="POST" body="[[getOptionBody(selectedOption)]]" refurl="tickets/types/[[selectedId]]/option"></lancie-ajax>
 
-    <lancie-ajax id="ajaxChangeBuyableOfType" method="POST" refurl="tickets/types/[[selectedId]]/buyable/[[buyableBool]]"></lancie-ajax>
+    <lancie-ajax id="ajaxChangeBuyableOfType" method="POST" body="[[getBuyableBody(buyableBool)]]" refurl="tickets/types/[[selectedId]]/buyable"></lancie-ajax>
 
     <paper-card heading="Tickets/types">
       <div class="card-content">
@@ -286,7 +286,9 @@ <h4>Are you certain you want to delete this ticket option?</h4>
         },
 
         optionSelected: function(e) {
-          this.selectedOption = e.target.selectedItem.innerText
+          this.selectedOption = this.options.filter(option => {
+            return option.name === e.target.selectedItem.innerText;
+          })[0];
         },
 
         tryAddOptionToTypes: function() {
@@ -323,6 +325,14 @@ <h4>Are you certain you want to delete this ticket option?</h4>
           this.selectedId = t.id;
           this.buyableBool = !t.buyable
           this.$.ajaxChangeBuyableOfType.generateRequest();
+        },
+
+        getOptionBody: function(selected) {
+          return '{"option": ' + JSON.stringify(selected) + '}';
+        },
+
+        getBuyableBody: function(buyable) {
+          return '{"buyable": ' + buyable + '}'
         }
 
       });
diff --git a/src/lancie-admin-web/lancie-admin-committee-member.html b/src/lancie-admin-web/lancie-admin-committee-member.html
index 768c948..b84c80f 100644
--- a/src/lancie-admin-web/lancie-admin-committee-member.html
+++ b/src/lancie-admin-web/lancie-admin-committee-member.html
@@ -22,25 +22,24 @@
       .align-right {
         text-align: right;
       }
-    </style>
 
-    <custom-style>
-      <style is="custom-style">
-        .flex-horizontal-with-ratios {
-          @apply (--layout-horizontal);
-        }
-        .flexchild {
-          @apply (--layout-flex);
-        }
-        .flex2child {
-          @apply (--layout-flex-4);
-        }
-        .flex3child {
-          @apply (--layout-flex-9);
-        }
-      </style>
-    </custom-style>
+      .flex-horizontal-with-ratios {
+        @apply (--layout-horizontal);
+      }
+      
+      .flexchild {
+        @apply (--layout-flex);
+      }
+      
+      .flex2child {
+        @apply (--layout-flex-4);
+      }
 
+      .flex3child {
+        @apply (--layout-flex-9);
+      }
+    </style>
+    
     <paper-item class="container flex-horizontal-with-ratios">
       <div class="flex2child">[[member.name]]</div>
       <div class="flex3child">
diff --git a/src/lancie-admin-web/lancie-admin-faq-item.html b/src/lancie-admin-web/lancie-admin-faq-item.html
index 26ef61d..252b652 100644
--- a/src/lancie-admin-web/lancie-admin-faq-item.html
+++ b/src/lancie-admin-web/lancie-admin-faq-item.html
@@ -21,21 +21,23 @@
       .align-right {
         text-align: right;
       }
-    </style>
 
-    <custom-style>
-      <style is="custom-style">
-        .flex-horizontal-with-ratios {
-          @apply (--layout-horizontal);
-        }
-        .flexchild {
-          @apply (--layout-flex);
-        }
-        .flex-big-child {
-          @apply (--layout-flex-9);
-        }
-      </style>
-    </custom-style>
+      .flex-horizontal-with-ratios {
+        @apply (--layout-horizontal);
+      }
+      
+      .flexchild {
+        @apply (--layout-flex);
+      }
+      
+      .flex2child {
+        @apply (--layout-flex-4);
+      }
+
+      .flex3child {
+        @apply (--layout-flex-9);
+      }
+    </style>
 
     <paper-item class="container flex-horizontal-with-ratios">
       <div class="flexchild">[[item.id]]</div>
diff --git a/src/lancie-admin-web/lancie-admin-sponsor.html b/src/lancie-admin-web/lancie-admin-sponsor.html
index 6fc5604..7730523 100644
--- a/src/lancie-admin-web/lancie-admin-sponsor.html
+++ b/src/lancie-admin-web/lancie-admin-sponsor.html
@@ -22,21 +22,23 @@
       .align-right {
         text-align: right;
       }
-    </style>
 
-    <custom-style>
-      <style is="custom-style">
-        .flex-horizontal-with-ratios {
-          @apply (--layout-horizontal);
-        }
-        .flexchild {
-          @apply (--layout-flex);
-        }
-        .flex-big-child {
-          @apply (--layout-flex-7);
-        }
-      </style>
-    </custom-style>
+      .flex-horizontal-with-ratios {
+        @apply (--layout-horizontal);
+      }
+      
+      .flexchild {
+        @apply (--layout-flex);
+      }
+      
+      .flex2child {
+        @apply (--layout-flex-4);
+      }
+
+      .flex3child {
+        @apply (--layout-flex-9);
+      }
+    </style>
 
     <paper-item class="container flex-horizontal-with-ratios" on-tap="showSponsor">
       <div class="flexchild">[[item.id]]</div>

From 1c5a6b89256d76c4b9df5e7d4061ffd4d8231b07 Mon Sep 17 00:00:00 2001
From: bramvankooten <bram.vankooten@hotmail.com>
Date: Tue, 17 Dec 2019 14:47:41 +0100
Subject: [PATCH 6/9] Split up lancie-admin-types.html

---
 src/lancie-admin-content.html                 |   2 +-
 .../lancie-admin-ticket-option.html           |   6 +-
 .../lancie-admin-ticket-options.html          | 164 ++++++++++++++++++
 .../lancie-admin-ticket-types.html}           | 128 ++------------
 .../lancie-admin-types.html                   |  46 +++++
 5 files changed, 230 insertions(+), 116 deletions(-)
 rename src/lancie-admin-endpoint/lancie-admin-pages/{ => lancie-admin-types}/lancie-admin-ticket-option.html (86%)
 create mode 100644 src/lancie-admin-endpoint/lancie-admin-pages/lancie-admin-types/lancie-admin-ticket-options.html
 rename src/lancie-admin-endpoint/lancie-admin-pages/{lancie-admin-types.html => lancie-admin-types/lancie-admin-ticket-types.html} (62%)
 create mode 100644 src/lancie-admin-endpoint/lancie-admin-pages/lancie-admin-types/lancie-admin-types.html

diff --git a/src/lancie-admin-content.html b/src/lancie-admin-content.html
index fefa102..069a45c 100644
--- a/src/lancie-admin-content.html
+++ b/src/lancie-admin-content.html
@@ -28,7 +28,7 @@
       <lancie-admin-orders data-route="orders" data-path="lancie-admin-endpoint/lancie-admin-pages/lancie-admin-orders.html"></lancie-admin-orders>
       <lancie-admin-tickets data-route="tickets" data-path="lancie-admin-endpoint/lancie-admin-pages/lancie-admin-tickets.html"></lancie-admin-tickets>
       <lancie-admin-teams data-route="teams" data-path="lancie-admin-endpoint/lancie-admin-pages/lancie-admin-teams.html"></lancie-admin-teams>
-      <lancie-admin-types data-route="types" data-path="lancie-admin-endpoint/lancie-admin-pages/lancie-admin-types.html"></lancie-admin-types>
+      <lancie-admin-types data-route="types" data-path="lancie-admin-endpoint/lancie-admin-pages/lancie-admin-types/lancie-admin-types.html"></lancie-admin-types>
       <lancie-admin-seats data-route="seats" data-path="lancie-admin-endpoint/lancie-admin-pages/lancie-admin-seats.html"></lancie-admin-seats>
       <lancie-admin-homepage-text data-route="text" data-path="lancie-admin-endpoint/lancie-admin-pages/lancie-admin-homepage-text.html"></lancie-admin-homepage-text>
       <lancie-admin-mail data-route="mail" data-path="lancie-admin-endpoint/lancie-admin-pages/lancie-admin-mail/lancie-admin-mail.html"></lancie-admin-mail>
diff --git a/src/lancie-admin-endpoint/lancie-admin-pages/lancie-admin-ticket-option.html b/src/lancie-admin-endpoint/lancie-admin-pages/lancie-admin-types/lancie-admin-ticket-option.html
similarity index 86%
rename from src/lancie-admin-endpoint/lancie-admin-pages/lancie-admin-ticket-option.html
rename to src/lancie-admin-endpoint/lancie-admin-pages/lancie-admin-types/lancie-admin-ticket-option.html
index 979e0cf..4189617 100644
--- a/src/lancie-admin-endpoint/lancie-admin-pages/lancie-admin-ticket-option.html
+++ b/src/lancie-admin-endpoint/lancie-admin-pages/lancie-admin-types/lancie-admin-ticket-option.html
@@ -1,6 +1,6 @@
-<link rel="import" href="../../../bower_components/polymer/polymer.html">
-<link rel="import" href="../../../bower_components/iron-flex-layout/iron-flex-layout-classes.html">
-<link rel="import" href="../../../bower_components/iron-icon/iron-icon.html">
+<link rel="import" href="../../../../bower_components/polymer/polymer.html">
+<link rel="import" href="../../../../bower_components/iron-flex-layout/iron-flex-layout-classes.html">
+<link rel="import" href="../../../../bower_components/iron-icon/iron-icon.html">
 
 <dom-module id="lancie-admin-ticket-option">
   <template>
diff --git a/src/lancie-admin-endpoint/lancie-admin-pages/lancie-admin-types/lancie-admin-ticket-options.html b/src/lancie-admin-endpoint/lancie-admin-pages/lancie-admin-types/lancie-admin-ticket-options.html
new file mode 100644
index 0000000..449a14c
--- /dev/null
+++ b/src/lancie-admin-endpoint/lancie-admin-pages/lancie-admin-types/lancie-admin-ticket-options.html
@@ -0,0 +1,164 @@
+<link rel="import" href="../../../../bower_components/polymer/polymer.html">
+<link rel="import" href="../../../../bower_components/lancie-ajax/lancie-ajax.html">
+<link rel="import" href="../../../../bower_components/lancie-form/lancie-form.html">
+<link rel="import" href="../../../../bower_components/lancie-dialog/lancie-dialog.html">
+<link rel="import" href="../../../../bower_components/lancie-error/lancie-error.html">
+<link rel="import" href="../../../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html">
+<link rel="import" href="../../../../bower_components/neon-animation/web-animations.html">
+<link rel="import" href="../../../../bower_components/paper-listbox/paper-listbox.html">
+<link rel="import" href="../../../../bower_components/paper-item/paper-item.html">
+
+<link rel="import" href="../../lancie-admin-page-layout.html">
+<link rel="import" href="../../../lancie-admin-table/lancie-admin-table.html">
+
+<link rel="import" href="lancie-admin-ticket-option.html">
+
+<dom-module id="lancie-admin-ticket-options">
+  <template>
+    <style include="iron-flex iron-flex-alignment"></style>
+    <style>
+      :host {
+        display: block;
+      }
+
+      paper-card {
+        width: calc(100% - 32px);
+        margin: 16px;
+      }
+
+      [hidden] {
+        display: none !important;
+      }
+
+      @media (max-width: 640px) {
+        paper-card {
+          width: 100%;
+          margin: 0;
+        }
+      }
+    </style>
+
+    <lancie-ajax auto-fire id="getOptionAjax" refurl="tickets/options" on-lancie-ajax="onOptionResponse"></lancie-ajax>
+
+    <lancie-ajax id="ajaxDeleteTicketOption" method="DELETE" refurl="tickets/options/[[deleteOption.id]]" on-lancie-ajax="onDeleteResponse"></lancie-ajax>
+
+    <paper-card heading="Ticket Options">
+      <div class="card-content" on-delete-ticket-option-dialog="deleteTicketOptionDialog">
+        <lancie-error id="optionError"></lancie-error>
+        <template is="dom-repeat" items="{{options}}">
+          <lancie-admin-ticket-option option="[[item]]"></lancie-admin-ticket-option>
+        </template>
+      </div>
+      <div class="card-actions">
+        <paper-button on-tap="openAddOptionDialog">Add Ticket Option</paper-button>
+      </div> 
+    </paper-card>
+    <lancie-dialog id="addTicketOptionDialog">
+      <h2>Add Ticket Option</h2>
+      <div class="dialog-content">
+        <lancie-error id="addDialogError"></lancie-error>
+        <lancie-form id="addTicketOptionForm" refurl="tickets/options" on-response="onAddOptionResponse">
+          <paper-input label="Name" name="name" auto-validate required error-message="This field is required!"></paper-input>
+          <paper-input label="Price" name="price" step=".01" type="number" auto-validate required error-message="This field is required!"></paper-input>
+        </lancie-form>
+      </div>
+      <div class="dialog-actions">
+        <paper-button on-tap="tryAddOption">Add</paper-button>
+      </div>
+    </lancie-dialog>
+
+    <lancie-dialog id="deleteTicketOptionDialog">
+      <h2>Confirm deletion</h2>
+      <div class="dialog-content">
+        <lancie-error id="dialogError"></lancie-error>
+        <h4>Are you certain you want to delete this ticket option?</h4>
+        <p>[[deleteOption.name]]</p>
+      </div>
+      <div class="dialog-actions">
+        <paper-button dialog-dismiss>Cancel</paper-button>
+        <paper-button on-tap="tryOptionDelete" class="confirm-delete-button">Delete</paper-button>
+      </div>
+    </lancie-dialog>
+  </template>
+  <script>
+    (function () {
+      'use strict';
+
+      Polymer({
+        is: 'lancie-admin-ticket-options',
+        properties: {
+          data: Object,
+          mappings: {
+            type: Object,
+            value: function() {
+              return {
+              };
+            }
+          },
+          renderers: {
+            type: Object,
+            value: function() {
+              return {
+                possibleOptions: function(data) {
+                  var text = data.reduce(function(text, t){
+                    return text + t.name + ' ' + t.price +', ';
+                  }, '');
+                  return text.substr(0, text.length - 2);
+                },
+              };
+            }
+          }
+        },
+
+        tryAddOption: function(e, request) {
+          this.$.addTicketOptionForm.validateAndSubmit();
+          this.$.addTicketOptionForm.reset();
+        },
+
+        openAddOptionDialog: function() {
+          this.$.addTicketOptionForm.reset();
+          this.$.addTicketOptionDialog.open();
+        },
+
+        onAddOptionResponse: function(e, request) {
+          if (request.succeeded) {
+            this.$.addTicketOptionDialog.close();
+            this.$.getOptionAjax.generateRequest();
+          } else {
+            this.$.addDialogError.setError("Could not add option. Please refresh and try again.")
+          }
+        },
+
+        deleteTicketOptionDialog: function(event) {
+          this.deleteOption = this.options.filter(option => {
+            return option.id === event.detail.id;
+          })[0];
+          this.$.deleteTicketOptionDialog.open();
+        },
+
+        tryOptionDelete: function() {
+          this.$.ajaxDeleteTicketOption.generateRequest();
+        },
+
+        onOptionDeleteResponse: function(e, request) {
+          if (request.succeeded) {
+            this.$.deleteCommitteeMemberDialog.close();
+            this.$.getOptionAjax.generateRequest(); // Ensures we have a mirror of the latest server state
+          } else {
+            this.$.dialogError.setError('Something went wrong! Please refresh and try again.')
+          }
+        },
+
+        onOptionResponse: function(e, request) {
+          if (request.succeeded) {
+            this.fire('set-options', {'options': request.response})
+            this.options = request.response;
+          } else {
+            this.$.optionError.setError('Could not retrieve options. Please refresh and try again.')
+        }
+      }
+
+      });
+    })();
+  </script>
+</dom-module>
diff --git a/src/lancie-admin-endpoint/lancie-admin-pages/lancie-admin-types.html b/src/lancie-admin-endpoint/lancie-admin-pages/lancie-admin-types/lancie-admin-ticket-types.html
similarity index 62%
rename from src/lancie-admin-endpoint/lancie-admin-pages/lancie-admin-types.html
rename to src/lancie-admin-endpoint/lancie-admin-pages/lancie-admin-types/lancie-admin-ticket-types.html
index aeb5573..668b378 100644
--- a/src/lancie-admin-endpoint/lancie-admin-pages/lancie-admin-types.html
+++ b/src/lancie-admin-endpoint/lancie-admin-pages/lancie-admin-types/lancie-admin-ticket-types.html
@@ -1,19 +1,17 @@
-<link rel="import" href="../../../bower_components/polymer/polymer.html">
-<link rel="import" href="../../../bower_components/lancie-ajax/lancie-ajax.html">
-<link rel="import" href="../../../bower_components/lancie-form/lancie-form.html">
-<link rel="import" href="../../../bower_components/lancie-dialog/lancie-dialog.html">
-<link rel="import" href="../../../bower_components/lancie-error/lancie-error.html">
-<link rel="import" href="../../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html">
-<link rel="import" href="../../../bower_components/neon-animation/web-animations.html">
-<link rel="import" href="../../../bower_components/paper-listbox/paper-listbox.html">
-<link rel="import" href="../../../bower_components/paper-item/paper-item.html">
-
-<link rel="import" href="../lancie-admin-page-layout.html">
-<link rel="import" href="../../lancie-admin-table/lancie-admin-table.html">
-
-<link rel="import" href="lancie-admin-ticket-option.html">
-
-<dom-module id="lancie-admin-types">
+<link rel="import" href="../../../../bower_components/polymer/polymer.html">
+<link rel="import" href="../../../../bower_components/lancie-ajax/lancie-ajax.html">
+<link rel="import" href="../../../../bower_components/lancie-form/lancie-form.html">
+<link rel="import" href="../../../../bower_components/lancie-dialog/lancie-dialog.html">
+<link rel="import" href="../../../../bower_components/lancie-error/lancie-error.html">
+<link rel="import" href="../../../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html">
+<link rel="import" href="../../../../bower_components/neon-animation/web-animations.html">
+<link rel="import" href="../../../../bower_components/paper-listbox/paper-listbox.html">
+<link rel="import" href="../../../../bower_components/paper-item/paper-item.html">
+
+<link rel="import" href="../../lancie-admin-page-layout.html">
+<link rel="import" href="../../../lancie-admin-table/lancie-admin-table.html">
+
+<dom-module id="lancie-admin-ticket-types">
   <template>
     <style include="iron-flex iron-flex-alignment"></style>
     <style>
@@ -40,9 +38,6 @@
 
     <lancie-ajax auto-fire id="getTypeAjax" refurl="tickets/types" on-lancie-ajax="onTypeResponse">
     </lancie-ajax>
-    <lancie-ajax auto-fire id="getOptionAjax" refurl="tickets/options" on-lancie-ajax="onOptionResponse"></lancie-ajax>
-
-    <lancie-ajax id="ajaxDeleteTicketOption" method="DELETE" refurl="tickets/options/[[deleteOption.id]]" on-lancie-ajax="onDeleteResponse"></lancie-ajax>
 
     <lancie-ajax id="ajaxAddOptionToType" method="POST" body="[[getOptionBody(selectedOption)]]" refurl="tickets/types/[[selectedId]]/option"></lancie-ajax>
 
@@ -124,52 +119,15 @@ <h4>Buyable will be changed for the following Types:</h4>
       </div>
     </lancie-dialog>
 
-
-    <paper-card heading="Ticket Options">
-      <div class="card-content" on-delete-ticket-option-dialog="deleteTicketOptionDialog">
-        <lancie-error id="optionError"></lancie-error>
-        <template is="dom-repeat" items="{{options}}">
-          <lancie-admin-ticket-option option="[[item]]"></lancie-admin-ticket-option>
-        </template>
-      </div>
-      <div class="card-actions">
-        <paper-button on-tap="openAddOptionDialog">Add Ticket Option</paper-button>
-      </div> 
-    </paper-card>
-    <lancie-dialog id="addTicketOptionDialog">
-      <h2>Add Ticket Option</h2>
-      <div class="dialog-content">
-        <lancie-error id="addDialogError"></lancie-error>
-        <lancie-form id="addTicketOptionForm" refurl="tickets/options" on-response="onAddOptionResponse">
-          <paper-input label="Name" name="name" auto-validate required error-message="This field is required!"></paper-input>
-          <paper-input label="Price" name="price" step=".01" type="number" auto-validate required error-message="This field is required!"></paper-input>
-        </lancie-form>
-      </div>
-      <div class="dialog-actions">
-        <paper-button on-tap="tryAddOption">Add</paper-button>
-      </div>
-    </lancie-dialog>
-
-    <lancie-dialog id="deleteTicketOptionDialog">
-      <h2>Confirm deletion</h2>
-      <div class="dialog-content">
-        <lancie-error id="dialogError"></lancie-error>
-        <h4>Are you certain you want to delete this ticket option?</h4>
-        <p>[[deleteOption.name]]</p>
-      </div>
-      <div class="dialog-actions">
-        <paper-button dialog-dismiss>Cancel</paper-button>
-        <paper-button on-tap="tryOptionDelete" class="confirm-delete-button">Delete</paper-button>
-      </div>
-    </lancie-dialog>
   </template>
   <script>
     (function () {
       'use strict';
 
       Polymer({
-        is: 'lancie-admin-types',
+        is: 'lancie-admin-ticket-types',
         properties: {
+          options: Object,
           data: Object,
           mappings: {
             type: Object,
@@ -193,12 +151,6 @@ <h4>Are you certain you want to delete this ticket option?</h4>
           }
         },
 
-        onResponse: function(e, request) {
-          if (request.succeeded) {
-            this.$.table.setData(request.response);
-          }
-        },
-
         onAddTypeResponse: function(e, request) {
           if (request.succeeded) {
             this.$.addTicketTypeDialog.close();
@@ -226,54 +178,6 @@ <h4>Are you certain you want to delete this ticket option?</h4>
           this.$.addTicketTypeForm.reset();
         },
 
-        tryAddOption: function(e, request) {
-          this.$.addTicketOptionForm.validateAndSubmit();
-          this.$.addTicketOptionForm.reset();
-        },
-
-        openAddOptionDialog: function() {
-          this.$.addTicketOptionForm.reset();
-          this.$.addTicketOptionDialog.open();
-        },
-
-        onAddOptionResponse: function(e, request) {
-          if (request.succeeded) {
-            this.$.addTicketOptionDialog.close();
-            this.$.getOptionAjax.generateRequest();
-          } else {
-            this.$.addDialogError.setError("Could not add option. Please refresh and try again.")
-          }
-        },
-
-        onOptionResponse: function(e, request) {
-          if (request.succeeded) {
-            this.options = request.response;
-          } else {
-            this.$.optionError.setError('Could not retrieve options. Please refresh and try again.')
-          }
-        },
-
-        deleteTicketOptionDialog: function(event) {
-          console.log("Test")
-          this.deleteOption = this.options.filter(option => {
-            return option.id === event.detail.id;
-          })[0];
-          this.$.deleteTicketOptionDialog.open();
-        },
-
-        tryOptionDelete: function() {
-          this.$.ajaxDeleteTicketOption.generateRequest();
-        },
-
-        onOptionDeleteResponse: function(e, request) {
-          if (request.succeeded) {
-            this.$.deleteCommitteeMemberDialog.close();
-            this.$.getOptionAjax.generateRequest(); // Ensures we have a mirror of the latest server state
-          } else {
-            this.$.dialogError.setError('Something went wrong! Please refresh and try again.')
-          }
-        },
-
         openAddOptionToTypeDialog: function() {
           if (this.$.table.selected().length > 0) {
             this.selectedTypes = this.$.table.selected();
diff --git a/src/lancie-admin-endpoint/lancie-admin-pages/lancie-admin-types/lancie-admin-types.html b/src/lancie-admin-endpoint/lancie-admin-pages/lancie-admin-types/lancie-admin-types.html
new file mode 100644
index 0000000..856cda7
--- /dev/null
+++ b/src/lancie-admin-endpoint/lancie-admin-pages/lancie-admin-types/lancie-admin-types.html
@@ -0,0 +1,46 @@
+<link rel="import" href="../../../../bower_components/polymer/polymer.html">
+
+<link rel="import" href="lancie-admin-ticket-types.html">
+<link rel="import" href="lancie-admin-ticket-options.html">
+
+<dom-module id="lancie-admin-types">
+  <template>
+    <style>
+      :host {
+        display: block;
+      }
+    </style>
+
+    <lancie-admin-ticket-types options=[[options]]></lancie-admin-ticket-types>
+    <lancie-admin-ticket-options></lancie-admin-ticket-options>
+
+  </template>
+  <script>
+    (function() {
+      'use strict';
+
+      class LancieAdminTypes extends Polymer.Element {
+        static get is() {
+          return 'lancie-admin-types';
+        }
+
+        static get properties() {
+          return {
+            options: Object
+          };
+        }
+
+        ready() {
+          super.ready();
+          this.addEventListener('set-options', (e) => this.setOptions(e));
+        }
+
+        setOptions(event) {
+          this.options = event.detail.options;
+        }
+      }
+
+      customElements.define(LancieAdminTypes.is, LancieAdminTypes);
+    })();
+  </script>
+</dom-module>

From a00d0f061090788c1203a001b2e58f3ed58a711e Mon Sep 17 00:00:00 2001
From: bramvankooten <bram.vankooten@hotmail.com>
Date: Tue, 17 Dec 2019 23:24:12 +0100
Subject: [PATCH 7/9] Made requested changes + adapted API calls for api
 changes

---
 gulp/polymer.json                             |  2 +-
 .../lancie-admin-ticket-options.html          | 60 ++++++++--------
 .../lancie-admin-ticket-types.html            | 69 +++++++++++--------
 3 files changed, 73 insertions(+), 58 deletions(-)

diff --git a/gulp/polymer.json b/gulp/polymer.json
index de88898..c21780f 100644
--- a/gulp/polymer.json
+++ b/gulp/polymer.json
@@ -10,7 +10,7 @@
     "src/lancie-admin-endpoint/lancie-admin-pages/lancie-admin-teams.html",
     "src/lancie-admin-endpoint/lancie-admin-pages/lancie-admin-tickets.html",
     "src/lancie-admin-endpoint/lancie-admin-pages/lancie-admin-users.html",
-    "src/lancie-admin-endpoint/lancie-admin-pages/lancie-admin-types.html",
+    "src/lancie-admin-endpoint/lancie-admin-pages/lancie-admin-types/lancie-admin-types.html",
     "src/lancie-admin-endpoint/lancie-admin-pages/lancie-admin-seats.html",
     "src/lancie-admin-endpoint/lancie-admin-pages/lancie-admin-mail/lancie-admin-mail.html",
     "src/lancie-admin-endpoint/lancie-admin-pages/lancie-admin-homepage-text.html",
diff --git a/src/lancie-admin-endpoint/lancie-admin-pages/lancie-admin-types/lancie-admin-ticket-options.html b/src/lancie-admin-endpoint/lancie-admin-pages/lancie-admin-types/lancie-admin-ticket-options.html
index 449a14c..4e1e73b 100644
--- a/src/lancie-admin-endpoint/lancie-admin-pages/lancie-admin-types/lancie-admin-ticket-options.html
+++ b/src/lancie-admin-endpoint/lancie-admin-pages/lancie-admin-types/lancie-admin-ticket-options.html
@@ -45,7 +45,7 @@
     <paper-card heading="Ticket Options">
       <div class="card-content" on-delete-ticket-option-dialog="deleteTicketOptionDialog">
         <lancie-error id="optionError"></lancie-error>
-        <template is="dom-repeat" items="{{options}}">
+        <template is="dom-repeat" items="[[options]]">
           <lancie-admin-ticket-option option="[[item]]"></lancie-admin-ticket-option>
         </template>
       </div>
@@ -58,8 +58,8 @@ <h2>Add Ticket Option</h2>
       <div class="dialog-content">
         <lancie-error id="addDialogError"></lancie-error>
         <lancie-form id="addTicketOptionForm" refurl="tickets/options" on-response="onAddOptionResponse">
-          <paper-input label="Name" name="name" auto-validate required error-message="This field is required!"></paper-input>
-          <paper-input label="Price" name="price" step=".01" type="number" auto-validate required error-message="This field is required!"></paper-input>
+          <paper-input label="Name" name="name" error-message="This field is required!" auto-validate required></paper-input>
+          <paper-input label="Price" name="price" step=".01" type="number" error-message="This field is required!" auto-validate required></paper-input>
         </lancie-form>
       </div>
       <div class="dialog-actions">
@@ -76,7 +76,7 @@ <h4>Are you certain you want to delete this ticket option?</h4>
       </div>
       <div class="dialog-actions">
         <paper-button dialog-dismiss>Cancel</paper-button>
-        <paper-button on-tap="tryOptionDelete" class="confirm-delete-button">Delete</paper-button>
+        <paper-button on-tap="tryDeleteOption" class="confirm-delete-button">Delete</paper-button>
       </div>
     </lancie-dialog>
   </template>
@@ -101,7 +101,7 @@ <h4>Are you certain you want to delete this ticket option?</h4>
               return {
                 possibleOptions: function(data) {
                   var text = data.reduce(function(text, t){
-                    return text + t.name + ' ' + t.price +', ';
+                    return `${text}${t.name} ${t.price}`.join(', ');
                   }, '');
                   return text.substr(0, text.length - 2);
                 },
@@ -110,54 +110,56 @@ <h4>Are you certain you want to delete this ticket option?</h4>
           }
         },
 
-        tryAddOption: function(e, request) {
-          this.$.addTicketOptionForm.validateAndSubmit();
+        openAddOptionDialog: function() {
           this.$.addTicketOptionForm.reset();
+          this.$.addTicketOptionDialog.open();
         },
 
-        openAddOptionDialog: function() {
+        tryAddOption: function(e, request) {
+          this.$.addTicketOptionForm.validateAndSubmit();
           this.$.addTicketOptionForm.reset();
-          this.$.addTicketOptionDialog.open();
         },
 
         onAddOptionResponse: function(e, request) {
-          if (request.succeeded) {
-            this.$.addTicketOptionDialog.close();
-            this.$.getOptionAjax.generateRequest();
-          } else {
-            this.$.addDialogError.setError("Could not add option. Please refresh and try again.")
+          if (!request.succeeded) {
+            this.$.addDialogError.setError("Could not add option. Please refresh and try again.");
+            return;
           }
+
+          this.$.addTicketOptionDialog.close();
+          this.$.getOptionAjax.generateRequest(); 
         },
 
         deleteTicketOptionDialog: function(event) {
-          this.deleteOption = this.options.filter(option => {
+          this.deleteOption = this.options.find(option => {
             return option.id === event.detail.id;
-          })[0];
+          });
           this.$.deleteTicketOptionDialog.open();
         },
 
-        tryOptionDelete: function() {
+        tryDeleteOption: function() {
           this.$.ajaxDeleteTicketOption.generateRequest();
         },
 
         onOptionDeleteResponse: function(e, request) {
-          if (request.succeeded) {
-            this.$.deleteCommitteeMemberDialog.close();
-            this.$.getOptionAjax.generateRequest(); // Ensures we have a mirror of the latest server state
-          } else {
-            this.$.dialogError.setError('Something went wrong! Please refresh and try again.')
+          if (!request.succeeded) {
+            this.$.dialogError.setError('Something went wrong! Please refresh and try again.');
+            return;
           }
+
+          this.$.deleteCommitteeMemberDialog.close();
+          this.$.getOptionAjax.generateRequest(); // Ensures we have a mirror of the latest server state
         },
 
         onOptionResponse: function(e, request) {
-          if (request.succeeded) {
-            this.fire('set-options', {'options': request.response})
-            this.options = request.response;
-          } else {
-            this.$.optionError.setError('Could not retrieve options. Please refresh and try again.')
-        }
-      }
+          if (!request.succeeded) {
+            this.$.optionError.setError('Could not retrieve options. Please refresh and try again.');
+            return;
+          }
 
+          this.fire('set-options', {'options': request.response});
+          this.options = request.response;
+        }
       });
     })();
   </script>
diff --git a/src/lancie-admin-endpoint/lancie-admin-pages/lancie-admin-types/lancie-admin-ticket-types.html b/src/lancie-admin-endpoint/lancie-admin-pages/lancie-admin-types/lancie-admin-ticket-types.html
index 668b378..d8e9054 100644
--- a/src/lancie-admin-endpoint/lancie-admin-pages/lancie-admin-types/lancie-admin-ticket-types.html
+++ b/src/lancie-admin-endpoint/lancie-admin-pages/lancie-admin-types/lancie-admin-ticket-types.html
@@ -41,7 +41,7 @@
 
     <lancie-ajax id="ajaxAddOptionToType" method="POST" body="[[getOptionBody(selectedOption)]]" refurl="tickets/types/[[selectedId]]/option"></lancie-ajax>
 
-    <lancie-ajax id="ajaxChangeBuyableOfType" method="POST" body="[[getBuyableBody(buyableBool)]]" refurl="tickets/types/[[selectedId]]/buyable"></lancie-ajax>
+    <lancie-ajax id="ajaxChangeBuyableOfType" method="PUT" body="[[getBuyableBody(selectedType)]]" refurl="tickets/tickettype/[[selectedId]]"></lancie-ajax>
 
     <paper-card heading="Tickets/types">
       <div class="card-content">
@@ -141,31 +141,22 @@ <h4>Buyable will be changed for the following Types:</h4>
             value: function() {
               return {
                 possibleOptions: function(data) {
-                  var text = data.reduce(function(text, t){
-                    return text + t.name + ' ' + t.price +', ';
-                  }, '');
-                  return text.substr(0, text.length - 2);
+                  return data.map(function(t){
+                    return `${t.name} ${t.price}`;
+                  }).join(', ');
                 },
               };
             }
           }
         },
 
-        onAddTypeResponse: function(e, request) {
-          if (request.succeeded) {
-            this.$.addTicketTypeDialog.close();
-            this.$.getTypeAjax.generateRequest();
-          } else {
-            this.$.addDialogError.setError("Could not add ticket type. Please refresh and try again.");
-          }
-        },
-
         onTypeResponse: function(e, request) {
-          if (request.succeeded) {
-            this.$.table.setData(request.response);
-          } else {
+          if (!request.succeeded) {
             this.$.optionError.setError('Could not retrieve ticket types. Please refresh and try again.');
+            return;
           }
+
+          this.$.table.setData(request.response);
         },
 
         openAddTypeDialog: function() {
@@ -174,8 +165,20 @@ <h4>Buyable will be changed for the following Types:</h4>
         },
 
         tryAddType: function(e, request) {
-          this.$.addTicketTypeForm.validateAndSubmit();
-          this.$.addTicketTypeForm.reset();
+          var valid =  this.$.addTicketTypeForm.validate();
+          if (valid) {
+            this.$.addTicketTypeForm.submit();
+            this.$.addTicketTypeForm.reset();
+          }
+        },
+
+        onAddTypeResponse: function(e, request) {
+          if (request.succeeded) {
+            this.$.addTicketTypeDialog.close();
+            this.$.getTypeAjax.generateRequest();
+          } else {
+            this.$.addDialogError.setError("Could not add ticket type. Please refresh and try again.");
+          }
         },
 
         openAddOptionToTypeDialog: function() {
@@ -208,14 +211,14 @@ <h4>Buyable will be changed for the following Types:</h4>
         },
 
         openChangeBuyableDialog: function() {
-          if (this.$.table.selected().length > 0) {
-            this.selectedTypes = this.$.table.selected();
-            this.$.noTypeSelectedError.clear();
-            this.$.typeSelected.render();
-            this.$.changeBuyableOfTypeDialog.open();
-          } else {
-            this.$.noTypeSelectedError.setError('Please select a type first.')
+          if (!this.$.table.selected().length > 0) {
+            this.$.noTypeSelectedError.setError('Please select a type first.');
+            return;
           }
+          this.selectedTypes = this.$.table.selected();
+          this.$.noTypeSelectedError.clear();
+          this.$.typeSelected.render();
+          this.$.changeBuyableOfTypeDialog.open();
         },
 
         tryChangeBuyableOfTypes: function() {
@@ -226,17 +229,27 @@ <h4>Buyable will be changed for the following Types:</h4>
         },
 
         tryChangeBuyableOfType: function(t) {
+          this.selectedType = t;
           this.selectedId = t.id;
           this.buyableBool = !t.buyable
           this.$.ajaxChangeBuyableOfType.generateRequest();
         },
 
         getOptionBody: function(selected) {
-          return '{"option": ' + JSON.stringify(selected) + '}';
+          return JSON.stringify(selected);
         },
 
         getBuyableBody: function(buyable) {
-          return '{"buyable": ' + buyable + '}'
+          return JSON.stringify({
+            "id": buyable.id,
+            "name": buyable.name,
+            "text": buyable.text,
+            "price": buyable.price,
+            "numberAvailable": buyable.numberAvailable,
+            "deadline": buyable.deadline,
+            "buyable": this.buyableBool,
+            "possibleOptions": buyable.possibleOptions
+          });
         }
 
       });

From f1f0dc11b06700cb49b339f948578bfd8b9bc998 Mon Sep 17 00:00:00 2001
From: bramvankooten <bram.vankooten@hotmail.com>
Date: Wed, 18 Dec 2019 16:08:35 +0100
Subject: [PATCH 8/9] More requested changes

---
 .../lancie-admin-ticket-options.html          | 12 ++---
 .../lancie-admin-ticket-types.html            | 44 +++++++++----------
 2 files changed, 27 insertions(+), 29 deletions(-)

diff --git a/src/lancie-admin-endpoint/lancie-admin-pages/lancie-admin-types/lancie-admin-ticket-options.html b/src/lancie-admin-endpoint/lancie-admin-pages/lancie-admin-types/lancie-admin-ticket-options.html
index 4e1e73b..8e87dad 100644
--- a/src/lancie-admin-endpoint/lancie-admin-pages/lancie-admin-types/lancie-admin-ticket-options.html
+++ b/src/lancie-admin-endpoint/lancie-admin-pages/lancie-admin-types/lancie-admin-ticket-options.html
@@ -100,10 +100,9 @@ <h4>Are you certain you want to delete this ticket option?</h4>
             value: function() {
               return {
                 possibleOptions: function(data) {
-                  var text = data.reduce(function(text, t){
-                    return `${text}${t.name} ${t.price}`.join(', ');
-                  }, '');
-                  return text.substr(0, text.length - 2);
+                  return data.map(function(t){
+                    return `${t.name} ${t.price}`;
+                  }).join(', ');
                 },
               };
             }
@@ -116,8 +115,9 @@ <h4>Are you certain you want to delete this ticket option?</h4>
         },
 
         tryAddOption: function(e, request) {
-          this.$.addTicketOptionForm.validateAndSubmit();
-          this.$.addTicketOptionForm.reset();
+          if (this.$.addTicketOptionForm.validateAndSubmit()) {
+            this.$.addTicketOptionForm.reset();
+          }
         },
 
         onAddOptionResponse: function(e, request) {
diff --git a/src/lancie-admin-endpoint/lancie-admin-pages/lancie-admin-types/lancie-admin-ticket-types.html b/src/lancie-admin-endpoint/lancie-admin-pages/lancie-admin-types/lancie-admin-ticket-types.html
index d8e9054..f0e8f49 100644
--- a/src/lancie-admin-endpoint/lancie-admin-pages/lancie-admin-types/lancie-admin-ticket-types.html
+++ b/src/lancie-admin-endpoint/lancie-admin-pages/lancie-admin-types/lancie-admin-ticket-types.html
@@ -63,12 +63,12 @@ <h2>Add Ticket Type</h2>
       <div class="dialog-content">
         <lancie-error id="addTypeDialogError"></lancie-error>
         <lancie-form id="addTicketTypeForm" refurl="tickets/types" on-response="onAddTypeResponse">
-          <paper-input label="Name" name="name" auto-validate required error-message="This field is required!"></paper-input>
-          <paper-input label="Text" name="text" auto-validate required error-message="This field is required!"></paper-input>
-          <paper-input label="Price" name="price" step=".01" type="number" auto-validate required error-message="This field is required!"></paper-input>
-          <paper-input label="Number Available" name="numberAvailable" type="number" auto-validate required error-message="This field is required!"></paper-input>
-          <paper-input label="Deadline" name="deadline" type="datetime-local" auto-validate required error-message="This field is required!"></paper-input>
-          <paper-dropdown-menu label="Buyable" name="buyable" auto-validate required error-message="This field is required!">
+          <paper-input label="Name" name="name" error-message="This field is required!" auto-validate required></paper-input>
+          <paper-input label="Text" name="text" error-message="This field is required!" auto-validate required></paper-input>
+          <paper-input label="Price" name="price" step=".01" type="number" error-message="This field is required!" auto-validate required></paper-input>
+          <paper-input label="Number Available" name="numberAvailable" type="number" error-message="This field is required!" auto-validate required></paper-input>
+          <paper-input label="Deadline" name="deadline" type="datetime-local" error-message="This field is required!" auto-validate required></paper-input>
+          <paper-dropdown-menu label="Buyable" name="buyable" error-message="This field is required!" auto-validate required>
             <paper-listbox slot="dropdown-content">
               <paper-item>true</paper-item>
               <paper-item>false</paper-item>
@@ -131,14 +131,13 @@ <h4>Buyable will be changed for the following Types:</h4>
           data: Object,
           mappings: {
             type: Object,
-            value: function() {
-              return {
-              };
+            value: () => {
+              return {};
             }
           },
           renderers: {
             type: Object,
-            value: function() {
+            value: () => {
               return {
                 possibleOptions: function(data) {
                   return data.map(function(t){
@@ -165,20 +164,20 @@ <h4>Buyable will be changed for the following Types:</h4>
         },
 
         tryAddType: function(e, request) {
-          var valid =  this.$.addTicketTypeForm.validate();
-          if (valid) {
-            this.$.addTicketTypeForm.submit();
+          if (this.$.addTicketTypeForm.validateAndSubmit()) {
             this.$.addTicketTypeForm.reset();
           }
         },
 
         onAddTypeResponse: function(e, request) {
-          if (request.succeeded) {
-            this.$.addTicketTypeDialog.close();
-            this.$.getTypeAjax.generateRequest();
-          } else {
+          if (!request.succeeded) {
             this.$.addDialogError.setError("Could not add ticket type. Please refresh and try again.");
-          }
+            return;
+            
+          } 
+
+          this.$.addTicketTypeDialog.close();
+          this.$.getTypeAjax.generateRequest();
         },
 
         openAddOptionToTypeDialog: function() {
@@ -231,25 +230,24 @@ <h4>Buyable will be changed for the following Types:</h4>
         tryChangeBuyableOfType: function(t) {
           this.selectedType = t;
           this.selectedId = t.id;
-          this.buyableBool = !t.buyable
           this.$.ajaxChangeBuyableOfType.generateRequest();
         },
 
         getOptionBody: function(selected) {
-          return JSON.stringify(selected);
+          return selected;
         },
 
         getBuyableBody: function(buyable) {
-          return JSON.stringify({
+          return {
             "id": buyable.id,
             "name": buyable.name,
             "text": buyable.text,
             "price": buyable.price,
             "numberAvailable": buyable.numberAvailable,
             "deadline": buyable.deadline,
-            "buyable": this.buyableBool,
+            "buyable": !buyable.buyable,
             "possibleOptions": buyable.possibleOptions
-          });
+          };
         }
 
       });

From c3fb50accb0aca8f87f2700a9888f79e05cc99bf Mon Sep 17 00:00:00 2001
From: Martijn Janssen <martijnjanssen@users.noreply.github.com>
Date: Thu, 19 Dec 2019 00:05:52 +0100
Subject: [PATCH 9/9] Remove newline

---
 .../lancie-admin-types/lancie-admin-ticket-types.html            | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/lancie-admin-endpoint/lancie-admin-pages/lancie-admin-types/lancie-admin-ticket-types.html b/src/lancie-admin-endpoint/lancie-admin-pages/lancie-admin-types/lancie-admin-ticket-types.html
index f0e8f49..c8de6a3 100644
--- a/src/lancie-admin-endpoint/lancie-admin-pages/lancie-admin-types/lancie-admin-ticket-types.html
+++ b/src/lancie-admin-endpoint/lancie-admin-pages/lancie-admin-types/lancie-admin-ticket-types.html
@@ -173,7 +173,6 @@ <h4>Buyable will be changed for the following Types:</h4>
           if (!request.succeeded) {
             this.$.addDialogError.setError("Could not add ticket type. Please refresh and try again.");
             return;
-            
           } 
 
           this.$.addTicketTypeDialog.close();