Improve split functions

extend.php

@@ -24,13 +24,17 @@
         ->js(__DIR__.'/js/dist/admin.js'),
 
     (new Extend\Frontend('forum'))
-        ->js(__DIR__.'/js/dist/forum.js'),
+        ->js(__DIR__.'/js/dist/forum.js')
+        ->css(__DIR__.'/resources/less/forum.less'),
 
-    (new Extend\Locales(__DIR__.'/locale')),
+    (new Extend\Locales(__DIR__.'/resources/locale')),
 
     (new Extend\Routes('api'))
         ->post('/split', 'fof.split.run', Api\Controllers\SplitController::class),
 
+    (new Extend\Routes('api'))
+        ->post('/split_to', 'fof.split_to.run', Api\Controllers\SplitToController::class),
+
     (new Extend\Event())
         ->listen(Renamed::class, Listeners\UpdateSplitTitleAfterDiscussionWasRenamed::class)
         ->listen(DiscussionWasSplit::class, Listeners\CreatePostWhenSplit::class),

js/.prettierrc

@@ -0,0 +1,6 @@
+{
+    "singleQuote": true,
+    "trailingComma": "es5",
+    "printWidth": 150,
+    "tabWidth": 4
+}

js/package.json

@@ -1,18 +1,19 @@
 {
-  "name": "@fof/split",
-  "version": "0.0.0",
-  "dependencies": {
-    "flarum-webpack-config": "0.1.0-beta.10",
-    "webpack": "^4.43.0",
-    "webpack-cli": "^3.3.11"
-  },
-  "scripts": {
-    "build": "webpack --mode production",
-    "dev": "webpack --mode development --watch",
-    "lint": "prettier --single-quote --trailing-comma es5 --print-width 150 --tab-width 4 --write src"
-  },
-  "devDependencies": {
-    "flarum": "0.1.0-beta.16",
-    "prettier": "^2.3.0"
-  }
+    "name": "@fof/split",
+    "version": "1.0.0",
+    "dependencies": {
+        "flarum-webpack-config": "1.0.0",
+        "webpack": "^4.46.0",
+        "webpack-cli": "^4.7.2"
+    },
+    "scripts": {
+        "build": "webpack --mode production",
+        "dev": "webpack --mode development --watch",
+        "lint": "prettier --write src"
+    },
+    "devDependencies": {
+        "flarum": "0.1.0-beta.16",
+        "flarum-tsconfig": "^1.0.0",
+        "prettier": "^2.3.0"
+    }
 }

js/src/forum/addSplitControl.js

@@ -1,8 +1,8 @@
 import { extend } from 'flarum/common/extend';
-import app from 'flarum/common/app';
+import app from 'flarum/forum/app';
 import PostControls from 'flarum/common/utils/PostControls';
 import Button from 'flarum/common/components/Button';
