1<script> 2import { mapGetters, mapActions, mapState } from 'vuex'; 3import BoardListHeader from 'ee_else_ce/boards/components/board_list_header.vue'; 4import { isListDraggable } from '../boards_util'; 5import BoardList from './board_list.vue'; 6 7export default { 8 components: { 9 BoardListHeader, 10 BoardList, 11 }, 12 inject: { 13 boardId: { 14 default: '', 15 }, 16 }, 17 props: { 18 list: { 19 type: Object, 20 default: () => ({}), 21 required: false, 22 }, 23 disabled: { 24 type: Boolean, 25 required: true, 26 }, 27 }, 28 computed: { 29 ...mapState(['filterParams', 'highlightedLists']), 30 ...mapGetters(['getBoardItemsByList']), 31 highlighted() { 32 return this.highlightedLists.includes(this.list.id); 33 }, 34 listItems() { 35 return this.getBoardItemsByList(this.list.id); 36 }, 37 isListDraggable() { 38 return isListDraggable(this.list); 39 }, 40 }, 41 watch: { 42 filterParams: { 43 handler() { 44 if (this.list.id && !this.list.collapsed) { 45 this.fetchItemsForList({ listId: this.list.id }); 46 } 47 }, 48 deep: true, 49 immediate: true, 50 }, 51 'list.id': { 52 handler(id) { 53 if (id) { 54 this.fetchItemsForList({ listId: this.list.id }); 55 } 56 }, 57 }, 58 highlighted: { 59 handler(highlighted) { 60 if (highlighted) { 61 this.$nextTick(() => { 62 this.$el.scrollIntoView({ behavior: 'smooth', block: 'start' }); 63 }); 64 } 65 }, 66 immediate: true, 67 }, 68 }, 69 methods: { 70 ...mapActions(['fetchItemsForList']), 71 }, 72}; 73</script> 74 75<template> 76 <div 77 :class="{ 78 'is-draggable': isListDraggable, 79 'is-collapsed': list.collapsed, 80 'board-type-assignee': list.listType === 'assignee', 81 }" 82 :data-list-id="list.id" 83 class="board gl-display-inline-block gl-h-full gl-px-3 gl-vertical-align-top gl-white-space-normal is-expandable" 84 data-qa-selector="board_list" 85 > 86 <div 87 class="board-inner gl-display-flex gl-flex-direction-column gl-relative gl-h-full gl-rounded-base" 88 :class="{ 'board-column-highlighted': highlighted }" 89 > 90 <board-list-header :list="list" :disabled="disabled" /> 91 <board-list ref="board-list" :disabled="disabled" :board-items="listItems" :list="list" /> 92 </div> 93 </div> 94</template> 95