New desing

.gitignore

@@ -3,6 +3,8 @@
 # compiled output
 /dist
 /tmp
+.idea/
+package-lock.json
 
 # dependencies
 /node_modules

Brocfile.js

@@ -42,7 +42,7 @@ var app = new EmberApp({
 });
 
 // FileSaver
-app.import('bower_components/FileSaver.js/FileSaver.min.js');
+app.import('bower_components/FileSaver.js/dist/FileSaver.min.js');
 
 // PapaParse
 app.import('bower_components/papaparse/papaparse.min.js');

app/components/autocomplete-input-datlas.js

@@ -0,0 +1,150 @@
+import Ember from 'ember';
+const {computed, get, observer} = Ember;
+
+export default Ember.Component.extend({
+  i18n: Ember.inject.service(),
+  search: null,
+  placeHolder: null,
+  transitionProduct: 'transitionProduct',
+  transitionLocation: 'transitionLocation',
+  transitionIndustry: 'transitionIndustry',
+  transitionLocationProducts: 'transitionLocationProducts',
+  transitionAgproduct: 'transitionAgproduct',
+  transitionLivestock: 'transitionLivestock',
+  transitionNonag: 'transitionNonag',
+  transitionLanduse: 'transitionLanduse',
+  runSelect: computed('idSelect', 'type', 'data_search', 'placeHolder', 'search', 'i18n', function(){
+
+    let id_select = this.get('idSelect');
+    var $eventSelect = $(`#${id_select}`);
+    let type = this.get('type');
+    let self = this
+    var data = this.get('data_search')
+    var placeholder = this.get("placeHolder")
+
+
+
+    if(placeholder === null){
+      placeholder = this.get('i18n').t(`pageheader.search_placeholder.${type}`).string
+    }
+
+    data.unshift({ id: "", text: ""})
+
+    $eventSelect.select2({
+      placeholder: placeholder,
+      allowClear: true,
+      theme: 'bootstrap4',
+      language: this.get('i18n').display,
+      width: 'auto',
+      dropdownAutoWidth : true,
+      data: data,
+      containerCssClass: "flex-fill",
+      templateSelection: function (data, container) {
+        $(data.element).attr('data-key', data.key);
+        return data.text;
+      }
+    });
+
+    $eventSelect.on("select2:select", function (e) {
+
+      let id = $eventSelect.val();
+      let text= $(`#${id_select} option:selected`).text();
+      let type = self.get('type');
+
+      if(id !== ""){
+        if(type === 'location') {
+          self.sendAction('transitionLocation', id);
+        } else if (type === 'product') {
+          self.sendAction('transitionProduct', id);
+        } else if (type === 'industry') {
+          self.sendAction('transitionIndustry', id);
+        } else if (type === 'location-product') {
+          self.sendAction('transitionLocationProducts', id);
+        } else if (type === 'rural') {
+
+          var key = $(`#${id_select}`).find(':selected').data("key").replace('-', '')
+          var action = `transition${key.charAt(0).toUpperCase() + key.slice(1)}`
+
+          self.sendAction(action, id);
+
+        } else if (type == 'search') {
+          self.set('search', text);
+        }
+      }
+
+    });
+  }),
+  didInsertElement: function() {
+    Ember.run.scheduleOnce('afterRender', this , function() {
+
+      this.get("runSelect");
+
+    });
+  },
+  update: observer('i18n.display', 'data_search', function() {
+    let id_select = this.get('idSelect');
+    var $eventSelect = $(`#${id_select}`);
+    var placeholder = this.get("placeHolder")
+    let type = this.get('type');
+    var data = this.get('data_search')
+
+    if(placeholder === null){
+      placeholder = this.get('i18n').t(`pageheader.search_placeholder.${type}`).string
+    }
+
+    $eventSelect.select2({
+      placeholder: placeholder,
+      allowClear: true,
+      theme: 'bootstrap4',
+      language: this.get('i18n').display,
+      width: 'auto',
+      dropdownAutoWidth : true,
+      data: data,
+      containerCssClass: "flex-fill",
+      templateSelection: function (data, container) {
+        $(data.element).attr('data-key', data.key);
+        return data.text;
+      }
+    });
+
+    $eventSelect.on("select2:select", function (e) {
+
+      let id = $eventSelect.val();
+      let text= $(`#${id_select} option:selected`).text();
+      let type = self.get('type');
+
+      if(id !== ""){
+        if(type === 'location') {
+          self.sendAction('transitionLocation', id);
+        } else if (type === 'product') {
+          self.sendAction('transitionProduct', id);
+        } else if (type === 'industry') {
+          self.sendAction('transitionIndustry', id);
+        } else if (type === 'location-product') {
+          self.sendAction('transitionLocationProducts', id);
+        } else if (type === 'rural') {
+
+          var key = $(`#${id_select}`).find(':selected').data("key").replace('-', '')
+          var action = `transition${key.charAt(0).toUpperCase() + key.slice(1)}`
+
+          self.sendAction(action, id);
+
+        } else if (type === 'search') {
+          self.set('search', text);
+        }
+      }
+
+    });
+
+  }),
+  actions: {
+    reset: function() {
+      this.set('search', null);
+
+      let id_select = this.get('idSelect');
+      var $eventSelect = $(`#${id_select}`);
+      $eventSelect.val('');
+      $eventSelect.trigger('change');
+    }
+  }
+});

