Feature create ticket types

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",

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>

src/lancie-admin-endpoint/lancie-admin-pages/lancie-admin-types/lancie-admin-ticket-option.html

@@ -0,0 +1,79 @@
+<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;
+      }
+
+      .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>
+      <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>
+  <script>
+    (function() {
+      'use strict';
+
+      class LancieAdminTicketOption extends Polymer.Element {
+        static get is() {
+          return 'lancie-admin-ticket-option';
+        }
+
+        static get properties() {
+          return {
+            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);
+    })();
+  </script>
+</dom-module>

src/lancie-admin-endpoint/lancie-admin-pages/lancie-admin-types/lancie-admin-ticket-options.html

@@ -0,0 +1,166 @@
+<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" 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">
+        <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="tryDeleteOption" 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}`.join(', ');
+                  }, '');
+                  return text.substr(0, text.length - 2);
+                },
+              };
+            }
+          }
+        },
+
+        openAddOptionDialog: function() {
+          this.$.addTicketOptionForm.reset();
+          this.$.addTicketOptionDialog.open();
+        },
+
+        tryAddOption: function(e, request) {
+          this.$.addTicketOptionForm.validateAndSubmit();
+          this.$.addTicketOptionForm.reset();
+        },
+
+        onAddOptionResponse: function(e, request) {
+          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.find(option => {
+            return option.id === event.detail.id;
+          });
+          this.$.deleteTicketOptionDialog.open();
+        },
+
+        tryDeleteOption: function() {
+          this.$.ajaxDeleteTicketOption.generateRequest();
+        },
+
+        onOptionDeleteResponse: function(e, request) {
+          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.$.optionError.setError('Could not retrieve options. Please refresh and try again.');
+            return;
+          }
+
+          this.fire('set-options', {'options': request.response});
+          this.options = request.response;
+        }
+      });
+    })();
+  </script>
+</dom-module>