From 2ed4ce3d7abe8b15f7b2bef0663a3dbbcb601f49 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E0=A4=95=E0=A4=BE=E0=A4=B0=E0=A4=A4=E0=A5=8B=E0=A4=AB?=
 =?UTF-8?q?=E0=A5=8D=E0=A4=AB=E0=A5=87=E0=A4=B2=E0=A4=B8=E0=A5=8D=E0=A4=95?=
 =?UTF-8?q?=E0=A5=8D=E0=A4=B0=E0=A4=BF=E0=A4=AA=E0=A5=8D=E0=A4=9F=E2=84=A2?=
 <netroy@users.noreply.github.com>
Date: Tue, 5 Nov 2024 19:16:03 +0100
Subject: [PATCH] refactor(editor): Convert TagsView to composition API
 (no-changelog) (#11566)

---
 .../TagsManager/TagsView/TagsView.vue         | 321 +++++++++---------
 1 file changed, 158 insertions(+), 163 deletions(-)

diff --git a/packages/editor-ui/src/components/TagsManager/TagsView/TagsView.vue b/packages/editor-ui/src/components/TagsManager/TagsView/TagsView.vue
index e3d0342afc..9a75eb61f1 100644
--- a/packages/editor-ui/src/components/TagsManager/TagsView/TagsView.vue
+++ b/packages/editor-ui/src/components/TagsManager/TagsView/TagsView.vue
@@ -1,181 +1,176 @@
-<script lang="ts">
-import type { PropType } from 'vue';
-import { defineComponent } from 'vue';
-
+<script setup lang="ts">
+import { ref, computed } 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({
-	name: 'TagsView',
-	components: { TagsTableHeader, TagsTable },
-	props: {
-		usageColumnTitleLocaleKey: {
-			type: String as PropType<BaseTextKey>,
-			default: 'tagsTable.usage',
-		},
-		usageLocaleKey: {
-			type: String as PropType<BaseTextKey>,
-			default: 'tagsView.inUse',
-		},
-		tags: {
-			type: Array as () => ITag[],
-			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 })
-					: this.$locale.baseText('tagsView.notBeingUsed');
+const i18n = useI18n();
+const rbacStore = useRBACStore();
 
-			const disabled = this.isCreateEnabled || !!this.updateId || !!this.deleteId;
-			const tagRows = (this.tags ?? [])
-				.filter((tag) => this.stickyIds.has(tag.id) || matches(tag.name, this.search))
-				.map(
-					(tag): ITagRow => ({
-						tag,
-						usage: getUsage(tag.usageCount),
-						disable: disabled && tag.id !== this.deleteId && tag.id !== this.updateId,
-						update: disabled && tag.id === this.updateId,
-						delete: disabled && tag.id === this.deleteId,
-						canDelete: this.rbacStore.hasScope('tag:delete'),
-					}),
-				);
+const createEnabled = ref(false);
+const deleteId = ref('');
+const updateId = ref('');
+const search = ref('');
+const newName = ref('');
+const stickyIds = ref(new Set());
+const isSaving = ref(false);
 
-			return this.isCreateEnabled ? [{ 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);
-		},
+const isCreateEnabled = computed(() => props.tags.length === 0 || createEnabled.value);
 
-		onUpdateEnable(updateId: string): void {
-			this.updateId = updateId;
-		},
-		disableUpdate(): void {
-			this.updateId = '';
-			this.newName = '';
-		},
-		updateTag(): void {
-			this.isSaving = true;
-			const name = this.newName.trim();
-			const onUpdate = (updated: boolean) => {
-				this.isSaving = false;
-				if (updated) {
-					this.stickyIds.add(this.updateId);
-					this.disableUpdate();
-				}
-			};
+const rows = computed(() => {
+	const getUsage = (count: number | undefined) =>
+		count && count > 0
+			? i18n.baseText(props.usageLocaleKey, { adjustToNumber: count })
+			: i18n.baseText('tagsView.notBeingUsed');
 
-			this.$emit('update', this.updateId, name, onUpdate);
-		},
+	const disabled = isCreateEnabled.value || !!updateId.value || !!deleteId.value;
+	const tagRows = props.tags
+		.filter((tag) => stickyIds.value.has(tag.id) || matches(tag.name, search.value))
+		.map(
+			(tag): ITagRow => ({
+				tag,
+				usage: getUsage(tag.usageCount),
+				disable: disabled && tag.id !== deleteId.value && tag.id !== updateId.value,
+				update: disabled && tag.id === updateId.value,
+				delete: disabled && tag.id === deleteId.value,
+				canDelete: rbacStore.hasScope('tag:delete'),
+			}),
+		);
 
-		onDeleteEnable(deleteId: string): void {
-			this.deleteId = deleteId;
-		},
-		disableDelete(): void {
-			this.deleteId = '';
-		},
-		deleteTag(): void {
-			this.isSaving = true;
-			const onDelete = (deleted: boolean) => {
-				if (deleted) {
-					this.disableDelete();
-				}
-				this.isSaving = false;
-			};
-
-			this.$emit('delete', this.deleteId, onDelete);
-		},
-
-		onCreateEnable(): void {
-			this.createEnabled = true;
-			this.newName = '';
-		},
-		disableCreate(): void {
-			this.createEnabled = false;
-			this.$emit('disableCreate');
-		},
-		createTag(): void {
-			this.isSaving = true;
-			const name = this.newName.trim();
-			const onCreate = (created: ITag | null) => {
-				if (created) {
-					this.stickyIds.add(created.id);
-					this.disableCreate();
-				}
-				this.isSaving = false;
-			};
-
-			this.$emit('create', name, onCreate);
-		},
-
-		applyOperation(): void {
-			if (this.isSaving) {
-				return;
-			} else if (this.isCreateEnabled) {
-				this.createTag();
-			} else if (this.updateId) {
-				this.updateTag();
-			} else if (this.deleteId) {
-				this.deleteTag();
-			}
-		},
-		cancelOperation(): void {
-			if (this.isSaving) {
-				return;
-			} else if (this.isCreateEnabled) {
-				this.disableCreate();
-			} else if (this.updateId) {
-				this.disableUpdate();
-			} else if (this.deleteId) {
-				this.disableDelete();
-			}
-		},
-	},
+	return isCreateEnabled.value ? [{ create: true }, ...tagRows] : tagRows;
 });
+
+const onNewNameChange = (name: string): void => {
+	newName.value = name;
+};
+
+const onSearchChange = (searchValue: string): void => {
+	stickyIds.value.clear();
+	search.value = searchValue;
+};
+
+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) => {
+		isSaving.value = false;
+		if (updated) {
+			stickyIds.value.add(updateId.value);
+			disableUpdate();
+		}
+	};
+
+	emit('update', updateId.value, name, onUpdate);
+};
+
+const onDeleteEnable = (deleteIdValue: string): void => {
+	deleteId.value = deleteIdValue;
+};
+
+const disableDelete = (): void => {
+	deleteId.value = '';
+};
+
+const deleteTag = (): void => {
+	isSaving.value = true;
+	const onDelete = (deleted: boolean) => {
+		if (deleted) {
+			disableDelete();
+		}
+		isSaving.value = false;
+	};
+
+	emit('delete', deleteId.value, onDelete);
+};
+
+const onCreateEnable = (): void => {
+	createEnabled.value = true;
+	newName.value = '';
+};
+
+const disableCreate = (): void => {
+	createEnabled.value = false;
+	emit('disableCreate');
+};
+
+const createTag = (): void => {
+	isSaving.value = true;
+	const name = newName.value.trim();
+	const onCreate = (created: ITag | null) => {
+		if (created) {
+			stickyIds.value.add(created.id);
+			disableCreate();
+		}
+		isSaving.value = false;
+	};
+
+	emit('create', name, onCreate);
+};
+
+const applyOperation = (): void => {
+	if (isSaving.value) {
+		return;
+	} else if (isCreateEnabled.value) {
+		createTag();
+	} else if (updateId.value) {
+		updateTag();
+	} else if (deleteId.value) {
+		deleteTag();
+	}
+};
+
+const cancelOperation = (): void => {
+	if (isSaving.value) {
+		return;
+	} else if (isCreateEnabled.value) {
+		disableCreate();
+	} else if (updateId.value) {
+		disableUpdate();
+	} else if (deleteId.value) {
+		disableDelete();
+	}
+};
 </script>
 
 <template>