e13a89dd72
* Begin external projects moderator database frontend * add copy link button * begin project page permissions settings * MEL database backend routes * include filename in external files * Hook up frontend external license page to backend * more work on user-facing external projects stuff * put user-facing stuff behind feature flag * prepr * clippy --------- Co-authored-by: aecsocket <aecsocket@tutanota.com>
100 lines
2.5 KiB
Vue
100 lines
2.5 KiB
Vue
<template>
|
|
<div class="relative mx-auto mb-6 flex min-h-screen w-full max-w-[1280px] flex-col px-6">
|
|
<h1>Moderation</h1>
|
|
<NavTabs :links="moderationLinks" class="mb-4 hidden sm:flex" />
|
|
<div class="mb-4 sm:hidden">
|
|
<Chips
|
|
v-model="selectedChip"
|
|
:items="mobileNavOptions"
|
|
:never-empty="true"
|
|
@change="navigateToPage"
|
|
/>
|
|
</div>
|
|
<NuxtPage />
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { FolderIcon, GlobeIcon, ReportIcon, ShieldCheckIcon } from '@modrinth/assets'
|
|
import { Chips, defineMessages, NavTabs, useVIntl } from '@modrinth/ui'
|
|
|
|
definePageMeta({
|
|
middleware: ['auth', 'staff'],
|
|
})
|
|
|
|
useSeoMeta({
|
|
robots: 'noindex',
|
|
})
|
|
|
|
const { formatMessage } = useVIntl()
|
|
const route = useRoute()
|
|
const router = useRouter()
|
|
|
|
const messages = defineMessages({
|
|
projectsTitle: {
|
|
id: 'moderation.page.projects',
|
|
defaultMessage: 'Projects',
|
|
},
|
|
technicalReviewTitle: {
|
|
id: 'moderation.page.technicalReview',
|
|
defaultMessage: 'Tech review',
|
|
},
|
|
reportsTitle: {
|
|
id: 'moderation.page.reports',
|
|
defaultMessage: 'Reports',
|
|
},
|
|
externalFilesTitle: {
|
|
id: 'moderation.page.external-projects',
|
|
defaultMessage: 'External projects',
|
|
},
|
|
})
|
|
|
|
const moderationLinks = [
|
|
{ label: formatMessage(messages.projectsTitle), href: '/moderation', icon: FolderIcon },
|
|
{
|
|
label: formatMessage(messages.technicalReviewTitle),
|
|
href: '/moderation/technical-review',
|
|
icon: ShieldCheckIcon,
|
|
},
|
|
{ label: formatMessage(messages.reportsTitle), href: '/moderation/reports', icon: ReportIcon },
|
|
{
|
|
label: formatMessage(messages.externalFilesTitle),
|
|
href: '/moderation/external-projects',
|
|
icon: GlobeIcon,
|
|
},
|
|
]
|
|
|
|
const mobileNavOptions = [
|
|
formatMessage(messages.projectsTitle),
|
|
formatMessage(messages.technicalReviewTitle),
|
|
formatMessage(messages.reportsTitle),
|
|
formatMessage(messages.externalFilesTitle),
|
|
]
|
|
|
|
const selectedChip = computed({
|
|
get() {
|
|
const path = route.path
|
|
if (path === '/moderation/technical-review') {
|
|
return formatMessage(messages.technicalReviewTitle)
|
|
} else if (path.startsWith('/moderation/reports/')) {
|
|
return formatMessage(messages.reportsTitle)
|
|
} else {
|
|
return formatMessage(messages.projectsTitle)
|
|
}
|
|
},
|
|
set(value: string) {
|
|
navigateToPage(value)
|
|
},
|
|
})
|
|
|
|
function navigateToPage(selectedOption: string) {
|
|
if (selectedOption === formatMessage(messages.technicalReviewTitle)) {
|
|
router.push('/moderation/technical-review')
|
|
} else if (selectedOption === formatMessage(messages.reportsTitle)) {
|
|
router.push('/moderation/reports')
|
|
} else {
|
|
router.push('/moderation')
|
|
}
|
|
}
|
|
</script>
|