Initial Commit

assets/js/edit-placeholders.js

@@ -0,0 +1,231 @@
+/* eslint-disable no-lonely-if */
+/* global Vue, wu_block_ui, ajaxurl, wu_placeholdersl10n */
+(function($) {
+
+  $(document).ready(function() {
+
+    /**
+     * Vue
+     */
+    if ($('#wu-template-placeholders').length) {
+
+      window.wu_placeholders = new Vue({
+        el: '#wu-template-placeholders',
+        data: {
+          tax_category: 'default',
+          switching: false,
+          creating: false,
+          create_name: '',
+          toggle: false,
+          loading: true,
+          saving: false,
+          initialLoading: true,
+          error: false,
+          changed: false,
+          data: {
+            placeholders: [],
+          },
+          delete: [],
+          saveMessage: '',
+          errorMessage: '',
+          rate_type: 'standard_rate',
+        },
+        watch: {
+          data: {
+            deep: true,
+            handler() {
+
+              if (this.initialLoading) {
+
+                this.initialLoading = false;
+
+                return;
+
+              }
+
+              this.changed = true;
+
+            },
+          },
+          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();
+
+        },
+        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.placeholders).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.placeholders = $.map(this.data.placeholders, function(item) {
+
+              item.selected = toggle;
+
+              return item;
+
+            });
+
+          },
+          pull_data() {
+
+            const that = this;
+
+            jQuery.getJSON(ajaxurl + '?action=wu_get_placeholders').done(function(response) {
+
+              that.loading = false;
+
+              that.data = response.data;
+
+            })
+              .fail(function(error) {
+
+                that.loading = false;
+
+                that.error = true;
+
+                that.errorMessage = error.statusText;
+
+              });
+
+          },
+          add_row() {
+
+            Vue.set(this.data, 'placeholders', this.data.placeholders.concat([
+              {
+                placeholder: '',
+                content: '',
+                selected: false,
+              },
+            ]));
+
+            this.$forceUpdate();
+
+          },
+          delete_rows() {
+
+            this.delete = this.delete.concat(this.selected.get());
+
+            // eslint-disable-next-line no-alert
+            const are_you_sure = confirm(wu_placeholdersl10n.confirm_message);
+
+            if (are_you_sure) {
+
+              const cleaned_list = $(this.data.placeholders).filter(function(index, item) {
+
+                return ! item.selected;
+
+              });
+
+              Vue.set(this.data, 'placeholders', cleaned_list.get());
+
+              this.$forceUpdate();
+
+            } // end if
+
+          },
+          save() {
+
+            const that = this;
+
+            that.saving = true;
+
+            $.post({
+              url: ajaxurl + '?action=wu_save_placeholders&' + $('#nonce_form').serialize(),
+              data: JSON.stringify({
+                placeholders: that.data.placeholders,
+              }),
+              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();
+
+              }
+
+              setInterval(function() {
+
+                that.saveMessage = '';
+
+              }, 6000);
+
+            });
+
+          },
+        },
+      });
+
+    } // end if;
+
+  });
+
+}(jQuery));