sugoidogo/modrinth
1
0
Fork 0
mirror of https://github.com/modrinth/code.git synced 2026-09-03 13:36:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor: reduce code duplication for server listing

Browse Source
This commit is contained in:
tdgao
2026-03-23 14:45:54 -06:00
parent 8d61bc7ea9
commit 0abdefd589
1 changed files with 96 additions and 167 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/ui/src/components/servers/ServerListing.vue
+96 -167
View File
@@ -12,18 +12,12 @@
:data-pyro-server-listing-id="server_id" :data-pyro-server-listing-id="server_id"
> >
<div <div
v-if="isProvisioning || isUpgrading" v-if="hasIconOverlay"
class="flex size-16 items-center justify-center rounded-xl border-[1px] border-solid border-button-border bg-button-bg shadow-sm" class="flex size-16 items-center justify-center rounded-xl border-[1px] border-solid border-button-border bg-button-bg shadow-sm"
> >
<ServerIcon :image="image ?? undefined" :disabled="isDisabled" /> <ServerIcon :image="image ?? undefined" :disabled="isDisabled" />
<SpinnerIcon class="size-8 animate-spin absolute" /> <SpinnerIcon v-if="isProvisioning || isUpgrading" class="size-8 animate-spin absolute" />
</div> <LockIcon v-else class="size-8 absolute" />
<div
v-else-if="status === 'suspended'"
class="flex size-16 items-center justify-center rounded-xl border-[1px] border-solid border-button-border bg-button-bg shadow-sm"
>
<ServerIcon :image="image ?? undefined" :disabled="isDisabled" />
<LockIcon class="size-8 absolute" />
</div> </div>
<ServerIcon v-else :image="image ?? undefined" :disabled="isDisabled" /> <ServerIcon v-else :image="image ?? undefined" :disabled="isDisabled" />
<div class="ml-4 flex flex-col gap-2.5" :class="{ 'grayscale opacity-75': isDisabled }"> <div class="ml-4 flex flex-col gap-2.5" :class="{ 'grayscale opacity-75': isDisabled }">
@@ -75,162 +69,28 @@
</div> </div>
</div> </div>
</NuxtLink> </NuxtLink>
<div v-if="isProvisioning" class="server-listing-notice">
<div class="flex gap-2"> <div v-if="noticeType" class="server-listing-notice">
<div v-if="noticeType === 'provisioning'" class="flex gap-2">
Please wait while we set up your server. This should only take a minute. Please wait while we set up your server. This should only take a minute.
</div> </div>
</div> <div v-else-if="noticeType === 'upgrading'" class="flex gap-2">
<div
v-else-if="status === 'suspended' && suspension_reason === 'upgrading'"
class="server-listing-notice"
>
<div class="flex gap-2">
Your server's hardware is currently being upgraded and will be back online shortly. Your server's hardware is currently being upgraded and will be back online shortly.
</div> </div>
</div> <div v-else-if="noticeType === 'cancelled' || noticeType === 'paymentfailed'">
<div
v-else-if="status === 'suspended' && suspension_reason === 'cancelled'"
class="server-listing-notice"
>
<div>
Your subscription was cancelled<template v-if="cancellationDate"> Your subscription was cancelled<template v-if="cancellationDate">
on on
<span class="font-medium text-contrast"> <span class="font-medium text-contrast">
{{ formatDate(cancellationDate) }} {{ formatDate(cancellationDate) }}
</span></template </span></template
><template v-if="noticeType === 'paymentfailed'"> due to payment failure</template
>.<template v-if="!isFilesExpired"> >.<template v-if="!isFilesExpired">
Your files will be kept for <span class="font-medium text-red">30 days</span> and can be Your files will be kept for
downloaded below before they're deleted.</template <span class="font-medium text-red">30 days</span> and can be downloaded below before
they're deleted.</template
> >
</div> </div>
<div class="flex gap-2"> <div v-else-if="noticeType === 'setToCancel'">
<ButtonStyled v-if="onDownloadBackup" type="outlined" circular>
<button
v-tooltip="'Download latest backup'"
class="!border-surface-5"
@click="onDownloadBackup"
>
<DownloadIcon />
</button>
</ButtonStyled>
<ButtonStyled type="outlined">
<button
v-tooltip="'Copy code to clipboard'"
class="!border-surface-5"
@click="copyToClipboard(server_id)"
>
<template v-if="copied"> Copied <CheckIcon class="text-green" /> </template>
<template v-else> Copy ID <CopyIcon /> </template>
</button>
</ButtonStyled>
<ButtonStyled>
<a href="https://support.modrinth.com/en/" target="_blank"
><MessagesSquareIcon /> Support
</a>
</ButtonStyled>
<ButtonStyled v-if="onResubscribe" color="brand">
<button @click="onResubscribe"><RotateCounterClockwiseIcon /> Resubscribe</button>
</ButtonStyled>
</div>
</div>
<div
v-else-if="status === 'suspended' && suspension_reason === 'paymentfailed'"
class="server-listing-notice"
>
<div>
Your subscription was cancelled<template v-if="cancellationDate">
on
<span class="font-medium text-contrast">
{{ formatDate(cancellationDate) }}
</span></template
>
due to payment failure.<template v-if="!isFilesExpired">
Your files will be kept for <span class="font-medium text-red">30 days</span> and can be
downloaded below before they're deleted.</template
>
</div>
<div class="flex gap-2">
<ButtonStyled v-if="onDownloadBackup" type="outlined" circular>
<button
v-tooltip="'Download latest backup'"
class="!border-surface-5"
@click="onDownloadBackup"
>
<DownloadIcon />
</button>
</ButtonStyled>
<ButtonStyled type="outlined">
<button
v-tooltip="'Copy code to clipboard'"
class="!border-surface-5"
@click="copyToClipboard(server_id)"
>
<template v-if="copied"> Copied <CheckIcon class="text-green" /> </template>
<template v-else> Copy ID <CopyIcon /> </template>
</button>
</ButtonStyled>
<ButtonStyled>
<a href="https://support.modrinth.com/en/" target="_blank"
><MessagesSquareIcon /> Support
</a>
</ButtonStyled>
<ButtonStyled color="brand">
<AutoLink :to="`/settings/billing#server-${server_id}`">
<CardIcon /> Manage billing
</AutoLink>
</ButtonStyled>
</div>
</div>
<div
v-else-if="status === 'suspended' && suspension_reason === 'moderated'"
class="server-listing-notice"
>
<div>Your server has been suspended due to a moderation action.</div>
<div class="flex gap-2">
<ButtonStyled type="outlined">
<button
v-tooltip="'Copy code to clipboard'"
class="!border-surface-5"
@click="copyToClipboard(server_id)"
>
<template v-if="copied"> Copied <CheckIcon class="text-green" /> </template>
<template v-else> Copy ID <CopyIcon /> </template>
</button>
</ButtonStyled>
<ButtonStyled>
<a href="https://support.modrinth.com/en/" target="_blank"
><MessagesSquareIcon /> Support
</a>
</ButtonStyled>
</div>
</div>
<div v-else-if="status === 'suspended'" class="server-listing-notice">
<div>
Your server has been suspended. Please contact Modrinth Support for more information.
</div>
<div class="flex gap-2">
<ButtonStyled type="outlined">
<button
v-tooltip="'Copy code to clipboard'"
class="!border-surface-5"
@click="copyToClipboard(server_id)"
>
<template v-if="copied"> Copied <CheckIcon class="text-green" /> </template>
<template v-else> Copy ID <CopyIcon /> </template>
</button>
</ButtonStyled>
<ButtonStyled>
<a href="https://support.modrinth.com/en/" target="_blank"
><MessagesSquareIcon /> Support
</a>
</ButtonStyled>
</div>
</div>
<div
v-if="isSetToCancel && status !== 'suspended' && !isProvisioning"
class="server-listing-notice"
>
<div>
Your subscription is set to cancel<template v-if="cancellationDate"> Your subscription is set to cancel<template v-if="cancellationDate">
on on
<span class="font-medium text-contrast"> <span class="font-medium text-contrast">
@@ -241,8 +101,20 @@
<span class="font-medium text-red">30 days</span> after cancellation.</template <span class="font-medium text-red">30 days</span> after cancellation.</template
> >
</div> </div>
<div class="flex gap-2"> <div v-else-if="noticeType === 'moderated'">
<ButtonStyled v-if="onDownloadBackup" type="outlined" circular> Your server has been suspended due to a moderation action. Please contact Modrinth Support
for more information.
</div>
<div v-else>
Your server has been suspended. Please contact Modrinth Support for more information.
</div>
<div v-if="noticeButtons" class="flex gap-2">
<ButtonStyled
v-if="noticeButtons.downloadBackup && onDownloadBackup"
type="outlined"
circular
>
<button <button
v-tooltip="'Download latest backup'" v-tooltip="'Download latest backup'"
class="!border-surface-5" class="!border-surface-5"
@@ -251,26 +123,32 @@
<DownloadIcon /> <DownloadIcon />
</button> </button>
</ButtonStyled> </ButtonStyled>
<ButtonStyled type="outlined"> <ButtonStyled v-if="noticeButtons.copyId" type="outlined">
<button <button
v-tooltip="'Copy code to clipboard'" v-tooltip="'Copy code to clipboard'"
class="!border-surface-5 w-28" class="!border-surface-5"
@click="copyToClipboard(server_id)" @click="copyToClipboard(server_id)"
> >
<template v-if="copied"> Copied <CheckIcon class="text-green" /></template> <template v-if="copied"> Copied <CheckIcon class="text-green" /> </template>
<template v-else> Copy ID <CopyIcon /></template> <template v-else> Copy ID <CopyIcon /> </template>
</button> </button>
</ButtonStyled> </ButtonStyled>
<ButtonStyled> <ButtonStyled v-if="noticeButtons.support">
<a href="https://support.modrinth.com/en/" target="_blank" <a href="https://support.modrinth.com/en/" target="_blank"
><MessagesSquareIcon /> Support ><MessagesSquareIcon /> Support
</a> </a>
</ButtonStyled> </ButtonStyled>
<ButtonStyled v-if="onResubscribe" color="brand"> <ButtonStyled v-if="noticeButtons.manageBilling" color="brand">
<AutoLink :to="`/settings/billing#server-${server_id}`">
<CardIcon /> Manage billing
</AutoLink>
</ButtonStyled>
<ButtonStyled v-if="noticeButtons.resubscribe && onResubscribe" color="brand">
<button @click="onResubscribe"><RotateCounterClockwiseIcon /> Resubscribe</button> <button @click="onResubscribe"><RotateCounterClockwiseIcon /> Resubscribe</button>
</ButtonStyled> </ButtonStyled>
</div> </div>
</div> </div>
<div v-if="pendingChange && status !== 'suspended'" class="server-listing-notice"> <div v-if="pendingChange && status !== 'suspended'" class="server-listing-notice">
<div> <div>
Your server will {{ pendingChange.verb.toLowerCase() }} to the "{{ Your server will {{ pendingChange.verb.toLowerCase() }} to the "{{
@@ -370,14 +248,65 @@ const isFilesExpired = computed(() => {
const thirtyDaysLater = new Date(cancellation.getTime() + 30 * 24 * 60 * 60 * 1000) const thirtyDaysLater = new Date(cancellation.getTime() + 30 * 24 * 60 * 60 * 1000)
return new Date() > thirtyDaysLater return new Date() > thirtyDaysLater
}) })
const hasNotice = computed(
() => const hasIconOverlay = computed(
isProvisioning.value || () => isProvisioning.value || isUpgrading.value || props.status === 'suspended',
props.status === 'suspended' ||
isSetToCancel.value ||
!!props.pendingChange,
) )
type NoticeType =
| 'provisioning'
| 'upgrading'
| 'cancelled'
| 'paymentfailed'
| 'moderated'
| 'suspended'
| 'setToCancel'
const noticeType = computed<NoticeType | null>(() => {
if (isProvisioning.value) return 'provisioning'
if (props.status === 'suspended') {
switch (props.suspension_reason) {
case 'upgrading':
return 'upgrading'
case 'cancelled':
return 'cancelled'
case 'paymentfailed':
return 'paymentfailed'
case 'moderated':
return 'moderated'
default:
return 'suspended'
}
}
if (isSetToCancel.value) return 'setToCancel'
return null
})
type NoticeButtons = {
downloadBackup?: boolean
copyId?: boolean
support?: boolean
manageBilling?: boolean
resubscribe?: boolean
}
const noticeButtons = computed<NoticeButtons | null>(() => {
switch (noticeType.value) {
case 'cancelled':
case 'setToCancel':
return { downloadBackup: true, copyId: true, support: true, resubscribe: true }
case 'paymentfailed':
return { downloadBackup: true, copyId: true, support: true, manageBilling: true }
case 'moderated':
case 'suspended':
return { copyId: true, support: true }
default:
return null
}
})
const hasNotice = computed(() => !!noticeType.value || !!props.pendingChange)
const showGameLabel = computed(() => !!props.game && !isConfiguring.value) const showGameLabel = computed(() => !!props.game && !isConfiguring.value)
const showLoaderLabel = computed(() => !!props.loader && !isConfiguring.value) const showLoaderLabel = computed(() => !!props.loader && !isConfiguring.value)
const showPlayerCount = computed(() => !!props.playerCount && !isConfiguring.value) const showPlayerCount = computed(() => !!props.playerCount && !isConfiguring.value)