summaryrefslogtreecommitdiff
path: root/app/assets/javascripts/sidebar/components/lock/lock_issue_sidebar.vue
blob: c4b2900e020f3604c3132154b758237c6affac63 (plain)
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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
<script>
/* global Flash */
import editForm from './edit_form.vue';
import issuableMixin from '../../../vue_shared/mixins/issuable';

export default {
  props: {
    isLocked: {
      required: true,
      type: Boolean,
    },

    isEditable: {
      required: true,
      type: Boolean,
    },

    mediator: {
      required: true,
      type: Object,
      validator(mediatorObject) {
        return mediatorObject.service && mediatorObject.service.update && mediatorObject.store;
      },
    },

    issuableType: {
      required: true,
      type: String,
    },
  },

  mixins: [
    issuableMixin,
  ],

  components: {
    editForm,
  },

  computed: {
    lockIconClass() {
      return this.isLocked ? 'fa-lock' : 'fa-unlock';
    },

    isLockDialogOpen() {
      return this.mediator.store.isLockDialogOpen;
    },
  },

  methods: {
    toggleForm() {
      this.mediator.store.isLockDialogOpen = !this.mediator.store.isLockDialogOpen;
    },

    updateLockedAttribute(locked) {
      this.mediator.service.update(this.issuableType, {
        discussion_locked: locked,
      })
      .then(() => location.reload())
      .catch(() => Flash(this.__(`Something went wrong trying to change the locked state of this ${this.issuableDisplayName(this.issuableType)}`)));
    },
  },
};
</script>

<template>
  <div class="block issuable-sidebar-item lock">
    <div class="sidebar-collapsed-icon">
      <i
        class="fa"
        :class="lockIconClass"
        aria-hidden="true"
      ></i>
    </div>

    <div class="title hide-collapsed">
      Lock {{issuableDisplayName(issuableType) }}
      <button
        v-if="isEditable"
        class="pull-right lock-edit btn btn-blank"
        type="button"
        @click.prevent="toggleForm"
      >
        {{ __('Edit') }}
      </button>
    </div>

    <div class="value sidebar-item-value hide-collapsed">
      <edit-form
        v-if="isLockDialogOpen"
        :toggle-form="toggleForm"
        :is-locked="isLocked"
        :update-locked-attribute="updateLockedAttribute"
        :issuable-type="issuableType"
      />

      <div
        v-if="isLocked"
        class="value sidebar-item-value"
      >
        <i
          aria-hidden="true"
          class="fa fa-lock sidebar-item-icon is-active"
        ></i>
        {{ __('Locked') }}
      </div>

      <div
        v-else
        class="no-value sidebar-item-value hide-collapsed"
      >
        <i
          aria-hidden="true"
          class="fa fa-unlock sidebar-item-icon"
        ></i>
        {{ __('Unlocked') }}
      </div>
    </div>
  </div>
</template>