implemented delete reusable content block

app/app/components/document/document-sidebar.js

@@ -106,6 +106,11 @@ export default Ember.Component.extend(TooltipMixin, NotifierMixin, {
 			this.attrs.onInsertBlock(block);
 		},
 
+		onDeleteBlock(id) {
+			this.set('blocks', this.get('blocks').filter((item) => item.get('id') !== id));
+			this.attrs.onDeleteBlock(id);
+		},
+
 		scrollTop() {
 			this.set('showScrollTool', false);
 

app/app/components/document/page-wizard.js

@@ -12,12 +12,22 @@
 import Ember from 'ember';
 import NotifierMixin from '../../mixins/notifier';
 
+const {
+	computed,
+} = Ember;
+
 export default Ember.Component.extend(NotifierMixin, {
 	display: 'section', // which CSS to use
 	hasTemplates: false,
 
 	didReceiveAttrs() {
-		this.set('hasBlocks', this.get('blocks.length') > 0);
+		let blocks = this.get('blocks');
+
+		this.set('hasBlocks', blocks.get('length') > 0);
+
+		blocks.forEach((b) => {
+			b.set('deleteId', `delete-block-button-${b.id}`);
+		});
 	},
 
 	didRender() {
@@ -42,6 +52,10 @@ export default Ember.Component.extend(NotifierMixin, {
 			this.attrs.onAddSection(section);
 		},
 
+		onDeleteBlock(id) {
+			this.attrs.onDeleteBlock(id);
+		},
+
 		onInsertBlock(block) {
 			this.attrs.onInsertBlock(block);
 		}

app/app/components/section/base-editor.js

@@ -21,10 +21,6 @@ export default Ember.Component.extend({
 		return is.not.undefined(this.get('page.excerpt'));
 	}),
 
-	didReceiveAttrs() {
-		this._super(...arguments);
-	},
-
 	didRender() {
 		let self = this;
 		Mousetrap.bind('esc', function () {

app/app/pods/document/controller.js

@@ -15,6 +15,7 @@ import NotifierMixin from '../../mixins/notifier';
 export default Ember.Controller.extend(NotifierMixin, {
 	documentService: Ember.inject.service('document'),
 	templateService: Ember.inject.service('template'),
+	sectionService: Ember.inject.service('section'),
 	page: null,
 	folder: {},
 	pages: [],
@@ -188,6 +189,14 @@ export default Ember.Controller.extend(NotifierMixin, {
 			});
 		},
 
+		onDeleteBlock(blockId) {
+			this.get('sectionService').deleteBlock(blockId).then(() => {
+				this.audit.record("deleted-block");
+				this.send("showNotification", "Deleted");
+				this.transitionToRoute('document.index');
+			});
+		},
+
 		onDocumentDelete() {
 			this.get('documentService').deleteDocument(this.get('model.document.id')).then(() => {
 				this.audit.record("deleted-page");

app/app/pods/document/template.hbs

@@ -2,7 +2,7 @@
 
 {{#layout/zone-sidebar}}
 	{{document/document-sidebar document=model.document folder=model.folder pages=model.pages page=model.page isEditor=model.isEditor sections=model.sections
-		onAddSection=(action 'onAddSection') onInsertBlock=(action 'onInsertBlock') changePageSequence=(action 'onPageSequenceChange') changePageLevel=(action 'onPageLevelChange') gotoPage=(action 'gotoPage')}}
+		onAddSection=(action 'onAddSection') onInsertBlock=(action 'onInsertBlock') onDeleteBlock=(action 'onDeleteBlock') changePageSequence=(action 'onPageSequenceChange') changePageLevel=(action 'onPageLevelChange') gotoPage=(action 'gotoPage')}}
 {{/layout/zone-sidebar}}
 
 {{#layout/zone-content}}

app/app/services/section.js

@@ -81,6 +81,9 @@ export default BaseService.extend({
 		return this.get('ajax').post(url, {
 			data: JSON.stringify(payload),
 			contentType: 'json'
+		}).then((response) => {
+			let data = this.get('store').normalize('block', response);
+			return this.get('store').push(data);
 		});
 	},
 
@@ -116,5 +119,14 @@ export default BaseService.extend({
 			method: 'PUT',
 			data: JSON.stringify(block)
 		});
+	},
+
+	// Removes specified reusable content block.
+	deleteBlock: function (blockId) {
+		let url = `sections/blocks/${blockId}`;
+
+		return this.get('ajax').request(url, {
+			method: 'DELETE'
+		});
 	}
 });

app/app/styles/view/document/wizard.scss

@@ -83,17 +83,11 @@
 					text-align: center;
 					width: 20px;
 					margin-top: 5px;
-					opacity: 0.3;
+					opacity: 0.4;
 
 					> .material-icons, a {
 						color: $color-gray;
-
-						&:hover {
-							opacity: 1;
-							color: $color-primary;
-						}
 					}
-
 				}
 			}
 		}

app/app/templates/components/document/document-sidebar.hbs

@@ -26,6 +26,6 @@
 	{{/if}}
 	{{#if showSections}}
 		{{document/page-wizard display='section' document=document folder=folder sections=sections blocks=blocks
-		onCancel=(action 'onCancel') onAddSection=(action 'onAddSection') onInsertBlock=(action 'onInsertBlock')}}
+		onCancel=(action 'onCancel') onAddSection=(action 'onAddSection') onInsertBlock=(action 'onInsertBlock') onDeleteBlock=(action 'onDeleteBlock')}}
 	{{/if}}
 </div>

app/app/templates/components/document/page-wizard.hbs

@@ -40,9 +40,15 @@
 								<i class="material-icons">mode_edit</i>
 							{{/link-to}}
 							<div class="divider"></div>
-							<i class="material-icons">delete</i>
+							<i class="material-icons" id={{block.deleteId}}>delete</i>
 						</div>
 						<div class="clearfix" />
+						{{#dropdown-dialog target=block.deleteId position="top right" button="Delete" color="flat-red" onAction=(action 'onDeleteBlock' block.id)}}
+			                <p>
+								Are you sure you want to delete block<br/>
+								<span class="bold">{{block.title}}?</span>
+							</p>
+			            {{/dropdown-dialog}}
 					</li>
 				{{/each}}
 			</ul>