mirror of
https://github.com/Ocelot-Social-Community/Ocelot-Social.git
synced 2025-12-13 07:46:06 +00:00
Style categories filter dropdown, get working with multiple categories
This commit is contained in:
Matt Rider
parent
3dc5888364
commit
737d1f839a
@ -4,24 +4,191 @@
|
||||
<ds-icon style="margin: 5px 0px 0px 10px;" name="filter" size="large" />
|
||||
<ds-icon style="margin-left: 2px" size="xx-small" name="angle-down" />
|
||||
</a>
|
||||
<ds-menu slot="popover" slot-scope="{ toggleMenu }" :routes="routes">
|
||||
<ds-menu-item
|
||||
slot="menuitem"
|
||||
slot-scope="item"
|
||||
:route="item.route"
|
||||
@click.stop.prevent="filterPosts(item.route.name, toggleMenu)"
|
||||
class="categories-menu"
|
||||
>
|
||||
<ds-flex class="categories-list">
|
||||
<template slot="popover">
|
||||
<ds-container>
|
||||
<ds-space />
|
||||
<ds-flex>
|
||||
<ds-flex-item width="20%">
|
||||
<ds-button :icon="item.route.icon" primary />
|
||||
<ds-space margin-bottom="x-small" />
|
||||
<ds-flex>
|
||||
<ds-heading tag="h4">{{ $t('filter-posts.header') }}</ds-heading>
|
||||
<ds-flex-item width="10%" />
|
||||
<ds-flex-item width="100%" style="text-align:center;">
|
||||
<ds-button
|
||||
icon="check"
|
||||
@click.stop.prevent="toggleCategory()"
|
||||
:primary="allCategories"
|
||||
/>
|
||||
<ds-flex-item>
|
||||
<label>{{ $t('filter-posts.all') }}</label>
|
||||
</ds-flex-item>
|
||||
<ds-flex-item width="80%">
|
||||
<ds-flex>{{ item.route.name }}</ds-flex>
|
||||
<ds-space />
|
||||
</ds-flex-item>
|
||||
</ds-flex>
|
||||
</ds-menu-item>
|
||||
</ds-menu>
|
||||
</ds-flex-item>
|
||||
<ds-flex-item width="10%">
|
||||
<ds-flex v-for="category in firstGroup" :key="category.id" class="categories-list">
|
||||
<ds-flex>
|
||||
<ds-flex-item width="100%">
|
||||
<ds-button
|
||||
:icon="category.icon"
|
||||
:primary="isActive(category.id)"
|
||||
@click.stop.prevent="toggleCategory(category.id)"
|
||||
/>
|
||||
<ds-space margin-bottom="small" />
|
||||
</ds-flex-item>
|
||||
<ds-flex>
|
||||
<ds-flex-item>
|
||||
<label>{{ category.name }}</label>
|
||||
</ds-flex-item>
|
||||
<ds-space margin-bottom="xx-large" />
|
||||
</ds-flex>
|
||||
</ds-flex>
|
||||
</ds-flex>
|
||||
</ds-flex-item>
|
||||
<ds-flex-item width="10%">
|
||||
<ds-flex v-for="category in secondGroup" :key="category.id" class="categories-list">
|
||||
<ds-flex>
|
||||
<ds-flex-item width="100%">
|
||||
<ds-button
|
||||
:icon="category.icon"
|
||||
:primary="isActive(category.id)"
|
||||
@click.stop.prevent="toggleCategory(category.id)"
|
||||
/>
|
||||
<ds-space margin-bottom="small" />
|
||||
</ds-flex-item>
|
||||
<ds-flex class="categories-list">
|
||||
<ds-flex-item>
|
||||
<label>{{ category.name }}</label>
|
||||
</ds-flex-item>
|
||||
<ds-space margin-bottom="xx-large" />
|
||||
</ds-flex>
|
||||
</ds-flex>
|
||||
</ds-flex>
|
||||
</ds-flex-item>
|
||||
<ds-flex-item width="10%">
|
||||
<ds-flex v-for="category in thirdGroup" :key="category.id" class="categories-list">
|
||||
<ds-flex>
|
||||
<ds-flex-item width="100%">
|
||||
<ds-button
|
||||
:icon="category.icon"
|
||||
:primary="isActive(category.id)"
|
||||
@click.stop.prevent="toggleCategory(category.id)"
|
||||
/>
|
||||
<ds-space margin-bottom="small" />
|
||||
</ds-flex-item>
|
||||
<ds-flex>
|
||||
<ds-flex-item>
|
||||
<label>{{ category.name }}</label>
|
||||
</ds-flex-item>
|
||||
<ds-space margin-bottom="xx-large" />
|
||||
</ds-flex>
|
||||
</ds-flex>
|
||||
</ds-flex>
|
||||
</ds-flex-item>
|
||||
<ds-flex-item width="10%">
|
||||
<ds-flex v-for="category in fourthGroup" :key="category.id" class="categories-list">
|
||||
<ds-flex>
|
||||
<ds-flex-item width="100%">
|
||||
<ds-button
|
||||
:icon="category.icon"
|
||||
:primary="isActive(category.id)"
|
||||
@click.stop.prevent="toggleCategory(category.id)"
|
||||
/>
|
||||
<ds-space margin-bottom="small" />
|
||||
</ds-flex-item>
|
||||
<ds-flex>
|
||||
<ds-flex-item>
|
||||
<label>{{ category.name }}</label>
|
||||
</ds-flex-item>
|
||||
<ds-space margin-bottom="xx-large" />
|
||||
</ds-flex>
|
||||
</ds-flex>
|
||||
</ds-flex>
|
||||
</ds-flex-item>
|
||||
<ds-flex-item width="10%">
|
||||
<ds-flex v-for="category in fifthGroup" :key="category.id" class="categories-list">
|
||||
<ds-flex>
|
||||
<ds-flex-item width="100%">
|
||||
<ds-button
|
||||
:icon="category.icon"
|
||||
:primary="isActive(category.id)"
|
||||
@click.stop.prevent="toggleCategory(category.id)"
|
||||
/>
|
||||
<ds-space margin-bottom="small" />
|
||||
</ds-flex-item>
|
||||
<ds-flex>
|
||||
<ds-flex-item>
|
||||
<label>{{ category.name }}</label>
|
||||
</ds-flex-item>
|
||||
<ds-space margin-bottom="xx-large" />
|
||||
</ds-flex>
|
||||
</ds-flex>
|
||||
</ds-flex>
|
||||
</ds-flex-item>
|
||||
<ds-flex-item width="10%">
|
||||
<ds-flex v-for="category in sixthGroup" :key="category.id" class="categories-list">
|
||||
<ds-flex>
|
||||
<ds-flex-item width="100%">
|
||||
<ds-button
|
||||
:icon="category.icon"
|
||||
:primary="isActive(category.id)"
|
||||
@click.stop.prevent="toggleCategory(category.id)"
|
||||
/>
|
||||
<ds-space margin-bottom="small" />
|
||||
</ds-flex-item>
|
||||
<ds-flex>
|
||||
<ds-flex-item>
|
||||
<label>{{ category.name }}</label>
|
||||
</ds-flex-item>
|
||||
<ds-space margin-bottom="xx-large" />
|
||||
</ds-flex>
|
||||
</ds-flex>
|
||||
</ds-flex>
|
||||
</ds-flex-item>
|
||||
<ds-flex-item width="10%">
|
||||
<ds-flex v-for="category in seventhGroup" :key="category.id" class="categories-list">
|
||||
<ds-flex>
|
||||
<ds-flex-item width="100%">
|
||||
<ds-button
|
||||
:icon="category.icon"
|
||||
:primary="isActive(category.id)"
|
||||
@click.stop.prevent="toggleCategory(category.id)"
|
||||
/>
|
||||
<ds-space margin-bottom="small" />
|
||||
</ds-flex-item>
|
||||
<ds-flex>
|
||||
<ds-flex-item>
|
||||
<label>{{ category.name }}</label>
|
||||
</ds-flex-item>
|
||||
<ds-space margin-bottom="xx-large" />
|
||||
</ds-flex>
|
||||
</ds-flex>
|
||||
</ds-flex>
|
||||
</ds-flex-item>
|
||||
<ds-flex-item width="10%">
|
||||
<ds-flex v-for="category in eigthGroup" :key="category.id" class="categories-list">
|
||||
<ds-flex>
|
||||
<ds-flex-item width="100%">
|
||||
<ds-button
|
||||
:icon="category.icon"
|
||||
:primary="isActive(category.id)"
|
||||
@click.stop.prevent="toggleCategory(category.id)"
|
||||
/>
|
||||
<ds-space margin-bottom="small" />
|
||||
</ds-flex-item>
|
||||
<ds-flex>
|
||||
<ds-flex-item>
|
||||
<label>{{ category.name }}</label>
|
||||
</ds-flex-item>
|
||||
<ds-space margin-bottom="xx-large" />
|
||||
</ds-flex>
|
||||
</ds-flex>
|
||||
</ds-flex>
|
||||
</ds-flex-item>
|
||||
</ds-flex>
|
||||
</ds-container>
|
||||
</template>
|
||||
</dropdown>
|
||||
</template>
|
||||
<script>
|
||||
@ -41,31 +208,60 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
pageSize: 12,
|
||||
firstGroup: [],
|
||||
secondGroup: [],
|
||||
thirdGroup: [],
|
||||
fourthGroup: [],
|
||||
fifthGroup: [],
|
||||
sixthGroup: [],
|
||||
seventhGroup: [],
|
||||
eigthGroup: [],
|
||||
selectedCategoryIds: [],
|
||||
allCategories: true,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
routes() {
|
||||
let routes = this.categories.map(category => {
|
||||
return {
|
||||
name: category.name,
|
||||
id: category.id,
|
||||
icon: category.icon,
|
||||
chunk() {
|
||||
const groupedCategories = []
|
||||
for (let i = 0; i < this.categories.length; i++) {
|
||||
const last = groupedCategories[groupedCategories.length - 1]
|
||||
if (!last || last.length === 2) {
|
||||
groupedCategories.push([this.categories[i]])
|
||||
} else {
|
||||
last.push(this.categories[i])
|
||||
}
|
||||
})
|
||||
return routes
|
||||
}
|
||||
return groupedCategories
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.groupCategories()
|
||||
},
|
||||
methods: {
|
||||
...mapMutations({
|
||||
setPosts: 'posts/SET_POSTS',
|
||||
}),
|
||||
filterPosts(name) {
|
||||
this.filter = { categories_some: { name } }
|
||||
groupCategories() {
|
||||
const groupedCategories = this.chunk
|
||||
this.firstGroup = groupedCategories[0]
|
||||
this.secondGroup = groupedCategories[1]
|
||||
this.thirdGroup = groupedCategories[2]
|
||||
this.fourthGroup = groupedCategories[3]
|
||||
this.fifthGroup = groupedCategories[4]
|
||||
this.sixthGroup = groupedCategories[5]
|
||||
this.seventhGroup = groupedCategories[6]
|
||||
this.eigthGroup = groupedCategories[7]
|
||||
},
|
||||
filterPosts(categoryIds) {
|
||||
const filter = categoryIds.length
|
||||
? { categories_in: { id_in: this.selectedCategoryIds } }
|
||||
: {}
|
||||
filter.categories_in ? (this.allCategories = false) : (this.allCategories = true)
|
||||
this.$apollo
|
||||
.query({
|
||||
query: filterPosts(this.$i18n),
|
||||
variables: {
|
||||
filter: this.filter,
|
||||
filter: filter,
|
||||
first: this.pageSize,
|
||||
offset: 0,
|
||||
},
|
||||
@ -75,20 +271,28 @@ export default {
|
||||
})
|
||||
.catch(error => this.$toast.error(error.message))
|
||||
},
|
||||
isActive(id) {
|
||||
const index = this.selectedCategoryIds.indexOf(id)
|
||||
if (index > -1) {
|
||||
return true
|
||||
}
|
||||
return false
|
||||
},
|
||||
toggleCategory(id) {
|
||||
const index = this.selectedCategoryIds.indexOf(id)
|
||||
if (index > -1) {
|
||||
this.selectedCategoryIds.splice(index, 1)
|
||||
} else {
|
||||
this.selectedCategoryIds.push(id)
|
||||
}
|
||||
if (!id) this.selectedCategoryIds = []
|
||||
this.filterPosts(this.selectedCategoryIds)
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.categories-menu {
|
||||
width: 300px;
|
||||
}
|
||||
.category-menu-item {
|
||||
text-align: center;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
.categories-list {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
<ds-flex class="main-navigation-flex">
|
||||
<ds-flex-item :width="{ lg: '5%' }" />
|
||||
<ds-flex-item :width="{ base: '80%', sm: '80%', md: '80%', lg: '15%' }">
|
||||
<a @click="$router.go('/')">
|
||||
<a @click="$router.push('/').go('/')">
|
||||
<ds-logo />
|
||||
</a>
|
||||
</ds-flex-item>
|
||||
@ -37,7 +37,7 @@
|
||||
:class="{ 'hide-mobile-menu': !toggleMobileMenu }"
|
||||
>
|
||||
<no-ssr>
|
||||
<filter-posts placement="bottom" offset="23" :categories="categories" />
|
||||
<filter-posts placement="bottom-end" offset="23" :categories="getCategories" />
|
||||
</no-ssr>
|
||||
</ds-flex-item>
|
||||
<ds-flex-item
|
||||
@ -129,7 +129,8 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters, mapActions } from 'vuex'
|
||||
import gql from 'graphql-tag'
|
||||
import { mapGetters, mapActions, mapMutations } from 'vuex'
|
||||
import LocaleSwitch from '~/components/LocaleSwitch/LocaleSwitch'
|
||||
import SearchInput from '~/components/SearchInput.vue'
|
||||
import Modal from '~/components/Modal'
|
||||
@ -164,7 +165,7 @@ export default {
|
||||
isAdmin: 'auth/isAdmin',
|
||||
quickSearchResults: 'search/quickResults',
|
||||
quickSearchPending: 'search/quickPending',
|
||||
categories: 'categories/categories',
|
||||
getCategories: 'categories/categories',
|
||||
}),
|
||||
userName() {
|
||||
const { name } = this.user || {}
|
||||
@ -203,14 +204,13 @@ export default {
|
||||
return routes
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.fetchCategories()
|
||||
},
|
||||
methods: {
|
||||
...mapActions({
|
||||
quickSearchClear: 'search/quickClear',
|
||||
quickSearch: 'search/quickSearch',
|
||||
fetchCategories: 'categories/fetchCategories',
|
||||
}),
|
||||
...mapMutations({
|
||||
setCategories: 'categories/SET_CATEGORIES',
|
||||
}),
|
||||
goToPost(item) {
|
||||
this.$nextTick(() => {
|
||||
@ -237,6 +237,23 @@ export default {
|
||||
this.toggleMobileMenu = !this.toggleMobileMenu
|
||||
},
|
||||
},
|
||||
apollo: {
|
||||
Category: {
|
||||
query() {
|
||||
return gql(`{
|
||||
Category {
|
||||
id
|
||||
name
|
||||
icon
|
||||
}
|
||||
}`)
|
||||
},
|
||||
result(result) {
|
||||
this.setCategories(result.data.Category)
|
||||
},
|
||||
fetchPolicy: 'cache-and-network',
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
|
||||
@ -1,6 +1,10 @@
|
||||
{
|
||||
"filter-menu": {
|
||||
"title": "Deine Filterblase"
|
||||
"title": "Deine Filterblase",
|
||||
"all": "Alle"
|
||||
},
|
||||
"filter-posts": {
|
||||
"header": "Themenkategorien"
|
||||
},
|
||||
"login": {
|
||||
"copy": "Wenn Du bereits ein Konto bei Human Connection hast, melde Dich bitte hier an.",
|
||||
@ -344,5 +348,4 @@
|
||||
"infoSelectedNoOfMaxCategories": "{chosen} von {max} Kategorien ausgewählt"
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -2,6 +2,10 @@
|
||||
"filter-menu": {
|
||||
"title": "Your filter bubble"
|
||||
},
|
||||
"filter-posts": {
|
||||
"header": "Categories of Content",
|
||||
"all": "All"
|
||||
},
|
||||
"login": {
|
||||
"copy": "If you already have a human-connection account, login here.",
|
||||
"login": "Login",
|
||||
@ -195,7 +199,6 @@
|
||||
"more": "show more",
|
||||
"less": "show less"
|
||||
}
|
||||
|
||||
},
|
||||
"quotes": {
|
||||
"african": {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user