-import CommentPost from 'flarum/common/components/CommentPost';
+import CommentPost from 'flarum/forum/components/CommentPost';
 import SplitPostModal from './components/SplitPostModal';
 
 export default function (controller) {

js/src/forum/components/DiscussionSearch.js

@@ -0,0 +1,21 @@
+import Search from 'flarum/forum/components/Search';
+import ItemList from 'flarum/common/utils/ItemList';
+import DiscussionSearchSource from './DiscussionSearchSource';
+
+export default class DiscussionSearch extends Search {
+    view() {
+        this.hasFocus = true;
+
+        const vdom = super.view();
+        vdom.attrs.className = `SplitPosts-Search ${this.state.getValue() && 'open'} ` + vdom.attrs.className.replace(/(focused|open)/g, '');
+
+        return vdom;
+    }
+
+    sourceItems() {
+        const items = new ItemList();
+        items.add('discussions', new DiscussionSearchSource(this.attrs.onSelect, this.attrs.ignore));
+
+        return items;
+    }
+}

js/src/forum/components/DiscussionSearchSource.js

@@ -0,0 +1,57 @@
+import highlight from 'flarum/common/helpers/highlight';
+
+export default class DiscussionSearchSource {
+    constructor(onSelect, ignore) {
+        this.results = new Map();
+
+        this.onSelect = onSelect;
+        this.ignore = ignore;
+    }
+
+    search(query) {
+        query = query.toLowerCase();
+
+        this.results.set(query, []);
+
+        const params = {
+            filter: { q: query },
+            page: { limit: 4 },
+        };
+
+        const id = Number(query);
+
+        if (!Number.isNaN(id) && id !== this.ignore) {
+            return app.store
+                .find('discussions', id)
+                .then((d) => {
+                    this.results.set(query, [d]);
+                })
+                .catch(() => []);
+        }
+
+        return app.store.find('discussions', params).then((results) => {
+            this.results.set(
+                query,
+                results.filter((d) => d.id() !== this.ignore)
+            );
+        });
+    }
+
+    view(query) {
+        query = query.toLowerCase();
+
+        const results = this.results.get(query) || [];
+
+        return [
+            results.map((discussion) => (
+                <li className="DiscussionSearchResult" data-index={'discussions' + discussion.id()}>
+                    <a onclick={() => this.onSelect(discussion)}>
+                        <div className="DiscussionSearchResult-title">
+                            <i>{highlight(discussion.id(), query)}</i> ~ {highlight(discussion.title(), query)}
+                        </div>
+                    </a>
+                </li>
+            )),
+        ];
+    }
+}

js/src/forum/components/SplitPostModal.js

@@ -1,16 +1,27 @@
+import app from 'flarum/forum/app';
 import Modal from 'flarum/common/components/Modal';
 import Button from 'flarum/common/components/Button';
 import Stream from 'flarum/common/utils/Stream';
+import GlobalSearchState from 'flarum/forum/states/GlobalSearchState';
+import DiscussionSearch from './DiscussionSearch';
 
 export default class SplitPostModal extends Modal {
     oninit(vnode) {
         super.oninit(vnode);
 
+        this.discussion = this.attrs.post.discussion();
+
+        this.splitTypes = ['new', 'existing'];
+        this.selectedType = Stream(this.splitTypes[0]);
+
         this.newDiscussionTitle = Stream('');
+        this.targetDiscussion = Stream(null);
+
+        this.search = new GlobalSearchState();
     }
 
     className() {
-        return 'SplitPostModal Modal--small';
+        return 'SplitPostModal Modal--large';
     }
 
     title() {
@@ -19,47 +30,85 @@ export default class SplitPostModal extends Modal {
 
     content() {
         return [
-            m('div', { className: 'Modal-body' }, [
-                m('div', { className: 'Form Form--centered' }, [
-                    m('div', { className: 'Form-group' }, [
-                        m('label', {}, app.translator.trans('fof-split.forum.modal.new_discussion_label')),
-                        m('input', {
-                            className: 'FormControl',
-                            name: 'new_discussion_title',
-                            bidi: this.newDiscussionTitle,
-                        }),
-                    ]),
-                    m('div', { className: 'Form-group' }, [
-                        m(
-                            Button,
-                            {
-                                className: 'Button Button--primary Button--block',
-                                type: 'submit',
-                                loading: this.loading,
-                                disabled: !this.newDiscussionTitle(),
-                            },
-                            app.translator.trans('fof-split.forum.modal.submit_button')
-                        ),
-                    ]),
-                ]),
-            ]),
+            <div className="Modal-body">
+                <div className="Form">
+                    <div className="Form-group">
+                        {this.splitTypes.map((key) => (
+                            <div>
+                                <input type="radio" id={`type_${key}`} checked={this.selectedType() === key} onclick={() => this.selectedType(key)} />
+                                &nbsp;
+                                <label htmlFor={`type_${key}`}>{app.translator.trans(`fof-split.forum.modal.type_${key}_label`)}</label>
+                            </div>
+                        ))}
+                    </div>
+
+                    <div className="Form-group">
+                        {this.selectedType() === this.splitTypes[0] ? (
+                            <label>
+                                {app.translator.trans('fof-split.forum.modal.new_discussion_label')}
+                                <input type="text" className="FormControl" bidi={this.newDiscussionTitle} />
+                            </label>
+                        ) : (
+                            <label>
+                                {app.translator.trans('fof-split.forum.modal.search_discussion_label')}
+                                <DiscussionSearch state={this.search} onSelect={this.select} ignore={this.discussion.id()} />
+                            </label>
+                        )}
+                    </div>
+
+                    {this.selectedType() === this.splitTypes[1] && this.targetDiscussion() && (
+                        <p>
+                            {app.translator.trans('fof-split.forum.modal.split_to_discussion_help', {
+                                title: this.targetDiscussion().title(),
+                            })}
+                        </p>
+                    )}
+
+                    <div className="Form-group">
+                        <Button className="Button Button--primary Button--block" loading={this.loading} type="submit" disabled={this.disabled()}>
+                            {app.translator.trans('fof-split.forum.modal.submit_button')}
+                        </Button>
+                    </div>
+                </div>
+            </div>,
         ];
     }
 
+    disabled = () => {
+        if (this.selectedType() === this.splitTypes[0] && this.newDiscussionTitle()) {
+            return false;
+        }
+
+        return !(this.selectedType() === this.splitTypes[1] && this.targetDiscussion() && this.targetDiscussion().id());
+    };
+
+    select = (discussion) => {
+        if (discussion && discussion.id() === this.discussion.id()) return;
+
+        this.targetDiscussion(discussion);
+    };
+
     onsubmit(e) {
         e.preventDefault();
 
         this.loading = true;
 
         const data = new FormData();
 
-        data.append('title', this.newDiscussionTitle());
         data.append('start_post_id', this.attrs.split.startPostId);
         data.append('end_post_number', this.attrs.post.number());
 
+        let url = app.forum.attribute('apiUrl') + '/split';
+        if (this.selectedType() === this.splitTypes[0]) {
+            data.append('title', this.newDiscussionTitle());
+        } else {
+            data.append('discussion_id', this.targetDiscussion().id());
+            url += '_to';
+        }
+
         app.request({
             method: 'POST',
-            url: app.forum.attribute('apiUrl') + '/split',
+            url,
             serialize: (raw) => raw,
             body: data,
         }).then((data) => {

js/src/forum/index.js

@@ -1,3 +1,4 @@
+import app from 'flarum/forum/app';
 import Model from 'flarum/common/Model';
 
 import addSplitControl from './addSplitControl';

js/tsconfig.json

@@ -0,0 +1,14 @@
+{
+    // Use Flarum's tsconfig as a starting point
+    "extends": "flarum-tsconfig",
+    // This will match all .ts, .tsx, .d.ts, .js, .jsx files
+    "include": ["src/**/*"],
+    "compilerOptions": {
+        // This will output typings to `dist-typings`
+        "declarationDir": "./dist-typings",
+        "baseUrl": ".",
+        "paths": {
+            "flarum/*": ["../vendor/flarum/core/js/dist-typings/*"]
+        }
+    }
+}

resources/less/forum.less

@@ -0,0 +1,10 @@
+.SplitPosts-Search {
+    .Search-input input {
+        width: 100%;
+    }
+
+    .Search-results {
+        left: 0;
+        position: relative;
+    }
+}

locale/en.yml → resources/locale/en.yml

@@ -11,5 +11,9 @@ fof-split:
             to: Split to here
         modal:
             title: Split discussion
+            type_new_label: Split to a new discussion
+            type_existing_label: Split into existing discussion
+            search_discussion_label: Select a discussion to which to split posts
             new_discussion_label: Specify the title for the new discussion
+            split_to_discussion_help: 'Posts will be split into <b>{title}</b>'
             submit_button: Split