All files / ext.wikilambda.edit/components/default-view-types ZTypedListType.vue

90.47% Statements 19/21
100% Branches 5/5
66.66% Functions 4/6
90.47% Lines 19/21

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 119 120 121 122 123 124 125 126 127 128 129 130 131    24x 24x 24x 24x 24x 24x                                                     11x                                                                 2x   1x         1x               6x     24x   24x     24x 24x 24x       6x 6x           24x                                                      
<!--
	WikiLambda Vue component for a Typed List Type.
 
	@copyright 2020– Abstract Wikipedia team; see AUTHORS.txt
	@license MIT
-->
<template>
	<div class="ext-wikilambda-ztyped-list-type">
		<wl-z-object-key-value
			:row-id="rowId"
			:edit="edit"
			:list-item-type="listItemType"
			@change-event="changeType"
		></wl-z-object-key-value>
	</div>
</template>
 
<script>
const { defineComponent } = require( 'vue' );
const typeUtils = require( '../../mixins/typeUtils.js' ),
	Constants = require( '../../Constants.js' ),
	mapGetters = require( 'vuex' ).mapGetters,
	mapActions = require( 'vuex' ).mapActions;
 
module.exports = exports = defineComponent( {
	name: 'wl-z-typed-list-type',
	components: {
		//
	},
	mixins: [ typeUtils ],
	props: {
		rowId: {
			type: Number,
			required: false,
			default: 0
		},
		edit: {
			type: Boolean,
			required: true
		},
		parentRowId: {
			type: String,
			default: undefined
		},
		listItemType: {
			type: [ String, Object ],
			default: null
		},
		listItemsRowIds: {
			type: Array,
			default() {
				return [];
			}
		}
	},
	computed: Object.assign( mapGetters( [
		'getExpectedTypeOfKey',
		'getZObjectKeyByRowId'
	] ),
	{
		/**
		 * The parent key of the list type.
		 * They key for the list type itself will be '0', so we need the parent key to access the type
		 *
		 * @return {string}
		 */
		parentKey: function () {
			return this.getZObjectKeyByRowId( this.parentRowId );
		},
		/**
		 * Returns the expected type of the parent key.
		 * This can be either of these options:
		 * - Any object / Z1,
		 * - List / Z881(Z1), or
		 * - Typed list / Z881(Zn)
		 *
		 * @return {string}
		 */
		parentExpectedType: function () {
			return this.getExpectedTypeOfKey( this.parentKey );
		}
	} ),
	methods: Object.assign( mapActions( [
		'setListItemsForRemoval',
		'setError'
	] ), {
		changeType: function ( payload ) {
			// if the type of the list has changed, warn the user this will delete list items (now the 'wrong' type)
			// if the type was changed to Z1, we don't need to do this
			// TODO: we can be smarter here and check each item to know what actually needs to be deleted
			// (instead of deleting all items)
			if (
				( payload.value !== Constants.Z_OBJECT ) &&
				( payload.value !== this.listItemType ) &&
				( this.listItemsRowIds.length > 0 )
			) {
				// TODO (T332990): Revisit how we want to display a warning to the user about deletion
				this.setError( {
					rowId: 0,
					errorCode: Constants.errorCodes.TYPED_LIST_TYPE_CHANGED,
					errorType: Constants.errorTypes.WARNING
				} );
 
				this.setListItemsForRemoval( {
					parentRowId: this.parentRowId,
					listItems: this.listItemsRowIds
				} );
			}
		}
	} ),
	beforeCreate: function () {
		this.$options.components[ 'wl-z-object-key-value' ] = require( './ZObjectKeyValue.vue' );
	}
} );
</script>
 
<style lang="less">
@import '../../ext.wikilambda.edit.variables.less';
 
.ext-wikilambda-ztyped-list-type {
	margin-bottom: @wl-key-value-set-margin-bottom;
 
	&__label {
		display: inline-block;
		color: @color-subtle;
		font-weight: @font-weight-normal;
		margin-bottom: @spacing-12;
	}
}
</style>