Merge pull request #1287 from visual-framework/fix/taxonomy-sync

embl taxonomy plugin sync fixes

wp-content/plugins/embl-taxonomy/README.md

@@ -115,13 +115,9 @@ A list of taxonomy terms can be viewed by visiting **Posts > EMBL Taxonomy**:
 /wp-admin/edit-tags.php?taxonomy=embl_taxonomy
 ```
 
-If the cached taxonomy is older than `MAX_AGE` an admin notice will appear linking to:
+If the cached taxonomy is older than `MAX_AGE` an admin notice will appear with a button to resync the taxonomy. The button opens a modal that handles the sync process. Syncing is done in batches using mutliple API requests to avoid a timeout.
 
-```
-/wp-admin/edit-tags.php?taxonomy=embl_taxonomy&sync=true
-```
-
-This URL will force a resync with the EMBL Taxonomy.
+The `SYNC_MAX_TERMS` constant in [register.php](/wp-content/plugins/embl-taxonomy/includes/register.php) defines the batch size. Lowering this value will slow down the process by using shorter requests.
 
 ## ACF Configuration
 

wp-content/plugins/embl-taxonomy/acf-json/embl-taxonomy-terms.json

@@ -6,67 +6,76 @@
       "key": "field_embl_taxonomy_term_who",
       "label": "Who",
       "name": "embl_taxonomy_term_who",
+      "aria-label": "",
       "type": "taxonomy",
       "instructions": "",
       "required": 0,
       "conditional_logic": 0,
       "wrapper": {
-        "width": "33",
+        "width": "",
         "class": "",
         "id": ""
       },
       "taxonomy": "embl_taxonomy",
-      "field_type": "select",
-      "allow_null": 1,
       "add_term": 0,
       "save_terms": 0,
       "load_terms": 0,
       "return_format": "id",
-      "multiple": 0
+      "field_type": "select",
+      "allow_null": 1,
+      "bidirectional": 0,
+      "multiple": 0,
+      "bidirectional_target": []
     },
     {
       "key": "field_embl_taxonomy_term_what",
       "label": "What",
       "name": "embl_taxonomy_term_what",
+      "aria-label": "",
       "type": "taxonomy",
       "instructions": "",
       "required": 0,
       "conditional_logic": 0,
       "wrapper": {
-        "width": "33",
+        "width": "",
         "class": "",
         "id": ""
       },
       "taxonomy": "embl_taxonomy",
-      "field_type": "select",
-      "allow_null": 1,
       "add_term": 0,
       "save_terms": 0,
       "load_terms": 0,
       "return_format": "id",
-      "multiple": 0
+      "field_type": "select",
+      "allow_null": 1,
+      "bidirectional": 0,
+      "multiple": 0,
+      "bidirectional_target": []
     },
     {
       "key": "field_embl_taxonomy_term_where",
       "label": "Where",
       "name": "embl_taxonomy_term_where",
+      "aria-label": "",
       "type": "taxonomy",
       "instructions": "",
       "required": 0,
       "conditional_logic": 0,
       "wrapper": {
-        "width": "33",
+        "width": "",
         "class": "",
         "id": ""
       },
       "taxonomy": "embl_taxonomy",
-      "field_type": "select",
-      "allow_null": 1,
       "add_term": 0,
       "save_terms": 0,
       "load_terms": 0,
       "return_format": "id",
-      "multiple": 0
+      "field_type": "select",
+      "allow_null": 1,
+      "bidirectional": 0,
+      "multiple": 0,
+      "bidirectional_target": []
     }
   ],
   "location": [
@@ -93,5 +102,6 @@
   "hide_on_screen": "",
   "active": true,
   "description": "",
-  "modified": 1636713925
+  "show_in_rest": 0,
+  "modified": 1697465104
 }

wp-content/plugins/embl-taxonomy/assets/embl-taxonomy.js

@@ -0,0 +1,96 @@
+(() => {
+  // Bail if no sync button
+  $button = document.querySelector('#embl-taxonomy-sync');
+  if (!$button) return;
+
+  // Append styles for modal
+  const $style = document.createElement('style');
+  $style.id = 'embl-taxonomy-css';
+  $style.innerHTML = `
+#embl-taxonomy-modal {
+  border: 0px;
+  border-radius: 5px;
+  box-shadow:
+    0px 0.3px 1.4px rgba(0, 0, 0, 0.056),
+    0px 0.7px 3.3px rgba(0, 0, 0, 0.081),
+    0px 1.3px 6.3px rgba(0, 0, 0, 0.1),
+    0px 2.2px 11.2px rgba(0, 0, 0, 0.119),
+    0px 4.2px 20.9px rgba(0, 0, 0, 0.144),
+    0px 10px 50px rgba(0, 0, 0, 0.2)
+  ;
+  padding: 10px 20px;
+  text-align: center;
+}
+#embl-taxonomy-modal::backdrop {
+  background-color: rgb(0,0,0,0.2);
+  backdrop-filter: blur(2px);
+}
+#embl-taxonomy-modal .spinner {
+  float: none;
+  vertical-align: top;
+  margin: 0 10px 0 0;
+}
+`;
+  document.head.appendChild($style);
+
+  // Get localized data from PHP
+  const {data, path, token, redirect} = window.emblTaxonomySettings;
+
+  // Create modal for output
+  const $modal = document.createElement('dialog');
+  $modal.id = 'embl-taxonomy-modal';
+  $modal.style.display = 'none';
+  $modal.innerHTML = `
+  <h3><b>${data.syncing}</b></h3>
+  <p><span class="spinner is-active"></span> ${data.reload}</p>
+  <progress></progress>
+`;
+  document.body.appendChild($modal);
+  const $progress = $modal.querySelector('progress');
+
+  // Sync button handler
+  const startSync = async (url) => {
+    try {
+      const response = await fetch(url, {
+        method: 'POST',
+        headers: {
+          'X-WP-Nonce': token
+        }
+      });
+      const json = await response.json();
+      if (json.error) {
+        $modal.innerHTML = `<p>${json.error}</p>`;
+        return;
+      }
+      if (Object.hasOwn(json, 'total')) {
+        $progress.max = json.total;
+      }
+      if (Object.hasOwn(json, 'offset')) {
+        $progress.value = json.offset;
+      }
+      if (json.success === true) {
+        $progress.value = $progress.max;
+        window.location.href = redirect;
+        return;
+      }
+      if (json.next) {
+        startSync(new URL(json.next));
+        return;
+      }
+      throw new Error();
+    } catch {
+      $modal.innerHTML = `<p>${data.error}</p>`;
+    }
+  };
+
+  $button.addEventListener('click', (ev) => {
+    ev.preventDefault();
+    $button.disabled = true;
+    $button.innerText = 'Syncing...';
+    $progress.removeAttribute('max');
+    $progress.removeAttribute('value');
+    $modal.style.removeProperty('display');
+    $modal.showModal();
+    startSync(new URL(path));
+  });
+})();