@topvisor/ui 1.0.20-focus-1 → 1.0.20-selector2-3

package/src/components/project/selectorRegion/selectorRegion.vue

@@ -0,0 +1,330 @@
+<script setup lang="ts">
+import { watch } from 'vue';
+import type { Emits, Props, Region } from './selectorRegion';
+import Select from '@/components/forms/select/select.vue';
+import Button from '@/components/forms/button/button.vue';
+import { useSelectorRegion } from './composables/selectorRegion';
+import { dummyIndex } from './utils/consts';
+
+const props = withDefaults(defineProps<Props>(), {
+	searchers: () => [],
+	// compareRegionsIndexes: () => [],
+	addSearcherIcon: true,
+	addRegionIcon: true,
+	addChanger: true,
+});
+
+const model = defineModel<Props['modelValue']>({ required: true });
+const modelSingle = defineModel<Props['modelValueSingle']>('modelValueSingle');
+
+const emit = defineEmits<Emits>();
+
+const {
+	selectSearcher,
+	selectRegion,
+	compare,
+
+	searcherByKey,
+	allRegionsIndexes,
+
+	getSearcher,
+	getRegion,
+} = useSelectorRegion(props);
+
+const onClickCompare = () => {
+	// ### TODO: сделать выбор регионов через UI (сейчас в UI выбор региона не работает)
+	if (window['fieldTemplates'] && window['fieldTemplates']?.openSelectorRegions) {
+		window['fieldTemplates'].openSelectorRegions(
+			searcherByKey.value,
+			compare.regionsIndexes.value,
+			(regionsIndexes: Region['index'][]) => compare.regionsIndexes.value = regionsIndexes,
+		);
+		return;
+	}
+
+	emit('compareRegions', searcherByKey.value);
+};
+
+watch([selectRegion.regionIndex, selectSearcher.searcherKey, compare.regionsIndexes], () => {
+	if (selectSearcher.searcherKey.value === -1 && compare.regionsIndexes.value.length) {
+		if (JSON.stringify(model.value) === JSON.stringify(compare.regionsIndexes.value)) {
+			return;
+		}
+
+		model.value = [...compare.regionsIndexes.value];
+	} else {
+		model.value = [props.onlySearcher ? selectSearcher.searcherKey.value : selectRegion.regionIndex.value];
+	}
+
+	// регионов нет
+	if (!props.onlySearcher && !allRegionsIndexes.value.size) {
+		selectSearcher.searcherKey.value = dummyIndex;
+	}
+});
+
+if (modelSingle.value) {
+	watch(modelSingle, () => {
+		model.value = [modelSingle.value!];
+	}, { immediate: true });
+}
+
+watch(model, () => {
+	if (model.value[0]) {
+		modelSingle.value = model.value[0];
+	}
+
+	// проверка входных данных v-model на корректность
+	if (props.onlySearcher) {
+		if (
+			!model.value.length ||
+			model.value.length === 1 && !searcherByKey.value.has(model.value[0])
+		) {
+			let defaultKey: number | undefined = searcherByKey.value.keys().next().value;
+
+			if (defaultKey !== undefined) {
+				model.value = [defaultKey];
+			}
+
+			return;
+		}
+
+		if (
+			model.value.length > 1 &&
+			JSON.stringify(model.value) !== JSON.stringify(compare.regionsIndexes.value)
+		) {
+			model.value = [...compare.regionsIndexes.value];
+
+			return;
+		}
+	} else {
+		let newModel = [...new Set(model.value)];
+
+		let defaultIndex = searcherByKey.value.values().next().value?.regionByIndex?.keys().next().value;
+		if (props.forFrequency) {
+			defaultIndex = searcherByKey.value.values().next().value?.regionByIndex?.values().next().value?.key;
+		}
+
+		if (!newModel.length) {
+			if (defaultIndex !== undefined) {
+				newModel.push(defaultIndex);
+			}
+		} else if (newModel.length === 1) {
+			let all = allRegionsIndexes.value;
+
+			if (props.forFrequency) {
+				all = new Set();
+				searcherByKey.value.forEach((searcher) => {
+					searcher.regionByIndex.forEach((region) => {
+						if (region.index === -1) return;
+						if (region.index === dummyIndex) return;
+
+						all.add(region.key);
+					});
+				});
+			}
+
+			if (!all.has(newModel[0]) && newModel[0] !== -2) {
+				newModel = [];
+				if (defaultIndex !== undefined) {
+					newModel.push(defaultIndex);
+				}
+			}
+		} else {
+			newModel = newModel.filter(index => allRegionsIndexes.value.has(index));
+			if (!newModel.length && defaultIndex !== undefined) {
+				newModel.push(defaultIndex);
+			}
+		}
+
+		if (JSON.stringify(model.value) !== JSON.stringify(newModel)) {
+			model.value = newModel;
+
+			return;
+		}
+	}
+
+	// входные данные v-model совпадают с внутренними значениями
+	if (
+		model.value.length === 1 &&
+		model.value[0] === (props.onlySearcher ? selectSearcher.searcherKey.value : selectRegion.regionIndex.value)
+	) {
+		return;
+	}
+
+	// if (
+	// 	model.value.length > 1 &&
+	// 	selectorSearcher.searcherKey.value === -1 &&
+	// 	JSON.stringify(model.value) === JSON.stringify(selectorCompare.regionsIndexes.value)
+	// ) {
+	// 	return;
+	// }
+
+	// обновление regionIndex, searcherKey, selectorCompare.regionsIndexes
+	if (props.onlySearcher) {
+		// if (!model.value.length) {
+		// 	selectorSearcher.searcherKey.value = dummyIndex;
+		//
+		// 	return;
+		// }
+
+		if (model.value.length === 1) {
+			selectSearcher.searcherKey.value = model.value[0];
+
+			return;
+		}
+
+		selectSearcher.searcherKey.value = -1;
+
+		return;
+	} else {
+		// if (!model.value.length) {
+		// 	selectorSearcher.searcherKey.value = dummyIndex;
+		// 	selectorRegion.regionIndex.value = dummyIndex;
+		//
+		// 	return;
+		// }
+
+		if (model.value.length === 1 && selectSearcher.searcherKey.value !== -1) {
+			selectRegion.regionIndex.value = model.value[0];
+
+			let newSearherKey: number | undefined;
+			for (const searcher of searcherByKey.value.values()) {
+				for (const region of searcher.regionByIndex.values()) {
+					const currentRegionIndex = props.forFrequency ? region.key : region.index;
+					if (currentRegionIndex === selectRegion.regionIndex.value) {
+						newSearherKey = searcher.key;
+
+						break;
+					}
+				}
+
+				if (newSearherKey !== undefined) {
+					break;
+				}
+			}
+
+			if (newSearherKey !== undefined) {
+				selectSearcher.searcherKey.value = newSearherKey;
+			}
+		} else {
+			selectSearcher.searcherKey.value = -1;
+			compare.regionsIndexes.value = [...model.value];
+		}
+	}
+}, { immediate: true });
+
+defineExpose({
+	getSearcher,
+	getRegion,
+});
+</script>
+
+<template>
+	<div
+		:class="{
+			'top-selectorRegion': true,
+			'top-selectorRegion-onlySearcher': onlySearcher,
+		}"
+	>
+		<Select
+			:options="selectSearcher.optionBySearcherKey.value"
+			v-model="selectSearcher.searcherKey.value"
+			name="searcher_key"
+			:addChanger="addChanger"
+		/>
+
+		<Select
+			v-if="!onlySearcher && selectSearcher.searcherKey.value !== -1"
+			class="top-select-region"
+			:options="selectRegion.optionByRegionIndex.value"
+			v-model="selectRegion.regionIndex.value"
+			:name="forFrequency ? 'region_key' : 'region_index'"
+			:addChanger="addChanger"
+			:data-top-icon="addRegionIcon ? '' : undefined"
+		/>
+
+		<Button
+			v-if="addCompare && !onlySearcher && selectSearcher.searcherKey.value === -1"
+			name="compare"
+			@click="onClickCompare"
+			:data-count-compare-regions-indexes="compare.regionsIndexes.value.length"
+		>
+			{{ $i18n.Common.Selected_regions }}
+		</Button>
+	</div>
+</template>
+
+<style>
+@import "./styles/searcherColors.css";
+
+.top-selectorRegion {
+	width: 320px;
+	display: inline-flex;
+	vertical-align: middle;
+}
+
+.top-selectorRegion > .top-select {
+	flex-grow: 1;
+}
+
+.top-selectorRegion > .top-select:focus-within {
+	z-index: 4;
+}
+
+.top-selectorRegion > .top-select > .top-select_select:hover,
+.top-selectorRegion > .top-select > .top-select_select.top-error {
+	z-index: 1;
+}
+
+.top-selectorRegion > .top-select-searcher_key {
+	width: 120px;
+	max-width: 140px;
+	margin-right: -1px;
+}
+
+.top-selectorRegion > .top-select-region > select {
+	border-top-left-radius: 0;
+	border-bottom-left-radius: 0;
+}
+
+.top-selectorRegion > .top-select-region {
+	--top-icon-size: 20px;
+	--top-icon-color: var(--color-text-primary-1);
+
+	--top-icon2-size: 20px;
+	--top-icon2-color: var(--color-text-primary-1);
+}
+
+.top-selectorRegion > .top-select-region[data-top-icon][data-top-icon2] {
+	--top-icon2-size: 16px;
+}
+
+.top-selectorRegion > .top-select-region[data-top-icon][data-top-icon2]:after {
+	text-indent: -4px;
+}
+
+.top-selectorRegion > [name="compare"] {
+	border-top-left-radius: 0;
+	border-bottom-left-radius: 0;
+	flex-grow: 1;
+}
+
+.top-selectorRegion > [name="compare"]:after {
+	content: "(" attr(data-count-compare-regions-indexes) ")";
+	margin: 0 0 0 6px;
+}
+
+.top-selectorRegion:not(.top-selectorRegion-onlySearcher) > .top-select-searcher_key > select {
+	border-top-right-radius: 0;
+	border-bottom-right-radius: 0;
+	margin-right: 0;
+}
+
+.top-selectorRegion:not(.top-selectorRegion-onlySearcher) > .top-select-searcher_key[data-value="-1"] > select {
+	border-right: none;
+}
+
+.top-selectorRegion-onlySearcher {
+	width: 120px;
+}
+</style>

