@topvisor/ui 1.0.42-checkvisibility.3 → 1.0.42-dev.1

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

@@ -0,0 +1,206 @@
+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 заменяется на нужный ключ в зависимости от контекста
+	 *
+	 * Обратите внимание, что значение `-2` также используется для ключа ПС и индекса Региона не настроенных в проекте
+	 */
+	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/utils/consts.ts

@@ -0,0 +1,88 @@
+import type { Region, SearcherIndexed } from '../types';
+import { useI18n } from '@/core/plugins/i18n';
+
+/**
+ * Ключ ПС - для выбора нескольких ПС или регионов
+ */
+export const searhcerCompareKey = -1;
+
+/**
+ * Ключ ПС или индекса Региона, используется для ПС или Региона, не настроенных в проекте
+ *
+ * Также, используется для API с возможностью не указывать регион, см. `props.autoRegion`
+ */
+export const dummyIndex = -2;
+
+/**
+ * Регион - без региона
+ */
+export const globalRegionIndex = -1;
+
+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: globalRegionIndex,
+	index: globalRegionIndex,
+	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

@@ -0,0 +1,178 @@
+import type { Region, Searcher, SearcherByKey, SearcherIndexed } from '../types';
+import { dummyIndex, getRegionGlobal, getSearcherAuto, searchersNames, searcherUndefined } from './consts';
+import { useAsyncTopDialog } from '@/components/dialog/dialog/composables/utils';
+
+/**
+ * Генерация 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 };
+				searcherI.regionByIndex.set(regionI.index, regionI);
+			});
+		}
+
+		if (!searcherI.regionByIndex.size && !forceSearchersKeys.length) {
+			// searcherI.regionByIndex.set(regionUndefined.index, regionUndefined);
+		}
+
+		if (
+			// режим вывода ПС без регионов
+			!searcher.regions ||
+
+			// есть включенные регионы
+			searcherI.regionByIndex.size ||
+
+			// запрошен вывод конкретных ПС
+			forceSearchersKeys.length
+		) {
+			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;
+};
+
+/**
+ * Открыть диалоговое окно с выбором нескольких регионов
+ *
+ * @see import('../dialog_selectorRegions/types').Props
+ */
+export const dialogSelectorRegions = useAsyncTopDialog(() => {
+	return import('@/components/project/selectorRegion/dialog_selectorRegions/dialog_selectorRegions.vue');
+});

package/src/components/project/tagSelector/popupListItem/tagPopupListItem.vue

