Bug fix in update selector func

package.json

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

src/_locales/en/messages.json

@@ -355,13 +355,25 @@
 	"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_update_selector": {
+		"message": "The new selector type does not support child selectors. Remove existing child selectors?"
+	},
+	"modal_confirm_action_title_update_selector_can_have_child": {
+		"message": "The new selector type supports child selectors. Remove or keep existing child selectors?"
+	},
 	"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 following selectors will be removed (<span id='modal-child-count'></span> obj):"
 	},
+	"modal_confirm_action_message_update_selector": {
+		"message": "Child selectors (<span id='modal-child-count'></span> obj):"
+	},
 	"modal_confirm_action_submit_delete_selector": { "message": "Confirm" },
+	"modal_confirm_action_submit_update_selector": { "message": "Delete selectors" },
+	"modal_confirm_action_submit_update_save_selector": { "message": "Save selectors" },
+	"modal_confirm_action_cancel_update_selector": { "message": "Cancel" },
 	"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

@@ -395,6 +395,19 @@
 	"modal_confirm_action_message_delete_selector": {
 		"message": "Будут удалены следующие селекторы (<span id='modal-child-count'></span> шт.):"
 	},
+	"modal_confirm_action_message_update_selector": {
+		"message": "Дочерние селекторы (<span id='modal-child-count'></span> obj):"
+	},
+	"modal_confirm_action_title_update_selector": {
+		"message": "Новый тип селектора не поддерживает дочерние селекторы. Удалить существующие дочерние селекторы?"
+	},
+	"modal_confirm_action_title_update_selector_can_have_child": {
+		"message": "Новый тип селектора поддерживает дочерние селекторы. Удалить или сохранить существующие дочерние селекторы?"
+	},
+	"modal_confirm_action_submit_update_selector": { "message": "Удалить селекторы" },
+	"modal_confirm_action_submit_update_save_selector": { "message": "Сохранить селекторы" },
+	"modal_confirm_action_cancel_update_selector": { "message": "Отмена" },
+
 	"modal_confirm_action_submit_delete_selector": { "message": "Подтвердить" },
 	"modal_confirm_action_cancel_delete_selector": { "message": "Отмена" },
 	"modal_confirm_action_submit_delete_sitemap": { "message": "Подтвердить" },

src/scripts/Controller.js

