BigW Consortium Gitlab

lock_issue_sidebar.vue 2.73 KB
Newer Older
Luke "Jared" Bennett committed
1
<script>
2 3 4 5
  import Flash from '../../../flash';
  import editForm from './edit_form.vue';
  import issuableMixin from '../../../vue_shared/mixins/issuable';
  import Icon from '../../../vue_shared/components/icon.vue';
Luke "Jared" Bennett committed
6

7 8 9 10
  export default {
    components: {
      editForm,
      Icon,
Luke "Jared" Bennett committed
11
    },
12 13 14
    mixins: [
      issuableMixin,
    ],
Luke "Jared" Bennett committed
15

16 17 18 19
    props: {
      isLocked: {
        required: true,
        type: Boolean,
Luke "Jared" Bennett committed
20 21
      },

22 23 24 25
      isEditable: {
        required: true,
        type: Boolean,
      },
Luke "Jared" Bennett committed
26

27 28 29 30 31 32 33
      mediator: {
        required: true,
        type: Object,
        validator(mediatorObject) {
          return mediatorObject.service && mediatorObject.service.update && mediatorObject.store;
        },
      },
Luke "Jared" Bennett committed
34 35
    },

36 37 38 39
    computed: {
      lockIcon() {
        return this.isLocked ? 'lock' : 'lock-open';
      },
Luke "Jared" Bennett committed
40

41 42 43
      isLockDialogOpen() {
        return this.mediator.store.isLockDialogOpen;
      },
Luke "Jared" Bennett committed
44 45
    },

46 47 48 49 50 51 52 53 54 55 56 57 58
    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}`)));
      },
Luke "Jared" Bennett committed
59
    },
60
  };
Luke "Jared" Bennett committed
61 62 63 64 65
</script>

<template>
  <div class="block issuable-sidebar-item lock">
    <div class="sidebar-collapsed-icon">
66 67 68
      <icon
        :name="lockIcon"
        :size="16"
Luke "Jared" Bennett committed
69
        aria-hidden="true"
70 71
        class="sidebar-item-icon is-active"
      />
Luke "Jared" Bennett committed
72 73 74
    </div>

    <div class="title hide-collapsed">
75
      Lock {{ issuableDisplayName }}
Luke "Jared" Bennett committed
76 77 78 79 80 81 82 83 84 85 86
      <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">
87
      <edit-form
Luke "Jared" Bennett committed
88 89 90 91 92 93 94
        v-if="isLockDialogOpen"
        :toggle-form="toggleForm"
        :is-locked="isLocked"
        :update-locked-attribute="updateLockedAttribute"
        :issuable-type="issuableType"
      />

95 96 97 98
      <div
        v-if="isLocked"
        class="value sidebar-item-value"
      >
99 100 101
        <icon
          name="lock"
          :size="16"
102
          aria-hidden="true"
103 104
          class="sidebar-item-icon inline is-active"
        />
Luke "Jared" Bennett committed
105 106 107
        {{ __('Locked') }}
      </div>

108 109 110 111
      <div
        v-else
        class="no-value sidebar-item-value hide-collapsed"
      >
112 113 114
        <icon
          name="lock-open"
          :size="16"
115
          aria-hidden="true"
116 117
          class="sidebar-item-icon inline"
        />
Luke "Jared" Bennett committed
118 119 120 121 122
        {{ __('Unlocked') }}
      </div>
    </div>
  </div>
</template>