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

package/src/components/AppCompNoteCall.vue

@@ -0,0 +1,161 @@
+<!--
+ @ Description:
+ @ What it does:
+-->
+<template>
+  <div
+    :id="`rnt_${pageRef}__${stripRefNote}`"
+    :ref="`#rnt_${stripRefNote}`"
+    :data-ref="`nt_${pageRef}__${stripRefNote}`"
+    class="callEndNote"
+  >
+    <button
+      v-if="!error"
+      class="nrlm"
+      tabindex="0"
+      :title="$t('text.title_link_call')"
+      :aria-label="`${$t('label.note_reference')} ${stripRefNote}`"
+      @click="openNote()"
+    >
+      <sup>{{ stripRefNote }}</sup>
+    </button>
+
+    <div v-else class="nrlm error-Nc" tabindex="0">
+      <sup>{{ $t('text.error') }}</sup>
+    </div>
+  </div>
+</template>
+<script>
+import { mapState } from 'pinia'
+import { useAppStore } from '../module/stores/appStore'
+export default {
+  props: {
+    refNote: {
+      type: String,
+      default: ' '
+    },
+    pageRef: {
+      type: String,
+      default: ' '
+    }
+  },
+  data() {
+    return {
+      notes: null
+    }
+  },
+  computed: {
+    ...mapState(useAppStore, ['getNotes', 'getWidgetOpen']),
+    // Return the number for the note
+    stripRefNote() {
+      let newRef
+
+      let ref = this.refNote
+      let toStrip = ref.indexOf('_')
+      newRef = this.refNote.substr(toStrip + 1)
+      return newRef
+    },
+    linkedNote() {
+      const _notes = this.getNotes(
+        this.$route.meta.activity_ref,
+        this.$route.meta.id
+      )
+      if (!_notes) return null
+      let thisPageNotes = null
+
+      for (let p of _notes) {
+        //find the related page and get its notes
+        if (Object.keys(p)[0] !== this.pageRef) continue
+        thisPageNotes = p[this.pageRef]
+      }
+      //return weither the note exist or note
+      return thisPageNotes && thisPageNotes.find((n) => n.id == this.refNote)
+    },
+
+    error() {
+      let err = false
+      if (!this.linkedNote) {
+        err = true
+        console.warn(
+          `%c WARNING!>>> AppCompNoteCall: cette note n'existe pas nt_${this.pageRef}__${this.stripRefNote}.`,
+          'background: orange; color: white; display: block; margin:5px;'
+        )
+      }
+      return err
+    }
+  },
+  beforeUnmount() {
+    this.$bus.$off('close-widget', this.onCloseWidget)
+    this.$bus.$off('credit-note', this.onCreditNote)
+  },
+  mounted() {
+    this.$bus.$on('close-widget', this.onCloseWidget)
+    this.$bus.$on('credit-note', this.onCreditNote)
+  },
+  methods: {
+    onCreditNote(data) {
+      this.notes = data.note
+    },
+    onCloseWidget() {
+      let el = document.getElementsByClassName('callEndNote')
+
+      for (let element of el) {
+        element.setAttribute('datacurrentnote', false)
+      }
+    },
+    //open the widget and give information to highlight
+    openNote() {
+      if (!this.getWidgetOpen) {
+        this.$bus.$emit('open-notes')
+
+        setTimeout(() => {
+          this.$bus.$emit('note-to-show', this.$el)
+
+          let e = document.getElementsByClassName('callEndNote')
+          let t = this.$el.getAttribute('id')
+
+          for (let element of e) {
+            element.setAttribute('dataCurrentnote', false)
+            if (element.id === t) {
+              element.setAttribute('dataCurrentnote', true)
+            }
+          }
+        }, 200)
+      } else {
+        this.$bus.$emit('close-widget')
+        this.$bus.$emit('note-to-show', this.$el)
+        let e = document.getElementsByClassName('callEndNote')
+        let t = this.$el.getAttribute('id')
+
+        for (let element of e) {
+          element.setAttribute('dataCurrentnote', false)
+          if (element.id === t) {
+            element.setAttribute('dataCurrentnote', true)
+          }
+        }
+      }
+    },
+
+    lookForElement(elId) {
+      let clcn = document.getElementsByClassName('endNoteLink')
+
+      for (let element of clcn) {
+        if (element.id === elId) {
+          return element
+        }
+      }
+    }
+  }
+}
+</script>
+<style lang="scss">
+.callEndNote {
+  display: inline-block;
+  margin-left: -4px;
+
+  .error-Nc {
+    color: red;
+    font-weight: bold;
+  }
+}
+</style>

package/src/components/AppCompNoteCredit.vue

