@topvisor/ui 1.0.41-dialog.1 → 1.1.0-date.0

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

@@ -0,0 +1,64 @@
+import { computed, type ComputedRef, ref } from 'vue';
+import { useI18n } from '@/core/plugins/i18n';
+import type { Props, SearcherByKey } from '../types';
+import type { Option, Options } from '@/components/forms/select/types';
+import { dummyIndex, searhcerCompareKey } from '../utils/consts';
+import { getSearcherGIcon } from '@/core/utils/searchers';
+
+/**
+ * Создание и управление реактивными переменными для выбора ПС
+ *
+ * @param props - входные props компонента
+ * @param mapSearchers - Map ПС (реактивная)
+ */
+export const useSelectSearcher = (
+	props: Props,
+	mapSearchers: ComputedRef<SearcherByKey>,
+) => {
+	const i18n = useI18n();
+
+	/**
+	 * Ключ выбранной поисковой системы
+	 */
+	const searcherKey = ref(mapSearchers.value.keys().next().value ?? dummyIndex);
+
+	/**
+	 * Коллекция опций для выбора ПС
+	 */
+	const optionBySearcherKey = computed(() => {
+		const res: Options = new Map();
+		mapSearchers.value.forEach((searcher) => {
+			let option: Option = {
+				value: searcher.key,
+				title: searcher.name,
+			};
+
+			if (props.addSearcherIcon) option.icon = getSearcherGIcon(searcher.key);
+
+			res.set(searcher.key, option);
+		});
+
+		// добавить режим сравнения, если есть хотя бы одна ПС с одним регионом
+		if (props.addCompare && !res.has(dummyIndex)) {
+			const dummyOption: Option = {
+				value: '',
+				title: '--------------------',
+				disabled: true,
+			};
+			res.set(dummyOption.value, dummyOption);
+
+			const compareOption: Option = {
+				value: searhcerCompareKey,
+				title: i18n.Common.Compare!,
+			};
+			res.set(compareOption.value, compareOption);
+		}
+
+		return res;
+	});
+
+	return {
+		searcherKey,
+		optionBySearcherKey,
+	};
+};

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

