feat: closes #11424, add category selector to fork modal (#11491)

select the current category on open

public/src/client/topic/fork.js

@@ -1,14 +1,18 @@
 'use strict';
 
 
-define('forum/topic/fork', ['components', 'postSelect', 'alerts'], function (components, postSelect, alerts) {
+define('forum/topic/fork', [
+	'components', 'postSelect', 'alerts', 'categorySelector',
+], function (components, postSelect, alerts, categorySelector) {
 	const Fork = {};
 	let forkModal;
 	let forkCommit;
 	let fromTid;
+	let selectedCategory;
 
 	Fork.init = function () {
 		fromTid = ajaxify.data.tid;
+		selectedCategory = ajaxify.data.category;
 
 		$(window).off('action:ajaxify.end', onAjaxifyEnd).on('action:ajaxify.end', onAjaxifyEnd);
 
@@ -16,13 +20,22 @@ define('forum/topic/fork', ['components', 'postSelect', 'alerts'], function (com
 			return;
 		}
 
-		app.parseAndTranslate('modals/fork-topic', {}, function (html) {
+		app.parseAndTranslate('modals/fork-topic', {
+			selectedCategory: selectedCategory,
+		}, function (html) {
 			forkModal = html;
 
 			forkCommit = forkModal.find('#fork_thread_commit');
 
 			$('body').append(forkModal);
 
+			categorySelector.init(forkModal.find('[component="category-selector"]'), {
+				onSelect: function (category) {
+					selectedCategory = category;
+				},
+				privilege: 'moderate',
+			});
+
 			forkModal.find('#fork_thread_cancel').on('click', closeForkModal);
 			forkModal.find('#fork-title').on('keyup', checkForkButtonEnable);
 
@@ -44,11 +57,15 @@ define('forum/topic/fork', ['components', 'postSelect', 'alerts'], function (com
 	}
 
 	function createTopicFromPosts() {
+		if (!selectedCategory) {
+			return;
+		}
 		forkCommit.attr('disabled', true);
 		socket.emit('topics.createTopicFromPosts', {
 			title: forkModal.find('#fork-title').val(),
 			pids: postSelect.pids,
 			fromTid: fromTid,
+			cid: selectedCategory.cid,
 		}, function (err, newTopic) {
 			function fadeOutAndRemove(pid) {
 				components.get('post', 'pid', pid).fadeOut(500, function () {

src/socket.io/topics.js

@@ -50,7 +50,7 @@ SocketTopics.createTopicFromPosts = async function (socket, data) {
 		throw new Error('[[error:invalid-data]]');
 	}
 
-	const result = await topics.createTopicFromPosts(socket.uid, data.title, data.pids, data.fromTid);
+	const result = await topics.createTopicFromPosts(socket.uid, data.title, data.pids, data.fromTid, data.cid);
 	await events.log({
 		type: `topic-fork`,
 		uid: socket.uid,

src/topics/fork.js

@@ -9,7 +9,7 @@ const plugins = require('../plugins');
 const meta = require('../meta');
 
 module.exports = function (Topics) {
-	Topics.createTopicFromPosts = async function (uid, title, pids, fromTid) {
+	Topics.createTopicFromPosts = async function (uid, title, pids, fromTid, cid) {
 		if (title) {
 			title = title.trim();
 		}
@@ -27,7 +27,9 @@ module.exports = function (Topics) {
 		pids.sort((a, b) => a - b);
 
 		const mainPid = pids[0];
-		const cid = await posts.getCidByPid(mainPid);
+		if (!cid) {
+			cid = await posts.getCidByPid(mainPid);
+		}
 
 		const [postData, isAdminOrMod] = await Promise.all([
 			posts.getPostData(mainPid),

src/views/modals/fork-topic.tpl

@@ -10,7 +10,13 @@
 			<label class="form-label" for="fork-title"><strong>[[topic:title]]</strong></label>
 			<input id="fork-title" type="text" class="form-control" placeholder="[[topic:enter-new-topic-title]]">
 		</div>
-		<strong><span id="fork-pids"></span></strong>
+		<div class="mb-3">
+			<label class="form-label"><strong>[[category:category]]</strong></label>
+			<div>
+			<!-- IMPORT partials/category/selector-dropdown-right.tpl -->
+			</div>
+		</div>
+		<strong id="fork-pids"></strong>
 	</div>
 	<div class="card-footer text-end">
 		<button class="btn btn-link btn-sm" id="fork_thread_cancel">[[global:buttons.close]]</button>