package/src/components/project/selectorRegion/stories/README.md

@@ -0,0 +1,36 @@
+Компонент реализует выбор поисковой системы и / или регионов.
+
+Добавляет на страницу компонент с одним или двумя компонентами **TopSelect**:
+
+- select для выбора **ПС**
+- select для выбора **региона**
+
+Списки ПС и регионов генерируется из **props.searchers**.
+
+Выбор нескольких регионов сохраняется в **localStorage** с привязкой к **projectId**.
+
+## Описание функционала
+
+- Выбор ПС и региона (modelValue - список regionIndex)
+- Выбор только ПС  (modelValue - список searcherKey)
+- Вывод значков ПС
+- Выбор **нескольких регионов** / **нескольких ПС** (modelValue - список regionKey)
+- Выбор ПС и регионов в режиме для **работы с частотой запросов**
+    - список ПС ограничен и добавляется регион **Без региона**
+    - в качестве **props.name** для TopSelect выбора региона испоьзоваться **region_key**
+- Вывод варианта **Автовыбор** (**props.autoRegion**), можно использовать при генерации отчетов с заменой на нужный регион
+
+Так как имя поля может меняться элементу label с регионом добавлен класс .g_select-region.
+
+## Утилиты
+
+**genSearcherByKey()** - Генерация словара ПС со словарем регионов из массива ПС
+
+**findRegion()** - поиск региона в массиве поисковиков
+
+## i18n
+
+Требует подключение словарей:
+
+- i18n/Common
+- i18n/keywords

