From 331fd75570ae748602b832d676cc838307925cea Mon Sep 17 00:00:00 2001
From: fafcrumb <bri.ferch@gmail.com>
Date: Wed, 19 Oct 2016 00:05:30 -0400
Subject: [PATCH] refine(data-elements) sharing with monostate objects

reworked user-data and countries-data to use a monostate
pattern. What this does is allow the data recieved from etools-ajax
to be shared with sub-sequent stamps of the element, reducing
performance cost of stamping.
A similar but more complicated approach was used for the now
unused etool-data element.
---
 src/app-config/etools-app-config.html         |  12 +-
 .../countries-data/countries-data.html        |  63 ++++--
 src/app-elements/etools-data/etools-data.html | 136 -------------
 src/app-elements/user-data/user-data.html     | 179 +++++++++---------
 src/pages/page-section1.html                  |   5 -
 5 files changed, 137 insertions(+), 258 deletions(-)
 delete mode 100644 src/app-elements/etools-data/etools-data.html

diff --git a/src/app-config/etools-app-config.html b/src/app-config/etools-app-config.html
index fcbde7f..35059b0 100644
--- a/src/app-config/etools-app-config.html
+++ b/src/app-config/etools-app-config.html
@@ -2,7 +2,7 @@
 App global configuration
 -->
 <link rel="import" href="../../bower_components/etools-dexiejs/etools-dexiejs.html">
-<link rel="import" href="../app-elements/lodash/lodash.html">
+<link rel="import" href="../../scripts/lodash/lodash.html">
 
 <script>
     'use strict';
@@ -17,7 +17,7 @@
       // app endpoints
       endpoints: {
         userInfo: {
-          template: '/users/api/profile/',
+          url: '/users/api/profile/',
           exp: 30 * 60 * 1000, // 30min
           cachingKey: 'userData'
         },
@@ -53,6 +53,8 @@
 
       // permissions
       permissions: {
+        superPermissions: ['loggedInDefault', 'userInfoMenu',
+                           'interventionsMenu', 'statsMenu'], //for testing
         partnerOnlyPermissions: ['interventionsMenu'],
         defaultPermissions: ['loggedInDefault','userInfoMenu'],
         partnerPermissions: ['interventionsMenu'],
@@ -70,10 +72,4 @@
       countries: 'id, name'
     });
 
-    /**
-     * test endpoint url generation using _.template
-     */
-    console.log(etoolsAppConfig.globals.getEndpoint('testTemplateEndpointUse', {id: 13}).url,
-        etoolsAppConfig.globals.getEndpoint('countries').url);
-
 </script>
diff --git a/src/app-elements/countries-data/countries-data.html b/src/app-elements/countries-data/countries-data.html
index 2810417..108f8bb 100644
--- a/src/app-elements/countries-data/countries-data.html
+++ b/src/app-elements/countries-data/countries-data.html
@@ -1,43 +1,70 @@
 <link rel="import" href="../../../bower_components/polymer/polymer.html">
 <link rel="import" href="../../../bower_components/etools-ajax/etools-ajax.html">
-<link rel="import" href="../../app-elements/lodash/lodash.html">
-
 
 <dom-module id="countries-data">
+
   <template>
+
     <etools-ajax id="ajax"
                  endpoint="[[endpoint]]"
                  on-success="_handleResponse"
                  caching-storage="dexie"></etools-ajax>
+
   </template>
 
   <script>
 
