All files / ext.wikilambda.edit/views FunctionViewer.vue

88.88% Statements 32/36
50% Branches 10/20
66.66% Functions 4/6
88.88% Lines 32/36

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118    16x 16x 16x 16x 16x 16x 16x 16x 16x                   7x           7x 5x   2x                                                 7x             7x         7x 7x     16x   16x     16x 16x 16x     16x     16x     16x     16x         10x 10x 10x 10x 10x                               16x      
<!--
	WikiLambda Vue component for the special view of a ZFunction object.
 
	@copyright 2020– Abstract Wikipedia team; see AUTHORS.txt
	@license MIT
-->
<template>
	<div class="ext-wikilambda-function-viewer">
		<div class="ext-wikilambda-row">
			<div class="ext-wikilambda-col ext-wikilambda-col-8 ext-wikilambda-col-tablet-24">
				<!-- Widget About -->
				<wl-about-widget
					:edit="false"
					:type="functionType"
					@edit-metadata="dispatchAboutEvent"
				></wl-about-widget>
			</div>
			<div class="ext-wikilambda-col ext-wikilambda-col-16 ext-wikilambda-col-tablet-24">
				<!-- Widget Function Evaluator -->
				<wl-function-evaluator-widget
					:function-zid="getCurrentZObjectId"
				></wl-function-evaluator-widget>
				<!-- Function Details for Testers and Implementations -->
				<wl-function-viewer-details>
				</wl-function-viewer-details>
			</div>
		</div>
		<div
			v-if="displaySuccessMessage"
			class="ext-wikilambda-toast-message"
		>
			<cdx-message
				:auto-dismiss="true"
				:fade-in="true"
				type="success"
			>
				{{ $i18n( 'wikilambda-publish-successful' ).text() }}
			</cdx-message>
		</div>
	</div>
</template>
 
<script>
const { defineComponent } = require( 'vue' );
const CdxMessage = require( '@wikimedia/codex' ).CdxMessage,
	Constants = require( '../Constants.js' ),
	AboutWidget = require( '../components/widgets/About.vue' ),
	FunctionEvaluatorWidget = require( '../components/widgets/FunctionEvaluator.vue' ),
	FunctionViewerDetails = require( '../components/function/viewer/FunctionViewerDetails.vue' ),
	eventLogUtils = require( '../mixins/eventLogUtils.js' ),
	mapGetters = require( 'vuex' ).mapGetters;
 
module.exports = exports = defineComponent( {
	name: 'wl-function-viewer',
	components: {
		'wl-about-widget': AboutWidget,
		'wl-function-evaluator-widget': FunctionEvaluatorWidget,
		'wl-function-viewer-details': FunctionViewerDetails,
		'cdx-message': CdxMessage
	},
	mixins: [ eventLogUtils ],
	data: function () {
		return {
			functionType: Constants.Z_FUNCTION
		};
	},
	computed: Object.assign( mapGetters( [
		'getCurrentZObjectId',
		'getUserLangZid',
		'isCreateNewPage'
	] ), {
		displaySuccessMessage: function () {
			if ( mw.Uri().query ) {
				return mw.Uri().query.success === 'true';
			}
			return false;
		}
	} ),
	methods: {
		/**
		 * Dispatch event after a click of the edit icon in the About widget.
		 */
		dispatchAboutEvent: function () {
			this.dispatchEvent( 'wf.ui.editFunction.load', {
				edit: true,
				zobjecttype: Constants.Z_FUNCTION,
				isnewzobject: false,
				zobjectid: this.getCurrentZObjectId || null,
				zlang: this.getUserLangZid || null
			} );
			// T350495 Update the WikiLambda instrumentation to use core interaction events
			const interactionData = {
				zobjecttype: Constants.Z_FUNCTION,
				zobjectid: this.getCurrentZObjectId || null,
				zlang: this.getUserLangZid || null
			};
			this.submitInteraction( 'edit', interactionData );
		}
	},
	mounted: function () {
		this.dispatchEvent( 'wf.ui.editFunction.load', {
			edit: false,
			zobjecttype: Constants.Z_FUNCTION,
			isnewzobject: this.isCreateNewPage,
			zobjectid: this.getCurrentZObjectId || null,
			zlang: this.getUserLangZid || null
		} );
		const interactionData = {
			zobjecttype: Constants.Z_FUNCTION,
			zobjectid: this.getCurrentZObjectId || null,
			zlang: this.getUserLangZid || null
		};
		this.submitInteraction( 'view', interactionData );
		this.$emit( 'mounted' );
	}
} );
</script>