package/src/components/project/selectorRegion/stories/searchers.ts

@@ -0,0 +1,59 @@
+import type { Region, Searcher } from '../selectorRegion';
+import { searchersNames } from '../utils/consts';
+import { faker } from '@faker-js/faker';
+import { getLangLabel } from '@/core/utils/searchers';
+
+const devices: Region['device'][] = [0, 1, 2];
+const langs = ['ru', 'en'];
+const regionNames = ['Москва', 'Санкт-Петербург', 'Владивосток'];
+const searchers: Searcher[] = [];
+
+let count = 0;
+Object.entries(searchersNames).forEach(([key, name]) => {
+	const searcher: Searcher = {
+		id: faker.number.int(),
+		key: +key,
+		name,
+		enabled: 1,
+		regions: [],
+	};
+
+	regionNames.forEach(name => {
+		devices.forEach(device => {
+			langs.forEach(lang => {
+				count++;
+
+				// в Google для тестов оставляем только ПК
+				if (searcher.key === 1 && device !== 0) {
+					return;
+				}
+
+				// в yandex.com для тестов не выводим регионы
+				if (searcher.key === 20) {
+					return;
+				}
+
+				// добавляем только доступные регионы
+				if (lang !== 'ru' && !getLangLabel(searcher.key, lang)) {
+					return;
+				}
+
+				const region: Region = {
+					id: faker.number.int(),
+					index: count,
+					key: count * 2,
+					name,
+					lang,
+					device,
+					enabled: 1,
+				};
+
+				searcher.regions.push(region);
+			});
+		});
+	});
+
+	searchers.push(searcher);
+});
+
+export default searchers;

package/src/components/project/selectorRegion/styles/searcherColors.css

