✨ Filtered on publisher page
This commit is contained in:
@@ -9,7 +9,146 @@
|
||||
<v-container>
|
||||
<div class="layout">
|
||||
<div class="main">
|
||||
<post-list :params="{ pubName: username }" />
|
||||
<!-- Filter Section -->
|
||||
<v-card class="mb-4">
|
||||
<v-tabs
|
||||
v-model="activeCategoryTab"
|
||||
color="primary"
|
||||
class="mb-2"
|
||||
grow
|
||||
>
|
||||
<v-tab value="all">All</v-tab>
|
||||
<v-tab value="posts">Posts</v-tab>
|
||||
<v-tab value="articles">Articles</v-tab>
|
||||
</v-tabs>
|
||||
|
||||
<v-row>
|
||||
<v-col cols="12" sm="6">
|
||||
<v-checkbox
|
||||
:model-value="includeReplies"
|
||||
label="Include replies"
|
||||
:indeterminate="includeReplies === null"
|
||||
density="compact"
|
||||
prepend-icon="mdi-reply"
|
||||
hide-details
|
||||
class="px-4"
|
||||
@update:model-value="cycleIncludeReplies"
|
||||
/>
|
||||
</v-col>
|
||||
<v-col cols="12" sm="6">
|
||||
<v-checkbox
|
||||
v-model="mediaOnly"
|
||||
label="Media only"
|
||||
density="compact"
|
||||
hide-details
|
||||
class="px-4"
|
||||
prepend-icon="mdi-attachment"
|
||||
/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<v-checkbox
|
||||
v-model="orderDesc"
|
||||
label="Descending order"
|
||||
density="compact"
|
||||
prepend-icon="mdi-sort"
|
||||
class="px-4"
|
||||
hide-details
|
||||
/>
|
||||
|
||||
<v-divider class="my-1" />
|
||||
|
||||
<v-list-item
|
||||
title="Advanced filters"
|
||||
prepend-icon="mdi-filter-variant"
|
||||
@click="showAdvancedFilters = !showAdvancedFilters"
|
||||
>
|
||||
<template #append>
|
||||
<v-icon>
|
||||
{{
|
||||
showAdvancedFilters ? "mdi-chevron-up" : "mdi-chevron-down"
|
||||
}}
|
||||
</v-icon>
|
||||
</template>
|
||||
</v-list-item>
|
||||
|
||||
<v-expand-transition>
|
||||
<div v-if="showAdvancedFilters" class="my-3 px-4">
|
||||
<v-text-field
|
||||
v-model="queryTerm"
|
||||
hide-details
|
||||
label="Search"
|
||||
placeholder="Search posts"
|
||||
prepend-inner-icon="mdi-magnify"
|
||||
variant="outlined"
|
||||
density="comfortable"
|
||||
class="mb-3"
|
||||
/>
|
||||
|
||||
<v-select
|
||||
v-model="order"
|
||||
hide-details
|
||||
label="Sort by"
|
||||
:items="[
|
||||
{ title: 'Date', value: 'date' },
|
||||
{ title: 'Popularity', value: 'popularity' }
|
||||
]"
|
||||
variant="outlined"
|
||||
density="comfortable"
|
||||
class="mb-3"
|
||||
/>
|
||||
|
||||
<v-row>
|
||||
<v-col cols="12" sm="6">
|
||||
<v-text-field
|
||||
:model-value="periodStartFormatted"
|
||||
hide-details
|
||||
label="From date"
|
||||
prepend-inner-icon="mdi-calendar"
|
||||
variant="outlined"
|
||||
density="comfortable"
|
||||
readonly
|
||||
@click="openDatePicker('start')"
|
||||
/>
|
||||
</v-col>
|
||||
<v-col cols="12" sm="6">
|
||||
<v-text-field
|
||||
:model-value="periodEndFormatted"
|
||||
hide-details
|
||||
label="To date"
|
||||
prepend-inner-icon="mdi-calendar"
|
||||
variant="outlined"
|
||||
density="comfortable"
|
||||
readonly
|
||||
@click="openDatePicker('end')"
|
||||
/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</div>
|
||||
</v-expand-transition>
|
||||
</v-card>
|
||||
|
||||
<post-list :key="filterKey" :params="postListParams" />
|
||||
|
||||
<!-- Date Picker Dialog -->
|
||||
<v-dialog v-model="datePickerDialog" max-width="400">
|
||||
<v-card>
|
||||
<v-card-title>{{
|
||||
datePickerType === "start" ? "From date" : "To date"
|
||||
}}</v-card-title>
|
||||
<v-card-text>
|
||||
<v-date-picker
|
||||
v-model="tempDate"
|
||||
:max="new Date().toISOString().split('T')[0]"
|
||||
/>
|
||||
</v-card-text>
|
||||
<v-card-actions>
|
||||
<v-spacer />
|
||||
<v-btn @click="datePickerDialog = false">Cancel</v-btn>
|
||||
<v-btn color="primary" @click="confirmDatePicker">OK</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
</div>
|
||||
<div class="sidebar flex flex-col gap-3">
|
||||
<v-card class="w-full">
|
||||
@@ -20,7 +159,9 @@
|
||||
<div class="text-xl font-bold">
|
||||
{{ user.nick || user.name }}
|
||||
</div>
|
||||
<div class="text-body-2 text-medium-emphasis">@{{ user.name }}</div>
|
||||
<div class="text-body-2 text-medium-emphasis">
|
||||
@{{ user.name }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="htmlBio" class="bio-prose" v-html="htmlBio"></div>
|
||||
@@ -46,6 +187,7 @@
|
||||
import { computed, ref, watch } from "vue"
|
||||
import { useMarkdownProcessor } from "~/composables/useMarkdownProcessor"
|
||||
import type { SnPublisher } from "~/types/api"
|
||||
import type { PostListParams } from "~/composables/usePostList"
|
||||
|
||||
import PostList from "~/components/Post/PostList.vue"
|
||||
|
||||
@@ -88,9 +230,7 @@ const htmlBio = ref<string | undefined>(undefined)
|
||||
watch(
|
||||
user,
|
||||
(value) => {
|
||||
htmlBio.value = value?.bio
|
||||
? render(value.bio)
|
||||
: undefined
|
||||
htmlBio.value = value?.bio ? render(value.bio) : undefined
|
||||
},
|
||||
{ immediate: true, deep: true }
|
||||
)
|
||||
@@ -106,6 +246,97 @@ const userPicture = computed(() => {
|
||||
: undefined
|
||||
})
|
||||
|
||||
// Filter state
|
||||
const activeCategoryTab = ref("all")
|
||||
const includeReplies = ref<boolean | null>(null)
|
||||
const mediaOnly = ref(false)
|
||||
const orderDesc = ref(true)
|
||||
const showAdvancedFilters = ref(false)
|
||||
const queryTerm = ref("")
|
||||
const order = ref<string | undefined>(undefined)
|
||||
const periodStart = ref<number | undefined>(undefined)
|
||||
const periodEnd = ref<number | undefined>(undefined)
|
||||
|
||||
// Date picker dialog
|
||||
const datePickerDialog = ref(false)
|
||||
const datePickerType = ref<"start" | "end">("start")
|
||||
const tempDate = ref<Date | undefined>(undefined)
|
||||
|
||||
const postListParams = computed<PostListParams>(() => {
|
||||
const params: PostListParams = {
|
||||
pubName: username.value,
|
||||
includeReplies: includeReplies.value ?? undefined,
|
||||
mediaOnly: mediaOnly.value,
|
||||
orderDesc: orderDesc.value,
|
||||
queryTerm: queryTerm.value || undefined,
|
||||
order: order.value,
|
||||
periodStart: periodStart.value,
|
||||
periodEnd: periodEnd.value
|
||||
}
|
||||
|
||||
// Set type based on active tab
|
||||
if (activeCategoryTab.value === "posts") {
|
||||
params.type = 0 // Assuming 0 is for posts
|
||||
} else if (activeCategoryTab.value === "articles") {
|
||||
params.type = 1 // Assuming 1 is for articles
|
||||
}
|
||||
// 'all' means no type filter
|
||||
|
||||
return params
|
||||
})
|
||||
|
||||
const periodStartFormatted = computed(() => {
|
||||
return periodStart.value
|
||||
? new Date(periodStart.value * 1000).toISOString().split("T")[0]
|
||||
: ""
|
||||
})
|
||||
|
||||
const periodEndFormatted = computed(() => {
|
||||
return periodEnd.value
|
||||
? new Date(periodEnd.value * 1000).toISOString().split("T")[0]
|
||||
: ""
|
||||
})
|
||||
|
||||
// Create a key that changes when filters change to force PostList re-mount
|
||||
const filterKey = computed(() => {
|
||||
return JSON.stringify(postListParams.value)
|
||||
})
|
||||
|
||||
const cycleIncludeReplies = () => {
|
||||
if (includeReplies.value === null) {
|
||||
includeReplies.value = false
|
||||
} else if (includeReplies.value === false) {
|
||||
includeReplies.value = true
|
||||
} else {
|
||||
includeReplies.value = null
|
||||
}
|
||||
}
|
||||
|
||||
const openDatePicker = (type: "start" | "end") => {
|
||||
datePickerType.value = type
|
||||
tempDate.value =
|
||||
type === "start"
|
||||
? periodStart.value
|
||||
? new Date(periodStart.value * 1000)
|
||||
: new Date()
|
||||
: periodEnd.value
|
||||
? new Date(periodEnd.value * 1000)
|
||||
: new Date()
|
||||
datePickerDialog.value = true
|
||||
}
|
||||
|
||||
const confirmDatePicker = () => {
|
||||
if (tempDate.value) {
|
||||
const timestamp = Math.floor(tempDate.value.getTime() / 1000)
|
||||
if (datePickerType.value === "start") {
|
||||
periodStart.value = timestamp
|
||||
} else {
|
||||
periodEnd.value = timestamp
|
||||
}
|
||||
}
|
||||
datePickerDialog.value = false
|
||||
}
|
||||
|
||||
definePageMeta({
|
||||
alias: ["/p/:name()"]
|
||||
})
|
||||
|
||||
Reference in New Issue
Block a user