Skip to content

Commit

Permalink
Merge pull request #118 from kb-dk/DISC-800/refactor-of-searchvue
Browse files Browse the repository at this point in the history 
DISC-800/Refactoring of Search.vue.
  • Loading branch information
@jorntx
jorntx committed Feb 14, 2024
2 parents d928947 + 3f0d4ea commit 7d9a08c
Show file tree
Hide file tree
Showing 8 changed files with 403 additions and 365 deletions.
63 changes: 63 additions & 0 deletions src/components/common/PortalContent.vue
View file
@@ -0,0 +1,63 @@
<template>
<div class="container">
<div class="row">
<div class="intro">
<h2>Velkommen til DR's arkiv på Det Kgl. Bibliotek</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
est laborum.
</p>
<router-link to="/about">read more</router-link>
</div>
</div>
<div class="container">
<h3>Udpluk fra arkivet</h3>
<GridDisplay
:spot-nr="8"
:row-nr="4"
:draggable="true"
:spots="mockdata1"
></GridDisplay>
</div>
<div class="blue-background">
<div class="edge blue"></div>

<div class="container">
<h3>Om DR Arkivet</h3>
<GridDisplay
:draggable="false"
:spot-nr="3"
:row-nr="3"
:blue-background="true"
:spots="mockdata2"
></GridDisplay>
</div>
</div>
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import { useSearchResultStore } from '@/store/searchResultStore';
import GridDisplay from '@/components/common/GridDisplay.vue';
import { GenericSearchResultType } from '@/types/GenericSearchResultTypes';
export default defineComponent({
name: 'PortalContent',
components: {
GridDisplay,
},
setup() {
const mockdata1 = ['1', '2', '3', '4', '5', '6', '7', '8'] as unknown as GenericSearchResultType[];
const mockdata2 = ['1', '2', '3'] as unknown as GenericSearchResultType[];
const searchResultStore = useSearchResultStore();
return { searchResultStore, mockdata1, mockdata2 };
},
});
</script>

