explorer-app/components/Project/ProjectGrid.vue

164 lines
4.5 KiB
Vue
Raw Normal View History

2023-12-19 18:43:42 +01:00
<script lang="ts" setup>
import type { ProjectShallow } from '~/types'
const props = defineProps<{
projects: { title: string, projects: ProjectShallow[] }[]
2023-12-19 18:43:42 +01:00
}>()
const { switcher, filter } = storeToRefs(useData())
2023-12-19 18:43:42 +01:00
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'
2023-12-19 18:43:42 +01:00
}
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 },
])
2023-12-19 18:43:42 +01:00
</script>
<template>
<div
flex
flex-col
items-start
>
<template
v-for="group in projects"
:key="group.title"
>
<div
flex
items-center
gap-x-12px
w-full
mb="8px lg:16px"
>
<h2
text="app-white 16px lg:24px"
font-700
leading="24px lg:32px"
whitespace-nowrap
>
{{ group.projects.length }} {{ group.title }}
</h2>
<div
h-2px
w-full
bg-app-text-grey
/>
<button
type="button"
i-ic-baseline-arrow-drop-down
text="app-text-grey 24px"
/>
</div>
<div
grid
grid-cols="2 lg:10"
w-full
mb-16px
>
<div
flex
items-center
gap-4px
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"
leading="16px lg:24px"
whitespace-nowrap
>
Project name
</p>
<button
hidden
lg:block
type="button"
: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
flex
items-center
justify-end
gap-4px
lg:hidden
>
<SortSelectBox
v-model="filter.sortby"
:options="['title', 'openess', 'technology', 'privacy', 'score'].map((o) => ({ label: capitalize(o), value: o }))"
/>
</div>
<div
v-for="(title, index) in cardTitles"
:key="title.label"
lg:flex
items-center
justify-start
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 "
leading="16px lg:24px"
whitespace-nowrap
>
{{ title.label }}
</p>
<button
v-if="title.togglable"
type="button"
: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=" 20px"
/>
</div>
</div>
<div
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
text-white
w-full
>
<Card
v-for="project in group.projects"
:key="project.id"
:project="project"
/>
</div>
</template>
<div v-if="totalProjectsCount === 0">
<h3>No Projects found...</h3>
</div>
2023-12-19 18:43:42 +01:00
</div>
</template>