mirror of
https://github.com/web3privacy/explorer-app.git
synced 2024-10-15 16:46:26 +02:00
feat(listing): update sorting and filtering
This commit is contained in:
Daniel Klein
parent
161ba35ff6
commit
14291d18e6
4 changed files with 76 additions and 91 deletions
|
|
@ -4,22 +4,32 @@ import type { ProjectShallow } from '~/types'
|
|||
const props = defineProps<{
|
||||
projects: { title: string, projects: ProjectShallow[] }[]
|
||||
}>()
|
||||
const { switcher } = storeToRefs(useData())
|
||||
const { switcher, filter } = storeToRefs(useData())
|
||||
|
||||
const displayCount = ref(100)
|
||||
const displayedProjects = computed(() => props.projects.slice(0, displayCount.value))
|
||||
function showMoreProjects() {
|
||||
displayCount.value += 50
|
||||
const totalProjectsCount = props.projects.map(g => g.projects.length).reduce((a, b) => a + b, 0)
|
||||
|
||||
function onChangeSort(sortKey: string) {
|
||||
if (filter.value.sortby === sortKey) {
|
||||
if (filter.value.sortDirection === 'desc' && filter.value.sortby !== 'score') {
|
||||
filter.value.sortby = 'score'
|
||||
filter.value.sortDirection = 'desc'
|
||||
return
|
||||
}
|
||||
filter.value.sortDirection = filter.value.sortDirection === 'asc' ? 'desc' : 'asc'
|
||||
return
|
||||
}
|
||||
filter.value.sortby = sortKey
|
||||
filter.value.sortDirection = sortKey === 'score' ? 'desc' : 'asc'
|
||||
}
|
||||
|
||||
const cardTitles = ref< { label: string, togglable?: boolean, toggled?: boolean }[]>([
|
||||
{ label: 'Usecase' },
|
||||
{ label: 'Openess', togglable: true },
|
||||
{ label: 'Technology', togglable: true },
|
||||
{ label: 'Privacy', togglable: true },
|
||||
{ label: 'Ecosystem' },
|
||||
{ label: 'Links' },
|
||||
{ label: 'W3PN Score', togglable: true },
|
||||
const cardTitles = ref< { label: string, sortKey: string, togglable?: boolean }[]>([
|
||||
{ label: 'Usecase', sortKey: 'usecase' },
|
||||
{ label: 'Openess', sortKey: 'openess', togglable: true },
|
||||
{ label: 'Technology', sortKey: 'technology', togglable: true },
|
||||
{ label: 'Privacy', sortKey: 'privacy', togglable: true },
|
||||
{ label: 'Ecosystem', sortKey: 'ecosystem' },
|
||||
{ label: 'Links', sortKey: 'links' },
|
||||
{ label: 'W3PN Score', sortKey: 'score', togglable: true },
|
||||
])
|
||||
</script>
|
||||
|
||||
|
|
@ -71,10 +81,12 @@ const cardTitles = ref< { label: string, togglable?: boolean, toggled?: boolean
|
|||
flex
|
||||
items-center
|
||||
gap-4px
|
||||
col-span="1 lg:3"
|
||||
col-span="1 lg:2"
|
||||
:class="['title' === filter.sortby ? 'text-app-white' : 'text-app-text-grey', 'cursor-pointer']"
|
||||
@click="onChangeSort('title')"
|
||||
>
|
||||
<p
|
||||
text="12px lg:14px app-text-grey"
|
||||
text="12px lg:14px"
|
||||
leading="16px lg:24px"
|
||||
whitespace-nowrap
|
||||
>
|
||||
|
|
@ -82,8 +94,10 @@ const cardTitles = ref< { label: string, togglable?: boolean, toggled?: boolean
|
|||
</p>
|
||||
<button
|
||||
type="button"
|
||||
i-ic-baseline-arrow-drop-down
|
||||
text="app-text-grey 20px"
|
||||
:class="['title' === filter.sortby ? filter.sortDirection === 'desc' ? 'i-ic-baseline-arrow-drop-up'
|
||||
: 'i-ic-baseline-arrow-drop-down'
|
||||
: 'i-ic-baseline-arrow-drop-down']"
|
||||
text="20px"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
|
|
@ -113,7 +127,7 @@ const cardTitles = ref< { label: string, togglable?: boolean, toggled?: boolean
|
|||
/>
|
||||
</div>
|
||||
<div
|
||||
v-for="title in cardTitles"
|
||||
v-for="(title, index) in cardTitles"
|
||||
:key="title.label"
|
||||
lg:flex
|
||||
items-center
|
||||
|
|
@ -121,9 +135,11 @@ const cardTitles = ref< { label: string, togglable?: boolean, toggled?: boolean
|
|||
last:justify-end
|
||||
gap-4px
|
||||
hidden
|
||||
:class="[title.sortKey === filter.sortby ? 'text-app-white' : 'text-app-text-grey', { 'cursor-pointer': title.togglable, 'col-span-1 lg:col-span-2': index === 0 }]"
|
||||
@click="onChangeSort(title.sortKey)"
|
||||
>
|
||||
<p
|
||||
text="12px lg:14px app-text-grey"
|
||||
text="12px lg:14px "
|
||||
leading="16px lg:24px"
|
||||
whitespace-nowrap
|
||||
>
|
||||
|
|
@ -132,16 +148,14 @@ const cardTitles = ref< { label: string, togglable?: boolean, toggled?: boolean
|
|||
<button
|
||||
v-if="title.togglable"
|
||||
type="button"
|
||||
:class="[title.toggled
|
||||
? 'i-ic-baseline-arrow-drop-up'
|
||||
:class="[title.sortKey === filter.sortby ? filter.sortDirection === 'desc' ? 'i-ic-baseline-arrow-drop-up'
|
||||
: 'i-ic-baseline-arrow-drop-down'
|
||||
: 'i-ic-baseline-arrow-drop-down']"
|
||||
text="app-text-grey 20px"
|
||||
@click="title.toggled = !title.toggled"
|
||||
text=" 20px"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-if="displayedProjects.length"
|
||||
grid
|
||||
:class="switcher ? 'grid-cols-1 lg:grid-cols-1' : 'xl:grid-cols-3 lg:grid-cols-3 sm:grid-cols-2 grid-cols-1'"
|
||||
gap-16px
|
||||
|
|
@ -154,23 +168,9 @@ const cardTitles = ref< { label: string, togglable?: boolean, toggled?: boolean
|
|||
:project="project"
|
||||
/>
|
||||
</div>
|
||||
<div v-else>
|
||||
</template>
|
||||
<div v-if="totalProjectsCount === 0">
|
||||
<h3>No Projects found...</h3>
|
||||
</div>
|
||||
<button
|
||||
v-if="displayedProjects.length < projects.length"
|
||||
mt-29px
|
||||
text="14px"
|
||||
leading-24px
|
||||
font-700
|
||||
px-12px
|
||||
py-4px
|
||||
border-2px
|
||||
border-app-white
|
||||
@click="showMoreProjects"
|
||||
>
|
||||
Load more projects
|
||||
</button>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1,26 +1,22 @@
|
|||
<script lang="ts" setup>
|
||||
import type { InputOption } from '~/types'
|
||||
|
||||
const { categories, usecases, ecosystems, assets, features, filteredProjectsCount, selectedCategoryId } = storeToRefs(useData())
|
||||
const { categories, usecases, ecosystems, assets, features, filteredProjectsCount, selectedCategoryId, selectedUsecaseId, selectedEcosystemId, selectedAssetsUsedId, selectedFeaturesId } = storeToRefs(useData())
|
||||
|
||||
const selectedUsecaseId = ref('all')
|
||||
const selectedEcosystemId = ref('all')
|
||||
const selectedAssetsUsedId = ref('all')
|
||||
const selectedFeaturesId = ref('all')
|
||||
const selectedCategory = computed(() => {
|
||||
return categories.value.find(c => c.id === selectedCategoryId.value)
|
||||
})
|
||||
const availableUsecases = computed(() => {
|
||||
if (selectedCategoryId.value === 'all')
|
||||
return usecases.value
|
||||
return usecases.value.filter(u => selectedCategory.value?.usecases?.includes(u.id))
|
||||
})
|
||||
|
||||
const categoryOptions = ref<InputOption[]>(categories.value ? [{ label: 'Category', value: 'all' }, ...categories.value.map(c => ({ label: c.name, value: c.id, count: c.projectsCount }))] : [])
|
||||
const usecaseOptions = ref<InputOption[]>(usecases.value ? [{ label: 'Usecase', value: 'all' }, ...usecases.value.map(u => ({ label: u.name, value: u.id }))] : [])
|
||||
const usecaseOptions = computed<InputOption[]>(() => availableUsecases.value.length ? [{ label: 'Usecase', value: 'all' }, ...availableUsecases.value.map(u => ({ label: u.name, value: u.id }))] : [])
|
||||
const ecosystemOptions = ref<InputOption[]>(ecosystems.value ? [{ label: 'Ecosystem', value: 'all' }, ...ecosystems.value.map(e => ({ label: e.name, value: e.id }))] : [])
|
||||
const assetOptions = ref<InputOption[]>(assets.value ? [{ label: 'Asset used', value: 'all' }, ...assets.value.map(a => ({ label: a.name, value: a.id }))] : [])
|
||||
const assetOptions = ref<InputOption[]>(assets.value ? [{ label: 'Asset used', value: 'all' }, ...assets.value.map(a => ({ label: `${a.id.toUpperCase()} (${a.name})`, value: a.id }))] : [])
|
||||
const featureOptions = ref<InputOption[]>(features.value ? [{ label: 'Feature', value: 'all' }, ...features.value.map(f => ({ label: f.name, value: f.id }))] : [])
|
||||
// const selectedCategory = computed(() => {
|
||||
// return categories.value.find(c => c.id === selectedCategoryId.value)
|
||||
// })
|
||||
|
||||
// const sortedFilteredCategories = computed(() => ([
|
||||
// categories.value.find(c => c.id === 'defi')!,
|
||||
// ...[...categories.value].sort((a, b) => a.name.localeCompare(b.name)).filter(c => c.id !== 'defi'),
|
||||
// ]))
|
||||
|
||||
const { showBar } = storeToRefs(useNavigaiton())
|
||||
const swipeEl = ref()
|
||||
|
|
@ -94,28 +90,28 @@ watch([scrollY, top, y], (newValues, oldValues) => {
|
|||
@selected="selectedCategoryId === 'all' ? navigateTo(`/`) : navigateTo(`/category/${selectedCategoryId}`)"
|
||||
/>
|
||||
<CategorySelectBox
|
||||
v-if="usecases.length"
|
||||
v-if="usecases?.length"
|
||||
v-model="selectedUsecaseId"
|
||||
name="usecaseSelect"
|
||||
:options="usecaseOptions"
|
||||
w-full
|
||||
/>
|
||||
<CategorySelectBox
|
||||
v-if="ecosystems.length"
|
||||
v-if="ecosystems?.length"
|
||||
v-model="selectedEcosystemId"
|
||||
name="ecosystemSelect"
|
||||
:options="ecosystemOptions"
|
||||
w-full
|
||||
/>
|
||||
<CategorySelectBox
|
||||
v-if="assets.length"
|
||||
v-if="assets?.length"
|
||||
v-model="selectedAssetsUsedId"
|
||||
name="assetsUsedSelect"
|
||||
:options="assetOptions"
|
||||
w-full
|
||||
/>
|
||||
<CategorySelectBox
|
||||
v-if="features.length"
|
||||
v-if="features?.length"
|
||||
v-model="selectedFeaturesId"
|
||||
name="featuresSelect"
|
||||
:options="featureOptions"
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
export interface Ecosystem {
|
||||
id: string
|
||||
name: string
|
||||
icon: string
|
||||
icon?: string
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,11 +7,13 @@ export interface Project {
|
|||
id: string
|
||||
name: string
|
||||
categories: string[]
|
||||
ecosystem?: string
|
||||
usecases?: string[]
|
||||
ecosystem?: string[]
|
||||
product_readiness?: string
|
||||
security?: string
|
||||
have_token?: boolean
|
||||
token_link?: string
|
||||
assets_used?: string[]
|
||||
tokens?: {
|
||||
name?: string
|
||||
symbol: string
|
||||
|
|
@ -122,11 +124,7 @@ export interface Project {
|
|||
url?: string
|
||||
[k: string]: unknown
|
||||
}[]
|
||||
ratings: {
|
||||
openess: OpenessRating
|
||||
technology: TechnologyRating
|
||||
privacy: PrivacyRating
|
||||
}
|
||||
ratings?: ProjectRating[]
|
||||
}
|
||||
|
||||
export interface ProjectShallow {
|
||||
|
|
@ -136,6 +134,9 @@ export interface ProjectShallow {
|
|||
description: string
|
||||
percentage: number
|
||||
categories: string[]
|
||||
usecases?: string[]
|
||||
ecosystem?: string[]
|
||||
assets_used?: string []
|
||||
forum?: string | undefined
|
||||
github?: string | undefined
|
||||
website?: string | undefined
|
||||
|
|
@ -149,36 +150,24 @@ export interface ProjectShallow {
|
|||
audits?: Audit[] | undefined
|
||||
support?: number | undefined
|
||||
anonymity?: boolean | undefined
|
||||
ratings: {
|
||||
openess: OpenessRating
|
||||
technology: TechnologyRating
|
||||
privacy: PrivacyRating
|
||||
}
|
||||
ratings?: ProjectRating[]
|
||||
}
|
||||
|
||||
export interface ProjectIndexable extends Project {
|
||||
[key: string]: unknown
|
||||
}
|
||||
|
||||
export interface OpenessRating {
|
||||
documentation: string
|
||||
github: string
|
||||
socials: string
|
||||
whitepaper: string
|
||||
team: number
|
||||
funding: number
|
||||
}
|
||||
export interface TechnologyRating {
|
||||
mainnet: boolean
|
||||
opensource: boolean
|
||||
assets: boolean
|
||||
no_pgradability: boolean
|
||||
audits: number
|
||||
export interface ProjectRating {
|
||||
type: string
|
||||
name: string
|
||||
items: ProjectRatingItem[]
|
||||
points: number
|
||||
}
|
||||
|
||||
export interface PrivacyRating {
|
||||
policy: string
|
||||
no_kyc: boolean
|
||||
no_compliance: boolean
|
||||
default_privacy: boolean
|
||||
export interface ProjectRatingItem {
|
||||
isValid: boolean
|
||||
label: string
|
||||
positive: string
|
||||
negative: string
|
||||
value: any
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue