Initial Commit

assets/js/tax-rates.js

@@ -0,0 +1,385 @@
+/* eslint-disable no-lonely-if */
+/* global _, vuedraggable, Vue, wu_block_ui, ajaxurl, wu_tax_ratesl10n */
+(function($) {
+
+  $(document).ready(function() {
+
+    /**
+     * Vue
+     */
+    if ($('#wu-tax-rates').length) {
+
+      Vue.component('selectizer', {
+        props: [
+          'value',
+          'id',
+          'name',
+          'model',
+          'country',
+          'state',
+          'selected',
+          'options',
+          'placeholder',
+        ],
+        template: '<input v-bind="$props">',
+        updated() {
+
+          this.$nextTick(function() {
+
+            const options = jQuery(this.$el).data('__options');
+
+            if (options.data.country !== this.country) {
+
+              options.data.country = this.country;
+
+              jQuery(this.$el).data('__options', options);
+
+              this.$el.selectize.clear();
+
+              this.$el.selectize.clearOptions();
+
+            } // end if;
+
+            if (options.data.state !== this.state) {
+
+              options.data.state = this.state;
+
+              jQuery(this.$el).data('__options', options);
+
+            } // end if;
+
+          });
+
+        },
+        mounted() {
+
+          const that = this;
+
+          const item = this.$el;
+
+          window.wu_selector({
+            el: item,
+            maxItems: 1000,
+            options: this.options,
+            valueField: 'slug',
+            labelField: 'name',
+            searchField: ['slug', 'name'],
+            create: true,
+            templateName: 'checkout_form',
+            data: {
+              action: 'wu_search',
+              model: this.model,
+              country: this.country,
+              state: this.state,
+              number: 10,
+            },
+          });
+
+          this.$el.selectize.on('change', function(value) {
+
+            that.$emit('input', value);
+
+          });
+
+        },
+      });
+
+      window.wu_tax_rates = new Vue({
+        el: '#wu-tax-rates',
+        components: {
+          vuedraggable,
+        },
+        data() {
+
+          return {
+            dragging: false,
+            tax_category: 'default',
+            switching: false,
+            creating: false,
+            create_name: '',
+            toggle: false,
+            loading: true,
+            saving: false,
+            initialLoading: true,
+            error: false,
+            changed: false,
+            data: {
+              default: {
+                name: 'Default',
+                rates: [],
+              },
+            },
+            delete: [],
+            saveMessage: '',
+            errorMessage: '',
+            rate_type: 'standard_rate',
+            editing: 0,
+            item: {
+              title: wu_tax_ratesl10n.name,
+              country: '',
+              state: '',
+              tax_rate: '',
+              type: 'regular',
+              compound: false,
+            },
+          };
+
+        },
+        watch: {
+          loading(new_value) {
+
+            if (new_value === true) {
+
+              window.wu_blocked_table = wu_block_ui('table.wp-list-table');
+
+            } else {
+
+              if (typeof window.wu_blocked_table !== 'undefined') {
+
+                window.wu_blocked_table.unblock();
+
+              } // end if;
+
+            } // end if;
+
+          },
+        },
+        mounted() {
+
+          this.loading = true;
+
+          this.pull_data(true);
+
+          $('.wu-tooltip-vue').tipTip();
+
+          const vm = this;
+
+          this.$watch('data', function() {
+
+            if (vm.initialLoading) {
+
+              vm.initialLoading = false;
+
+              return;
+
+            }
+
+            vm.changed = true;
+
+          }, {
+            deep: true,
+          });
+
+        },
+        created() {
+
+          // Create the event.
+          const event = document.createEvent('Event');
+
+          // Define that the event name is 'build'.
+          event.initEvent('vue_loaded', true, true);
+
+          event.vue = this;
+
+          // target can be any Element or other EventTarget.
+          window.dispatchEvent(event);
+
+        },
+        computed: {
+          selected() {
+
+            return $(this.data[this.tax_category].rates).filter(function(index, item) {
+
+              return item.selected;
+
+            });
+
+          },
+        },
+        methods: {
+          refresh(e) {
+
+            e.preventDefault();
+
+            this.loading = true;
+
+            this.pull_data();
+
+          },
+          select_all(event) {
+
+            const toggle = $(event.target).is(':checked');
+
+            this.data[this.tax_category].rates = $.map(this.data[this.tax_category].rates, function(item) {
+
+              item.selected = toggle;
+
+              return item;
+
+            });
+
+          },
+          pull_data() {
+
+            const that = this;
+
+            jQuery.getJSON(ajaxurl + '?action=wu_get_tax_rates').done(function(response) {
+
+              that.loading = false;
+
+              that.data = response.data;
+
+            })
+              .fail(function(error) {
+
+                that.loading = false;
+
+                that.error = true;
+
+                that.errorMessage = error.statusText;
+
+              });
+
+          },
+          add_tax_category() {
+
+            this.data[this.create_name] = {
+              name: this.create_name,
+              rates: [],
+            };
+
+            this.creating = false;
+
+            this.tax_category = this.create_name;
+
+          },
+          add_row() {
+
+            Vue.set(this.data[this.tax_category], 'rates', this.data[this.tax_category].rates.concat([
+              {
+                title: wu_tax_ratesl10n.name,
+                country: '',
+                state: '',
+                tax_rate: '',
+                type: 'regular',
+                compound: false,
+              },
+            ]));
+
+            this.$forceUpdate();
+
+          },
+          delete_tax_category() {
+
+            // eslint-disable-next-line no-alert
+            const are_you_sure = confirm(wu_tax_ratesl10n.confirm_delete_tax_category_message);
+
+            const that = this;
+
+            if (are_you_sure) {
+
+              const cleaned_list = _.filter(this.data, function(item, index) {
+
+                return index !== that.tax_category;
+
+              });
+
+              that.data = cleaned_list.length ? cleaned_list : {
+                default: {
+                  name: 'Default',
+                  rates: [],
+                },
+              };
+
+              that.tax_category = Object.keys(that.data).shift();
+
+            } // end if
+
+          },
+          delete_rows() {
+
+            this.delete = this.delete.concat(this.selected.get());
+
+            // eslint-disable-next-line no-alert
+            const are_you_sure = confirm(wu_tax_ratesl10n.confirm_message);
+
+            if (are_you_sure) {
+
+              const cleaned_list = $(this.data[this.tax_category].rates).filter(function(index, item) {
+
+                return ! item.selected;
+
+              });
+
+              Vue.set(this.data[this.tax_category], 'rates', cleaned_list.get());
+
+              this.$forceUpdate();
+
+            } // end if
+
+          },
+          save() {
+
+            const that = this;
+
+            that.saving = true;
+
+            if (typeof that.data[that.tax_category].rates !== 'undefined') {
+
+              _.map(that.data[that.tax_category].rates, (item, index) => {
+
+                item.priority = index * 10;
+
+                return item;
+
+              });
+
+            }
+
+            $.post({
+              url: ajaxurl + '?action=wu_save_tax_rates&' + $('#nonce_form').serialize(),
+              data: JSON.stringify({
+                tax_rates: that.data,
+                tax_category: that.tax_category,
+              }),
+              dataType: 'json',
+              contentType: 'application/json; charset=utf-8',
+            }).success(function(data) {
+
+              that.saving = false;
+
+              that.changed = false;
+
+              that.delete = [];
+
+              that.saveMessage = data.message;
+
+              if (data.code === 'success') {
+
+                that.loading = true;
+
+                that.initialLoading = true;
+
+                that.pull_data();
+
+                that.tax_category = data.tax_category;
+
+              }
+
+              setInterval(function() {
+
+                that.saveMessage = '';
+
+              }, 6000);
+
+            });
+
+          },
+        },
+      });
+
+    } // end if;
+
+  });
+
+}(jQuery));