Fix dependencies not appearing in mod page after edit mod page

Author: Luffyyy

frontend/app/components/site/pages/edit-mod-page.vue

@@ -14,7 +14,7 @@
 				<edit-mod-members v-model="mod"/>
 			</m-tab>
 			<m-tab name="instructions" :title="$t('instructions_tab')">
-				<edit-mod-deps v-model="mod"/>
+				<edit-mod-deps v-model="mod" v-model:initial-mod="initialMod"/>
 			</m-tab>
 			<m-tab name="extra" :title="$t('extra_tab')">
 				<edit-mod-extra v-model="mod"/>

frontend/app/components/site/pages/edit-mod/edit-dependencies.vue

@@ -44,17 +44,19 @@ import type { Dependency, Mod } from '~/types/models';
 import clone from 'rfdc/default';
 
 const props = defineProps<{
-	dependable: {
-		id: number;
-		dependencies?: Dependency[];
-	};
 	url: string;
 	paused?: boolean;
 }>();
 
 const showAddModModal = ref(false);
 const showError = useQuickErrorToast();
-const dependencies = ref<Dependency[]>(clone(props.dependable.dependencies ?? []));
+
+const dependable = defineModel<{
+	id: number;
+	dependencies?: Dependency[];
+}>({ required: true });
+
+const dependencies = computed(() => dependable.value.dependencies ?? []);
 
 const depTemplate: Dependency = {
 	id: -1,
@@ -83,7 +85,7 @@ watch(() => props.paused, async val => {
 		for (const dep of dependencies.value) {
 			if (!dep.id) {
 				try {
-					const newDep = await postRequest<Dependency>(`${props.url}/${props.dependable.id}/dependencies`, dep);
+					const newDep = await postRequest<Dependency>(`${props.url}/${dependable.value.id}/dependencies`, dep);
 					Object.assign(dep, newDep);
 				} catch (error) {
 					showError(error);
@@ -122,11 +124,11 @@ async function addDependency(onError) {
 				currentDep.value!.id = 0;
 				dependencies.value.push(currentDep.value!);
 			} else {
-				const dep = await postRequest<Dependency>(`${props.url}/${props.dependable.id}/dependencies`, currentDep.value);
+				const dep = await postRequest<Dependency>(`${props.url}/${dependable.value.id}/dependencies`, currentDep.value);
 				dependencies.value.push(dep);
 			}
 		} else if (dep.id) {
-			dep = await patchRequest<Dependency>(`${props.url}/${props.dependable.id}/dependencies/${currentDep.value!.id}`, currentDep.value);
+			dep = await patchRequest<Dependency>(`${props.url}/${dependable.value.id}/dependencies/${currentDep.value!.id}`, currentDep.value);
 		}
 
 		if (currentDepIndex.value !== undefined && currentDepIndex.value !== -1) {
@@ -144,7 +146,7 @@ async function addDependency(onError) {
 async function deleteDep(dep) {
 	try {
 		if (dep.id) {
-			await deleteRequest(`${props.url}/${props.dependable.id}/dependencies/${dep.id}`);
+			await deleteRequest(`${props.url}/${dependable.value.id}/dependencies/${dep.id}`);
 		}
 		remove(dependencies.value, dep);
 		showAddModModal.value = false;

frontend/app/components/site/pages/edit-mod/edit-mod-deps.vue

@@ -8,10 +8,11 @@
 		null-clear
 	/>
 	<md-editor v-model="mod.instructions" :label="$t('instructions')" rows="12"/>
-	<edit-mod-edit-dependencies :dependable="mod" :paused="!mod.id" url="mods"/>
+	<edit-mod-edit-dependencies v-model="initialMod" :paused="!mod.id" url="mods"/>
 </template>
 
 <script setup lang="ts">
 import type { Mod } from '~/types/models';
 const mod = defineModel<Mod>({ required: true });
+const initialMod = defineModel<Mod>('initial-mod', { required: true });
 </script>

frontend/app/components/site/pages/mod/mod-tabs.vue

@@ -28,7 +28,7 @@
 				<md-content allow-anchors :text="mod.license" :parser-version="mod.parser_version"/>
 			</m-tab>
 			<m-tab v-if="dependencies.length || instructions" name="instructions" :title="$t('instructions_tab')" gap="3">
-				<m-flex wrap>
+				<m-flex column>
 					<div v-if="instructions" >
 						<h2>{{ $t('instructions') }}</h2>
 						<md-content class="mb-3" allow-anchors :text="instructions" :parser-version="mod.parser_version"/>

frontend/app/pages/g/[game]/admin/instructs-templates/[template].vue

@@ -9,7 +9,7 @@
 		<m-input v-model="template.name" :label="$t('name')"/>
 		<md-editor v-model="template.instructions" :label="$t('instructions')"/>
 		<m-input v-model="template.localized" type="checkbox" :label="$t('localized')"/>
-		<edit-mod-edit-dependencies v-if="template.id" :dependable="template" url="instructs-templates"/>
+		<edit-mod-edit-dependencies v-if="template.id" v-model="template" url="instructs-templates"/>
 	</simple-resource-form>
 </template>