app/components/category-buttons.js

@@ -0,0 +1,112 @@
+import Ember from 'ember';
+const {computed, observer, get:get, set} = Ember;
+
+
+function getIcon(name){
+
+    if(name == "Vegetables, foodstuffs and wood"){
+        return {
+            icon: "fas fa-carrot",
+            color: "#880E4F"
+        }
+    }
+    else if(name == "Minerals"){
+        return {
+            icon: "fas fa-carrot",
+            color: "#311B92"
+        }
+    }
+    else if(name == "Chemicals and plastics"){
+        return {
+            icon: "fas fa-atom",
+            color: "#33691E"
+        }
+    }
+    else if(name == "Textiles and furniture"){
+        return {
+            icon: "fas fa-tshirt",
+            color: "#F57F17"
+        }
+    }
+    else if(name == "Stone and glass"){
+        return {
+            icon: "fas fa-glass-whiskey",
+            color: "#9C27B0"
+        }
+    }
+    else if(name == "Metals"){
+        return {
+            icon: "fas fa-industry",
+            color: "#29B6F6"
+        }
+    }
+    else if(name == "Machinery"){
+        return {
+            icon: "fas fa-industry",
+            color: "#FFEB3B"
+        }
+    }
+    else if(name == "Electronics"){
+        return {
+            icon: "fas fa-industry",
+            color: "#CE93D8"
+        }
+    }
+    else if(name == "Transport vehicles"){
+        return {
+            icon: "fas fa-industry",
+            color: "#1E88E5"
+        }
+    }
+    else{
+        return {
+            icon: "fas fa-industry",
+            color: "#1E88E5"
+        }
+    }
+}
+
+export default Ember.Component.extend({
+    i18n: Ember.inject.service(),
+    categoriesObject: computed('data', 'i18n.locale', function() {
+
+        var categories = this.get('data').map(item => {
+            return {
+                name: _.get(item, `parent_name_${this.get('i18n').display}`),
+                icon_color: getIcon(_.get(item, 'parent_name_en')),
+                hide: false,
+                isolate: false
+            }
+        }).filter((v,i,a)=>a.findIndex(t=>(t.name === v.name))===i)
+
+        return categories
+
+    }),
+    didInsertElement: function() {
+        Ember.run.scheduleOnce('afterRender', this, function() {
+
+            $('.category-button').on("mouseover", function(e) {
+
+                $(this).find("div.tooltip").removeClass("d-none")
+
+            })
+
+            $('.category-button').on("mouseleave", function(e) {
+                $(this).find("div.tooltip").addClass("d-none");
+            })
+
+        });
+    },
+    update: observer('i18n.display', function() {
+
+    }),
+    actions: {
+        check(index, attr) {
+
+            this.toggleProperty("checked");
+            var temp = this.get('categoriesObject').objectAt(index)
+            Ember.set(temp, attr, !_.get(temp, attr));
+
+        }
+    }
+});