-      Polymer({
+    var _data = {};
+    var _countryEls = [];
 
-        is: 'countries-data',
+    var _setCountryData = function(data) {
+      _data.countries = data || {};
+      this.load(_data);
+      _countryEls.forEach(function(el) {
+        if (el !== this) { el.load(_data); }
+      });
+    };
+
+    Polymer({
 
-        properties: {
+      is: 'countries-data',
 
-          countries: {
-            type: Array,
-            value: null,
-            notify: true
-          }
+      properties: {
 
-        },
+        countries: {
+          type: Array,
+          readOnly: true,
+          notify: true
+        }
 
-        ready: function() {
+      },
+
+      ready: function() {
+        this.load(_data);
+      },
+
+      attached: function() {
+        if (_countryEls.length === 0 && !_data.countries) {
           this.endpoint = etoolsAppConfig.globals.getEndpoint('countries');
-        },
+        }
+        _countryEls.push(this);
+      },
 
-        _handleResponse: function(response) {
-          if (!_.isEmpty(response.detail)) {
-            this.set('countries', response.detail);
-          }
+      detached: function() {
+        _countryEls.splice(_countryEls.indexOf(this), 1);
+      },
+
+      load: function(data) {
+        if (data.countries) {
+          this._setCountries(data.countries);
         }
+      },
 
-      });
+      _handleResponse: function(res) {
+        _setCountryData.bind(this)(res.detail);
+      }
+
+    });
 
   </script>
 
diff --git a/src/app-elements/etools-data/etools-data.html b/src/app-elements/etools-data/etools-data.html
deleted file mode 100644
index 485db51..0000000
--- a/src/app-elements/etools-data/etools-data.html
+++ /dev/null
@@ -1,136 +0,0 @@
-<link rel="import" href="../../../bower_components/polymer/polymer.html">
-<link rel="import" href="../../../bower_components/etools-ajax/etools-ajax.html">
-
-<dom-module id="etools-data">
-
-  <template>
-    <etools-ajax id="ajax" endpoint="[[endpoint]]" on-success="_handleResponse" logs="true"></etools-ajax>
-  </template>
-
-  <script>
-
-    var _data = {};
-    var _els = [];
-    var _i = 0;
-
-    // When an ajax response is recieved (or when data loaded from lokijs?)
-    // sets global _data.key, and loads the new data for each instance
-    // of etools-data
-    var _setMetaData = function(key, data) {
-      if (data) {
-        _data[key] = data;
-      }
-
-      _.each(_els, function(el) {
-        el.load(_data, key);
-      });
-    };
-
-    Polymer({
-
-      is: 'etools-data',
-
-      properties: {
-        countries: {
-          type: Array,
-          notify: true
-        }
-      },
-      observers: ['_dataChanged(countries.*)'],
-
-      // Loads all data currently in global _data
-      ready: function() {
-        // load global data
-        this.load(_data);
-      },
-
-      attached: function() {
-        // If there are no etools-data instaces attached, and no global
-        // _data, make ajax requests for first-stamp data.
-        if (this._emptyData()) {
-          this._getCountries();
-        }
-
-        // Add this etools-data instance
-        _els.push(this);
-      },
-
-      detached: function() {
-        // Remove this etools-data instance when detached
-        // from the document to prevent redundant loading
-        _els.splice(_els.indexOf(this), 1);
-      },
-
-      hostAttributes: {
-        hidden: true
-      },
-
-      // Loads the given property if provided, otherwise loads
-      // all properties
-      load: function(data, property) {
-        if (!_.isEmpty(data)) {
-          if (property) {
-            this.set(property, data[property]);
-          } else {
-            Object.keys(this.properties).forEach(function(property) {
-              this.set(property, data[property]);
-            }.bind(this));
-          }
-        }
-      },
-
-      // The logic here is sound but a little rough around
-      // the edges. Basically, changing the data on one element
-      // changes it for every other element, BUT other elements aren't
-      // NOTIFIED of the change until the change event is fired on them.
-      // References to every stamped instance of etools-data are stored in _els.
-      // I loop through these and fire the event on each one.
-      _dataChanged: function(info) {
-        var propertyName = info.path.split('.', 1)[0];
-        var eventName = propertyName + '-changed';
-
-        // _i ensures when other elements are notified of the change,
-        // they don't start their own loop and end up firing an exponential
-        // amount of events.
-        // Checking the path here ensures calls to the load function
-        // don't trigger this loop.
-        if (_i === 0 && !info.path.endsWith(propertyName)) {
-          _.each(_els, function(el) {
-            if (el !== this) {
-              el.fire(eventName, info);
-            }
-            _i++;
-          }.bind(this));
-        }
-        if (_i === _els.length) {
-          _i = 0;
-        }
-      },
-
-      _emptyData: function() {
-          return _els.length === 0 && _.isEmpty(_data);
-      },
-
-      _getCountries: function() {
-        /**
-         * get countries data
-         */
-        this.$.ajax.alternateDexieDb = etoolsAppConfig.appDexieDb;
-        this.$.ajax.dexieDbCollection = 'countries';
-        this.endpoint = etoolsAppConfig.endpoints.countries;
-      },
-
-      // Extracts the property to load from the
-      // params of the response, and then calls
-      // setMetaData
-      _handleResponse: function(response) {
-        console.log('response: ', response);
-        if (!_.isEmpty(response.detail)) {
-          _setMetaData('countries', response.detail);
-        }
-      },
-    });
-
-  </script>
-
-</dom-module>
diff --git a/src/app-elements/user-data/user-data.html b/src/app-elements/user-data/user-data.html
index e372c1f..5cf82c5 100644
--- a/src/app-elements/user-data/user-data.html
+++ b/src/app-elements/user-data/user-data.html
@@ -1,127 +1,124 @@
 <link rel="import" href="../../../bower_components/polymer/polymer.html">
 <link rel="import" href="../../../bower_components/etools-ajax/etools-ajax.html">
+<link rel="import" href="../../../scripts/lodash/lodash.html">
 
 <dom-module id="user-data">
+
   <template>
+
     <etools-ajax id="ajax"
                  endpoint="[[endpoint]]"
-                 on-success="_handleUserResponse"
+                 on-success="_handleResponse"
                  on-fail="_handleError"
                  caching-storage="dexie"></etools-ajax>
   </template>
-</dom-module>
 
-<script>
-  (function() {
-    'use strict';
+  <script>
+
+    var _data = {};
+    var _userEls = [];
+
+    var _setUserData = function(data) {
+      _data.user = data || {};
+      _data.permissions = {};
+      var permissions = this.getAllPermissions();
+
+      if (!_.isEmpty(data)) {
+
+        permissions.defaultPermissions.forEach(function(perm) {
+          _data.permissions[perm] = true;
+        });
+        // if partner: (!staff)
+        if (!_data.user.is_staff) {
+          permissions.partnerOnlyPermissions.forEach(function(perm) {
+            _data.permissions[perm] = true;
+          });
+        } else {
+          // user is not partner but staff:
+          permissions.managementPermissions.forEach(function(perm) {
+            _data.permissions[perm] = true;
+          });
+
+          if (_data.user.profile.partner_staff_member) {
+            // staff that has faked partnership by setting partner_staff_member on their profile
+            permissions.partnerPermissions.forEach(function(perm) {
+              _data.permissions[perm] = true;
+            });
+          }
+        }
+      } else {
+        //for testing
+        console.log('setting super permissions');
+        permissions.superPermissions.forEach(function(perm) {
+          _data.permissions[perm] = true;
+        });
+      }
+
+      this.load(_data);
+      _userEls.forEach(function(el) {
+        if (el !== this) { el.load(_data); }
+      });
+    };
+
     Polymer({
+
       is: 'user-data',
+
       behaviors: [etoolsAppConfig.globals],
+
       properties: {
+
         user: {
           type: Object,
-          notify: true,
-          value: function() {
-            return {};
-          }
+          readOnly: true,
+          notify: true
         },
+
         permissions: {
           type: Object,
+          readOnly: true,
           notify: true,
-          value: function() {
-            return {
-              default: true
-            };
-          }
         }
+
       },
+
       ready: function() {
-        this.endpoint = this.getEndpoint('userInfo', {});
+        this.load(_data);
       },
-      _setDefaultUser: function() {
-        var defaultUser = {
-          'id': null,
-          'profile': {
-            'office': null,
-            'section': null,
-            'country_name': 'UAT',
-            'partner_staff_member': null,
-            'job_title': null,
-            'phone_number': null,
-            'installation_id': null,
-            'country': 1,
-            'country_override': null
-          },
-          'last_login': '2015-12 04T19:24:08.714193Z',
-          'is_superuser': false,
-          'username': 'emaill@example.com',
-          'first_name': 'Anonymous',
-          'last_name': 'User',
-          'email': 'email@example.com',
-          'is_staff': false,
-          'is_active': true,
-          'date_joined': '2015-12-03T16:17:01Z'
-        };
-        var defaultPermissions = {
-          default: true
-        };
-        console.log('setting default user');
-        this.user = defaultUser;
-        console.log('setting default permissions');
-        this.permissions = defaultPermissions;
-
-        // For testing only:
-        // if (defaultUser.id){
-        //   this._setPermissions(this.user);
-        // }
+
+      attached: function() {
+        if (_userEls.length === 0 && !_data.user) {
+          this.endpoint = this.getEndpoint('userInfo');
+        }
+        _userEls.push(this);
       },
 
-      _handleError: function(rsp, err) {
-        console.log(rsp);
-        console.log(err);
-        this._setDefaultUser();
+      detached: function() {
+        _userEls.splice(_userEls.indexOf(this), 1);
       },
 
-      _handleUserResponse: function(rsp) {
-        // TODO: check response to make sure it contains a valid user
-        if (!_.isEmpty(rsp.detail)) {
-          this.user = rsp.detail;
-          this._setPermissions(this.user);
-        } else {
-          this._setDefaultUser();
+      load: function(data) {
+        //console.log(data);
+        if (data.user) {
+          this._setUser(data.user);
+          this._setPermissions(data.permissions);
         }
       },
 
-      _setPermissions: function(user) {
-        var permissions = {};
-        var allPermissions = this.getAllPermissions();
-        // add all default permissions (while testing these are set to all permissions)
-        var defaultPermissions = allPermissions.defaultPermissions;
+      _handleResponse: function(res) {
+        // TODO: check response to make sure it contains a valid user
+        console.log('resp');
+        _setUserData.bind(this)(res.detail);
+      },
 
-        defaultPermissions.forEach(function(perm) {
-          permissions[perm] = true;
-        });
-        // if partner: (!staff)
-        if (!user.is_staff) {
-          allPermissions.partnerOnlyPermissions.forEach(function(perm) {
-            permissions[perm] = true;
-          });
-        } else {
-          // user is not partner but staff:
-          allPermissions.managementPermissions.forEach(function(perm) {
-            permissions[perm] = true;
-          });
-          if (user.profile.partner_staff_member) {
-            // staff that has faked partnership by setting partner_staff_member on their profile
-            allPermissions.partnerPermissions.forEach(function(perm) {
-              permissions[perm] = true;
-            });
-          }
-        }
+      _handleError: function(rsp, err) {
+        console.log(rsp);
+        console.log(err);
+        _setUserData.bind(this)(null);
+      },
 
-        this.set('permissions', permissions);
-      }
     });
-  })();
 
-</script>
\ No newline at end of file
+  </script>
+
+</dom-module>
diff --git a/src/pages/page-section1.html b/src/pages/page-section1.html
index 8e51de5..31c9646 100644
--- a/src/pages/page-section1.html
+++ b/src/pages/page-section1.html
@@ -2,8 +2,6 @@
 <link rel="import" href="../../bower_components/paper-tabs/paper-tab.html">
 <link rel="import" href="../../bower_components/paper-tabs/paper-tabs.html">
 
-<link rel="import" href="../app-elements/countries-dropdown/countries-dropdown.html">
-
 <link rel="import" href="../../styles/shared-styles.html">
 
 <dom-module id="page-section1">
@@ -64,9 +62,6 @@
         <paper-material elevation="1">
           <h1 hidden$="{{!tab1Active}}">Tab 1 Content</h1>
           <h1 hidden$="{{!tab2Active}}">Tab 2 Content</h1>
-
-          <countries-dropdown></countries-dropdown>
-          
         </paper-material>
 
       </div>