From 56d87de8565ca92742ef0dcc847b65c4d43f27a6 Mon Sep 17 00:00:00 2001
From: e_lar <elarb@users.noreply.github.com>
Date: Tue, 27 Mar 2018 23:04:22 +0200
Subject: [PATCH] Refactor profile edit form (#632)

* Add 'Other' to genders

* Refactor `lancie-profile-edit` to use ES6 syntax and improve styling

* Close my-area profile when unedited & fix ticket page next on profile
---
 src/lancie-my-area/lancie-profile-edit.html   | 175 ++++++++++++++++++
 src/lancie-my-area/my-area-profile.html       |   8 +-
 src/lancie-my-area/profile-edit-form.html     | 148 ---------------
 .../lancie-ticket-page.html                   |   8 +-
 4 files changed, 187 insertions(+), 152 deletions(-)
 create mode 100644 src/lancie-my-area/lancie-profile-edit.html
 delete mode 100644 src/lancie-my-area/profile-edit-form.html

diff --git a/src/lancie-my-area/lancie-profile-edit.html b/src/lancie-my-area/lancie-profile-edit.html
new file mode 100644
index 00000000..16890747
--- /dev/null
+++ b/src/lancie-my-area/lancie-profile-edit.html
@@ -0,0 +1,175 @@
+<link rel="import" href="../../bower_components/polymer/polymer-element.html">
+<link rel="import" href="../../bower_components/paper-input/paper-input.html">
+<link rel="import" href="../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html">
+<link rel="import" href="../../bower_components/paper-listbox/paper-listbox.html">
+<link rel="import" href="../../bower_components/neon-animation/web-animations.html">
+<link rel="import" href="../../bower_components/paper-item/paper-item.html">
+<link rel="import" href="../../bower_components/iron-icon/iron-icon.html">
+<link rel="import" href="../../bower_components/lancie-form/lancie-form.html">
+
+<link rel="import" href="../lancie-icons.html">
+
+<dom-module id="lancie-profile-edit">
+  <template>
+    <style>
+      :host {
+        display: block;
+        max-width: 500px;
+        --input-width: 200px;
+      }
+
+      .input-groups > div {
+        display: flex;
+        flex: 1;
+        flex-direction: row;
+        flex-wrap: wrap;
+        align-items: flex-start;
+      }
+      .group {
+        display: flex;
+        flex: 1;
+        flex-direction: row;
+        flex-wrap: wrap;
+        justify-content: space-between;
+      }
+
+      iron-icon {
+        padding: 8px;
+        margin: 24px 8px 0 0;
+      }
+
+      paper-dropdown-menu {
+        width: var(--input-width);
+      }
+
+      .dropdown-content {
+        min-width: 120px;
+      }
+
+      /*
+       Workaround for a bug that causes paper-input
+       with type="date" not being editable when empty
+       (PolymerElements/paper-input/issues/352).
+     */
+      paper-input[type="date"] {
+        --paper-input-container-input: {
+          min-height: 1px;
+        };
+        width: var(--input-width);
+      }
+    </style>
+
+    <lancie-form id="form" refurl="users/current/profile" on-response="onProfileUpdate" no-reset on-enter="_submit">
+      <div class="input-groups">
+        <div>
+          <iron-icon icon="lancie:account-circle"></iron-icon>
+          <div class="group">
+            <paper-input label="First Name" name="firstName" type="text" value="{{profile.firstName}}" required></paper-input>
+            <paper-input label="Last Name" name="lastName" type="text" value="{{profile.lastName}}" required></paper-input>
+            <paper-input label="Display Name" name="displayName" type="text" value="{{profile.displayName}}" required></paper-input>
+            <paper-dropdown-menu label="Gender" name="gender" required>
+              <paper-listbox class="dropdown-content" slot="dropdown-content" selected="{{profile.gender}}" attr-for-selected="data-value">
+                <paper-item data-value="MALE">MALE</paper-item>
+                <paper-item data-value="FEMALE">FEMALE</paper-item>
+                <paper-item data-value="OTHER">OTHER</paper-item>
+              </paper-listbox>
+            </paper-dropdown-menu>
+          </div>
+        </div>
+        <div>
+          <iron-icon icon="lancie:cake"></iron-icon>
+          <paper-input label="Birthday" name="birthday" type="date" value="{{profile.birthday}}" required></paper-input>
+        </div>
+        <div>
+          <iron-icon icon="lancie:phone"></iron-icon>
+          <paper-input label="Phone Number" name="phoneNumber" type="text" value="{{profile.phoneNumber}}" required></paper-input>
+        </div>
+        <div>
+          <iron-icon icon="lancie:location-on"></iron-icon>
+          <div class="group">
+            <paper-input label="Address" name="address" type="text" value="{{profile.address}}" required></paper-input>
+            <paper-input label="Zipcode" name="zipcode" type="text" value="{{profile.zipcode}}" required></paper-input>
+            <paper-input label="City" name="city" type="text" value="{{profile.city}}" required></paper-input>
+          </div>
+        </div>
+      </div>
+    </lancie-form>
+
+  </template>
+  <script>
+    class LancieProfileEdit extends Polymer.Element {
+      static get is() {
+        return 'lancie-profile-edit';
+      }
+      static get properties() {
+        return {
+          user: Object,
+          profile: Object,
+          profileChanged: Boolean,
+        };
+      }
+      static get observers() {
+        return ['_userChanged(user)', '_profileChanged(profile.*)'];
+      }
+      connectedCallback() {
+        super.connectedCallback();
+        this.profileChanged = false;
+      }
+      validateAndSubmit() {
+        if (this.profileChanged) {
+          return this.$.form.validateAndSubmit();
+        }
+
+        this.dispatchEvent(new CustomEvent('no-changes', {
+            bubbles: true,
+            composed: true
+        }));
+      }
+      validate() {
+        return this.$.form.validate();
+      }
+      onProfileUpdate(e, req) {
+        if (req.succeeded) {
+          this.set('user.profile', req.response.object);
+          this._submit();
+          this.dispatchEvent(new CustomEvent('profile-submitted', {
+            bubbles: true,
+            composed: true
+          }));
+          this._fireToast('Profile successfully updated!');
+          this.profileChanged = false;
+        } else {
+          if (req.request.status === 409) {
+            this._fireToast('Display name already in use');
+          } else {
+            this._fireToast('Profile update failed');
+          }
+          this.set('profile', this.user.profile);
+        }
+      }
+      _userChanged(user) {
+        if (!!user && !this.profile) {
+          this.profile = user.profile;
+        }
+      }
+      _profileChanged(profile) {
+        this.profileChanged = true;
+      }
+      _submit() {
+        this.dispatchEvent(new CustomEvent('profile-form-submit', {
+          bubbles: true,
+          composed: true
+        }));
+      }
+      _fireToast(text) {
+        this.dispatchEvent(new CustomEvent('toast', {
+          detail: {text},
+          bubbles: true,
+          composed: true
+        }));
+      }
+    }
+    customElements.define(LancieProfileEdit.is, LancieProfileEdit);
+
+  </script>
+</dom-module>
diff --git a/src/lancie-my-area/my-area-profile.html b/src/lancie-my-area/my-area-profile.html
index 33a3a979..5bb82d92 100644
--- a/src/lancie-my-area/my-area-profile.html
+++ b/src/lancie-my-area/my-area-profile.html
@@ -10,7 +10,7 @@
 <link rel="import" href="../../bower_components/lancie-ajax/lancie-ajax.html">
 <link rel="import" href="../../bower_components/lancie-login-form/lancie-passwords.html">
 <link rel="import" href="../lancie-icons.html">
-<link rel="import" href="profile-edit-form.html">
+<link rel="import" href="lancie-profile-edit.html">
 
 <dom-module id="my-area-profile">
   <template>
@@ -89,7 +89,7 @@
             </div>
           </div>
         </div>
-        <profile-edit-form id="profileForm" hidden$="[[!editingProfile]]" user={{user}} on-profile-form-submit="submitEdit"></profile-edit-form>
+        <lancie-profile-edit id="profileForm" hidden$="[[!editingProfile]]" user={{user}} on-profile-form-submit="submitEdit" on-no-changes="noChanges"></lancie-profile-edit>
 
         <hr>
         <div class="layout horizontal center">
@@ -178,6 +178,10 @@
         }
       },
 
