@topvisor/ui 1.0.20-selector2-3 → 1.0.20-selector2-4

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

@@ -1,330 +0,0 @@
-<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

@@ -1,36 +0,0 @@
-Компонент реализует выбор поисковой системы и / или регионов.
-
-Добавляет на страницу компонент с одним или двумя компонентами **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

@@ -1,59 +0,0 @@
-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

@@ -1,41 +0,0 @@
-.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

@@ -1,73 +0,0 @@
-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

@@ -1,157 +0,0 @@
-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;
-};