Merge pull request #894 from parlemonde/feature/vil-295/migrate_and_r…

…eorganize_the_existing_in_admin_portal-create Feature/vil 295/migrate and reorganize the existing in admin portal create
parlemonde · Apr 11, 2024 · 11e756e · 11e756e
2 parents db1b323 + 5aa7dd2
commit 11e756e
Show file tree

Hide file tree

Showing 21 changed files with 293 additions and 338 deletions.
diff --git a/public/h5p/editor/scripts/h5peditor-editor.js b/public/h5p/editor/scripts/h5peditor-editor.js
@@ -18,19 +18,19 @@ ns.Editor = function (library, defaultParams, replace, iframeLoaded) {
 
   // Define iframe DOM Element through jQuery
   var $iframe = ns.$('<iframe/>', {
-    'css': {
+    css: {
       display: 'block',
       width: '100%',
       height: '3em',
       border: 'none',
       zIndex: 101,
       top: 0,
-      left: 0
+      left: 0,
     },
-    'class': 'h5p-editor-iframe',
-    'frameBorder': '0',
-    'allowfullscreen': 'allowfullscreen',
-    'allow': "fullscreen"
+    class: 'h5p-editor-iframe',
+    frameBorder: '0',
+    allowfullscreen: 'allowfullscreen',
+    allow: 'fullscreen',
   });
 
   // The DOM element is often used directly
@@ -48,12 +48,15 @@ ns.Editor = function (library, defaultParams, replace, iframeLoaded) {
     iframe.contentDocument.open();
     iframe.contentDocument.write(
       '<!doctype html><html>' +
-      '<head>' +
-      ns.wrap('<link rel="stylesheet" href="', ns.assets.css, '">') +
-      ns.wrap('<script src="', ns.assets.js, '"></script>') +
-      '</head><body>' +
-      '<div class="h5p-editor h5peditor">' + ns.t('core', 'loading') + '</div>' +
-      '</body></html>');
+        '<head>' +
+        ns.wrap('<link rel="stylesheet" href="', ns.assets.css, '">') +
+        ns.wrap('<script src="', ns.assets.js, '"></script>') +
+        '</head><body>' +
+        '<div class="h5p-editor h5peditor">' +
+        ns.t('core', 'loading') +
+        '</div>' +
+        '</body></html>',
+    );
     iframe.contentDocument.close();
     iframe.contentDocument.documentElement.style.overflow = 'hidden';
   };
@@ -83,10 +86,12 @@ ns.Editor = function (library, defaultParams, replace, iframeLoaded) {
     if (!iframe.contentDocument.body || self.preventResize) {
       return; // Prevent crashing when iframe is unloaded
     }
-    if (iframe.clientHeight === iframe.contentDocument.body.scrollHeight &&
+    if (
+      iframe.clientHeight === iframe.contentDocument.body.scrollHeight &&
       (iframe.contentDocument.body.scrollHeight === iframe.contentWindow.document.body.clientHeight ||
-       iframe.contentDocument.body.scrollHeight - 1 === iframe.contentWindow.document.body.clientHeight ||
-       iframe.contentDocument.body.scrollHeight === iframe.contentWindow.document.body.clientHeight - 1)) {
+        iframe.contentDocument.body.scrollHeight - 1 === iframe.contentWindow.document.body.clientHeight ||
+        iframe.contentDocument.body.scrollHeight === iframe.contentWindow.document.body.clientHeight - 1)
+    ) {
       return; // Do not resize unless page and scrolling differs
       // Note: ScrollHeight may be 1px larger in some cases(Edge) where the actual height is a fraction.
     }
@@ -146,39 +151,41 @@ ns.Editor = function (library, defaultParams, replace, iframeLoaded) {
 
     // Load libraries data
     $.ajax({
-      url: this.contentWindow.H5PEditor.getAjaxUrl(H5PIntegration.hubIsEnabled ? 'content-type-cache' : 'libraries')
-    }).fail(function () {
-      $container.html('Error, unable to load libraries.');
-    }).done(function (data) {
-      if (data.success === false) {
-        $container.html(data.message + ' (' + data.errorCode  + ')');
-        return;
-      }
-
-      // Create library selector
-      self.selector = new LibrarySelector(data, library, defaultParams);
-      self.selector.appendTo($container.html(''));
-
-      // Resize iframe when selector resizes
-      self.selector.on('resize', resize);
-
-      /**
-       * Event handler for exposing events
-       *
-       * @private
-       * @param {H5P.Event} event
-       */
-      var relayEvent = function (event) {
-        H5P.externalDispatcher.trigger(event);
-      };
-      self.selector.on('editorload', relayEvent);
-      self.selector.on('editorloaded', relayEvent);
+      url: this.contentWindow.H5PEditor.getAjaxUrl(H5PIntegration.hubIsEnabled ? 'content-type-cache' : 'libraries'),
+    })
+      .fail(function () {
+        $container.html('Error, unable to load libraries.');
+      })
+      .done(function (data) {
+        if (data.success === false) {
+          $container.html(data.message + ' (' + data.errorCode + ')');
+          return;
+        }
 
-      // Set library if editing
-      if (library) {
-        self.selector.setLibrary(library);
-      }
-    });
+        // Create library selector
+        self.selector = new LibrarySelector(data, library, defaultParams);
+        self.selector.appendTo($container.html(''));
+
+        // Resize iframe when selector resizes
+        self.selector.on('resize', resize);
+
+        /**
+         * Event handler for exposing events
+         *
+         * @private
+         * @param {H5P.Event} event
+         */
+        var relayEvent = function (event) {
+          H5P.externalDispatcher.trigger(event);
+        };
+        self.selector.on('editorload', relayEvent);
+        self.selector.on('editorloaded', relayEvent);
+
+        // Set library if editing
+        if (library) {
+          self.selector.setLibrary(library);
+        }
+      });
 
     // Start resizing the iframe
     if (iframe.contentWindow.MutationObserver !== undefined) {
@@ -199,13 +206,12 @@ ns.Editor = function (library, defaultParams, replace, iframeLoaded) {
         characterData: true,
         subtree: true,
         attributeOldValue: false,
-        characterDataOldValue: false
+        characterDataOldValue: false,
       });
 
       H5P.$window.resize(limitedResize);
       resize();
-    }
-    else {
+    } else {
       // Use an interval for resizing the iframe
       (function resizeInterval() {
         resize();
@@ -246,11 +252,9 @@ ns.Editor = function (library, defaultParams, replace, iframeLoaded) {
 ns.Editor.prototype.getLibrary = function () {
   if (this.selector !== undefined) {
     return this.selector.getCurrentLibrary();
-  }
-  else if (this.selectedContentTypeId) {
+  } else if (this.selectedContentTypeId) {
     return this.selectedContentTypeId;
-  }
-  else {
+  } else {
     console.warn('no selector defined for "getLibrary"');
   }
 };
@@ -268,10 +272,9 @@ ns.Editor.prototype.getParams = function (notFormSubmit) {
   if (this.selector !== undefined) {
     return {
       params: this.selector.getParams(),
-      metadata: this.selector.getMetadata()
+      metadata: this.selector.getMetadata(),
     };
-  }
-  else {
+  } else {
     console.warn('no selector defined for "getParams"');
   }
 };
@@ -296,7 +299,7 @@ ns.Editor.prototype.getContent = function (submit, error) {
   const content = {
     title: this.isMainTitleSet(),
     library: this.getLibrary(),
-    params: this.getParams()
+    params: this.getParams(),
   };
 
   if (!content.title) {
@@ -330,23 +333,24 @@ ns.Editor.prototype.getContent = function (submit, error) {
   content.title = tmp.textContent; // WARNING: This is text, do NOT insert as HTML.
 
   library = new iframeEditor.ContentType(content.library);
-  const upgradeLibrary = iframeEditor.ContentType.getPossibleUpgrade(library, this.selector.libraries.libraries !== undefined ? this.selector.libraries.libraries : this.selector.libraries);
+  const upgradeLibrary = iframeEditor.ContentType.getPossibleUpgrade(
+    library,
+    this.selector.libraries.libraries !== undefined ? this.selector.libraries.libraries : this.selector.libraries,
+  );
   if (upgradeLibrary) {
     // We need to run content upgrade before saving
     iframeEditor.upgradeContent(library, upgradeLibrary, content.params, function (err, result) {
       if (err) {
         if (error) {
           error(err);
         }
-      }
-      else {
+      } else {
         content.library = iframeEditor.ContentType.getNameVersionString(upgradeLibrary);
         content.params = result;
         submit(content);
       }
-    })
-  }
-  else {
+    });
+  } else {
     // All OK, store the data
     content.params = JSON.stringify(content.params);
     submit(content);
@@ -380,8 +384,7 @@ ns.Editor.prototype.getMaxScore = function (content) {
   try {
     var value = this.selector.presave(content, this.getLibrary());
     return value.maxScore;
-  }
-  catch (e) {
+  } catch (e) {
     // Deliberatly catching error
     return 0;
   }
@@ -417,7 +420,7 @@ ns.Editor.prototype.semiFullscreen = function ($iframe, $element, done) {
     height: '',
     zIndex: '',
     top: '',
-    left: ''
+    left: '',
   });
   // NOTE: Style attribute has been used here since June 2014 since there are
   // no CSS files in H5PEditor loaded outside the iframe.
@@ -438,7 +441,7 @@ ns.Editor.prototype.semiFullscreen = function ($iframe, $element, done) {
     if (e.which === 27) {
       restore();
     }
-  }
+  };
   iframeWindow.document.body.addEventListener('keyup', handleKeyup);
 
   /**
@@ -462,7 +465,7 @@ ns.Editor.prototype.semiFullscreen = function ($iframe, $element, done) {
       height: '3em',
       zIndex: 101,
       top: 0,
-      left: 0
+      left: 0,
     });
 
     // Return all of the elements hidden back to their original state
@@ -471,7 +474,7 @@ ns.Editor.prototype.semiFullscreen = function ($iframe, $element, done) {
 
     iframeWindow.document.body.removeEventListener('keyup', handleKeyup);
     done(); // Callback for UI
-  }
+  };
 
   return restore;
 };
@@ -499,12 +502,11 @@ ns.hideAllButOne = function (element, win) {
       if (win.getComputedStyle(element).display !== 'none') {
         return true;
       }
-    }
-    else {
+    } else {
       return true;
     }
     return false;
-  }
+  };
 
   /**
    * Recusive function going up the DOM tree.
@@ -527,7 +529,7 @@ ns.hideAllButOne = function (element, win) {
         restore.push({
           element: sibling,
           display: sibling.style.getPropertyValue('display'),
-          priority: sibling.style.getPropertyPriority('display')
+          priority: sibling.style.getPropertyPriority('display'),
         });
         sibling.style.setProperty('display', 'none', 'important');
       }
@@ -537,7 +539,7 @@ ns.hideAllButOne = function (element, win) {
     if (element.parentElement.tagName !== 'BODY') {
       recurse(element.parentElement);
     }
-  }
+  };
   recurse(element); // Start
 
   /**
@@ -546,11 +548,12 @@ ns.hideAllButOne = function (element, win) {
    * @private
    */
   return function () {
-    for (let i = restore.length - 1; i > -1; i--) { // In opposite order
+    for (let i = restore.length - 1; i > -1; i--) {
+      // In opposite order
       restore[i].element.style.setProperty('display', restore[i].display, restore[i].priority);
     }
   };
-}
+};
 
 /**
  * Editor translations index by library name or "core".
@@ -579,10 +582,9 @@ ns.t = function (library, key, vars) {
       return 'Missing translation for ' + key;
     }
     translation = ns.language[library][key];
-  }
-  else {
+  } else {
     if (ns.language[library].libraryStrings === undefined || ns.language[library].libraryStrings[key] === undefined) {
-      return ns.t('core', 'missingTranslation', {':key': key});
+      return ns.t('core', 'missingTranslation', { ':key': key });
     }
     translation = ns.language[library].libraryStrings[key];
   }

diff --git a/src/components/Sortable.tsx b/src/components/Sortable.tsx
@@ -55,6 +55,7 @@ export const Sortable = <T extends SortableItem>({ list, setList = () => {}, han
         sort.destroy();
       };
     }
+
     return () => {};
   }, [handle]);
 

diff --git a/src/components/Steps.tsx b/src/components/Steps.tsx
@@ -2,11 +2,8 @@ import { useRouter } from 'next/router';
 import React from 'react';
 
 import CheckIcon from '@mui/icons-material/Check';
-import Step from '@mui/material/Step';
-import StepConnector from '@mui/material/StepConnector';
+import { Step, StepConnector, StepLabel, Stepper } from '@mui/material/';
 import type { StepIconProps } from '@mui/material/StepIcon';
-import StepLabel from '@mui/material/StepLabel';
-import Stepper from '@mui/material/Stepper';
 
 import { ActivityContext } from 'src/contexts/activityContext';
 import { primaryColor, primaryColorLight2, successColor, warningColor } from 'src/styles/variables.const';

diff --git a/src/components/activities/StepsNavigation.tsx b/src/components/activities/StepsNavigation.tsx
@@ -0,0 +1,19 @@
+import React from 'react';
+
+import { Steps } from 'src/components/Steps';
+
+interface StepsNavigationProps {
+  currentStep: number;
+  errorSteps?: number[];
+}
+
+const StepsNavigation: React.FC<StepsNavigationProps> = ({ currentStep, errorSteps }) => (
+  <Steps
+    steps={['Contenu', 'Forme', 'Prévisualiser']}
+    urls={['/admin/newportal/contenulibre/1?edit', '/admin/newportal/contenulibre/2', '/admin/newportal/contenulibre/3']}
+    activeStep={currentStep}
+    errorSteps={errorSteps}
+  />
+);
+
+export default StepsNavigation;
diff --git a/src/components/activities/content/AddContentCard.tsx b/src/components/activities/content/AddContentCard.tsx
@@ -21,7 +21,7 @@ export const AddContentCard = ({ addContent = () => {} }: AddContentCardProps) =
 
   return (
     <Card style={{ display: 'inline-block' }}>
-      <div style={{ display: 'inline-flex', padding: '0.2rem 1rem', alignItems: 'center' }}>
+      <div style={{ display: 'inline-flex', padding: '0.2rem 1rem', alignItems: 'center', flexWrap: 'wrap' }}>
         <span className="text text--bold" style={{ margin: '0 0.5rem' }}>
           Ajouter à votre description :
         </span>

diff --git a/src/components/activities/content/editors/TextEditor/SimpleTextEditor.tsx b/src/components/activities/content/editors/TextEditor/SimpleTextEditor.tsx
@@ -52,7 +52,7 @@ interface SimpleTextEditorProps {
 
 export const SimpleTextEditor = ({
   value = '',
-  placeholder = 'Commencez à écrire ici, ou ajoutez une vidéo ou une image.',
+  placeholder = 'Commencez à écrire ici, ou ajoutez une vidéo, un son ou une image.',
   onChange = () => {},
   onFocus = () => {},
   onBlur = () => {},

diff --git a/src/components/admin/NewAdminNavigation.tsx b/src/components/admin/NewAdminNavigation.tsx
@@ -11,7 +11,6 @@ import PublierIcon from 'src/svg/publier.svg';
 
 interface NavItemProps {
   key?: number;
-
   path: string;
   selected: boolean;
   onClick: React.MouseEventHandler<HTMLDivElement>;
-Original file line number
+Diff line change
@@ Expand Up @@
             sort.destroy();
           };
         }
         return () => {};
       }, [handle]);
@@ Expand Down @@