combine reloadElement and reloadElements (#5087)

* combine reloadElement and reloadElements * more concise code * reloadElements only accepts an array of ids (#5091)
elabftw · May 10, 2024 · dffd142 · dffd142
1 parent 7b28cd3
commit dffd142
Show file tree

Hide file tree

Showing 18 changed files with 106 additions and 100 deletions.
diff --git a/src/ts/JsonEditorHelper.class.ts b/src/ts/JsonEditorHelper.class.ts
@@ -9,7 +9,7 @@ import { Metadata } from './Metadata.class';
 import JSONEditor from 'jsoneditor';
 import $ from 'jquery';
 import i18next from 'i18next';
-import { notif, notifSaved, reloadElement } from './misc';
+import { notif, notifSaved, reloadElements } from './misc';
 import { Action, Entity, Model } from './interfaces';
 import { Api } from './Apiv2.class';
 import { ValidMetadata } from './metadataInterfaces';
@@ -173,7 +173,7 @@ export default class JsonEditorHelper {
     };
     this.api.post(`${this.entity.type}/${this.entity.id}/${Model.Upload}`, params).then(resp => {
       const location = resp.headers.get('location').split('/');
-      reloadElement('uploadsDiv');
+      reloadElements(['uploadsDiv']);
       this.currentUploadId = String(location[location.length - 1]);
     });
   }

diff --git a/src/ts/admin.ts b/src/ts/admin.ts
@@ -5,7 +5,7 @@
  * @license AGPL-3.0
  * @package elabftw
  */
-import { notif, notifError, reloadElement, TomSelect, updateCatStat } from './misc';
+import { notif, notifError, reloadElements, TomSelect, updateCatStat } from './misc';
 import $ from 'jquery';
 import { Malle } from '@deltablot/malle';
 import i18next from 'i18next';
@@ -108,7 +108,7 @@ document.addEventListener('DOMContentLoaded', () => {
     } else if (el.matches('[data-action="create-teamgroup"]')) {
       const input = (document.getElementById('teamGroupCreate') as HTMLInputElement);
       ApiC.post(`${Model.Team}/current/${Model.TeamGroup}`, {'name': input.value}).then(() => {
-        reloadElement('team_groups_div');
+        reloadElements(['team_groups_div']);
         input.value = '';
       });
     // ADD USER TO TEAM GROUP
@@ -118,7 +118,10 @@ document.addEventListener('DOMContentLoaded', () => {
         notifError(new Error('Use the autocompletion menu to add users.'));
         return;
       }
-      ApiC.patch(`${Model.Team}/current/${Model.TeamGroup}/${el.dataset.groupid}`, {'how': Action.Add, 'userid': user}).then(() => reloadElement('team_groups_div'));
+      ApiC.patch(
+        `${Model.Team}/current/${Model.TeamGroup}/${el.dataset.groupid}`,
+        {'how': Action.Add, 'userid': user},
+      ).then(() => reloadElements(['team_groups_div']));
     // RM USER FROM TEAM GROUP
     } else if (el.matches('[data-action="rmuser-teamgroup"]')) {
       ApiC.patch(`${Model.Team}/current/${Model.TeamGroup}/${el.dataset.groupid}`, {'how': Action.Unreference, 'userid': el.dataset.userid})
@@ -147,7 +150,7 @@ document.addEventListener('DOMContentLoaded', () => {
         // assign a new random color
         colorInput.value = getRandomColor();
         // display newly added entry
-        reloadElement(`${el.dataset.target}Div`);
+        reloadElements([`${el.dataset.target}Div`]);
       });
     // UPDATE STATUSLIKE
     } else if (el.matches('[data-action="update-status"]')) {
@@ -185,7 +188,7 @@ document.addEventListener('DOMContentLoaded', () => {
       }
       ApiC.post(`${Model.TeamTags}`, {'tag': tagInput.value}).then(() => {
         tagInput.value = '';
-        reloadElement('tagMgrDiv');
+        reloadElements(['tagMgrDiv']);
       });
     } else if (el.matches('[data-action="patch-team-common-template"]')) {
       const params = {};
@@ -208,7 +211,7 @@ document.addEventListener('DOMContentLoaded', () => {
       });
     } else if (el.matches('[data-action="open-onboarding-email-modal"]')) {
       // reload the modal in case the users of the team have changed
-      reloadElement('sendOnboardingEmailModal')
+      reloadElements(['sendOnboardingEmailModal'])
         .then(() => $('#sendOnboardingEmailModal').modal('toggle'))
         .then(() => new TomSelect('#sendOnboardingEmailToUsers', {
           plugins: ['dropdown_input', 'no_active_items', 'remove_button'],

diff --git a/src/ts/common.ts b/src/ts/common.ts
@@ -19,7 +19,7 @@ import {
   notifError,
   permissionsToJson,
   relativeMoment,
-  reloadElement,
+  reloadElements,
   replaceWithTitle,
   togglePlusIcon,
   TomSelect,
@@ -293,7 +293,7 @@ document.addEventListener('DOMContentLoaded', () => {
         $('#policiesModal').modal('toggle');
       });
     } else if (el.matches('[data-reload-on-click]')) {
-      reloadElement(el.dataset.reloadOnClick).then(() => relativeMoment());
+      reloadElements([el.dataset.reloadOnClick]).then(() => relativeMoment());
 
     } else if (el.matches('[data-action="add-query-filter"]')) {
       const params = new URLSearchParams(document.location.search.substring(1));
@@ -420,10 +420,10 @@ document.addEventListener('DOMContentLoaded', () => {
         // create a new key and delete the old one
         params[paramKey] = params[el.dataset.rw];
         delete params[el.dataset.rw];
-        ApiC.patch(`${Model.User}/me`, params).then(() => reloadElement(el.dataset.identifier + 'Div'));
+        ApiC.patch(`${Model.User}/me`, params).then(() => reloadElements([el.dataset.identifier + 'Div']));
       } else {
         const entity = getEntity();
-        ApiC.patch(`${entity.type}/${entity.id}`, params).then(() => reloadElement(el.dataset.identifier + 'Div'));
+        ApiC.patch(`${entity.type}/${entity.id}`, params).then(() => reloadElements([el.dataset.identifier + 'Div']));
       }
 
     } else if (el.matches('[data-action="select-lang"]')) {
@@ -509,7 +509,7 @@ document.addEventListener('DOMContentLoaded', () => {
           if (el.dataset.href) {
             window.location.href = el.dataset.href;
           } else {
-            reloadElement('navbarNotifDiv');
+            reloadElements(['navbarNotifDiv']);
           }
         });
       } else {
@@ -520,7 +520,7 @@ document.addEventListener('DOMContentLoaded', () => {
 
     // DESTROY (clear all) NOTIF
     } else if (el.matches('[data-action="destroy-notif"]')) {
-      ApiC.delete(`${Model.User}/me/${Model.Notification}`).then(() => reloadElement('navbarNotifDiv'));
+      ApiC.delete(`${Model.User}/me/${Model.Notification}`).then(() => reloadElements(['navbarNotifDiv']));
 
     } else if (el.matches('[data-action="export-user"]')) {
       let source: string;

diff --git a/src/ts/doodle.ts b/src/ts/doodle.ts
@@ -5,7 +5,7 @@
  * @license AGPL-3.0
  * @package elabftw
  */
-import { reloadElement } from './misc';
+import { reloadElements } from './misc';
 import i18next from 'i18next';
 import { Action, Model } from './interfaces';
 import { Api } from './Apiv2.class';
@@ -87,7 +87,7 @@ document.addEventListener('DOMContentLoaded', () => {
       'real_name': realName,
       'content': image,
     };
-    ApiC.post(`${elDataset.type}/${elDataset.id}/${Model.Upload}`, params).then(() => reloadElement('uploadsDiv'));
+    ApiC.post(`${elDataset.type}/${elDataset.id}/${Model.Upload}`, params).then(() => reloadElements(['uploadsDiv']));
   });
 
 

diff --git a/src/ts/edit.ts b/src/ts/edit.ts
@@ -5,7 +5,7 @@
  * @license AGPL-3.0
  * @package elabftw
  */
-import { getEntity, notif, updateCatStat, escapeRegExp, notifError, reloadElement, updateEntityBody } from './misc';
+import { getEntity, notif, updateCatStat, escapeRegExp, notifError, reloadElements, updateEntityBody } from './misc';
 import { getTinymceBaseConfig } from './tinymce';
 import { EntityType, Target, Upload, Model, Action } from './interfaces';
 import './doodle';
@@ -189,7 +189,7 @@ document.addEventListener('DOMContentLoaded', () => {
         'real_name': realName,
         'content': content,
       };
-      ApiC.post(`${entity.type}/${entity.id}/${Model.Upload}`, params).then(() => reloadElement('uploadsDiv'));
+      ApiC.post(`${entity.type}/${entity.id}/${Model.Upload}`, params).then(() => reloadElements(['uploadsDiv']));
 
     // ANNOTATE IMAGE
     } else if (el.matches('[data-action="annotate-image"]')) {
@@ -333,7 +333,7 @@ document.addEventListener('DOMContentLoaded', () => {
               resolve(`app/download.php?f=${json.long_name}&storage=${json.storage}`);
               // save here because using the old real_name will not return anything from the db (status is archived now)
               updateEntityBody();
-              reloadElement('uploadsDiv');
+              reloadElements(['uploadsDiv']);
             });
           });
         } else {
@@ -432,7 +432,7 @@ document.addEventListener('DOMContentLoaded', () => {
         method: 'POST',
         body: formData,
       }).then(resp => {
-        reloadElement('uploadsDiv');
+        reloadElements(['uploadsDiv']);
         // return early if longName is not found in body
         if ((editorCurrentContent.indexOf(searchPrefixSrc + formElement.dataset.longName) === -1)
           && (editorCurrentContent.indexOf(searchPrefixMd + formElement.dataset.longName) === -1)

diff --git a/src/ts/editusers.ts b/src/ts/editusers.ts
@@ -6,7 +6,7 @@
  * @package elabftw
  */
 import i18next from 'i18next';
-import { collectForm, reloadElement } from './misc';
+import { collectForm, reloadElements } from './misc';
 import { InputType, Malle } from '@deltablot/malle';
 import { Api } from './Apiv2.class';
 import { Action, Model } from './interfaces';
@@ -26,7 +26,7 @@ document.addEventListener('DOMContentLoaded', () => {
         el.closest('div.form-group').querySelectorAll('input').forEach(input => {
           input.value = '';
         });
-        reloadElement('editUsersBox');
+        reloadElements(['editUsersBox']);
       });
 
     // CREATE USER(s) FROM REMOTE DIRECTORY
@@ -54,32 +54,32 @@ document.addEventListener('DOMContentLoaded', () => {
 
     // UPDATE USER
     } else if (el.matches('[data-action="update-user"]')) {
-      ApiC.patch(`users/${el.dataset.userid}`, collectForm(el.closest('div.form-group'))).then(() => reloadElement('editUsersBox'));
+      ApiC.patch(`users/${el.dataset.userid}`, collectForm(el.closest('div.form-group'))).then(() => reloadElements(['editUsersBox']));
 
     // REMOVE 2FA
     } else if (el.matches('[data-action="remove-user-2fa"]')) {
-      ApiC.patch(`users/${el.dataset.userid}`, {action: Action.Disable2fa}).then(() => reloadElement('editUsersBox'));
+      ApiC.patch(`users/${el.dataset.userid}`, {action: Action.Disable2fa}).then(() => reloadElements(['editUsersBox']));
 
     // TOGGLE ADMIN STATUS
     } else if (el.matches('[data-action="toggle-admin-user"]')) {
       const group = el.dataset.promote === '1' ? 2 : 4;
-      ApiC.patch(`${Model.User}/${el.dataset.userid}`, {action: Action.PatchUser2Team, team: el.dataset.team, target: 'group', content: group, userid: el.dataset.userid}).then(() => reloadElement('editUsersBox'));
+      ApiC.patch(`${Model.User}/${el.dataset.userid}`, {action: Action.PatchUser2Team, team: el.dataset.team, target: 'group', content: group, userid: el.dataset.userid}).then(() => reloadElements(['editUsersBox']));
 
     // ADD TO TEAM
     } else if (el.matches('[data-action="add-user-to-team"]')) {
-      ApiC.patch(`${Model.User}/${el.dataset.userid}`, {'action': Action.Add, 'team': el.dataset.team}).then(() => reloadElement('editUsersBox'));
+      ApiC.patch(`${Model.User}/${el.dataset.userid}`, {'action': Action.Add, 'team': el.dataset.team}).then(() => reloadElements(['editUsersBox']));
 
     // ARCHIVE USER TOGGLE
     } else if (el.matches('[data-action="toggle-archive-user"]')) {
       let lockExp = false;
       if (document.getElementById(`lockSwitch_${el.dataset.userid}`)) {
         lockExp = (document.getElementById(`lockSwitch_${el.dataset.userid}`) as HTMLInputElement).checked;
       }
-      ApiC.patch(`users/${el.dataset.userid}`, {action: Action.Archive, with_exp: lockExp}).then(() => reloadElement('editUsersBox'));
+      ApiC.patch(`users/${el.dataset.userid}`, {action: Action.Archive, with_exp: lockExp}).then(() => reloadElements(['editUsersBox']));
 
     // VALIDATE USER
     } else if (el.matches('[data-action="validate-user"]')) {
-      ApiC.patch(`users/${el.dataset.userid}`, {action: Action.Validate}).then(() => reloadElement('unvalidatedUsersBox')).then(() => reloadElement('editUsersBox'));
+      ApiC.patch(`users/${el.dataset.userid}`, {action: Action.Validate}).then(() => reloadElements(['unvalidatedUsersBox', 'editUsersBox']));
     // SET PASSWORD (from sysadmin page)
     } else if (el.matches('[data-action="reset-user-password"]')) {
       const password = (document.getElementById(`resetUserPasswordInput_${el.dataset.userid}`) as HTMLInputElement).value;
@@ -89,12 +89,8 @@ document.addEventListener('DOMContentLoaded', () => {
     // DESTROY USER
     } else if (el.matches('[data-action="destroy-user"]')) {
       if (confirm('Are you sure you want to remove permanently this user and all associated data?')) {
-        ApiC.delete(`users/${el.dataset.userid}`).then(() => {
-          reloadElement('editUsersBox');
-          if (document.getElementById('unvalidatedUsersBox')) {
-            reloadElement('unvalidatedUsersBox');
-          }
-        });
+        ApiC.delete(`users/${el.dataset.userid}`)
+          .then(() => reloadElements(['editUsersBox', 'unvalidatedUsersBox']));
       }
     }
   });

diff --git a/src/ts/misc.ts b/src/ts/misc.ts
@@ -90,7 +90,7 @@ function triggerHandler(event: Event, el: HTMLInputElement): void {
           if (toreload === 'reloadEntitiesShow') {
             reloadEntitiesShow();
           } else {
-            reloadElement(toreload).then(() => relativeMoment());
+            reloadElements([toreload]).then(() => relativeMoment());
           }
         });
       }
@@ -295,20 +295,25 @@ export async function reloadEntitiesShow(tag = ''): Promise<void | Response> {
   listenTrigger();
 }
 
-export async function reloadElement(elementId: string): Promise<void> {
-  if (!document.getElementById(elementId)) {
-    console.error(`Could not find element with id ${elementId} to reload!`);
+export async function reloadElements(elementIds: string[]): Promise<void> {
+  elementIds = elementIds.filter((elementId: string): boolean => {
+    if (!document.getElementById(elementId)) {
+      console.error(`Could not find element with id ${elementId} to reload!`);
+      return false;
+    }
+    return true;
+  });
+
+  if (elementIds.length === 0) {
     return;
   }
-  const html = await fetchCurrentPage();
-  document.getElementById(elementId).innerHTML = html.getElementById(elementId).innerHTML;
 
+  const html = await fetchCurrentPage();
+  elementIds.forEach(elementId => {
+    document.getElementById(elementId).innerHTML = html.getElementById(elementId).innerHTML;
+    listenTrigger(elementId);
+  });
   (new TableSorting()).init();
-  listenTrigger(elementId);
-}
-
-export async function reloadElements(elementIds: string[]): Promise<void> {
-  elementIds.forEach(id => reloadElement(id));
 }
 
 /**
@@ -601,7 +606,7 @@ export async function updateEntityBody(): Promise<void> {
     const lastSavedAt = document.getElementById('lastSavedAt');
     if (lastSavedAt) {
       lastSavedAt.title = json.modified_at;
-      reloadElement('lastSavedAt').then(() => relativeMoment());
+      reloadElements(['lastSavedAt']).then(() => relativeMoment());
     }
   }).catch(() => {
     // detect if the session timedout (Session expired error is thrown)

diff --git a/src/ts/ove.ts b/src/ts/ove.ts
@@ -16,7 +16,7 @@ declare global {
 import '@teselagen/ove';
 import '@teselagen/ove/style.css';
 import { anyToJson } from '@teselagen/bio-parsers';
-import { notif, reloadElement } from './misc';
+import { notif, reloadElements } from './misc';
 import { Action, Model } from './interfaces';
 import { Api } from './Apiv2.class';
 
@@ -49,7 +49,7 @@ export function displayPlasmidViewer(about: DOMStringMap): void {
           'real_name': realName + '.png',
           'content': reader.result,
         };
-        ApiC.post(`${about.type}/${about.id}/${Model.Upload}`, params).then(() => reloadElement('uploadsDiv'));
+        ApiC.post(`${about.type}/${about.id}/${Model.Upload}`, params).then(() => reloadElements(['uploadsDiv']));
       };
     }
 
@@ -132,7 +132,7 @@ export function displayPlasmidViewer(about: DOMStringMap): void {
         generatePng: true,
         handleFullscreenClose: function(): void { // event could be used as parameter
           editor[viewerID].close();
-          reloadElement('uploadsDiv');
+          reloadElements(['uploadsDiv']);
         },
         onCopy: function(event, copiedSequenceData, editorState): void {
           // the copiedSequenceData is the subset of the sequence that has been copied in the teselagen sequence format

diff --git a/src/ts/show.ts b/src/ts/show.ts
@@ -10,7 +10,7 @@ import {
   getEntity,
   notif,
   permissionsToJson,
-  reloadElement,
+  reloadElements,
   reloadEntitiesShow,
   TomSelect,
 } from './misc';
@@ -253,7 +253,7 @@ document.addEventListener('DOMContentLoaded', () => {
 
     // remove a favtag
     } else if (el.matches('[data-action="destroy-favtags"]')) {
-      FavTagC.destroy(parseInt(el.dataset.id, 10)).then(() => reloadElement('favtagsTagsDiv'));
+      FavTagC.destroy(parseInt(el.dataset.id, 10)).then(() => reloadElements(['favtagsTagsDiv']));
 
     // SORT COLUMN IN TABULAR MODE
     } else if (el.matches('[data-action="reorder-entities"]')) {

diff --git a/src/ts/steps-links.ts b/src/ts/steps-links.ts
@@ -10,7 +10,7 @@ import 'jquery-ui/ui/widgets/autocomplete';
 import { Malle } from '@deltablot/malle';
 import Step from './Step.class';
 import i18next from 'i18next';
-import { relativeMoment, makeSortableGreatAgain, reloadElement, reloadElements, addAutocompleteToLinkInputs, getCheckedBoxes, notif, getEntity, adjustHiddenState } from './misc';
+import { relativeMoment, makeSortableGreatAgain, reloadElements, addAutocompleteToLinkInputs, getCheckedBoxes, notif, getEntity, adjustHiddenState } from './misc';
 import { Action, Target } from './interfaces';
 import { Api } from './Apiv2.class';
 
@@ -34,18 +34,18 @@ document.addEventListener('DOMContentLoaded', () => {
     if (el.matches('[data-action="step-update-deadline"]')) {
       const value = (document.getElementById('stepSelectDeadline_' + el.dataset.stepid) as HTMLSelectElement).value;
       StepC.update(parseInt(el.dataset.stepid, 10), value, Target.Deadline).then(() => {
-        reloadElement('stepsDiv');
+        reloadElements(['stepsDiv']);
       });
     // ADD STEP
     } else if (el.matches('[data-action="create-step"]')) {
       createStep(el.parentElement.parentElement.querySelector('input'));
     // TOGGLE DEADLINE NOTIFICATIONS ON STEP
     } else if (el.matches('[data-action="step-toggle-deadline-notif"]')) {
-      StepC.notif(parseInt(el.dataset.stepid, 10)).then(() => reloadElement('stepsDiv'));
+      StepC.notif(parseInt(el.dataset.stepid, 10)).then(() => reloadElements(['stepsDiv']));
     // DESTROY DEADLINE ON STEP
     } else if (el.matches('[data-action="step-destroy-deadline"]')) {
       StepC.update(parseInt(el.dataset.stepid, 10), null, Target.Deadline)
-        .then(() => reloadElement('stepsDiv'));
+        .then(() => reloadElements(['stepsDiv']));
     // IMPORT LINK(S) OF LINK
     } else if (el.matches('[data-action="import-links"]')) {
       Promise.allSettled(['items_links', 'experiments_links'].map(endpoint => ApiC.post(`${entity.type}/${entity.id}/${endpoint}/${el.dataset.target}`, {'action': Action.Duplicate}))).then(() => reloadElements(['linksDiv', 'linksExpDiv']));
@@ -88,7 +88,7 @@ document.addEventListener('DOMContentLoaded', () => {
     const content = input.value;
     if (content.length > 0) {
       StepC.create(content).then(() => {
-        reloadElement('stepsDiv').then(() => {
+        reloadElements(['stepsDiv']).then(() => {
           // clear input field
           input.value = '';
           input.focus();
@@ -145,7 +145,7 @@ document.addEventListener('DOMContentLoaded', () => {
     const stepId = e.currentTarget.dataset.stepid;
     const StepNew = new Step(newentity);
     StepNew.finish(stepId).then(() => {
-      reloadElement('stepsDiv').then(() => {
+      reloadElements(['stepsDiv']).then(() => {
         // keep to do list in sync
         $('#todo_step_' + stepId).prop('checked', $('.stepbox[data-stepid="' + stepId + '"]').prop('checked'));
       });