Factor RemoveButton from {RelationEditor,ExtResourceEditItem}View (#455)

Author: jgonggrijp

frontend/src/forms/remove-button-template.hbs

@@ -0,0 +1,4 @@
+<button type=button class="button is-danger">
+    <span>Remove</span>
+    <span class="icon is-small"><i class="fas fa-times"></i></span>
+</button>

frontend/src/forms/remove-button-view.ts

@@ -0,0 +1,28 @@
+import { extend } from 'lodash';
+
+import View from '../core/view';
+
+import removeButtonTemplate from './remove-button-template';
+
+export default class RemoveButton extends View {
+    initialize(): void {
+        this.render();
+    }
+
+    render(): this {
+        this.$el.html(this.template({}));
+        return this;
+    }
+
+    onClick(): void {
+        this.trigger('click', this);
+    }
+}
+
+extend(RemoveButton.prototype, {
+    className: 'control',
+    template: removeButtonTemplate,
+    events: {
+        click: 'onClick',
+    },
+});

frontend/src/panel-external-resources/external-resource-edit-item-template.hbs

@@ -6,9 +6,3 @@
         <input class="input" type="url" value="{{url}}" required>
     {{/if}}
 </div>
-<div class="control">
-    <button type=button class="button is-danger remove">
-         <span>Remove</span>
-        <span class="icon is-small"><i class="fas fa-times"></i></span>
-    </button>
-</div>

frontend/src/panel-external-resources/external-resource-edit-item-view.ts

@@ -1,19 +1,22 @@
 import { extend } from 'lodash';
 
-import externalResourceEditItemTemplate from './external-resource-edit-item-template';
 import { CompositeView } from '../core/view';
 import PickerView from '../forms/base-picker-view';
+import RemoveButton from '../forms/remove-button-view';
 import Graph from '../common-rdf/graph';
 import Node from '../common-rdf/node';
 import { owl, rdfs } from '../common-rdf/ns';
 
+import externalResourceEditItemTemplate from './external-resource-edit-item-template';
+
 const externalAttributes = [
     rdfs.seeAlso,
     owl.sameAs
 ];
 
 export default class ExternalResourceEditItem extends CompositeView {
     predicatePicker: PickerView;
+    removeButton: RemoveButton;
     predicates: Graph;
     url: string;
 
@@ -30,6 +33,7 @@ export default class ExternalResourceEditItem extends CompositeView {
             this.predicatePicker.val(this.model.get('predicate'));
         }
         this.predicatePicker.on('change', this.updatePredicate, this);
+        this.removeButton = new RemoveButton().on('click', this.close, this);
         this.render();
     }
 
@@ -38,9 +42,8 @@ export default class ExternalResourceEditItem extends CompositeView {
         return this;
     }
 
-    removeExternalResource(): this {
+    close(): void {
         this.trigger('remove', this, this.model);
-        return this;
     }
 
     updatePredicate(view: PickerView, id: string): void {
@@ -63,12 +66,11 @@ extend(ExternalResourceEditItem.prototype, {
     subviews: [{
         view: 'predicatePicker',
         selector: '.control:first-child',
-    },],
+    }, 'removeButton'],
     events: {
         'change input': 'changeUrl',
-        'click .remove': 'removeExternalResource'
-    }
-})
+    },
+});
 
 if (window['DEBUGGING']) {
     window['ExternalResourceEditItem'] = ExternalResourceEditItem;

frontend/src/panel-related-items/relation-editor-template.hbs

@@ -4,9 +4,3 @@
 <div class="control is-expanded">
     {{! object picker }}
 </div>
-<div class="control">
-    <button type=button class="button is-danger">
-        <span>Remove</span>
-        <span class="icon is-small"><i class="fas fa-times"></i></span>
-    </button>
-</div>

frontend/src/panel-related-items/relation-editor-view.ts

@@ -8,6 +8,7 @@ import Node from '../common-rdf/node';
 import Graph from '../common-rdf/graph';
 import PickerView from '../forms/base-picker-view';
 import RangePicker from '../forms/range-picker-view';
+import RemoveButton from '../forms/remove-button-view';
 import ItemGraph from '../common-adapters/item-graph';
 import relationTemplate from './relation-editor-template';
 
@@ -18,12 +19,14 @@ export default class RelationEditor extends CompositeView {
     collection: Graph;
     predicatePicker: PickerView;
     objectPicker: RangePicker;
+    removeButton: RemoveButton;
 
     initialize() {
         this.predicatePicker = new PickerView({collection: this.collection});
         this.predicatePicker.on('change', this.updatePredicate, this);
         if (!this.model) this.model = new Model();
         this.predicateFromModel(this.model).objectFromModel(this.model);
+        this.removeButton = new RemoveButton().on('click', this.close, this);
         this.render();
     }
 
@@ -86,14 +89,11 @@ export default class RelationEditor extends CompositeView {
 extend(RelationEditor.prototype, {
     className: 'field has-addons rit-relation-editor',
     template: relationTemplate,
-    events: {
-        'click button.is-danger': 'close',
-    },
     subviews: [{
         view: 'predicatePicker',
         selector: '.control:first-child',
     }, {
         view: 'objectPicker',
         selector: objectControl,
-    }],
+    }, 'removeButton'],
 });