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

package/src/components/AppCompNoteCall.vue

@@ -1,106 +1,141 @@
 <!--
-  ----------------- MUST DO STYLE!! -----------------------
  @ Description:
  @ What it does:
 -->
-
 <template>
   <div
-    :id="`rnt_${stripRefNote}`"
+    :id="`rnt_${pageRef}__${stripRefNote}`"
     :ref="`#rnt_${stripRefNote}`"
+    :data-ref="`nt_${pageRef}__${stripRefNote}`"
     class="callEndNote"
-    :dataRef="`nt_${stripRefNote}`"
   >
-    <b-link
+    <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>
-    </b-link>
+    </button>
 
-    <div v-else>
-      <sup>error</sup>
+    <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 {
-      route: this.$route.meta.activity_ref,
-      notes: null,
-      jsons: null
+      notes: null
     }
   },
   computed: {
+    ...mapState(useAppStore, ['getNotes', 'getWidgetOpen']),
     // Return the number for the note
     stripRefNote() {
-      let ref = this.refNote
       let newRef
+
+      let ref = this.refNote
       let toStrip = ref.indexOf('_')
       newRef = this.refNote.substr(toStrip + 1)
-
       return newRef
     },
-    error() {
-      /////  -------------------------- MUST REDO INFORMATION NOT FROM JSON ANYMORE
-      let er = false
-      // let info = this.jsons
+    linkedNote() {
+      const _notes = this.getNotes(
+        this.$route.meta.activity_ref,
+        this.$route.meta.id
+      )
+      if (!_notes) return null
+      let thisPageNotes = null
 
-      // if (info) {
-      //   if (Object.keys(info.note).length === 0) {
-      //     er = true
-      //     console.warn(
-      //       '%c WARNING!>>> AppCompNoteCall: Your note file is empty, note cannot be call',
-      //       'background: orange; color: white; display: block; margin:5px;'
-      //     )
-      //   } else if (
-      //     info.note.value[this.stripRefNote - 1] === ' ' ||
-      //     info.note.value[this.stripRefNote - 1] === undefined
-      //   ) {
-      //     er = true
-      //     console.warn(
-      //       '%c WARNING!>>> AppCompNoteCall: The note you try to call doesnt existe.',
-      //       'background: orange; color: white; display: block; margin:5px;'
-      //     )
-      //   } else {
-      //     //check if value are the same :
-      //     ///https://stackoverflow.com/questions/7376598/in-javascript-how-do-i-check-if-an-array-has-duplicate-values
-      //     const items = [...document.getElementsByClassName('callEndNote')]
-
-      //     let cltn = []
-      //     items.forEach((element) => {
-      //       cltn.push(element.getAttribute('dataref'))
-      //     })
-      //     const l = cltn.some((e, i) => cltn.indexOf(e) < i)
-      //     if (l) {
-      //       er = true
-      //       console.warn(
-      //         '%c WARNING!>>> AppCompNoteCall: You call this note twice',
-      //         'background: orange; color: white; display: block; margin:5px;'
-      //       )
-      //     }
-      //   }
-      // }
+      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)
+    },
 
-      return er
+    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
     }
   },
-  mounted() {},
+  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() {
-      this.$bus.$emit('note-to-show', this.$el)
+      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')
 
@@ -118,9 +153,9 @@ export default {
   display: inline-block;
   margin-left: -4px;
 
-  &.b {
-    margin-left: 0 !important ;
-    margin-right: -4px !important ;
+  .error-Nc {
+    color: red;
+    font-weight: bold;
   }
 }
 </style>