@topvisor/ui 1.0.42-date.2 → 1.0.42-dev.2

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

@@ -0,0 +1,84 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+
+import { genArgsTypes } from '@/components/helpersStories';
+import Component from './selectorRegion.vue';
+import ReadMe from './stories/README.md?raw';
+import searchers from './stories/searchers';
+import TopDialogs from '@/components/dialog/dialog/dialogs/dialogs.vue';
+
+const argTypes = genArgsTypes(Component);
+
+const subcategoryRegions = 'Для выбора регионов';
+
+// argTypes.compareRegionsIndexes.table!.subcategory = subcategoryRegions;
+argTypes.forFrequency.table!.subcategory = subcategoryRegions;
+argTypes.autoRegion.table!.subcategory = subcategoryRegions;
+argTypes.addRegionIcon.table!.subcategory = subcategoryRegions;
+
+const meta = {
+	component: Component,
+	tags: ['autodocs'],
+	argTypes,
+	parameters: {
+		docs: {
+			description: {
+				component: ReadMe,
+			},
+		},
+	},
+} as Meta<typeof Component>;
+
+type Story = StoryObj<typeof meta>;
+
+export const Playground = {
+	args: {
+		projectId: 1,
+		searchers,
+		modelValue: [25],
+	},
+} satisfies Story;
+
+export const CompareRegions = {
+	args: {
+		projectId: 1,
+		searchers,
+		modelValue: [1],
+		addCompare: true,
+	},
+	render: (args) => ({
+		components: {
+			TopDialogs,
+			TopSelectorRegion: Component,
+		},
+		setup() {
+			return { args };
+		},
+		template: `
+			<!-- Подключить один раз в приложение -->
+			<TopDialogs></TopDialogs>
+
+			<TopSelectorRegion :="args"></TopSelectorRegion>
+		`,
+	}),
+} satisfies Story;
+
+export const Searchers = {
+	args: {
+		projectId: 1,
+		searchers,
+		modelValue: [],
+		onlySearcher: true,
+	},
+} satisfies Story;
+
+export const CompareSearchers = {
+	args: {
+		projectId: 1,
+		searchers,
+		modelValue: [],
+		onlySearcher: true,
+		addCompare: true,
+	},
+} satisfies Story;
+
+export default meta;

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

@@ -0,0 +1,365 @@
+<script setup lang="ts">
+import { watch } from 'vue';
+import type { Props, Region } from './types';
+import Select from '@/components/forms/select/select.vue';
+import Button from '@/components/forms/button/button.vue';
+import { useSelectorRegion } from './composables/selectorRegion';
+import { dummyIndex, globalRegionIndex, searhcerCompareKey } 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 === searhcerCompareKey && compare.regionsIndexes.value.length) {
+		if (JSON.stringify(model.value) === JSON.stringify(compare.regionsIndexes.value)) {
+			return;
+		}
+
+		model.value = [...compare.regionsIndexes.value];
+	} else {
+		if (props.onlySearcher) {
+			model.value = [selectSearcher.searcherKey.value];
+
+			if (selectSearcher.searcherKey.value === dummyIndex && !props.autoRegion) model.value.length = 0;
+		} else {
+			model.value = [selectRegion.regionIndex.value];
+
+			// не добавлять несуществующий регион в результаты
+			if (selectRegion.regionIndex.value === dummyIndex && !props.autoRegion) model.value.length = 0;
+		}
+	}
+
+	// регионов нет
+	if (!props.onlySearcher && !allRegionsIndexes.value.size) {
+		selectSearcher.searcherKey.value = dummyIndex;
+	}
+});
+
+if (modelSingle.value) {
+	watch(modelSingle, () => {
+		if (modelSingle.value) {
+			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]) ||
+			model.value.length === 1 && model.value[0] === dummyIndex && !props.autoRegion
+		) {
+			let defaultKey: number | undefined = searcherByKey.value.keys().next().value;
+
+			// запретить устанавливать несуществующий регион
+			if (defaultKey === dummyIndex && !props.autoRegion) {
+				defaultKey = undefined;
+
+				modelSingle.value = dummyIndex;
+			}
+
+			if (defaultKey !== undefined) {
+				model.value = [defaultKey];
+			}else{
+				model.value.length = 0;
+			}
+
+			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 (defaultIndex === dummyIndex && !props.autoRegion) {
+			defaultIndex = undefined;
+
+			modelSingle.value = dummyIndex;
+		}
+
+		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 === globalRegionIndex) return;
+						if (region.index === dummyIndex) return;
+
+						all.add(region.key);
+					});
+				});
+			}
+
+			// убрано, так как dummyIndex запрещено выбирать в model
+			// if (!all.has(newModel[0]) && newModel[0] !== dummyIndex) {
+			if (!all.has(newModel[0])) {
+				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 === searhcerCompareKey &&
+	// 	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 = searhcerCompareKey;
+
+		return;
+	} else {
+		if (!model.value.length) {
+			// selectSearcher.searcherKey.value = dummyIndex;
+			// selectRegion.regionIndex.value = dummyIndex;
+
+			return;
+		}
+
+		if (model.value.length === 1 && selectSearcher.searcherKey.value !== searhcerCompareKey) {
+			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 = searhcerCompareKey;
+			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 !== searhcerCompareKey"
+			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 === searhcerCompareKey"
+			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: 340px;
+	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: 140px;
+	max-width: 160px;
+	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);
+
+	--top-icon2-size: 20px;
+	--top-icon2-color: var(--color-text-primary);
+}
+
+.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: 140px;
+}
+</style>

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

@@ -0,0 +1,36 @@
+Компонент реализует выбор поисковой системы и / или регионов.
+
+Добавляет на страницу компонент с одним или двумя компонентами **TopSelect**:
+
+- select для выбора **ПС**
+- select для выбора **региона**
+
+Списки ПС и регионов генерируется из **props.searchers**.
+
+Выбор нескольких регионов сохраняется в **localStorage** с привязкой к **projectId**.
+
+## Описание функционала
+
+- Выбор ПС и региона (modelValue - список regionIndex, modelValueSingle - searcherKey или dummyIndex, если ПС нет)
+- Выбор только ПС  (modelValue - список searcherKey, modelValueSingle - regionIndex или dummyIndex, если регионов нет)
+- Вывод значков ПС
+- Выбор **нескольких регионов** / **нескольких ПС** (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 '../types';
+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;
+}