@@ -205,6 +205,12 @@ export default class SitemapController {
 			'.delete_selector_submit': {
 				click: this.confirmDeleteSelector,
 			},
+			'.update_selector_submit': {
+				click: this.confirmDeleteChildSelectors,
+			},
+			'#modal-save-child-selectors': {
+				click: this.confirmSaveChildSelectors,
+			},
 			'.delete_sitemap_submit': {
 				click: this.confirmDeleteSitemap,
 			},
@@ -1443,11 +1449,11 @@ export default class SitemapController {
 
 	async saveSelector(button) {
 		const sitemap = this.state.currentSitemap;
-		const selector = this.state.currentSelector;
+		const selectorUuid = this.state.currentSelector.uuid;
+		const selector = sitemap.getSelectorByUid(selectorUuid) || this.state.currentSelector;
 		const newSelector = this.getCurrentlyEditedSelector();
 		const validator = this.getFormValidator();
 		validator.revalidateField('id');
-		// cancel submit if invalid form
 		if (!this.isValidForm()) {
 			return false;
 		}
@@ -1457,8 +1463,53 @@ export default class SitemapController {
 		} catch (err) {
 			console.error(err);
 		}
+		if (selector.type !== newSelector.type) {
+			const children = sitemap.selectors.filter(selectorFromList =>
+				selectorFromList.parentSelectors.includes(selector.uuid)
+			);
+			if (children.length > 0) {
+				this.initConfirmActionPanel({ action: 'update_selector' });
+				if (newSelector.canHaveChildSelectors()) {
+					const saveSelectorsBtn = $('<button/>', {
+						class: 'btn btn-primary',
+						id: 'modal-save-child-selectors',
+						text: Translator.getTranslationByKey(
+							'modal_confirm_action_submit_update_save_selector'
+						),
+					});
+					$('.modal-footer').append(saveSelectorsBtn);
+					$('#modal-title').text(
+						Translator.getTranslationByKey(
+							'modal_confirm_action_title_update_selector_can_have_child'
+						)
+					);
+				}
+				this.displayChildrenInModalWindow(children);
+				$('#modal-message').show();
+				return true;
+			}
+		}
+
+		await this.updateSelector();
+	}
+
+	displayChildrenInModalWindow(children) {
+		$('#modal-child-count').text(children.length);
+		$('#modal-message').after('<ul id="list-deleted-children"></ul>');
+		children.forEach(child => {
+			const $child = $('<li></li>');
+			$child.text(`#${child.uuid} ${child.id}`);
+			$('#list-deleted-children').append($child);
+		});
+	}
+
+	async updateSelector(saveChildrenForNewType = false) {
+		const sitemap = this.state.currentSitemap;
+		const selectorUuid = this.state.currentSelector.uuid;
+		const selector = sitemap.getSelectorByUid(selectorUuid) || this.state.currentSelector;
+		const newSelector = this.getCurrentlyEditedSelector();
 		try {
-			sitemap.updateSelector(selector, newSelector);
+			sitemap.updateSelector(selector, newSelector, saveChildrenForNewType);
 			await this.store.saveSitemap(sitemap, undefined, this.getCurrentProjectId());
 		} catch (err) {
 			console.error(err);
@@ -1467,6 +1518,16 @@ export default class SitemapController {
 		}
 	}
 
+	async confirmSaveChildSelectors(button) {
+		await this.updateSelector(true);
+		$('#confirm-action-modal').modal('hide');
+	}
+
+	async confirmDeleteChildSelectors(button) {
+		await this.updateSelector(false);
+		$('#confirm-action-modal').modal('hide');
+	}
+
 	/**
 	 * Get selector from selector editing form
 	 */
@@ -1658,13 +1719,7 @@ export default class SitemapController {
 		this.initConfirmActionPanel({ action: 'delete_selector' });
 		$('#modal-selector-id').text(selector.id);
 		if (childCount) {
-			$('#modal-child-count').text(childCount);
-			$('#modal-message').after('<ul id="list-deleted-children"></ul>');
-			filteredChildren.forEach(child => {
-				const $child = $('<li></li>');
-				$child.text(`#${child.uuid} ${child.id}`);
-				$('#list-deleted-children').append($child);
-			});
+			this.displayChildrenInModalWindow(filteredChildren);
 			$('#modal-message').show();
 		}
 		this.state.currentSelector = selector;

src/scripts/Sitemap.js

@@ -152,29 +152,48 @@ export default class Sitemap {
 		return urls;
 	}
 
-	updateSelector(selector, selectorData) {
+	updateSelector(selector, newSelectorData, saveChildrenForNewType = false) {
 		// selector is undefined when creating a new one and delete old one, if it exist
-		if (selector === undefined || selector.type !== selectorData.type) {
+		if (selector === undefined || selector.type !== newSelectorData.type) {
 			if (selector) {
-				this.deleteSelector(selector);
+				if (
+					selector.canHaveChildSelectors() &&
+					newSelectorData.canHaveChildSelectors() &&
+					saveChildrenForNewType
+				) {
+					// custom logic: we don’t delete children, but redefined them a parent
+					const children = this.selectors.filter(selectorFromList =>
+						selectorFromList.parentSelectors.includes(selector.uuid)
+					);
+					const newSelector = SelectorList.createSelector(newSelectorData);
+					children.forEach(child => {
+						const parentUuidIndex = child.parentSelectors.indexOf(selector.uuid);
+						child.parentSelectors[parentUuidIndex] = newSelector.uuid;
+					});
+					selector = newSelector;
+				} else {
+					this.deleteSelector(selector);
+					selector = SelectorList.createSelector(newSelectorData);
+				}
+			} else {
+				selector = SelectorList.createSelector(newSelectorData);
 			}
-			selector = SelectorList.createSelector(selectorData);
 		}
 
 		// update child selectors
-		if (selector.uuid !== undefined && selector.uuid !== selectorData.uuid) {
+		if (selector.uuid !== undefined && selector.uuid !== newSelectorData.uuid) {
 			this.selectors.forEach(function (currentSelector) {
-				currentSelector.renameParentSelector(selector.uuid, selectorData.uuid);
+				currentSelector.renameParentSelector(selector.uuid, newSelectorData.uuid);
 			});
 
 			// update cyclic selector
-			const pos = selectorData.parentSelectors.indexOf(selector.uuid);
+			const pos = newSelectorData.parentSelectors.indexOf(selector.uuid);
 			if (pos !== -1) {
-				selectorData.parentSelectors.splice(pos, 1, selectorData.uuid);
+				newSelectorData.parentSelectors.splice(pos, 1, newSelectorData.uuid);
 			}
 		}
 
-		selector.updateData(selectorData, selectorData.getFeatures());
+		selector.updateData(newSelectorData, newSelectorData.getFeatures());
 
 		const index = this.getSelectorUUIDs().indexOf(selector.uuid);
 		if (index === -1) {