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

92.23% Statements 95/103
71.42% Branches 5/7
75% Functions 3/4
92.23% Lines 95/103

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 1041x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 8x 8x 8x 1x 1x 1x 1x 1x 1x 10x 7x 7x 3x 3x 1x 1x 1x 1x 1x 1x                 1x 1x 8x 8x 8x 8x 8x 8x 8x 8x 8x 1x 1x  
<!--
	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-app-function-viewer-view">
		<div class="ext-wikilambda-app-row">
			<div class="ext-wikilambda-app-col ext-wikilambda-app-col-8 ext-wikilambda-app-col-tablet-24">
				<!-- Widget About -->
				<wl-about-widget
					:edit="false"
					:type="functionType"
					@edit-metadata="dispatchAboutEvent"
				></wl-about-widget>
			</div>
			<div class="ext-wikilambda-app-col ext-wikilambda-app-col-16 ext-wikilambda-app-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-app-toast-message"
		>
			<cdx-message
				:auto-dismiss="true"
				:fade-in="true"
				type="success"
			>
				{{ $i18n( 'wikilambda-publish-successful' ).text() }}
			</cdx-message>
		</div>
	</div>
</template>
 
<script>
const { CdxMessage } = require( '@wikimedia/codex' );
const { defineComponent } = require( 'vue' );
const Constants = require( '../Constants.js' ),
	AboutWidget = require( '../components/widgets/about/About.vue' ),
	FunctionEvaluatorWidget = require( '../components/widgets/function-evaluator/FunctionEvaluator.vue' ),
	FunctionViewerDetails = require( '../components/function/viewer/FunctionViewerDetails.vue' ),
	eventLogUtils = require( '../mixins/eventLogUtils.js' ),
	{ mapGetters } = require( 'vuex' );
 
module.exports = exports = defineComponent( {
	name: 'wl-function-viewer-view',
	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'
	] ), {
		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 () {
			// Log an event using Metrics Platform's core interaction events
			const interactionData = {
				zobjecttype: Constants.Z_FUNCTION,
				zobjectid: this.getCurrentZObjectId || null,
				zlang: this.getUserLangZid || null
			};
			this.submitInteraction( 'edit', interactionData );
		}
	},
	mounted: function () {
		// Log an event using Metrics Platform's core interaction events
		const interactionData = {
			zobjecttype: Constants.Z_FUNCTION,
			zobjectid: this.getCurrentZObjectId || null,
			zlang: this.getUserLangZid || null
		};
		this.submitInteraction( 'view', interactionData );
		this.$emit( 'mounted' );
	}
} );
</script>