Skip to content

Commit

Permalink
Fix/issue 1369 bug export collection (#1370)
Browse files Browse the repository at this point in the history
This PR refactors and improves the component InfoButton and fixes the issue #1369 at the same time

-  Refactored InfoButton component: moving contents in separate module faq.ts to improve readability and adding a warning message when the `name` prop does not match any entry in the FAQ contents.
- UI on CollectionDetailPage: removed a buggy button
- adjusted InfoButton offsets on Search page to improve dropdown display alignment on the search results page.

---------

Co-authored-by: Daniele Guido <[email protected]>
danieleguido and danieleguido authored Nov 8, 2024

Verified

This commit was signed with the committer’s verified signature.
Hazmi35 hzmi
1 parent 90276bf commit e955208
Showing 4 changed files with 52 additions and 34 deletions.
32 changes: 18 additions & 14 deletions src/components/CollectionDetailPage.vue
Original file line number Diff line number Diff line change
@@ -89,7 +89,7 @@
</Modal>
</b-navbar>

<b-navbar v-else type="light" variant="light">
<b-navbar v-else>
<section class="pt-2 pb-1">
<span class="label small-caps">{{ $t('collections') }}</span>
<h3 class="mb-1">{{ $t('all_collections_title') }}</h3>
@@ -112,24 +112,20 @@
</b-tabs>

<b-navbar
type="light"
variant="light"
class="px-0 py-0 border-bottom"
v-if="
tab.name !== TAB_RECOMMENDATIONS &&
(tab.name !== TAB_OVERVIEW || $route.params.collection_uid)
"
>
<b-navbar-nav v-if="$route.params.collection_uid">
<b-navbar-item class="p-2 ml-3 form-inline">
<form class="form-inline">
<router-link class="btn btn-outline-primary btn-sm" :to="searchPageLink">
{{ $t('actions.searchMore') }}
</router-link>
</form>
</b-navbar-item>
<b-navbar-nav v-if="$route.params.collection_uid" class="ml-3">
<form class="form-inline">
<router-link class="btn btn-outline-primary btn-sm" :to="searchPageLink">
{{ $t('actions.searchMore') }}
</router-link>
</form>
</b-navbar-nav>
<b-navbar-nav>
<b-navbar-nav v-if="$route.params.collection_uid" class="ml-3">
<b-button
@click="handleExportCollection"
size="sm"
@@ -139,7 +135,10 @@
<div>{{ $t('label_export_csv') }}</div>
<div class="dripicons-export ml-1"></div>
</b-button>
<info-button name="can-i-download-part-of-the-data" class="float-right ml-2" />
<info-button
name="am-i-allowed-to-automatically-mass-download-newspaper-images-and-texts"
class="float-right ml-2"
/>
</b-navbar-nav>
<b-navbar-nav v-if="tab.name === TAB_ARTICLES" class="ml-auto mr-2">
<!-- <b-navbar-form class="p-2 border-right">
@@ -390,7 +389,12 @@ export default {
filters: mapFilters(),
searchPageLink() {
if (!this.collection) {
return { name: 'search' }
return {
name: 'search',
query: SearchQuery.serialize({
filters: [{ type: 'collection', q: 'local-dg-*' }]
})
}
}
return {
name: 'search',
25 changes: 10 additions & 15 deletions src/components/base/InfoButton.vue
Original file line number Diff line number Diff line change
@@ -37,24 +37,14 @@ import { computed, ref } from 'vue'
import { arrow, offset, useFloating } from '@floating-ui/vue'
import { useClickOutside } from '@/composables/useClickOutside'
import { useSettingsStore } from '@/stores/settings'
import faqContent from '@/assets/faqpage.json'
import { FaqContentsMap } from '../../data/faq'
type MiddlewareData = {
arrow?: {
x: number
y: number
}
}
// flatten down the faqContent object to get a dict like {language : { id : <item> } }
const FaqContentsMap = Object.entries(faqContent).reduce((acc, [language, item]) => {
acc[language] = item.groups.reduce((acc, group) => {
group.faq.forEach(faq => {
acc[faq.id] = faq
})
return acc
}, {})
return acc
}, {})
const reference = ref(null)
const floating = ref(null)
@@ -99,9 +89,14 @@ const show = ref(false)
const store = useSettingsStore()
const activeLanguageCode = computed(() => store.language_code)
const content = computed(
() => FaqContentsMap[activeLanguageCode.value][props.name] || { title: props.name }
)
const content = computed(() => {
let content = FaqContentsMap[activeLanguageCode.value]?.[props.name]
if (!content) {
content = { title: props.name }
console.warn(`[InfoButton] 😖 props.name not found: "${props.name}" `)
}
return content
})
const togglePopover = () => (show.value = !show.value)
@@ -124,7 +119,7 @@ useClickOutside(floating, () => (show.value = false), reference)
.InfoButton .popover-body {
pointer-events: auto;
padding: var(--spacing-2-5);
max-width: 185px;
max-width: 200px;
background-color: var(--impresso-color-black) !important;
color: var(--impresso-color-paper) !important;
}
12 changes: 12 additions & 0 deletions src/data/faq.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
import faqContent from '@/assets/faqpage.json'
// flatten down the faqContent object to get a dict like {language : { id : <item> } }
export const FaqContentsMap = Object.entries(faqContent).reduce((acc, [language, item]) => {
acc[language] = item.groups.reduce((acc, group) => {
group.faq.forEach(faq => {
acc[faq.id] = faq
})
return acc
}, {})
return acc
}, {})
console.debug('[data/faq]', FaqContentsMap)
17 changes: 12 additions & 5 deletions src/pages/Search.vue
Original file line number Diff line number Diff line change
@@ -11,14 +11,21 @@
<autocomplete @submit="onSuggestion" @input-focus="focusHandler" :filters="filters" />
</template>
<div>
<b-button
class="float-right mx-3 btn-sm"
<button
class="float-right mx-3 btn btn-sm btn-outline-secondary"
@click="showModal('embeddings')"
data-testid="add-similar-words-button"
>
{{ $t('label_embeddings') }}
<info-button class="ml-1" name="how-are-word-embeddings-generated" />
</b-button>
<info-button
class="ml-1"
:offset-options="{
crossAxis: 100,
mainAxis: 20
}"
name="how-are-word-embeddings-generated"
/>
</button>
<b-form-group class="mx-3" data-testid="is-frontpage-toggle">
<b-form-checkbox v-model="isFront" switch v-bind:modelValue="true">
{{ $t('label_isFront') }}
@@ -123,7 +130,7 @@
{{ $t('query_export_csv') }}
<info-button
placement="left"
name="can-i-download-part-of-the-data"
name="am-i-allowed-to-automatically-mass-download-newspaper-images-and-texts"
right
class="float-right"
:offset-options="{

0 comments on commit e955208

Please sign in to comment.