@topvisor/ui 1.1.0 → 1.2.0

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

@@ -0,0 +1,359 @@
+<script setup lang="ts">
+import { computed, reactive, ref, shallowRef, watch } from 'vue';
+
+import Core from '@/core/core/core';
+import { useI18n } from '@/core/plugins/i18n';
+import { storage } from '@/core/utils/dom';
+import { debounce } from '@/core/utils/lodash';
+
+import type { Option } from '@/components/forms/select/select';
+import TopSelect from '@/components/forms/select/select.vue';
+
+import TopButton from '@/components/forms/button/button.vue';
+
+import type { PopupEvent } from '@/components/popup/popup/popup';
+import TopPopup from '../../popup/popup/popup.vue';
+import TopPopupListItem from '../../popup/popup/listItem.vue';
+
+import type { Emits, FiltersAction, Props, Tag } from './types';
+import tagsDefaults from './tagsDefaults';
+import { genTagIdExcluded } from './utils/utils';
+
+import type { Props as TagListItemProps } from './popupListItem/types';
+import TopTagListItem from './popupListItem/tagPopupListItem.vue';
+
+import type { TagSelectorTarget } from './popupOpener/types';
+import TopTagSelectorPopupOpener from './popupOpener/popupOpener.vue';
+
+const i18n = useI18n();
+
+const props = withDefaults(defineProps<Props>(), {
+	tagsMax: 10,
+	requiredForSetter: true,
+	emitDelay: 500,
+});
+
+/**
+ * Выбранные теги кнопки в этом компоненте
+ *
+ * Редактирвоание ведется только через `editTarget.model`
+ */
+const model = defineModel<Props['modelValue']>({
+	required: true,
+});
+
+/**
+ * Список тегов
+ */
+const tags = defineModel<Tag[]>('tags', {
+	default: reactive(tagsDefaults),
+});
+
+const emit = defineEmits<Emits>();
+
+const emitDebounce: typeof emit = debounce((name, e) => {
+	emit(name, e);
+}, props.emitDelay);
+
+// требуется сразу указать один тег
+if (props.singleMode && !model.value.length) {
+	model.value = [tags.value[0].id];
+}
+
+const id = props.id ?? 'top-popup-id-' + Math.random() + '';
+
+const filtersAction = ref<FiltersAction>('add');
+
+/**
+ * Сгенерировать опции для выбора дейсвтия массого редактирования
+ */
+const genFiltersActionOptions = () => {
+	const tagsText = ' ' + i18n.Common.Tags?.toLowerCase();
+
+	const res = new Map<FiltersAction, Option>();
+	res.set('add', { value: 'add', title: i18n.Common.Add + tagsText });
+	res.set('replace', { value: 'replace', title: i18n.Common.Replace + tagsText });
+	res.set('delete', { value: 'delete', title: i18n.Common.Delete + tagsText });
+
+	return res;
+};
+
+/**
+ * Целевой объект редактирвоания тегов
+ *
+ * Определяется кнопкой, которая открыла popup выбора тегов
+ */
+let target = shallowRef<TagSelectorTarget>({
+	model,
+	mode: 'filter',
+	targetId: undefined,
+	filters: undefined,
+	payload: undefined,
+});
+
+watch(model, () => {
+	emitDebounce('selector', model.value);
+});
+
+/**
+ * Можно ли выбрать еще теги
+ */
+const disabled = computed(() => {
+	if (target.value.mode !== 'setter') return;
+
+	if (!props.maxTagsForSetter) return;
+
+	// массовая смена тегов, количество тегов в результате узнать невозможно
+	if (target.value.filters) return;
+
+	return target.value.model.value.length >= props.maxTagsForSetter;
+});
+
+const genTargetTagState = (tagId: Tag['id'] | 'all'): TagListItemProps['state'] => {
+	if (tagId !== 'all') {
+		if (target.value.model.value.includes(tagId)) return 'selected';
+
+		if (target.value.model.value.includes(genTagIdExcluded(tagId))) return 'excluded';
+	}
+
+	// Все теги, ни один из тегов не выбран
+	if (tagId === 'all' && !target.value.model.value.length) return 'selected';
+
+	return '';
+};
+
+const updateTargetModel = (tagId: Tag['id'], action: 'unselect' | 'select' | 'exclude') => {
+	const tagIdExcluded = genTagIdExcluded(tagId);
+
+	let tagsIds = target.value.model.value.filter(modelTagId => modelTagId !== tagId && modelTagId !== tagIdExcluded);
+
+	if (action === 'select') tagsIds.push(tagId);
+	if (action === 'exclude') tagsIds.push(tagIdExcluded);
+
+	// режим редактирвоания тегов одного объекта с требованием указать хотя бы один тег
+	if (target.value.mode === 'setter' && target.value.targetId !== undefined && props.requiredForSetter) {
+		// нельзя снимать выделение со всех тегов
+		if (!tagsIds.length) {
+			tagsIds.push('1');
+		}
+
+		// при первом выборе сразу снять тег "Без тега"
+		if (tagsIds.length === 2 && target.value.model.value.length === 1 && target.value.model.value[0] === '1') {
+			tagsIds = tagsIds.filter((tagId) => tagId !== '1');
+		}
+	}
+
+	// режим выбора одного тега
+	if (props.singleMode && !target.value.filters) {
+		// нужно указать хотя бы один тег
+		if (!tagsIds.length) {
+			tagsIds = target.value.model.value;
+		}
+
+		if (tagsIds.length > 1) {
+			tagsIds = [tagsIds[tagsIds.length - 1]];
+		}
+	}
+
+	// всегда выводить теги в порядке, указанном в настройках tags
+	tagsIds.sort((a, b) => {
+		if (!props.tags) return 0;
+
+		const aIndex = props.tags.findIndex((tag) => tag.id === a);
+		const bIndex = props.tags.findIndex((tag) => tag.id === b);
+
+		return aIndex - bIndex;
+	});
+
+	target.value.model.value = tagsIds;
+
+	if (target.value.mode === 'setter' && target.value.targetId !== undefined) {
+		emitDebounce('setter', {
+			tagsIds: tagsIds as Tag['id'][],
+			targetId: target.value.targetId,
+			payload: target.value.payload,
+		});
+	}
+};
+
+const classString = computed(() => {
+	let res = 'top-tagSelector_popup';
+
+	if (target.value.mode === 'filter') res += ' top-tagSelector_popup-filter';
+	if (target.value.mode === 'setter') res += ' top-tagSelector_popup-setter';
+
+	return res;
+});
+
+/**
+ * Добавить тег
+ */
+const addTag = () => {
+	const tagName = prompt('', 'New tag');
+	if (!tagName || tagName === 'New tag') return;
+
+	const tagId = tags.value.length + 1;
+
+	tags.value.push({
+		id: String(tagId) as Tag['id'],
+		name: tagName,
+		color_id: String((tagId - 1) % 10 + 1) as Tag['color_id'],
+	});
+
+	emit('tagsChanged', tags.value);
+};
+
+const onOpen = (popupEvent: PopupEvent) => {
+	// popup открыт другой кнопкой c другим modelValue, для редактирвоания объектов
+	target.value = storage(popupEvent.elPopupOpener, 'topTagSelectorTarget');
+	if (!target.value) throw new Error('Open popup TopTagSelector required v-data:topTagSelectorTarget');
+
+	// при начале массовой установки тегов сбросить состояние формы
+	if (target.value.filters) {
+		filtersAction.value = 'add';
+		target.value.model.value = [];
+	}
+
+	if (!Core.$?.ui['sortable']) {
+		console.info('Для работы сортировки требуется глобальная загрузка jQuery UI Sortable');
+
+		return;
+	}
+
+	if (!Core.state.isMobile && !Core.state.isMobileUA && tags.value) {
+		$(popupEvent.elPopup).sortable({
+			items: 'li:has([data-tag_id]:not([data-tag_id="all"]))',
+
+			/**
+			 * @todo Удалить `[contenteditable="true"]` через пол года после выхода версии firefox с поддержкой contenteditable plaintext-only, включая бета версии
+			 */
+			cancel: '[contenteditable="plaintext-only"], [contenteditable="true"]',
+
+			distance: 10,
+			stop: function (_e, ui) {
+				if (!tags.value) return;
+
+				const $tags = $(ui.item).parent().find('[data-tag_id]');
+
+				const tagsSorted: Tag['id'][] = [];
+				$tags.each((_index, elTag) => {
+					if (!tags.value) return;
+
+					const tagId = $(elTag).attr('data-tag_id') as Tag['id'];
+					tagsSorted.push(tagId);
+				});
+
+				tags.value.sort((tagIdA, tagIdB) => {
+					const a = tagsSorted.findIndex(tagSorted => tagSorted === tagIdA.id);
+					const b = tagsSorted.findIndex(tagSorted => tagSorted === tagIdB.id);
+
+					return a - b;
+				});
+
+				emitDebounce('tagsChanged', tags.value);
+			},
+		});
+	}
+};
+
+const onClose = (popupEvent: PopupEvent) => {
+	if (!Core.$?.ui['sortable']) return;
+
+	if ($(popupEvent.elPopup).data('ui-sortable')) {
+		$(popupEvent.elPopup).sortable('destroy');
+	}
+};
+</script>
+
+<template>
+	<TopTagSelectorPopupOpener
+		class="top-select_arrow"
+		v-model="model"
+		:id
+		:tags
+		mode="filter"
+		useTopButton
+	/>
+
+	<TopPopup
+		:id
+		:class="classString"
+		@open="onOpen($event)"
+		@close="onClose($event)"
+		:transition-duration="50"
+	>
+		<!-- Массовое редактирвоание-->
+		<template #header v-if="target.mode === 'setter' && target.filters">
+			<TopSelect
+				v-model="filtersAction"
+				:options="genFiltersActionOptions()"
+			/>
+		</template>
+
+		<template #footer v-if="target.mode === 'setter' && target.filters">
+			<TopButton color="theme">
+				{{ $i18n.Common.Cancel }}
+			</TopButton>
+
+			<TopButton
+				@click="emitDebounce('setter', {
+					tagsIds: target.model.value as Tag['id'][],
+					filters: target.filters,
+					filtersAction,
+					payload: target.payload,
+				})"
+			>
+				{{ filtersAction === 'add' ? $i18n.Common['Add'] : '' }}
+				{{ filtersAction === 'replace' ? $i18n.Common['Replace'] : '' }}
+				{{ filtersAction === 'delete' ? $i18n.Common['Remove'] : '' }}
+			</TopButton>
+		</template>
+
+		<template #contentList>
+			<TopTagListItem
+				v-if="target.mode === 'filter' && !singleMode"
+				id="all"
+				colorId=""
+				:name="$i18n.Common.All_tags ?? ''"
+				:state="target.model.value.length ? '' : 'selected'"
+				@select="target.model.value = []"
+			/>
+
+			<TopTagListItem
+				v-for="tag in tags"
+				:key="tag.id"
+				:id="tag.id"
+				:colorId="tag.color_id"
+				:name="tag.name"
+				:state="genTargetTagState(tag.id)"
+				:canExclude="target.mode === 'filter' && !singleMode"
+				:editable="tagsEditable"
+				:disabled="disabled && genTargetTagState(tag.id) === ''"
+				@unselect="updateTargetModel(tag.id, 'unselect')"
+				@select="updateTargetModel(tag.id, 'select')"
+				@exclude="updateTargetModel(tag.id, 'exclude')"
+				@update:name="tag.name = $event as string, emitDebounce('tagsChanged', tags);"
+			/>
+
+			<TopPopupListItem
+				v-if="tagsEditable && tags.length < tagsMax && tags.length < 20"
+				data-top-icon=""
+				@click.stop="addTag"
+			>
+				{{ $i18n.Common.Add }}
+			</TopPopupListItem>
+		</template>
+	</TopPopup>
+</template>
+
+<style>
+.top-tagSelector_popup .top-popup {
+	user-select: none;
+	min-width: 220px !important;
+	text-align: left;
+}
+
+.top-tagSelector_popup .top-popup_header .top-select{
+	flex-grow: 1;
+}
+</style>

