Source: clientModules/writeChanges.js

  1. /**
  2.  * @file This file makes table cells editable and send the edited content to a server and create a GitHub issue for each edit. It uses the Octokit library to interact with the GitHub API and the awesome-notifications library to display notifications to the user.
  4. It also uses a MutationObserver to observe changes in the element. When a change is detected, it collects the data of the edited cell (like row, column, row number, column number, column name, proposed text, term) and stores it in the mutation object.
  5.  * @author Kor Dwarshuis
  6.  * @version 1.0.0
  7.  * @since 2023-03-15
  8.  */
  10. import { Octokit, App } from 'octokit';
  12. // https://f3oall.github.io/awesome-notifications/docs/why-such-awesome
  13. // https://www.npmjs.com/package/awesome-notifications
  14. // https://github.com/f3oall/awesome-notifications#readme
  15. // import AWN from 'awesome-notifications';
  16. import AWN from './libs/awesome-notifications.js';
  18. // Initialize instance of AWN
  19. let notifier = new AWN({
  20.   maxNotifications: 6,
  21.   durations: {
  22.     alert: 0,
  23.     success: 4000,
  24.   },
  25.   icons: {
  26.     enabled: false,
  27.   },
  28. });
  30. const writeChanges = (element) => {
  31.   const el = document.querySelector(element);
  32.   const buttonTextEdit = 'Edit';
  33.   const buttonTextSave = 'Send';
  34.   const buttonTextCancel = 'Cancel';
  35.   let explanationAboutGithubIssueShown = false;
  37.   const domainReceivingChanges =
  38.     'https://dwarshuis.com/test/wot-terms/php_scripts/saveEdits.php';
  40.   if (el !== null) {
  41.     write();
  42.   }
  44.   function write() {
  45.     const makeEditable = el;
  46.     let mutation = {};
  48.     // // Create an edit/save button and insert before the element we want to edit
  49.     // const editSaveButton = document.createElement('button');
  50.     // editSaveButton.classList.add('button');
  51.     // editSaveButton.classList.add('button--secondary');
  52.     // editSaveButton.classList.add('margin--md');
  53.     // editSaveButton.classList.add('edit-save');
  54.     // editSaveButton.innerText = buttonTextEdit;
  55.     // el.parentNode.insertBefore(editSaveButton, el);
  56.     // editSaveButton.addEventListener('click', makeContentEditable);
  58.     // Create an edit/save button in every table cell
  59.     const tableCells = document.querySelectorAll('.googlesheet td');
  60.     tableCells.forEach((cell) => {
  61.       if (cell.dataset.columnnr !== '0') {
  62.         // Surround the cell content with a div
  63.         cell.innerHTML =
  64.           '<div class="cell-content">' + cell.innerHTML + '</div>';
  66.         const div = document.createElement('div');
  67.         div.classList.add('buttons');
  68.         cell.appendChild(div);
  70.         const editSaveButton = document.createElement('button');
  71.         editSaveButton.classList.add('button');
  72.         editSaveButton.classList.add('button--secondary');
  73.         editSaveButton.classList.add('margin--md');
  74.         editSaveButton.classList.add('edit-save');
  75.         editSaveButton.innerText = buttonTextEdit;
  76.         div.appendChild(editSaveButton);
  77.         editSaveButton.addEventListener('click', makeTableCellEditable);
  79.         const cancelButton = document.createElement('button');
  80.         cancelButton.classList.add('button');
  81.         cancelButton.classList.add('button--secondary');
  82.         cancelButton.classList.add('margin--md');
  83.         cancelButton.classList.add('cancel');
  84.         cancelButton.innerText = buttonTextCancel;
  85.         div.appendChild(cancelButton);
  86.         cancelButton.addEventListener('click', cancelTableCellEditable);
  87.       }
  88.     });
  90.     function makeTableCellEditable() {
  91.       if (this.parentElement.parentElement.contentEditable !== 'true') {
  92.         this.parentElement.parentElement.contentEditable = 'true';
  93.         this.parentElement.parentElement.classList.add('editable');
  94.         this.parentElement.parentElement.focus();
  95.         this.innerText = buttonTextSave;
  97.         if (explanationAboutGithubIssueShown === false) {
  98.           notifier.info(
  99.             `After editing, click the “${buttonTextSave}” button, and a Github issue will be generated.`
  100.           );
  101.           explanationAboutGithubIssueShown = true;
  102.         }
  103.       } else {
  104.         this.parentElement.parentElement.contentEditable = 'false';
  105.         this.innerText = buttonTextEdit;
  106.         sendContent();
  107.       }
  108.     }
  109.     function cancelTableCellEditable() {
  110.       this.parentElement.parentElement.contentEditable = 'false';
  111.       this.parentElement.parentElement.classList.remove('editable');
  112.       this.parentElement.querySelector('button.edit-save').innerText =
  113.         buttonTextEdit;
  114.     }
  116.     async function sendContent() {
  117.       var formData = new FormData();
  119.       formData.append('content', JSON.stringify(mutation));
  121.       /**
  122.        * Write to a textfile on a domain
  123.        */
  125.       // TODO: improve fetch
  126.       fetch(domainReceivingChanges, { method: 'POST', body: formData });
  127.       // .then(
  128.       //   function (response) {
  129.       //     return response.text();
  130.       //   }
  131.       // );
  132.       // .then(function (body) {
  133.       // });
  135.       // // Octokit.js
  136.       // // https://github.com/octokit/core.js#readme
  137.       // const octokit = new Octokit({
  138.       //   auth: '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',
  139.       // });
  141.       // octokit.request('POST /repos/kordwarshuis/WOT-terms-edits/dispatches', {
  142.       //   owner: 'kordwarshuis',
  143.       //   repo: 'WOT-terms-edits',
  144.       //   event_type: 'edit',
  145.       //   client_payload: {
  146.       //     unit: false,
  147.       //     integration: true,
  148.       //   },
  149.       //   headers: {
  150.       //     'X-GitHub-Api-Version': '2022-11-28',
  151.       //   },
  152.       // });
  154.       /**
  155.        * Create an issue on Github
  156.        */
  157.       let auth = prompt('Enter token');
  159.       // Initialize the Octokit client
  160.       const octokit = new Octokit({
  161.         auth: auth,
  162.       });
  164.       // Create the issue payload
  165.       const payload = {
  166.         owner: 'kordwarshuis',
  167.         repo: 'WOT-terms-edits',
  168.         title: `New edit for “${mutation.columnname}” for the term: “${mutation.term}”.`,
  169.         body: `An edit has been made in column “${mutation.columnname}” for the term: “${mutation.term}”.\n\nThe new text is: “${mutation.proposedText}”\n\n(Column: ${mutation.columnnr}, Row: ${mutation.rownr})`,
  170.       };
  172.       // Send the request to create the issue
  173.       const response = await octokit.rest.issues.create(payload);
  175.       let onOk = () => {
  176.         // notifier.info('You pressed OK');
  177.       };
  178.       notifier.confirm(
  179.         `A new issue has been created on Github at: <a target="_blank" rel="noopener" href="${response.data.html_url}">${response.data.html_url}</a>`,
  180.         onOk,
  181.         false,
  182.         {
  183.           labels: {
  184.             confirm: 'Info',
  185.           },
  186.         }
  187.       );
  188.     }
  190.     // https://hacks.mozilla.org/2012/05/dom-mutationobserver-reacting-to-dom-changes-without-killing-browser-performance/
  191.     // TODO: implement observer.disconnect();
  192.     const observer = new MutationObserver((mutationRecords) => {
  193.       // Collect the data like row, column, rownr, columnnr, columnname, proposedText, term of the edited cell
  194.       mutation.row =
  195.         mutationRecords[0].target.parentElement.parentElement.dataset.row;
  196.       mutation.rownr =
  197.         mutationRecords[0].target.parentElement.parentElement.dataset.rownr;
  198.       mutation.column =
  199.         mutationRecords[0].target.parentElement.parentElement.dataset.column;
  200.       mutation.columnnr =
  201.         mutationRecords[0].target.parentElement.parentElement.dataset.columnnr;
  202.       mutation.columnname = document.querySelectorAll(
  203.         `.googlesheet th[data-columnnr]`
  204.       )[
  205.         mutationRecords[0].target.parentElement.parentElement.dataset.columnnr
  206.       ].innerText;
  208.       // The text that is being edited
  209.       mutation.proposedText =
  210.         mutationRecords[0].target.parentElement.parentElement.innerText;
  212.       // Remove the edit button text from the text that is being edited
  213.       mutation.proposedText = mutation.proposedText.substring(
  214.         0,
  215.         mutation.proposedText.length -
  216.         buttonTextSave.length -
  217.         buttonTextCancel.length -
  218.         1
  219.       );
  221.       // The term that is being edited
  222.       mutation.term = document.querySelectorAll(
  223.         `.googlesheet tr[data-rownr="${mutation.rownr}"] td[data-columnnr="4"]`
  224.       )[0].innerText;
  226.       // Remove the edit button text from the term
  227.       mutation.term = mutation.term.substring(
  228.         0,
  229.         mutation.term.length -
  230.         document.querySelectorAll(
  231.           `.googlesheet tr[data-rownr="${mutation.rownr}"] td[data-columnnr="4"] button.cancel`
  232.         )[0].innerText.length -
  233.         document.querySelectorAll(
  234.           `.googlesheet tr[data-rownr="${mutation.rownr}"] td[data-columnnr="4"] button.edit-save`
  235.         )[0].innerText.length -
  236.         1
  237.       );
  238.     });
  239.     observer.observe(el, {
  240.       characterData: true,
  241.       subtree: true,
  242.     });
  243.   }
  244. };
  246. export function onRouteDidUpdate({ location, previousLocation }) {
  247.   // Don't execute if we are still on the same page; the lifecycle may be fired
  248.   // because the hash changes (e.g. when navigating between headings)
  249.   // if (location.pathname === previousLocation?.pathname) return;
  250.   writeChanges('.googlesheet');
  251. }