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

feat: update based on review feedback

Browse Source
This commit is contained in:
Eli Bosley
2025-01-14 15:21:15 -05:00
parent a4e2a77410
commit 16f00a0d8c
1 changed files with 80 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -23,7 +23,9 @@ const confirmAndArchiveAll = async () => {
const confirmAndDeleteArchives = async () => { const confirmAndDeleteArchives = async () => {
if ( if (
confirm('This will permanently delete all archived notifications currently on your Unraid server. Continue?') confirm(
'This will permanently delete all archived notifications currently on your Unraid server. Continue?'
)
) { ) {
await deleteArchives(); await deleteArchives();
} }
@@ -40,6 +42,12 @@ const overview = computed(() => {
return result.value.notifications.overview; return result.value.notifications.overview;
}); });
const readArchivedCount = computed(() => {
if (!overview.value) return 0;
const { archive, unread } = overview.value;
return Math.max(0, archive.total - unread.total);
});
/** whether user has viewed their notifications */ /** whether user has viewed their notifications */
const hasSeenNotifications = ref(false); const hasSeenNotifications = ref(false);
@@ -70,80 +78,81 @@ const prepareToViewNotifications = () => {
:to="teleportTarget" :to="teleportTarget"
class="w-full max-w-[100vw] sm:max-w-[540px] max-h-screen h-screen min-h-screen px-0 flex flex-col gap-5 pb-0" class="w-full max-w-[100vw] sm:max-w-[540px] max-h-screen h-screen min-h-screen px-0 flex flex-col gap-5 pb-0"
> >
<div class="relative flex flex-col h-full w-full"> <div class="relative flex flex-col h-full w-full">
<SheetHeader class="ml-1 px-6 items-baseline gap-1 pb-2"> <SheetHeader class="ml-1 px-6 items-baseline gap-1 pb-2">
<SheetTitle class="text-2xl">Notifications</SheetTitle> <SheetTitle class="text-2xl">Notifications</SheetTitle>
<a href="/Settings/Notifications"> <a href="/Settings/Notifications">
<Button variant="link" size="sm" class="p-0 h-auto">Edit Settings</Button> <Button variant="link" size="sm" class="p-0 h-auto">Edit Settings</Button>
</a> </a>
</SheetHeader> </SheetHeader>
<Tabs <Tabs
default-value="unread" default-value="unread"
class="flex flex-1 flex-col min-h-0" class="flex flex-1 flex-col min-h-0"
aria-label="Notification filters" aria-label="Notification filters"
>
<div class="flex flex-row justify-between items-center flex-wrap gap-5 px-6">
<TabsList class="flex" aria-label="Filter notifications by status">
<TabsTrigger value="unread">
Unread <span v-if="overview">({{ overview.unread.total }})</span>
</TabsTrigger>
<TabsTrigger value="archived">
Archived <span v-if="overview">({{ overview.archive.total - overview.unread.total }})</span>
</TabsTrigger>
</TabsList>
<TabsContent value="unread" class="flex-col items-end">
<Button
:disabled="loadingArchiveAll"
variant="link"
size="sm"
class="text-foreground hover:text-destructive transition-none"
@click="confirmAndArchiveAll"
> >
Archive All <div class="flex flex-row justify-between items-center flex-wrap gap-5 px-6">
</Button> <TabsList class="flex" aria-label="Filter notifications by status">
</TabsContent> <TabsTrigger value="unread">
<TabsContent value="archived" class="flex-col items-end"> Unread <span v-if="overview">({{ overview.unread.total }})</span>
<Button </TabsTrigger>
:disabled="loadingDeleteAll" <TabsTrigger value="archived">
variant="link" Archived
size="sm" <span v-if="overview">({{ readArchivedCount }})</span>
class="text-foreground hover:text-destructive transition-none" </TabsTrigger>
@click="confirmAndDeleteArchives" </TabsList>
> <TabsContent value="unread" class="flex-col items-end">
Delete All <Button
</Button> :disabled="loadingArchiveAll"
</TabsContent> variant="link"
size="sm"
class="text-foreground hover:text-destructive transition-none"
@click="confirmAndArchiveAll"
>
Archive All
</Button>
</TabsContent>
<TabsContent value="archived" class="flex-col items-end">
<Button
:disabled="loadingDeleteAll"
variant="link"
size="sm"
class="text-foreground hover:text-destructive transition-none"
@click="confirmAndDeleteArchives"
>
Delete All
</Button>
</TabsContent>
<Select <Select
@update:model-value=" @update:model-value="
(val) => { (val) => {
importance = val === 'all' ? undefined : (val as Importance); importance = val === 'all' ? undefined : (val as Importance);
} }
" "
> >
<SelectTrigger class="h-auto"> <SelectTrigger class="h-auto">
<SelectValue class="text-gray-400 leading-6" placeholder="Filter By" /> <SelectValue class="text-gray-400 leading-6" placeholder="Filter By" />
</SelectTrigger> </SelectTrigger>
<SelectContent :to="teleportTarget"> <SelectContent :to="teleportTarget">
<SelectGroup> <SelectGroup>
<SelectLabel>Notification Types</SelectLabel> <SelectLabel>Notification Types</SelectLabel>
<SelectItem value="all">All Types</SelectItem> <SelectItem value="all">All Types</SelectItem>
<SelectItem :value="Importance.Alert"> Alert </SelectItem> <SelectItem :value="Importance.Alert"> Alert </SelectItem>
<SelectItem :value="Importance.Info">Info</SelectItem> <SelectItem :value="Importance.Info">Info</SelectItem>
<SelectItem :value="Importance.Warning">Warning</SelectItem> <SelectItem :value="Importance.Warning">Warning</SelectItem>
</SelectGroup> </SelectGroup>
</SelectContent> </SelectContent>
</Select> </Select>
</div> </div>
<TabsContent value="unread" class="flex-col flex-1 min-h-0"> <TabsContent value="unread" class="flex-col flex-1 min-h-0">
<NotificationsList :importance="importance" :type="NotificationType.Unread" /> <NotificationsList :importance="importance" :type="NotificationType.Unread" />
</TabsContent> </TabsContent>
<TabsContent value="archived" class="flex-col flex-1 min-h-0"> <TabsContent value="archived" class="flex-col flex-1 min-h-0">
<NotificationsList :importance="importance" :type="NotificationType.Archive" /> <NotificationsList :importance="importance" :type="NotificationType.Archive" />
</TabsContent> </TabsContent>
</Tabs> </Tabs>
</div> </div>
</SheetContent> </SheetContent>
</Sheet> </Sheet>