All files / ext.wikilambda.edit/components/function ZImplementationList.vue

53.84% Statements 7/13
100% Branches 0/0
0% Functions 0/3
53.84% Lines 7/13

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                                                                              18x 18x 18x 18x 18x 18x     18x                                                                          
<template>
	<!--
		WikiLambda Vue component for ZLists of ZImplementation objects.
 
		@copyright 2020– Abstract Wikipedia team; see AUTHORS.txt
		@license MIT
	-->
	<div>
		<h3>
			{{ $i18n( 'wikilambda-editor-implementation-list-label' ).text() }}
		</h3>
		<ul class="ext-wikilambda-zlist-no-bullets">
			<wl-z-implementation-list-item
				v-for="( item ) in ZlistItems"
				:key="item.id"
				:zobject-id="item.id"
				:viewmode="getViewMode"
				:z-type="Constants.Z_IMPLEMENTATION"
				@remove-item="removeItem"
			></wl-z-implementation-list-item>
			<li v-if="!getViewMode">
				<cdx-button
					:title="tooltipAddListItem"
					@click="addNewItem"
				>
					{{ $i18n( 'wikilambda-editor-additem' ).text() }}
				</cdx-button>
			</li>
		</ul>
		<div v-if="getViewMode && ZlistItems.length <= 0">
			{{ $i18n( 'wikilambda-implementation-none-found' ).text() }}
		</div>
		<a :href="createNewImplementationLink">
			{{ $i18n( 'wikilambda-implementation-create-new' ).text() }}
		</a>
	</div>
</template>
 
<script>
var Constants = require( '../../Constants.js' ),
	mapActions = require( 'vuex' ).mapActions,
	mapGetters = require( 'vuex' ).mapGetters,
	CdxButton = require( '@wikimedia/codex' ).CdxButton,
	ZTypedList = require( '../main-types/ZTypedList.vue' ),
	ZImplementationListItem = require( './ZImplementationListItem.vue' );
 
// @vue/component
module.exports = exports = {
	name: 'wl-z-implementation-list',
	components: {
		'wl-z-implementation-list-item': ZImplementationListItem,
		'cdx-button': CdxButton
	},
	extends: ZTypedList,
	computed: $.extend( mapGetters( [ 'getNextObjectId', 'getCurrentZObjectId', 'getViewMode' ] ),
		{
			Constants: function () {
				return Constants;
			},
			createNewImplementationLink: function () {
				return new mw.Title( 'Special:CreateZObject' ).getUrl() + `?zid=${Constants.Z_IMPLEMENTATION}&${Constants.Z_IMPLEMENTATION_FUNCTION}=${this.getCurrentZObjectId}`;
			}
		}
	),
	methods: $.extend( mapActions( [ 'addZReference' ] ), {
		addNewItem: function ( /* event */ ) {
			var nextId = this.getNextObjectId,
				payload = {
					// since first item is type, new key is items length + 1
					key: `${this.ZlistItemsLength + 1}`,
					value: 'object',
					parent: this.zobjectId
				};
 
			this.addZObject( payload );
 
			this.addZReference( {
				value: '',
				id: nextId
			} );
		}
	} )
};
</script>