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

package/src/components/AppCompPopUp.vue

@@ -1,523 +0,0 @@
-<template>
-  <div>
-    <div v-show="errors.length <= 0" class="p_popup">
-      <!----------------------- POPUP CUSTOM ---------------------------->
-      <b-modal
-        v-show="isPopupCustom === true"
-        id="popup-custom"
-        ref="popup-custom"
-        :content-class="[pType, pName]"
-        :no-fade="animationOff"
-        :header-close-label="$t('button.alert_close')"
-        v-bind="pContent.$bvArgs"
-        @cancel="$cancel(pContent.cb_$cancel)"
-        @ok="$confirm(pContent.cb_$confirm)"
-        @hidden="$close(pContent.cb_$close)"
-      >
-        <template v-slot:default>
-          <div class="box-content-popUp" v-html="pContent.hypertext" />
-        </template>
-      </b-modal>
-      <!----------------------- OTHER POPUP  ---------------------------->
-
-      <b-modal
-        v-show="isPopupCustom === false"
-        :id="getAppState"
-        ref="someModal"
-        :header-close-label="$t('button.alert_close')"
-        :hide-footer="true"
-        :content-class="[pType, pName, typeRetro, getAppState]"
-        :no-fade="animationOff"
-        @hidden="$close(pContent.cb_$close)"
-      >
-        <!------------------- Custom DIV: Use to add any custom Css (visual) to your Popup ------------------------->
-        <div v-show="pType == 'popup-retro'" class="pop-deco"></div>
-        <!----------------------------- END Custom DIV  ------------------------------------->
-        <div class="popUp-title">
-          <h4 v-html="pTitle"></h4>
-        </div>
-
-        <div v-if="contentLength > 0" class="box-content-popUp">
-          <div
-            v-for="(content, _key, index) of pContent"
-            :id="`col-ref-${_key}`"
-            :key="`ref_${_key}_${content}`"
-            class="col-popUp"
-          >
-            <!-------- Create TEXT element -------------->
-            <p
-              v-if="_key.includes('text') && !_key.includes('hyper')"
-              :id="`${_key}_${index}`"
-              :key="_key"
-            >
-              {{ content }}
-            </p>
-
-            <!-------- Create HTMLelement -------------->
-            <div
-              v-else-if="_key.includes('hypertext')"
-              :id="`${_key}_${index}`"
-              :key="_key"
-              v-html="content"
-            />
-
-            <!-------- Create IMAGE element ------------->
-            <img
-              v-else-if="_key.includes('image')"
-              :id="`${_key}_${index}`"
-              :key="_key"
-              :src="require(`@/assets/${content.path}`)"
-              :alt="content.label || 'image'"
-            />
-
-            <!-------- Create LINK element -------------->
-            <a
-              v-else-if="_key.includes('link')"
-              :id="`${_key}_${index}`"
-              :key="_key"
-              :href="content.ref"
-              target="_blank"
-              :title="`${content.label}`"
-            >
-              {{ content.label }}
-            </a>
-
-            <!-------- Create VIDEO element ------------->
-            <video
-              v-else-if="_key.includes('video')"
-              :id="`${_key}_${index}`"
-              :key="_key"
-              :src="require(`@/assets/${content}`)"
-              controls
-              disablepictureinpicture
-              controlslist="nofullscreen nodownload"
-            />
-
-            <!--------Create AUDIO element--------------->
-            <audio
-              v-else-if="_key.includes('audio')"
-              :id="`${_key}_${index}`"
-              :key="_key"
-              :src="require(`@/assets/${content}`)"
-              controls
-              controlslist="nodownload"
-            />
-          </div>
-        </div>
-        <!--------Default Button of Pop up --------------->
-        <div v-show="pType === 'popup-avert'" class="col-bouton">
-          <app-base-button
-            id="btn-cancel-popup"
-            :name-acces="'Annuler'"
-            class="btn-cancel"
-            :title="$t('button.cancel_pop')"
-            @click="$cancel(pContent.cb_$cancel)"
-          >
-            {{ $t('button.cancel_pop') }}
-          </app-base-button>
-          <app-base-button
-            id="btn-confirm-popup"
-            :name-acces="'Confirmer'"
-            class="btn-confirm"
-            :title="$t('button.confirm_pop')"
-            @click="$confirm(pContent.cb_$confirm)"
-          >
-            {{ $t('button.confirm_pop') }}
-          </app-base-button>
-        </div>
-        <div
-          v-if="pType === 'popup-retro' || pType === 'popup-info'"
-          id="popup-bottom-buttons"
-        >
-          <button
-            id="popup-retro-close-btn"
-            :title="$t('button.alert_close')"
-            @click="$close(pContent.cb_$close)"
-          >
-            {{ $t('button.alert_close') }}
-          </button>
-          <portal-target
-            id="popup_retro_nav_wrapper"
-            name="popup_retro_nav"
-          ></portal-target>
-        </div>
-        <div v-if="pType === 'popup-noanswer'" id="popup-bottom-buttons">
-          <button
-            id="popup-retro-close-btn"
-            :title="$t('button.quiz_close_no_answer')"
-            @click="$close(pContent.cb_$close)"
-          >
-            {{ $t('button.quiz_close_no_answer') }}
-          </button>
-          <portal-target
-            id="popup_retro_nav_wrapper"
-            name="popup_retro_nav"
-          ></portal-target>
-        </div>
-      </b-modal>
-    </div>
-    <div v-show="errors.length > 0" class="pop-error">
-      <app-base-error-display :errors-list="errors" :doc-link="docLink" />
-    </div>
-  </div>
-</template>
-
-<script>
-//import { mapGetters } from 'vuex'
-export default {
-  name: 'AppCompPopUp',
-  data() {
-    return {
-      pType: 'popup-info',
-      pName: 'noName',
-      typeRetro: 'none',
-      pContent: {},
-      pContenttype: 'pg_normal',
-      pTitle: '',
-      errors: [],
-      docLink:
-        'https://fcaddocumentation.netlify.app/guide/ressources.html#creer-un-popup-custom',
-      animationOff: false
-    }
-  },
-  computed: {
-    contentLength() {
-      let size = null
-      if (this.pType && this.pType !== 'popup-custom') {
-        if (this.pContent && Object.keys(this.pContent).length > 0)
-          size = Object.keys(this.pContent).length
-      }
-      return size
-    },
-    isPopupCustom() {
-      if (this.pType && this.pType === 'popup-custom') return true
-      return false
-    },
-    popup() {
-      /**
-       * Get the istance of the bvModal that is open and return it as our active popup
-       */
-      let id
-      if (this.isPopupCustom) id = 'popup-custom'
-      else id = `${this.getAppState}`
-      const p = this.$bvModal._vm.$children.find((p) => p.id === id)
-      return p
-    },
-    getAppState() {
-      let toto
-      if (!this.$store.state.$appStore.isDr) {
-        toto = 'not-popup-custom  full '
-      } else {
-        toto = 'not-popup-custom lites '
-      }
-      return toto
-    }
-  },
-  mounted() {
-    this.$bus.$on('popup-open', (e) => {
-      if (e) {
-        this.validateContent(e)
-      }
-    })
-    this.$bus.$on('popup-close', (options, cb) => {
-      this.$close(options, cb)
-    })
-
-    this.$bus.$on('retro-type', (b) => {
-      this.retroType(b)
-    })
-  },
-  methods: {
-    /**
-     * @description - Validate the data for the component
-     * @param {Object} data
-     */
-    validateContent(data) {
-      const typeList = [
-        'popup-info',
-        'popup-retro',
-        'popup-avert',
-        'popup-custom',
-        'popup-noanswer'
-      ]
-      const callbacksFunctionList = [
-        'cb_$confirm',
-        'cb_$cancel',
-        'cb_$open',
-        'cb_$close'
-      ]
-
-      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
-          switch (data.type) {
-            case 'popup-custom':
-              KeywordsList = ['hypertext', '$bvArgs'] // accepted keyword in value declartion for pop-up custom
-
-              for (const key of Object.keys(data.value)) {
-                // search if key match lists
-                if (![...KeywordsList, ...callbacksFunctionList].includes(key))
-                  this.errors.push('Invalid key declaration in value')
-
-                // Validating content of hypertext key
-                if (
-                  key.includes('hypertext') &&
-                  data.value[key].constructor != String
-                ) {
-                  this.errors.push(
-                    'Invalid assigment for hypertext. Must be a String'
-                  )
-                }
-
-                // validating content of cb_$ keys
-                if (
-                  key.includes('cb_$') &&
-                  data.value[key].constructor != Function
-                ) {
-                  this.errors.push(
-                    `Invalid assigment for ${key}. Must be a Function`
-                  )
-                }
-
-                // validating content of $bvArgs keys. Must be an array.
-                // validating content of $bvArgs. Content in $bvArgs must be objects
-                if (
-                  (key.includes('$bvArgs') &&
-                    data.value[key].constructor != Array) ||
-                  (data.value[key].constructor === Array &&
-                    data.value[key].length < 1)
-                ) {
-                  this.errors.push(
-                    `Invalid assigment for ${key}. Must be an Array of Objects`
-                  )
-                } else if (
-                  key.includes('$bvArgs') &&
-                  data.value[key].constructor === Array &&
-                  data.value[key].length > 0
-                ) {
-                  let count = 0
-                  data.value[key].forEach((element) => {
-                    if (element.constructor !== Object && count < 1) {
-                      this.errors.push(
-                        `Invalid value(s) found in ${key}. Must be an Array of Objects`
-                      )
-                      count++
-                    }
-                  })
-                }
-              }
-              break
-
-            default:
-              KeywordsList = [
-                'title',
-                'text_',
-                'image_',
-                'video_',
-                'audio_',
-                'link_',
-                'hypertext_'
-              ] // accepted keyword in value declartion for pop-up custom
-
-              for (let key of Object.keys(data.value)) {
-                const savedKey = key // backup key
-
-                if (key.includes('_') && !key.includes('cb_$'))
-                  key = `${key.split('_')[0]}_`
-
-                // search if key match lists
-                if (![...KeywordsList, ...callbacksFunctionList].includes(key))
-                  this.errors.push('Invalid key declaration in value')
-
-                // Validating content of link element
-                if (key.includes('link') && !data.value[savedKey].ref) {
-                  this.errors.push('Missing ref for link')
-                }
-
-                // validating content of image element
-                if (key.includes('image') && !data.value[savedKey].path)
-                  this.errors.push('Missing path for image')
-
-                // validating content of cb_$ keys
-                if (
-                  key.includes('cb_$') &&
-                  data.value[key].constructor != Function
-                )
-                  this.errors.push(
-                    `Invalid assigment for ${key}. Must be a Function`
-                  )
-              }
-          }
-        } else this.errors.push('Invalid object declaration for value')
-      } else this.errors.push('Missing argument - value')
-
-      if (process.env.NODE_ENV === 'development') {
-        for (const err of this.errors)
-          console.warn(
-            `%c WARNING!>>> POP-UP: ${err} `,
-            'background: orange; color: white; display: block; border-radius:5px; margin:5px;'
-          )
-      }
-
-      // No error detected proced
-      if (!this.errors.length) {
-        if (data.type === 'popup-custom') {
-          this.pContent = data.value
-        } else {
-          const { title, ...filtered } = data.value
-          this.pContent = filtered
-          this.pTitle = title
-        }
-        this.pType = data.type
-        this.pName = data.name
-        const cb_open = data.value.cb_$open || null
-        this.$open(cb_open)
-      }
-    },
-
-    /**
-     * @param {String} type
-     */
-    retroType(type) {
-      this.typeRetro = type
-      return this.typeRetro
-    },
-    /**
-     * @description - method to open the popup
-     * @param {Function} cb
-     */
-    $open(cb) {
-      if (this.animationOff === true) this.animationOff = false
-      this.popup.show()
-      if (cb && typeof cb === 'function') cb()
-    },
-    /**
-     * @description - method to close the popup
-     * @param {Function} cb
-     */
-    $close(options, cb) {
-      //this.animationOff =true
-      if (options && options.animationOff) {
-        this.animationOff = options.animationOff
-      }
-      this.popup.hide()
-      //reset popup class name
-      this.typeRetro = 'none'
-      if (cb && typeof cb === 'function') cb()
-    },
-    /**
-     * @description - method for action confirm
-     * @param {Function} cb
-     */
-    $confirm(cb) {
-      cb = cb || null
-      this.popup.hide()
-      if (cb && typeof cb === 'function') cb()
-    },
-    /**
-     * @description - method for action cancel
-     * @param {Function} cb
-     */
-    $cancel(cb) {
-      cb = cb || null
-      this.popup.hide()
-      if (cb && typeof cb === 'function') cb()
-    }
-  }
-}
-</script>
-<style lang="scss">
-.modal {
-  .modal-dialog {
-    max-width: 100% !important;
-    height: 100%;
-    margin: 0 0 !important;
-
-    // DR pop-up
-    .lites {
-      width: 450px;
-      margin: 10% auto;
-
-      .modal-header {
-        border-bottom: 0 solid transparent;
-      }
-
-      #popup-bottom-buttons {
-        display: none;
-      }
-    }
-
-    // full minou pop-up
-    .full {
-      &.popup-retro {
-        width: 50%;
-        height: 100%;
-        position: relative;
-        border-radius: 0;
-        border-width: 0;
-
-        .modal-header {
-          position: absolute;
-          top: 0;
-          right: 0;
-          z-index: 2;
-          border-bottom: 0 solid transparent;
-        }
-
-        .modal-body {
-          #popup-bottom-buttons {
-            position: absolute;
-            bottom: 0;
-            margin-bottom: 65px;
-
-            #popup-retro-close-btn {
-              display: inline-block;
-              vertical-align: top;
-            }
-
-            #popup_retro_nav_wrapper {
-              display: inline-block;
-              vertical-align: top;
-            }
-          }
-        }
-      }
-
-      &.popup-info,
-      &.popup-noanswer {
-        width: 660px;
-        margin: 10% auto;
-        .modal-header {
-          border-bottom: 0 solid transparent;
-        }
-
-        #popup_retro_nav_wrapper {
-          display: inline-block;
-          order: 1;
-        }
-
-        #popup-retro-close-btn {
-          order: 2;
-        }
-      }
-    }
-  }
-}
-</style>