@@ -0,0 +1,41 @@
+.top-select-searcher_key[data-value="0"]:after,
+.top-select-searcher_key[data-value="20"]:after,
+.top-select-searcher_key[data-value="21"]:after {
+	color: red;
+}
+
+.top-select-searcher_key[data-value="1"]:after {
+	color: var(--color-bg-primary-2);
+}
+
+.top-select-searcher_key[data-value="2"]:after {
+	color: #005FF9;
+}
+
+.top-select-searcher_key[data-value="3"]:after {
+	color: #01509B;
+}
+
+.top-select-searcher_key[data-value="4"]:after {
+	color: #FF0000;
+}
+
+.top-select-searcher_key[data-value="5"]:after {
+	color: #008373;
+}
+
+.top-select-searcher_key[data-value="6"]:after {
+	color: #4800B5;
+}
+
+.top-select-searcher_key[data-value="7"]:after {
+	color: #CC0000;
+}
+
+.top-select-searcher_key[data-value="8"]:after {
+	color: #1BADF8;
+}
+
+.top-select-searcher_key[data-value="9"]:after {
+	color: #00CEFF;
+}

package/src/components/project/selectorRegion/utils/consts.ts

@@ -0,0 +1,73 @@
+import type { Region, SearcherIndexed } from '../selectorRegion';
+import { useI18n } from '@/core/plugins/i18n';
+
+export const dummyIndex = -2;
+
+export const searchersNames = {
+	0: 'Yandex',
+	1: 'Google',
+	4: 'YouTube',
+	5: 'Bing',
+	7: 'Seznam',
+	8: 'AppStore',
+	9: 'GoogleStore',
+	20: 'Yandex.com',
+	21: 'Yandex.com.tr',
+};
+
+export const regionUndefined: Region = {
+	key: dummyIndex,
+	name: '--',
+	index: dummyIndex,
+};
+
+export const searcherUndefined: SearcherIndexed = {
+	key: dummyIndex,
+	name: '--',
+	regions: [regionUndefined],
+	regionByIndex: new Map([[dummyIndex, regionUndefined]]),
+};
+
+const regionAuto: Region = {
+	key: dummyIndex,
+	name: 'Autoselect',
+	index: dummyIndex,
+};
+
+const searcherAuto: SearcherIndexed = {
+	key: dummyIndex,
+	name: 'Autoselect',
+	regions: [regionAuto],
+	regionByIndex: new Map([[dummyIndex, regionAuto]]),
+};
+
+const regionGlobal: Region = {
+	countryCode: '00',
+	depth: 1,
+	device: 0,
+	key: -1,
+	index: -1,
+	lang: 'ru',
+	name: 'Without region',
+};
+
+export const getRegionAuto = () => {
+	regionAuto.name = useI18n().Common.Autoselect!;
+
+	return regionAuto;
+};
+
+export const getSearcherAuto = () => {
+	getRegionAuto();
+
+	searcherAuto.name = useI18n().Common.Autoselect!;
+	console.log(searcherAuto);
+
+	return searcherAuto;
+};
+
+export const getRegionGlobal = () => {
+	regionGlobal.name = useI18n().Keywords.Without_region!;
+
+	return regionGlobal;
+};

package/src/components/project/selectorRegion/utils/utils.ts

