You've already forked AstralRinth
forked from didirus/AstralRinth
Migrate to Nuxt 3 (#933)
* Migrate to Nuxt 3 * Update vercel config * remove tsconfig comment * Changelog experiment + working proj pages * Fix package json * Prevent vercel complaining * fix deploy (hopefully) * Tag generator * Switch to yarn * Vercel pls 🙏 * Fix tag generation bug * Make (most) non-logged in pages work * fix base build * Linting + state * Eradicate axios, make most user pages work * Fix checkbox state being set incorrectly * Make most things work * Final stretch * Finish (most) things * Move to update model value * Fix modal text getting blurred from transforms (#964) * Adjust nav-link border radius when focused (#961) * Transition between animation states on TextLogo (#955) * Transition between animation states on TextLogo * Remove unused refs * Fixes from review * Disable tabbing to pagination arrows when disabled (#972) * Make position of the "no results" text on grid/gallery views consistent (fixes #963) (#965) * Fix position of the "no results" text on grid view * fix padding * Remove extra margin on main page, fixes #957 (#959) * Fix layout shift and placeholder line height (#973) * Fix a lot of issues * Fix more nuxt 3 issues * fix not all versions showing up (temp) * inline inter css file * More nuxt 3 fixes * [skip ci] broken- backup changes * Change modpack warnings to blue instead of red (#991) * Fix some hydration issues * Update nuxt * Fix some images not showing * Add pagination to versions page + fix lag * Make changelog page consistent with versions page * sync before merge * Delete old file * Fix actions failing * update branch * Fixes navbar transition animation. (#1012) * Fixes navbar transition animation. * Fixes Y-axis animation. Fixes mobile menu. Removes highlightjs prop. * Changes xss call to renderString. * Fixes renderString call. * Removes unnecessary styling. * Reverts mobile nav change. * Nuxt 3 Lazy Loading Search (#1022) * Uses lazyFetch for results. onSearchChange refreshes. Adds loading circle. * Removes console.log * Preserves old page when paging. * Diagnosing filtering bugs. * Fix single facet filtering * Implements useAuth in settings/account. * tiny ssr fix * Updating nuxt.config checklist. * Implements useAuth in revenue, moneitzation, and dashboard index pages. * Fixes setups. * Eliminates results when path changes. Adds animated logo. * Ensures loading animation renders on search page. --------- Co-authored-by: Jai A <jaiagr+gpg@pm.me> * Fix navigation issues * Square button fix (#1023) * Removes checklist from nuxt.config. * Modifies Nuxt CI to build after linting. * Fixes prettierignore file. * bug fixes * Update whitelist domains * Page improvements, fix CLS * Fix a lot of things * Fix project type redirect * Fix 404 errors * Fix user settings + hydration error * Final fixes * fix(creator-section): border radius on icons not aligning with bg (#1027) Co-authored-by: MagnusHJensen <magnus.holm.jensen@lego.dk> * Improvements to the mobile navbar (#984) * Transition between animation states on TextLogo * Remove unused refs * Fixes from review * Improvements to the mobile nav menu * fix avatar alt text * Nevermind, got confused for a moment * Tab bar, menu layout improvements * Highlight search icon when menu is open * Update layouts/default.vue Co-authored-by: Magnus Jensen <magnushjensen.mail@gmail.com> * Fix some issues * Use caret instead * Run prettier * Add create a project --------- Co-authored-by: Magnus Jensen <magnushjensen.mail@gmail.com> Co-authored-by: Geometrically <18202329+Geometrically@users.noreply.github.com> Co-authored-by: Jai A <jaiagr+gpg@pm.me> * Fix mobile menu issues * More issues * Fix lint --------- Co-authored-by: Kaeden Murphy <kmurphy@kaedenmurphy.dev> Co-authored-by: triphora <emmaffle@modrinth.com> Co-authored-by: Zach Baird <30800863+ZachBaird@users.noreply.github.com> Co-authored-by: stairman06 <36215135+stairman06@users.noreply.github.com> Co-authored-by: Zachary Baird <zdb1994@yahoo.com> Co-authored-by: Magnus Jensen <magnushjensen.mail@gmail.com> Co-authored-by: MagnusHJensen <magnus.holm.jensen@lego.dk>
This commit is contained in:
Geometrically
@@ -4,24 +4,20 @@
|
||||
<aside class="universal-card">
|
||||
<h1>Notifications</h1>
|
||||
<NavStack>
|
||||
<NavStackItem link="" label="All"> </NavStackItem>
|
||||
<NavStackItem link="/notifications" label="All" :uses-query="true" />
|
||||
<NavStackItem
|
||||
v-for="type in notificationTypes"
|
||||
:key="type"
|
||||
:link="'?type=' + type"
|
||||
:link="'/notifications/' + type"
|
||||
:label="NOTIFICATION_TYPES[type]"
|
||||
>
|
||||
</NavStackItem>
|
||||
:uses-query="true"
|
||||
/>
|
||||
<h3>Manage</h3>
|
||||
<NavStackItem
|
||||
link="/settings/follows"
|
||||
label="Followed projects"
|
||||
chevron
|
||||
>
|
||||
<NavStackItem link="/settings/follows" label="Followed projects" chevron>
|
||||
<SettingsIcon />
|
||||
</NavStackItem>
|
||||
<NavStackItem
|
||||
v-if="$user.notifications.length > 0"
|
||||
v-if="user.notifications.length > 0"
|
||||
:action="clearNotifications"
|
||||
label="Clear all"
|
||||
danger
|
||||
@@ -34,30 +30,26 @@
|
||||
<div class="normal-page__content">
|
||||
<div class="notifications">
|
||||
<div
|
||||
v-for="notification in $route.query.type !== undefined
|
||||
? $user.notifications.filter((x) => x.type === $route.query.type)
|
||||
: $user.notifications"
|
||||
v-for="notification in $route.params.type !== undefined
|
||||
? user.notifications.filter((x) => x.type === $route.params.type)
|
||||
: user.notifications"
|
||||
:key="notification.id"
|
||||
class="universal-card adjacent-input"
|
||||
>
|
||||
<div class="label">
|
||||
<span class="label__title">
|
||||
<nuxt-link :to="notification.link">
|
||||
<h3 v-html="$xss($md.render(notification.title))" />
|
||||
<h3 v-html="renderString(notification.title)" />
|
||||
</nuxt-link>
|
||||
</span>
|
||||
<div class="label__description">
|
||||
<p>{{ notification.text }}</p>
|
||||
<span
|
||||
v-tooltip="
|
||||
$dayjs(notification.created).format(
|
||||
'MMMM D, YYYY [at] h:mm:ss A'
|
||||
)
|
||||
"
|
||||
v-tooltip="$dayjs(notification.created).format('MMMM D, YYYY [at] h:mm:ss A')"
|
||||
class="date"
|
||||
>
|
||||
<CalendarIcon />
|
||||
Received {{ $dayjs(notification.created).fromNow() }}</span
|
||||
Received {{ fromNow(notification.created) }}</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
@@ -66,12 +58,8 @@
|
||||
v-for="(action, actionIndex) in notification.actions"
|
||||
:key="actionIndex"
|
||||
class="iconified-button"
|
||||
:class="`action-button-${action.title
|
||||
.toLowerCase()
|
||||
.replaceAll(' ', '-')}`"
|
||||
@click="
|
||||
performAction(notification, notificationIndex, actionIndex)
|
||||
"
|
||||
:class="`action-button-${action.title.toLowerCase().replaceAll(' ', '-')}`"
|
||||
@click="performAction(notification, notificationIndex, actionIndex)"
|
||||
>
|
||||
{{ action.title }}
|
||||
</button>
|
||||
@@ -84,8 +72,8 @@
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="$user.notifications.length === 0" class="error">
|
||||
<UpToDate class="icon"></UpToDate>
|
||||
<div v-if="user.notifications.length === 0" class="error">
|
||||
<UpToDate class="icon" />
|
||||
<br />
|
||||
<span class="text">You are up-to-date!</span>
|
||||
</div>
|
||||
@@ -95,14 +83,15 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ClearIcon from '~/assets/images/utils/clear.svg?inline'
|
||||
import SettingsIcon from '~/assets/images/utils/settings.svg?inline'
|
||||
import CalendarIcon from '~/assets/images/utils/calendar.svg?inline'
|
||||
import UpToDate from '~/assets/images/illustrations/up_to_date.svg?inline'
|
||||
import ClearIcon from '~/assets/images/utils/clear.svg'
|
||||
import SettingsIcon from '~/assets/images/utils/settings.svg'
|
||||
import CalendarIcon from '~/assets/images/utils/calendar.svg'
|
||||
import UpToDate from '~/assets/images/illustrations/up_to_date.svg'
|
||||
import NavStack from '~/components/ui/NavStack'
|
||||
import NavStackItem from '~/components/ui/NavStackItem'
|
||||
export default {
|
||||
name: 'Notifications',
|
||||
import { renderString } from '~/helpers/parse'
|
||||
|
||||
export default defineNuxtComponent({
|
||||
components: {
|
||||
NavStack,
|
||||
NavStackItem,
|
||||
@@ -111,8 +100,17 @@ export default {
|
||||
CalendarIcon,
|
||||
UpToDate,
|
||||
},
|
||||
async fetch() {
|
||||
await this.$store.dispatch('user/fetchNotifications')
|
||||
async setup() {
|
||||
definePageMeta({
|
||||
middleware: 'auth',
|
||||
})
|
||||
|
||||
const user = await useUser()
|
||||
if (process.client) {
|
||||
await initUserNotifs()
|
||||
}
|
||||
|
||||
return { user: ref(user) }
|
||||
},
|
||||
head: {
|
||||
title: 'Notifications - Modrinth',
|
||||
@@ -121,9 +119,7 @@ export default {
|
||||
notificationTypes() {
|
||||
const obj = {}
|
||||
|
||||
for (const notification of this.$user.notifications.filter(
|
||||
(it) => it.type !== null
|
||||
)) {
|
||||
for (const notification of this.user.notifications.filter((it) => it.type !== null)) {
|
||||
obj[notification.type] = true
|
||||
}
|
||||
|
||||
@@ -138,58 +134,56 @@ export default {
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
renderString,
|
||||
async clearNotifications() {
|
||||
try {
|
||||
const ids = this.$user.notifications.map((x) => x.id)
|
||||
const ids = this.user.notifications.map((x) => x.id)
|
||||
|
||||
await this.$axios.delete(
|
||||
`notifications?ids=${JSON.stringify(ids)}`,
|
||||
this.$defaultHeaders()
|
||||
)
|
||||
|
||||
ids.forEach((x) => this.$store.dispatch('user/deleteNotification', x))
|
||||
} catch (err) {
|
||||
this.$notify({
|
||||
group: 'main',
|
||||
title: 'An error occurred',
|
||||
text: err.response.data.description,
|
||||
type: 'error',
|
||||
await useBaseFetch(`notifications?ids=${JSON.stringify(ids)}`, {
|
||||
method: 'DELETE',
|
||||
...this.$defaultHeaders(),
|
||||
})
|
||||
}
|
||||
},
|
||||
async performAction(notification, notificationIndex, actionIndex) {
|
||||
this.$nuxt.$loading.start()
|
||||
try {
|
||||
await this.$axios.delete(
|
||||
`notification/${notification.id}`,
|
||||
this.$defaultHeaders()
|
||||
)
|
||||
|
||||
await this.$store.dispatch('user/deleteNotification', notification.id)
|
||||
|
||||
if (actionIndex !== null) {
|
||||
const config = {
|
||||
method:
|
||||
notification.actions[actionIndex].action_route[0].toLowerCase(),
|
||||
url: `${notification.actions[actionIndex].action_route[1]}`,
|
||||
headers: {
|
||||
Authorization: this.$auth.token,
|
||||
},
|
||||
}
|
||||
await this.$axios(config)
|
||||
for (const id of ids) {
|
||||
await userDeleteNotification(id)
|
||||
}
|
||||
} catch (err) {
|
||||
this.$notify({
|
||||
group: 'main',
|
||||
title: 'An error occurred',
|
||||
text: err.response.data.description,
|
||||
text: err.data.description,
|
||||
type: 'error',
|
||||
})
|
||||
}
|
||||
this.$nuxt.$loading.finish()
|
||||
},
|
||||
async performAction(notification, _notificationIndex, actionIndex) {
|
||||
startLoading()
|
||||
try {
|
||||
await useBaseFetch(`notification/${notification.id}`, {
|
||||
method: 'DELETE',
|
||||
...this.$defaultHeaders(),
|
||||
})
|
||||
|
||||
await userDeleteNotification(notification.id)
|
||||
|
||||
if (actionIndex !== null) {
|
||||
await useBaseFetch(`${notification.actions[actionIndex].action_route[1]}`, {
|
||||
method: notification.actions[actionIndex].action_route[0].toUpperCase(),
|
||||
...this.$defaultHeaders(),
|
||||
})
|
||||
}
|
||||
} catch (err) {
|
||||
this.$notify({
|
||||
group: 'main',
|
||||
title: 'An error occurred',
|
||||
text: err.data.description,
|
||||
type: 'error',
|
||||
})
|
||||
}
|
||||
stopLoading()
|
||||
},
|
||||
},
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@@ -201,7 +195,7 @@ export default {
|
||||
align-items: baseline;
|
||||
margin-block-start: 0;
|
||||
|
||||
h3 ::v-deep {
|
||||
:deep(h3) {
|
||||
margin: 0;
|
||||
p {
|
||||
margin: 0;
|
||||
|
||||
Reference in New Issue
Block a user