fcad-core-dragon 2.1.1 → 2.1.2

package/src/components/AppBaseErrorDisplay.vue

@@ -1,438 +1,438 @@
-<!--
- @ 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>
+<!--
+ @ 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>