modrinth/apps/app-frontend/src/components/ui/world/modal/EditServerModal.vue

<script setup lang="ts">
import { SaveIcon, XIcon } from '@modrinth/assets'
import {
	ButtonStyled,
	commonMessages,
	defineMessage,
	injectNotificationManager,
	NewModal,
	useVIntl,
} from '@modrinth/ui'
import { computed, ref } from 'vue'

import HideFromHomeOption from '@/components/ui/world/modal/HideFromHomeOption.vue'
import ServerModalBody from '@/components/ui/world/modal/ServerModalBody.vue'
import type { GameInstance } from '@/helpers/types'
import {
	type DisplayStatus,
	edit_server_in_instance,
	type ServerPackStatus,
	type ServerWorld,
	set_world_display_status,
} from '@/helpers/worlds.ts'

const { handleError } = injectNotificationManager()
const { formatMessage } = useVIntl()

const emit = defineEmits<{
	submit: [server: ServerWorld]
}>()

const props = defineProps<{
	instance: GameInstance
}>()

const modal = ref<InstanceType<typeof NewModal>>()

const name = ref<string>('')
const address = ref<string>('')
const resourcePack = ref<ServerPackStatus>('enabled')
const index = ref<number>(0)
const displayStatus = ref<DisplayStatus>('normal')
const hideFromHome = ref(false)

const newDisplayStatus = computed(() => (hideFromHome.value ? 'hidden' : 'normal'))

async function saveServer() {
	const serverName = name.value ? name.value : address.value
	const resourcePackStatus = resourcePack.value
	await edit_server_in_instance(
		props.instance.id,
		index.value,
		serverName,
		address.value,
		resourcePackStatus,
	).catch(handleError)

	if (newDisplayStatus.value !== displayStatus.value) {
		await set_world_display_status(
			props.instance.id,
			'server',
			address.value,
			newDisplayStatus.value,
		).catch(handleError)
	}

	emit('submit', {
		name: serverName,
		type: 'server',
		index: index.value,
		address: address.value,
		pack_status: resourcePackStatus,
		display_status: newDisplayStatus.value,
	})
	hide()
}

function show(server: ServerWorld) {
	name.value = server.name
	address.value = server.address
	resourcePack.value = server.pack_status
	index.value = server.index
	displayStatus.value = server.display_status
	hideFromHome.value = server.display_status === 'hidden'
	modal.value?.show()
}

function hide() {
	modal.value?.hide()
}

defineExpose({ show })

const titleMessage = defineMessage({
	id: 'instance.edit-server.title',
	defaultMessage: 'Edit server',
})
</script>
<template>
	<NewModal ref="modal" :header="formatMessage(titleMessage)" width="500px" max-width="500px">
		<ServerModalBody
			v-model:name="name"
			v-model:address="address"
			v-model:resource-pack="resourcePack"
		/>
		<HideFromHomeOption v-model="hideFromHome" class="mt-3" />
		<template #actions>
			<div class="flex gap-2 justify-end">
				<ButtonStyled type="outlined">
					<button @click="hide()">
						<XIcon />
						{{ formatMessage(commonMessages.cancelButton) }}
					</button>
				</ButtonStyled>
				<ButtonStyled color="brand">
					<button :disabled="!address" @click="saveServer">
						<SaveIcon />
						{{ formatMessage(commonMessages.saveChangesButton) }}
					</button>
				</ButtonStyled>
			</div>
		</template>
	</NewModal>
</template>