modrinth/apps/app-frontend/src/components/ui/ModpackVersionModal.vue

<script setup>
import { CheckIcon } from '@modrinth/assets'
import { Badge, ButtonStyled } from '@modrinth/ui'
import { computed, ref } from 'vue'

import { SwapIcon } from '@/assets/icons/index.js'
import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
import { update_managed_modrinth_version } from '@/helpers/instance'
import { releaseColor } from '@/helpers/utils'

const props = defineProps({
	versions: {
		type: Array,
		required: true,
	},
	instance: {
		type: Object,
		default: null,
	},
})

defineExpose({
	show: () => {
		modpackVersionModal.value.show()
	},
})

const emit = defineEmits(['finish-install'])

const filteredVersions = computed(() => {
	return props.versions
})

const modpackVersionModal = ref(null)
const installedVersion = computed(() => props.instance?.link?.version_id)
const installing = computed(() => props.instance.install_stage !== 'installed')
const inProgress = ref(false)

const switchVersion = async (versionId) => {
	modpackVersionModal.value.hide()
	inProgress.value = true
	await update_managed_modrinth_version(props.instance.id, versionId)
	inProgress.value = false
	emit('finish-install')
}

const onHide = () => {
	if (!inProgress.value) {
		emit('finish-install')
	}
}
</script>

<template>
	<ModalWrapper
		ref="modpackVersionModal"
		class="modpack-version-modal"
		header="Change modpack version"
		:on-hide="onHide"
	>
		<div class="modal-body">
			<div v-if="instance.link" class="mod-card">
				<div class="table">
					<div class="table-row with-columns table-head">
						<div class="table-cell table-text download-cell" />
						<div class="name-cell table-cell table-text">Name</div>
						<div class="table-cell table-text">Supports</div>
					</div>
					<div class="scrollable">
						<div
							v-for="version in filteredVersions"
							:key="version.id"
							class="table-row with-columns selectable"
							@click="$router.push(`/project/${version.project_id}/version/${version.id}`)"
						>
							<div class="table-cell table-text">
								<ButtonStyled
									circular
									:color="version.id === installedVersion ? 'standard' : 'brand'"
								>
									<button
										:disabled="inProgress || installing || version.id === installedVersion"
										@click.stop="() => switchVersion(version.id)"
									>
										<SwapIcon v-if="version.id !== installedVersion" />
										<CheckIcon v-else />
									</button>
								</ButtonStyled>
							</div>
							<div class="name-cell table-cell table-text">
								<div class="version-link">
									{{ version.name.charAt(0).toUpperCase() + version.name.slice(1) }}
									<div class="version-badge">
										<div class="channel-indicator">
											<Badge
												:color="releaseColor(version.version_type)"
												:type="
													version.version_type.charAt(0).toUpperCase() +
													version.version_type.slice(1)
												"
											/>
										</div>
										<div>
											{{ version.version_number }}
										</div>
									</div>
								</div>
							</div>
							<div class="table-cell table-text stacked-text">
								<span>
									{{
										version.loaders
											.map((str) => str.charAt(0).toUpperCase() + str.slice(1))
											.join(', ')
									}}
								</span>
								<span>
									{{ version.game_versions.join(', ') }}
								</span>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</ModalWrapper>
</template>

<style scoped lang="scss">
.filter-header {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 0.5rem;
}

.with-columns {
	grid-template-columns: min-content 1fr 1fr;
}

.scrollable {
	overflow-y: auto;
	max-height: 25rem;
}

.card-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	background-color: var(--color-raised-bg);
}

.mod-card {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	overflow: hidden;
	margin-top: 0.5rem;
}

.version-link {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;

	.version-badge {
		display: flex;
		flex-wrap: wrap;

		.channel-indicator {
			margin-right: 0.5rem;
		}
	}
}

.stacked-text {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	align-items: flex-start;
}

.download-cell {
	width: 4rem;
	padding: 1rem;
}

.modal-body {
	display: flex;
	flex-direction: column;
	gap: var(--gap-md);
}

.table {
	border: 1px solid var(--color-bg);
}
</style>