@@ -0,0 +1,157 @@
+import type { Region, Searcher, SearcherByKey, SearcherIndexed } from '../selectorRegion';
+import { dummyIndex, getRegionGlobal, getSearcherAuto, regionUndefined, searchersNames, searcherUndefined } from './consts';
+
+/**
+ * Генерация Map ПС с Map регионов из массива searchers
+ * - ключ для ПС - searcherKey
+ * - ключ для региона - regionIndex
+ *
+ * Если поисковиков в списке нет, в список будет добавлен searcherUndefined
+ *
+ * Если регионов в списке нет, в список будет добавлен regionUndefined
+ *
+ * @param forFrequency - получить массив для просмотра частоты (или ставок)
+ * @param autoRegion - добавить элемент с ключем -2, который в API заменяется на нужный ключ в зависимости от контекста
+ * @param searchers - поисковики с регионами проекта, см.: get/projects_2/projects, show_searchers_and_regions = 1
+ */
+export const genSearcherByKey = (
+	forFrequency: boolean = false,
+	autoRegion: boolean = false,
+	searchers: Searcher[] = [],
+) => {
+	let searcherByKey: SearcherByKey;
+
+	if (forFrequency) {
+		searcherByKey = genSearchersMapVolume(searchers);
+	} else {
+		searcherByKey = genSearchersMapCommon(searchers);
+	}
+
+	if (autoRegion) searcherByKey.set(dummyIndex, getSearcherAuto());
+	if (!searcherByKey.size) searcherByKey.set(dummyIndex, searcherUndefined);
+
+	return searcherByKey;
+};
+
+/**
+ * Список ПС с регионами
+ *
+ * @param searchers
+ * @param onlyEnabledRegions
+ * @param forceSearchersKeys - ключи ПС, которые нееобходимо вывести в любом случае
+ * @param forFrequency - для частоты будут выводиться только Яндекс, Google и Mail
+ */
+const genSearchersMapCommon = (
+	searchers: Searcher[],
+	onlyEnabledRegions: boolean = true,
+	forceSearchersKeys: Searcher['key'][] = [],
+	forFrequency: boolean = false,
+) => {
+	const searcherByKey: Map<Searcher['key'], SearcherIndexed> = new Map();
+
+	// настроенные ПС
+	searchers.forEach((searcher) => {
+		if (!searcher.enabled) return;
+		if (forFrequency && typeof searcher.key === 'number' && searcher.key > 1) return;
+
+		const searcherI = { ...searcher } as SearcherIndexed;
+		searcherI.regionByIndex = new Map();
+
+		if (searcher.regions) {
+			searcher.regions.forEach((region: Region) => {
+				if (onlyEnabledRegions && !region.enabled) return;
+
+				const regionI = { ...region };
+				if (searcherI.regionByIndex) searcherI.regionByIndex.set(regionI.index, regionI);
+			});
+		}
+
+		if (!searcherI.regionByIndex.size && !forceSearchersKeys.length) {
+			searcherI.regionByIndex.set(regionUndefined.index, regionUndefined);
+		}
+
+		if (typeof searcherI.key === 'number') searcherByKey.set(searcherI.key, searcherI);
+	});
+
+	// дополнительные ПС
+	forceSearchersKeys.forEach((searcherKey) => {
+		if (searcherByKey.has(searcherKey)) return;
+
+		const searcherI: SearcherIndexed = {
+			key: searcherKey,
+			name: searchersNames[searcherKey],
+			regions: [],
+			regionByIndex: new Map(),
+		};
+
+		searcherByKey.set(searcherI.key, searcherI);
+	});
+
+	return searcherByKey;
+};
+
+/**
+ * Список ПС с регионами для проверки частоты (Яндекс, Google, Mail если добавлен в проект)
+ *
+ * @param searchers
+ */
+const genSearchersMapVolume = (searchers: Searcher[]) => {
+	const serarcherByKey = genSearchersMapCommon(searchers, false, [0, 1], true);
+
+	// в Mail нет регионов
+	if (serarcherByKey.has(2)) {
+		const searcherMail = serarcherByKey.get(2);
+		if (searcherMail) searcherMail.regionByIndex = new Map();
+	}
+
+	// добавление глобального региона
+	serarcherByKey.forEach((searcher) => {
+		if (!searcher.regionByIndex) return;
+
+		const region = { ...getRegionGlobal() };
+		searcher.regionByIndex.set(region.index, region);
+	});
+
+	return serarcherByKey;
+};
+
+/**
+ * Поиск региона по заданному критерию из списка поисковиков проекта
+ *
+ * @param forFrequency - поиск региона для просмотра частоты или ставок
+ * @param searchRegion - объект с параметрами региона, который следует найти
+ * @param searchers
+ */
+export const findRegion = (forFrequency: boolean, searchRegion: Partial<Region>, searchers: Searcher[] = []) => {
+	const searcherByKey = genSearcherByKey(forFrequency, false, searchers);
+
+	let findedRegion: Region | undefined;
+
+	// поиск ПС
+	searcherByKey.forEach((searcher) => {
+		if (searchRegion.searcher_key !== undefined && searchRegion.searcher_key != searcher.key) return;
+		if (!searcher.regions) return;
+
+		// поиск региона
+		searcher.regions.forEach((region) => {
+			if (findedRegion) return;
+
+			if (searchRegion.key !== undefined && searchRegion.key != region.key) return;
+			if (searchRegion.index !== undefined && searchRegion.index != region.index) return;
+
+			if (!forFrequency) {
+				if (searchRegion.lang !== undefined && searchRegion.lang != region.lang) return;
+				if (searchRegion.device !== undefined && searchRegion.device != region.device) return;
+			}
+
+			region.searcher_key = searcher.key;
+			findedRegion = region;
+
+			return false;
+		});
+
+		if (findedRegion) return false;
+	});
+
+	return findedRegion;
+};