@topvisor/ui 1.1.0 → 1.2.0

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

@@ -0,0 +1,204 @@
+export interface Props {
+	projectId: number;
+
+	searchers: Searcher[];
+
+	/**
+	 * Список выбранных значений
+	 *	 *
+	 * - при `onlySearcher = false`:
+	 * 	- при `forFrequency = false`: массив `regionIndex`
+	 * 	- при `forFrequency = true`: массив `regionKey`
+	 * - при `onlySearcher = true` массив `searcherKey`
+	 *
+	 * Обратите внимание, всегда является массивом, даже если не предпогается получить несколько значений
+	 *
+	 * Если не нужно работать с массивом можно указать `modelValue = []` и использовать `modelValueSingle`
+	 */
+	modelValue: number[];
+
+	/**
+	 * Выбранное значение
+	 *
+	 * Шорткат к `modelValue[0]`, если не нужно работать с массивом (для случаев без сравнений)
+	 *
+	 * Нельзя добавить динамически
+	 */
+	modelValueSingle?: number;
+
+	// compareRegionsIndexes?: number[];
+
+	/**
+	 * Добавить режим сравнения
+	 *
+	 * В режиме сравнения выбранные значения длиной массива > 1 сохраняются с привязкой к projectId
+	 *
+	 * Чтобы изменить сохраненное значение в режиме сравнения необходимо указать modelValue с длиной массива > 1
+	 *
+	 * Выбор регионов для сравнения требуется настраивать отдельно, см. emit `compareRegions`
+	 */
+	addCompare?: boolean;
+
+	/**
+	 * Режим выбора регионов для работы с частотой
+	 */
+	forFrequency?: boolean;
+
+	/**
+	 * Добавить элемент `Автовыбор` с ключем `-2`, который в API заменяется на нужный ключ в зависимости от контекста
+	 */
+	autoRegion?: boolean;
+
+	/**
+	 * В этом режиме в regionIndex будет сохраняться searcherKey
+	 */
+	onlySearcher?: boolean;
+
+	/**
+	 * См. addChanger в TopSelect
+	 */
+	addChanger?: boolean;
+
+	/**
+	 * Добавить значок ПС
+	 */
+	addSearcherIcon?: boolean;
+
+	/**
+	 * Добавить значок региона
+	 */
+	addRegionIcon?: boolean;
+}
+
+/**
+ * @todo: Вынести в topvisor-openapi
+ */
+export interface Searcher {
+	/**
+	 * Состояние включения поисковой системы
+	 */
+	enabled?: 0 | 1;
+
+	/**
+	 * Id поисковой системы
+	 */
+	id?: number;
+
+	/**
+	 * Ключ поисковой системы
+	 */
+	key: number;
+
+	/**
+	 * Название поисковой системы
+	 */
+	name: string;
+
+	/**
+	 * Порядок поисковой систеимы
+	 */
+	ord?: number;
+
+	/**
+	 * Id проекта
+	 */
+	project_id?: number;
+
+	/**
+	 * Регионы поисковой системы
+	 */
+	regions: Region[];
+
+	/**
+	 * Ключ поисковой системы
+	 */
+	searcher?: number;
+}
+
+/**
+ * Индексирвоанные поисковики с быстрым доступом к ПС и их регионам по словарю
+ */
+export type SearcherByKey = Map<Searcher['key'], SearcherIndexed>;
+
+/**
+ * Индексирвоанный поисковик с быстрым доступом к регоинам по словарю
+ */
+export type SearcherIndexed = Searcher & { regionByIndex: Map<Region['index'], Region> };
+
+/**
+ * @todo: Вынести в topvisor-openapi
+ */
+export interface Region {
+	/**
+	 * Название области
+	 */
+	areaName?: string;
+
+	/**
+	 * Код страны
+	 */
+	countryCode?: string;
+
+	/**
+	 * Глубина поиска
+	 */
+	depth?: number;
+
+	/**
+	 * Id устройства
+	 * 0 - ПК
+	 * 1 - Планшет
+	 * 2 - Смартфон
+	 */
+	device?: 0 | 1 | 2;
+
+	/**
+	 * Домен верхнего уровня
+	 */
+	domain?: string;
+
+	/**
+	 * Состояние включения региона
+	 */
+	enabled?: 0 | 1;
+
+	/**
+	 * Необходим для поддержания сортировки
+	 */
+	id?: number;
+
+	/**
+	 * Уникальный идентификатор настройки региона (ПС + регион + настройки региона)
+	 */
+	index: number;
+
+	/**
+	 * Ключ региона
+	 */
+	key: number;
+
+	/**
+	 * Код языка
+	 */
+	lang?: string;
+
+	/**
+	 * Название региона
+	 */
+	name: string;
+
+	/**
+	 * Id родительского региона
+	 */
+	parentId?: number;
+
+	/**
+	 * Ключ поисковой системы
+	 */
+	searcher_key?: Searcher['key'];
+
+	/**
+	 * Тип
+	 */
+	type?: string;
+}

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

@@ -0,0 +1,335 @@
+<script setup lang="ts">
+import { watch } from 'vue';
+import type { 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';
+import { dialogSelectorRegions } from '@/components/project/selectorRegion/utils/utils';
+
+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 {
+	selectSearcher,
+	selectRegion,
+	compare,
+
+	searcherByKey,
+	allRegionsIndexes,
+
+	getSearcher,
+	getRegion,
+} = useSelectorRegion(props);
+
+const onClickCompare = () => {
+	const regions: Region[] = [];
+
+	searcherByKey.value.forEach((searcher) => {
+		if (!searcher.enabled) return;
+
+		searcher.regions.forEach((region) => {
+			if (!region.enabled) return;
+
+			regions.push(region);
+		});
+	});
+
+	dialogSelectorRegions.open('selectorRegions', {
+		regions,
+		regionsIndexes: compare.regionsIndexes.value,
+		'@update:regionsIndexes': (regionsIndexes: number[]) => compare.regionsIndexes.value = regionsIndexes,
+	});
+};
+
+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,77 @@
+import type { Region, Searcher } from '../selectorRegion';
+import { searchersNames } from '../utils/consts';
+import { fakerRU } from '@faker-js/faker';
+import { getLangLabel } from '@/core/utils/searchers';
+
+type Location = {
+	city: string;
+	region: string;
+	countryCode: string;
+};
+
+function createRandomLocation(): Location {
+	return {
+		city: fakerRU.location.city(),
+		region: fakerRU.location.state(),
+		countryCode: fakerRU.location.countryCode(),
+	};
+}
+
+const locations = Array.from({ length: 3 }, createRandomLocation);
+
+const devices: Region['device'][] = [0, 1, 2];
+const langs = ['ru', 'en'];
+const searchers: Searcher[] = [];
+
+let count = 0;
+Object.entries(searchersNames).forEach(([key, name]) => {
+	const searcher: Searcher = {
+		id: fakerRU.number.int(),
+		key: +key,
+		name,
+		enabled: 1,
+		regions: [],
+	};
+
+	locations.forEach(location => {
+		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: fakerRU.number.int(),
+					searcher_key: searcher.key,
+					index: count,
+					key: count * 2,
+					name: location.city,
+					areaName: location.region,
+					countryCode: location.countryCode,
+					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;
+}