Add support for all sections errors by showing an alert icon near the edit/drag/delete option to indicate the sections that has error and display them in a popup when the button is clicked Feedback demo Julien (#78)

CHANGELOG.md

@@ -68,3 +68,10 @@
  - Global management of the errors if a page is saved and a sections is invalid, from the Library #12
 
  - Have an icon showing in the language switcher when editing a section, to show in which language the site is opened #13
+
+
+### v1.0.6 (8/28/2023)
+
+---
+
+ - Add support for all sections errors by showing an alert icon near the edit/drag/delete option to indicate the sections that has error and display them in a popup when the button is clicked  

lib/module.js

@@ -92,6 +92,9 @@ module.exports = async function (moduleOptions) {
         "invalidSectionsError": "This section could not be saved for the following reason: ",
         "someSectionsNotSaved": "We have an issue saving your page, some sections could not be saved. Scroll over your page to see which section has an issue",
         "mediaComponent": {
+          "Upload":"Attach a media",
+          "Change": "Modify your media",
+          "remove": "Remove",
           "filterMedias": "Filter medias",
           "filter": "Filter",
           "clearFilters": "Clear filters",
@@ -275,6 +278,8 @@ module.exports = async function (moduleOptions) {
         "invalidSectionsError": "Cette section n'a pas pu être sauvegardée pour la raison suivante: ",
         "someSectionsNotSaved": "Nous rencontrons un problème lors de l'enregistrement de votre page, certaines sections n'ont pas pu être sauvegardées. Faites défiler votre page pour voir quelle section pose problème",
         "mediaComponent": {
+          "Upload":"Attacher un média",
+          "Change": "Modifier votre média",
           "remove": "Supprimer",
           "filterMedias": "Filtrer les médias",
           "filter": "Filtrer",
@@ -299,6 +304,7 @@ module.exports = async function (moduleOptions) {
           "yourMedia":"votre média",
           "noMediasFound":"Aucun média trouvé",
           "EditMedia": {
+            "remove": "Supprimer",
             "mediaTitle":"Titre du média",
             "tag":"Tag. SEO",
             "type":"Type de fichier",

lib/src/components/Medias/UploadMedia.vue

@@ -25,8 +25,8 @@
               <div>
                 <div v-if="media.length > 0 && media[0].seo_tag" class="section-module-upload-media-seo">{{ seoTag + media[0].seo_tag }}</div>
                 <div>
-                  <span v-if="media.length === 0 || (media.length > 0 && media[0].url === '')" class="section-module-upload-media-upload-text">{{ uploadText }}</span>
-                  <span v-else class="section-module-upload-media-upload-text">{{ changeText }}</span>
+                  <span v-if="media.length === 0 || (media.length > 0 && media[0].url === '')" class="section-module-upload-media-upload-text">{{ $t(uploadText) }}</span>
+                  <span v-else class="section-module-upload-media-upload-text">{{ $t(changeText) }}</span>
                 </div>
               </div>
             </div>
@@ -57,11 +57,11 @@ export default {
     },
     uploadText: {
       type: String,
-      default: 'Upload'
+      default: 'mediaComponent.Upload'
     },
     changeText: {
       type: String,
-      default: 'Change'
+      default: 'mediaComponent.Change'
     },
     seoTag: {
       type: String,

lib/src/components/Sections/index.vue

@@ -301,6 +301,25 @@
 
       <!-- ------------------------------------------------------------------------------------------- -->
 
+      <!-- This is errors formats sections popup that opens when the admin click on the alert icon button in red located near the option to edit or delete a section -->
+      <div v-if="isErrorsFormatModalOpen && admin && editMode" ref="modal" class="fixed z-50 overflow-hidden bg-grey bg-opacity-25 inset-0 p-8 overflow-y-auto modalContainer" aria-labelledby="modal-title" role="dialog" aria-modal="true">
+        <div class="flexSections fullHeightSections items-center justify-center pt-4 px-4 pb-20 text-center sm:block sm:p-0">
+          <div class="section-modal-content bg-white relativeSections shadow rounded-xl overflow-scroll">
+            <div class="text-center flexSections h4 sectionTypeHeader">
+              <AlertIcon />
+              <div class="closeIcon" @click="isErrorsFormatModalOpen = false">
+                <CloseIcon />
+              </div>
+            </div>
+            <div class="text-center h4 my-3  pb-3 deletePageConfirmation">
+              {{ displayedErrorFormat }}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- ------------------------------------------------------------------------------------------- -->
+
       <!-- This is the popup that has the required fields loaded from section response requirements in order to authorize configurable section types, it opens when clicking on the lock icon located at the bottom left of a section configurable type -->
       <div v-if="isAuthModalOpen && admin && editMode" ref="modal" class="fixed z-50 overflow-hidden bg-grey bg-opacity-25 inset-0 p-8 overflow-y-auto modalContainer" aria-labelledby="modal-title" role="dialog" aria-modal="true">
         <div class="flexSections fullHeightSections items-center justify-center pt-4 px-4 pb-20 text-center sm:block sm:p-0">
@@ -400,6 +419,9 @@
                 class="controls flexSections flex-row justify-center p-1 rounded-xl top-0 right-2 absolute z-9 hide-mobile"
                 v-if="admin && editMode"
               >
+                <div v-if="sectionsFormatErrors[view.weight] || view.error" @click="isErrorsFormatModalOpen = true; displayedErrorFormat = sectionsFormatErrors[view.weight] ? sectionsFormatErrors[view.weight] : view.error">
+                  <AlertIcon />
+                </div>
                 <LinkIcon v-if="view.linkedTo" />
                 <div @click="edit(view)" v-if="editable(view.type)">
                   <EditIcon class="edit-icon" />
@@ -774,6 +796,7 @@ export default {
       isModalOpen: false,
       isDeleteModalOpen: false,
       isDeletePageModalOpen: false,
+      isErrorsFormatModalOpen: false,
       isAuthModalOpen: false,
       isUnAuthModalOpen: false,
       synched: false,
@@ -814,7 +837,9 @@ export default {
       computedTitle: '',
       computedDescription: '',
       sectionsUserId: '',
-      invalidSectionsErrors: {}
+      displayedErrorFormat: '',
+      invalidSectionsErrors: {},
+      sectionsFormatErrors: {}
     }
   },
   computed: {
@@ -1656,6 +1681,7 @@ export default {
     },
     mutateVariation(variationName) {
       this.invalidSectionsErrors = {}
+      this.sectionsFormatErrors = {}
       const sections = [];
       let views = this.displayVariations[variationName].views;
       views = Object.values(views);
@@ -1715,6 +1741,7 @@ export default {
                                 "error",
                                 `${this.$t('wrongFieldName')} \`${field.name}\` ${this.$t('formatOfSection')} \`${section.name}\``
                               );
+                              this.sectionsFormatErrors[section.weight] = `${this.$t('wrongFieldName')} \`${field.name}\` ${this.$t('formatOfSection')} \`${section.name}\``
                             }
                           } else if (typeof option[field.name] === 'object') {
                             if (!option[field.name].media_id || !option[field.name].url || Object.keys(option[field.name]).length === 0) {
@@ -1725,6 +1752,7 @@ export default {
                                 "error",
                                 `${this.$t('wrongFieldName')} \`${field.name}\` ${this.$t('formatOfSection')} \`${section.name}\``
                               );
+                              this.sectionsFormatErrors[section.weight] = `${this.$t('wrongFieldName')} \`${field.name}\` ${this.$t('formatOfSection')} \`${section.name}\``
                             }
                           }
                         }
@@ -1739,6 +1767,7 @@ export default {
                     "error",
                     `${this.$t('optionsFormat')} \`${section.name}\``
                   );
+                  this.sectionsFormatErrors[section.weight] = `${this.$t('optionsFormat')} \`${section.name}\``
                 }
               }
             })

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@geeks.solutions/nuxt-sections",
-  "version": "1.0.5",
+  "version": "1.0.6",
   "author": "Geeks Solutions info@geeks.solutions (https://www.geeks.solutions)",
   "repository": {
     "type": "git",