package/src/components/project/tagSelector/tagsDefaults.ts

@@ -0,0 +1,54 @@
+import type { Tag } from './types';
+
+export default [
+	{
+		id: '1',
+		name: 'Without Tag',
+		color_id: '1',
+	},
+	{
+		id: '2',
+		name: 'Red',
+		color_id: '2',
+	},
+	{
+		id: '3',
+		name: 'Orange',
+		color_id: '3',
+	},
+	{
+		id: '4',
+		name: 'Yellow',
+		color_id: '4',
+	},
+	{
+		id: '5',
+		name: 'Blue',
+		color_id: '5',
+	},
+	{
+		id: '6',
+		name: 'Purple',
+		color_id: '6',
+	},
+	{
+		id: '7',
+		name: 'Green',
+		color_id: '7',
+	},
+	{
+		id: '8',
+		name: 'Magenta',
+		color_id: '8',
+	},
+	{
+		id: '9',
+		name: 'Dark blue',
+		color_id: '9',
+	},
+	{
+		id: '10',
+		name: 'Turquoise',
+		color_id: '10',
+	},
+] as Tag[];

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

@@ -0,0 +1,159 @@
+import type { components as componentsTagId } from 'topvisor-openapi/src/ts/Tags_2/Types/TagId';
+
+/**
+ * Информация о теге
+ */
+export interface Tag {
+	/**
+	 * Индекс тега
+	 *
+	 * Определяет цвет, не зависит от порядка сортирвоки тегов
+	 */
+	id: componentsTagId['schemas']['Tags_2.Types.TagId'];
+
+	/**
+	 * Индекс цвета тега
+	 */
+	color_id: '' | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10';
+
+	/**
+	 * Имя тега
+	 */
+	name: string;
+}
+
+export type TagId = Tag['id'];
+export type TagIdExclude = `-${Tag['id']}`;
+
+export interface Props {
+	/**
+	 * Список выбранных тегов
+	 *
+	 * Положительны значения - выбранные теги
+	 *
+	 * Отрицательные значения - исключенные теги
+	 *
+	 * В режиме редактирвоания исклчюения тегов недоступно
+	 */
+	modelValue: (Tag['id'] | TagIdExclude)[];
+
+	/**
+	 * Список возможных тегов
+	 *
+	 * Если не указано, будет выведен список по умолчанию на английском языке
+	 *
+	 * Цвет тэгов определется в css в переменных, пример: `--color-tag-1`
+	 *
+	 * В режиме редактирования реализуют v-model поведение
+	 */
+	tags?: Tag[];
+
+	/**
+	 * Разрешить переименовывать и сортировать теги
+	 *
+	 * Требует указания `tags`
+	 *
+	 * Изменения фиксируется через `v-model` `tags`
+	 */
+	tagsEditable?: boolean;
+
+	/**
+	 * Максимальное количество тегов
+	 *
+	 * Если тегов меньше, появится кнопка добавления тега
+	 *
+	 * Если не указано теги добавлять нельзя
+	 *
+	 * Может быть от 10 до 20
+	 */
+	tagsMax?: number;
+
+	/**
+	 * Уникальный id для взаимодейсвтия с компонентом
+	 *
+	 * Для работы вне Vue используется в паре с `TopPopupWorker.genElPopupOpener()`
+	 *
+	 * @see import('../../popup/lib/worker').default.genElPopupOpener
+	 */
+	id?: string;
+
+	/**
+	 * Режим выбора одного тега
+	 */
+	singleMode?: boolean;
+
+	/**
+	 * Требуется ли указать хотя бы один тег, при установке тегов у объекта
+	 */
+	requiredForSetter?: boolean;
+
+	/**
+	 * Максимальное количество тегов, которые можно установить у объекта
+	 *
+	 * Если не указано, ограничения нет
+	 */
+	maxTagsForSetter?: number;
+
+	/**
+	 * Задержка перед вызовом emit в ms
+	 *
+	 * Имитирует ожидание завершения действий пользователя
+	 *
+	 * Не рекомендуется менять
+	 */
+	emitDelay?: number;
+}
+
+export type FiltersAction = 'add' | 'replace' | 'delete';
+
+export type Emits = {
+	/**
+	 * Изменен выбор тегов
+	 *
+	 * При выборе тегов в режиме `filter`
+	 */
+	selector: [tagsIds: Props['modelValue']];
+
+	/**
+	 * У объекта были изменены теги
+	 *
+	 * При выборе тегов в режиме `setter`
+	 */
+	setter: [
+		event: {
+			/**
+			 * Список выбранных тегов
+			 */
+			tagsIds: Tag['id'][],
+
+			/**
+			 * К какому объекту следует привязать теги
+			 *
+			 * Не будет указан, если указаны `filters`
+			 */
+			targetId?: number | string,
+
+			/**
+			 * По каким фильтрам следует установить теги
+			 *
+			 * Не будут указаны, если указан `targetId`
+			 */
+			filters?: [],
+
+			/**
+			 * Какое действие необходимо применить по указанным `filters`
+			 */
+			filtersAction?: FiltersAction,
+
+			/**
+			 * Полезная нагрузка, передаваямая кнопкой
+			 */
+			payload?: Record<string, any>,
+		}
+	];
+
+	/**
+	 * Изменен список тегов
+	 */
+	tagsChanged: [tags: NonNullable<Props['tags']>];
+}