diff --git a/app/components/Attachment/AttachmentList.vue b/app/components/Attachment/AttachmentList.vue index 19a4da3..e6ed98b 100644 --- a/app/components/Attachment/AttachmentList.vue +++ b/app/components/Attachment/AttachmentList.vue @@ -14,7 +14,7 @@ class="carousel-container rounded-lg overflow-hidden" :style="carouselStyle" > - + diff --git a/app/pages/publishers/[name].vue b/app/pages/publishers/[name].vue index 811f646..dfebdca 100644 --- a/app/pages/publishers/[name].vue +++ b/app/pages/publishers/[name].vue @@ -9,7 +9,146 @@
- + + + + All + Posts + Articles + + + + + + + + + + + + + + + + + + + + +
+ + + + + + + + + + + + +
+
+
+ + + + + + + {{ + datePickerType === "start" ? "From date" : "To date" + }} + + + + + + Cancel + OK + + +
@@ -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(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(null) +const mediaOnly = ref(false) +const orderDesc = ref(true) +const showAdvancedFilters = ref(false) +const queryTerm = ref("") +const order = ref(undefined) +const periodStart = ref(undefined) +const periodEnd = ref(undefined) + +// Date picker dialog +const datePickerDialog = ref(false) +const datePickerType = ref<"start" | "end">("start") +const tempDate = ref(undefined) + +const postListParams = computed(() => { + 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()"] })