Ask confirmation when deleting selector or sitemap (#64)

* Added delete confirmation window. Needed fix bug

* Fixed bag

* Fixed bag of clicking anywhere outside the modal

* Fixed bag of clicking anywhere outside the modal

* Changed the appearance and mechanism of the confirm panel

* Fixed eng messages

* Fixed code style

* Fixed style problems and divided showConfirmPanel function on two (show and wait)

* added spaces

* Fixed styles problems

* Bad fix for backdrop click

* working example

* tried to move i18n keys to view + some renaming

* revert to 'Confirm/Подтвердить' for submit label

* Fixed confirm and cancel buttons

Co-authored-by: Max Varlamov <[email protected]>

Author: GooDRomka

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "web-scraper-chrome-extension",
-	"version": "0.3.617",
+	"version": "0.3.618",
 	"description": "Web data extraction tool implemented as chrome extension",
 	"scripts": {
 		"lint": "eslint --ext .js src",

src/_locales/en/messages.json

@@ -272,5 +272,18 @@
 	"extension_description": { "message": "Tool for data extraction from websites" },
 	"browse_data_search": { "message": "Search in scraped data" },
 	"parent_selector_self_citation": { "message": "The selector cannot only point to itself" },
-	"sitemap_export_copy_text_button": { "message": "Copy the sitemap to the clipboard" }
+	"sitemap_export_copy_text_button": { "message": "Copy the sitemap to the clipboard" },
+	"modal_confirm_action_title_delete_selector": {
+		"message": "Are you sure you want to delete selector <span id='modal-selector-id'></span>?"
+	},
+	"modal_confirm_action_title_delete_sitemap": {
+		"message": "Are you sure you want to delete sitemap <span id='modal-sitemap-id'></span>?"
+	},
+	"modal_confirm_action_message_delete_selector": {
+		"message": "The selector that is being deleted has child selectors (<span id='modal-child-count'></span> obj), which will be deleted"
+	},
+	"modal_confirm_action_submit_delete_selector": { "message": "Confirm" },
+	"modal_confirm_action_cancel_delete_selector": { "message": "Cancel" },
+	"modal_confirm_action_submit_delete_sitemap": { "message": "Confirm" },
+	"modal_confirm_action_cancel_delete_sitemap": { "message": "Cancel" }
 }

src/_locales/ru/messages.json

@@ -304,5 +304,18 @@
 	"browse_data_search": { "message": "Поиск в собранных данных" },
 	"content_script_width": { "message": "150px !important" },
 	"parent_selector_self_citation": { "message": "Селектор не может указывать только на себя" },
-	"sitemap_export_copy_text_button": { "message": "Скопировать карту обхода в буфер обмена" }
+	"sitemap_export_copy_text_button": { "message": "Скопировать карту обхода в буфер обмена" },
+	"modal_confirm_action_title_delete_selector": {
+		"message": "Вы действительно хотите удалить селектор <span id='modal-selector-id'></span>?"
+	},
+	"modal_confirm_action_title_delete_sitemap": {
+		"message": "Вы действительно хотите удалить карту обхода <span id='modal-sitemap-id'></span>?"
+	},
+	"modal_confirm_action_message_delete_selector": {
+		"message": "У удаляемого селектора имеются дочерние (<span id='modal-child-count'></span> шт.), которые будут удалены"
+	},
+	"modal_confirm_action_submit_delete_selector": { "message": "Подтвердить" },
+	"modal_confirm_action_cancel_delete_selector": { "message": "Отмена" },
+	"modal_confirm_action_submit_delete_sitemap": { "message": "Подтвердить" },
+	"modal_confirm_action_cancel_delete_sitemap": { "message": "Отмена" }
 }

src/devtools/views/ActionConfirm.html

@@ -0,0 +1,31 @@
+<div class="modal fade" id="confirm-action-modal">
+	<div class="modal-dialog">
+		<div class="modal-content">
+			<div class="modal-header">
+				<h4
+					class="modal-title"
+					id="modal-title"
+					data-i18n="modal_confirm_action_title_{{action}}"
+				></h4>
+				<h5
+					id="modal-message"
+					data-i18n="modal_confirm_action_message_{{action}}"
+					hidden
+				></h5>
+			</div>
+			<div class="modal-footer">
+				<button
+					class="btn btn-default"
+					id="modal-cancel"
+					data-i18n="modal_confirm_action_cancel_{{action}}"
+					data-dismiss="modal"
+				></button>
+				<button
+					class="btn btn-primary"
+					id="modal-submit"
+					data-i18n="modal_confirm_action_submit_{{action}}"
+				></button>
+			</div>
+		</div>
+	</div>
+</div>

src/scripts/Controller.js

@@ -141,6 +141,7 @@ export default class SitemapController {
 			'SitemapSelectorGraph',
 			'DataPreview',
 			'ItemCard',
+			'ActionConfirm',
 		];
 
 		return Promise.all(
@@ -1196,22 +1197,49 @@ export default class SitemapController {
 			type: 'SelectorText',
 			multiple: false,
 		});
-
 		this._editSelector(selector, sitemap);
 	}
 
+	initConfirmActionPanel(action) {
+		$('#confirm-action-modal').remove(); // remove old panel
+		$('#viewport').after(ich.ActionConfirm(action));
+		Translator.translatePage();
+	}
+
+	showConfirmActionPanel(onConfirm) {
+		const $confirmActionModal = $('#confirm-action-modal');
+		$('#modal-submit').click(() => {
+			$confirmActionModal.modal('hide');
+			onConfirm();
+		});
+		$confirmActionModal.modal('show');
+	}
+
 	async deleteSelector(button) {
-		const sitemap = this.state.currentSitemap;
 		const selector = $(button).closest('tr').data('selector');
-		sitemap.deleteSelector(selector);
-		await this.store.saveSitemap(sitemap);
-		this.showSitemapSelectorList();
+		const sitemap = this.state.currentSitemap;
+		const childCount = sitemap.getDirectChildSelectors(selector.id).length;
+		this.initConfirmActionPanel({ action: 'delete_selector' });
+		$('#modal-selector-id').text(selector.id);
+		if (childCount) {
+			$('#modal-child-count').text(childCount);
+			$('#modal-message').show();
+		}
+		this.showConfirmActionPanel(async () => {
+			sitemap.deleteSelector(selector);
+			await this.store.saveSitemap(sitemap);
+			this.showSitemapSelectorList();
+		});
 	}
 
 	async deleteSitemap(button) {
 		const sitemap = $(button).closest('tr').data('sitemap');
-		await this.store.deleteSitemap(sitemap);
-		await this.showSitemaps();
+		this.initConfirmActionPanel({ action: 'delete_sitemap' });
+		$('#modal-sitemap-id').text(sitemap._id);
+		this.showConfirmActionPanel(async () => {
+			await this.store.deleteSitemap(sitemap);
+			await this.showSitemaps();
+		});
 	}
 
 	initScrapeSitemapConfigValidation() {