Well done

Wonder why not making a pro version, its so good.

Here is a snippet I made, to add a couple features I needed 1. it adds a modal button so its easier to edit data and 2. it starts with a default filter (manually replace the wp_jet_cctin the code with your value). Absolutely untested.

Would be nice to be able to jump from one field to another by pressing arrows.

add_action('admin_footer', 'my_sql_buddy_script');

function my_sql_buddy_script() {
  $current_screen = get_current_screen();
  // Only run the script on the specific admin page
  if ($current_screen->base === 'tools_page_sql-buddy-dashboard') {
  ?>
  <style>
    .modal {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.7);
      z-index: 9999;
    }
    .modal-content {
      position: relative;
      margin: auto;
      top: 50px;
      width: 65%;
      max-height: calc(100% - 100px);
      overflow: auto;
      background-color: white;
      border: 2px solid #ccc;
      padding: 20px;
    }
  </style>
  <script type="text/javascript">
    jQuery(document).ready(function($) {
      let isModal = false;

      const checkForDivs = () => {
        const sideDrawerDiv = $('.SideDrawer__Drawer-sc-e94xql-0.bJHKLb');
        const innerDiv = $('.inner');
        if (sideDrawerDiv.length && innerDiv.length) {
          if (sideDrawerDiv.find('button.open-modal').length === 0 && !isModal) {
            addOpenButton(sideDrawerDiv);
          }
        }
      };

      const addOpenButton = (targetDiv) => {
        const openButton = $('<button class="open-modal">Open Modal</button>');
        openButton.click(openModal);
        targetDiv.prepend(openButton);
      };

      const addCloseButton = (targetDiv) => {
        const closeButton = $('<button>Close Modal</button>');
        closeButton.click(closeModal);
        targetDiv.prepend(closeButton);
      };

      const openModal = () => {
        $('button.open-modal').remove();
        $('body').append('<div class="modal"><div class="modal-content"></div></div>');
        $('.modal-content').html($('.SideDrawer__Drawer-sc-e94xql-0.bJHKLb').html());
        addCloseButton($('.modal-content'));
        $('.modal').show();
        $(document).on('keydown', handleEscape);
        $('.modal').on('click', handleClickOutside);
        isModal = true;
      };

      const closeModal = () => {
        $('.modal').remove();
        $(document).off('keydown', handleEscape);
        isModal = false;
        checkForDivs();
      };

      const handleEscape = (e) => {
        if (e.key === 'Escape') {
          closeModal();
        }
      };

      const handleClickOutside = (e) => {
        if ($(e.target).hasClass('modal')) {
          closeModal();
        }
      };

      const modalInterval = setInterval(checkForDivs, 500);

      let interval;
      const checkForInput = () => {
        const inputElement = document.querySelector('input[type="text"][placeholder="Search for table…"]');
        if (inputElement) {
          console.log('Input element found.');
          if (inputElement.value !== 'wp_jet_cct') {
            let nativeInputValueSetter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, "value").set;
            nativeInputValueSetter.call(inputElement, 'wp_jet_cct');
            let inputEvent = new Event('input', { bubbles: true });
            inputElement.dispatchEvent(inputEvent);
            console.log('Value set and React input event triggered.');
            clearInterval(interval);
          }
        } else {
          console.log('Input element not found.');
        }
      };

      interval = setInterval(checkForInput, 500);
    });
  </script>
  <?php
  }	  
}

• This topic was modified 1 year, 1 month ago by Finnwulf.
• This topic was modified 1 year, 1 month ago by Finnwulf.
• This topic was modified 1 year, 1 month ago by Finnwulf.