feat: Timeline Filters (#3284)

* added timeline event filters

* updated empty timeline text

* simplify icons/labels for event types

* added missing translations

* cloned sort improvements to explore page

* added filter indicator

* lint

* removed lint warning

* add top margin to "no events found" text

Co-authored-by: Kuchenpirat <24235032+Kuchenpirat@users.noreply.github.com>

* fixed reversed sort icons

Co-authored-by: Kuchenpirat <24235032+Kuchenpirat@users.noreply.github.com>

* fixed sort dir on timeline filter

* sync checkbox state with preferences state

---------

Co-authored-by: Kuchenpirat <24235032+Kuchenpirat@users.noreply.github.com>
This commit is contained in:
Michael Genson 2024-03-12 10:20:48 -05:00 committed by GitHub
commit 0a344731c8
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
7 changed files with 139 additions and 27 deletions

View file

@ -99,6 +99,7 @@ import { computed, defineComponent, ref, useContext, useRoute } from "@nuxtjs/co
import RecipeCardMobile from "./RecipeCardMobile.vue";
import RecipeTimelineContextMenu from "./RecipeTimelineContextMenu.vue";
import { useStaticRoutes } from "~/composables/api";
import { useTimelineEventTypes } from "~/composables/recipes/use-recipe-timeline-events";
import { Recipe, RecipeTimelineEventOut } from "~/lib/api/types/recipe"
import UserAvatar from "~/components/Domain/User/UserAvatar.vue";
import SafeMarkdown from "~/components/global/SafeMarkdown.vue";
@ -124,6 +125,7 @@ export default defineComponent({
setup(props) {
const { $auth, $globals, $vuetify } = useContext();
const { recipeTimelineEventImage } = useStaticRoutes();
const { eventTypeOptions } = useTimelineEventTypes();
const timelineEvents = ref([] as RecipeTimelineEventOut[]);
const route = useRoute();
@ -164,21 +166,10 @@ export default defineComponent({
}
})
const icon = computed( () => {
switch (props.event.eventType) {
case "comment":
return $globals.icons.commentTextMultiple;
case "info":
return $globals.icons.informationVariant;
case "system":
return $globals.icons.cog;
default:
return $globals.icons.informationVariant;
};
})
const icon = computed(() => {
const option = eventTypeOptions.value.find((option) => option.value === props.event.eventType);
return option ? option.icon : $globals.icons.informationVariant;
});
const hideImage = ref(false);
const eventImageUrl = computed<string>( () => {