todo.vue 2 KB
Newer Older
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
<script>
import { __ } from '~/locale';
import tooltip from '~/vue_shared/directives/tooltip';

import Icon from '~/vue_shared/components/icon.vue';
import LoadingIcon from '~/vue_shared/components/loading_icon.vue';

const MARK_TEXT = __('Mark todo as done');
const TODO_TEXT = __('Add todo');

export default {
  directives: {
    tooltip,
  },
  components: {
    Icon,
    LoadingIcon,
  },
  props: {
    issuableId: {
      type: Number,
      required: true,
    },
    issuableType: {
      type: String,
      required: true,
    },
28
    isTodo: {
29 30 31 32
      type: Boolean,
      required: false,
      default: true,
    },
33 34 35 36 37
    isActionActive: {
      type: Boolean,
      required: false,
      default: false,
    },
38 39 40 41 42 43 44 45 46 47 48 49 50
    collapsed: {
      type: Boolean,
      required: false,
      default: false,
    },
  },
  computed: {
    buttonClasses() {
      return this.collapsed ?
        'btn-blank btn-todo sidebar-collapsed-icon dont-change-state' :
        'btn btn-default btn-todo issuable-header-btn float-right';
    },
    buttonLabel() {
51
      return this.isTodo ? MARK_TEXT : TODO_TEXT;
52 53
    },
    collapsedButtonIconClasses() {
54
      return this.isTodo ? 'todo-undone' : '';
55 56
    },
    collapsedButtonIcon() {
57
      return this.isTodo ? 'todo-done' : 'todo-add';
58 59 60 61 62
    },
  },
  methods: {
    handleButtonClick() {
      this.$emit('toggleTodo');
63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79
    },
  },
};
</script>

<template>
  <button
    v-tooltip
    :class="buttonClasses"
    :title="buttonLabel"
    :aria-label="buttonLabel"
    :data-issuable-id="issuableId"
    :data-issuable-type="issuableType"
    type="button"
    data-container="body"
    data-placement="left"
    data-boundary="viewport"
80
    @click="handleButtonClick"
81 82
  >
    <icon
83
      v-show="collapsed"
84 85 86 87
      :css-classes="collapsedButtonIconClasses"
      :name="collapsedButtonIcon"
    />
    <span
88
      v-show="!collapsed"
89 90 91 92 93
      class="issuable-todo-inner"
    >
      {{ buttonLabel }}
    </span>
    <loading-icon
94
      v-show="isActionActive"
95 96 97 98
      :inline="true"
    />
  </button>
</template>