mirror/api
1
0
Fork 0
mirror of https://github.com/unraid/api.git synced 2025-12-31 13:39:52 -06:00
Code Issues Packages Projects Releases Wiki Activity

fix(web): stop opening notification sidebar to archive tab

Browse Source
This commit is contained in:
Pujit Mehrotra
2024-11-14 09:43:41 -05:00
parent dffbfc2dab
commit ecfc797e7d
1 changed files with 16 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
web/components/Notifications/Sidebar.vue
View File

@@ -1,20 +1,11 @@
<script setup lang="ts">
import {
Sheet,
SheetContent,
SheetHeader,
SheetTitle,
SheetTrigger,
} from "@/components/shadcn/sheet";
import { archiveAllNotifications } from "./graphql/notification.query";
import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from '@/components/shadcn/sheet';
import { useMutation } from '@vue/apollo-composable';
// eslint-disable-next-line @typescript-eslint/consistent-type-imports -- false positive :(
import { Importance, NotificationType } from "~/composables/gql/graphql";
import { useMutation } from "@vue/apollo-composable";
import { Importance, NotificationType } from '~/composables/gql/graphql';
import { archiveAllNotifications } from './graphql/notification.query';
const { mutate: archiveAll, loading: loadingArchiveAll } = useMutation(
archiveAllNotifications
);
const { mutate: archiveAll, loading: loadingArchiveAll } = useMutation(archiveAllNotifications);
const { teleportTarget, determineTeleportTarget } = useTeleport();
const importance = ref<Importance | undefined>(undefined);
</script>
@@ -27,10 +18,7 @@ const importance = ref<Importance | undefined>(undefined);
</SheetTrigger>
<!-- We remove the horizontal padding from the container to keep the NotificationList's scrollbar in the right place -->
<SheetContent
:to="teleportTarget"
class="w-full sm:max-w-[540px] h-screen px-0"
>
<SheetContent :to="teleportTarget" class="w-full sm:max-w-[540px] h-screen px-0">
<div class="flex flex-col h-full gap-3">
<SheetHeader class="ml-1 px-6">
<SheetTitle>Notifications</SheetTitle>
@@ -39,10 +27,8 @@ const importance = ref<Importance | undefined>(undefined);
<!-- min-h-0 prevents the flex container from expanding beyond its containing bounds. -->
<!-- this is necessary because flex items have a default min-height: auto, -->
<!-- which means they won't shrink below the height of their content, even if you use flex-1 or other flex properties. -->
<Tabs default-value="unread" class="flex-1 flex flex-col min-h-0">
<div
class="flex flex-row justify-between items-center flex-wrap gap-2 px-6"
>
<Tabs default-value="unread" class="flex-1 flex flex-col min-h-0" activation-mode="manual">
<div class="flex flex-row justify-between items-center flex-wrap gap-2 px-6">
<TabsList class="ml-[1px]">
<TabsTrigger value="unread"> Unread </TabsTrigger>
<TabsTrigger value="archived"> Archived </TabsTrigger>
@@ -59,13 +45,14 @@ const importance = ref<Importance | undefined>(undefined);
</Button>
<Select
@update:model-value="(val) => {importance = val as Importance}"
@update:model-value="
(val) => {
importance = val as Importance;
}
"
>
<SelectTrigger class="bg-secondary border-0 h-auto">
<SelectValue
class="text-muted-foreground"
placeholder="Filter"
/>
<SelectValue class="text-muted-foreground" placeholder="Filter" />
</SelectTrigger>
<SelectContent :to="teleportTarget">
<SelectGroup>
@@ -79,17 +66,11 @@ const importance = ref<Importance | undefined>(undefined);
</div>
<TabsContent value="unread" class="flex-1 min-h-0 mt-3">
<NotificationsList
:importance="importance"
:type="NotificationType.Unread"
/>
<NotificationsList :importance="importance" :type="NotificationType.Unread" />
</TabsContent>
<TabsContent value="archived" class="flex-1 min-h-0 mt-3">
<NotificationsList
:importance="importance"
:type="NotificationType.Archive"
/>
<NotificationsList :importance="importance" :type="NotificationType.Archive" />
</TabsContent>
</Tabs>
</div>