feat: allow selecting a parent project when editing a project

src/stores/projects.ts

@@ -235,8 +235,20 @@ export function useProject(projectId: MaybeRef<IProject['id']>) {
 	)
 
 	const projectStore = useProjectStore()
+	
+	const parentProject = ref<IProject | null>(null)
+	watch(
+		() => project.parentProjectId,
+		projectId => {
+			if (project.parentProjectId) {
+				parentProject.value = projectStore.getProjectById(project.parentProjectId)
+			}
+		},
+		{immediate: true},
+	)
 
 	async function save() {
+		project.parentProjectId = parentProject.value.id
 		await projectStore.updateProject(project)
 		success({message: t('project.edit.success')})
 	}
@@ -244,6 +256,7 @@ export function useProject(projectId: MaybeRef<IProject['id']>) {
 	return {
 		isLoading: readonly(isLoading),
 		project,
+		parentProject,
 		save,
 	}
 }

src/views/project/settings/edit.vue

@@ -42,6 +42,12 @@
 					v-model="project.identifier"/>
 			</div>
 		</div>
+		<div class="field">
+			<label class="label">{{ $t('project.parent') }}</label>
+			<div class="control">
+				<project-search v-model="parentProject"/>
+			</div>
+		</div>
 		<div class="field">
 			<label class="label" for="projectdescription">{{ $t('project.edit.description') }}</label>
 			<div class="control">
@@ -70,13 +76,14 @@ export default { name: 'project-setting-edit' }
 </script>
 
 <script setup lang="ts">
-import type {PropType} from 'vue'
+import {type PropType} from 'vue'
 import {useRouter} from 'vue-router'
 import {useI18n} from 'vue-i18n'
 
 import Editor from '@/components/input/AsyncEditor'
 import ColorPicker from '@/components/input/ColorPicker.vue'
 import CreateEdit from '@/components/misc/create-edit.vue'
+import ProjectSearch from '@/components/tasks/partials/projectSearch.vue'
 
 import type {IProject} from '@/modelTypes/IProject'
 
@@ -96,7 +103,7 @@ const router = useRouter()
 
 const {t} = useI18n({useScope: 'global'})
 
-const {project, save: saveProject, isLoading} = useProject(props.projectId)
+const {project, parentProject, save: saveProject, isLoading} = useProject(props.projectId)
 
 useTitle(() => project?.title ? t('project.edit.title', {project: project.title}) : '')