@@ -0,0 +1,167 @@
+import { computed, watch } from 'vue';
+import { findRegion, genSearcherByKey } from '../utils/utils';
+import { dummyIndex, globalRegionIndex, searcherUndefined, searhcerCompareKey } from '../utils/consts';
+import type { Props, Region, SearcherIndexed } from '../types';
+import { useSelectSearcher } from './selectSearcher';
+import { useSelectRegion } from './selectRegion';
+import { useCompare } from './compare';
+
+/**
+ * Создание и управления рективными переменными компонента
+ *
+ * @param props - входные props компонента
+ */
+export const useSelectorRegion = (props: Props) => {
+	const searcherByKey = computed(() => {
+		return genSearcherByKey(props.forFrequency, props.autoRegion, props.searchers);
+	});
+
+	const activeSearcherIndexed = computed(() => {
+		return searcherByKey.value.get(selectSearcher.searcherKey.value) || searcherUndefined;
+	});
+
+	/**
+	 * Все индексы регионов из searcherByKey
+	 *
+	 * Активность регионов определяется в searcherByKey
+	 */
+	const allRegionsIndexes = computed(() => {
+		const regionsIndexes = new Set<number>();
+
+		searcherByKey.value.forEach((searcher) => {
+			searcher.regionByIndex.forEach((region) => {
+				if (region.index === globalRegionIndex) return;
+				if (region.index === dummyIndex) return;
+
+				regionsIndexes.add(region.index);
+			});
+		});
+
+		return regionsIndexes;
+	});
+
+	const selectSearcher = useSelectSearcher(props, searcherByKey);
+	const selectRegion = useSelectRegion(props, activeSearcherIndexed);
+	const compare = useCompare(props, searcherByKey, allRegionsIndexes);
+
+	// контроль за внешним изменением списка ПС
+	watch(searcherByKey, () => {
+		// возможные значения для сравнения регионов/пс
+		if (props.onlySearcher) {
+			compare.regionsIndexes.value = Array.from(searcherByKey.value.keys());
+		} else {
+			compare.regionsIndexes.value = compare.regionsIndexes.value.filter(regionIndex => {
+				return allRegionsIndexes.value.has(regionIndex);
+			});
+		}
+
+		if (selectSearcher.searcherKey.value === searhcerCompareKey) return;
+
+		let newSearcherKey = searcherByKey.value.keys().next().value;
+
+		searcherByKey.value.forEach((searcher) => {
+			// определить выбранную ПС
+			if (props.onlySearcher && searcher.key === selectSearcher.searcherKey.value) {
+				newSearcherKey = selectSearcher.searcherKey.value;
+				return;
+			}
+
+			if (
+				selectRegion.regionIndex.value &&
+				searcher.regionByIndex?.has(selectRegion.regionIndex.value)
+			) {
+				newSearcherKey = searcher.key;
+			}
+
+			// выбрать первую ПС с выбранным регионом
+			if (!props.onlySearcher) {
+				let regionsNewSearcher: SearcherIndexed['regionByIndex'] | undefined;
+
+				if (newSearcherKey !== undefined) {
+					regionsNewSearcher = searcherByKey.value.get(newSearcherKey)?.regionByIndex;
+				}
+
+				const regionsCurrentSearcher = searcherByKey.value.get(searcher.key)?.regionByIndex;
+				if (
+					regionsNewSearcher?.has(dummyIndex) &&
+					!regionsCurrentSearcher?.has(dummyIndex)
+				) {
+					newSearcherKey = searcher.key;
+				}
+			}
+		});
+
+		// if (props.addCompare && !selectSearcher.optionBySearcherKey.value.has(dummyIndex)) {
+		// 	if (!selectRegion.regionIndex.value && compare.regionsIndexes.value?.length) newSearcherKey = searhcerCompareKey;
+		// }
+
+		// if (props.onlySearcher && selectRegion.regionIndex.value !== dummyIndex) newSearcherKey = selectRegion.regionIndex.value;
+
+		if (newSearcherKey !== undefined) {
+			selectSearcher.searcherKey.value = newSearcherKey;
+		}
+
+		if (
+			selectRegion.regionIndex.value !== undefined &&
+			!(activeSearcherIndexed.value?.regionByIndex)?.has(selectRegion.regionIndex.value)
+		) {
+			selectRegion.regionIndex.value = activeSearcherIndexed.value?.regions?.keys().next().value as number;
+		}
+	}, { immediate: true });
+
+	const getSearcherKey = () => {
+		if (selectSearcher.searcherKey.value === searhcerCompareKey || selectSearcher.searcherKey.value === dummyIndex) return;
+
+		return selectSearcher.searcherKey.value;
+	};
+
+	const getRegionIndex = () => {
+		if (props.onlySearcher) return;
+
+		if (selectRegion.regionIndex.value === dummyIndex) return;
+
+		let res: Region['index'] | undefined = selectRegion.regionIndex.value;
+
+		// в качестве ключа используется region.key
+		if (props.forFrequency) {
+			const regionKey = selectRegion.regionIndex.value;
+			const region = findRegion(props.forFrequency, { searcher_key: getSearcherKey(), key: regionKey } as Region, props.searchers);
+
+			res = region?.index;
+		}
+
+		return res;
+	};
+
+	/**
+	 * Получить выбранную ПС
+	 */
+	const getSearcher = () => {
+		const searcherKey = getSearcherKey();
+		if (searcherKey === undefined) return;
+
+		return searcherByKey.value.get(searcherKey);
+	};
+
+	/**
+	 * Получить выбранный регион
+	 */
+	const getRegion = () => {
+		const regionIndex = getRegionIndex();
+		if (regionIndex === undefined) return;
+
+		return getSearcher()?.regionByIndex?.get(regionIndex);
+	};
+
+	return {
+		selectSearcher,
+		selectRegion,
+		compare,
+
+		searcherByKey,
+		allRegionsIndexes,
+
+		getSearcher,
+		getRegion,
+	};
+};

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

