lock_issue_sidebar.vue 3.33 KB
Newer Older
Luke "Jared" Bennett's avatar
Luke "Jared" Bennett committed
1
<script>
2
import { __, sprintf } from '~/locale';
3
import Flash from '~/flash';
4 5 6 7
import tooltip from '~/vue_shared/directives/tooltip';
import issuableMixin from '~/vue_shared/mixins/issuable';
import Icon from '~/vue_shared/components/icon.vue';
import eventHub from '~/sidebar/event_hub';
8
import editForm from './edit_form.vue';
9
import { trackEvent } from 'ee_else_ce/event_tracking/issue_sidebar';
Luke "Jared" Bennett's avatar
Luke "Jared" Bennett committed
10

11 12 13 14 15
export default {
  components: {
    editForm,
    Icon,
  },
16 17 18 19 20

  directives: {
    tooltip,
  },

21
  mixins: [issuableMixin],
Luke "Jared" Bennett's avatar
Luke "Jared" Bennett committed
22

23 24 25 26 27
  props: {
    isLocked: {
      required: true,
      type: Boolean,
    },
Luke "Jared" Bennett's avatar
Luke "Jared" Bennett committed
28

29 30 31 32
    isEditable: {
      required: true,
      type: Boolean,
    },
Luke "Jared" Bennett's avatar
Luke "Jared" Bennett committed
33

34 35 36 37
    mediator: {
      required: true,
      type: Object,
      validator(mediatorObject) {
Mike Greiling's avatar
Mike Greiling committed
38
        return mediatorObject.service && mediatorObject.service.update && mediatorObject.store;
Filipa Lacerda's avatar
Filipa Lacerda committed
39
      },
Luke "Jared" Bennett's avatar
Luke "Jared" Bennett committed
40
    },
41
  },
Luke "Jared" Bennett's avatar
Luke "Jared" Bennett committed
42

43 44 45 46
  computed: {
    lockIcon() {
      return this.isLocked ? 'lock' : 'lock-open';
    },
Luke "Jared" Bennett's avatar
Luke "Jared" Bennett committed
47

48 49
    isLockDialogOpen() {
      return this.mediator.store.isLockDialogOpen;
Luke "Jared" Bennett's avatar
Luke "Jared" Bennett committed
50
    },
51 52 53 54

    tooltipLabel() {
      return this.isLocked ? __('Locked') : __('Unlocked');
    },
55
  },
Luke "Jared" Bennett's avatar
Luke "Jared" Bennett committed
56

57 58 59 60 61 62 63
  created() {
    eventHub.$on('closeLockForm', this.toggleForm);
  },

  beforeDestroy() {
    eventHub.$off('closeLockForm', this.toggleForm);
  },
Filipa Lacerda's avatar
Filipa Lacerda committed
64

65 66
  methods: {
    toggleForm() {
Mike Greiling's avatar
Mike Greiling committed
67
      this.mediator.store.isLockDialogOpen = !this.mediator.store.isLockDialogOpen;
68
    },
69 70
    onEditClick() {
      this.toggleForm();
71

72 73
      trackEvent('click_edit_button', 'lock_issue');
    },
74 75 76
    updateLockedAttribute(locked) {
      this.mediator.service
        .update(this.issuableType, {
Filipa Lacerda's avatar
Filipa Lacerda committed
77 78
          discussion_locked: locked,
        })
79
        .then(() => window.location.reload())
80 81
        .catch(() =>
          Flash(
Mike Greiling's avatar
Mike Greiling committed
82 83 84 85 86 87 88 89
            sprintf(
              __(
                'Something went wrong trying to change the locked state of this %{issuableDisplayName}',
              ),
              {
                issuableDisplayName: this.issuableDisplayName,
              },
            ),
90 91
          ),
        );
Luke "Jared" Bennett's avatar
Luke "Jared" Bennett committed
92
    },
93 94
  },
};
Luke "Jared" Bennett's avatar
Luke "Jared" Bennett committed
95 96 97 98
</script>

<template>
  <div class="block issuable-sidebar-item lock">
99
    <div
100
      v-tooltip
101 102
      :title="tooltipLabel"
      class="sidebar-collapsed-icon"
103 104
      data-container="body"
      data-placement="left"
105
      data-boundary="viewport"
106
      @click="toggleForm"
107
    >
Mike Greiling's avatar
Mike Greiling committed
108
      <icon :name="lockIcon" class="sidebar-item-icon is-active" />
Luke "Jared" Bennett's avatar
Luke "Jared" Bennett committed
109 110 111
    </div>

    <div class="title hide-collapsed">
112
      {{ sprintf(__('Lock %{issuableDisplayName}'), { issuableDisplayName: issuableDisplayName }) }}
Luke "Jared" Bennett's avatar
Luke "Jared" Bennett committed
113 114
      <button
        v-if="isEditable"
115
        class="float-right lock-edit"
Luke "Jared" Bennett's avatar
Luke "Jared" Bennett committed
116
        type="button"
117
        @click.prevent="onEditClick"
Luke "Jared" Bennett's avatar
Luke "Jared" Bennett committed
118 119 120 121 122 123
      >
        {{ __('Edit') }}
      </button>
    </div>

    <div class="value sidebar-item-value hide-collapsed">
124
      <edit-form
Luke "Jared" Bennett's avatar
Luke "Jared" Bennett committed
125 126 127 128 129 130
        v-if="isLockDialogOpen"
        :is-locked="isLocked"
        :update-locked-attribute="updateLockedAttribute"
        :issuable-type="issuableType"
      />

Mike Greiling's avatar
Mike Greiling committed
131 132
      <div v-if="isLocked" class="value sidebar-item-value">
        <icon :size="16" name="lock" class="sidebar-item-icon inline is-active" />
Luke "Jared" Bennett's avatar
Luke "Jared" Bennett committed
133 134 135
        {{ __('Locked') }}
      </div>

Mike Greiling's avatar
Mike Greiling committed
136 137
      <div v-else class="no-value sidebar-item-value hide-collapsed">
        <icon :size="16" name="lock-open" class="sidebar-item-icon inline" /> {{ __('Unlocked') }}
Luke "Jared" Bennett's avatar
Luke "Jared" Bennett committed
138 139 140 141
      </div>
    </div>
  </div>
</template>