MediaWiki:Gadget-BatchDelete.vue

Not: Yayımladıktan sonra değişiklikleri görmeniz için tarayıcınızın önbelleğini temizlemeniz gerekebilir.

• Firefox / Safari: Shift tuşuna basılıyken Yeniden Yükle'ye tıklayın ya da Ctrl-F5 ya da Ctrl-R tıklayın (Mac için ⌘-R)
• Google Chrome: Ctrl-Shift-R'ye basın. (Mac için ⌘-Shift-R)
• Edge: Ctrl basılıyken Yenile'ye tıklayın ya da Ctrl-F5'e basın.

<template>
	<cdx-dialog
		v-model:open="dialogOpen"
		:title="$i18n('gadget-batchdelete-title').text()"
		:use-close-button="true"
	>
		<form>
			<cdx-field>
				<template #label>
					{{ $i18n('gadget-batchdelete-reason') }}
				</template>
				<cdx-text-input v-model="reason" />
			</cdx-field>
			<cdx-field>
				<template #label>
					{{ $i18n('gadget-batchdelete-add-category') }}
				</template>
				<template #description>
					{{ $i18n('gadget-batchdelete-add-category-label') }}
				</template>
				<cdx-lookup
					v-model:selected="selectedCategory"
					:menu-items="menuItems"
					@update:selected="categorySelected"
					@input="onCategoryInput"
				/>
			</cdx-field>
			<cdx-field>
				<template #label>
					{{ $i18n('gadget-batchdelete-list') }}
				</template>
				<template #description>
					{{ $i18n('gadget-batchdelete-list-label') }}
				</template>
				<cdx-text-area
					v-model="pageListInput"
					:disabled="inProgress"
					rows="10"
				/>
			</cdx-field>
			<cdx-field>
				<template #label>
					{{ $i18n('gadget-batchdelete-log') }}
				</template>
				<template #description>
					{{ $i18n('gadget-batchdelete-log-label') }}
				</template>
				<cdx-text-area
					v-model="logListOutput"
					:disabled="true"
					rows="10"
				/>
			</cdx-field>
		</form>
		<template #footer>
			<cdx-button @click="closeDialog">
				{{ $i18n('cdx-dialog-close-button-label') }}
			</cdx-button>
			<cdx-button
				:disabled="!inProgress"
				@click="pauseBatchDelete"
			>{{ $i18n('gadget-batchdelete-pause') }}</cdx-button>
			<cdx-button
				:disabled="inProgress"
				@click="startBatchDelete"
			>{{ $i18n('gadget-batchdelete-start') }}</cdx-button>
		</template>
	</cdx-dialog>
</template>

<script>
const {computed, defineComponent, ref} = require('vue');
const {
	CdxButton,
	CdxDialog,
	CdxField,
	CdxLookup,
	CdxTextArea,
	CdxTextInput,
} = mw.loader.require('@wikimedia/codex');
const api = new mw.Api();

const dialogOpen = ref(false);
const reason = ref('');
const logList = ref([]);
const logListOutput = computed(() => logList.value.join('\n'));
const pageListInput = ref('');
const pageList = computed(() => pageListInput
	.value
	.trim()
	.split('\n')
	.map(p => p.trim())
	.filter(Boolean)
);
const selectedCategory = ref('');
const menuItems = ref([]);
const inProgress = ref(false);

function log(message, ...args) {
	logList.value.push(mw.msg(message, ...args));
}

async function deleteOnce() {
	if (!inProgress.value) {
		return;
	}
	const title = pageList.value[0];
	if (!title) {
		log('gadget-batchdelete-log-finished');
		inProgress.value = false;
		return;
	}
	pageListInput.value = pageList.value.slice(1).join('\n');
	try {
		await api.postWithToken('csrf', {
			action: 'delete',
			title,
			reason: reason.value,
			tags: ['batchdelete'],
			bot: true,
		});
	} catch (code) {
		log('gadget-batchdelete-log-error', title, code);
	}
	return deleteOnce();
}

function startBatchDelete() {
	inProgress.value = true;
	deleteOnce();
}

function pauseBatchDelete() {
	inProgress.value = false;
}

function closeDialog() {
	pauseBatchDelete();
	dialogOpen.value = false;
}

async function categorySelected(cmtitle, cmcontinue) {
	if (!cmtitle) {
		return;
	}
	const data = await api.get({
		action: 'query',
		list: 'categorymembers',
		cmtitle,
		cmcontinue,
		cmlimit: 'max',
	});
	selectedCategory.value = '';
	pageListInput.value = [
		...pageList.value,
		...data.query.categorymembers.map(c => c.title)
	].join('\n');
}

async function onCategoryInput(search) {
	if (!search) {
		return;
	}
	const [, names, descriptions] = await api.get({
		action: 'opensearch',
		namespace: 14,
		search,
		warningsaserror: true,
	});
	menuItems.value = names.map((name, index) => ({
		label: name.replace(/^[^:]+:/, ''),
		value: name,
		description: descriptions[index],
	}));
}

module.exports = defineComponent({
	components: {
		CdxButton,
		CdxDialog,
		CdxField,
		CdxLookup,
		CdxTextArea,
		CdxTextInput,
	},
	setup() {
		return {
			dialogOpen,
			reason,
			pageListInput,
			logListOutput,
			selectedCategory,
			menuItems,
			inProgress,
			startBatchDelete,
			closeDialog,
			pauseBatchDelete,
			categorySelected,
			onCategoryInput,
		};
	},
	mounted() {
		mw.util.addPortletLink(
			'p-tb',
			'#',
			mw.msg('gadget-batchdelete-title'),
			't-batch-delete',
			mw.msg('gadget-batchdelete-description')
		).addEventListener('click', event => {
			event.preventDefault();
			dialogOpen.value = true;
		});
	},
});
</script>