User:Sophivorus/MassTemplateEdit.js

const MassTemplateEdit = {

	userAgent: 'MassTemplateEdit/1.0 (User:Sophivorus)',

	init( $content ) {
		$content.find( '.MassTemplateEdit' ).each( MassTemplateEdit.makeApp );
	},

	async makeApp() {
		/* global WikitextParser */
		mw.loader.getScript( '//www.mediawiki.org/w/load.php?modules=ext.gadget.Global-WikitextParser' );
		const require = await mw.loader.using( [
			'mediawiki.api',
			'@wikimedia/codex'
		] );
		const Vue = require( 'vue' );
		const Codex = require( '@wikimedia/codex' );
		const app = Vue.createMwApp( MassTemplateEdit.component, this.dataset );
		app.component( 'cdx-field', Codex.CdxField );
		app.component( 'cdx-lookup', Codex.CdxLookup );
		app.component( 'cdx-table', Codex.CdxTable );
		app.mount( this );
	},

	component: {
	
		template: `<div>
			<cdx-field style="width: 300px;">
				<template #label>Template</template>
				<cdx-lookup
					:selected="templateLookupSelected"
					:inputValue="templateLookupInputValue"
					:menuItems="templateLookupMenuItems"
					@update:selected="onTemplateLookupUpdateSelected"
					@update:inputValue="onTemplateLookupUpdateInputValue" />
			</cdx-field>
			<cdx-table
				caption="MassTemplateEdit"
				hideCaption="true"
				useRowHeaders="true"
				:columns="tableColumns"
				:data="tableData"
			>
				<template #item-page="{ item }">
					<a :href="item.href">{{ item.title }}</a>
				</template>
			</cdx-table>
		</div>`,

		data() {
			return {
				templateLookupSelected: null,
				templateLookupInputValue: '',
				templateLookupMenuItems: [],
				tableColumns: [],
				tableData: [],
			};
		},

		methods: {

			async onTemplateLookupUpdateInputValue( value ) {
				this.templateLookupInputValue = value;
				if ( !value ) {
					this.templateLookupMenuItems = [];
					return;
				}
				const response = await new mw.Api( { userAgent: MassTemplateEdit.userAgent } ).get( {
					action: 'opensearch',
					search: value,
					namespace: 10,
					limit: 5,
					redirects: 'resolve',
					format: 'json',
					formatversion: 2
				} );
				const titles = response[1];
				this.templateLookupMenuItems = titles.map( title => {
					const Title = new mw.Title( title );
					const value = Title.getMainText();
					return { value: value, label: value };
				} );
			},

			onTemplateLookupUpdateSelected( value ) {
				this.templateLookupInputValue = value;
				this.makeTable();
			},

			async makeTable() {

				// Get the template data
				const response = await new mw.Api( { userAgent: MassTemplateEdit.userAgent } ).get( {
					action: 'templatedata',
					titles: 'Template:' + this.templateLookupInputValue,
					redirects: true,
					format: 'json'
				} );
				const templateData = Object.values( response.pages )[0];
				const params = templateData.params;
				const paramOrder = templateData.paramOrder || Object.keys( templateData.params );
				const tableColumns = [
					{ id: 'page', label: 'Page' }
				];
				for ( const paramName of paramOrder ) {
					const paramData = params[ paramName ];
					const paramLabel = paramData.label.en;
					const paramColumn = {
						id: paramName,
						label: paramLabel
					};
					tableColumns.push( paramColumn );
				}
				this.tableColumns = tableColumns;
				
				// Get the data
				const response2 = await new mw.Api( { userAgent: MassTemplateEdit.userAgent } ).get( {
					action: 'query',
					generator: 'transcludedin',
					gtilimit: '50',
					titles: 'Template:' + this.templateLookupInputValue,
					prop: 'revisions',
					rvprop: 'content',
					rvslots: 'main',
					formatversion: 2,
				} );
				const tableData = [];
				for ( const page of response2.query.pages ) {
					const title = page.title;
					const Title = new mw.Title( title );
					const href = Title.getUrl();
					const row = {
						page: {
							title: title,
							href: href
						}
					}
					const wikitext = page.revisions[0].slots.main.content;
					const templateWikitext = WikitextParser.getTemplate( wikitext, this.templateLookupInputValue );
					const templateParams = WikitextParser.getTemplateParameters( templateWikitext );
					for ( const [ param, value ] of Object.entries( templateParams ) ) {
						row[ param ] = value;
					}
					tableData.push( row );
				}
				this.tableData = tableData;
			}
		}
	}
};

mw.hook( 'wikipage.content' ).add( MassTemplateEdit.init );