update Person event card (with note) + help popup on nosketch search …

…bar + reorder author in ressource GT citation
chartes · Jun 4, 2024 · 4cfc664 · 4cfc664
1 parent 3b5a4f9
commit 4cfc664
Show file tree

Hide file tree

Showing 6 changed files with 150 additions and 62 deletions.
diff --git a/.env.development b/.env.development
@@ -3,9 +3,17 @@ VUE_APP_APP_URL=http://localhost:9091
 
 # SERVICES
 # - DB Person
-VUE_APP_DB_ADMIN=https://endp.chartes.psl.eu/endp-person/admin
-VUE_APP_DB_API=https://endp.chartes.psl.eu/endp-person/api
-VUE_APP_DB_SHOW=https://endp.chartes.psl.eu/endp-person/endp-person
+#VUE_APP_DB_ADMIN=https://endp.chartes.psl.eu/endp-person/admin
+#VUE_APP_DB_API=https://endp.chartes.psl.eu/endp-person/api
+#VUE_APP_DB_SHOW=https://endp.chartes.psl.eu/endp-person/endp-person
+
+#VUE_APP_DB_ADMIN=https://dev.chartes.psl.eu/endp-person/admin
+#VUE_APP_DB_API=https://dev.chartes.psl.eu/endp-person/api
+#VUE_APP_DB_SHOW=https://dev.chartes.psl.eu/endp-person/endp-person
+
+VUE_APP_DB_ADMIN=http://127.0.0.1:8888/endp-person/admin
+VUE_APP_DB_API=http://127.0.0.1:8888/endp-person/api
+VUE_APP_DB_SHOW=http://127.0.0.1:8888/endp-person/endp-person
 
 # - NoSketch (Indexation Engine)
 VUE_APP_NOSKETCH_APP=https://nosketch-engine.lamop.fr/

diff --git a/.env.production b/.env.production
@@ -7,6 +7,7 @@ VUE_APP_DB_ADMIN=https://endp.chartes.psl.eu/endp-person/admin
 VUE_APP_DB_API=https://endp.chartes.psl.eu/endp-person/api
 VUE_APP_DB_SHOW=https://endp.chartes.psl.eu/endp-person/endp-person
 
+
 # - NoSketch (Indexation Engine)
 VUE_APP_NOSKETCH_APP=https://nosketch-engine.lamop.fr/
 

diff --git a/src/components/PersonDataTimeline.vue b/src/components/PersonDataTimeline.vue
@@ -10,7 +10,8 @@
             :disabled="isAtTop"></button>
     <div class="timeline-scroll-container" ref="scrollContainer">
       <div class="timeline-container">
-        <div v-for="group in groupedEvents" :key="group.date" class="timeline-item" :class="{ 'dot-selected': selectedDate === group.date }">
+        <div v-for="group in groupedEvents" :key="group.date" class="timeline-item"
+             :class="{ 'dot-selected': selectedDate === group.date }">
           <div @click="togglePopup($event, group.date)" class="timeline-dot"
                :class="{ 'without-date': group.date === 'date_inconnue' || group.date === 'Date inconnue' }"></div>
 
@@ -33,13 +34,20 @@
                     <div class="popup-description">
                   <span v-if="event.thesaurus_term_person" class="event-term"><u>{{
                       event.thesaurus_term_person.topic
-                    }} : </u>{{ spaceAroundCommas(event.thesaurus_term_person.term_fr) }} ({{ spaceAroundCommas(event.thesaurus_term_person.term_la) }})</span>
+                    }} : </u>{{
+                      spaceAroundCommas(event.thesaurus_term_person.term_fr)
+                    }} ({{ spaceAroundCommas(event.thesaurus_term_person.term_la) }})</span>
                       <br v-if="event.thesaurus_term_person">
                       <span v-if="event.place_term" class="event-place"><u>Lieu</u> : {{
                           event.place_term.term_fr
                         }} ({{ event.place_term.term_la }})</span>
+                      <br v-if="event.place_term">
+                      <span v-if="event.comment"><u>Note</u> :
+                        {{ strippedContent(event.comment) }}
+                      </span>
                     </div>
-                    <router-link :to="`/facsimile/${formatImageIdentifiers(event.image_url)}`" target="_blank" v-if="event.image_url">
+                    <router-link :to="`/facsimile/${formatImageIdentifiers(event.image_url)}`" target="_blank"
+                                 v-if="event.image_url">
                       <span><i class="fas fa-book"></i> Aller au fac-similé</span>
                     </router-link>
                   </div>
@@ -179,6 +187,9 @@ export default {
   },
   methods: {
     spaceAroundCommas,
+    strippedContent(content) {
+      return content.replace(/<[^>]+>/g, '');
+    },
     /**
      * Navigate in the timeline's popup like a carousel
      * @param group
@@ -234,7 +245,7 @@ export default {
     initScroll() {
       this.hasNoScroll = Math.abs(this.$refs.scrollContainer.scrollHeight - this.$refs.scrollContainer.clientHeight) < 1;
 
-      if (! this.hasNoScroll) this.$refs.scrollContainer.addEventListener('scroll', this.handleScroll)
+      if (!this.hasNoScroll) this.$refs.scrollContainer.addEventListener('scroll', this.handleScroll)
       else this.$refs.scrollContainer.removeEventListener('scroll', this.handleScroll)
 
       // this.$refs.scrollContainer.addEventListener('wheel', this.handleWheel, {passive: false});
@@ -360,7 +371,7 @@ export default {
      * @private
      */
     _collapseTimeline() {
-      this.isTimelineCollapsed = ! this.isTimelineCollapsed;
+      this.isTimelineCollapsed = !this.isTimelineCollapsed;
     },
 
     /**
@@ -460,13 +471,14 @@ export default {
 
 .timeline-scroll-container {
   min-height: 86px;
-  max-height: min( 50rem, calc(100vh - 200px));
+  max-height: min(50rem, calc(100vh - 200px));
   overflow-y: auto;
   border-top: 1px solid #A7A7A7;
   border-bottom: 1px solid #A7A7A7;
 
   scrollbar-width: none; /* Firefox */
-  -ms-overflow-style: none;  /* IE 10+
+  -ms-overflow-style: none;
+  /* IE 10+
 }
 
 .timeline-scroll-container::-webkit-scrollbar {
@@ -545,7 +557,7 @@ export default {
 
 .timeline-popup {
   width: 100%;
-  background: rgba(255,255,255, 0.95);
+  background: rgba(255, 255, 255, 0.95);
   padding: 20px 20px 60px;
   box-shadow: 0px 0px 12px 0 #00000033;
   border-radius: 10px;

diff --git a/src/components/RegisterNoSketchSearchBox.vue b/src/components/RegisterNoSketchSearchBox.vue
@@ -4,17 +4,27 @@
       <p class="subtitle nosketch_search-container__label is-5" @click="toggleBox">
         <span>Recherche dans les registres</span>
       </p>
-      <button @click="toggleBox($event)" class="open-nosketch-search" :class="isBoxExpanded ? 'is-opened' : ''" />
+      <button @click="toggleBox($event)" class="open-nosketch-search" :class="isBoxExpanded ? 'is-opened' : ''"/>
     </div>
     <div class="container-search" v-if="isBoxExpanded">
       <div class="help">Pour la période {{ yearRange[0] }}-{{ yearRange[1] }}</div>
       <div class="control">
-          <input class="input" type="text" placeholder="Votre recherche" v-model="NoSketchTermSearch">
+        <input class="input" type="text" placeholder="Votre recherche" v-model="NoSketchTermSearch"
+               @focus="showHelp = true"
+               @input="showHelp = false">
+        <div class="popup" v-if="showHelp">
+            <div class="chevron"></div>
+            <div class="popup-content">
+              <!-- add cross to close the popup -->
+              <div class="close-info-popup" @click="closeInfoPopup"></div>
+              <u>Note</u> : La recherche est sensible à la casse et supporte les expressions régulières (regex).
+            </div>
+          </div>
       </div>
       <p class="control">
         <button class="button is-info" @click="goNoSketchResults">Rechercher</button>
       </p>
-      <img src="@/assets/icons/no-sketch-engine-logo.png" alt="Logo" class="image sketch-image" />
+      <img src="@/assets/icons/no-sketch-engine-logo.png" alt="Logo" class="image sketch-image"/>
     </div>
   </div>
 </template>
@@ -34,6 +44,7 @@ export default {
     return {
       NoSketchTermSearch: "",
       isBoxExpanded: false,
+      showHelp: false,
     }
   },
   computed: {
@@ -69,7 +80,11 @@ export default {
     toggleBox(event) {
       event.stopPropagation();
       this.isBoxExpanded = !this.isBoxExpanded;
+      this.showHelp = false;
     },
+    closeInfoPopup() {
+      this.showHelp = false;
+    }
   }
 }
 </script>
@@ -190,4 +205,64 @@ button.is-info:hover {
   }
 
 }
+
+.help {
+  width: 100%;
+  margin: 40px 0 30px;
+  font-family: var(--font-secondary);
+  font-size: 18px;
+  font-weight: 500;
+  color: #4A4A4A;
+  text-align: center;
+}
+
+.popup {
+  position: absolute;
+  top: 55px; /* Adjust based on the height of the input field */
+  left: 0;
+  width: calc(100% - 12px);
+  background: white;
+  border: 1px solid var(--light-brown);
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  padding: 10px;
+  font-size: 15px;
+  z-index: 1000;
+  border-radius: 4px;
+}
+
+.popup::before {
+  content: "";
+  position: absolute;
+  top: -10px;
+  left: 20px; /* Adjust to align the chevron with the input */
+  border-left: 10px solid transparent;
+  border-right: 10px solid transparent;
+  border-bottom: 10px solid var(--light-brown);
+}
+
+.popup::after {
+  content: "";
+  position: absolute;
+  top: -11px;
+  left: 19px; /* Adjust to align the chevron with the input */
+  border-left: 11px solid transparent;
+  border-right: 11px solid transparent;
+  border-bottom: 11px solid var(--light-brown);
+}
+
+.popup-content {
+  text-align: left;
+}
+
+.close-info-popup {
+  position: absolute;
+  top: 5px;
+  right: 5px;
+  width: 12px;
+  height: 12px;
+  background: url("@/assets/images/b_Close_20x20.svg") center / cover;
+  cursor: pointer;
+}
+
+
 </style>