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

package/src/components/AppCompPopUpNext.vue

@@ -0,0 +1,504 @@
+<!-- About this Component--
+ *@ Description: Application component to show instructions in a modal.
+ *@ What it does: This component uses the VDialog component to create a Popup. 2 types of popups can be display:
+  - end of activities popup (popup-endActivity). Default used by the application at the end of activities (AppCompNavigation)
+  - custom popup (popup-custom)- this allow user to defined custom popup using the power of VDialog. Must respect properties defined by VDialog. For more info, refer to https://vuetifyjs.com/en/components/dialogs/#usage.
+  It validates the content of the popup before rendering. Will render error view if there are some errors in content definition
+  * What it needs: data must contain:
+     - type(string) : 'popup-endAcivity' || 'popup-custom || popup-info'
+     - value (Object): {$bvArgs(Object), template (String)}
+
+  *⚠️@Note :There can only be Popup instance of this component in the application. You can ask the application to open the Popup with you defined popup
+ *@ Exemple: creating a custom popup using the VDialog props
+
+            const myCustomProp = {
+              type: 'popup-custom',
+              value: {
+              //⚠️IMPORTANT:Only props of VDialog must be listed in $bvArgs. Check VDialog documentation for full list of props
+                $bvArgs: {
+                  centered: true,
+                  width: 'auto',
+                  scrollable: false,
+                  'max-width': '600'
+                }
+              //⚠️IMPORTANT:Must have a template attribute
+              tempate:`<div><h4>Exemple of custom popup</h4><p>Hello World</p></div>`
+              }
+            }
+         // Now we can ask the application to open our custom popup
+         this.$bus.$emit('open-popup', myCustomProp)
+-->
+
+<template>
+  <div>
+    <template v-if="!errors.length">
+      <!------------ End Activity --------------------------->
+
+      <v-dialog
+        id="popUp"
+        :model-value="popupType == 'popup-endActivity' && dialogue"
+        :class="pType"
+        width="auto"
+        scrollable
+        centered
+        @after-leave="$close(pContent.cb_$close)"
+      >
+        <focus-trap v-model:active="dialogue" :prevent-scroll="true">
+          <div class="pop-outside">
+            <div class="pop-header">
+              <app-base-button
+                id="close-pop"
+                class="btn-ghost-ico"
+                :title="$t('button.closePopUp')"
+                :aria-label="$t('button.closePopUp')"
+                @click="$close()"
+              >
+                <svg aria-hidden="true" focusable="false">
+                  <use href="#close-square-icon" />
+                </svg>
+              </app-base-button>
+            </div>
+            <div class="pop-containt">
+              <div class="pop-box">
+                <div id="popHeader">
+                  <div id="dialogTitle" class="p-title" v-html="pTitle"></div>
+                </div>
+                <div class="box-content-popUp"></div>
+                <div
+                  id="end-activity"
+                  :aria-hidden="pType !== 'popup-endActivity'"
+                  class="popup-bottom-buttons"
+                ></div>
+              </div>
+            </div>
+          </div>
+        </focus-trap>
+      </v-dialog>
+      <!------------ POPUP INFO ----------------------------->
+      <v-dialog
+        id="popUp"
+        :model-value="popupType == 'popup-info' && dialogue"
+        :class="pType"
+        width="auto"
+        scrollable
+        centered
+        v-bind="pArgs"
+        @after-leave="$close(pContent.cb_$close)"
+      >
+        <focus-trap v-model:active="dialogue" :prevent-scroll="true">
+          <div class="pop-outside">
+            <div class="pop-header">
+              <app-base-button
+                id="close-pop"
+                class="btn-ghost-ico"
+                :title="$t('button.closePopUp')"
+                :aria-label="$t('button.closePopUp')"
+                @click="$close()"
+              >
+                <svg aria-hidden="true" focusable="false">
+                  <use href="#close-square-icon" />
+                </svg>
+              </app-base-button>
+            </div>
+            <div class="pop-containt">
+              <div class="pop-box">
+                <div id="popHeader">
+                  <p id="dialogTitle" class="p-title" v-html="pTitle"></p>
+                </div>
+                <div class="box-content-popUp">
+                  <template v-if="contentLength > 0">
+                    <template v-for="(content, _key, index) of pContent">
+                      <!-------- Create TEXT element -------------->
+                      <p
+                        v-if="_key.includes('text') && !_key.includes('hyper')"
+                        :id="`${_key}_${index}`"
+                        :key="_key"
+                        class="p-txt"
+                      >
+                        {{ content }}
+                      </p>
+
+                      <!-------- Create HTMLelement -------------->
+                      <div
+                        v-else-if="_key.includes('hypertext')"
+                        :id="`${_key}_${index}`"
+                        :key="`hyp_${_key}`"
+                        v-html="content"
+                      />
+
+                      <!-------- Create IMAGE element ------------->
+                      <img
+                        v-else-if="_key.includes('image')"
+                        :id="`${_key}_${index}`"
+                        :key="`img_${_key}`"
+                        class="p-img"
+                        :src="content.path"
+                        :alt="content.label || 'image'"
+                      />
+
+                      <!-------- Create LINK element -------------->
+                      <a
+                        v-else-if="_key.includes('link')"
+                        :id="`${_key}_${index}`"
+                        :key="`lnk_${_key}`"
+                        :href="content.ref"
+                        class="p-a"
+                        target="_blank"
+                        :title="`${content.label}`"
+                      >
+                        {{ content.label }}
+                      </a>
+
+                      <!-------- Create VIDEO element ------------->
+                      <video
+                        v-else-if="_key.includes('video')"
+                        :id="`${_key}_${index}`"
+                        :key="`vid_${_key}`"
+                        :src="content"
+                        class="p-vid"
+                        controls
+                        disablepictureinpicture
+                        controlslist="nofullscreen nodownload"
+                      />
+
+                      <!--------Create AUDIO element--------------->
+                      <audio
+                        v-else-if="_key.includes('audio')"
+                        :id="`${_key}_${index}`"
+                        :key="`aud_${_key}`"
+                        :src="content"
+                        class="p-aud"
+                        controls
+                        controlslist="nodownload"
+                      />
+                    </template>
+                  </template>
+                </div>
+                <div
+                  id="end-activity"
+                  :aria-hidden="pType !== 'popup-endActivity'"
+                  class="popup-bottom-buttons"
+                ></div>
+              </div>
+            </div>
+          </div>
+        </focus-trap>
+      </v-dialog>
+      <!------------ POPUP CUSTOM --------------------------->
+      <v-dialog
+        id="popUp"
+        :model-value="popupType == 'popup-custom' && dialogue"
+        :class="pType"
+        v-bind="pArgs"
+        @after-leave="$close(pContent.cb_$close)"
+      >
+        <focus-trap v-model:active="dialogue" :prevent-scroll="true">
+          <component :is="{ template: pContent.template }"></component>
+        </focus-trap>
+      </v-dialog>
+      <!------------------------------- END POPUPS ------------------------------>
+    </template>
+    <app-base-error-display
+      v-show="errors.length"
+      :error-group="'component'"
+      :error-title="'ERREUR: COMPOSANT DE POPUP'"
+      :errors-list="errors"
+    />
+  </div>
+</template>
+
+<script>
+import { mapState, mapActions } from 'pinia'
+import { useAppStore } from '../module/stores/appStore'
+
+export default {
+  name: 'AppCompPopUp',
+
+  data() {
+    return {
+      pType: null,
+      pName: 'noName',
+      pContent: {},
+      pArgs: null,
+      pTitle: '',
+      errors: [],
+      docLink:
+        'https://fcaddocumentation.netlify.app/guide/ressources.html#creer-un-popup-custom',
+      animationOff: false,
+      dialogue: false
+    }
+  },
+  computed: {
+    ...mapState(useAppStore, ['getNotes', 'getWidgetOpen']),
+    contentLength() {
+      let size = null
+      if (!this.pType || this.pType !== 'popup-info') return
+
+      if (this.pContent && Object.keys(this.pContent).length > 0)
+        size = Object.keys(this.pContent).length
+      return size
+    },
+
+    popupType() {
+      if (!this.pType) return
+      return this.pType
+    }
+  },
+
+  mounted() {
+    this.$bus.$on('popup-open', this.validateContent)
+    this.$bus.$on('popup-close', this.$close)
+  },
+  beforeUnmount() {
+    this.$bus.$off('popup-open', this.validateContent)
+    this.$bus.$off('popup-close', this.$close)
+  },
+  methods: {
+    ...mapActions(useAppStore, ['updateEndPopUp']),
+    /**
+     * @description - Validate the data for the component
+     * @param {Object} data
+     */
+    validateContent(data) {
+      if (!data) return
+      const typeList = ['popup-custom', 'popup-endActivity', 'popup-info']
+
+      if (this.errors.length > 0) this.errors = []
+
+      if (data.type) {
+        // validate the type value of popup
+        const validType = typeList.includes(data.type)
+
+        if (!validType) this.errors.push('Invalid value for type')
+      } else this.errors.push('Missing argument: type')
+
+      // validate value of the popup according to popup type
+      // Content must be String|Object
+      if (data.value) {
+        let validObject = false
+        if (
+          data.value.constructor === Object &&
+          Object.keys(data.value).length > 0
+        )
+          validObject = true
+
+        if (validObject) {
+          let KeywordsList
+          //Validate the content accordint to popup type
+          switch (true) {
+            case data.type === 'popup-endActivity':
+              KeywordsList = ['template', 'title'] // accepted keywords in value declaration for pop-up end-Activity
+              break
+
+            case data.type === 'popup-custom':
+              KeywordsList = ['$bvArgs', 'template'] // accepted keywords in value declaration for pop-up custom
+              //Must have required keywords
+              for (const key of KeywordsList) {
+                if (data.value[key]) continue
+                this.errors.push(
+                  `Missing required attribute 👉${key}👈. Required attributes are ${[...KeywordsList]}`
+                )
+              }
+
+              break
+            default:
+              KeywordsList = [
+                'title',
+                'text_',
+                'image_',
+                'video_',
+                'audio_',
+                'link_',
+                'hypertext_',
+                '$bvArgs'
+              ] // accepted keyword in value declaration for pop-up custom
+          }
+          //validate each key in value content
+
+          for (let key of Object.keys(data.value)) {
+            let expectedKey = key
+            // search if key match lists
+            if (key.includes('_') && !key.includes('cb_$'))
+              expectedKey = `${key.split('_')[0]}_`
+
+            //===============================================
+            const test = (regexp) => regexp.test(expectedKey) //defining the testing function
+
+            switch (true) {
+              case ![...KeywordsList].includes(expectedKey):
+                this.errors.push(
+                  `Invalid attribute declaration 👉${key}👈 . Expected attributes are ${[...KeywordsList]}`
+                )
+                break
+
+              case test(/link/):
+                // Validating content of link element
+                if (!data.value[key].ref) {
+                  this.errors.push('Missing ref for link')
+                }
+                break
+
+              case test(/image/):
+                // Validating content of link element
+                if (!data.value[key].path) {
+                  this.errors.push('Missing path for image')
+                }
+                break
+
+              case test(/cb_\$/):
+                // validating content of cb_$ keys to be a function
+                if (data.value[key].constructor != Function)
+                  this.errors.push(
+                    `Invalid assignment for attribute 👉${expectedKey} popup. Must be a Function`
+                  )
+                break
+
+              case test(/\$bvArgs/):
+                // validating content of cb_$ keys to be a function
+
+                if (data.value[key].constructor != Object)
+                  this.errors.push(
+                    `Invalid assignment for attribute 👉${expectedKey} popup. Must be an Object`
+                  )
+
+                break
+
+              default: {
+                if (data.value[key].constructor != String) {
+                  this.errors.push(
+                    `Invalid assignment for attribute 👉${key} in popup. Must be a String`
+                  )
+                }
+              }
+            }
+          }
+        } else this.errors.push('Invalid object declaration for value')
+      } else this.errors.push('Missing argument - value')
+
+      if (import.meta.env.DEV) {
+        for (const err of this.errors)
+          console.warn(
+            `%c WARNING!>>> POP-UP: ${err} `,
+            'background: orange; color: white; display: block; border-radius:5px; margin:5px;'
+          )
+      }
+
+      if (!this.errors.length) {
+        if (data.type === 'popup-endActivity') {
+          const { title, ...filtered } = data.value
+          this.pContent = filtered
+          this.pTitle = title
+        } else {
+          const { title, $bvArgs, ...filtered } = data.value
+          this.pContent = filtered
+          this.pTitle = title
+          this.pArgs = $bvArgs // native VDialog props
+        }
+        this.pType = data.type
+        this.pName = data.name
+
+        if (this.pType == 'popup-endActivity')
+          this.updateEndPopUp(true) //This will handle the activation of the element in the portal
+        else this.updateEndPopUp(false) //This will handle the activation of the element in the portal
+        if (this.getWidgetOpen) {
+          this.$bus.$emit('close-widget')
+        }
+        this.$open()
+      }
+    },
+
+    /**
+     * @description - method to open the popup
+     * @param {Function} cb
+     */
+    $open(cb) {
+      this.dialogue = true
+    },
+    /**
+     * @description - method to close the popup
+     * @param {Function} cb
+     */
+    $close(options, cb) {
+      if (this.pType === 'popup-endActivity') this.updateEndPopUp(false)
+      this.dialogue = false
+    }
+  }
+}
+</script>
+<style lang="scss">
+.v-overlay__scrim {
+  background: none !important;
+}
+
+.popup-info {
+  .v-overlay__content {
+    width: 565px !important;
+    padding: 16px 24px 24px 24px;
+    overflow: hidden;
+
+    .pop-outside {
+      .pop-header {
+        display: flex;
+        flex-direction: row;
+        justify-content: flex-end;
+        width: 100%;
+
+        #close-pop {
+          margin-right: 2px;
+          margin-top: 2px;
+        }
+      }
+    }
+  }
+}
+
+.popup-endActivity {
+  .v-overlay__content {
+    max-height: 277px !important;
+    margin: 0 !important;
+    width: 100% !important;
+    max-width: 100% !important;
+
+    .pop-outside {
+      display: flex;
+      flex-direction: column;
+      padding: 24px;
+
+      .pop-header {
+        display: flex;
+        justify-content: flex-end;
+      }
+      .pop-containt {
+        display: flex;
+        justify-content: center;
+        position: relative;
+        bottom: 8px;
+
+        #popHeader {
+          display: flex;
+          justify-content: center;
+          margin-bottom: 24px;
+        }
+
+        .popup-bottom-buttons {
+          display: flex;
+          justify-content: center;
+
+          .btn {
+            &:first-child {
+              margin-right: 24px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+.popup-custom {
+  .v-overlay__content {
+    margin: 0 !important;
+    width: 100% !important;
+  }
+}
+</style>