AxTps committed
1 parent
146b88afce
commit
a4615c7b73
7 files changed
+494
-13
No files matched your search
@@ -0,0 +1,187 @@
|
||||
<script setup lang="ts">
|
||||
import {
|
||||
defineMessages,
|
||||
injectNotificationManager,
|
||||
NewModal,
|
||||
StyledInput,
|
||||
useVIntl,
|
||||
} from '@modrinth/ui'
|
||||
import { computed, ref } from 'vue'
|
||||
|
||||
import { type SkinSiteBugIssueType, skinSiteCreateBugIssue } from '@/helpers/skin-site-api'
|
||||
|
||||
const emit = defineEmits<{ (e: 'created', id: number): void }>()
|
||||
|
||||
const { formatMessage } = useVIntl()
|
||||
const { handleError, addNotification } = injectNotificationManager()
|
||||
|
||||
const messages = defineMessages({
|
||||
title: { id: 'app.skin-site.bug-create.title', defaultMessage: 'New issue' },
|
||||
type: { id: 'app.skin-site.bug-create.type', defaultMessage: 'Type' },
|
||||
titleField: { id: 'app.skin-site.bug-create.title-field', defaultMessage: 'Title' },
|
||||
titlePlaceholder: {
|
||||
id: 'app.skin-site.bug-create.title-placeholder',
|
||||
defaultMessage: 'A short summary of the problem',
|
||||
},
|
||||
description: { id: 'app.skin-site.bug-create.description', defaultMessage: 'Description' },
|
||||
descriptionPlaceholder: {
|
||||
id: 'app.skin-site.bug-create.description-placeholder',
|
||||
defaultMessage: 'What happened, and how can it be reproduced?',
|
||||
},
|
||||
privateLabel: { id: 'app.skin-site.bug-create.private', defaultMessage: 'Private issue' },
|
||||
privateHint: {
|
||||
id: 'app.skin-site.bug-create.private-hint',
|
||||
defaultMessage: 'Only you and the maintainers can see it.',
|
||||
},
|
||||
images: { id: 'app.skin-site.bug-create.images', defaultMessage: 'Images' },
|
||||
imagesHint: {
|
||||
id: 'app.skin-site.bug-create.images-hint',
|
||||
defaultMessage: 'Optional, up to 5 images.',
|
||||
},
|
||||
submit: { id: 'app.skin-site.bug-create.submit', defaultMessage: 'Create issue' },
|
||||
submitting: { id: 'app.skin-site.bug-create.submitting', defaultMessage: 'Creating…' },
|
||||
created: { id: 'app.skin-site.bug-create.created', defaultMessage: 'Issue created.' },
|
||||
cancel: { id: 'app.skin-site.bug-create.cancel', defaultMessage: 'Cancel' },
|
||||
typeBug: { id: 'app.skin-site.bugs.type.bug', defaultMessage: 'Bug' },
|
||||
typeFeature: { id: 'app.skin-site.bugs.type.feature', defaultMessage: 'Feature' },
|
||||
typeImprovement: { id: 'app.skin-site.bugs.type.improvement', defaultMessage: 'Improvement' },
|
||||
})
|
||||
|
||||
const modal = ref<InstanceType<typeof NewModal>>()
|
||||
const type = ref<SkinSiteBugIssueType>('BUG')
|
||||
const title = ref('')
|
||||
const description = ref('')
|
||||
const isPrivate = ref(false)
|
||||
const images = ref<File[]>([])
|
||||
const working = ref(false)
|
||||
|
||||
const TYPE_OPTIONS: SkinSiteBugIssueType[] = ['BUG', 'FEATURE', 'IMPROVEMENT']
|
||||
|
||||
function typeLabel(t: SkinSiteBugIssueType): string {
|
||||
if (t === 'FEATURE') return formatMessage(messages.typeFeature)
|
||||
if (t === 'IMPROVEMENT') return formatMessage(messages.typeImprovement)
|
||||
return formatMessage(messages.typeBug)
|
||||
}
|
||||
|
||||
const canSubmit = computed(
|
||||
() => title.value.trim().length > 0 && description.value.trim().length > 0 && !working.value,
|
||||
)
|
||||
|
||||
function reset() {
|
||||
type.value = 'BUG'
|
||||
title.value = ''
|
||||
description.value = ''
|
||||
isPrivate.value = false
|
||||
images.value = []
|
||||
working.value = false
|
||||
}
|
||||
|
||||
function show() {
|
||||
reset()
|
||||
modal.value?.show()
|
||||
}
|
||||
|
||||
function onFiles(event: Event) {
|
||||
const input = event.target as HTMLInputElement
|
||||
images.value = Array.from(input.files ?? []).slice(0, 5)
|
||||
}
|
||||
|
||||
async function submit() {
|
||||
if (!canSubmit.value) return
|
||||
working.value = true
|
||||
try {
|
||||
const result = await skinSiteCreateBugIssue(
|
||||
{
|
||||
type: type.value,
|
||||
title: title.value.trim(),
|
||||
description: description.value.trim(),
|
||||
private: isPrivate.value,
|
||||
},
|
||||
images.value,
|
||||
)
|
||||
if (!result.success) throw new Error(result.errorMessage)
|
||||
addNotification({ type: 'success', title: formatMessage(messages.created) })
|
||||
modal.value?.hide()
|
||||
emit('created', result.payload.id)
|
||||
} catch (error) {
|
||||
handleError(error)
|
||||
} finally {
|
||||
working.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function cancel() {
|
||||
modal.value?.hide()
|
||||
reset()
|
||||
}
|
||||
|
||||
defineExpose({ show })
|
||||
</script>
|
||||
<template>
|
||||
<NewModal ref="modal" :header="formatMessage(messages.title)" @hide="reset">
|
||||
<div class="flex flex-col gap-4">
|
||||
<label class="flex flex-col gap-1">
|
||||
<span class="font-semibold text-contrast">{{ formatMessage(messages.type) }}</span>
|
||||
<select
|
||||
v-model="type"
|
||||
class="rounded-lg border border-solid border-surface-5 bg-bg-raised px-3 py-2 text-sm text-contrast"
|
||||
>
|
||||
<option v-for="t in TYPE_OPTIONS" :key="t" :value="t">{{ typeLabel(t) }}</option>
|
||||
</select>
|
||||
</label>
|
||||
|
||||
<label class="flex flex-col gap-1">
|
||||
<span class="font-semibold text-contrast">{{ formatMessage(messages.titleField) }}</span>
|
||||
<StyledInput
|
||||
v-model="title"
|
||||
type="text"
|
||||
:placeholder="formatMessage(messages.titlePlaceholder)"
|
||||
/>
|
||||
</label>
|
||||
|
||||
<label class="flex flex-col gap-1">
|
||||
<span class="font-semibold text-contrast">{{ formatMessage(messages.description) }}</span>
|
||||
<textarea
|
||||
v-model="description"
|
||||
rows="5"
|
||||
class="w-full resize-y rounded-lg border border-solid border-surface-5 bg-bg-raised px-3 py-2 text-sm text-contrast outline-none focus:border-brand"
|
||||
:placeholder="formatMessage(messages.descriptionPlaceholder)"
|
||||
/>
|
||||
</label>
|
||||
|
||||
<label class="flex items-start gap-2">
|
||||
<input v-model="isPrivate" type="checkbox" class="mt-1" />
|
||||
<span class="flex flex-col">
|
||||
<span class="text-sm font-semibold text-contrast">
|
||||
{{ formatMessage(messages.privateLabel) }}
|
||||
</span>
|
||||
<span class="text-xs text-secondary">{{ formatMessage(messages.privateHint) }}</span>
|
||||
</span>
|
||||
</label>
|
||||
|
||||
<label class="flex flex-col gap-1">
|
||||
<span class="font-semibold text-contrast">{{ formatMessage(messages.images) }}</span>
|
||||
<input type="file" accept="image/*" multiple @change="onFiles" />
|
||||
<span class="text-xs text-secondary">{{ formatMessage(messages.imagesHint) }}</span>
|
||||
</label>
|
||||
|
||||
<div class="flex justify-end gap-2">
|
||||
<button
|
||||
type="button"
|
||||
class="rounded-full bg-button-bg px-4 py-2 text-sm font-semibold text-contrast hover:brightness-110"
|
||||
@click="cancel"
|
||||
>
|
||||
{{ formatMessage(messages.cancel) }}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="rounded-full bg-brand px-4 py-2 text-sm font-semibold text-contrast disabled:opacity-50"
|
||||
:disabled="!canSubmit"
|
||||
@click="submit"
|
||||
>
|
||||
{{ working ? formatMessage(messages.submitting) : formatMessage(messages.submit) }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</NewModal>
|
||||
</template>
|
||||
@@ -27,6 +27,11 @@ const messages = defineMessages({
|
||||
all: { id: 'app.skin-site.bugs.all', defaultMessage: 'All' },
|
||||
more: { id: 'app.skin-site.bugs.more', defaultMessage: 'Load more' },
|
||||
openOnly: { id: 'app.skin-site.bugs.open-only', defaultMessage: 'Open only' },
|
||||
create: { id: 'app.skin-site.bugs.create', defaultMessage: 'New issue' },
|
||||
notifications: {
|
||||
id: 'app.skin-site.bugs.notifications',
|
||||
defaultMessage: 'Notifications',
|
||||
},
|
||||
comments: { id: 'app.skin-site.bugs.comments', defaultMessage: '{count} comments' },
|
||||
typeBug: { id: 'app.skin-site.bugs.type.bug', defaultMessage: 'Bug' },
|
||||
typeFeature: { id: 'app.skin-site.bugs.type.feature', defaultMessage: 'Feature' },
|
||||
@@ -42,7 +47,10 @@ const messages = defineMessages({
|
||||
priorityNormal: { id: 'app.skin-site.bugs.priority.normal', defaultMessage: 'Normal' },
|
||||
priorityLow: { id: 'app.skin-site.bugs.priority.low', defaultMessage: 'Low' },
|
||||
})
|
||||
const emit = defineEmits<{ (e: 'back'): void; (e: 'open', id: number): void }>()
|
||||
const emit = defineEmits<{
|
||||
(e: 'back' | 'create' | 'notifications'): void
|
||||
(e: 'open', id: number): void
|
||||
}>()
|
||||
|
||||
const items = ref<SkinSiteBugIssue[]>([])
|
||||
const hasMore = ref(false)
|
||||
@@ -164,9 +172,27 @@ onMounted(() => load(true))
|
||||
← {{ formatMessage(messages.back) }}
|
||||
</button>
|
||||
|
||||
<header class="flex flex-col gap-1">
|
||||
<h1 class="m-0 text-xl font-bold text-contrast">{{ formatMessage(messages.title) }}</h1>
|
||||
<p class="m-0 text-sm text-secondary">{{ formatMessage(messages.subtitle) }}</p>
|
||||
<header class="flex flex-wrap items-start gap-3">
|
||||
<div class="flex flex-col gap-1">
|
||||
<h1 class="m-0 text-xl font-bold text-contrast">{{ formatMessage(messages.title) }}</h1>
|
||||
<p class="m-0 text-sm text-secondary">{{ formatMessage(messages.subtitle) }}</p>
|
||||
</div>
|
||||
<div class="ml-auto flex items-center gap-2">
|
||||
<button
|
||||
type="button"
|
||||
class="rounded-full bg-button-bg px-3 py-1 text-xs font-semibold text-secondary hover:brightness-110"
|
||||
@click="emit('notifications')"
|
||||
>
|
||||
{{ formatMessage(messages.notifications) }}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="rounded-full bg-brand px-4 py-2 text-sm font-semibold text-contrast hover:brightness-110"
|
||||
@click="emit('create')"
|
||||
>
|
||||
{{ formatMessage(messages.create) }}
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="flex flex-wrap items-center gap-2">
|
||||
|
||||
@@ -0,0 +1,140 @@
|
||||
<script setup lang="ts">
|
||||
import { SpinnerIcon } from '@modrinth/assets'
|
||||
import { defineMessages, injectNotificationManager, useVIntl } from '@modrinth/ui'
|
||||
import { onMounted, ref } from 'vue'
|
||||
|
||||
import {
|
||||
type SkinSiteBugNotification,
|
||||
skinSiteBugNotifications,
|
||||
skinSiteMarkBugNotificationRead,
|
||||
} from '@/helpers/skin-site-api'
|
||||
|
||||
const emit = defineEmits<{ (e: 'back'): void; (e: 'open', id: number): void }>()
|
||||
|
||||
const { formatMessage } = useVIntl()
|
||||
const { handleError } = injectNotificationManager()
|
||||
|
||||
const messages = defineMessages({
|
||||
title: { id: 'app.skin-site.bug-notifications.title', defaultMessage: 'Notifications' },
|
||||
back: { id: 'app.skin-site.bug-notifications.back', defaultMessage: 'Back to home' },
|
||||
subtitle: {
|
||||
id: 'app.skin-site.bug-notifications.subtitle',
|
||||
defaultMessage: 'Activity on issues you reported or follow.',
|
||||
},
|
||||
loading: { id: 'app.skin-site.bug-notifications.loading', defaultMessage: 'Loading…' },
|
||||
failed: {
|
||||
id: 'app.skin-site.bug-notifications.failed',
|
||||
defaultMessage: 'Could not load notifications.',
|
||||
},
|
||||
empty: { id: 'app.skin-site.bug-notifications.empty', defaultMessage: 'No new notifications.' },
|
||||
item: {
|
||||
id: 'app.skin-site.bug-notifications.item',
|
||||
defaultMessage: '{name} updated issue #{id}',
|
||||
},
|
||||
markAll: {
|
||||
id: 'app.skin-site.bug-notifications.mark-all',
|
||||
defaultMessage: 'Mark all as read',
|
||||
},
|
||||
markedAll: {
|
||||
id: 'app.skin-site.bug-notifications.marked-all',
|
||||
defaultMessage: 'All notifications marked as read.',
|
||||
},
|
||||
})
|
||||
|
||||
const items = ref<SkinSiteBugNotification[]>([])
|
||||
const loading = ref(true)
|
||||
const failed = ref(false)
|
||||
const marking = ref(false)
|
||||
|
||||
function formatDateTime(ts: number): string {
|
||||
try {
|
||||
return new Date(ts).toLocaleString()
|
||||
} catch {
|
||||
return ''
|
||||
}
|
||||
}
|
||||
|
||||
async function load() {
|
||||
loading.value = true
|
||||
failed.value = false
|
||||
try {
|
||||
const result = await skinSiteBugNotifications()
|
||||
if (!result.success) throw new Error(result.errorMessage)
|
||||
items.value = result.payload ?? []
|
||||
} catch (error) {
|
||||
failed.value = true
|
||||
handleError(error)
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function markAllRead() {
|
||||
if (marking.value || !items.value.length) return
|
||||
marking.value = true
|
||||
try {
|
||||
await skinSiteMarkBugNotificationRead()
|
||||
items.value = []
|
||||
} catch (error) {
|
||||
handleError(error)
|
||||
} finally {
|
||||
marking.value = false
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => void load())
|
||||
</script>
|
||||
<template>
|
||||
<div class="flex flex-col gap-4">
|
||||
<button
|
||||
type="button"
|
||||
class="flex w-fit items-center gap-1 rounded-full bg-button-bg px-3 py-1 text-xs font-semibold text-contrast hover:brightness-110"
|
||||
@click="emit('back')"
|
||||
>
|
||||
← {{ formatMessage(messages.back) }}
|
||||
</button>
|
||||
|
||||
<header class="flex flex-wrap items-center gap-3">
|
||||
<div class="flex flex-col gap-1">
|
||||
<h1 class="m-0 text-xl font-bold text-contrast">{{ formatMessage(messages.title) }}</h1>
|
||||
<p class="m-0 text-sm text-secondary">{{ formatMessage(messages.subtitle) }}</p>
|
||||
</div>
|
||||
<button
|
||||
v-if="items.length"
|
||||
type="button"
|
||||
class="ml-auto rounded-full bg-button-bg px-3 py-1 text-xs font-semibold text-secondary hover:brightness-110 disabled:opacity-50"
|
||||
:disabled="marking"
|
||||
@click="markAllRead"
|
||||
>
|
||||
{{ formatMessage(messages.markAll) }}
|
||||
</button>
|
||||
</header>
|
||||
|
||||
<div v-if="loading" class="flex items-center gap-2 text-sm text-secondary">
|
||||
<SpinnerIcon class="size-4 animate-spin" />
|
||||
{{ formatMessage(messages.loading) }}
|
||||
</div>
|
||||
<p v-else-if="failed" class="m-0 text-sm text-secondary">
|
||||
{{ formatMessage(messages.failed) }}
|
||||
</p>
|
||||
<p
|
||||
v-else-if="!items.length"
|
||||
class="m-0 rounded-xl border border-solid border-surface-5 bg-bg-raised p-4 text-sm text-secondary"
|
||||
>
|
||||
{{ formatMessage(messages.empty) }}
|
||||
</p>
|
||||
<div v-else class="flex flex-col gap-2">
|
||||
<div
|
||||
v-for="item in items"
|
||||
:key="item.id"
|
||||
class="flex cursor-pointer flex-wrap items-center gap-3 rounded-xl border border-solid border-surface-5 bg-bg-raised p-3 hover:border-brand"
|
||||
@click="emit('open', item.issueId)"
|
||||
>
|
||||
<span class="min-w-0 flex-1 truncate text-sm text-contrast">
|
||||
{{ formatMessage(messages.item, { name: item.actorName, id: item.issueId }) }}
|
||||
</span>
|
||||
<span class="shrink-0 text-xs text-secondary">{{ formatDateTime(item.createdAt) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -5,8 +5,10 @@ import { ref } from 'vue'
|
||||
|
||||
import SkinSiteAccountCard from './SkinSiteAccountCard.vue'
|
||||
import SkinSiteAnnouncements from './SkinSiteAnnouncements.vue'
|
||||
import SkinSiteBugCreateModal from './SkinSiteBugCreateModal.vue'
|
||||
import SkinSiteBugDetailView from './SkinSiteBugDetailView.vue'
|
||||
import SkinSiteBugListView from './SkinSiteBugListView.vue'
|
||||
import SkinSiteBugNotificationsView from './SkinSiteBugNotificationsView.vue'
|
||||
import SkinSiteDonationCard from './SkinSiteDonationCard.vue'
|
||||
import SkinSiteDownloadsView from './SkinSiteDownloadsView.vue'
|
||||
import SkinSiteLoginModal from './SkinSiteLoginModal.vue'
|
||||
@@ -32,9 +34,9 @@ const messages = defineMessages({
|
||||
const YGGDRASIL_URL = 'https://skin.starlight.cool/yggdrasil'
|
||||
const loginModal = ref<InstanceType<typeof SkinSiteLoginModal>>()
|
||||
const profileModal = ref<InstanceType<typeof SkinSiteProfileModal>>()
|
||||
const view = ref<'home' | 'players' | 'downloads' | 'map' | 'review' | 'bugs' | 'bug-detail'>(
|
||||
'home',
|
||||
)
|
||||
const view = ref<
|
||||
'home' | 'players' | 'downloads' | 'map' | 'review' | 'bugs' | 'bug-detail' | 'bug-notifications'
|
||||
>('home')
|
||||
const selectedBugId = ref<number | null>(null)
|
||||
|
||||
function openBug(id: number) {
|
||||
@@ -47,6 +49,16 @@ function backToBugList() {
|
||||
view.value = 'bugs'
|
||||
}
|
||||
|
||||
const bugCreateModal = ref<InstanceType<typeof SkinSiteBugCreateModal>>()
|
||||
|
||||
function openBugNotifications() {
|
||||
view.value = 'bug-notifications'
|
||||
}
|
||||
|
||||
function onBugCreated(id: number) {
|
||||
openBug(id)
|
||||
}
|
||||
|
||||
async function copyAddress() {
|
||||
try {
|
||||
await navigator.clipboard.writeText(YGGDRASIL_URL)
|
||||
@@ -64,7 +76,18 @@ async function copyAddress() {
|
||||
<SkinSiteDownloadsView v-else-if="view === 'downloads'" @back="view = 'home'" />
|
||||
<SkinSiteMapView v-else-if="view === 'map'" @back="view = 'home'" />
|
||||
<SkinSiteReviewView v-else-if="view === 'review'" @back="view = 'home'" />
|
||||
<SkinSiteBugListView v-else-if="view === 'bugs'" @back="view = 'home'" @open="openBug" />
|
||||
<SkinSiteBugListView
|
||||
v-else-if="view === 'bugs'"
|
||||
@back="view = 'home'"
|
||||
@open="openBug"
|
||||
@create="bugCreateModal?.show()"
|
||||
@notifications="openBugNotifications"
|
||||
/>
|
||||
<SkinSiteBugNotificationsView
|
||||
v-else-if="view === 'bug-notifications'"
|
||||
@back="view = 'bugs'"
|
||||
@open="openBug"
|
||||
/>
|
||||
<SkinSiteBugDetailView
|
||||
v-else-if="view === 'bug-detail' && selectedBugId !== null"
|
||||
:issue-id="selectedBugId"
|
||||
@@ -111,5 +134,6 @@ async function copyAddress() {
|
||||
|
||||
<SkinSiteLoginModal ref="loginModal" />
|
||||
<SkinSiteProfileModal ref="profileModal" />
|
||||
<SkinSiteBugCreateModal ref="bugCreateModal" @created="onBugCreated" />
|
||||
</div>
|
||||
</template>
|
||||
Reference in new issue
Block a user