@topvisor/ui 1.1.0 → 1.2.0

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, searcherUndefined } from '../utils/consts';
+import type { Props, Region, SearcherIndexed } from '../selectorRegion';
+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 === -1) 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 === -1) 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 = -1;
+		// }
+
+		// 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 === -1 || 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,190 @@
+<script setup lang="ts">
+import { 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';
+
+defineOptions({ id: 'selectorRegions' });
+
+const props = defineProps<Partial<Props>>();
+
+const dialog = useTopDialogSelf();
+
+/**
+ * Выбраны все регионы
+ */
+const isAllSelected = ref(false);
+
+/**
+ * Список расширенных регионов для использования в компоненте
+ */
+const regionsRich = ref<RegionRich[]>([]);
+
+/**
+ * Направление сортировки по полю
+ */
+const sortedVectorByField = reactive({
+	searcher_key: -1,
+	key: -1,
+	name: -1,
+});
+
+/**
+ * Сортировать регионы по выбранному полю
+ * @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(isAllSelected, () => {
+	regionsRich.value = regionsRich.value.map((region) => ({ ...region, selected: isAllSelected.value }));
+});
+
+// генерация регионов
+watch([
+	() => props.regions,
+	() => props.regionsIndexes,
+], () => {
+	regionsRich.value = [];
+
+	let isAllSelectedLocal = true;
+
+	props.regions.forEach((region) => {
+		let title = region.name;
+		if (region.areaName) title += ` (${region.areaName})`;
+
+		const selected = (props.regionsIndexes.indexOf(+region.index) !== -1);
+		const searcherIcon = getSearcherGIcon(region.searcher_key);
+		const langLabel = region.lang !== undefined ? getLangLabel(region.searcher_key, 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);
+
+		if (!regionRich.selected) {
+			isAllSelectedLocal = false;
+		}
+	});
+
+	isAllSelected.value = isAllSelectedLocal;
+});
+</script>
+
+<template>
+	<TopDialog
+		:id="dialog.id"
+		pageActive="selectorRegions"
+		class="dialog_selectorRegions"
+		height="600px"
+		width="600px"
+	>
+		<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')"
+					/>
+
+					<TopButton
+						class="dialog_selectorRegions_sortButton"
+						color="theme"
+						data-top-icon=""
+						@click="sort('key')"
+					/>
+
+					<TopButton
+						class="dialog_selectorRegions_sortButton"
+						color="theme"
+						data-top-icon=""
+						@click="sort('name')"
+					/>
+				</div>
+			</template>
+
+			<template #body>
+				<TopCheckbox
+					v-for="region of regionsRich"
+					:key="region.index"
+					v-model="region.selected"
+					class="dialog_selectorRegions_region"
+				>
+					<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"
+					>
+
+					{{ region.name }}
+
+					<div class="dialog_selectorRegions_regionAreaName top-ellipsis">
+						{{ region.areaName }}
+					</div>
+
+					<div v-if="region.langLabel">
+						[{{ region.langLabel }}]
+					</div>
+
+					<div
+						v-if="region.deviceIcon"
+						:data-top-icon="region.deviceIcon"
+					></div>
+				</TopCheckbox>
+			</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/selectorRegion';
+
+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,85 @@
+import type { Meta, StoryObj } from '@storybook/vue3';
+
+import { genArgsTypes } from '@/components/helpersStories';
+import Component from './selectorRegion.vue';
+import * as ComponentsConst from './selectorRegion';
+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, ComponentsConst);
+
+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;