<style></style>
1 change: 1 addition & 0 deletions src/components/search/CategoryTags.vue
View file
Expand Up @@ -150,6 +150,7 @@ h2 {
.category-tags {
flex-wrap: wrap;
margin-top: 20px;
display: flex;
}
.category-tags .tag {
Expand Down
169 changes: 142 additions & 27 deletions src/components/search/Facets.vue
View file
@@ -1,32 +1,46 @@
<template>
<div class="facet-container">
<div>
<Transition
name="fade"
mode="out-in"
<div
class="search-facets active"
ref="facetsContainer"
>
<div class="facet-background">
<button
class="facet-close-button"
@click="searchResultStore.toggleShowFacets(false)"
>
<span class="material-icons">close</span>
</button>

<div class="facet-container">
<div>
<h2 class="headline">{{ t('search.channels') }}</h2>
<div
class="checkbox"
v-for="(singleFacet, index) in currentFacetNr as unknown as FacetPair[]"
:key="index + 'facet'"
<Transition
name="fade"
mode="out-in"
>
<kb-checkboxcomponent
:fqkey="'creator_affiliation'"
:title="channelFacets[index]?.title"
:number="channelFacets[index]?.number"
:value="filterExists('creator_affiliation', channelFacets[index]?.title)"
:inslide="index"
:content="!searchResultStore.loading"
/>
</div>
<div>
<h2 class="headline">{{ t('search.channels') }}</h2>
<div
class="checkbox"
v-for="(singleFacet, index) in currentFacetNr as unknown as FacetPair[]"
:key="index + 'facet'"
>
<kb-checkboxcomponent
:fqkey="'creator_affiliation'"
:title="channelFacets[index]?.title"
:number="channelFacets[index]?.number"
:value="filterExists('creator_affiliation', channelFacets[index]?.title)"
:inslide="index"
:content="!searchResultStore.loading"
/>
</div>
</div>
</Transition>
<CategoryTags
:categories="categoryFacets"
:category-nr="categoryNr"
></CategoryTags>
</div>
</Transition>
<CategoryTags
:categories="categoryFacets"
:category-nr="categoryNr"
></CategoryTags>
</div>
</div>
</div>
</template>
Expand All @@ -53,7 +67,7 @@ export default defineComponent({
facetResults: { type: Object as PropType<FacetResultType>, required: true },
},
setup(props, { emit }) {
setup(props) {
const searchResultStore = useSearchResultStore();
const showFacets = ref(false);
const currentFacets = ref(Object as unknown as FacetResultType);
Expand All @@ -62,13 +76,17 @@ export default defineComponent({
const categoryFacets = ref([] as FacetPair[]);
const categoryNr = ref(0);
const facetsContainer = ref<HTMLElement | null>(null);
const lastUpdate = ref(0);
const route = useRoute();
const router = useRouter();
const { t } = useI18n();
onMounted(() => {
window.innerWidth > 800 ? searchResultStore.toggleShowFacets(true) : searchResultStore.toggleShowFacets(false);
currentFacets.value = props.facetResults;
channelFacets.value = simplifyFacets(currentFacets.value['creator_affiliation']);
categoryFacets.value = simplifyFacets(currentFacets.value['categories']);
Expand All @@ -86,7 +104,6 @@ export default defineComponent({
channelFacets.value = [] as FacetPair[];
categoryFacets.value = [] as FacetPair[];
showFacets.value = false;
currentFacets.value = newFacets;
channelFacets.value = simplifyFacets(newFacets['creator_affiliation']);
categoryFacets.value = simplifyFacets(newFacets['categories']);
Expand All @@ -109,9 +126,29 @@ export default defineComponent({
router.push({ query: routeQueries });
};
watch(
() => searchResultStore.showFacets,
() => {
toggleFacets();
},
);
const toggleFacets = () => {
if (searchResultStore.showFacets) {
facetsContainer.value?.classList.add('active');
//resultContainer.value?.classList.add('fullwidth');
window.document.body.classList.add('remove-body-scroll');
} else {
facetsContainer.value?.classList.remove('active');
//resultContainer.value?.classList.remove('fullwidth');
window.document.body.classList.remove('remove-body-scroll');
}
};
const filterUpdateHelper = (e: Event) => {
updateFilters(e as CustomEvent);
emit('facetUpdate');
window.innerWidth < 800 ? searchResultStore.toggleShowFacets(false) : null;
};
return {
Expand All @@ -130,6 +167,8 @@ export default defineComponent({
addFilter,
removeFilter,
route,
toggleFacets,
facetsContainer,
t,
};
},
Expand All @@ -145,6 +184,13 @@ export default defineComponent({
flex-direction: column;
}
.search-facets.active {
visibility: visible;
pointer-events: all;
transform: translateX(0%);
width: 100%;
}
h2 {
font-size: 16px;
color: black;
Expand All @@ -161,9 +207,78 @@ h2 {
padding: 3px 0px;
}
.facet-close-button {
border: 0px;
background-color: transparent;
font-size: 0px;
position: absolute;
top: 10px;
z-index: 25;
right: 10px;
cursor: pointer;
}
.search-facets {
transition: all 0.25s cubic-bezier(0.455, 0.03, 0.515, 0.955) 0s;
min-width: 0px;
margin-bottom: 20px;
position: fixed;
top: 0px;
left: 0px;
z-index: 5;
background-color: white;
overflow-y: scroll;
height: 100vh;
visibility: hidden;
pointer-events: none;
box-sizing: border-box;
padding: 40px 15% 0px 15%;
transform: translateX(-100%);
}
@media (min-width: 640px) {
.search-facets {
top: 20%;
height: 60%;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
width: 70%;
}
.search-facets::-webkit-scrollbar-track {
background-color: transparent;
}
.search-facets.active {
width: 70%;
}
}
@media (min-width: 800px) {
.facet-container {
flex-direction: column;
}
.facet-background {
background-color: rgba(30, 30, 30, 0.1);
}
.facet-close-button {
display: none;
}
.search-facets {
position: initial;
background-color: initial;
width: 0px;
margin-right: 0px;
overflow-y: initial;
overflow-x: hidden;
padding: 0px 0px;
transform: translateX(0%);
opacity: 0;
box-shadow: initial;
}
.search-facets.active {
width: 290px;
margin-right: 30px;
min-width: 300px;
opacity: 1;
}
}
</style>

0 comments on commit 7d9a08c

Please sign in to comment.