@@ -0,0 +1,491 @@
+<!--
+  ----------------- MUST ADD ERROR GESTION ------------------
+  ----------------- MUST ADD css ------------------
+
+ @ Description:
+ @ What it does:
+-->
+<template>
+  <div id="noteCredit" :class="{ openW: showWidget }">
+    <app-base-button
+      id="close-nc"
+      :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 class="box-nc">
+      <app-base-error-display
+        v-if="errorData.length"
+        :error-group="'component'"
+        :error-title="'ERREUR: NOTES ET CREDITS'"
+        :errors-list="errorData"
+        :error-text="`Vous avez une/des erreur(s) dans la création des notes/crédits.`"
+      ></app-base-error-display>
+      <template v-else>
+        <div v-if="notes" class="ctn-note">
+          <p class="t-note">{{ $t('text.title_note') }}</p>
+          <div id="notes-list">
+            <template
+              v-for="(note, index) of notes"
+              :key="`nt_${note.page_ref}__${note.id.substring(3)}`"
+            >
+              <div class="note-item">
+                <span>{{ index + 1 }}.</span>
+                <app-base-button
+                  :id="`nt_${note.page_ref}__${note.id.substring(3)}`"
+                  type="button"
+                  :title="$t('text.title_link_bas')"
+                  class="backToNoteRef"
+                  :data-ref="`rnt_${note.page_ref}__${note.id.substring(3)}`"
+                  :note-ref="`rnt_${note.page_ref}__${note.id.substring(3)}`"
+                  :pageref="note.page_ref"
+                  :class="
+                    note.hasError ? 'widget-note note-error' : 'widget-note'
+                  "
+                  @click="
+                    handleNoteDisplay(
+                      `nt_${note.page_ref}__${note.id.substring(3)}`
+                    )
+                  "
+                >
+                  <div
+                    class="btref-content"
+                    data-content=""
+                    v-html="`${note.text}`"
+                  ></div>
+                </app-base-button>
+              </div>
+            </template>
+          </div>
+        </div>
+        <div v-if="credits" class="ctn-credit">
+          <p class="t-crdt">{{ $t('text.title_credit') }}</p>
+
+          <ul id="credits-list">
+            <li
+              v-for="(credit, index) of credits"
+              :key="`credit_${index + 1}`"
+              :ref="`#nt_${index + 1}`"
+              v-html="credit"
+            ></li>
+          </ul>
+        </div>
+      </template>
+    </div>
+  </div>
+</template>
+<script>
+import { mapState, mapActions } from 'pinia'
+import { useAppStore } from '../module/stores/appStore'
+import { validateObjType } from '../shared/validators'
+
+export default {
+  props: {},
+  data() {
+    return {
+      current: false,
+      showWidget: false,
+      sideBarIsOpen: null,
+      prevNote: null,
+      shouldDeactivate: false,
+      errorData: [],
+      notes: null,
+      credits: null
+    }
+  },
+  computed: {
+    ...mapState(useAppStore, [
+      'getDataNoteCredit',
+      'getAllActivities',
+      'getCurrentPage',
+      'getNotes',
+      'getCredits'
+    ])
+  },
+  created() {},
+  beforeUnmount() {
+    this.$bus.$off('credit-note', this.onCreditNote)
+    this.$bus.$off('toggle-widget', this.onToggleWidget)
+    this.$bus.$off('close-widget', this.close)
+    this.$bus.$off('note-to-show', this.onNoteToShow)
+    this.$bus.$off('side-bar-open', this.onSidebarVisible)
+  },
+  mounted() {
+    // close or open widget depending which btn was click
+    this.$bus.$on('toggle-widget', this.onToggleWidget)
+    //close widget
+    this.$bus.$on('close-widget', this.close)
+    // show widget when note click and higligth note
+    this.$bus.$on('note-to-show', this.onNoteToShow)
+    this.$bus.$on('side-bar-open', this.onSidebarVisible)
+  },
+  methods: {
+    ...mapActions(useAppStore, ['updateWidgetOpen']),
+    getPageNotes(data) {
+      if (!data) return
+      const _notes = data
+      let formatedNotes = []
+      _notes.forEach((g) => {
+        let count = 0
+        Object.values(g)[0].map((n) => {
+          count++
+          if (
+            this.validateData('note', {
+              n,
+              details: `${count} ${Object.keys(g)[0]} `
+            })
+          )
+            return
+          n['page_ref'] = `${Object.keys(g)[0]}`
+        })
+        //Add all the note to the temp array
+        formatedNotes.push(...Object.values(g)[0])
+      })
+
+      return formatedNotes
+    },
+
+    getPageCredits(data) {
+      if (!data) return
+
+      let credits = data
+      let count = 0
+      for (const c of credits) {
+        count++
+        if (this.validateData('credit', { c, details: count })) return
+      }
+
+      return credits
+    },
+    setPageNotesAndCredits(data) {
+      const { notes, credits } = data
+      this.notes = this.getPageNotes(notes)
+      this.credits = this.getPageCredits(credits)
+    },
+    /**
+     * @description method to validate that the data for the note and credit.
+     * @param {String} ctx context of the validation : credit | note.
+     * @param {String| Object} data the data to be validate-  Object type for note and String type for credit
+     * @return {boolean}
+     */
+    validateData(ctx, data) {
+      let errConsole = []
+      if (this.errorData.length) this.errorData = [] //reset the error tracker
+
+      switch (ctx) {
+        case 'note': {
+          if (data.constructor !== Object) {
+            this.errorData.push(
+              "Mauvais d'éclaration de la note. Doit être de type <i>Objet</i>"
+            )
+            throw Error(
+              `Unexpected definition the note. Expecting Object but received ${typeof data}`
+            )
+          }
+
+          let stringType = ['id', 'text'] //expected attribute in the note declaration
+
+          let { errorInConsole, errorList } = validateObjType(
+            data.n,
+            {
+              stringType
+            },
+            null,
+            `Note ${data.details}`
+          )
+
+          if (errorInConsole.length) errConsole.push(...errorInConsole)
+          if (errorList.length) this.errorData.push(...errorList)
+          break
+        }
+        case 'credit':
+          if (data.c.constructor !== String) {
+            this.errorData.push(
+              `Mauvaise déclaration du <b>crédit ${data.details}</b>. Doit être de type <i>String</i>`
+            )
+            console.warn(
+              `\n 💥 Invalid type declaration for 👉\x1B[1mcredit ${data.details} 👈\x1B[0m. Expecting type String  \uD83D\uDEABtype ${typeof data.c}`
+            )
+          }
+      }
+      if (errConsole.length) {
+        errConsole.forEach((err) => console.warn(err))
+      }
+      return this.errorData.length
+    },
+    onNoteToShow(el) {
+      this.showWidget = true
+      this.updateWidgetOpen(true)
+
+      if (el) {
+        let ref = el.getAttribute('data-Ref')
+
+        const reg1 = /.*(P\d{2}(_E\d{2})?).*/gm //reg for the content of data-ref
+        const id = `$1`
+        const pageRef = ref.replace(reg1, id) //replace all to page id
+
+        if (this.sideBarIsOpen && pageRef.length == 3)
+          this.$bus.$emit('close-sidebar', 'ctxBranching') //send close signal if sibebar is open and note to focus is in parent page
+
+        this.removehighlight()
+
+        let elAtt = document.getElementsByClassName('widget-note')
+        let arr = Array.from(elAtt)
+
+        for (let element of arr) {
+          if (ref == element.getAttribute('id')) {
+            element.setAttribute('datacurrent', true)
+            element.focus()
+          }
+        }
+      }
+    },
+
+    onToggleWidget(data) {
+      if (data.type !== 'noteCredit') return (this.showWidget = false)
+      const { notes, credits } = data.content
+
+      this.setPageNotesAndCredits({ notes, credits })
+      this.showWidget = !this.showWidget
+      this.updateWidgetOpen(this.showWidget) //update data in store
+    },
+    close() {
+      let elNote = document.getElementsByClassName('widget-note')
+      let elCall = document.getElementsByClassName('callEndNote')
+
+      let arrNote = Array.from(elNote)
+      let arrCall = Array.from(elCall)
+
+      for (let element of arrNote) {
+        element.setAttribute('datacurrent', false)
+      }
+
+      for (let element of arrCall) {
+        element.setAttribute('datacurrentnote', false)
+      }
+      this.showWidget = false
+      this.updateWidgetOpen(false)
+    },
+    removehighlight() {
+      let elAtt = document.querySelectorAll("[datacurrent='true']")
+
+      let arr = Array.from(elAtt)
+
+      for (let element of arr) {
+        element.setAttribute('datacurrent', false)
+      }
+    },
+
+    focusNote(el, page) {
+      this.remove()
+      const DOMPages = document.getElementsByClassName(`app-page`)
+      const targetPage = DOMPages.namedItem(page) //get the desired page
+
+      let e = document.getElementsByClassName('callEndNote')
+
+      if (!targetPage) return
+      let nts = targetPage.getElementsByClassName('callEndNote')
+
+      let t = el.getAttribute('note-ref')
+      let s = document.querySelectorAll(`[data-ref="${t}"]`)
+
+      if (s && s[0]) s[0].setAttribute('datacurrent', true)
+
+      for (let element of e) {
+        element.setAttribute('datacurrentnote', false) //reset the data attribute of all notes
+      }
+      let targetNote = nts.namedItem(t)
+
+      if (targetNote) {
+        targetNote.setAttribute('datacurrentnote', true)
+
+        targetNote.childNodes[0].focus()
+      } else {
+        el.setAttribute('aria-disabled', 'true')
+        el.setAttribute('disabled', 'true')
+        el.querySelector('.btref-content').setAttribute(
+          'data-content',
+          '\u26A0\uFE0F'
+        )
+        el.querySelector('div').style =
+          'color:red; text-decoration:line-through;'
+        el.style.color = 'red'
+
+        el.removeEventListener('click', this.handleNoteDisplay)
+      }
+      this.prevNote = el
+    },
+
+    remove() {
+      let e = document.getElementsByClassName('widget-note')
+      for (let element of e) {
+        element.setAttribute('datacurrent', false)
+      }
+    },
+
+    onSidebarVisible(state) {
+      this.sideBarIsOpen = state
+    },
+
+    /**
+     *  @description method handle the behavior of note displaying
+     *  @param {Object} evt - the event that trigger the action
+     *  @emits event - 'open-sidebar' to display notes in branch | 'close-sidebar' to display not in parent when branch open
+     *
+     */
+    handleNoteDisplay(ref) {
+      /*
+       * Note:
+       * Element target (button) is wrongly referenced when Screen-reader is active and element selected With TAB
+       * The Div in the button is selected not the button.
+       * This ensure that the button is always set as targeted element
+       */
+      const widgetContent = document.getElementsByClassName('backToNoteRef') //target all the button of in the notes widget
+      const elTarget = widgetContent.namedItem(ref) // Target current button
+      const pageRef = elTarget.getAttribute('pageref')
+
+      if (!this.sideBarIsOpen) this.prevNote = null //reset previous when sidebar is opened
+
+      let prevPageref = this.prevNote
+        ? this.prevNote.getAttribute('pageref')
+        : null
+
+      switch (true) {
+        case pageRef && pageRef.length > 3: {
+          //this is the branching page Send message to open the side bar
+          this.$bus.$emit('open-sidebar', {
+            ctx: 'ctxBranching',
+            e: pageRef,
+            persist: this.sideBarIsOpen || pageRef == prevPageref //this will prevent the sidebar to close when the note is in same page
+          })
+          //Should set focus after side bar is opened. Need to delay to not interfere with side bar focus
+          pageRef == prevPageref
+            ? setTimeout(() => this.focusNote(elTarget, pageRef), 100)
+            : setTimeout(() => this.focusNote(elTarget, pageRef), 400)
+
+          break
+        }
+        default:
+          //Should have the side bar close if it is opened and note is in parent page
+          if (this.sideBarIsOpen && pageRef.length == 3)
+            this.$bus.$emit('close-sidebar', 'ctxBranching')
+
+          return setTimeout(() => this.focusNote(elTarget, pageRef), 100) //Need to delay to not have side bar close animation finished
+      }
+
+      this.prevNote = elTarget
+    }
+  }
+}
+</script>
+<style lang="scss">
+#noteCredit {
+  display: none;
+  pointer-events: none;
+  position: absolute;
+  left: 75px;
+  top: 0;
+  width: 419px;
+  transition: left 0.5s ease-in-out;
+
+  &.openW {
+    pointer-events: all;
+    display: block;
+    opacity: 1;
+  }
+
+  #close-nc {
+    padding: 11px;
+    position: absolute;
+    right: 24px;
+    margin-bottom: 0;
+
+    &:focus {
+      box-shadow: inherit !important;
+    }
+  }
+
+  // .note-txt {
+  //   pointer-events: none;
+  // }
+
+  .box-nc {
+    margin-top: 54px;
+    overflow-y: auto;
+    min-height: 160px;
+    max-height: 321px;
+    padding-right: 26px;
+
+    .t-note {
+      margin-bottom: 8px;
+    }
+
+    #notes-list {
+      .note-item {
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        margin-bottom: 5px;
+
+        color: #deeff8;
+
+        span {
+          font-size: 0.65rem;
+          padding: 8px 0 0 0;
+        }
+
+        .backToNoteRef {
+          width: 90%;
+          margin-left: 5px;
+          padding-left: 5px;
+
+          .btref-content {
+            text-align: left;
+          }
+        }
+      }
+    }
+  }
+
+  #credits-list {
+    list-style-type: none;
+    padding: 0;
+    margin: 0;
+  }
+  #notes-list {
+    padding: 0;
+    margin: 0;
+
+    .widget-note {
+      padding: 5px 0;
+
+      &.note-error {
+        background-color: firebrick;
+      }
+
+      .btref-content {
+        pointer-events: none;
+      }
+    }
+  }
+  .overlay-w {
+    width: 100%;
+    height: 100%;
+  }
+}
+
+.app-nav {
+  &.show,
+  &:hover {
+    .ctn-w {
+      #noteCredit {
+        left: 120px;
+      }
+    }
+  }
+}
+</style>