Add the semantic search MultibranchView (#455)

frontend/src/semantic-search/multibranch-row-view.ts

@@ -0,0 +1,34 @@
+import RemoveButton from '../forms/remove-button-view';
+
+import Chain from './chain-view';
+
+/**
+ * Every row in a Multibranch is a Chain with a RemoveButton in front.
+ */
+export default class MultibranchRow extends Chain {
+    removeButton: RemoveButton;
+
+    initialize(): void {
+        this.removeButton = new RemoveButton().on('click', this.close, this);
+        super.initialize();
+    }
+
+    beforeRender(): this {
+        this.removeButton.$el.detach();
+        return this;
+    }
+
+    afterRender(): this {
+        this.removeButton.$el.prependTo(this.$el);
+        return this;
+    }
+
+    remove(): this {
+        this.removeButton.remove();
+        return super.remove();
+    }
+
+    close(): void {
+        this.trigger('close', this, this.model);
+    }
+}

frontend/src/semantic-search/multibranch-view.ts

@@ -0,0 +1,40 @@
+import { extend } from 'lodash';
+
+import Model from '../core/model';
+import Collection from '../core/collection';
+import { CollectionView } from '../core/view';
+
+import MultibranchRow from './multibranch-row-view';
+
+/**
+ * .rowManager of Chains in a Multifield.
+ */
+export default class Multibranch extends CollectionView {
+    initialize(): void {
+        if (!this.collection) {
+            this.collection = new Collection();
+            this.addRow();
+        }
+        this.initItems().render().initCollectionEvents();
+    }
+
+    makeItem(model: Model): MultibranchRow {
+        return new MultibranchRow({ model }).on('close', this.removeRow, this);
+    }
+
+    addRow(): this {
+        this.collection.push(
+            { precedent: this.model.get('precedent') } as unknown as Model
+        );
+        return this;
+    }
+
+    removeRow(row: MultibranchRow, model: Model): this {
+        this.collection.remove(model);
+        return this;
+    }
+}
+
+extend(Multibranch.prototype, {
+    className: 'field',
+});