fcad-core-dragon 2.0.0-beta.1 → 2.0.0-beta.3

package/src/components/AppBaseErrorDisplay.vue

@@ -1,420 +1,438 @@
-<!--
- @ Description: This component is used to display error message in the application
-
--->
-
-<template>
-  <div class="fd_Error-message">
-    <div v-show="errorMessage === 'errorModule'" class="box-error">
-      <div class="red-box">
-        <div class="box">
-          <h2>
-            <b-icon icon="exclamation-triangle" />
-            Cette page est affichée parce que vous n'avez pas encore créé le
-            module.
-          </h2>
-          <br />
-          <p>
-            Pour créer le module
-            <br />
-          </p>
-          <ol type="number">
-            <li>
-              Ajoutez un fichier
-              <strong>module.vue</strong>
-              dans le dossier
-              <strong>views</strong>
-            </li>
-            <li>
-              Définissez le
-              <strong>$data</strong>
-              du module.vue
-            </li>
-          </ol>
-        </div>
-      </div>
-      <div class="box">
-        <p class="doc">
-          Visitez
-          <a :href="docLink" target="blank">la documentation</a>
-          pour plus de details
-        </p>
-      </div>
-    </div>
-    <!---------------------------------------------------->
-    <div v-if="errorMessage === 'errorMenu'" class="box-error">
-      <div class="red-box">
-        <div class="box">
-          <h2>
-            <b-icon icon="exclamation-triangle" />
-            Cette page est affichée parce que vous n'avez pas encore de page de
-            MENU pour votre activité
-          </h2>
-
-          <p>Pour créer la PAGE DE MENU</p>
-          <ol type="number">
-            <li>
-              Ajoutez un dossier avec le nom
-              <strong>A00</strong>
-              dans le dossier
-              <strong>module</strong>
-            </li>
-            <li>
-              Ajoutez un fichier pour votre page de MENU avec un nom de type
-              <strong>Pxx.vue</strong>
-              dans le dossier
-              <strong>A00</strong>
-              <i>( exemple P01.vue )</i>
-            </li>
-            <li>
-              Dans le
-              <strong>$data</strong>
-              de ce la page, mettez la valeur de la variable
-              <strong>type</strong>
-              à
-              <strong>"pg_menu"</strong>
-            </li>
-          </ol>
-        </div>
-      </div>
-      <div class="box">
-        <p class="doc">
-          Visitez
-          <a :href="docLink" target="blank">la documentation</a>
-          pour plus de details ...
-        </p>
-      </div>
-    </div>
-    <!---------------------------------------------------->
-    <div v-if="errorMessage === 'errorPage'" class="box-error">
-      <div class="red-box">
-        <div class="box">
-          <h2>
-            <b-icon icon="exclamation-triangle" />
-            Cette page est affichée parce que vous n'avez pas encore de page
-            d'activité pour votre module.
-          </h2>
-
-          <p>Pour créer une page</p>
-          <ol type="number">
-            <li>
-              Ajoutez un dossier pour votre activité avec un nom de type
-              <strong>Axx</strong>
-              dans le dossier
-              <strong>module</strong>
-              <i>( exemple A00 )</i>
-            </li>
-            <li>
-              Ajoutez un fichier pour votre page avec un nom de type
-              <strong>Pxx.vue</strong>
-              dans le dossier
-              <strong>Axx</strong>
-              <i>( exemple P01.vue )</i>
-            </li>
-            <li>
-              Definissez le
-              <strong>$data</strong>
-              de la page
-            </li>
-          </ol>
-        </div>
-      </div>
-      <div class="box">
-        <p class="doc">
-          Visitez
-          <a :href="docLink" target="blank">la documentation</a>
-          pour plus de details ...
-        </p>
-      </div>
-    </div>
-    <div v-if="errorMessage === 'errorMenuBranching'" class="box-error">
-      <div class="red-box">
-        <div class="box">
-          <h2>
-            <b-icon icon="exclamation-triangle" />
-            Erreur d'embranchement.
-          </h2>
-
-          <p>
-            Vous ne pouvez pas avoir de pages d'embranchement(s) dans le dossier
-            A00
-          </p>
-        </div>
-      </div>
-      <div class="box">
-        <p class="doc">
-          Visitez
-          <a
-            :href="
-              `https://fcaddocumentation.netlify.app/guide/structure.html#pages-d-embranchements-dans-un-dossier`
-            "
-            target="blank"
-          >
-            la documentation
-          </a>
-          pour plus de details ...
-        </p>
-      </div>
-    </div>
-    <div v-if="errorMessage === '404'" class="box-error">
-      <div class="red-box">
-        <div class="box">
-          <h2>
-            <b-icon icon="exclamation-triangle" />
-            404 OOPSSS!
-          </h2>
-          <p>Il semble que la page que vous cherchez n'existe pas.</p>
-        </div>
-      </div>
-      <div class="box">
-        <p class="doc">
-          Retrourner à la
-          <router-link :to="{ name: 'menu' }">
-            page d'accueil
-          </router-link>
-        </p>
-      </div>
-    </div>
-    <div v-if="errorsList.length > 0" class="box-error">
-      <div class="red-box">
-        <div class="box">
-          <h2>
-            <b-icon icon="exclamation-triangle" />
-            Error: Creation de POPUP!
-          </h2>
-          <ul>
-            <li v-for="(error, index) of errorsList" :key="`${error}_${index}`">
-              {{ error }}
-            </li>
-          </ul>
-        </div>
-      </div>
-      <div class="box">
-        <p class="doc">
-          Visitez
-          <a :href="docLink" target="blank">la documentation</a>
-          pour plus de details ...
-        </p>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'AppBaseErrorDisplay',
-  props: {
-    errorMessage: { type: String, note: 'Error Message', default: '' },
-    docLink: {
-      type: String,
-      default: 'https://fcaddocumentation.netlify.com/guide/proceduries.html',
-      note: 'Documentation link'
-    },
-    errorsList: { type: Array, default: () => [] }
-  }
-}
-</script>
-
-<style lang="scss">
-//**** DO NOT TOUCHE ****/
-//**** ERROR ****/
-.fd_Error-message {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  justify-content: center;
-  margin-top: 20%;
-  padding-bottom: 30px;
-  background-color: white;
-  -webkit-box-shadow: 3px 3px 23px 0px rgba(0, 0, 0, 0.43);
-  -moz-box-shadow: 3px 3px 23px 0px rgba(0, 0, 0, 0.43);
-  box-shadow: 3px 3px 23px 0px rgba(0, 0, 0, 0.43);
-
-  .box-error {
-    width: 100%;
-
-    .red-box {
-      background: #cd5356;
-      padding-top: 50px;
-      padding-bottom: 20px;
-    }
-
-    .box {
-      width: 60%;
-      margin: 0 auto;
-    }
-
-    h2 {
-      display: inline-block;
-      color: white;
-      margin-left: 10%;
-      padding-bottom: 20px;
-      border-bottom: 0.5px solid white;
-    }
-
-    p {
-      color: white;
-      margin-left: 10%;
-      font-size: 1.5rem;
-
-      &.doc {
-        padding-top: 20px;
-        color: #404040;
-      }
-    }
-
-    ol {
-      color: #fff;
-      margin-left: 10%;
-      font-size: 1.3rem;
-    }
-
-    a {
-      color: #cd5357;
-
-      &:hover {
-        color: #404040;
-      }
-    }
-  }
-}
-
-//**** WARNING ****/
-.warning {
-  background: #f5d41b;
-  padding: 20px 15px;
-
-  .title {
-    font-weight: 900;
-    font-size: 1.25rem;
-    text-transform: uppercase;
-    color: #292929;
-    padding-bottom: 20px;
-    border-bottom: 0.5px solid #292929;
-
-    .iL {
-      margin-right: 15px;
-    }
-
-    .iR {
-      margin-left: 10px;
-    }
-  }
-
-  .info {
-    font-size: 1.04rem;
-    color: #292929;
-    font-weight: 500;
-  }
-}
-
-.warning-error {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  justify-content: center;
-  margin-top: 10%;
-  padding-bottom: 30px;
-  background-color: white;
-  -webkit-box-shadow: 3px 3px 23px 0px rgba(0, 0, 0, 0.43);
-  -moz-box-shadow: 3px 3px 23px 0px rgba(0, 0, 0, 0.43);
-  box-shadow: 3px 3px 23px 0px rgba(0, 0, 0, 0.43);
-
-  .box-error {
-    width: 100%;
-    padding-left: 0;
-    padding-right: 0;
-
-    .yellow-box {
-      background: #f5d41b;
-      padding-top: 50px;
-      padding-bottom: 20px;
-      padding-right: 10%;
-      padding-left: 10%;
-
-      h2 {
-        width: 100%;
-        display: inline-block;
-        color: #292929;
-        padding-bottom: 20px;
-        border-bottom: 0.5px solid #292929;
-      }
-
-      p {
-        color: #292929;
-        font-size: 1.3rem;
-
-        &.doc {
-          padding-top: 20px;
-          color: #404040;
-        }
-      }
-
-      ul {
-        color: #292929;
-        margin-left: 5%;
-        font-size: 1.3rem;
-      }
-    }
-
-    .box {
-      padding-right: 10%;
-      padding-left: 10%;
-
-      .doc {
-        color: #292929;
-        font-size: 1.3rem;
-        padding-top: 25px;
-
-        a {
-          color: #f5bc00;
-
-          &:hover {
-            color: #f5ac01;
-          }
-        }
-      }
-    }
-  }
-}
-
-.pop-error {
-  //display: block!important;
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-
-  .fd_Error-message {
-    width: 100%;
-    padding-bottom: 30px;
-    background-color: white;
-    -webkit-box-shadow: 3px 3px 23px 0px rgba(0, 0, 0, 0.43);
-    -moz-box-shadow: 3px 3px 23px 0px rgba(0, 0, 0, 0.43);
-    box-shadow: 3px 3px 23px 0px rgba(0, 0, 0, 0.43);
-
-    .box-error {
-      width: 100%;
-
-      h2 {
-        font-weight: 500;
-        width: 100%;
-
-        svg {
-          margin-right: 20px;
-        }
-      }
-
-      ul {
-        color: #fff;
-        margin-left: 12%;
-
-        &.doc {
-          color: #292929;
-        }
-      }
-    }
-  }
-}
-</style>
+<!--
+ @ Description: This component is used to display error message in the application
+
+-->
+
+<template>
+  <div>
+    <!------------------------ ERRORS APPLICATION ------------------->
+    <div v-if="errorGroup === 'application'" class="fd_Error-type">
+      <div class="box-error">
+        <!--------------------------- Module --------------------->
+        <template v-if="errorType === 'errorModule'">
+          <div class="red-box">
+            <div class="box">
+              <h2>
+                Cette page est affichée parce que le fichier ModuleView n'existe
+                pas où est mal configuré
+              </h2>
+
+              <p>Pour la vue du Module</p>
+              <ol type="number">
+                <li>
+                  Créez un fichier
+                  <i>.vue</i>
+                  avec pour nom
+                  <strong>ModuleView.vue</strong>
+                  dans le dossier
+                  <strong>views</strong>
+                </li>
+
+                <li>
+                  Referez-vous wnauirw à la documentation pour la création et la
+                  configuration de la vue du Module
+                </li>
+              </ol>
+            </div>
+          </div>
+          <div class="box">
+            <p class="doc">
+              Visitez
+              <a :href="docLink" target="blank">la documentation</a>
+              pour plus de details ...
+            </p>
+          </div>
+        </template>
+        <!---------------------------- Menu ---------------------->
+        <template v-if="errorType === 'errorMenu'">
+          <div class="red-box">
+            <div class="box">
+              <h2>
+                Cette page est affichée parce que le fichier SummaryView
+                n'existe pas où est mal configuré
+              </h2>
+
+              <p>Pour la vue du Sommaire (page de MENU)</p>
+              <ol type="number">
+                <li>
+                  Créez un fichier
+                  <i>.vue</i>
+                  avec pour nom
+                  <strong>SummaryView.vue</strong>
+                  dans le dossier
+                  <strong>views</strong>
+                </li>
+                <li>
+                  Referez-vous ensuite à la documentation pour la création et la
+                  configuration de la vue du sommaire
+                </li>
+              </ol>
+            </div>
+          </div>
+          <div class="box">
+            <p class="doc">
+              Visitez
+              <a :href="docLink" target="blank">la documentation</a>
+              pour plus de details ...
+            </p>
+          </div>
+        </template>
+        <!---------------------------- Page ---------------------->
+        <template v-if="errorType === 'errorPage'">
+          <div class="red-box">
+            <div class="box">
+              <h2>
+                Cette page est affichée parce que vous n'avez pas encore de page
+                d'activité pour votre module.
+              </h2>
+
+              <p>Pour créer une page</p>
+              <ol type="number">
+                <li>
+                  Ajoutez un dossier pour votre activité avec un nom de type
+                  <strong>Axx</strong>
+                  dans le dossier
+                  <strong>module</strong>
+                  <i>( exemple A00 )</i>
+                </li>
+                <li>
+                  Ajoutez un fichier pour votre page avec un nom de type
+                  <strong>Pxx.vue</strong>
+                  dans le dossier
+                  <strong>Axx</strong>
+                  <i>( exemple P01.vue )</i>
+                </li>
+                <li>
+                  Definissez le
+                  <strong>$data</strong>
+                  de la page
+                </li>
+              </ol>
+            </div>
+          </div>
+          <div class="box">
+            <p class="doc">
+              Visitez
+              <a :href="docLink" target="blank">la documentation</a>
+              pour plus de details ...
+            </p>
+          </div>
+        </template>
+        <!----------------------- Branching ---------------------->
+        <template v-if="errorType === 'errorMenuBranching'">
+          <div class="red-box">
+            <div class="box">
+              <h2>Erreur d'embranchement.</h2>
+
+              <p>
+                Vous ne pouvez pas avoir de pages d'embranchement(s) dans le
+                dossier A00
+              </p>
+            </div>
+          </div>
+          <div class="box">
+            <p class="doc">
+              Visitez
+              <a
+                :href="`https://fcaddocumentation.netlify.app/guide/structure.html#pages-d-embranchements-dans-un-dossier`"
+                target="blank"
+              >
+                la documentation
+              </a>
+              pour plus de details ...
+            </p>
+          </div>
+        </template>
+        <!------------------------- 404 -------------------------->
+        <template v-if="errorType === '404'">
+          <div class="red-box">
+            <div class="box">
+              <h2>404 OOPSSS!</h2>
+              <p>Il semble que la page que vous cherchez n'existe pas.</p>
+            </div>
+          </div>
+          <div class="box">
+            <p class="doc">
+              Retrourner à la
+              <router-link :to="{ name: 'menu' }">page d'accueil</router-link>
+            </p>
+          </div>
+        </template>
+      </div>
+    </div>
+    <!------------------- END ERRORS COMPONENTS -------------------->
+    <v-row v-if="errorGroup === 'component'" class="warning-error">
+      <v-col class="box-error">
+        <div class="yellow-box">
+          <h2>
+            {{ errorTitle || 'Attention erreur dans le composant' }}
+          </h2>
+          <p>{{ errorText }}</p>
+          <br />
+          <p>Veuillez corriger:</p>
+          <template
+            v-if="
+              errorsList.constructor == Array ||
+              errorsList.constructor == Object
+            "
+          >
+            <ul>
+              <li
+                v-for="err in errorsList"
+                :key="`error_type_${err}`"
+                v-html="err"
+              ></li>
+            </ul>
+          </template>
+          <template v-if="errorsList.constructor == String">
+            <ul>
+              <li v-html="errorsList"></li>
+            </ul>
+          </template>
+        </div>
+        <div class="box">
+          <p class="doc">
+            Visitez
+            <a href="https://fcaddocumentation.netlify.app/" target="blank">
+              la documentation
+            </a>
+            pour plus de details
+          </p>
+        </div>
+      </v-col>
+    </v-row>
+
+    <!---------------------- END ERRORS COMPONENTS ------------------->
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'AppBaseErrorDisplay',
+  props: {
+    errorGroup: { type: String, default: 'application' }, //group can be: application or component
+    errorType: { type: String, note: 'Error Message', default: '' },
+    errorTitle: {
+      type: String,
+      note: 'Title to display for the error',
+      default: ''
+    },
+    errorText: {
+      type: String,
+      note: 'text to display for the error',
+      default:
+        'Vous avez une/des erreure(s) qui empêche(ent) le bon rendu du composant'
+    },
+    errorsList: { type: Array, default: () => [] },
+    docLink: {
+      type: String,
+      default: 'https://fcaddocumentation.netlify.com/guide/proceduries.html',
+      note: 'Documentation link'
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+//**** DO NOT TOUCHE ****/
+//**** ERROR ****/
+.fd_Error-type {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: center;
+  margin-top: 20%;
+  padding-bottom: 30px;
+  background-color: white;
+  -webkit-box-shadow: 3px 3px 23px 0px rgba(0, 0, 0, 0.43);
+  -moz-box-shadow: 3px 3px 23px 0px rgba(0, 0, 0, 0.43);
+  box-shadow: 3px 3px 23px 0px rgba(0, 0, 0, 0.43);
+
+  .box-error {
+    width: 100%;
+
+    .red-box {
+      background: #cd5356;
+      padding-top: 50px;
+      padding-bottom: 20px;
+    }
+
+    .box {
+      width: 60%;
+      margin: 0 auto;
+    }
+
+    h2 {
+      display: inline-block;
+      color: white;
+      margin-left: 10%;
+      padding-bottom: 20px;
+      border-bottom: 0.5px solid white;
+    }
+
+    p {
+      color: white;
+      margin-left: 10%;
+      font-size: 1.5rem;
+
+      &.doc {
+        padding-top: 20px;
+        color: #404040;
+      }
+    }
+
+    ol {
+      color: #fff;
+      margin-left: 10%;
+      font-size: 1.3rem;
+    }
+
+    a {
+      color: #cd5357;
+
+      &:hover {
+        color: #404040;
+      }
+    }
+  }
+}
+
+//**** WARNING ****/
+.warning {
+  background: #f5d41b;
+  padding: 20px 15px;
+
+  .title {
+    font-weight: 900;
+    font-size: 1.25rem;
+    text-transform: uppercase;
+    color: #292929;
+    padding-bottom: 20px;
+    border-bottom: 0.5px solid #292929;
+
+    .iL {
+      margin-right: 15px;
+    }
+
+    .iR {
+      margin-left: 10px;
+    }
+  }
+
+  .info {
+    font-size: 1.04rem;
+    color: #292929;
+    font-weight: 500;
+  }
+}
+
+.warning-error {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: center;
+  margin-top: 10%;
+  padding-bottom: 30px;
+  background-color: white;
+  -webkit-box-shadow: 3px 3px 23px 0px rgba(0, 0, 0, 0.43);
+  -moz-box-shadow: 3px 3px 23px 0px rgba(0, 0, 0, 0.43);
+  box-shadow: 3px 3px 23px 0px rgba(0, 0, 0, 0.43);
+
+  .box-error {
+    width: 100%;
+    padding-left: 0;
+    padding-right: 0;
+
+    .yellow-box {
+      background: #f5d41b;
+      padding-top: 50px;
+      padding-bottom: 20px;
+      padding-right: 10%;
+      padding-left: 10%;
+
+      h2 {
+        width: 100%;
+        display: inline-block;
+        color: #292929;
+        padding-bottom: 20px;
+        border-bottom: 0.5px solid #292929;
+      }
+
+      p {
+        color: #292929;
+        font-size: 1.3rem;
+
+        &.doc {
+          padding-top: 20px;
+          color: #404040;
+        }
+      }
+
+      ul {
+        color: #292929;
+        margin-left: 5%;
+        font-size: 1.3rem;
+      }
+    }
+
+    .box {
+      padding-right: 10%;
+      padding-left: 10%;
+
+      .doc {
+        color: #292929;
+        font-size: 1.3rem;
+        padding-top: 25px;
+
+        a {
+          color: #f5bc00;
+
+          &:hover {
+            color: #f5ac01;
+          }
+        }
+      }
+    }
+  }
+}
+
+.pop-error {
+  //display: block!important;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+
+  .fd_Error-type {
+    width: 100%;
+    padding-bottom: 30px;
+    background-color: white;
+    -webkit-box-shadow: 3px 3px 23px 0px rgba(0, 0, 0, 0.43);
+    -moz-box-shadow: 3px 3px 23px 0px rgba(0, 0, 0, 0.43);
+    box-shadow: 3px 3px 23px 0px rgba(0, 0, 0, 0.43);
+
+    .box-error {
+      width: 100%;
+
+      h2 {
+        font-weight: 500;
+        width: 100%;
+
+        svg {
+          margin-right: 20px;
+        }
+      }
+
+      ul {
+        color: #fff;
+        margin-left: 12%;
+
+        &.doc {
+          color: #292929;
+        }
+      }
+    }
+  }
+}
+</style>