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