fix(front): errors in Sidebar.vue

This commit is contained in:
upsiflu 2025-03-14 17:47:05 +01:00
parent 790111dcc0
commit 806f49e061
1 changed files with 27 additions and 15 deletions

View File

@ -5,6 +5,8 @@ import { useI18n } from 'vue-i18n'
import { useStore } from '~/store' import { useStore } from '~/store'
import { useModal } from '~/ui/composables/useModal.ts' import { useModal } from '~/ui/composables/useModal.ts'
import onKeyboardShortcut from '~/composables/onKeyboardShortcut'
import Logo from '~/components/Logo.vue' import Logo from '~/components/Logo.vue'
import Input from '~/components/ui/Input.vue' import Input from '~/components/ui/Input.vue'
import Link from '~/components/ui/Link.vue' import Link from '~/components/ui/Link.vue'
@ -34,6 +36,15 @@ const uploads = useUploadsStore()
const logoUrl = computed(() => store.state.auth.authenticated ? 'library.index' : 'index') const logoUrl = computed(() => store.state.auth.authenticated ? 'library.index' : 'index')
const isOpen = ref(false) const isOpen = ref(false)
// Admin notifications
const moderationNotifications = computed(() =>
store.state.ui.notifications.pendingReviewEdits
+ store.state.ui.notifications.pendingReviewReports
+ store.state.ui.notifications.pendingReviewRequests
)
</script> </script>
<template> <template>
@ -68,12 +79,12 @@ const isOpen = ref(false)
style="align-items: center;" style="align-items: center;"
> >
<Popover <Popover
v-if="$store.state.auth.availablePermissions['settings'] || $store.state.auth.availablePermissions['moderation']" v-if="store.state.auth.availablePermissions['settings'] || store.state.auth.availablePermissions['moderation']"
v-model="isOpen" v-model="isOpen"
raised raised
> >
<Button <Button
v-if="$store.state.auth.availablePermissions['settings'] || $store.state.auth.availablePermissions['moderation']" v-if="store.state.auth.availablePermissions['settings'] || store.state.auth.availablePermissions['moderation']"
round round
square-small square-small
ghost ghost
@ -94,45 +105,45 @@ const isOpen = ref(false)
:to="{name: 'manage.library.edits', query: {q: 'is_approved:null'}}" :to="{name: 'manage.library.edits', query: {q: 'is_approved:null'}}"
icon="bi-music-note-beamed" icon="bi-music-note-beamed"
> >
{{ $t('components.Sidebar.link.library') }} {{ t('components.Sidebar.link.library') }}
<div <div
v-if="$store.state.ui.notifications.pendingReviewEdits > 0" v-if="store.state.ui.notifications.pendingReviewEdits > 0"
:title="labels.pendingReviewEdits" :title="t('components.Sidebar.label.edits')"
:class="['ui', 'circular', 'mini', 'right floated', 'accent', 'label']" :class="['ui', 'circular', 'mini', 'right floated', 'accent', 'label']"
> >
{{ $store.state.ui.notifications.pendingReviewEdits }} {{ store.state.ui.notifications.pendingReviewEdits }}
</div> </div>
</PopoverItem> </PopoverItem>
<PopoverItem <PopoverItem
v-if="$store.state.auth.availablePermissions['moderation']" v-if="store.state.auth.availablePermissions['moderation']"
:to="{name: 'manage.moderation.reports.list', query: {q: 'resolved:no'}}" :to="{name: 'manage.moderation.reports.list', query: {q: 'resolved:no'}}"
icon="bi-megaphone-fill" icon="bi-megaphone-fill"
> >
{{ $t('components.Sidebar.link.moderation') }} {{ t('components.Sidebar.link.moderation') }}
<div <div
v-if="$store.state.ui.notifications.pendingReviewReports + $store.state.ui.notifications.pendingReviewRequests > 0" v-if="store.state.ui.notifications.pendingReviewReports + store.state.ui.notifications.pendingReviewRequests > 0"
:title="labels.pendingReviewReports" :title="t('components.Sidebar.label.reports')"
:class="['ui', 'circular', 'mini', 'right floated', 'accent', 'label']" :class="['ui', 'circular', 'mini', 'right floated', 'accent', 'label']"
> >
{{ $store.state.ui.notifications.pendingReviewReports + $store.state.ui.notifications.pendingReviewRequests }} {{ store.state.ui.notifications.pendingReviewReports + store.state.ui.notifications.pendingReviewRequests }}
</div> </div>
</PopoverItem> </PopoverItem>
<PopoverItem <PopoverItem
v-if="$store.state.auth.availablePermissions['settings']" v-if="store.state.auth.availablePermissions['settings']"
:to="{name: 'manage.users.users.list'}" :to="{name: 'manage.users.users.list'}"
icon="bi-people-fill" icon="bi-people-fill"
> >
{{ $t('components.Sidebar.link.users') }} {{ t('components.Sidebar.link.users') }}
</PopoverItem> </PopoverItem>
<PopoverItem <PopoverItem
v-if="$store.state.auth.availablePermissions['settings']" v-if="store.state.auth.availablePermissions['settings']"
:to="{path: '/manage/settings'}" :to="{path: '/manage/settings'}"
icon="bi-wrench" icon="bi-wrench"
> >
{{ $t('components.Sidebar.link.settings') }} {{ t('components.Sidebar.link.settings') }}
</PopoverItem> </PopoverItem>
</template> </template>
</Popover> </Popover>
@ -178,6 +189,7 @@ const isOpen = ref(false)
:class="[$style['menu-links'], isCollapsed && 'hide-on-mobile']" :class="[$style['menu-links'], isCollapsed && 'hide-on-mobile']"
> >
<Input <Input
ref="search"
v-model="searchParameter" v-model="searchParameter"
raised raised
autocomplete="search" autocomplete="search"