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"> <script setup lang="ts">
import { import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from '@/components/shadcn/sheet';
Sheet, import { useMutation } from '@vue/apollo-composable';
SheetContent,
SheetHeader,
SheetTitle,
SheetTrigger,
} from "@/components/shadcn/sheet";
import { archiveAllNotifications } from "./graphql/notification.query";
// eslint-disable-next-line @typescript-eslint/consistent-type-imports -- false positive :( // eslint-disable-next-line @typescript-eslint/consistent-type-imports -- false positive :(
import { Importance, NotificationType } from "~/composables/gql/graphql"; import { Importance, NotificationType } from '~/composables/gql/graphql';
import { useMutation } from "@vue/apollo-composable"; import { archiveAllNotifications } from './graphql/notification.query';
const { mutate: archiveAll, loading: loadingArchiveAll } = useMutation( const { mutate: archiveAll, loading: loadingArchiveAll } = useMutation(archiveAllNotifications);
archiveAllNotifications
);
const { teleportTarget, determineTeleportTarget } = useTeleport(); const { teleportTarget, determineTeleportTarget } = useTeleport();
const importance = ref<Importance | undefined>(undefined); const importance = ref<Importance | undefined>(undefined);
</script> </script>
@@ -27,10 +18,7 @@ const importance = ref<Importance | undefined>(undefined);
</SheetTrigger> </SheetTrigger>
<!-- We remove the horizontal padding from the container to keep the NotificationList's scrollbar in the right place --> <!-- We remove the horizontal padding from the container to keep the NotificationList's scrollbar in the right place -->
<SheetContent <SheetContent :to="teleportTarget" class="w-full sm:max-w-[540px] h-screen px-0">
:to="teleportTarget"
class="w-full sm:max-w-[540px] h-screen px-0"
>
<div class="flex flex-col h-full gap-3"> <div class="flex flex-col h-full gap-3">
<SheetHeader class="ml-1 px-6"> <SheetHeader class="ml-1 px-6">
<SheetTitle>Notifications</SheetTitle> <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. --> <!-- 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, --> <!-- 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. --> <!-- 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"> <Tabs default-value="unread" class="flex-1 flex flex-col min-h-0" activation-mode="manual">
<div <div class="flex flex-row justify-between items-center flex-wrap gap-2 px-6">
class="flex flex-row justify-between items-center flex-wrap gap-2 px-6"
>
<TabsList class="ml-[1px]"> <TabsList class="ml-[1px]">
<TabsTrigger value="unread"> Unread </TabsTrigger> <TabsTrigger value="unread"> Unread </TabsTrigger>
<TabsTrigger value="archived"> Archived </TabsTrigger> <TabsTrigger value="archived"> Archived </TabsTrigger>
@@ -59,13 +45,14 @@ const importance = ref<Importance | undefined>(undefined);
</Button> </Button>
<Select <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"> <SelectTrigger class="bg-secondary border-0 h-auto">
<SelectValue <SelectValue class="text-muted-foreground" placeholder="Filter" />
class="text-muted-foreground"
placeholder="Filter"
/>
</SelectTrigger> </SelectTrigger>
<SelectContent :to="teleportTarget"> <SelectContent :to="teleportTarget">
<SelectGroup> <SelectGroup>
@@ -79,17 +66,11 @@ const importance = ref<Importance | undefined>(undefined);
</div> </div>
<TabsContent value="unread" class="flex-1 min-h-0 mt-3"> <TabsContent value="unread" class="flex-1 min-h-0 mt-3">
<NotificationsList <NotificationsList :importance="importance" :type="NotificationType.Unread" />
:importance="importance"
:type="NotificationType.Unread"
/>
</TabsContent> </TabsContent>
<TabsContent value="archived" class="flex-1 min-h-0 mt-3"> <TabsContent value="archived" class="flex-1 min-h-0 mt-3">
<NotificationsList <NotificationsList :importance="importance" :type="NotificationType.Archive" />
:importance="importance"
:type="NotificationType.Archive"
/>
</TabsContent> </TabsContent>
</Tabs> </Tabs>
</div> </div>