Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
159 changes: 90 additions & 69 deletions apps/frontend/src/pages/[type]/[id]/version/[version].vue
Original file line number Diff line number Diff line change
Expand Up @@ -207,62 +207,68 @@
class="version-page__dependencies universal-card"
>
<h3>Dependencies</h3>
<div
v-for="(dependency, index) in sortedDeps.filter((x) => !x.file_name)"
:key="index"
class="dependency"
:class="{ 'button-transparent': !isEditing }"
@click="!isEditing ? router.push(dependency.link) : {}"
>
<Avatar
:src="dependency.project ? dependency.project.icon_url : null"
alt="dependency-icon"
size="sm"
/>
<nuxt-link v-if="!isEditing" :to="dependency.link" class="info">
<span class="project-title">
{{ dependency.project ? dependency.project.title : 'Unknown Project' }}
</span>
<span v-if="dependency.version" class="dep-type" :class="dependency.dependency_type">
Version {{ dependency.version.version_number }} is
{{ dependency.dependency_type }}
</span>
<span v-else class="dep-type" :class="dependency.dependency_type">
{{ dependency.dependency_type }}
</span>
</nuxt-link>
<div v-else class="info">
<span class="project-title">
{{ dependency.project ? dependency.project.title : 'Unknown Project' }}
</span>
<span v-if="dependency.version" class="dep-type" :class="dependency.dependency_type">
Version {{ dependency.version.version_number }} is
{{ dependency.dependency_type }}
</span>
<span v-else class="dep-type" :class="dependency.dependency_type">
{{ dependency.dependency_type }}
</span>

<div v-if="dependenciesLoading"><SpinnerIcon /> Loading dependencies...</div>

<template v-if="!dependenciesLoading">
<div
v-for="(dependency, index) in sortedDeps.filter((x) => !x.file_name)"
:key="index"
class="dependency"
:class="{ 'button-transparent': !isEditing }"
@click="!isEditing ? router.push(dependency.link) : {}"
>
<Avatar
:src="dependency.project ? dependency.project.icon_url : null"
alt="dependency-icon"
size="sm"
/>
<nuxt-link v-if="!isEditing" :to="dependency.link" class="info">
<span class="project-title">
{{ dependency.project ? dependency.project.title : 'Unknown Project' }}
</span>
<span v-if="dependency.version" class="dep-type" :class="dependency.dependency_type">
Version {{ dependency.version.version_number }} is
{{ dependency.dependency_type }}
</span>
<span v-else class="dep-type" :class="dependency.dependency_type">
{{ dependency.dependency_type }}
</span>
</nuxt-link>
<div v-else class="info">
<span class="project-title">
{{ dependency.project ? dependency.project.title : 'Unknown Project' }}
</span>
<span v-if="dependency.version" class="dep-type" :class="dependency.dependency_type">
Version {{ dependency.version.version_number }} is
{{ dependency.dependency_type }}
</span>
<span v-else class="dep-type" :class="dependency.dependency_type">
{{ dependency.dependency_type }}
</span>
</div>
<ButtonStyled v-if="isEditing && project.project_type !== 'modpack'">
<button @click="version.dependencies.splice(index, 1)">
<TrashIcon aria-hidden="true" />
Remove
</button>
</ButtonStyled>
</div>
<ButtonStyled v-if="isEditing && project.project_type !== 'modpack'">
<button @click="version.dependencies.splice(index, 1)">
<TrashIcon aria-hidden="true" />
Remove
</button>
</ButtonStyled>
</div>
<div
v-for="(dependency, index) in sortedDeps.filter((x) => x.file_name)"
:key="index"
class="dependency"
>
<Avatar alt="dependency-icon" size="sm" />
<div class="info">
<span class="project-title">
{{ dependency.file_name }}
</span>
<span class="dep-type" :class="dependency.dependency_type">Added via overrides</span>

<div
v-for="(dependency, index) in sortedDeps.filter((x) => x.file_name)"
:key="index"
class="dependency"
>
<Avatar alt="dependency-icon" size="sm" />
<div class="info">
<span class="project-title">
{{ dependency.file_name }}
</span>
<span class="dep-type" :class="dependency.dependency_type">Added via overrides</span>
</div>
</div>
</div>
</template>
</div>
<div class="version-page__files universal-card">
<h3>Files</h3>
Expand Down Expand Up @@ -415,6 +421,7 @@ import {
ReportIcon,
RightArrowIcon,
SaveIcon,
SpinnerIcon,
StarIcon,
TrashIcon,
XIcon,
Expand Down Expand Up @@ -465,6 +472,7 @@ const {
versions: contextVersions,
loadVersions,
dependencies: contextDependencies,
dependenciesLoading: contextDependenciesLoading,
loadDependencies,
invalidate,
} = injectProjectPageContext()
Expand Down Expand Up @@ -494,6 +502,11 @@ const showKnownErrors = ref(false)
const shouldPreventActions = ref(false)
const uploadedImageIds = ref<string[]>([])

const dependenciesMetaLoading = ref(true)
const dependenciesLoading = computed(
() => contextDependenciesLoading.value || dependenciesMetaLoading.value,
)

// File types constant
const fileTypes = ref([
{
Expand Down Expand Up @@ -640,24 +653,32 @@ alternateFile.value = version.value.files?.find(
)

// Process dependencies
const deps = contextDependencies.value ?? { projects: [], versions: [] }
for (const dependency of version.value.dependencies ?? []) {
dependency.version = deps.versions.find((x: any) => x.id === dependency.version_id)
watch(
[contextDependencies],
() => {
const deps = contextDependencies.value ?? { projects: [], versions: [] }

if (dependency.version) {
dependency.project = deps.projects.find((x: any) => x.id === dependency.version.project_id)
}
for (const dependency of version.value.dependencies ?? []) {
dependency.version = deps.versions.find((x: any) => x.id === dependency.version_id)

if (!dependency.project) {
dependency.project = deps.projects.find((x: any) => x.id === dependency.project_id)
}
if (dependency.version) {
dependency.project = deps.projects.find((x: any) => x.id === dependency.version.project_id)
}

dependency.link = dependency.project
? `/${dependency.project.project_type}/${dependency.project.slug ?? dependency.project.id}${
dependency.version ? `/version/${encodeURI(dependency.version.version_number)}` : ''
}`
: ''
}
if (!dependency.project) {
dependency.project = deps.projects.find((x: any) => x.id === dependency.project_id)
}

dependency.link = dependency.project
? `/${dependency.project.project_type}/${dependency.project.slug ?? dependency.project.id}${
dependency.version ? `/version/${encodeURI(dependency.version.version_number)}` : ''
}`
: ''
}
dependenciesMetaLoading.value = false
},
{ deep: true, immediate: true },
)

oldFileTypes.value = (version.value.files ?? []).map(
(x: any) => fileTypes.value.find((y) => y.value === x.file_type) ?? null,
Expand Down
12 changes: 6 additions & 6 deletions packages/ui/wrangler.jsonc
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
{
"name": "storybook",
"compatibility_date": "2026-02-12",
"workers_dev": true,
"assets": {
"directory": "./storybook-static"
}
"name": "storybook",
"compatibility_date": "2026-02-12",
"workers_dev": true,
"assets": {
"directory": "./storybook-static"
}
}