board_card.vue 1.88 KB
Newer Older
1
<script>
2
import './issue_card_inner';
3
import eventHub from '../eventhub';
Phil Hughes's avatar
Phil Hughes committed
4 5 6

const Store = gl.issueBoards.BoardsStore;

7
export default {
Phil Hughes's avatar
Phil Hughes committed
8 9 10 11 12
  name: 'BoardsIssueCard',
  components: {
    'issue-card-inner': gl.issueBoards.IssueCardInner,
  },
  props: {
Filipa Lacerda's avatar
Filipa Lacerda committed
13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36
    list: {
      type: Object,
      default: () => ({}),
    },
    issue: {
      type: Object,
      default: () => ({}),
    },
    issueLinkBase: {
      type: String,
      default: '',
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    index: {
      type: Number,
      default: 0,
    },
    rootPath: {
      type: String,
      default: '',
    },
Phil Hughes's avatar
Phil Hughes committed
37
  },
Phil Hughes's avatar
Phil Hughes committed
38
  data() {
Phil Hughes's avatar
Phil Hughes committed
39 40
    return {
      showDetail: false,
Phil Hughes's avatar
Phil Hughes committed
41
      detailIssue: Store.detail,
Phil Hughes's avatar
Phil Hughes committed
42 43 44
    };
  },
  computed: {
Phil Hughes's avatar
Phil Hughes committed
45
    issueDetailVisible() {
Phil Hughes's avatar
Phil Hughes committed
46
      return this.detailIssue.issue && this.detailIssue.issue.id === this.issue.id;
Phil Hughes's avatar
Phil Hughes committed
47
    },
Phil Hughes's avatar
Phil Hughes committed
48 49
  },
  methods: {
Phil Hughes's avatar
Phil Hughes committed
50
    mouseDown() {
Phil Hughes's avatar
Phil Hughes committed
51 52 53 54 55
      this.showDetail = true;
    },
    mouseMove() {
      this.showDetail = false;
    },
Phil Hughes's avatar
Phil Hughes committed
56
    showIssue(e) {
57
      if (e.target.classList.contains('js-no-trigger')) return;
Phil Hughes's avatar
Phil Hughes committed
58 59 60 61 62

      if (this.showDetail) {
        this.showDetail = false;

        if (Store.detail.issue && Store.detail.issue.id === this.issue.id) {
63
          eventHub.$emit('clearDetailIssue');
Phil Hughes's avatar
Phil Hughes committed
64
        } else {
65
          eventHub.$emit('newDetailIssue', this.issue);
Phil Hughes's avatar
Phil Hughes committed
66 67 68
          Store.detail.list = this.list;
        }
      }
Phil Hughes's avatar
Phil Hughes committed
69 70
    },
  },
Phil Hughes's avatar
Phil Hughes committed
71
};
72 73 74
</script>

<template>
Filipa Lacerda's avatar
Filipa Lacerda committed
75 76 77 78 79 80 81
  <li
    class="card"
    :class="{
      'user-can-drag': !disabled && issue.id,
      'is-disabled': disabled || !issue.id,
      'is-active': issueDetailVisible
    }"
82 83 84 85 86 87 88 89 90 91
    :index="index"
    :data-issue-id="issue.id"
    @mousedown="mouseDown"
    @mousemove="mouseMove"
    @mouseup="showIssue($event)">
    <issue-card-inner
      :list="list"
      :issue="issue"
      :issue-link-base="issueLinkBase"
      :root-path="rootPath"
Filipa Lacerda's avatar
Filipa Lacerda committed
92 93
      :update-filters="true"
    />
94 95
  </li>
</template>