+      noChanges: function() {
+        this.switchProfileForm();
+      },
+
       onPasswordUpdate: function(e, request) {
         if (request.succeeded) {
           this.fire('toast', {text: 'Password updated.'});
diff --git a/src/lancie-my-area/profile-edit-form.html b/src/lancie-my-area/profile-edit-form.html
deleted file mode 100644
index da2978a8..00000000
--- a/src/lancie-my-area/profile-edit-form.html
+++ /dev/null
@@ -1,148 +0,0 @@
-<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/paper-input/paper-input.html">
-<link rel="import" href="../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html">
-<link rel="import" href="../../bower_components/paper-item/paper-icon-item.html">
-<link rel="import" href="../../bower_components/paper-listbox/paper-listbox.html">
-<link rel="import" href="../../bower_components/neon-animation/web-animations.html">
-<link rel="import" href="../../bower_components/paper-item/paper-item.html">
-
-<link rel="import" href="../../bower_components/lancie-form/lancie-form.html">
-
-<link rel="import" href="../lancie-icons.html">
-
-<dom-module id="profile-edit-form">
-  <template>
-    <style include="iron-flex iron-flex-alignment iron-flex-factors">
-      :host {
-        display: block;
-        --paper-input-min-width: 200px;
-      }
-
-      iron-icon {
-        margin-right: 8px;
-        min-width: 24px;
-      }
-
-      paper-input, paper-dropdown-menu {
-        min-width: var(--paper-input-min-width);
-        margin-right: 50px;
-      }
-
-      paper-input ::content input::-webkit-inner-spin-button {
-        display: none;
-      }
-
-      /*
-      Workaround for a bug that causes paper-input
-      with type="date" not being editable when empty
-      (PolymerElements/paper-input/issues/352).
-      */
-      paper-input[type="date"] {
-        --paper-input-container-input: {
-          min-height: 1px;
-        };
-      }
-
-      .dropdown-content {
-        min-width: 200px;
-      }
-
-      /*
-      * Safari hack
-      * Makes flex wrapping work
-      */
-      .flex, .flex-1, .flex-2, .flex-3 {
-        flex-basis: var(--card-min-width);
-      }
-      /*End Safari hack*/
-    </style>
-
-    <lancie-form id="form" refurl="users/current/profile" on-response="onProfileUpdate" no-reset on-enter="fireSubmitEvent">
-      <div class="layout horizontal center">
-        <iron-icon icon="lancie:account-circle" item-icon></iron-icon>
-        <div class="layout horizontal wrap flex">
-          <paper-input label="First Name" name="firstName" type="text" value="{{profile.firstName}}" class="flex" required></paper-input>
-          <paper-input label="Last Name" name="lastName" type="text" value="{{profile.lastName}}" class="flex" required></paper-input>
-          <paper-input label="Display Name" name="displayName" type="text" value="{{profile.displayName}}" required></paper-input>
-          <paper-dropdown-menu class="flex" label="Gender" name="gender" required>
-            <paper-listbox class="dropdown-content" slot="dropdown-content" selected="{{user.profile.gender}}" attr-for-selected="data-value">
-              <paper-item data-value="MALE">MALE</paper-item>
-              <paper-item data-value="FEMALE">FEMALE</paper-item>
-            </paper-listbox>
-          </paper-dropdown-menu>
-        </div>
-      </div>
-      <div class="layout horizontal center">
-        <iron-icon icon="lancie:cake" item-icon></iron-icon>
-        <div class="item flex">
-          <paper-input label="Birthday" name="birthday" type="date" placeholder="YYYY-MM-DD" value="{{profile.birthday}}" required></paper-input>
-        </div>
-      </div>
-      <div class="layout horizontal center">
-        <iron-icon icon="lancie:phone" item-icon></iron-icon>
-        <div class="flex">
-          <paper-input label="Phone Number" name="phoneNumber" type="text" value="{{profile.phoneNumber}}" required></paper-input>
-        </div>
-      </div>
-      <div class="layout horizontal center">
-        <iron-icon icon="lancie:location-on" item-icon></iron-icon>
-        <div class="layout horizontal wrap flex">
-          <paper-input label="Address" name="address" type="text" value="{{profile.address}}" class="flex-3" required></paper-input>
-          <paper-input label="Zipcode" name="zipcode" type="text" value="{{profile.zipcode}}" class="flex" required></paper-input>
-          <paper-input label="City" name="city" type="text" value="{{profile.city}}" class="flex-3" required></paper-input>
-        </div>
-      </div>
-    </lancie-form>
-
-  </template>
-  <script>
-  'use strict';
-
-  (function() {
-    Polymer({
-      is: 'profile-edit-form',
-      properties: {
-        user: {
-          type: Object,
-          observer: '_changed',
-        },
-        profile: Object,
-      },
-
-      validateAndSubmit: function() {
-        return this.$.form.validateAndSubmit();
-      },
-
-      validate: function() {
-        return this.$.form.validate();
-      },
-
-      onProfileUpdate: function(e, request) {
-        if (request.succeeded) {
-          this.set('user.profile', request.response.object);
-          this.fire('toast', {text: 'Profile updated successfully.'});
-          this.fire('profile-submitted');
-        } else {
-          if (request.request.status === 409) {
-            this.fire('toast', {text: 'Displayname already in use.'});
-          } else {
-            this.fire('toast', {text: 'Profile updated failed.'});
-          }
-          this.set('profile', this.user.profile);
-        }
-      },
-
-      _changed: function(user) {
-        if (!!user && !this.profile) {
-          this.profile = user.profile;
-        }
-      },
-
-      fireSubmitEvent: function () {
-          this.fire('profile-form-submit');
-      }
-    });
-  })();
-  </script>
-</dom-module>
diff --git a/src/lancie-ticket-page/lancie-ticket-page.html b/src/lancie-ticket-page/lancie-ticket-page.html
index 92cdfbf0..ad1255ba 100644
--- a/src/lancie-ticket-page/lancie-ticket-page.html
+++ b/src/lancie-ticket-page/lancie-ticket-page.html
@@ -16,7 +16,7 @@
 <link rel="import" href="lancie-tickets.html">
 <link rel="import" href="lancie-ticket-basket.html">
 <link rel="import" href="lancie-terms-of-service-text.html">
-<link rel="import" href="../lancie-my-area/profile-edit-form.html">
+<link rel="import" href="../lancie-my-area/lancie-profile-edit.html">
 <link rel="import" href="../lancie-storage/lancie-order-storage.html">
 <link rel="import" href="../lancie-login/lancie-login.html">
 
@@ -78,6 +78,10 @@
         pointer-events: none;
       }
 
+      lancie-profile-edit {
+        margin: 0 auto;
+      }
+
       @media(max-width: 500px) {
         :host{
           padding: 0;
@@ -131,7 +135,7 @@
 
         <div>
           <h2>Fill in your profile</h2>
-          <profile-edit-form id="profileForm" user="{{user}}" on-profile-submitted="profileConfirmed"></profile-edit-form>
+          <lancie-profile-edit id="profileForm" user="{{user}}" on-profile-submitted="profileConfirmed" on-no-changes="profileConfirmed"></lancie-profile-edit>
         </div>
 
         <div>