@@ -0,0 +1,209 @@
+<script setup lang="ts">
+import { computed, nextTick, ref } from 'vue';
+import type { Emits, Props } from './types';
+import TopTagIcon from '../tagIcon/tagIcon.vue';
+import TopPopupListItem from '@/components/popup/popup/listItem.vue';
+
+const props = defineProps<Props>();
+const emit = defineEmits<Emits>();
+
+const name = defineModel<Props['name']>('name', {
+	required: true,
+});
+
+const elName = ref<HTMLElement | null>(null);
+
+/**
+ * @todo Удалить через пол года после выхода версии firefox с поддержкой contenteditable plaintext-only, включая бета версии
+ */
+const firefoxProps = computed(() => {
+	if (navigator.userAgent.indexOf('Firefox') != -1) {
+
+		return {
+			contenteditable: inEdit.value,
+			onpaste: (event: Event) => event.preventDefault(),
+		};
+	}
+
+	return {};
+});
+
+/**
+ * Включен режим редактирвоания
+ */
+const inEdit = ref(false);
+
+/**
+ * Включить режим редактирование
+ */
+const turnToEdit = async () => {
+	inEdit.value = true;
+
+	await nextTick();
+
+	elName.value?.focus();
+};
+
+/**
+ * Применить редактирование
+ */
+const editCommit = () => {
+	const name = elName.value?.innerText;
+	if (!name) return editCancel();
+
+	if (elName.value) elName.value.innerText = name;
+
+	inEdit.value = false;
+
+	emit('update:name', name);
+};
+
+/**
+ * Отменить редактирование
+ */
+const editCancel = async () => {
+	if (elName.value) elName.value.innerText = props.name;
+
+	inEdit.value = false;
+};
+
+/**
+ * Применить выбор
+ */
+const changeSelect = (e: MouseEvent) => {
+	// в режиме редактирования выбор не применяется
+	if (inEdit.value) return;
+
+	// тег запрещено выбирать
+	if (props.disabled) return;
+
+	let toState: Props['state'] = 'selected';
+
+	if (props.canExclude) {
+		if (e.ctrlKey || e.metaKey) {
+			toState = 'excluded';
+		}
+	}
+
+	if (props.state == toState) {
+		toState = '';
+	}
+
+	if (toState === '') emit('unselect');
+	if (toState === 'selected') emit('select');
+	if (toState === 'excluded') emit('exclude');
+};
+</script>
+
+<template>
+	<TopPopupListItem
+		:class="{
+			'top-tagSelector_tagListItem': true,
+			'top-tagSelector_tagListItem-inEdit': inEdit,
+			'top-tagSelector_tagListItem-disabled': disabled,
+			'top-tagSelector_tagListItem-canExclude': canExclude,
+			'top-tagSelector-active': !!state,
+			'top-tagSelector-excluded': state === 'excluded'
+		}"
+		@click.stop="changeSelect"
+	>
+		<TopTagIcon
+			:id
+			:name
+			:colorId
+			:state
+		/>
+
+		<span
+			ref="elName"
+			class="top-tagSelector_tagListItemName"
+			:contenteditable="inEdit ? 'plaintext-only' : false"
+			:="firefoxProps"
+			@keydown.enter.stop="editCommit"
+			@keydown.esc.stop="editCancel"
+		>
+			{{ name }}
+		</span>
+
+		<template v-if="editable">
+			<span
+				v-if="!inEdit"
+				data-top-icon=""
+				class="top-tagSelector_edit"
+				@click="turnToEdit"
+			></span>
+
+			<span
+				v-else
+				data-top-icon=""
+				class="top-tagSelector_edit"
+				@click.stop="editCommit"
+			></span>
+		</template>
+	</TopPopupListItem>
+</template>
+
+<style>
+.top-tagSelector_tagListItem.top-popup_listItem {
+	padding-top: var(--top-padding-2) !important;
+	padding-bottom: var(--top-padding-2) !important;
+	gap: 10px;
+}
+
+.top-tagSelector_tagListItemName {
+	border-radius: var(--top-radius-1);
+	width: 120px;
+	padding: 4px 2px;
+	margin: -4px -2px;
+	text-overflow: ellipsis;
+	overflow: hidden;
+	flex-grow: 1;
+}
+
+/* редактирование */
+.top-tagSelector_edit {
+	--top-icon-size: 18px;
+	--top-icon-color: var(--color-text-3);
+
+	width: 20px;
+	flex-grow: 0;
+}
+
+.top-tagSelector_edit:before {
+	line-height: 0;
+}
+
+.top-tagSelector_edit { opacity: 0; }
+.top-tagSelector_edit:hover {
+	--top-icon-color: var(--color-text-primary);
+}
+
+.top-tagSelector_tagListItem:hover .top-tagSelector_edit,
+.top-tagSelector_tagListItem-inEdit .top-tagSelector_edit {
+	cursor: pointer;
+	opacity: 1;
+}
+
+.top-tagSelector_tagListItem-inEdit {
+	background: var(--color-layout-front-3) !important;
+	outline: 1px dashed var(--color-line-2);
+	outline-offset: -1px;
+}
+
+.top-tagSelector_tagListItem-inEdit .top-tagSelector_tagListItemName {
+	cursor: text;
+	background: var(--color-layout-front-1);
+}
+
+/* disabled */
+.top-tagSelector_tagListItem-disabled {
+	cursor: not-allowed !important;
+	opacity: 0.85;
+}
+.top-tagSelector_tagListItem-disabled:hover {
+	background: inherit;
+}
+.top-tagSelector_tagListItem-disabled [data-tag_id] {
+	opacity: 0.6;
+}
+</style>

package/src/components/project/tagSelector/popupListItem/types.ts

@@ -0,0 +1,40 @@
+import type { Props as TagIconProps } from '../tagIcon/types';
+
+export interface Props extends TagIconProps {
+	/**
+	 * Можно ли изментять тег
+	 */
+	editable?: boolean;
+
+	/**
+	 * Запретить выбор тега
+	 */
+	disabled?: boolean;
+
+	/**
+	 * Можно ли исключать
+	 */
+	canExclude?: boolean;
+}
+
+export type Emits = {
+	/**
+	 * Изменить имя
+	 */
+	'update:name': [name: string];
+
+	/**
+	 * Сбросить статус выбора тега
+	 */
+	unselect: [];
+
+	/**
+	 * Исключить тег
+	 */
+	exclude: [];
+
+	/**
+	 * Выбрать тег
+	 */
+	select: [];
+}