refactor(editor): Convert TagsView to composition API (no-changelog) (#11566)

packages/editor-ui/src/components/TagsManager/TagsView/TagsView.vue

@@ -1,181 +1,176 @@
-<script lang="ts">
+<script setup lang="ts">
-import type { PropType } from 'vue';
+import { ref, computed } from 'vue';
-import { defineComponent } from 'vue';
-
 import type { ITag, ITagRow } from '@/Interface';
+import { useI18n } from '@/composables/useI18n';
 import TagsTableHeader from '@/components/TagsManager/TagsView/TagsTableHeader.vue';
 import TagsTable from '@/components/TagsManager/TagsView/TagsTable.vue';
-import { mapStores } from 'pinia';
-import { useUsersStore } from '@/stores/users.store';
 import { useRBACStore } from '@/stores/rbac.store';
 import type { BaseTextKey } from '@/plugins/i18n';
 
+defineOptions({ name: 'TagsView' });
+
+const props = withDefaults(
+	defineProps<{
+		usageColumnTitleLocaleKey?: BaseTextKey;
+		usageLocaleKey?: BaseTextKey;
+		tags: ITag[];
+		isLoading: boolean;
+	}>(),
+	{
+		usageColumnTitleLocaleKey: 'tagsTable.usage',
+		usageLocaleKey: 'tagsView.inUse',
+	},
+);
+
+const emit = defineEmits<{
+	update: [updateId: string, name: string, onUpdate: (updated: boolean) => void];
+	delete: [deleteId: string, onDelete: (deleted: boolean) => void];
+	create: [name: string, onCreate: (created: ITag | null) => void];
+	disableCreate: [];
+}>();
+
 const matches = (name: string, filter: string) =>
 	name.toLowerCase().trim().includes(filter.toLowerCase().trim());
 
-export default defineComponent({
+const i18n = useI18n();
-	name: 'TagsView',
+const rbacStore = useRBACStore();
-	components: { TagsTableHeader, TagsTable },
+
-	props: {
+const createEnabled = ref(false);
-		usageColumnTitleLocaleKey: {
+const deleteId = ref('');
-			type: String as PropType<BaseTextKey>,
+const updateId = ref('');
-			default: 'tagsTable.usage',
+const search = ref('');
-		},
+const newName = ref('');
-		usageLocaleKey: {
+const stickyIds = ref(new Set());
-			type: String as PropType<BaseTextKey>,
+const isSaving = ref(false);
-			default: 'tagsView.inUse',
+
-		},
+const isCreateEnabled = computed(() => props.tags.length === 0 || createEnabled.value);
-		tags: {
+
-			type: Array as () => ITag[],
+const rows = computed(() => {
-			required: true,
-		},
-		isLoading: {
-			type: Boolean,
-			required: true,
-		},
-	},
-	emits: {
-		update: null,
-		delete: null,
-		create: null,
-		disableCreate: null,
-	},
-	data() {
-		return {
-			createEnabled: false,
-			deleteId: '',
-			updateId: '',
-			search: '',
-			newName: '',
-			stickyIds: new Set(),
-			isSaving: false,
-		};
-	},
-	computed: {
-		...mapStores(useUsersStore, useRBACStore),
-		isCreateEnabled(): boolean {
-			return (this.tags || []).length === 0 || this.createEnabled;
-		},
-		rows(): ITagRow[] {
 	const getUsage = (count: number | undefined) =>
 		count && count > 0
-					? this.$locale.baseText(this.usageLocaleKey, { adjustToNumber: count })
+			? i18n.baseText(props.usageLocaleKey, { adjustToNumber: count })
-					: this.$locale.baseText('tagsView.notBeingUsed');
+			: i18n.baseText('tagsView.notBeingUsed');
 
-			const disabled = this.isCreateEnabled || !!this.updateId || !!this.deleteId;
+	const disabled = isCreateEnabled.value || !!updateId.value || !!deleteId.value;
-			const tagRows = (this.tags ?? [])
+	const tagRows = props.tags
-				.filter((tag) => this.stickyIds.has(tag.id) || matches(tag.name, this.search))
+		.filter((tag) => stickyIds.value.has(tag.id) || matches(tag.name, search.value))
 		.map(
 			(tag): ITagRow => ({
 				tag,
 				usage: getUsage(tag.usageCount),
-						disable: disabled && tag.id !== this.deleteId && tag.id !== this.updateId,
+				disable: disabled && tag.id !== deleteId.value && tag.id !== updateId.value,
-						update: disabled && tag.id === this.updateId,
+				update: disabled && tag.id === updateId.value,
-						delete: disabled && tag.id === this.deleteId,
+				delete: disabled && tag.id === deleteId.value,
-						canDelete: this.rbacStore.hasScope('tag:delete'),
+				canDelete: rbacStore.hasScope('tag:delete'),
 			}),
 		);
 
-			return this.isCreateEnabled ? [{ create: true }, ...tagRows] : tagRows;
+	return isCreateEnabled.value ? [{ create: true }, ...tagRows] : tagRows;
-		},
+});
-	},
-	methods: {
-		onNewNameChange(name: string): void {
-			this.newName = name;
-		},
-		onSearchChange(search: string): void {
-			this.stickyIds.clear();
-			this.search = search;
-		},
-		isHeaderDisabled(): boolean {
-			return this.isLoading || !!(this.isCreateEnabled || this.updateId || this.deleteId);
-		},
 
-		onUpdateEnable(updateId: string): void {
+const onNewNameChange = (name: string): void => {
-			this.updateId = updateId;
+	newName.value = name;
-		},
+};
-		disableUpdate(): void {
+
-			this.updateId = '';
+const onSearchChange = (searchValue: string): void => {
-			this.newName = '';
+	stickyIds.value.clear();
-		},
+	search.value = searchValue;
-		updateTag(): void {
+};
-			this.isSaving = true;
+
-			const name = this.newName.trim();
+const isHeaderDisabled = (): boolean => {
+	return props.isLoading || !!(isCreateEnabled.value || updateId.value || deleteId.value);
+};
+
+const onUpdateEnable = (updateIdValue: string): void => {
+	updateId.value = updateIdValue;
+};
+
+const disableUpdate = (): void => {
+	updateId.value = '';
+	newName.value = '';
+};
+
+const updateTag = (): void => {
+	isSaving.value = true;
+	const name = newName.value.trim();
 	const onUpdate = (updated: boolean) => {
-				this.isSaving = false;
+		isSaving.value = false;
 		if (updated) {
-					this.stickyIds.add(this.updateId);
+			stickyIds.value.add(updateId.value);
-					this.disableUpdate();
+			disableUpdate();
 		}
 	};
 
-			this.$emit('update', this.updateId, name, onUpdate);
+	emit('update', updateId.value, name, onUpdate);
-		},
+};
 
-		onDeleteEnable(deleteId: string): void {
+const onDeleteEnable = (deleteIdValue: string): void => {
-			this.deleteId = deleteId;
+	deleteId.value = deleteIdValue;
-		},
+};
-		disableDelete(): void {
+
-			this.deleteId = '';
+const disableDelete = (): void => {
-		},
+	deleteId.value = '';
-		deleteTag(): void {
+};
-			this.isSaving = true;
+
+const deleteTag = (): void => {
+	isSaving.value = true;
 	const onDelete = (deleted: boolean) => {
 		if (deleted) {
-					this.disableDelete();
+			disableDelete();
 		}
-				this.isSaving = false;
+		isSaving.value = false;
 	};
 
-			this.$emit('delete', this.deleteId, onDelete);
+	emit('delete', deleteId.value, onDelete);
-		},
+};
 
-		onCreateEnable(): void {
+const onCreateEnable = (): void => {
-			this.createEnabled = true;
+	createEnabled.value = true;
-			this.newName = '';
+	newName.value = '';
-		},
+};
-		disableCreate(): void {
+
-			this.createEnabled = false;
+const disableCreate = (): void => {
-			this.$emit('disableCreate');
+	createEnabled.value = false;
-		},
+	emit('disableCreate');
-		createTag(): void {
+};
-			this.isSaving = true;
+
-			const name = this.newName.trim();
+const createTag = (): void => {
+	isSaving.value = true;
+	const name = newName.value.trim();
 	const onCreate = (created: ITag | null) => {
 		if (created) {
-					this.stickyIds.add(created.id);
+			stickyIds.value.add(created.id);
-					this.disableCreate();
+			disableCreate();
 		}
-				this.isSaving = false;
+		isSaving.value = false;
 	};
 
-			this.$emit('create', name, onCreate);
+	emit('create', name, onCreate);
-		},
+};
 
-		applyOperation(): void {
+const applyOperation = (): void => {
-			if (this.isSaving) {
+	if (isSaving.value) {
 		return;
-			} else if (this.isCreateEnabled) {
+	} else if (isCreateEnabled.value) {
-				this.createTag();
+		createTag();
-			} else if (this.updateId) {
+	} else if (updateId.value) {
-				this.updateTag();
+		updateTag();
-			} else if (this.deleteId) {
+	} else if (deleteId.value) {
-				this.deleteTag();
+		deleteTag();
 	}
-		},
+};
-		cancelOperation(): void {
+
-			if (this.isSaving) {
+const cancelOperation = (): void => {
+	if (isSaving.value) {
 		return;
-			} else if (this.isCreateEnabled) {
+	} else if (isCreateEnabled.value) {
-				this.disableCreate();
+		disableCreate();
-			} else if (this.updateId) {
+	} else if (updateId.value) {
-				this.disableUpdate();
+		disableUpdate();
-			} else if (this.deleteId) {
+	} else if (deleteId.value) {
-				this.disableDelete();
+		disableDelete();
 	}
-		},
+};
-	},
-});
 </script>
 
 <template>