@@ -0,0 +1,252 @@
+<script setup lang="ts">
+import { computed, reactive, ref, watch } from 'vue';
+import { TopDialog, TopDialogPage, useTopDialogSelf } from '@/components/dialog/dialog';
+import { genFlagLinkByCountryCode } from '@/core/utils/string';
+import type { Props, RegionRich } from './types';
+import { getDeviceGIcon, getLangLabel, getSearcherGIcon } from '@/core/utils/searchers';
+import Core from '@/core/core/core';
+
+defineOptions({ id: 'selectorRegions' });
+
+const props = defineProps<Partial<Props>>();
+
+const dialog = useTopDialogSelf();
+
+/**
+ * Список расширенных регионов для использования в компоненте
+ */
+const regionsRich = ref<RegionRich[]>([]);
+
+/**
+ * Ссылка на элемент с регионами
+ */
+const elRegions = ref<null | HTMLElement>(null);
+
+/**
+ * Направление сортировки по полю
+ */
+const sortedVectorByField = reactive({
+	searcher_key: -1,
+	key: -1,
+	name: -1,
+});
+
+/**
+ * Выбраны все регионы
+ */
+const isAllSelected = computed({
+	get() {
+		return regionsRich.value.every(region => region.selected);
+	},
+
+	set(value) {
+		regionsRich.value = regionsRich.value.map(region => ({ ...region, selected: value }));
+	},
+});
+
+/**
+ * Сортировать регионы по выбранному полю
+ * @param sortedField - Поле для сортировки
+ */
+const sort = (sortedField: keyof typeof sortedVectorByField) => {
+	sortedVectorByField[sortedField] = -sortedVectorByField[sortedField];
+
+	regionsRich.value.sort((regionA, regionB) => {
+		if (!regionA[sortedField] || !regionB[sortedField]) return -1;
+
+		return regionA[sortedField] >= regionB[sortedField] ? sortedVectorByField[sortedField] : -sortedVectorByField[sortedField];
+	});
+};
+
+/**
+ * Применить изменения
+ *
+ * Вызывает callback `props['@update:regionsIndexes']`
+ */
+const onSubmit = () => {
+	if (!regionsRich.value.some(region => region.selected)) return;
+
+	const regionsIndexes = regionsRich.value
+		.filter(region => region.selected)
+		.map(region => region.index);
+
+	props['@update:regionsIndexes']?.(regionsIndexes);
+
+	dialog.close();
+};
+
+// генерация регионов
+watch([
+	() => props.regions,
+	() => props.regionsIndexes,
+], () => {
+	regionsRich.value = [];
+
+	if (!props.regions) return;
+	if (!props.regionsIndexes) return;
+
+	let regions = [...props.regions];
+
+	// отсортировать регионы по входным данным
+	const orderByRegionIndex = new Map(props.regionsIndexes.map((index, order) => [index, order]));
+
+	regions.sort((regionA, regionB) => {
+		const orderA = orderByRegionIndex.get(regionA.index) ?? Number.MAX_VALUE;
+		const orderB = orderByRegionIndex.get(regionB.index) ?? Number.MAX_VALUE;
+
+		return orderA - orderB;
+	});
+
+	regions.forEach(region => {
+		let title = region.name;
+		if (region.areaName) title += ` (${region.areaName})`;
+
+		const selected = props.regionsIndexes?.includes(region.index) ?? false;
+		const searcherIcon = getSearcherGIcon(region.searcher_key);
+		const langLabel = region.lang !== undefined ? getLangLabel(region.searcher_key ?? 999, region.lang) : undefined;
+		const deviceIcon = region.device !== undefined ? getDeviceGIcon(region.device) : undefined;
+		const flagLink = region.countryCode !== undefined ? genFlagLinkByCountryCode(region.countryCode) : undefined;
+
+		const regionRich = {
+			...region,
+			selected,
+			title,
+			searcherIcon,
+			langLabel,
+			deviceIcon,
+			flagLink,
+		};
+
+		regionsRich.value.push(regionRich);
+	});
+});
+
+/**
+ * Проверить на существование sortable
+ */
+const onOpen = () => {
+	if (!Core.$?.ui['sortable']) {
+		console.info('Для работы сортировки требуется глобальная загрузка jQuery UI Sortable');
+
+		return;
+	}
+
+	if (!elRegions.value) return;
+
+	$(elRegions.value).sortable({
+		distance: 10,
+
+		stop: () => {
+			// Обновляем порядок регионов в массиве regionsRich после сортировки
+			const sortedIndexes = [...elRegions.value!.children].map(el => Number(el.getAttribute('data-region-index')));
+			regionsRich.value.sort((a, b) => sortedIndexes.indexOf(a.index) - sortedIndexes.indexOf(b.index));
+		},
+	});
+};
+
+/**
+ * Удаление sortable
+ */
+const onClose = () => {
+	if (!Core.$?.ui['sortable']) return;
+	if (!elRegions.value) return;
+
+	$(elRegions.value).sortable('destroy');
+};
+
+</script>
+
+<template>
+	<TopDialog
+		:id="dialog.id"
+		pageActive="selectorRegions"
+		class="dialog_selectorRegions"
+		height="600px"
+		width="600px"
+		@open="onOpen"
+		@close="onClose"
+	>
+		<TopDialogPage name="selectorRegions" :order="0">
+			<template #header>
+				<div class="dialog_selectorRegions_header">
+					<TopCheckbox v-model="isAllSelected"></TopCheckbox>
+
+					<TopButton
+						class="dialog_selectorRegions_sortButton"
+						color="theme"
+						data-top-icon=""
+						@click="sort('searcher_key')"
+						:title="$i18n.Projects?.Sort_by_search_engine"
+					/>
+
+					<TopButton
+						class="dialog_selectorRegions_sortButton"
+						color="theme"
+						data-top-icon=""
+						@click="sort('key')"
+						:title="$i18n.Projects?.Sort_by_yande_region_code"
+					/>
+
+					<TopButton
+						class="dialog_selectorRegions_sortButton"
+						color="theme"
+						data-top-icon=""
+						@click="sort('name')"
+						:title="$i18n.Projects?.Sort_by_lphabetically"
+					/>
+				</div>
+			</template>
+
+			<template #body>
+				<div ref="elRegions">
+					<TopCheckbox
+						v-for="region of regionsRich"
+						:key="region.index"
+						v-model="region.selected"
+						class="dialog_selectorRegions_region"
+						:data-region-index="region.index"
+					>
+						<div
+							class="dialog_selectorRegions_regionSearcherIcon"
+							:data-top-icon="region.searcherIcon"
+						></div>
+
+						<img
+							v-if="region.flagLink"
+							class="top-flag"
+							:src="'//topvisor.dev' + region.flagLink"
+							:alt="region.countryCode"
+						>
+
+						<div class="top-ellipsis">
+							{{ region.name }}
+
+							<span class="dialog_selectorRegions_regionAreaName">
+								{{ region.areaName }}
+							</span>
+						</div>
+
+						<div v-if="region.langLabel">
+							[{{ region.langLabel }}]
+						</div>
+
+						<div
+							v-if="region.deviceIcon"
+							:data-top-icon="region.deviceIcon"
+						></div>
+					</TopCheckbox>
+				</div>
+			</template>
+
+			<template #footer>
+				<TopButton @click="onSubmit">
+					{{ $i18n.Common?.Apply }}
+				</TopButton>
+			</template>
+		</TopDialogPage>
+	</TopDialog>
+</template>
+
+<style>
+@import "./style.css";
+</style>

package/src/components/project/selectorRegion/dialog_selectorRegions/style.css

@@ -0,0 +1,49 @@
+#dialog_selectorRegions .modal-body {
+	--scroll-offset-top: 40px;
+}
+
+.dialog_selectorRegions_header,
+.dialog_selectorRegions_region {
+	padding-right: 10px;
+	padding-left: 10px;
+	display: flex;
+	align-items: center;
+	gap: 4px;
+}
+
+.dialog_selectorRegions_header {
+	background: inherit;
+	height: 40px;
+	padding-left: 10px;
+	gap: 2px;
+	position: sticky;
+	top: 0;
+}
+
+.dialog_selectorRegions_sortButton {
+	--top-icon-size: 18px;
+}
+
+.dialog_selectorRegions_region {
+	border-radius: var(--top-radius-2);
+}
+
+.dialog_selectorRegions_region:hover {
+	background: var(--color-bg-shading-1);
+}
+
+.dialog_selectorRegions_region .top-forms-optionLabel_title {
+	gap: 4px;
+}
+
+.dialog_selectorRegions_regionSearcherIcon {
+	--top-icon-size: 20px;
+
+	color: var(--color-text-3);
+	margin: 0 4px 0 2px;
+}
+
+.dialog_selectorRegions_regionAreaName {
+	color: var(--color-text-3);
+	font-size: var(--top-font-size-s);
+}

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

@@ -0,0 +1,31 @@
+import type { Region } from '@/components/project/selectorRegion/types';
+
+export interface Props {
+
+	/**
+	 * Список регионов
+	 */
+	regions: Region[],
+
+	/**
+	 * Выбранные регионы
+	 */
+	regionsIndexes: number[],
+
+	/**
+	 * Колбэк для emit изменения выбранных регионов
+	 */
+	'@update:regionsIndexes': (regionsIndexes: number[]) => void,
+}
+
+/**
+ * Регион для шаблона
+ */
+export type RegionRich = Region & {
+	selected: boolean,
+	title: string,
+	searcherIcon: string,
+	langLabel?: string,
+	deviceIcon?: string,
+	flagLink?: string,
+};

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;