feat(listing): update sorting and filtering

components/Project/ProjectGrid.vue

@@ -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 totalProjectsCount = props.projects.map(g => g.projects.length).reduce((a, b) => a + b, 0)
-const displayedProjects = computed(() => props.projects.slice(0, displayCount.value))
+
-function showMoreProjects() {
+function onChangeSort(sortKey: string) {
-  displayCount.value += 50
+  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 }[]>([
+const cardTitles = ref< { label: string, sortKey: string, togglable?: boolean }[]>([
-  { label: 'Usecase' },
+  { label: 'Usecase', sortKey: 'usecase' },
-  { label: 'Openess', togglable: true },
+  { label: 'Openess', sortKey: 'openess', togglable: true },
-  { label: 'Technology', togglable: true },
+  { label: 'Technology', sortKey: 'technology', togglable: true },
-  { label: 'Privacy', togglable: true },
+  { label: 'Privacy', sortKey: 'privacy', togglable: true },
-  { label: 'Ecosystem' },
+  { label: 'Ecosystem', sortKey: 'ecosystem' },
-  { label: 'Links' },
+  { label: 'Links', sortKey: 'links' },
-  { label: 'W3PN Score', togglable: true },
+  { 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
+            :class="['title' === filter.sortby ? filter.sortDirection === 'desc' ? 'i-ic-baseline-arrow-drop-up'
-            text="app-text-grey 20px"
+              : '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
+            :class="[title.sortKey === filter.sortby ? filter.sortDirection === 'desc' ? 'i-ic-baseline-arrow-drop-up'
-              ? 'i-ic-baseline-arrow-drop-up'
+              : 'i-ic-baseline-arrow-drop-down'
               : 'i-ic-baseline-arrow-drop-down']"
-            text="app-text-grey 20px"
+            text=" 20px"
-            @click="title.toggled = !title.toggled"
           />
         </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>
-        <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 v-if="totalProjectsCount === 0">
+      <h3>No Projects found...</h3>
+    </div>
   </div>
 </template>

layouts/default.vue

@@ -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 selectedCategory = computed(() => {
-const selectedEcosystemId = ref('all')
+  return categories.value.find(c => c.id === selectedCategoryId.value)
-const selectedAssetsUsedId = ref('all')
+})
-const selectedFeaturesId = ref('all')
+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"

types/ecosystem.ts

@@ -1,5 +1,5 @@
 export interface Ecosystem {
   id: string
   name: string
-  icon: string
+  icon?: string
 }

types/project.ts

@@ -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: {
+  ratings?: ProjectRating[]
-    openess: OpenessRating
-    technology: TechnologyRating
-    privacy: PrivacyRating
-  }
 }
 
 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: {
+  ratings?: ProjectRating[]
-    openess: OpenessRating
-    technology: TechnologyRating
-    privacy: PrivacyRating
-  }
 }
 
 export interface ProjectIndexable extends Project {
   [key: string]: unknown
 }
 
-export interface OpenessRating {
+export interface ProjectRating {
-  documentation: string
+  type: string
-  github: string
+  name: string
-  socials: string
+  items: ProjectRatingItem[]
-  whitepaper: string
+  points: number
-  team: number
-  funding: number
-}
-export interface TechnologyRating {
-  mainnet: boolean
-  opensource: boolean
-  assets: boolean
-  no_pgradability: boolean
-  audits: number
 }
 
-export interface PrivacyRating {
+export interface ProjectRatingItem {
-  policy: string
+  isValid: boolean
-  no_kyc: boolean
+  label: string
-  no_compliance: boolean
+  positive: string
-  default_privacy: boolean
+  negative: string
+  value: any
 }