fix #1276 route and polish passage newspaper article label (#1280)

impresso · Sep 26, 2024 · 73c9c0e · 73c9c0e
1 parent 017b9c9
commit 73c9c0e
Show file tree

Hide file tree

Showing 7 changed files with 184 additions and 126 deletions.
diff --git a/src/components/TextReuseClusterMonitor.vue b/src/components/TextReuseClusterMonitor.vue
@@ -11,9 +11,11 @@
           <h4
             class="font-size-inherit sans m-0 px-2"
             v-html="
-              $t('numbers.passages', {
-                n: totalItems
-              })
+              isLoading
+                ? $t('loading')
+                : $t('numbers.passages', {
+                    n: totalItems
+                  })
             "
           ></h4>
           <i-dropdown
@@ -81,6 +83,8 @@ const items = ref<TextReusePassage[]>([])
 const orderBy = ref<string>('-date')
 const limit = ref<number>(10)
 const offset = ref<number>(0)
+const isLoading = ref<boolean>(false)
+
 const shouldUseSearchFilters = ref<boolean>(false)
 
 const pagination = computed(() => ({
@@ -94,8 +98,18 @@ const changePage = (page: number) => {
   loadPassages()
 }
 
+const query = computed(() => {
+  return {
+    filters: shouldUseSearchFilters.value ? props.filters : [],
+    offset: offset.value,
+    limit: limit.value,
+    order_by: orderBy.value
+  }
+})
+
 const loadPassages = async () => {
   const filters = shouldUseSearchFilters.value ? props.filters : []
+  isLoading.value = true
   const { data, total } = await textReusePassageService.find({
     query: {
       filters: filters.concat([{ type: 'textReuseCluster', q: props.item.id }]),
@@ -106,6 +120,7 @@ const loadPassages = async () => {
   })
   totalItems.value = total
   items.value = data
+  isLoading.value = false
 }
 
 onMounted(async () => {

diff --git a/src/components/TextReuseExplorerPage.vue b/src/components/TextReuseExplorerPage.vue
@@ -180,7 +180,6 @@
             class="m-3 pb-4 border-bottom"
             v-for="item in passages"
             :key="item.id"
-            @click="handleTextReusePassageClick"
           />
         </div>
       </template>
@@ -391,29 +390,37 @@ export default {
         [CommonQueryParameters.SearchFilters]: serializeFilters(optimizeFilters(filters))
       })
     },
-    handleTextReusePassageClick(passage) {
-      // eslint-disable-next-line
-      console.debug('[TextReuseExplorer] handleTextReusePassageClick', passage)
-      // filter exists, update it
-      const filterExists = this.filters.some(({ type }) => type === 'textReuseCluster')
-      const trcFilter = FilterFactory.create({
-        type: 'textReuseCluster',
-        q: passage.textReuseCluster.id
-      })
-      if (filterExists) {
-        this.handleFiltersChanged(
-          this.filters.map(filter => {
-            if (filter.type === 'textReuseCluster') {
-              return trcFilter
-            }
-            return filter
-          })
-        )
-        return
-      } else {
-        this.handleFiltersChanged([...this.filters, trcFilter])
-      }
-    },
+    // UNUSED CODE
+    // handleTextReusePassageClick(passage) {
+    //   // eslint-disable-next-line
+    //   console.debug('[TextReuseExplorer] handleTextReusePassageClick', passage)
+    //   if (typeof passage.textReuseCluster?.id !== 'string') {
+    //     console.warn(
+    //       '[TextReuseExplorer] handleTextReusePassageClick \n - no textReuseCluster.id found in passage:',
+    //       passage
+    //     )
+    //     return
+    //   }
+    //   // filter exists, update it
+    //   const filterExists = this.filters.some(({ type }) => type === 'textReuseCluster')
+    //   const trcFilter = FilterFactory.create({
+    //     type: 'textReuseCluster',
+    //     q: passage.textReuseCluster.id
+    //   })
+    //   if (filterExists) {
+    //     this.handleFiltersChanged(
+    //       this.filters.map(filter => {
+    //         if (filter.type === 'textReuseCluster') {
+    //           return trcFilter
+    //         }
+    //         return filter
+    //       })
+    //     )
+    //     return
+    //   } else {
+    //     this.handleFiltersChanged([...this.filters, trcFilter])
+    //   }
+    // },
     handleAddToCollectionClick(item) {
       // eslint-disable-next-line
       console.debug('[TextReuseExplorer] handleAddToCollectionClick', item)

diff --git a/src/components/modules/ItemSelector.vue b/src/components/modules/ItemSelector.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="ItemSelector d-inline" v-on:click.prevent.stop="selectItem">
+  <div class="ItemSelector d-inline" v-on:click.prevent.stop="selectItem" title="See details">
     <slot></slot>
     <span v-if="label" class="ItemSelector_label underline">{{ label }}</span>
     <span v-else-if="!hideIcon" class="dripicons-enter icon-link"></span>
@@ -19,58 +19,58 @@ export default {
   props: {
     uid: {
       type: String,
-      required: true,
+      required: true
     },
     item: {
       type: Object,
-      required: true,
+      required: true
     },
     type: {
       type: String,
-      required: true,
+      required: true
     },
     defaultClickActionDisabled: {
       type: Boolean,
-      default: false,
+      default: false
     },
     label: {
-      type: String,
+      type: String
     },
     searchIndex: {
       type: String,
-      default: 'search',
+      default: 'search'
     },
     hideIcon: {
       type: Boolean,
-      default: false,
-    },
+      default: false
+    }
   },
   methods: {
     selectItem() {
       const params = {
         item: {
           ...this.item,
-          uid: this.uid,
+          uid: this.uid
         },
-        type: this.type,
+        type: this.type
       }
       if (!this.defaultClickActionDisabled) {
         this.selectionMonitorStore.show({
           item: this.item,
           searchIndex: this.searchIndex,
           type: this.type,
-          applyCurrentSearchFilters: true,
+          applyCurrentSearchFilters: true
         })
       }
 
       this.$emit('click', {
         params,
-        defaultActionExecuted: !this.defaultClickActionDisabled,
+        defaultActionExecuted: !this.defaultClickActionDisabled
       })
-    },
+    }
   },
   computed: {
-    ...mapStores(useSelectionMonitorStore),
+    ...mapStores(useSelectionMonitorStore)
   }
 }
 </script>

diff --git a/src/components/modules/lists/ClusterItem.vue b/src/components/modules/lists/ClusterItem.vue
@@ -1,19 +1,28 @@
 <template>
   <div class="ClusterItem">
     <span class="d-flex align-self-stretch flex-shrink-0 selection-indicator" />
-    <TextReusePassageItemLabel :item="textReusePassageItem" class="border-left pl-2 my-2 small border-tertiary" />
+    <TextReusePassageItemLabel :item="textReusePassageItem" class="border-left pl-2 my-2" />
 
     <div class="rounded border border-tertiary bg-white shadow-sm p-1">
-      <Ellipsis v-bind:max-height="300" v-bind:initialHeight="200" :additional-height="50" @click.prevent.stop>
+      <Ellipsis
+        v-bind:max-height="300"
+        v-bind:initialHeight="200"
+        :additional-height="50"
+        @click.prevent.stop
+      >
         <p class="text-sample p-2">
           <span>{{ item.textSampleContent }}</span>
         </p>
       </Ellipsis>
     </div>
     <div class="small text-muted mb-2" v-html="textReuseClusterSummary"></div>
 
-    <b-button variant="outline-secondary" size="sm" class="TextReusePassageItem_compareBtn float-left rounded shadow-sm"
-      @click="handleClusterClick">
+    <b-button
+      variant="outline-secondary"
+      size="sm"
+      class="TextReusePassageItem_compareBtn float-left rounded shadow-sm"
+      @click="handleClusterClick"
+    >
       {{ $t('seeTextReuseCluster') }}
     </b-button>
   </div>
@@ -30,7 +39,7 @@ export default {
   name: 'ClusterItem',
   components: {
     TextReusePassageItemLabel,
-    Ellipsis,
+    Ellipsis
   },
   props: {
     selected: Boolean,
@@ -39,8 +48,8 @@ export default {
     showLink: Boolean,
     item: {
       // must be an instance of TextReuseCluster
-      type: Object,
-    },
+      type: Object
+    }
   },
   methods: {
     handleClusterClick() {
@@ -60,9 +69,9 @@ export default {
         applyCurrentSearchFilters: false,
         displayTimeline: false,
         displayActionButtons: false,
-        displayCurrentSearchFilters: false,
+        displayCurrentSearchFilters: false
       })
-    },
+    }
   },
   computed: {
     ...mapStores(useSelectionMonitorStore),
@@ -71,15 +80,15 @@ export default {
         id: this.item.textSampleArticle.id,
         title: this.item.textSampleTitle,
         newspaper: {
-          id: this.item.textSampleArticle.id.split('-')[0],
+          id: this.item.textSampleArticle.id.split('-')[0]
         },
         date: this.item.textSampleDate,
         pageNumbers: [1],
         issue: {
-          id: this.item.textSampleArticle.id.split('-i')[0],
+          id: this.item.textSampleArticle.id.split('-i')[0]
         },
         article: {
-          id: this.item.textSampleArticle.id,
+          id: this.item.textSampleArticle.id
         },
         content: this.item.textSampleContent,
         textReuseCluster: {
@@ -88,28 +97,28 @@ export default {
           lexicalOverlap: this.item.lexicalOverlap,
           timeDifferenceDay: this.item.timeDifferenceDay,
           article: {
-            id: this.item.textSampleArticle.id,
-          },
-        },
+            id: this.item.textSampleArticle.id
+          }
+        }
       }
     },
     textReuseClusterSummary() {
       const clusterSizeLabel = this.$tc('numbers.clusterSize', this.item.clusterSize, {
-        n: this.$n(this.item.clusterSize),
+        n: this.$n(this.item.clusterSize)
       })
       const lexicalOverlapLabel = this.$tc('numbers.lexicalOverlap', this.item.lexicalOverlap, {
-        n: this.$n(Math.round(this.item.lexicalOverlap * 100) / 100),
+        n: this.$n(Math.round(this.item.lexicalOverlap * 100) / 100)
       })
 
       return this.$t('textReuseClusterSummary', {
         clusterSize: clusterSizeLabel,
         lexicalOverlap: lexicalOverlapLabel,
         timespan: this.$tc('numbers.days', this.item.timeDifferenceDay, {
-          n: this.item.timeDifferenceDay,
-        }),
+          n: this.item.timeDifferenceDay
+        })
       })
-    },
-  },
+    }
+  }
 }
 </script>
 
@@ -127,7 +136,8 @@ export default {
 }
 </style>
 
-<i18n lang="json">{
+<i18n lang="json">
+{
   "en": {
     "numbers": {
       "days": "<span class='number'>{n}</span> day|<span class='number'>{n}</span> days"
@@ -136,4 +146,5 @@ export default {
     "seeTextReuseCluster": "Compare passages in cluster",
     "textReuseClusterSummary": "Cluster size: {clusterSize} with {lexicalOverlap} over {timespan}."
   }
-}</i18n>
+}
+</i18n>
diff --git a/src/components/modules/lists/TextReusePassageItem.vue b/src/components/modules/lists/TextReusePassageItem.vue
@@ -2,7 +2,7 @@
   <!-- on hover, show the buttons -->
   <div class="TextReusePassageItem">
     <div>
-      <TextReusePassageItemLabel :item="item" class="border-left pl-2 my-2 small border-tertiary" />
+      <TextReusePassageItemLabel :item="item" class="border-left pl-2 my-2" />
     </div>
     <!-- {{ item.collections }} -->
     <div class="rounded border border-tertiary bg-white shadow-sm p-1">